@tailwind base; @tailwind components; @tailwind utilities; @layer base { @font-face { font-family: "Poppins"; src: url("assets/fonts/Poppins-Bold.eot"); src: url("assets/fonts/Poppins-Bold.eot?#iefix") format("embedded-opentype"), url("assets/fonts/Poppins-Bold.woff2") format("woff2"), url("assets/fonts/Poppins-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("assets/fonts/Poppins-Medium.eot"); src: url("assets/fonts/Poppins-Medium.eot?#iefix") format("embedded-opentype"), url("assets/fonts/Poppins-Medium.woff2") format("woff2"), url("assets/fonts/Poppins-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("assets/fonts/Poppins-Regular.eot"); src: url("assets/fonts/Poppins-Regular.eot?#iefix") format("embedded-opentype"), url("assets/fonts/Poppins-Regular.woff2") format("woff2"), url("assets/fonts/Poppins-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "Poppins"; src: url("assets/fonts/Poppins-Thin.eot"); src: url("assets/fonts/Poppins-Thin.eot?#iefix") format("embedded-opentype"), url("assets/fonts/Poppins-Thin.woff2") format("woff2"), url("assets/fonts/Poppins-Thin.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } html { font-family: "Poppins", -apple-system, "Segoe UI", system-ui, "Roboto", "Helvetica Neue", "Arial"; color: var(--color-text); } *, ::before, ::after, .theme-dark *, .theme-dark::before, .theme-dark::after { /* ------------------------------- Body color ------------------------------- */ --color-aside: #0a0e1a; --color-footer: 10 10 10; --color-text: rgb(38, 38, 38); /* -------------------------------------------------------------------------- */ --color-serv: 25 29 43; --color-serv-50: 227 230 237; --color-serv-100: 200 205 223; --color-serv-200: 142 152 189; --color-serv-300: 90 104 155; --color-serv-400: 58 67 100; --color-serv-500: 25 29 43; --color-serv-600: 21 24 35; --color-serv-700: 15 17 26; --color-serv-800: 9 11 16; --color-serv-900: 6 7 10; /* ---------------------------------- Blue ---------------------------------- */ --color-blue-50: 240 247 254; --color-blue-100: 221 237 254; --color-blue-200: 182 216 252; --color-blue-300: 137 192 250; --color-blue-400: 74 158 247; --color-blue-500: 9 109 217; --color-blue-600: 8 99 196; --color-blue-700: 7 87 171; --color-blue-800: 6 69 137; --color-blue-900: 4 49 98; /* ---------------------------------- Gray ---------------------------------- */ --color-gray-50: 250 250 250; --color-gray-75: 240 240 240; --color-gray-100: 235 235 235; ; --color-gray-200: 214 214 214; --color-gray-300: 191 191 191; --color-gray-400: 166 166 166; --color-gray-500: 140 140 140; --color-gray-600: 115 115 115; --color-gray-700: 89 89 89; --color-gray-800: 64 64 64; --color-gray-900: 38 38 38; } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --bg: hsl(var(--hue), 10%, 10%); --fg: hsl(var(--hue), 10%, 90%); } } } @layer components { /* Separate ======================================================================== */ .separate { @apply flex items-center text-center; } .separate::after, .separate::before { content: ''; @apply border-b border-gray-300 flex-1; } .separate:not(:empty)::after { @apply ml-2; } .separate:not(:empty)::before { @apply mr-2; } }