/* ============================================================ Neobrutalism Design System — Core Tokens Source: ekmas/neobrutalism-components + neobrutalism.dev Font: DM Sans (heading 700, body 500) ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=JetBrains+Mono:wght@400;500;700&display=swap"); :root { /* ---------- THEME: Blue (default) ----------------------- */ --background: oklch(93.46% 0.0304 254.32); --secondary-background: oklch(100% 0 0); --foreground: oklch(0% 0 0); --main-foreground: oklch(0% 0 0); --main: oklch(67.47% 0.1725 259.61); /* ---------- Structural --------------------------------- */ --border: oklch(0% 0 0); --ring: oklch(0% 0 0); --overlay: oklch(0% 0 0 / 0.8); /* ---------- Shadow & border system --------------------- */ --border-radius: 5px; --border-width: 2px; --box-shadow-x: 4px; --box-shadow-y: 4px; --reverse-box-shadow-x: -4px; --reverse-box-shadow-y: -4px; --shadow: var(--box-shadow-x) var(--box-shadow-y) 0px 0px var(--border); --shadow-lg: 6px 6px 0px 0px var(--border); --shadow-xl: 8px 8px 0px 0px var(--border); --shadow-nav: 4px 4px 0px 0px var(--border); /* ---------- Charts ------------------------------------- */ --chart-1: oklch(67.47% 0.1726 259.49); /* blue */ --chart-2: oklch(67.28% 0.2147 24.22); /* red */ --chart-3: oklch(86.03% 0.176 92.36); /* yellow */ --chart-4: oklch(79.76% 0.2044 153.08); /* green */ --chart-5: oklch(66.34% 0.1806 277.2); /* violet */ --chart-active-dot: #000; /* ---------- Type --------------------------------------- */ --font-base: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-heading: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --base-font-weight: 500; --heading-font-weight: 700; /* Type scale (px values, used as 1920×1080 desktop baseline) */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 36px; --text-5xl: 48px; --text-6xl: 60px; --text-7xl: 72px; /* ---------- Spacing ----------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --container: 1300px; } /* ============================================================ Dark theme — toggled by adding .dark on or ancestor ============================================================ */ .dark { --background: oklch(29.12% 0.0633 270.86); --secondary-background: oklch(23.93% 0 0); --foreground: oklch(92.49% 0 0); --main-foreground: oklch(0% 0 0); --border: oklch(0% 0 0); --ring: oklch(100% 0 0); --chart-active-dot: #fff; } /* ============================================================ Color variants — drop one of these classes on or any container to retint --background + --main. Borders stay black. ============================================================ */ .theme-blue { --background: oklch(93.46% 0.0305 255.11); --main: oklch(67.47% 0.1726 259.49); } .theme-yellow { --background: oklch(96.79% 0.0654 102.26); --main: oklch(86.03% 0.176 92.36); } .theme-lime { --background: oklch(95.37% 0.0549 125.19); --main: oklch(83.29% 0.2331 132.51); } .theme-orange { --background: oklch(95.38% 0.0357 72.89); --main: oklch(72.27% 0.1894 50.19); } .theme-pink { --background: oklch(95.16% 0.0242 343.23); --main: oklch(71.50% 0.197 354.23); } .theme-red { --background: oklch(94.71% 0.0247 17.41); --main: oklch(67.28% 0.2147 24.22); } .theme-green { --background: oklch(95.42% 0.0507 150.39); --main: oklch(79.76% 0.2044 153.08); } .theme-violet { --background: oklch(94.13% 0.0341 286.20); --main: oklch(66.34% 0.1806 277.20); } .theme-cyan { --background: oklch(95.36% 0.0356 198.15); --main: oklch(78.94% 0.1180 207.07); } .theme-rose { --background: oklch(95.28% 0.0231 8.86); --main: oklch(71.83% 0.1781 9.83); } .dark.theme-blue, .dark .theme-blue { --background: oklch(29.23% 0.0626 270.49); } .dark.theme-yellow, .dark .theme-yellow { --background: oklch(29.28% 0.0373 94.38); } .dark.theme-lime, .dark .theme-lime { --background: oklch(23.10% 0.0346 126.75); } .dark.theme-orange, .dark .theme-orange { --background: oklch(26.86% 0.0327 60.06); } .dark.theme-pink, .dark .theme-pink { --background: oklch(26.30% 0.054 358.23); } /* ============================================================ Base elements ============================================================ */ body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-base); font-weight: var(--base-font-weight); font-size: var(--text-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--heading-font-weight); margin: 0; letter-spacing: -0.01em; line-height: 1.1; } h1 { font-size: var(--text-6xl); line-height: 1.05; } h2 { font-size: var(--text-4xl); } h3 { font-size: var(--text-3xl); } h4 { font-size: var(--text-2xl); } h5 { font-size: var(--text-xl); } h6 { font-size: var(--text-lg); } p { margin: 0; line-height: 1.5; text-wrap: pretty; } code, pre, kbd, samp { font-family: var(--font-mono); } code { background: var(--foreground); color: var(--background); border-radius: var(--border-radius); padding: 1px 6px; font-size: 0.9em; } a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: var(--heading-font-weight); } ::selection { background: var(--main); color: var(--main-foreground); } /* ============================================================ Utility classes that mirror the Tailwind tokens from the source repo, for plain-HTML usage in this project. ============================================================ */ .nb-card { background: var(--background); border: var(--border-width) solid var(--border); border-radius: var(--border-radius); box-shadow: var(--shadow); } .nb-card-secondary { background: var(--secondary-background); border: var(--border-width) solid var(--border); border-radius: var(--border-radius); box-shadow: var(--shadow); } .nb-card-main { background: var(--main); color: var(--main-foreground); border: var(--border-width) solid var(--border); border-radius: var(--border-radius); box-shadow: var(--shadow); } .nb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; background: var(--main); color: var(--main-foreground); border: var(--border-width) solid var(--border); border-radius: var(--border-radius); box-shadow: var(--shadow); font-family: var(--font-base); font-weight: var(--base-font-weight); font-size: var(--text-sm); cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease; text-decoration: none; } .nb-btn:hover { transform: translate(var(--box-shadow-x), var(--box-shadow-y)); box-shadow: none; } .nb-btn--neutral { background: var(--secondary-background); color: var(--foreground); } .nb-btn--reverse:hover { transform: translate(var(--reverse-box-shadow-x), var(--reverse-box-shadow-y)); box-shadow: var(--shadow); } .nb-btn--reverse { box-shadow: none; } .nb-btn--lg { height: 48px; padding: 0 24px; font-size: var(--text-base); } .nb-btn--sm { height: 36px; padding: 0 12px; font-size: var(--text-xs); } .nb-input { display: flex; height: 40px; width: 100%; padding: 8px 12px; background: var(--secondary-background); color: var(--foreground); border: var(--border-width) solid var(--border); border-radius: var(--border-radius); font-family: var(--font-base); font-weight: var(--base-font-weight); font-size: var(--text-sm); outline: none; box-sizing: border-box; } .nb-input::placeholder { color: color-mix(in oklab, var(--foreground) 50%, transparent); } .nb-input:focus { outline: 2px solid var(--ring); outline-offset: 2px; } .nb-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--main); color: var(--main-foreground); border: var(--border-width) solid var(--border); border-radius: var(--border-radius); padding: 2px 10px; font-size: var(--text-xs); font-weight: var(--base-font-weight); } .nb-badge--neutral { background: var(--secondary-background); color: var(--foreground); } .nb-grid-bg { background-image: linear-gradient(to right, #80808033 1px, transparent 1px), linear-gradient(to bottom, #80808033 1px, transparent 1px); background-size: 70px 70px; } .nb-grid-bg--dark { background-image: linear-gradient(to right, #00000033 1px, transparent 1px), linear-gradient(to bottom, #00000033 1px, transparent 1px); background-size: 70px 70px; }