/* ============================================================================ * devhub-hf.css — the Head First design language: bubbly, playful, eye-grabbing. * * Built from Bobby's mobile screenshots of the Decorator chapter. This is NOT * a recolor — it is the component kit that makes a page feel like the book: * generous roundness, a high-contrast display serif, a script hand for asides, * caution-tape tabs, speech bubbles, nested wrapper diagrams, napkin notes. * * COLORWAY: dark mocha/espresso is the default (Bobby's call — the cream * variant comes later and only needs the token block re-stated under * :root[data-theme="cream"], because every component below is token-driven). * * Opt in with . Load AFTER devhub.css. * Selectors are written `[data-hf] …` so they outrank a page's own inline * rules on SPECIFICITY rather than source order — that is what lets this * reskin the 153 pages that redeclare their palette locally without editing * them one by one. * ========================================================================== */ /* ── type ───────────────────────────────────────────────────────────────── Playfair Display (display serif) + Dancing Script (the hand), self-hosted as latin-subset variable woff2 — one file each, 38KB + 42KB. Body stays on the system sans DevHub already uses; mono stays as-is. */ @font-face{ font-family:'Playfair Display'; font-style:normal; font-weight:400 900; font-display:swap; src:url('fonts/playfair.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Dancing Script'; font-style:normal; font-weight:400 700; font-display:swap; src:url('fonts/dancing.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ── tokens ─────────────────────────────────────────────────────────────── Written as `:root[data-hf]` (0,2,0) so it always outranks a page's own inline `:root{}` (0,1,0) regardless of source order. CRITICAL: this block remaps DevHub's EXISTING token names onto the mocha ramp as well as defining the --hf-* ones. devhub.css builds .intro, .panel, .rt-* and friends out of var(--panel)/var(--border)/var(--accent), so remapping those makes every token-driven component follow the theme for free. Only genuinely hardcoded literals then need explicit rules below. (An earlier draft defined --hf-* alone; .intro stayed slate blue on a mocha page, because nothing it referenced had changed.) */ :root[data-hf],[data-hf]{ --hf-bg:#17120f; /* espresso page ground */ --hf-card:#241d18; /* default card */ --hf-card2:#2b231c; /* raised card */ --hf-bad:#3a221a; /* "the problem" card — reddish brown */ --hf-good:#2c2c1d; /* "the fix" card — olive */ --hf-ink:#f2e8db; /* cream text */ --hf-ink2:#c9b9a6; /* secondary */ --hf-muted:#9a8874; --hf-line:rgba(242,232,219,.13); --hf-orange:#e8734a; /* the accent — kickers, inline code, arrows */ --hf-orange2:#f0916d; --hf-gold:#d9b64e; /* caution tape, reveal button */ --hf-blue:#7fa3cc; /* Q&A rail */ --hf-r:22px; /* the roundness. generous on purpose. */ --hf-r-lg:28px; --font-display:'Playfair Display',Georgia,'Times New Roman',serif; --font-hand:'Dancing Script','Segoe Script',cursive; /* DevHub's own token names, remapped onto the mocha ramp */ --bg:#17120f; --panel:#241d18; --panel2:#2b231c; --panel-2:#1c1613; --border:rgba(242,232,219,.13); --divider:rgba(242,232,219,.13); --text:#f2e8db; --muted:#9a8874; --accent:#e8734a; --accent2:#f0916d; --good:#8aa06a; --bad:#e07a5f; --warn:#d9b64e; --info:#7fa3cc; --blue:#7fa3cc; --amber:#d9b64e; } /* ── page shell ───────────────────────────────────────────────────────── */ [data-hf] body{ background:var(--hf-bg) !important; background-image:none !important; color:var(--hf-ink); line-height:1.7; } [data-hf] .container{ max-width:820px; } /* book column, not dashboard width */ /* Display serif for every heading; the hand is reserved for asides. */ [data-hf] h1,[data-hf] h2,[data-hf] h3,[data-hf] h4{ font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; color:var(--hf-ink) !important; background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; -webkit-text-fill-color:var(--hf-ink); border-bottom:none !important; } [data-hf] h1{ font-size:clamp(34px,7vw,54px); line-height:1.06; margin:.2em 0 .35em; } [data-hf] h2{ font-size:clamp(26px,5vw,38px); line-height:1.15; margin:1.6em 0 .5em; } [data-hf] h3{ font-size:clamp(20px,4vw,25px); } [data-hf] p{ color:var(--hf-ink2); } /* ── the deck: a script subtitle under the h1 ───────────────────────────── "or, how Starbuzz Coffee learned to stop subclassing and start wrapping" */ .hf-deck{ font-family:var(--font-hand); font-size:clamp(20px,4.4vw,27px); line-height:1.35; color:var(--hf-orange); margin:0 0 1.4em; font-weight:400; } /* ── chapter rail ───────────────────────────────────────────────────────── The "you are here" strip. Renders from a plain

, which looks identical for the two-child case and shreds every other one: a text node and an inline become SEPARATE flex items, so "source — users.stream()" rendered as "source —" ... gap ... "users.stream()" spread across the row. Any author writing a or an inside a step hit it, and it only showed above 620px. A float keeps inline content inline, and degrades the way we already degrade on a phone: if the prose is too long to share the line, the note drops below it instead of overlapping. */ .hf-steps li{ display:flow-root; } .hf-steps li .tag, .hf-steps li > small{ float:right; margin:0 0 0 14px; max-width:48%; text-align:right; } .hf-steps li .tag{ display:inline; margin-top:0; } } /* Notes read as the quieter half in both placements. */ .hf-steps li > small{ display:block; margin-top:4px; font-size:12px; color:var(--hf-muted); } .hf-steps li.open .tag{ color:var(--hf-orange2); } /* ── state transitions ──────────────────────────────────────────────────── States as rows, each carrying the action that leaves it and where that action lands. A ring marks the current state. Drawn as a list rather than a graph on purpose: a phone cannot show a readable node-and-edge diagram, and "which action moves me where" is the thing being learned anyway. */ .hf-cycle{ display:flex; flex-direction:column; gap:10px; } .hf-cycle .stt{ background:rgba(0,0,0,.28); border-radius:14px; padding:14px 17px; } .hf-cycle .stt.on{ background:var(--hf-good); box-shadow:inset 0 0 0 2px var(--hf-orange); } .hf-cycle .nm{ font-family:ui-monospace,Menlo,monospace; font-size:13.5px; font-weight:700; color:var(--hf-ink); display:block; } .hf-cycle .go{ display:block; margin-top:7px; font-size:13px; color:var(--hf-ink2); overflow-wrap:anywhere; } .hf-cycle .go em{ font-style:normal; color:var(--hf-orange2); font-family:ui-monospace,Menlo,monospace; } .hf-cycle .arrow{ color:var(--hf-muted); } /* ═══════════════════════════════════════════════════════════════════════════ CREAM VARIANT — Bobby chose cream light, then said to ship dark first and add cream later. This is that later: the ENTIRE variant is a token re-statement, because every component above draws from --hf-* rather than hardcoding a colour. Adding it touches no component rule and no page. SELECTOR TRAP, LEARNED THE HARD WAY: write these as :is([data-theme="cream"],[data-theme="light"])[data-hf] .thing and NEVER as [data-theme="cream"][data-hf],[data-theme="light"][data-hf] .thing -- the comma makes that a bare root selector plus a light-only rule, so the cream half silently matches nothing and the declarations leak onto . Two deliberate exceptions, both for legibility rather than taste: code panels and the nested-diagram core stay dark (the terminal convention the prototype itself follows), and the caution tape darkens its stripe so gold still reads on a pale ground. ═══════════════════════════════════════════════════════════════════════════ */ :root:is([data-theme="cream"],[data-theme="light"])[data-hf], :is([data-theme="cream"],[data-theme="light"])[data-hf]{ --hf-bg:#f5ead8; /* the cream ground from the prototype */ --hf-card:#eee7db; --hf-card2:#ebddc5; --hf-bad:#f7ded2; /* the problem card, warmed rather than darkened */ --hf-good:#e6ecd5; /* the fix card, olive tinted */ --hf-ink:#201e1d; --hf-ink2:#474238; --hf-muted:#645c50; /* was #82796a (3.2:1-3.6:1 on the kit's own cards) — matched to --muted below, which was already tuned right; see the AA-token pass. */ --hf-line:rgba(32,30,29,.16); --hf-orange:#c15c30; /* darkened from #e8734a: the dark-mode accent does not carry enough contrast on cream */ --hf-orange2:#8c491a; --hf-gold:#8a6b16; /* likewise — gold on cream needs real depth */ --hf-blue:#1d3f61; /* was #3d6795 (3.25:1-4.45:1 depending on surface) — darkened further; see --info below, which shares this value and drives .rt-pill/ .rt-dir, the widest-reaching user of it. */ /* DevHub's own tokens, remapped again for the light ground */ --bg:#f5ead8; --panel:#eee7db; --panel2:#ebddc5; --panel-2:#ebddc5; --border:rgba(32,30,29,.16); --divider:rgba(32,30,29,.16); --text:#201e1d; --muted:#645c50; --accent:#c15c30; --accent2:#8c491a; --good:#56633f; --bad:#a33; --warn:#8a6b16; --info:#1d3f61; --blue:#1d3f61; --amber:#8a6b16; } /* ── AA-token pass (2026-09-06) ───────────────────────────────────────────── The four tokens above fix the invisible/near-invisible cases; these four selectors sit on --hf-orange as TEXT (not just as a border/dot/tape accent), where #c15c30 measures 3.2:1-3.6:1 on the kit's own cards. Rather than darken --hf-orange itself — which would also darken every decorative border/dot/tape use that already reads fine — they borrow --hf-orange2, the kit's own pre-darkened sibling (already used for exactly this reason elsewhere, e.g. .hf-bub.right .who), which clears every cream surface at 5.1:1+. This is the biggest single win of the pass: .hf-youarehere alone is the "you are here" label on all 490 pages that carry the chapter rail. */ :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-youarehere, :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-kick, :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-practice-kick, :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-practice-link, :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-railnext{ color:var(--hf-orange2); } :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-kick::before{ background:var(--hf-orange2); } /* Code stays dark in both themes — the terminal convention, and it retires the whole syntax-contrast problem instead of re-picking seven colours. */ :is([data-theme="cream"],[data-theme="light"])[data-hf] pre{ background:#241d18; border-color:rgba(32,30,29,.14); } :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-expr{ background:#241d18; } :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-expr .lbl{ color:#9a8874; } /* Chips and wells were dark-on-dark; on cream they need to be light-on-light. */ :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-scatter span, :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-ladder b, :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-cast .obs span, :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-one .callers span, :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-slot .opts span, :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-steps li, :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-cycle .stt, :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-check button, :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-check .why, :is([data-theme="cream"],[data-theme="light"])[data-hf] .st-recent a, :is([data-theme="cream"],[data-theme="light"])[data-hf] .st-bar .track{ background:rgba(32,30,29,.07); color:var(--hf-ink2); } :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-slot .opts span.on, :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-steps li.open, :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-cycle .stt.on{ background:#dce5c6; color:var(--hf-ink); } :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-check button.right{ background:#dce5c6; color:var(--hf-ink); } :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-check button.wrong{ background:#f7ded2; color:var(--hf-ink2); } :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-bub{ background:#ebddc5; } :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-bub.right{ background:#e6ecd5; } :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-napkin{ background:#fffaf0; box-shadow:0 8px 22px rgba(46,43,37,.14); } :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-nest .ring{ border-color:rgba(32,30,29,.30); } :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-chapnum{ color:rgba(32,30,29,.06); } :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-rail ol::before, :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-rail li:not([aria-current])::before{ border-color:var(--hf-muted); } /* :not(...) keeps this from out-specifying the aria-current rule above, which is what filled the current dot orange — without it the "you are here" marker silently becomes an empty circle like every other stop. */ :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-rail li:not([aria-current])::before{ background:var(--hf-bg); } :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-rail li[aria-current]::before{ background:var(--hf-orange); border-color:var(--hf-orange); box-shadow:0 0 0 5px rgba(193,92,48,.16); } /* The gold tape needs a darker partner stripe to read on a pale card. */ :is([data-theme="cream"],[data-theme="light"])[data-hf] .hf-taped::before{ background:repeating-linear-gradient(115deg, var(--hf-gold) 0 9px, #d9cbb0 9px 18px); } /* ── theme switch ───────────────────────────────────────────────────────── Bottom-LEFT on purpose: app.html pins its #dlh-mark-pill bottom-right at z-index 9999, and two floating controls fighting for the same corner is a collision waiting to happen on a phone. */ .hf-themebtn{ position:fixed; left:14px; bottom:14px; z-index:60; background:var(--hf-card2); color:var(--hf-ink2); border:none; box-shadow:0 4px 14px rgba(0,0,0,.3), inset 0 0 0 1px var(--hf-line); border-radius:999px; padding:10px 16px; font-family:inherit; font-size:12.5px; font-weight:700; letter-spacing:.04em; cursor:pointer; transition:transform .12s ease, filter .12s ease; } .hf-themebtn:hover{ transform:translateY(-1px); filter:brightness(1.1); } .hf-themebtn:focus-visible{ outline:2px solid var(--hf-orange); outline-offset:3px; } @media print{ .hf-themebtn{ display:none } } @media (prefers-reduced-motion:reduce){ .hf-themebtn{ transition:none } } /* ── long-token wrapping, kit-wide ────────────────────────────────────────── A phone is 390px and a code token is not negotiable: `IllegalStateException: stream has already been operated upon or closed` is one word as far as line breaking is concerned, and it simply does not fit. Without this it does not wrap and it does not scroll — it is CLIPPED, and the reader loses the end of the sentence with no visual cue that anything is missing. This was invisible for a while because the smoke gate measures overflow on the DOCUMENT: a card whose content is 125px too wide clips internally while documentElement.scrollWidth stays exactly equal to clientWidth, so the page reports clean. tmp_smoke.mjs now measures per-element clipping too. min-width:0 matters on the flex children: a flex item's default min-width:auto refuses to shrink below its content, which defeats the wrap. */ .hf-card, .hf-card p, .hf-cardtitle, .hf-foot, .hf-ladder b, .hf-ladder i, .hf-bub p, .hf-bub .who, .hf-napkin, .hf-ask .q, .hf-ask .a, .hf-annot, .hf-check .q, .hf-check button, .hf-check .why, .hf-terms h4, .hf-terms p, .hf-say, .hf-deck, .principle{ overflow-wrap:anywhere; min-width:0; } /* ═══════════════════════════════════════════════════════════════════════════ CREAM REPAIR LAYER — the legacy components, taught to read on cream ═══════════════════════════════════════════════════════════════════════════ The block above re-states TOKENS, which is enough for anything token-driven. This block exists because devhub.css does not only use tokens: it hardcodes several hundred literal colours that were picked against the navy dark theme, and repairs them only under :root[data-theme="light"] — a selector cream never matches. Two failure directions result, and both were measured rather than guessed (node tmp_contrast.mjs --theme=cream): DOWNWARD a dark-theme near-white (#eef4fb, #cbd5e1, #fff) or neon accent (#86efac, #7dd3fc, #facc15) painted onto a pale cream card. UPWARD cream's dark ink (#201e1d) inherited into a surface that STAYS dark in both themes — code panels, consoles, the CodeWalk source pane. This one hid whole code listings; .cw-src alone was unreadable on 448 pages. Measured effect of this layer, full 528-page sweep: cream 2623 selectors / 8530 instances / 516 pages -> 1060 selectors / 1224 instances / 272 pages (-86% instances) dark 48 selectors / 225 instances -> identical, 0 new, 0 worse. What remains is deliberate: 88% of it is per-page