/* ============================================================================ No Hype AI — "The Verdict": the SHARED layer. Spec of record: you-tube-channels/channels/channel_06_ai_academy/00_strategy/ brand_kit.md · brand_review_2026-08.md §3.1–§3.6 Token source: pixel-brand/engine/styles/editorial/tokens.css — the blocks marked "LIFTED" are copied from it rather than re-derived, so the site and the social assets cannot drift apart. If this file and the spec disagree, the spec is right and this file is a bug. WHY THIS FILE EXISTS (Phase 2, first change): the holding page and the 232-page site are two stylesheets. Phase 1 put the approved system in holding.css only. Duplicating it into main.css would have created two copies of a palette that is also the source for every rendered social asset — so the tokens and the components both stylesheets need live here, once, and holding.css and main.css each it BEFORE their own file. Neither may redefine a token below. Loaded by: _includes/layouts/holding.njk · _includes/layouts/base.njk ========================================================================= */ /* ========================================================================== PART 1 · Brand tokens LIFTED verbatim from editorial/tokens.css. Raw values — never used directly by a component that can appear on both grounds; use Part 2's semantics. ========================================================================== */ :root { --ink: #0B0D10; --ink-2: #15181D; --paper: #F7F6F3; --paper-2: #EDEBE6; --lime: #CDF546; --lime-deep: #A8CC22; --crimson: #FF2E5B; --amber: #F2B01E; --graphite-400: #8A9099; --graphite-600: #4B5158; --font-display: 'Archivo', system-ui, sans-serif; /* wdth 62–125, wght 100–900 */ --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* cap-height / em, MEASURED from the shipped woff2 — not from a table. Everything sized "by cap-height" derives from these; a wrong value here silently fails an acceptance test. See docs/FONTS.md. */ --cap-display: 0.676; /* Archivo */ --cap-mono: 0.676; /* JetBrains Mono */ --cap-body: 0.661; /* Inter */ /* verdict block, brand_review §3.4 — ratios are against the CAP-HEIGHT */ --verdict-h-per-cap: 1.6; --verdict-padx-per-cap: 0.6; --verdict-track: 0.06em; /* page furniture */ --measure: 62rem; --gutter: clamp(1.5rem, 5vw, 5rem); } /* ========================================================================== PART 2 · Ground semantics — the dark/light machinery Three grounds, not two: :root / [data-theme="dark"] INK — the default (rev 2: dark-first) [data-theme="light"] PAPER — the user's explicit light choice html.reading PAPER — lesson and long-form pages, ALWAYS `html.reading` is the §3.6 hard exception: "lesson and long-form pages default to --paper regardless of theme preference. 219 lesson pages exist to be read; the brand does not get to make that harder." All three land on , and `html.reading` is (0,1,1) against [data-theme]'s (0,1,0) — so the exception wins over a saved theme by specificity, not by rule order. Contrast, computed (WCAG 2.1) — every pairing below is ≥4.5:1 for body text: paper/ink 18.0 · graphite-400/ink 6.05 · graphite-400/ink-2 5.53 ink/paper 18.0 · graphite-600/paper 7.43 · lime/ink 15.5 · ink/lime 15.5 ink/crimson 5.37 · ink/amber 10.2 NEVER lime text or a lime stroke on paper (1.2:1). On a light ground lime exists ONLY as a fill with ink text — which is what --accent-fill is for. ========================================================================== */ :root, [data-theme="dark"] { /* drives the scrollbar, form controls and the canvas behind the body */ color-scheme: dark; --bg-primary: var(--ink); --bg-secondary: var(--ink-2); /* the flat alternative to a glow */ --bg-tertiary: var(--ink-2); --text-primary: var(--paper); --text-secondary: var(--graphite-400); /* --text-muted is deliberately the same value as --text-secondary: the palette has two graphites and only one of them clears 4.5:1 on this ground. The hierarchy is carried by size and weight instead of by a third grey. */ --text-muted: var(--graphite-400); --hairline: rgba(138, 144, 153, .22); /* graphite-400, low alpha — a neutral, not an accent */ --border-color: var(--hairline); /* --accent is the accent as TEXT or STROKE. --accent-fill is the accent as a FILL with text on it; it is lime on both grounds, because that is the one form lime is allowed to take on paper. */ --accent: var(--lime); --accent-hover: var(--lime-deep); --accent-fill: var(--lime); --accent-fill-text: var(--ink); /* the system's signature 4px rule takes the ground's accent-as-stroke */ --rule: var(--lime); /* a verdict block carrying no state: paper→ink here, ink→paper on light */ --v-neutral-fill: var(--paper); --v-neutral-text: var(--ink); /* the mark recolours only when it is INLINED; as an it falls back to these same on-ink values baked into mark.svg */ --mark-box: var(--graphite-400); --mark-check: var(--lime); /* code is set on ink on BOTH grounds — an ink block on a paper page is the editorial convention, and it keeps one code treatment across the site */ --code-bg: var(--ink); --code-text: var(--paper); } [data-theme="light"], html.reading { color-scheme: light; --bg-primary: var(--paper); --bg-secondary: var(--paper-2); --bg-tertiary: var(--paper-2); --text-primary: var(--ink); --text-secondary: var(--graphite-600); --text-muted: var(--graphite-600); --hairline: rgba(75, 81, 88, .22); /* graphite-600, low alpha */ --border-color: var(--hairline); --accent: var(--ink); --accent-hover: var(--graphite-600); --accent-fill: var(--lime); --accent-fill-text: var(--ink); --rule: var(--ink); --v-neutral-fill: var(--ink); --v-neutral-text: var(--paper); --mark-box: var(--ink); --mark-check: var(--ink); --code-bg: var(--ink); --code-text: var(--paper); } /* ========================================================================== PART 3 · Type primitives LIFTED from editorial/tokens.css. `font-stretch` drives Archivo's wdth axis; `font-variation-settings` is set alongside it because some engines honour the axis more reliably that way. ========================================================================== */ /* Condensed uppercase. MARKETING SURFACES ONLY (§3.2) — the hero headline, a chapter card. Never a section heading. */ .display { font-family: var(--font-display); font-weight: 900; font-stretch: 62%; font-variation-settings: 'wdth' 62, 'wght' 900; text-transform: uppercase; letter-spacing: -.01em; line-height: .92; margin: 0; } /* Sentence-case headings keep the normal width axis. */ .heading { font-family: var(--font-display); font-weight: 700; font-stretch: 100%; font-variation-settings: 'wdth' 100, 'wght' 700; letter-spacing: -.02em; line-height: 1.06; margin: 0; } .mono { font-family: var(--font-mono); letter-spacing: .08em; } /* --- two shared utilities -------------------------------------------------- `.highlight` — a run of running text lifted to the top of the page's hierarchy. A lime FILL with ink text, which is 15.5:1 and is the ONE form lime may take on either ground; lime *text* on paper is 1.2:1 and prohibited, and every page that uses this can be either ground. It is deliberately NOT a verdict block: the block is "one per fixed canvas" and the pages that need this already spend theirs. `box-decoration-break: clone` so a highlight that wraps gets its padding on both lines instead of one long ragged band. `.visually-hidden` — present for a screen reader, absent on screen. Used by the consent gate's `role="status"` region, whose whole job is to announce a change a sighted user can already see. `clip-path` rather than `display:none`, which would take it out of the accessibility tree and silence it. ========================================================================== */ .highlight { background: var(--accent-fill); color: var(--accent-fill-text); font-weight: 600; padding: .1em .25em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ========================================================================== PART 4 · The verdict block (§3.4) — the owned device ONE per fixed canvas. Height 1.6 × cap-height, x-padding 0.6 × cap-height, 0 radius, JetBrains Mono Bold uppercase +0.06em, ink text on an accent fill. The trailing letter-spacing on the last glyph is subtracted back out of the right padding so the optical padding really is 0.6 × cap. Set --v-size (font-size) and --v-fill on the element. ========================================================================== */ .verdict { --cap: calc(var(--v-size) * var(--cap-mono)); --v-h: calc(var(--cap) * var(--verdict-h-per-cap)); --v-pad: calc(var(--cap) * var(--verdict-padx-per-cap)); display: inline-flex; align-items: center; justify-content: center; height: var(--v-h); padding-left: var(--v-pad); padding-right: calc(var(--v-pad) - var(--verdict-track)); background: var(--v-fill, var(--lime)); /* --v-text exists for the neutral block, which inverts by ground. Every accent fill (lime/crimson/amber) takes ink text on both grounds. */ color: var(--v-text, var(--ink)); font-family: var(--font-mono); font-weight: 700; font-size: var(--v-size); text-transform: uppercase; letter-spacing: var(--verdict-track); line-height: 1; border-radius: 0; } /* The block always sits on a rule of the same colour running to the nearest canvas edge. Thickness max(4px, 0.10 × block height) — at body sizes that resolves to the literal 4px the spec draws. Derived from --v-size so the rule can be a SIBLING of the block. */ .verdict-rule { height: max(4px, calc(var(--v-size, 40px) * var(--cap-mono) * var(--verdict-h-per-cap) * .10)); background: var(--v-fill, var(--lime)); } .verdict-group { position: relative; width: max-content; } .verdict-group > .verdict-rule { position: absolute; top: 100%; right: 0; /* "to the nearest canvas edge" — on a centred web column that is the left edge of the viewport, whatever the gutter is. body clips the overflow. A block that is NOT in a .verdict-group (the callout) gets a rule that stops at its own panel edge instead, which is its nearest canvas edge. */ left: -100vw; } /* State picks the fill, not the lane (brand_review Part 10 #2). A lane colour only applies when the block carries a bare number or date. */ .lane-pass { --v-fill: var(--lime); } .lane-fail { --v-fill: var(--crimson); } .lane-unknown { --v-fill: var(--amber); } .lane-evals { --v-fill: var(--lime); } /* No state at all — a label, not a verdict. Inverts with the ground. */ .lane-neutral { --v-fill: var(--v-neutral-fill); --v-text: var(--v-neutral-text); } /* ========================================================================== PART 5 · The hero lockup Shared by the holding page (src/holding/index.njk) and the real home page (_includes/layouts/home.njk) via _includes/components/home-hero.njk. There is exactly one hero in this codebase and this is what styles it. ========================================================================== */ .shell { max-width: var(--measure); margin-inline: auto; /* Top padding is deliberately much smaller than the bottom: 4.5rem of dead space above a 40px mark pushed the whole hero below the fold on a laptop. Measured 2026-08-09. */ padding: clamp(1.25rem, 3vw, 2.25rem) var(--gutter) clamp(3rem, 8vw, 6rem); } /* --- kicker: the mark + wordmark lockup ------------------------------------ The mark sits ON the kicker line rather than floating above it. Standing alone it read as an orphan and cost ~90px of vertical space for a piece of furniture; beside the words it stands for, it is the lockup brand_kit describes. ⚠️ Deviation for sign-off: brand_kit sets the wordmark in that lockup as Archivo 700, but the Phase 1 spec asks for the kicker in JetBrains Mono. This keeps the mono kicker. Switching to the letter of the lockup is one line — swap font-family to var(--font-display) and drop the tracking. Because the header lockup now shares this rule, that one line changes every surface. */ .kicker { display: flex; align-items: center; gap: clamp(.5rem, 1.5vw, .75rem); font-family: var(--font-mono); font-weight: 500; font-size: clamp(.8125rem, 2.6vw, 1rem); text-transform: uppercase; letter-spacing: .12em; color: var(--accent); margin: 0 0 clamp(.625rem, 1.5vw, .875rem); } .kicker-mark { flex: none; width: clamp(28px, 6.5vw, 38px); height: auto; } /* --- headline: the approved question -------------------------------------- */ .hero-headline { font-size: clamp(2.5rem, 8.4vw, 5.5rem); color: var(--text-primary); text-wrap: balance; margin-bottom: clamp(.75rem, 1.75vw, 1rem); } /* the system's signature: a 4px rule under the headline */ .hero-rule { height: 4px; background: var(--rule); border: 0; margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem); } .standfirst { font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem); line-height: 1.55; color: var(--text-primary); max-width: 46ch; margin: 0 0 clamp(1rem, 2vw, 1.25rem); } /* The credential sentence is the quieter of the two — it supports the first rather than competing with it, and graphite keeps one voice dominant. Still body-legible on both grounds (6.05:1 on ink, 7.43:1 on paper). */ .standfirst--credential { color: var(--text-secondary); font-size: clamp(1rem, .95rem + .35vw, 1.1875rem); margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); } /* --- byline: photo beside the host + credential lockup -------------------- The carousel close-slide pattern (brand_review §7.3), not a new device. Stacked by default, side-by-side only once there is room. The credential lockup's second line needs ~309px at the spec'd size, and a 390px phone has a 342px content column — so the moment a photo sits beside it, the lockup takes a THIRD break it is not supposed to take. Stacking below 640px keeps the two-line lockup the 2026-08-09 decision specifies. */ .byline { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(.875rem, 3vw, 1.75rem); } @media (min-width: 640px) { .byline { flex-direction: row; align-items: center; } } /* Alpha cut-out sitting DIRECTLY on the field — no tile, no circle, no border. §3.5: the subject is lit out of the field, not pasted onto it. `object-fit: contain` because the source is already a 1:1 cut-out; nothing here may crop through the face. */ .byline-photo { flex: none; width: clamp(104px, 24vw, 160px); height: auto; object-fit: contain; } .byline-text { min-width: 0; } .host { font-family: var(--font-display); font-weight: 700; font-stretch: 100%; font-variation-settings: 'wdth' 100, 'wght' 700; font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); letter-spacing: -.01em; color: var(--text-primary); margin: 0 0 .35rem; } /* The credential lockup. Two spans, each its own line, each `nowrap` — the break is specified (brand_kit.md → Host / Presenter), so it is never left to the browser. Set in sentence case, matching the canonical string and the carousel close slide: uppercasing renders the degree as "MSC", which reads as an acronym rather than a qualification. Tracking is .06em, not the kicker's .12em: at .08em the 39-character second line needs 328px and overflows a 320px phone. */ .credentials { font-family: var(--font-mono); font-size: clamp(.75rem, 2.4vw, .8125rem); letter-spacing: .06em; color: var(--text-secondary); margin: 0; } .credentials .cred-line { display: block; } /* Every leaf part is nowrap, so the only break opportunities on the whole lockup are the ones authored in the markup. Nothing here re-breaks on its own. */ .credentials .cred-line > span { display: inline-block; white-space: nowrap; } /* --- the launch statement, carried by the one verdict block ---------------- */ /* 2rem top, not 2.5: at 2.5 the verdict block's 4px rule was clipped by 7px on a 1440x800 laptop, which reads as a rendering fault rather than as a fold. */ .launch { margin: clamp(1.5rem, 3vw, 2rem) 0 clamp(3rem, 8vw, 4.5rem); } .launch-label { font-family: var(--font-mono); font-size: clamp(.6875rem, 2.2vw, .75rem); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 .75rem; } /* Set on the GROUP: the rule is a sibling of the block, and custom properties inherit — so this is the only element both of them can read it from. Setting it on .verdict instead leaves the rule on its 40px fallback and it comes out ~4.33px instead of the literal 4px the spec draws. */ .launch .verdict-group { --v-size: clamp(1.0625rem, 3.4vw, 1.5rem); } /* ========================================================================== PART 6 · Sections, the email slot and the channel rows Also shared between the holding page and the home page. ========================================================================== */ .section { border-top: 1px solid var(--hairline); padding-top: clamp(2rem, 5vw, 3rem); margin-top: clamp(2.5rem, 6vw, 3.5rem); } .section-title { font-size: clamp(1.375rem, 1.2rem + 1vw, 1.875rem); color: var(--text-primary); margin-bottom: clamp(1.25rem, 3vw, 1.75rem); } .section-lede { color: var(--text-secondary); max-width: 52ch; margin: -.5rem 0 clamp(1.5rem, 3vw, 2rem); } /* A handle quoted inside running text is an identifier, so it is set in mono and never allowed to break mid-string. */ .lede-handle { font-family: var(--font-mono); font-size: .9em; letter-spacing: .02em; color: var(--text-primary); white-space: nowrap; } /* --- numbered list: mono numeral + one line each --------------------------- Moved out of holding.css in the Kit build: /confirmed/ renders this in the SITE build, where holding.css is not loaded, so the list came out as a plain browser-numbered