110 lines
3.0 KiB
CSS
110 lines
3.0 KiB
CSS
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: normal;
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
src: url('/fonts/inter/InterVariable.woff2') format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Inter';
|
|
font-style: italic;
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
src: url('/fonts/inter/InterVariable-Italic.woff2') format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'JetBrains Mono';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url('/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2') format('woff2');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'JetBrains Mono';
|
|
font-style: normal;
|
|
font-weight: 600 700;
|
|
font-display: swap;
|
|
src: url('/fonts/jetbrains-mono/JetBrainsMono-Bold.woff2') format('woff2');
|
|
}
|
|
|
|
@import 'tailwindcss';
|
|
|
|
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
|
@source '../../storage/framework/views/*.php';
|
|
@source '../**/*.blade.php';
|
|
@source '../**/*.js';
|
|
|
|
@theme {
|
|
/* Dark mode (default) */
|
|
--color-bg: #0a0a0f;
|
|
--color-s1: #111117;
|
|
--color-s2: #16161e;
|
|
--color-s3: #1c1c26;
|
|
--color-b1: rgb(255 255 255 / 8%);
|
|
--color-b2: rgb(255 255 255 / 14%);
|
|
--color-t1: #f0f0f5;
|
|
--color-t2: #8888a0;
|
|
--color-t3: #44445a;
|
|
|
|
/* Accent — purple-pink gradient, consistent across both themes */
|
|
--color-blue: #7c3aed;
|
|
--color-accent: #7c3aed;
|
|
--color-accent-2: #ec4899;
|
|
|
|
--color-green: #3ecf8e;
|
|
--color-amber: #f5a623;
|
|
--color-red: #f05252;
|
|
|
|
--font-mono: 'JetBrains Mono', monospace;
|
|
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--color-bg: #ffffff;
|
|
--color-s1: #ffffff;
|
|
--color-s2: #f9fafb;
|
|
--color-s3: #f3f4f6;
|
|
--color-b1: #e5e7eb;
|
|
--color-b2: #d1d5db;
|
|
--color-t1: #111827;
|
|
--color-t2: #6b7280;
|
|
--color-t3: #9ca3af;
|
|
|
|
--color-blue: #7c3aed;
|
|
--color-accent: #7c3aed;
|
|
--color-accent-2: #ec4899;
|
|
|
|
--color-green: #10b981;
|
|
--color-amber: #f59e0b;
|
|
--color-red: #ef4444;
|
|
}
|
|
|
|
/* Visible borders on all themes */
|
|
*, ::before, ::after { border-color: var(--color-b1); }
|
|
|
|
/* Base typography scale */
|
|
html { font-size: 14px; }
|
|
body { font-size: 0.875rem; line-height: 1.5; }
|
|
|
|
h1 { font-size: 1.5rem; line-height: 2rem; font-weight: 600; }
|
|
h2 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; }
|
|
h3 { font-size: 1.125rem; line-height: 1.5rem; font-weight: 500; }
|
|
|
|
@layer utilities {
|
|
.bg-accent-gradient {
|
|
background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
|
|
}
|
|
.text-accent-gradient {
|
|
background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.border-accent-gradient {
|
|
border-image: linear-gradient(135deg, var(--color-accent), var(--color-accent-2)) 1;
|
|
}
|
|
}
|