/* ============================================================ THE CASE STUDY BODY STAYS SERIOUS Loaded only on the four case study pages, after every fun stylesheet. The owner's call: on a case study, fun mode dresses the intro and the site chrome and nothing else. Everything after the intro — the context aside, the body, the next-case nav — reads exactly as it does in serious mode, including the Unicorn Studio scene behind the RAF chapter-one graph. The fun stylesheets do most of the work themselves: each one is wrapped in an @scope donut whose limit is the region below the intro, so none of their 520 rules match down there any more. Read the header of fun.css for why an override list could not have done that job. What @scope cannot stop is INHERITANCE. and are inside the donut, they keep their fun values, and everything inherited flows past the limit into the region: 31 design tokens, plus colour, font, weight, letter spacing and the crayon cursor. This file puts those back, and deals with the two body-level grounds that also reach the region: the fixed halftone screen and the beige. SPECIFICITY IS DELIBERATELY ZERO on the region rules below. No fun rule matches a region root any more (a limit element is outside its own donut), so the only thing these declarations have to beat is inheritance — and any declaration beats an inherited value. Wrapping the selector in :where() means every serious rule in styles.css still wins on the elements it actually targets, which is the whole point: restore the serious cascade, do not impersonate it. ============================================================ */ /* ---- 1. THE TOKENS ------------------------------------------------------ fun mode redefines these 31 on . The values here are a copy of the :root block in styles.css, read back out of the browser on the four pages rather than retyped, so they are what serious mode actually computes. If a brand token changes in styles.css it has to change here too — the harness in the fun-mode case-study diff catches the drift as a computed-style difference below the intro. --footer-h and --main-h are left alone: they are measured layout values written by JS, not part of the fun palette. */ :where(html.fun-mode body[data-case-study] main > *:not(.cs-hero):not(.cs-header)) { --accent: #c73e1d; --bg-band: #f0ebe7; --bg-band-2: #e9e2dc; --bg-cream: #f7f4f2; --bg-dark: #141412; --cs-band: #eeece9; --cs-mark: #f6ddd4; --cs-note-bg: #fff4cf; --cs-note-border: #ffcd29; --cs-rule: rgba(0, 0, 0, 0.12); --cs-tag: #ece7e1; --cs-text: #333333; --cs-text-2: #494949; --cs-text-3: #797979; --font-display: 'Fraunces', Georgia, serif; --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; --font-serif-body: 'Lora', Georgia, serif; --radius-md: 0; --radius-pill: 0; --radius-sm: 0; --rule: rgba(0, 0, 0, 0.18); --rule-soft: rgba(0, 0, 0, 0.11); --surface: #eeece9; --text-body: #333333; --text-hover: #000000; --text-muted: #756e64; --text-muted-on-dark: #b3aca1; --text-primary: #111111; --veil: rgba(255, 255, 255, 0.72); --veil-border: rgba(17, 17, 17, 0.14); --veil-strong: rgba(255, 255, 255, 0.95); /* fun.js writes --fun-intro-h on for the two grounds below, and a custom property inherits into everything. Serious mode has no such property, so the region has none either: `initial` on a custom property is the guaranteed-invalid value, which reads back as "" — the same thing an unset property reads back as. */ --fun-intro-h: initial; /* the inherited text properties fun mode sets on and : Nunito 500 at -0.01em in pure black, and the crayon cursor. Written as tokens so the dark block below only has to restate the palette. */ color: var(--text-body); font-family: var(--font-sans); font-weight: 400; letter-spacing: normal; cursor: auto; } /* the same tokens in dark mode, a copy of the .dark-mode block in styles.css. Only the 17 that actually change theme are restated; the rest (--accent, the three font stacks, the three radii, --cs-mark, --cs-note-*, --cs-tag, --bg-dark, --text-muted-on-dark) are the same in both themes. */ :where(html.fun-mode.dark-mode body[data-case-study]:not(.theme-locked) main > *:not(.cs-hero):not(.cs-header)) { --bg-band: #212120; --bg-band-2: #2d2e2c; --bg-cream: #151514; --cs-band: #252524; /* the dark block in styles.css writes these without spaces, and a custom property keeps its value verbatim — so does the copy */ --cs-rule: rgba(255,255,255,0.14); --cs-text: #ecece8; --cs-text-2: #c2c3bd; --cs-text-3: #90918b; --rule: rgba(255,255,255,0.14); --rule-soft: rgba(255,255,255,0.09); --surface: #252524; --text-body: #cbccc6; --text-hover: #ffffff; --text-muted: #90918b; --text-primary: #f1f1ee; --veil: rgba(255,255,255,0.10); --veil-border: rgba(255,255,255,0.18); --veil-strong: rgba(255,255,255,0.20); /* fun mode is always an ink-on-paper mode, so it declares `color-scheme: light` on html.fun-mode.dark-mode (fun.css ~1487) and that inherits down. Serious dark mode leaves it `normal`, and so does the region. */ color-scheme: normal; } /* WHY THE DARK BLOCK SKIPS .theme-locked /tfc/ and /esignatures/ carry .theme-locked, and styles.css puts the light palette on that — the region gets it by INHERITANCE, which any declaration beats, zero-specificity ones included. So a .dark-mode block here would win against the very thing it is supposed to restore: measured with it in place, all 17 tokens on /tfc/'s impact row came out dark while serious dark mode has them light. Skipping .theme-locked leaves the light block above, which is what those two pages compute in either theme. Two things are not in that light palette and do follow the dark theme even on a locked page, so they are restated: --bg-band-2, which styles.css's theme-locked block does not cover, and color-scheme, which fun mode forces to light on any .dark-mode page. Both measured on /tfc/ in dark mode. */ :where(html.fun-mode.dark-mode body[data-case-study].theme-locked main > *:not(.cs-hero):not(.cs-header)) { --bg-band-2: #2d2e2c; color-scheme: normal; } /* ---- 2. THE TWO GROUNDS ------------------------------------------------ fun mode paints the whole page: a beige on and, over the top of everything, a fixed halftone screen on body::before at 42% multiply. Both are body-level, both are inside the donut, and both reach the region. So the page is repainted in three layers instead of one: background the SERIOUS ground, the full height of the page body::after the fun beige, the height of the intro, at z-index -1 so it sits above the canvas and under the content body::before the halftone, the height of the intro, unchanged in every other respect The intro therefore gets exactly the stack it had before — beige, content, screen — and below it the serious ground is what shows through the transparent sections. --fun-intro-h is the document-space bottom edge of .cs-hero / .cs-header, written to by fun.js on load and on resize; 100vh is the fallback for the frame before it lands. */ /* the serious ground under the whole page */ html.fun-mode body[data-case-study] { background-color: #f7f4f2; } html.fun-mode.dark-mode body[data-case-study] { background-color: #151514; } html.fun-mode.dark-mode body[data-case-study].theme-locked { background-color: #f7f4f2; } /* The fun beige, intro only, under the content. The colour is the one fun-v2/paper.css puts on — #f6f4ef, and a warmer #f6f1e4 under 760px — not var(--fun-beige), which is a shade off it. Measured: taking the token instead painted the phone intro #f6f4ef where fun mode had it at #f6f1e4. */ html.fun-mode body[data-case-study]::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--fun-intro-h, 100vh); z-index: -1; pointer-events: none; background-color: #f6f4ef; } @media (max-width: 760px) { html.fun-mode body[data-case-study]::after { background-color: #f6f1e4; } } /* the halftone screen, intro only. background-attachment: fixed keeps the 150px tile registered to the viewport exactly as `position: fixed` did, so the texture does not start scrolling with the page inside the intro. */ html.fun-mode body[data-case-study]::before { position: absolute; top: 0; bottom: auto; height: var(--fun-intro-h, 100vh); background-attachment: fixed; } /* ---- 3. THE UNICORN STUDIO SCENE --------------------------------------- Nothing to do. fun.css hid #cs-scene with `html.fun-mode .pv-chapter.is-banded .cs-scene { display: none }`, and that rule now sits inside the donut while the scene sits inside #cs-body, past the limit — so it stops matching on its own and the scene comes back with its serious display, size and animation. scene.js never looked at fun mode, so it was mounting the canvas all along; it was only being hidden. This note is here so the next person does not go looking for a rule that puts it back. */