:root { /* v14: Clean = pure greyscale (no yellow). Default = dark mode, so the CTA reads near-white on the near-black page. Mood overrides below re-introduce hue per mood. */ --klott-cta-bg: #fafafa; --klott-cta-fg: #0a0a0a; /* Page surface defaults — dark mode (matches Clean / off). */ --klott-page-bg: #0a0a0a; /* Flat companion to --klott-page-bg, and the ONLY one of the two that a color-mix() may consume (HAG-2020). Five mood/mode combinations paint the page with a linear-gradient rather than a colour: boring (light and dark), drifting (light and dark), and magical. A gradient is an , not a , so a color-mix() reading it directly is invalid at computed-value time and the property falls back to transparent — silently, with no console warning. Every frosted wash on the surface (nav chips, .klott-field, the Discover and library cards, the pricing cards, the Try frame) simply vanished in those five, which is the same legibility failure that was repaired on the homepage card in ba46df0, recurring per mood. So: --klott-page-bg keeps whatever the mood wants, gradient included, and is what actually paints the page. --klott-page-bg-flat is a single flat colour standing for the same surface, and every color-mix() reads it instead. On a flat mood the two are byte-identical, so nothing that already worked moves; on a gradient mood the flat value is the gradient's middle stop, which is the colour the wash was always meant to be. EVERY block that sets --klott-page-bg must set this alongside it, or the two drift and the wash goes wrong somewhere without anything failing. moodPresets.test.ts asserts exactly that, and also that no color-mix() anywhere in src/ reads --klott-page-bg directly. */ --klott-page-bg-flat: #0a0a0a; --klott-page-fg: #fafafa; --klott-page-fg-secondary: #b8b8b8; --klott-page-fg-dim: #8a8a8a; --klott-hairline: rgba(255,255,255,0.08); --klott-display-family: var(--font-display), 'Space Grotesk', Inter, system-ui, sans-serif; /* v11: per-mood body face. Default = Inter (matches the rest of the marketing surface). Each mood block below overrides it where a distinct body font adds character (Source Serif for editorial/pooky/party/magical, Space Mono for data). Moods that don't need a distinct body keep Inter. */ --klott-body-family: var(--font-ui), Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --klott-wordmark-color: #fafafa; --klott-eyebrow-color: #8a8a8a; /* v17: logo stroke/fill color — explicit hex (was var(--klott-page-fg) which broke in practice on light moods because the var-chain substitution wasn't repainting reliably across every browser). Every .klott-marketing-surface[data-theme="…"] block below sets its own --klott-logo-color to a guaranteed-AA hex against that mood's page-bg. */ --klott-logo-color: #fafafa; /* Light-rays backdrop: color follows the mood accent by default; opacity is tuned per light/dark below so rays never wash out a light surface. */ --klott-ray-color: var(--klott-cta-bg); --klott-ray-opacity: 0.55; } /* v11: bind every marketing surface to the active mood's body face so paragraphs, list items, captions, footer copy — anything inheriting the page font — switches with the mood. The wrapper inline style still reads from --klott-body-family directly; this rule covers descendants that explicitly set font-family: inherit. */ .klott-marketing-surface, .klott-marketing-surface p, .klott-marketing-surface li, .klott-marketing-surface span, .klott-marketing-surface blockquote { font-family: var(--klott-body-family); } /* HAG-1424: baseline marketing body size bumped from the 16px html root to 17px. Set on the surface root so EVERY marketing route (homepage, pricing, join, discover) inherits the larger, more readable paragraph size in one place. Elements with their own explicit font-size (nav links, eyebrows, captions, headings) keep it — only inheriting body copy grows. */ .klott-marketing-surface { font-size: 17px; } /* v17: safety-net so any heading (including EditableBlock rendered as as="h1"/"h2"/"h3" without an explicit display class) picks up the mood-defined display family. Per-mood overrides further down win via higher specificity where needed (.klott-editorial, .klott-wordmark). */ .klott-marketing-surface h1, .klott-marketing-surface h2, .klott-marketing-surface h3 { font-family: var(--klott-display-family); } /* v22 added a ~25% h1/h2/h3 bump on the Magical surface only, because Dancing Script read visually smaller than the other display faces at the same nominal size (cursive x-height, decorative ascenders and descenders), leaving the magical hero under-weighted next to Boom and Pooky. REMOVED: Magical no longer uses Dancing Script. It inherited Pirata One when Pooky took Creepster, and Pirata One has a normal serif cap height, so the compensation it was written for no longer exists — keeping it would make Magical roughly a third larger than every other mood for no typographic reason. Magical now uses the same baseline clamp ranges as the rest of the surface. The matching in-editor knob is --klott-heading-scale in src/app/globals.css, retuned to 1.25 in the same change. */ /* ──────────────────────────────────────────────────────────────────── Mood-driven page palette — each mood is a complete surface palette, not just an accent. Four moods stay on a dark bg (off, concur, secret, drifting) and four flip to a light bg (boring, chaos, go, magical). Text/accent vars are tuned per pair to maintain WCAG AA. ──────────────────────────────────────────────────────────────────── */ /* off — Clean. Default dark mode; written out explicitly so toggling back is deterministic. v14: greyscale only — no yellow anywhere. v17: explicit --klott-logo-color per mood (no var-chain through --klott-page-fg) so the spray-can mark is guaranteed-visible. */ .klott-marketing-surface[data-theme="off"] { --klott-cta-bg: #fafafa; --klott-cta-fg: #0a0a0a; --klott-page-bg: #0a0a0a; --klott-page-bg-flat: #0a0a0a; --klott-page-fg: #fafafa; --klott-page-fg-secondary: #b8b8b8; --klott-page-fg-dim: #8a8a8a; --klott-hairline: rgba(255,255,255,0.08); --klott-display-family: var(--font-display), 'Space Grotesk', Inter, system-ui, sans-serif; --klott-body-family: var(--font-ui), Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --klott-wordmark-color: #fafafa; --klott-eyebrow-color: #8a8a8a; --klott-logo-color: #fafafa; } /* boring — Editorial. Warm aged-paper parchment with warm brown-black ink. v30: deepened from the old near-neutral cream (#f5f1e8 / ink #1a1a1a) toward a richer "manuscript under lamplight" register — bg pulled to a warmer parchment, every ink token pushed off pure-neutral grey into warm brown. Kept distinct from Pirate (chaos: #f5edd9 / #3d2817), which is a more saturated yellow sepia — Editorial is a calmer warm-grey paper with a near-black brown ink. All body/dim pairs verified WCAG AA (≥4.5:1) against the new bg. v31: --klott-page-bg swapped from a flat fill to a subtle warm paper gradient (top: warm off-white, bottom: warm cream) following the same linear-gradient(180deg, ...) pattern already used by Magical — every stop stays within a hair of the original #efe7d6 so ink contrast is unaffected. */ .klott-marketing-surface[data-theme="boring"] { /* v34: warm-gold accent (was flat parchment #e7dcc4, which read mono on the parchment page). Deep goldenrod fill with cream text pops on the light paper while staying warm-editorial. #fdf6e3 on #8a5e1a ≈ 5.3:1 (AA). */ --klott-cta-bg: #8a5e1a; --klott-cta-fg: #fdf6e3; --klott-page-bg: linear-gradient(180deg, #f7f1e2 0%, #efe7d6 50%, #e8dfc6 100%); /* Flat companion = the gradient's middle stop, which is the flat parchment this mood carried before v31 added the gradient. */ --klott-page-bg-flat: #efe7d6; --klott-page-fg: #241a12; --klott-page-fg-secondary: #4d4133; --klott-page-fg-dim: #6b5d49; --klott-hairline: rgba(36,26,18,0.12); --klott-display-family: "Source Serif 4", Georgia, "Times New Roman", serif; /* Body in matching serif — editorial reads like long-form prose. */ --klott-body-family: 'Source Serif 4', Georgia, 'Times New Roman', serif; --klott-wordmark-color: #241a12; --klott-eyebrow-color: #6b5d49; --klott-logo-color: #241a12; } /* concur — Boom. Stays dark but warm-tinted so the amber accent pops. v30: retuned off orange/red → amber-gold (QA HAG-1254, no-orange rule). cta #ff6b35 → #e8a838, wordmark #f24f1c → #e8a838, hairline hue matched. */ .klott-marketing-surface[data-theme="concur"] { --klott-cta-bg: #e8a838; --klott-cta-fg: #0a0a0a; --klott-page-bg: #140a05; --klott-page-bg-flat: #140a05; --klott-page-fg: #fafafa; --klott-page-fg-secondary: #c8b8a8; --klott-page-fg-dim: #8a7a6b; --klott-hairline: rgba(232,168,56,0.16); --klott-display-family: "Permanent Marker", "Bradley Hand", cursive; /* Body stays Inter — punchy display, calm body. */ --klott-body-family: var(--font-ui), Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --klott-wordmark-color: #e8a838; --klott-eyebrow-color: #c8b8a8; --klott-logo-color: #fafafa; } /* chaos — Pooky (the mood formerly called Pirate; the stored key stays chaos forever). Sepia parchment with brown serif text. v11: dim bumped #8a6b50 → #7a553d (contrast 4.18 → 5.41 against #f5edd9 bg). */ .klott-marketing-surface[data-theme="chaos"] { --klott-cta-bg: #d4a76a; --klott-cta-fg: #0a0a0a; --klott-page-bg: #f5edd9; --klott-page-bg-flat: #f5edd9; --klott-page-fg: #3d2817; --klott-page-fg-secondary: #6b4a30; --klott-page-fg-dim: #7a553d; --klott-hairline: rgba(61,40,23,0.16); --klott-display-family: Creepster, Impact, fantasy; /* Pooky body in serif — parchment + serif reads like a logbook. */ --klott-body-family: 'Source Serif 4', Georgia, 'Times New Roman', serif; --klott-wordmark-color: #7a4a2a; --klott-eyebrow-color: #7a553d; --klott-logo-color: #3d2817; } /* secret — Party. Deep purple disco with lavender text. v14: display face flipped Oi → Bagel Fat One. Oi (decorative slab) was illegible at the 96 px hero size. Bagel Fat One is a heavy rounded display sans — still reads "party", much more legible. */ .klott-marketing-surface[data-theme="secret"] { --klott-cta-bg: #a78bfa; --klott-cta-fg: #0a0a0a; --klott-page-bg: #1a0f2e; --klott-page-bg-flat: #1a0f2e; --klott-page-fg: #e9d5ff; --klott-page-fg-secondary: #c0a3e0; --klott-page-fg-dim: #8a7aa5; --klott-hairline: rgba(167,139,250,0.18); --klott-display-family: var(--font-bagel-fat-one), 'Bagel Fat One', 'Outfit', 'Inter', system-ui, sans-serif; /* Party body in serif — bold display, elegant prose underneath. */ --klott-body-family: 'Source Serif 4', Georgia, 'Times New Roman', serif; --klott-wordmark-color: #c5a8ff; --klott-eyebrow-color: #8a7aa5; --klott-logo-color: #e9d5ff; } /* drifting — Data. Pure black terminal with phosphor-green text. v11: dim bumped #007a44 → #00aa5c (contrast 2.75 → 6.92 against #000 bg). v31: flat #000 -> linear-gradient(180deg, ...) with a faint phosphor-green glow in the middle stop that fades back to black top/bottom — a subtle CRT-glow read, same 3-stop pattern as Magical/Editorial. Endpoints stay effectively black so contrast against --klott-page-fg is unaffected. */ .klott-marketing-surface[data-theme="drifting"] { /* v34: white primary buttons on the phosphor-green terminal. A crisp near-white CTA reads great against the black/green and adds the contrast the all-green surface was missing. Page text/hue stay phosphor-green; only the CTA + accent (badges, selected rows) go white. */ --klott-cta-bg: #fafafa; --klott-cta-fg: #0a0a0a; /* v36: muted phosphor. The old neon #00ff88 fg + saturated green glow read too intense; softened to a desaturated mint/emerald that keeps the cool- green identity but reads calmer + more legible. Backdrop glow dimmed to a barely-there green so the terminal-green hue is a hint, not a wash. All three text tokens verified WCAG AA (≥5.3:1) against the near-black bg. */ --klott-page-bg: linear-gradient(180deg, #020604 0%, #050d09 50%, #000000 100%); /* Flat companion = the middle stop, the faint phosphor glow the terminal reads as; the endpoints are effectively black either way. */ --klott-page-bg-flat: #050d09; --klott-page-fg: #8fcaa8; --klott-page-fg-secondary: #74ac91; --klott-page-fg-dim: #5f8a72; --klott-hairline: rgba(143,202,168,0.14); --klott-display-family: var(--font-space-mono), 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Data body in mono — terminal aesthetic top to bottom. */ --klott-body-family: var(--font-space-mono), 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace; --klott-wordmark-color: #a0d4b8; --klott-eyebrow-color: #5f8a72; --klott-logo-color: #8fcaa8; } /* go — Craving. Warm cream snack bag with deep cocoa text. v15: wordmark color flipped #e85a2a → #3d1a08. Coral on cream tested ~2.9:1 (below AA) so the nav "Klott" wordmark and the KlottLogoMark (which reads from --klott-logo-color → --klott-page-fg via the fall-back chain) were both fading into the bg. Dark cocoa matches page-fg and reads cleanly at the nav scale. The hero h1 keeps coral via the homepage's per-mood .klott-editorial override — it's display scale, so the coral still works as brand colour without contrast issues. */ .klott-marketing-surface[data-theme="go"] { /* v30: cta coral #ff7a59 → deep goldenrod #b8860b (QA HAG-1254, no-orange rule). Deeper gold than concur's #e8a838 keeps the two moods distinct; #0a0a0a text on it holds ~6.6:1. */ --klott-cta-bg: #b8860b; --klott-cta-fg: #0a0a0a; /* v31: warmed from peach-cream #fff4ec toward a soft hamburger-bun yellow so the Craving surface reads like a bun. #faf0cf holds ~15:1 against the deep cocoa --klott-page-fg #3d1a08, so contrast is unaffected. */ --klott-page-bg: #faf0cf; --klott-page-bg-flat: #faf0cf; --klott-page-fg: #3d1a08; --klott-page-fg-secondary: #6b3a20; --klott-page-fg-dim: #8a6850; --klott-hairline: rgba(61,26,8,0.14); --klott-display-family: DynaPuff, "Comic Sans MS", cursive; /* Body stays Inter — DynaPuff display does the work. */ --klott-body-family: var(--font-ui), Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --klott-wordmark-color: #3d1a08; --klott-eyebrow-color: #8a6850; --klott-logo-color: #3d1a08; } /* magical — Magical. Soft lavender-pink sky with deep magenta text. v11: dim bumped #8a5a8f → #7a4a7f (contrast 4.38 → 5.48 against #fbe4f4 bg). v16: explicit --klott-logo-color so the spray-can mark gets the deep magenta brand tint and stays visible against the gradient bg (the default var(--klott-page-fg) fall-through worked in theory but rendered washed-out in practice because the parent .klott-logo-link color was still inheriting white from the nav scope — explicit beats inherited). v23: --klott-logo-color bumped #4a1a4f → #1a0a2e (deep magical night). #4a1a4f tested 11.2:1 against the top of the gradient (#fbe4f4), which passes WCAG numerically but read washed-out in practice because the logo's narrow stroke widths share too much pink/red hue with the bg. #1a0a2e drops luminance ~3× and pushes the hue to indigo so the spray- can mark pops against every stop of the gradient (~15.5:1 vs #fbe4f4, ~12:1 vs #d5e6ff). Wordmark stays #4a1a4f — at 22px it reads fine and keeps the brand violet tint in the nav. */ .klott-marketing-surface[data-theme="magical"] { --klott-cta-bg: #e879b8; --klott-cta-fg: #0a0a0a; --klott-page-bg: linear-gradient(180deg, #fbe4f4 0%, #ecd6ff 50%, #d5e6ff 100%); /* Flat companion = the middle stop, the lilac between the pink top and the blue bottom. */ --klott-page-bg-flat: #ecd6ff; --klott-page-fg: #4a1a4f; --klott-page-fg-secondary: #6b3a6f; --klott-page-fg-dim: #7a4a7f; --klott-hairline: rgba(74,26,79,0.14); --klott-display-family: "Pirata One", "Times New Roman", serif; /* Magical body in serif — display face + serif prose feels storybook. */ --klott-body-family: 'Source Serif 4', Georgia, 'Times New Roman', serif; --klott-wordmark-color: #4a1a4f; --klott-eyebrow-color: #7a4a7f; --klott-logo-color: #1a0a2e; } /* ──────────────────────────────────────────────────────────────────── Light/dark mode override — v29 (ThemeModeToggle.tsx). Each mood above ships ONE natural light-or-dark palette; this lets a visitor flip to the opposite register for the three homepage-exposed moods (Clean/off, Editorial/boring, Data/drifting — see MoodSwitcher's restricted dropdown). `data-mode` is written onto the same .klott-marketing-surface element as `data-theme`; these compound selectors carry one more attribute selector than the mood-only blocks above, so they win automatically once data-mode is set, regardless of source order. Moods not covered here (the five app-only wild moods) simply keep their natural palette when toggled — no regression, they're just no longer reachable from the homepage picker so an inverted variant isn't needed. ──────────────────────────────────────────────────────────────────── */ /* Rays are subtler on any light surface so they don't overpower the page. */ .klott-marketing-surface[data-mode="light"] { --klott-ray-opacity: 0.3; } /* off / Clean — light override. */ .klott-marketing-surface[data-theme="off"][data-mode="light"] { --klott-cta-bg: #0a0a0a; --klott-cta-fg: #fafafa; --klott-page-bg: #fafafa; --klott-page-bg-flat: #fafafa; --klott-page-fg: #0a0a0a; --klott-page-fg-secondary: #4a4a4a; --klott-page-fg-dim: #6b6b6b; --klott-hairline: rgba(10,10,10,0.10); --klott-wordmark-color: #0a0a0a; --klott-eyebrow-color: #6b6b6b; --klott-logo-color: #0a0a0a; } /* boring / Editorial — dark override. Keeps the serif family; page-bg goes to a warm ink-black (not pure black) so it still reads "paper under lamplight" rather than the terminal-black of Data. v31: flat fill -> deep warm brown-black linear-gradient(180deg, ...), same 3-stop pattern as the light variant, just re-keyed dark. */ .klott-marketing-surface[data-theme="boring"][data-mode="dark"] { /* v34: brand-amber accent on the warm brown-black page. v36: muted from the loud #f4c430 to a softer, restrained wheat/gold so the accent is a quiet highlight rather than a shout. #241a12 text on #d9b866 ≈ 7.9:1 (well past AA). */ --klott-cta-bg: #d9b866; --klott-cta-fg: #241a12; --klott-page-bg: linear-gradient(180deg, #241c15 0%, #1c1611 50%, #140f0a 100%); /* Flat companion = the middle stop of the warm brown-black. */ --klott-page-bg-flat: #1c1611; --klott-page-fg: #f2e9d8; --klott-page-fg-secondary: #d4c9b5; --klott-page-fg-dim: #a99a85; --klott-hairline: rgba(242,233,216,0.12); --klott-wordmark-color: #f2e9d8; --klott-eyebrow-color: #a99a85; --klott-logo-color: #f2e9d8; } /* drifting / Data — light override. Keeps the mono family + green hue, flipped to a dark-green-on-near-white "terminal in daylight" look. v31: flat #f4fff9 -> cool light-tech linear-gradient(180deg, ...) — cool blue-white top easing into a pale mint-green bottom, still light enough that #046b3a page-fg keeps its AA contrast. */ .klott-marketing-surface[data-theme="drifting"][data-mode="light"] { --klott-cta-bg: #046b3a; --klott-cta-fg: #ffffff; --klott-page-bg: linear-gradient(180deg, #f2fbff 0%, #eefdf7 50%, #e6f7ef 100%); /* Flat companion = the middle stop, the pale mint between the cool white top and the green-tinted bottom. */ --klott-page-bg-flat: #eefdf7; --klott-page-fg: #046b3a; --klott-page-fg-secondary: #0a7a44; --klott-page-fg-dim: #3f6e54; --klott-hairline: rgba(4,107,58,0.18); --klott-wordmark-color: #046b3a; --klott-eyebrow-color: #3f6e54; --klott-logo-color: #046b3a; } /* ──────────────────────────────────────────────────────────────────── Bind generic marketing classes to the mood vars. Every consumer automatically inherits the active mood's palette via these rules — no per-class per-mood enumeration. Specificity is bumped with the html[data-theme] prefix so these still win against any base-class defaults defined further down or in page-level CSS. ──────────────────────────────────────────────────────────────────── */ .klott-marketing-surface[data-theme] .klott-display { font-family: var(--klott-display-family); } .klott-marketing-surface[data-theme] .klott-feature-head { font-family: var(--klott-display-family); color: var(--klott-page-fg); } .klott-marketing-surface[data-theme] .klott-feature-desc { color: var(--klott-page-fg-secondary); } .klott-marketing-surface[data-theme] .klott-feature-eyebrow { color: var(--klott-eyebrow-color); } .klott-marketing-surface[data-theme] .klott-rule { background: var(--klott-hairline); } .klott-marketing-surface[data-theme] hr.klott-rule { background: var(--klott-hairline); } /* Separator (shadcn) — bg-white/8 → reroute through hairline var. */ .klott-marketing-surface[data-theme] [data-orientation="horizontal"][role="none"], .klott-marketing-surface[data-theme] [data-orientation="horizontal"][data-slot="separator-root"] { background-color: var(--klott-hairline) !important; } .klott-grain { position: fixed; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); background-size: 200px 200px; opacity: 0.06; mix-blend-mode: overlay; z-index: 2; } .klott-display { /* v17: route through --klott-display-family so the utility class follows the active mood like every other display surface. */ font-family: var(--klott-display-family, var(--font-display), 'Space Grotesk', Inter, system-ui, sans-serif); font-weight: 500; letter-spacing: -0.02em; } /* Wordmark — shared across every marketing nav (homepage, pricing, self-host, changelog) so the class is defined exactly once. v52: the family is INTER (--font-ui), not the display face. The nav is interface, not branding: "Klott" here labels the home link that sits beside the logo mark, and it belongs to the same type system as the links, the search chip and the Join button around it, all of which are already Inter. Space Grotesk (and every per-mood display face) stays where it belongs, on headlines and .klott-display/.klott-editorial. --font-ui is used rather than --klott-body-family because the body family is itself mood-dependent (moods re-key it to Source Serif / Space Mono), and the nav must not change face with the mood. Colour still reads from --klott-wordmark-color so light moods get a dark wordmark and dark moods stay light. Per-mood .klott-marketing-surface[data-theme="…"] .klott-wordmark overrides in homepage/page.tsx HOMEPAGE_CSS (concatenated after this block) still take precedence for the TINT. */ .klott-wordmark { font-family: var(--font-ui), Inter, system-ui, sans-serif; font-weight: 500; letter-spacing: -0.02em; color: var(--klott-wordmark-color, #fafafa); display: inline-block; position: relative; } /* The wordmark is a , so the surface-wide ".klott-marketing-surface span" family reset above (0,1,1) out-specified the .klott-wordmark rule (0,1,0) and the wordmark silently fell back to the BODY family on every route that does not ship its own override. The homepage does ship one (".klott-marketing-surface[data-theme='off'] .klott-wordmark" in HOMEPAGE_CSS, 0,2,1), so "Klott" rendered in Space Grotesk on /homepage/ and in Inter on /discover/, and, next to the Discover link (which was pinned to the body family to match the WRONG result), the two read as different sizes, worst on mobile where they sit shoulder to shoulder. One surface-scoped rule (0,2,0) settles it: the wordmark resolves to the same family on EVERY marketing route, which is what .klott-wordmark asked for all along. Nothing global changes: only this one element's family. */ .klott-marketing-surface .klott-wordmark { font-family: var(--font-ui), Inter, system-ui, sans-serif; } /* v51: and the same value again at ID specificity (1,1,0), because the rule above (0,2,0) still loses on ONE route. homepage/page.tsx ships eight ".klott-marketing-surface[data-theme='…'] .klott-wordmark" blocks (0,3,0) inside HOMEPAGE_CSS, which is concatenated after this block. Those blocks used to hard-code a per-mood display face each (Permanent Marker, DynaPuff, Pirata One and so on); they no longer declare a family at all, but they do still set weight and tracking, and a future one could reach for a family again. Without this rule the nav lockup would change typeface every time the mood changed on /homepage/ while every other route stayed put. (1,1,0) beats (0,3,0), so the nav is Inter on every mood and every route. This pins the FAMILY only. Colour is deliberately left alone so the per-mood and per-mode wordmark tints in HOMEPAGE_CSS keep winning, and #klott-marketing-root is the id every nav-bearing marketing route already puts on its surface. */ #klott-marketing-root .klott-wordmark { font-family: var(--font-ui), Inter, system-ui, sans-serif; } .klott-brand { color: #fafafa; } /* v28: inline kbd chip — renders backtick-quoted spans inside editable markdown (e.g. the hero subcopy's "/" hotkey callout). Mirrors the one-off inline style the hero paragraph used before it became an EditableBlock, so converting it to markdown didn't change how it looks. */ .klott-inline-kbd { font-family: ui-monospace, "SF Mono", Menlo, monospace; background: var(--klott-hairline, rgba(255,255,255,0.08)); border: 1px solid var(--klott-hairline, rgba(255,255,255,0.08)); border-radius: 6px; padding: 2px 7px; font-size: 0.8em; color: var(--klott-page-fg, #fafafa); } .klott-rule { border: 0; height: 1px; /* Inherits from --klott-hairline so the rule re-tints per mood. */ background: var(--klott-hairline, rgba(255,255,255,0.08)); margin: 0; max-width: 1080px; margin-left: auto; margin-right: auto; } .klott-link-underline { color: #fafafa; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.08); text-underline-offset: 4px; transition: text-decoration-color 0.15s ease; } /* v34: hover pulls the underline to the active mood accent so links carry a hit of mood color instead of a flat white/ink underline. */ .klott-link-underline:hover { text-decoration-color: var(--klott-cta-bg, #fafafa); } .klott-nav { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; /* Geometry (max-width, padding, margin-top, radius, fill, blur) is SCROLL-INTERPOLATED on --nav-p in globals.css (.klott-nav). Do NOT pin fixed max-width / padding / top+bottom margin here: this MARKETING_BASE_CSS block is injected inline in the page body, so it loads AFTER globals in source order and (same specificity) would WIN — freezing the morph and removing the compact pill's top gap. Only horizontal centering stays here. The 1100px content-column alignment now lives in the interpolated top-state (--nav-p:0) value in globals. */ margin-left: auto; margin-right: auto; gap: 24px; } /* ── Shared page gutter ──────────────────────────────────────────────── The ONE horizontal geometry every full-bleed marketing surface aligns to: a 1400px column, centred, with a viewport-relative gutter that collapses to 20px on a phone and caps at 48px on a desktop. It started life on Discover (.klott-discover-wrap) and is the storefront's left edge; both selectors are listed here rather than the numbers being copied into each file, so the nav and the page content underneath it cannot drift apart. v55: the nav row joins it. Its was already full-bleed, but the row inside was capped at the 1080px marketing text column (globals.css), so on a wide window the lockup sat ~460px in from the edge at 1920 while the page below it started at ~308px: the nav read as floating in the middle of the window rather than framing it. It now spans the browser window and lands on the same gutter as everything below it, on EVERY marketing route, not just Discover. .klott-nav-header .klott-nav is deliberately two classes deep: the numbers it replaces live on a bare .klott-nav in globals.css, so this has to out-specify them rather than rely on source order. Only the horizontal geometry is set here; the vertical padding (22px, and 14px in the mobile block below) still comes from those rules, so the nav's height and its scroll morph are untouched. The header itself is not styled here at all, so the fixed content-fade scrim hanging off it keeps its own viewport geometry. /discover/ NO LONGER TAKES THE 1400 CAP. Its PAGE_CSS (src/app/discover/page.tsx) overrides max-width to none on BOTH selectors below, so the storefront and the nav above it run edge to edge together. Everything else (width:100%, box-sizing, the auto margins, the gutter padding) is still taken from here, and every other marketing route still gets the whole rule including the cap. If you change the cap here, that override is where Discover's answer lives. */ .klott-discover-wrap, .klott-nav-header .klott-nav { width: 100%; box-sizing: border-box; /* Discover runs WIDER than the 1080 marketing text column on purpose: the bento storefront wants to fill the screen and read like an immersive shelf. */ max-width: 1400px; margin-left: auto; margin-right: auto; padding-left: clamp(20px, 5vw, 48px); padding-right: clamp(20px, 5vw, 48px); } /* Logo + mood switcher + theme toggle group. Gap lives here (not inline in MarketingNav.tsx) so the mobile query can tighten it — v33 renders the nav-inline mood pill on mobile too, so the group has to pack tighter. */ .klott-nav-lead { gap: 20px; } .klott-nav-actions { display: flex; align-items: center; /* v50: the right cluster (search, the three-dot overflow when signed out, and the Join button or user badge) is ONE control group, so it packs at the same 10px the mobile block has always used, instead of the old 28px that pushed the badge a full control-width away from the search glyph. Nothing about the controls' own boxes changes: each still carries its shared sm height and its own 44px tap expander (below), so tightening the gap costs no touch target. */ gap: 10px; } .klott-nav-link { /* v13: mood-driven so the nav links stay legible on light moods. */ color: var(--klott-page-fg-secondary, #b8b8b8); font-size: 14px; font-weight: 500; text-decoration: none; transition: color 0.15s ease; /* Belt-and-braces: never let a link wrap mid-word (e.g. "Self-host", "Free (kind of)") in the narrow band just above the hamburger. */ white-space: nowrap; } .klott-nav-link:hover { color: var(--klott-page-fg, #fafafa); } .klott-nav-link[data-active="true"] { color: var(--klott-page-fg, #fafafa); } /* Desktop page-link cluster (Discover / Pricing / Join) in the nav actions. Reuses .klott-nav-link's mood-driven color + active color. v51: NO UNDERLINE, in any state (Carl: "never use the underline"). This cluster used to carry a transparent→mood-accent underline on hover plus a 2px accent underline on the current page, and that active underline was the single thing that still made the nav look different depending on which route you were on: /discover/ drew a rule under "Discover", every other marketing route drew nothing. The whole text decoration stack is deleted rather than made transparent, so there is no dormant underline left to switch back on. The current page is signalled ONLY by the dim on the other side of the lead cluster (see the [data-dim] rule below) plus the full-strength colour here. Carries .klott-nav-secondary too, so it hides ≤899px (mobile reaches these via the MobileNav drawer). */ .klott-nav-links { display: flex; align-items: center; gap: 22px; } .klott-nav-links .klott-nav-link { text-decoration: none; /* Opacity duration matches the logo lockup's dim transition in MarketingNav.tsx (0.28s) so both halves of the identity pair cross-fade at the same rate when the route changes. */ transition: color 0.15s ease, opacity 0.28s ease; } @media (prefers-reduced-motion: reduce) { .klott-nav-links .klott-nav-link { transition: none; } } .klott-nav-links .klott-nav-link:hover { color: var(--klott-page-fg, #fafafa); } .klott-nav-links .klott-nav-link:active { color: var(--klott-page-fg, #fafafa); transform: translateY(0.5px); } /* v48: the lead-cluster links (currently just Discover) are typeset EXACTLY like the "Klott" wordmark sitting immediately to their left, same family, size, weight, letter-spacing and colour var, so the mark, the wordmark and the link read as one lockup instead of three different type treatments. Weight deliberately does NOT change on the active page (it used to jump to 600, which broke the match); the active page is signalled by the dim on the OTHER side of the lockup instead, never by an underline, which v51 removed from this cluster entirely. Scoped to .klott-nav-lead so the footer's .klott-nav-link copies are untouched. */ .klott-nav-lead .klott-nav-links .klott-nav-link { /* SAME family the wordmark renders in, per the .klott-wordmark rules above: Inter, the UI face, named through --font-ui directly. It must be the literal same value rather than a var chain that could diverge, because the whole point of this block is that the mark, the wordmark and this link read as one lockup. Not --klott-body-family: that one is mood-dependent (moods re-key it to Source Serif / Space Mono), and the nav must not change face with the mood. */ font-family: var(--font-ui), Inter, system-ui, sans-serif; font-size: 16px; font-weight: 500; letter-spacing: -0.02em; color: var(--klott-wordmark-color, #fafafa); } /* The label span would otherwise inherit the surface-wide span family reset and undo the match from the inside. */ .klott-nav-lead .klott-nav-links .klott-nav-link .klott-nav-link-text { font-family: inherit; letter-spacing: inherit; } .klott-nav-lead .klott-nav-links .klott-nav-link:hover, .klott-nav-lead .klott-nav-links .klott-nav-link[data-active="true"] { color: var(--klott-wordmark-color, #fafafa); } /* v50: the nav carries TWO identity elements, the Klott lockup (mark + wordmark) and the lead-cluster section link (Discover), and whichever one the visitor is NOT currently on fades DOWN, so the selected side reads as selected. On /discover/ the lockup dims (MARKETING_LOGO_DIM_MARK / MARKETING_LOGO_DIM_WORDMARK, applied in MarketingNav.tsx); on every OTHER marketing route the section link dims instead, reusing the SAME wordmark opacity value rather than introducing a second one. Both sides are still real links with their accessible names intact (this is visual weighting, never a disabled state), and 0.65 is the value already chosen to clear WCAG AA for a link on this surface. Hover clears the dim so the link confirms it is still live. */ .klott-nav-lead .klott-nav-links .klott-nav-link[data-dim="true"] { opacity: 0.65; } .klott-nav-lead .klott-nav-links .klott-nav-link[data-dim="true"]:hover, .klott-nav-lead .klott-nav-links .klott-nav-link[data-dim="true"]:focus-visible { opacity: 1; } /* Discover link: ONE rendering at every width, the written-out word, exactly as desktop has always shown it. The Compass icon variant (.klott-nav-link-icon / .klott-nav-icon-link, shown ≤899px while the label was hidden) is gone; see MarketingNav.tsx v49. Nothing replaces it: the label span carries no styling of its own, so the link is styled entirely by the .klott-nav-link rules above. The width the icon used to save is recovered by the packed gutters/gaps in the ≤899px block further down. */ /* ── Removed in v48 ────────────────────────────────────── .klott-nav-header .klott-nav-cta and .klott-nav-secondary-btn used to live here. Both were duplicate button definitions for jobs the shared system below already covers, and both had drifted (the nav CTA morphed into a 999px pill on scroll, the secondary chip carried a drop shadow and a 2px outline ring). They had no markup left using them. Deleted rather than aliased, so there is genuinely one definition to change. */ /* ── Shared button system ──────────────────────────────────────────────── ONE definition for every marketing button and button-like link. Geometry comes from MARKETING_BUTTON_SIZES above, so the radius, height, padding and type size exist in exactly one place. Compose as klott-btn + klott-btn-SIZE + klott-btn-VARIANT. Radius is identical at every size on purpose: a small button is the same SHAPE as a large one, never a pill. Secondary carries a FULL border on all four sides matching that radius (never a single-side accent). No shadows anywhere. ICONS ARE NOT PART OF THIS VARIANT. A marketing button is its label and nothing else. Leading icons used to be added ad hoc by individual callers (a Compass on "Browse the library", nothing on "See the plans"), which is what made two buttons with the same job look like two different components. If a future button genuinely needs a glyph, add a documented slot HERE with a token-driven size and gap rather than dropping an icon into one caller. */ .klott-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; border: 1px solid transparent; border-radius: 10px; font-family: var(--klott-body-family, var(--font-ui), Inter, system-ui, sans-serif); font-weight: 600; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; cursor: pointer; outline: 1.5px solid transparent; outline-offset: 2px; transition: background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, outline-color 0.2s ease-out; } .klott-btn:focus-visible { outline: 2px solid var(--klott-cta-bg, #F0B400); outline-offset: 2px; } .klott-btn-sm { height: 36px; padding: 0 14px; font-size: 13px; border-radius: 10px; } .klott-btn-md { height: 44px; padding: 0 22px; font-size: 15px; border-radius: 10px; } .klott-btn-lg { height: 52px; padding: 0 28px; font-size: 16px; border-radius: 10px; } .klott-btn-primary { background: var(--klott-cta-bg, #F0B400); color: var(--klott-cta-fg, #0a0a0a); } .klott-btn-primary:hover { background: color-mix(in srgb, var(--klott-cta-bg, #F0B400) 85%, var(--klott-cta-fg, #0a0a0a) 15%); } /* Secondary: THE one low-emphasis treatment for the whole surface. Transparent fill, one 1px border on all four sides at the same radius as the box (never a single-side accent), page-fg text. Callers used to improvise this: one had a page-bg fill with a 26% border, another a 6% page-fg wash with a faint hairline, a third a 2px outline and a drop shadow. They all resolve here now. The border is derived from --klott-page-fg rather than --klott-hairline because the hairline (8% white) is too faint to read as a button edge on a busy backdrop; 22% is clearly visible in both light and dark mode without competing with the filled primary. */ .klott-btn-secondary { background: transparent; color: var(--klott-page-fg, #fafafa); border-color: color-mix(in srgb, var(--klott-page-fg, #fafafa) 22%, transparent); /* Frosts whatever sits behind the button, which on the marketing pages is the animated ascii field. Background stays transparent so the blur is the only treatment; adding a tint on top would wash the field out entirely. No extra border here, the rule above already owns the edge (HAG-1878). */ backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .klott-btn-secondary:hover { background: color-mix(in srgb, var(--klott-page-fg, #fafafa) 6%, transparent); border-color: color-mix(in srgb, var(--klott-page-fg, #fafafa) 38%, transparent); } .klott-btn-secondary[data-active="true"] { color: var(--klott-page-fg, #fafafa); border-color: color-mix(in srgb, var(--klott-page-fg, #fafafa) 38%, transparent); } @media (prefers-reduced-motion: reduce) { .klott-btn { transition: none; } } /* ── Shared chip ─────────────────────────────────────────────── ONE definition of what a chip IS on the marketing surface: an inline control with a hairline border, set at secondary text weight, coming up to full page-fg on hover. Every chip lists itself here, so the invariant can only be changed in one place. Before this rule the same five declarations were written out four times (HAG-2021) and had started to drift. What is deliberately NOT hoisted, and why. These differences are choices, not drift, so folding them into the shared rule would be a regression: radius 10px on the nav triggers and on the library rail, because both are button-shaped controls and this surface has ONE button corner. 999px on the search-panel chip, which is a suggestion tag inside the dialog rather than a control on the page. fill the nav triggers carry a page-bg wash behind a 14px blur so they stay legible over the TRANSPARENT top of the nav; the library rail stays fully transparent behind an 8px blur so the ascii field shows through it (the .klott-btn-secondary precedent); the search chip takes a flat 5% page-fg wash because it sits on the dialog's own OPAQUE panel, where there is nothing behind it worth frosting. type the library rail is set at the 13.5px/600 filter-label scale it shares with Discover's category toggles; the search chip is 13px/500 body text; the triggers are icon-only and inherit. The hover border and the transition timing differ for the same kind of reason and are also left with their owners: the rail uses 26% + 0.2s ease-out, matching .klott-library-card and .klott-btn around it, while the nav uses 30% + 0.15s ease, matching the rest of the nav. .klott-library-cat is declared in src/app/homepage/PublicLibrarySection.tsx. That file's

Spark an ideaand make it grow.

Let’s Klott.

Spark an idea
and make it grow.