/* ===================================================================== thilo.ai public website — shared stylesheet for index.html and the generated changelog pages. Served straight off nginx's root (static/website/), OUTSIDE the Tailwind pipeline — so the design system's semantic tokens cannot be consumed as utilities here. DESIGN-SYSTEM EXCEPTION, deliberate: the custom properties below are the LITERAL values of the tokens they are named after in libs/thilo-design/src/app/globals.css (light in :root, dark in the `.dark` block). Change them only when those tokens change upstream, and never introduce a colour that is not one of them — --accent-dot is the single exception, the mark's own fixed yellow (#FADB14 in both THILO-light.svg and THILO-dark.svg), and --accent-ink is that same yellow darkened for TEXT (see below). THE SITE HAS NO THEME (TCKQKMT9K9). It does not read the OS colour scheme, does not remember a choice and has no toggle — a visitor whose machine is in dark mode sees exactly this page. What it has instead is a TONE PER SECTION: `data-tone="dark|light"` on a section redeclares the whole palette for that subtree, the landing page alternates (opening on two dark screens, hero + #what, and closing on one), and every component below keeps the one set of selectors it already had. See docs/developer/60-stage-install.md § Section tones. THE PORTAL UNDER /members/ DOES (TCKKU9FF9E), and it is the same one mechanism rather than a second one: the theme is a CHOICE OF TONE FOR THE WHOLE DOCUMENT, written as `data-tone` on by the page's own inline boot script and flipped by `#theme-toggle` in the header. There is still exactly ONE dark block in this file, no media query asking the OS and no second attribute — a members page in dark IS a document whose one tone is the dark one, and every rule below stays as it was. A signed-in person is reading a portal, not looking at a designed sequence, and that is the whole difference. See docs/developer/124-members-area.md § Light and dark. ===================================================================== */ /* The light tone = the design system's :root token values. It is also the page default, so a document with no tone anywhere (the changelog, a members page before its is read) is light. */ :root, [data-tone="light"] { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --muted-foreground: oklch(0.556 0 0); --border: oklch(0.922 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --input: oklch(0.922 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --ring: oklch(0.708 0 0); /* Accent-coloured TEXT. --accent-dot is a mark colour: it is legible as a fill, a border or a dot, and it is what the logo is drawn in — but as type on the light ground it lands at 1.4:1, well under WCAG's 4.5:1, and the "How it works" step numbers were unreadable (TCKRWWUJQY). This is not a second colour: it is --accent-dot itself, mixed toward the palette's own near-black until it clears the bar (5.2:1 on --card). The dark tone sets it back to the plain yellow, which is 13:1 there. Use it wherever the accent is set as text; leave fills, borders and the mark's own dot on --accent-dot. */ --accent-ink: color-mix(in oklab, var(--accent-dot) 52%, oklch(0.145 0 0)); /* The floating header pill's glass (TCKHXDEHPC, site.css § header). Three tokens rather than three literals, because the pill floats over whatever section is under it and its tone flips on a scroll boundary: the ground it lets through, the hairline that separates it from that ground and the shadow that lifts it all have to change together, and they are what the nav-open menu card is drawn in too. Ground and border are the tone's own --background and --foreground, mixed down to the alpha the glass wants — on the light tone the hairline is a thin dark line, on the dark tone a light one, which is the same hairline either way. The SHADOW is black in both tones and deliberately not mixed from --foreground: a drop shadow is an absence of light, not a palette colour, and --foreground is near-white on the dark tone — a white halo under a pill is not a shadow. */ --glass-bg: color-mix(in oklab, var(--background) 62%, transparent); --glass-border: color-mix(in oklab, var(--foreground) 8%, transparent); --glass-shadow: 0 8px 32px rgb(0 0 0 / 8%); /* The two lifts a section's content uses, per tone for the same reason as the glass shadow (TCK7FN72UU): a shadow is black alpha in both tones, but the amount that reads depends on the ground under it. What lifts a frame off white — 35% black, feathered — is invisible on the dark tone's near- black, so the dark block below asks for more of it and a lighter spread. `--shot-shadow` is the resting lift of a framed picture (the product shot in #what, the gallery stage); `--lift-shadow` is the hover lift of a card. Nothing else here is a shadow; do not add a third for one element. */ --shot-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 24px 68px -24px rgb(0 0 0 / 35%); --lift-shadow: 0 16px 40px -20px rgb(0 0 0 / 30%); } /* ------------------------------------------------- tone-independent Everything that is NOT part of the palette, so a section flipping its tone does not redeclare it: the mark's own yellow, the two names the splash canvas reads, the radius and the hero band's fixed ground. They live on :root once and inherit into every tone. */ :root { --accent-dot: #fadb14; /* the mark's own accent, not a token */ /* Read by the hero splash's canvas (/splash.js), which resolves colours itself — a canvas `font` string is not CSS and a canvas fillStyle cannot follow a `var()`, so the engine fetches these two by name. --thilo-ai-spark is the design system's token, literal (the same value in light and dark upstream). --font-inter names the family the lockup is set in: Inter in the app, the website's own Geist here — it is the only face this page loads, and the lockup has to match the headline under it. */ --thilo-ai-spark: oklch(0.8 0.15 78); --font-inter: "Geist"; --radius: 0.625rem; /* ---------------------------------------------------- the hero band DESIGN-SYSTEM EXCEPTION, and a deliberate one (TCKK73JEQ6) — the same kind as --screen-bg for phones in doc 60. The band at the top of the landing page is ARTWORK: the designer chose its ground and the blue→ cyan ramp the dots are drawn in when she drew it (libs/thilo-design/hero-animation/hero-terrain/), and the palette is a property of the picture rather than of the page. The nearest token, the dark tone's --background at oklch(0.145 0 0), is a neutral grey and it visibly mutes the blue glow — the piece stops being the piece. So this is ONE fixed value: the band does not follow a tone at all, the way a photograph would not. Everything drawn ON it is still a token — the copy block carries `.on-dark-ground` (below) and gets the dark tone's own foreground, muted, primary and border. The dots' two colours live in tools/website/hero-terrain-engine.ts, next to the code that mixes them; no CSS can reach inside a canvas. Nothing else on the site may use this. If a second dark band ever wants it, that is the moment to ask the designer rather than the moment to reach for --hero-ground. */ --hero-ground: #04060f; } /* The dark tone = the design system's `.dark` token values — ONE block, because there is one way to be dark: a section (or a header, or a footer) that carries `data-tone="dark"`. `.on-dark-ground` rides along with it. That is how the hero band's copy gets the dark tone's tokens without a second copy of the palette to keep in step: the band's ground is fixed artwork (--hero-ground above), so everything set on it has to be dark whatever tone the section around it carries. Custom properties inherit from the nearest ancestor that sets them, so an element with this class hands the dark values down to its whole subtree. It is not a "dark mode" class for general use — put it on a block that sits on --hero-ground, and nowhere else. */ [data-tone="dark"], .on-dark-ground { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --muted-foreground: oklch(0.708 0 0); --border: oklch(1 0 0 / 10%); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --input: oklch(1 0 0 / 15%); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.985 0 0); --ring: oklch(0.556 0 0); --accent-ink: var(--accent-dot); /* The pill over a dark section: less of the ground held back (the dark terrain reads through it), a brighter hairline, a heavier shadow. */ --glass-bg: color-mix(in oklab, var(--background) 38%, transparent); --glass-border: color-mix(in oklab, var(--foreground) 22%, transparent); --glass-shadow: 0 8px 32px rgb(0 0 0 / 40%); /* A frame on the dark ground: the feathered shadow twice as dense, with the near-contact layer dropped — on near-black it is the frame's own 1px --border (the light hairline every card and frame already carries) that separates it from the ground, and the shadow only gives it depth (the reference shot on TCKWF57JJR). */ --shot-shadow: 0 24px 68px -24px rgb(0 0 0 / 70%); --lift-shadow: 0 16px 40px -20px rgb(0 0 0 / 65%); } /* What the UA draws for the tone rather than for the page: the form controls in #contact, a