: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; --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/pirate/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: Magical mood — bump h1/h2/h3 ~25% over the baseline clamp ranges. Dancing Script reads visually smaller than the other display faces at the same nominal size because of its cursive x-height and decorative ascenders/descenders, so the magical hero / closing / section heads were under-weighted vs Chaos / Concur. Inline fontSize: clamp(...) on the actual elements (HeroAnimated.tsx, page.tsx) wins over external CSS unless we use !important — that's why these rules carry the bang. Scoped to the magical surface only so every other mood keeps its current scale. */ .klott-marketing-surface[data-theme="magical"] h1 { font-size: clamp(60px, 11vw, 120px) !important; } .klott-marketing-surface[data-theme="magical"] h2 { font-size: clamp(54px, 8.5vw, 108px) !important; } .klott-marketing-surface[data-theme="magical"] h3 { font-size: clamp(34px, 4.4vw, 50px) !important; } /* ──────────────────────────────────────────────────────────────────── 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-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%); --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-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 — Pirate. 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-fg: #3d2817; --klott-page-fg-secondary: #6b4a30; --klott-page-fg-dim: #7a553d; --klott-hairline: rgba(61,40,23,0.16); --klott-display-family: 'Pirata One', 'Times New Roman', serif; /* Pirate 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-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%); --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-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%); --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: 'Dancing Script', 'Brush Script MT', cursive; /* Magical body in serif — Dancing Script display + 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-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%); --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%); --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. Same Space Grotesk family as .klott-editorial/.klott-display; color reads from --klott-wordmark-color so light moods get a dark wordmark, dark moods stay light. Per-mood .klott-marketing-surface[data-theme="…"] .klott-wordmark overrides in homepage/page.tsx HOMEPAGE_CSS (which is concatenated after this block) still take precedence where a richer tint is wanted. */ .klott-wordmark { font-family: var(--klott-display-family, var(--font-display), 'Space Grotesk', 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; } .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; } /* 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; gap: 28px; } .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; layers on the marketing underline-on-hover treatment (transparent → mood-accent) and an accent active underline so the current page reads bolder with a coloured rule. 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: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color 0.15s ease, text-decoration-color 0.15s ease, text-decoration-thickness 0.15s ease; } .klott-nav-links .klott-nav-link:hover { color: var(--klott-page-fg, #fafafa); text-decoration-color: var(--klott-cta-bg, #fafafa); } .klott-nav-links .klott-nav-link:active { color: var(--klott-page-fg, #fafafa); transform: translateY(0.5px); } .klott-nav-links .klott-nav-link[data-active="true"] { text-decoration-color: var(--klott-cta-bg, #fafafa); text-decoration-thickness: 2px; } /* 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 2px accent underline above and by the logo dimming instead. Scoped to .klott-nav-lead so the footer's .klott-nav-link copies are untouched. */ .klott-nav-lead .klott-nav-links .klott-nav-link { /* This is the family the wordmark ACTUALLY renders in. .klott-wordmark asks for --klott-display-family, but the surface-wide ".klott-marketing-surface span" rule is one specificity point higher and has always won, so the wordmark resolves to the body family. Matching the rendered result is the point of this rule, so it names the same family rather than the one the wordmark asks for and does not get. */ font-family: var(--klott-body-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); } .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); } /* 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); } .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; } } /* .klott-cta-primary and .klott-cta-ghost used to live here. Same story as the nav pair above: two more definitions of the primary and the secondary button, at their own radius (12px) and their own hover behaviour, with no markup left using them. Deleted in v48. */ .klott-logo-link { display: inline-flex; align-items: center; gap: 10px; color: #fafafa; text-decoration: none; } .klott-logo-link:hover .klott-logo-mark { transform: rotate(-8deg); } /* v35: raise small interactive controls to the 44px iOS/WCAG minimum tap target WITHOUT growing their visual size. A transparent, centered ::after overlays each control with a >=44px hit area; because the pseudo-element belongs to the control, clicks on it register on the control. Scoped to the logo, hamburger, nav mood switcher, and footer links — the shared Button CTA is intentionally left to the Button component. */ .klott-logo-link, .klott-mobile-nav-toggle, footer .klott-nav-link { position: relative; } .klott-logo-link::after, .klott-mobile-nav-toggle::after, footer .klott-nav-link::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; min-width: 44px; height: 44px; } /* H3: footer links had only the shared .klott-nav-link color hover — give them an underline-on-hover too so the footer chrome carries the same reusable hover treatment as body links (.klott-link-underline). Mood-accent underline, subtle offset, animated via text-decoration-color to match the underline helper. */ footer .klott-nav-link { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color 0.15s ease, text-decoration-color 0.15s ease, text-decoration-thickness 0.15s ease; } /* Verified: footer links carry .klott-nav-link and this pseudo-class rule (specificity 0,0,2,1) is the winning declaration — nothing overrides it. The reveal was just too faint to read: a transparent→accent 1px underline plus a mild grey→white shift. Brighten to page-fg AND grow the accent underline to 2px so the hover is unmistakable on every mood. */ footer .klott-nav-link:hover { color: var(--klott-page-fg, #fafafa); text-decoration-color: var(--klott-cta-bg, #fafafa); text-decoration-thickness: 2px; } /* The mood pill's clickable is a NESTED

See what people are writing.

Trending

Recent

Klippets

Start your own Klott.