/* ========================================================================= * deepkernels — design tokens * Aesthetic: off-white canvas, violet accent, a manifold of colour drifting * through the background. Generous spacing, geometric sans-serif type. * * These tokens are the source of truth. The Tailwind config in base.html * mirrors them; if you change a value here, change it there too (or * generate one from the other in a build step). * * ── Inverted from dark to light in the palette rework ────────────────── * Every template addresses colour through semantic names (bg-bg-surface, * text-text-primary, border-border) rather than literal values, so the * light theme is a values-only change in these two files — no template * needed editing. Keep it that way: if you find yourself writing a hex * literal in a template, add a token instead. * ========================================================================= */ :root { /* ----------------------------------------------------------------------- * Color — Surface palette * * Layered light surfaces. `base` is the off-white page canvas. `surface` * and `elevated` step *up* toward white for cards, panels and popovers — * the opposite direction to the old dark theme. `sunken` is slightly * deeper than base for inset wells (code blocks, empty chart panels). * ----------------------------------------------------------------------- */ --color-bg-base: #FAF8FD; --color-bg-sunken: #F1EDF8; --color-bg-surface: #FFFFFF; /* On a light theme "elevated" can't just be lighter than white, so it carries a faint violet wash instead — that's what distinguishes a highlighted card (e.g. the featured pricing tier) from a plain one. */ --color-bg-elevated: #F6F2FE; --color-bg-overlay: rgba(250, 248, 253, 0.92); /* The manifold, layer 1 of 2: broad colour washes bled into the canvas. * Layer 2 is the flow-line SVG in base.html, which rides on top of this. * Kept very low contrast on purpose — it should register as a tint you * notice on second look, never as something competing with content. * Apply to with: background: var(--gradient-page); */ --gradient-page: radial-gradient(ellipse 80% 50% at 12% -5%, rgba(124, 58, 237, 0.10) 0%, transparent 60%), radial-gradient(ellipse 70% 45% at 88% 8%, rgba(6, 182, 212, 0.09) 0%, transparent 60%), radial-gradient(ellipse 65% 40% at 78% 96%, rgba(236, 72, 153, 0.08) 0%, transparent 60%), radial-gradient(ellipse 60% 35% at 20% 104%, rgba(245, 158, 11, 0.07) 0%, transparent 60%), var(--color-bg-base); /* ----------------------------------------------------------------------- * Color — Brand / accent * * `accent` is the primary action color (violet). * `accent-strong` is reserved for emphasis, focus rings, charts. * `accent-muted` is for hover backgrounds and subtle fills. * * NOTE `accent-contrast` flipped from near-black to white when the theme * inverted: it is the text colour that sits ON a filled accent button, * and violet is dark enough to need light text. Getting this backwards * is the single most visible way to break the light theme. * ----------------------------------------------------------------------- */ --color-accent: #7C3AED; --color-accent-hover: #8B5CF6; --color-accent-strong: #6D28D9; --color-accent-muted: rgba(124, 58, 237, 0.10); --color-accent-ring: rgba(124, 58, 237, 0.40); --color-accent-contrast: #FFFFFF; /* text on accent fills */ /* Secondary palette — cyan, the manifold's second voice. Used for * categorical colour (charts, tags) and the background flow lines. */ --color-secondary: #06B6D4; --color-secondary-hover: #22D3EE; --color-secondary-muted: rgba(6, 182, 212, 0.10); /* The remaining manifold hues. Not part of the UI palette — they exist * so the background SVG and any categorical chart series draw from the * same four-colour set rather than inventing values. */ --color-manifold-violet: #7C3AED; --color-manifold-cyan: #06B6D4; --color-manifold-pink: #EC4899; --color-manifold-amber: #F59E0B; /* ----------------------------------------------------------------------- * Color — Text * * Near-black with a violet cast rather than neutral grey, so type sits in * the same family as the accent instead of reading as a separate system. * ----------------------------------------------------------------------- */ --color-text-primary: #1A1523; /* not pure black — softer on off-white */ --color-text-secondary: #5B5366; --color-text-tertiary: #8A8296; --color-text-disabled: #B8B2C2; --color-text-on-accent: #FFFFFF; /* ----------------------------------------------------------------------- * Color — Borders & dividers * * Dark-on-light now, so these are alpha-black rather than alpha-white. * ----------------------------------------------------------------------- */ --color-border-subtle: rgba(26, 21, 35, 0.06); --color-border-default: rgba(26, 21, 35, 0.11); --color-border-strong: rgba(26, 21, 35, 0.20); --color-border-accent: rgba(124, 58, 237, 0.35); /* ----------------------------------------------------------------------- * Color — Semantic / status * ----------------------------------------------------------------------- */ --color-success: #10B981; --color-success-muted: rgba(16, 185, 129, 0.12); --color-warning: #F59E0B; --color-warning-muted: rgba(245, 158, 11, 0.12); --color-danger: #EF4444; --color-danger-muted: rgba(239, 68, 68, 0.12); --color-info: #7C3AED; --color-info-muted: rgba(124, 58, 237, 0.10); /* ----------------------------------------------------------------------- * Typography — Families * * Display: Space Grotesk — geometric, slightly wide, holds up at * large sizes. Used for h1/h2 and all-caps eyebrow labels. * Body: Inter — neutral, excellent at 14–18px on the off-white canvas. * Mono: JetBrains Mono — for tabular numbers, code, log streams. * ----------------------------------------------------------------------- */ --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; /* ----------------------------------------------------------------------- * Typography — Type scale (1.250 ratio, "major third") * * Sizes are tuned for a dashboard where dense text is common. * `step-0` is the body baseline (16px). * ----------------------------------------------------------------------- */ --text-2xs: 0.6875rem; /* 11px — micro labels, table footnotes */ --text-xs: 0.75rem; /* 12px — eyebrow caps, badges */ --text-sm: 0.875rem; /* 14px — nav, secondary UI */ --text-base: 1rem; /* 16px — body */ --text-lg: 1.125rem; /* 18px — lead paragraphs */ --text-xl: 1.25rem; /* 20px — card titles */ --text-2xl: 1.5rem; /* 24px — section headings */ --text-3xl: 1.875rem; /* 30px — page headings */ --text-4xl: 2.5rem; /* 40px — hero subheads */ --text-5xl: 3.25rem; /* 52px — hero displays */ --text-6xl: 4.25rem; /* 68px — splash */ /* ----------------------------------------------------------------------- * Typography — Weights & line-heights * ----------------------------------------------------------------------- */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --leading-tight: 1.15; --leading-snug: 1.30; --leading-normal: 1.50; --leading-relaxed: 1.65; /* ----------------------------------------------------------------------- * Typography — Letter-spacing * * The Epoch nav and "CLICK THE LOGO" eyebrow use heavy tracking. * Reach for `widest` on all-caps labels; never on body copy. * ----------------------------------------------------------------------- */ --tracking-tighter: -0.02em; --tracking-tight: -0.01em; --tracking-normal: 0em; --tracking-wide: 0.025em; --tracking-wider: 0.10em; --tracking-widest: 0.20em; /* ----------------------------------------------------------------------- * Spacing scale (4px base) * * Tailwind's default scale + a few extras for the wide gutters this * design uses. Use multiples of `--space-2` (8px) wherever practical. * ----------------------------------------------------------------------- */ --space-0: 0; --space-px: 1px; --space-0_5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1_5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ --space-40: 10rem; /* 160px */ --space-48: 12rem; /* 192px */ --space-64: 16rem; /* 256px */ /* ----------------------------------------------------------------------- * Border radii * * The reference design uses small radii — never pillowy. Buttons, * inputs, and cards sit between 4–10px. `--radius-pill` is the only * exception, reserved for tags / status chips. * ----------------------------------------------------------------------- */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; /* buttons, inputs */ --radius-md: 6px; --radius-lg: 10px; /* cards, panels */ --radius-xl: 14px; /* modals */ --radius-2xl: 20px; --radius-pill: 9999px; /* ----------------------------------------------------------------------- * Elevation — shadows tuned for a dark canvas * * On near-black surfaces, dark shadows disappear. Use a faint cyan * inner light at the top edge instead, and a soft black drop below. * ----------------------------------------------------------------------- */ --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 16px 40px rgba(0, 0, 0, 0.55); --shadow-accent-glow: 0 0 0 1px var(--color-border-accent), 0 0 24px rgba(63, 184, 245, 0.25); /* ----------------------------------------------------------------------- * Motion * ----------------------------------------------------------------------- */ --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-emphasized: cubic-bezier(0.3, 0, 0, 1); /* ----------------------------------------------------------------------- * Layout * ----------------------------------------------------------------------- */ --container-max: 1440px; --container-pad: var(--space-8); --sidebar-width: 240px; --topnav-height: 64px; --z-base: 0; --z-sticky: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400; } /* --------------------------------------------------------------------------- * Base resets that lean on the tokens. Optional — drop if you prefer to * stay close to Tailwind's preflight. * --------------------------------------------------------------------------- */ /* NOTE: `background` and `color` here are intentionally ALSO set inline in templates/base.html, with literal values, and that inline block wins (same specificity, declared later). That duplication is on purpose. This file ships from /static without fingerprinting, so a cached copy can lag a freshly-compiled template — and when it did, the old navy canvas sat under the new near-black text and the headline vanished. Legibility must not depend on a file that can go stale. Referencing the variables from base.html would not help: a stale file still defines them, just with the wrong values. If you change either value, change it in BOTH places and bump the ?v= on the stylesheet link. */ html { font-family: var(--font-body); font-size: 16px; line-height: var(--leading-normal); color: var(--color-text-primary); background: var(--gradient-page); background-attachment: fixed; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { margin: 0; min-height: 100vh; background: transparent; } /* --------------------------------------------------------------------------- * The manifold — layer 2 of 2 (layer 1 is --gradient-page above). * * A fixed, non-interactive SVG of flow lines behind everything. Static: * drawn paths, not a running simulation, shaped like GP posterior samples — * a family of curves sharing an envelope and drifting apart. * * ITS LAYOUT RULES ARE NOT HERE. `.manifold`, `.manifold svg` and * `.manifold-content` live in an inline