globals.css.liquid•3.38 kB
@import 'tailwindcss';
@plugin '@tailwindcss/forms';
@theme {
/* Font configuration */
--font-primary: 'Inter', system-ui, sans-serif;
/* Primary color palette - converted to modern oklch format */
--color-primary-50: oklch(0.97 0.024 213.79);
--color-primary-100: oklch(0.94 0.05 213.79);
--color-primary-200: oklch(0.86 0.1 213.79);
--color-primary-300: oklch(0.76 0.15 213.79);
--color-primary-400: oklch(0.7 0.19 213.79);
--color-primary-500: oklch(0.61 0.22 213.79);
--color-primary-600: oklch(0.52 0.2 213.79);
--color-primary-700: oklch(0.43 0.18 213.79);
--color-primary-800: oklch(0.37 0.15 213.79);
--color-primary-900: oklch(0.31 0.12 213.79);
--color-primary-950: oklch(0.18 0.07 213.79);
/* Dark color */
--color-dark: #222222;
/* Animation configuration */
--animate-flicker: flicker 3s linear infinite;
--animate-shimmer: shimmer 1.3s linear infinite;
}
/* Animation keyframes */
@keyframes flicker {
0%,
19.999%,
22%,
62.999%,
64%,
64.999%,
70%,
100% {
opacity: 0.99;
filter: drop-shadow(0 0 1px rgba(252, 211, 77))
drop-shadow(0 0 15px rgba(245, 158, 11))
drop-shadow(0 0 1px rgba(252, 211, 77));
}
20%,
21.999%,
63%,
63.999%,
65%,
69.999% {
opacity: 0.4;
filter: none;
}
}
@keyframes shimmer {
0% {
background-position: -700px 0;
}
100% {
background-position: 700px 0;
}
}
@layer base {
/* inter var - latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: block;
src: url('/fonts/inter-var-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
U+2215, U+FEFF, U+FFFD;
}
.cursor-newtab {
cursor: url('/images/new-tab.png') 10 10, pointer;
}
/* #region /**=========== Typography =========== */
.h0 {
@apply font-primary text-3xl font-bold md:text-5xl;
}
h1,
.h1 {
@apply font-primary text-2xl font-bold md:text-4xl;
}
h2,
.h2 {
@apply font-primary text-xl font-bold md:text-3xl;
}
h3,
.h3 {
@apply font-primary text-lg font-bold md:text-2xl;
}
h4,
.h4 {
@apply font-primary text-base font-bold md:text-lg;
}
body,
.p {
@apply font-primary text-sm md:text-base;
}
/* #endregion /**======== Typography =========== */
.layout {
/* 1100px */
max-width: 68.75rem;
@apply mx-auto w-11/12;
}
.bg-dark a.custom-link {
@apply border-gray-200 hover:border-gray-200/0;
}
/* Class to adjust with sticky footer */
.min-h-main {
@apply min-h-[calc(100vh-56px)];
}
}
@layer utilities {
.animated-underline {
background-image: linear-gradient(#33333300, #33333300),
linear-gradient(
to right,
var(--color-primary-400),
var(--color-primary-500)
);
background-size: 100% 2px, 0 2px;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
.animated-underline {
transition: 0.3s ease;
transition-property: background-size, color, background-color,
border-color;
}
}
.animated-underline:hover,
.animated-underline:focus-visible {
background-size: 0 2px, 100% 2px;
}
}