/* ========================================================================== Soda Fountain — app.css Extracted from Soda Fountain v3.dc.html, which remains the design reference. Every value here is lifted from the prototype, not reinvented. Dark ("late shift") is the default. Light ("daylight") is a true cream-paper theme, not an inversion: brass darkens for contrast on cream and the teal actor names use their own ink. Put class="theme-light" on to switch. Load order: fonts -> this file. No build step, no preprocessor. ========================================================================== */ /* ---------------------------------------------------------------- fonts -- */ /* Served from our own origin, not fonts.googleapis.com. * * The two s that used to sit in the head cost three round trips before * the page could paint: the document had to arrive, then a render-blocking * stylesheet from a second origin (DNS + TCP + TLS, and it had no preconnect * of its own), and only from THAT could the browser learn the woff2 URLs on a * third origin. Lighthouse showed the shape of it plainly — FCP and LCP landed * on the same millisecond in all six regions, which is what a blocking chain * looks like: nothing paints, then everything does. * * These declarations live in app.css rather than in their own file because * app.css is already render-blocking and already fetched on the connection the * document arrived on, so they cost no request at all. * * latin and latin-ext only. Google also serves cyrillic and vietnamese; this is * an English-language archive and `unicode-range` means an unmatched subset is * never downloaded, so dropping them changes nothing a reader can see. latin-ext * is kept for exactly that reason in reverse — it is free unless a name needs * it, and names do (Rev. George Müller is inside latin, but the next one may * not be). * * `swap` is deliberate and unchanged: text stays visible in the fallback while * the face loads. It should now almost never be seen, because both latin files * are preloaded in layout.php and arrive on the already-open connection. * * Filenames are Google's own version-hashed basenames, so they are immutable. * Both faces are OFL. */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 900; font-stretch: 100%; font-display: swap; src: url('fonts/archivo-latin.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: 'Archivo'; font-style: normal; font-weight: 400 900; font-stretch: 100%; font-display: swap; src: url('fonts/archivo-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Nunito ships one weight here, 900. See --sf-display: the display rules inherit whatever weight their context sets, and loading exactly one face is what pins every one of them to the heavy cut. */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/nunito900-latin.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: 'Nunito'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/nunito900-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* --------------------------------------------------------------- tokens -- */ :root { /* accent is user-tweakable in the prototype; brass is the shipped default */ --sf-accent: #FFCE4A; --sf-accent-ink: #FFCE4A; /* accent as *text*; darkens in light theme */ --sf-bg: #0F0B14; /* The same colour as components, for gradients that fade the page out. Kept next to --sf-bg in both themes so they cannot drift apart. */ --sf-bg-rgb: 15 11 20; --sf-panel: #17121F; --sf-panel2: #221B2E; --sf-rule: #2A2136; --sf-rule2: #33293F; --sf-rule3: #4A3D5C; --sf-head: #FFFFFF; /* headings */ --sf-text: #F6F1EA; /* body */ /* The quiet ramp. * * Lifted and pulled towards neutral in Aug 2026. It used to run * CFC2DD / 9C8CB0 / 7B6B8F / 6B5C7E, and two of those four were unreadable * rather than merely quiet: measured against the odd-row stripe, which is the * darker of the two list grounds, `muted2` came out at 3.83:1 and `muted3` at * 3.05:1. Both fail WCAG AA at any size, and they are what the airdate and the * runtime on every one of 1,081 episode rows were set in. * * Now, on that same stripe: 9.98 / 7.40 / 6.02, with text2 at 13.85. * * The hue shift matters as much as the lightness. The old ramp was a * saturated lavender sitting on a purple-black page, so it had little to * separate it from its own ground however bright it got; these are pulled * towards the cream the body text is set in, which is what makes them read as * quiet-but-legible rather than dim. * * Only these four moved. Body prose (--sf-text) measured 17.3:1 and was never * the problem. */ --sf-text2: #E4DCEA; /* secondary body */ --sf-muted: #C6BACF; --sf-muted2: #AC9FB8; --sf-muted3: #9B8EA8; /* The fifth and faintest step, and the last one that is still text. * * Renamed from `--sf-tick` in Aug 2026, because that name had stopped being * true: it was described as "chart ticks, faintest text", and a sweep of the * stylesheet, the templates and app.js found no chart using it at all. Both * surviving consumers are words — the "N min read" in the reader's kicker and * the per-row count in the airdate calendar. A token named after a hairline * invites a hairline's contrast, which is how it came to sit at #4A3D5C: * 1.86:1 against the odd-row stripe, the worst figure on the site and less * than half what WCAG 1.4.3 asks. * * That mistake had already been made and fixed once — see * `.sf-crumbs__position` further down, which was pulled off this same token * for this same reason. Renaming it is what stops there being a third time. * * #8A7D96 measures 5.06 on the page, 4.81 on the stripe and 4.77 on a panel. * Both consumers are 800-weight but 12px and 10px, comfortably under the * 18.66px that would let them use the 3:1 large-text threshold, so 4.5:1 is * the bar on all three grounds. It stays a clear step below --sf-muted3 * (6.02) so the hierarchy this token exists to express survives. */ --sf-faint: #8A7D96; --sf-stripe: rgba(246, 241, 234, 0.030); --sf-glass: rgba(15, 11, 20, 0.93); --sf-on-accent: #100C16; /* text ON an accent fill; dark in both themes */ --sf-pop-ink: #FF4D5E; /* the red — episode numbers, alerts */ --sf-pop-hover: #FF8A95; /* The same red as a FILL rather than an ink, which is a different colour. * * --sf-pop-ink is tuned to be read as text on a near-black page, so it is * bright; put white on top of it and you get 3.24:1, and that is what the * selected filter pill and the active-filter count were. Both are 9-10px at * 900 weight, nowhere near the size that would let them use the 3:1 * large-text threshold. * * Darkening the fill rather than blackening the text keeps the control * reading as "the red one", which is the whole job the colour is doing on a * bar where every other pill is an outline. White on #C41E31 is 5.87:1. * * This mirrors --sf-accent / --sf-accent-ink, which already splits the brass * the same way for the same reason. The light theme's red is dark to begin * with (white on it is 6.64:1), so there it is simply the same colour. */ --sf-pop-fill: #C41E31; /* Actor and speaker names. * * Was #4FD8D8, which measured 11.26:1 on the page - the brightest ink on this * site after white itself. That is why a billing card read actor-first: the * character's name was set in plain white at 17:1 and lost anyway, because a * saturated cyan at 11:1 pulls harder than a neutral at any ratio. An ink * that says "this is a person" does not need to be the loudest thing in the * room to say it. * * #6FA8A4 is 7.25:1 on the page and 6.84 on a panel - comfortably past the * 4.5 these names need at 11px - and it is still unmistakably the teal. * * `-hi` is the hover, and it exists because there wasn't one: `.sf-actor:hover` * pointed at --sf-teal-ink2, which is DARKER, so hovering a link in the dark * theme dimmed it. Hover goes toward the page's foreground in each theme - * brighter on the dark ground, darker on cream. */ --sf-teal-ink: #6FA8A4; --sf-teal-ink-hi: #A5D6D1; --sf-teal-ink2: #3FA9A9; /* The fourth ink, for the one thing that is neither reader-facing prose nor an actor: internal editorial content. Was a bare #B48BFF written into three templates, which is why the light theme had no way to darken it. */ --sf-violet: #B48BFF; --sf-red-rule: #E8202F; /* the 3px reader top rule; same in both themes */ /* The ink every chart is drawn in — sparklines, row histograms, share bars. One token rather than `var(--sf-accent)` repeated at each chart, because the two themes want different answers and the charts have to agree with each other. On the dark page brass is the brightest thing available and reads at a two-pixel bar width; on cream it is nearly the paper colour, so forty brass bars on #F6F1EA came out as a smudge. Light switches the whole set to the red at once. The range sliders take this too, not --sf-accent. A slider is not a chart, but it sits directly beside one -- the year handles run along the top of the cast list whose every row is a 40-bar histogram -- and the two being different colours on cream was the mismatch. Brass also fails on cream for exactly the reason the bars did. */ --sf-chart-ink: var(--sf-accent); /* The stub drawn for a year with nothing in it, so a gap reads as a gap. */ --sf-chart-empty: var(--sf-rule); /* The airdate calendar's era hues, one per decade. Only the two lightest need a different answer on cream; the teal, the red and the violet carry across because they already darken or were dark to begin with. */ --sf-decade-80: var(--sf-accent); --sf-decade-90: var(--sf-teal-ink); --sf-decade-00: var(--sf-pop-ink); --sf-decade-10: var(--sf-violet); --sf-decade-20: #8AE07C; /* elevation */ /* The cover shadow is a rim plus an ambient, not an ambient alone. A plain 50%-black shadow over #0F0B14 lands at #08060A — about seven levels of luminance separation, which is a shadow doing almost no work — and opacity cannot fix it, because even fully opaque black is only ~15 levels below this page. The 1px rim is what actually separates the art from the page on a dark screen; the ambient supplies the lift. */ --sf-shadow-cover: 0 0 0 1px rgba(246, 241, 234, 0.08), 0 14px 32px rgba(0, 0, 0, 0.9); --sf-shadow-cover-hover: 0 0 0 1px rgba(246, 241, 234, 0.14), 0 24px 46px rgba(0, 0, 0, 0.95); --sf-shadow-pop: 0 30px 60px rgba(0, 0, 0, 0.55); --sf-shadow-bar: 0 -14px 40px rgba(0, 0, 0, 0.45); /* spacing One scale, used by every gap, padding and margin that is not answering to a specific measured thing (an avatar's 34px, a rail's 260px). The names are t-shirt sizes rather than numbers so inserting a step later does not renumber the ones after it. */ /* The page's own gutter. A token because the sticky control bar has to cancel it exactly to reach the edge of the screen. */ --sf-page-pad: 26px; --sf-space-3xs: 4px; --sf-space-2xs: 6px; --sf-space-xs: 8px; --sf-space-sm: 12px; --sf-space-md: 16px; --sf-space-lg: 22px; --sf-space-xl: 30px; --sf-space-2xl: 40px; /* The rhythm between one
and the next. Its own token rather than a step of the scale: it is the one measurement worth tuning on its own, and nine pages were each writing their own margin-top inline. */ --sf-section-gap: 30px; /* type */ /* Nunito in place of Alfa Slab One, at 900 throughout. Exactly one face is loaded, which is what fixes the weight: the twenty-odd display rules inherit whatever weight their context sets, and Alfa Slab One had a single very heavy face, so a request for 400 here would have rendered every heading thin. With only the 900 face available every request resolves to it, without threading a weight through every selector. */ --sf-display: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; --sf-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; /* geometry */ /* Type scale — a 1.25 ratio off a 16px base, rounded to whole pixels. Every heading and title in the site maps onto one of these. Before this there were three page-title sizes (52/40/34) and five item-title sizes (25/17/15/14/14), none derived from each other, and the 34px one was written inline on nine separate pages. A scale is not about the numbers being pretty; it is about there being a reason to reach for the next one rather than inventing it. */ --sf-size-1: 52px; /* the shelf's lede, once per site */ --sf-size-2: 40px; /* a page that is about one thing */ --sf-size-3: 32px; /* a page that is about a list of things */ --sf-size-4: 25px; /* a section heading inside a list */ --sf-size-5: 19px; /* a subsection heading */ --sf-size-6: 15px; /* the title of a row */ /* The UI end of the same scale, added Aug 2026. * * The six steps above cover headings and titles and stop at 15px. Everything * below that - captions, eyebrows, pills, labels, loglines, which is most of * the type on this site - had no scale at all. An audit found 145 literal * font-sizes across 25 distinct values, eleven of them sitting between 8.5 * and 14.5px. The small type read as inconsistent because it was. * * A 1px ladder rather than the 1.25 ratio the display end uses. A ratio is * right where the steps are far apart and each has to be visibly a different * size; down here the job is the opposite - a few near neighbours that are * nonetheless decided rather than improvised. * * The odd values folded onto the nearest step: 14.5 and 14 to size-7, 13.5 * and 13 to size-8, 11.5 and 11 to size-10, 10.5 and 10 to size-11, 8.5 and 9 * to size-12. Nothing moved by more than half a pixel. */ --sf-size-7: 14px; /* a logline; secondary prose */ --sf-size-8: 13px; /* dense prose; the reader's smaller body */ --sf-size-9: 12px; /* the workhorse label */ --sf-size-10: 11px; /* a caption */ --sf-size-11: 10px; /* a pill; a micro label */ --sf-size-12: 9px; /* the smallest thing here that is still text */ /* Row titles are a ladder, not a step: the reader's SIZE control drives them through `:root[data-art]`, so the three live together or they drift. The small rung is --sf-size-6, which is why it is not repeated here. */ --sf-row-title-md: 16px; --sf-row-title-lg: 17px; /* The album listing's ladder, one rung above the shelf's at each setting. Its middle rung is --sf-size-5. See the album contents block. */ --sf-album-title-sm: 18px; --sf-album-title-lg: 21px; /* The big measured numeral - the figures strip and the tally values. */ --sf-size-figure: 26px; /* Five sizes are deliberately NOT tokens, because each is used exactly once and a token used once is indirection with nothing on the other end: 70/86px (the fallback cover's plate numeral), 34px, 24px, 23px and 15.5px. They are listed here so this block is still the one place to look. */ /* Weight. * * Named for the job rather than the number, because the number is the thing * most likely to change. Nunito ships one face here (900), so a display * request resolves to it whatever this says; Archivo is variable 400-900 and * every one of these is a real choice. Before this there were 93 hand-written * font-weight declarations and no way to answer "make the titles lighter" in * fewer than 35 edits. */ --sf-weight-display: 900; /* Nunito; resolves to its only face regardless */ --sf-weight-title: 800; /* an item title, in Archivo */ --sf-weight-label: 700; /* eyebrows, pills, captions, table heads */ --sf-weight-prose: 500; /* a sentence on a dark ground */ --sf-weight-body: 400; /* a sentence */ --sf-radius-xs: 4px; --sf-radius-sm: 6px; --sf-radius: 10px; --sf-radius-lg: 12px; --sf-radius-pill: 999px; /* Portraits are not circles. The art is a bust — head, neck and shoulders, cut out on transparency — and a circle's arc slices across exactly where that bust is widest, so every character came out looking beheaded. A flat bottom lets the shoulders run off the edge the way an ordinary headshot crop does. A percentage, not a pixel value, so the corner keeps its proportion from the 26px avatar up to the 132px bio portrait. */ --sf-radius-portrait: 24%; --sf-page: 1400px; --sf-measure: 68ch; } .theme-light { --sf-accent-ink: #735D21; /* brass × 0.45 per channel — the darken() rule */ --sf-bg: #F6F1EA; --sf-bg-rgb: 246 241 234; --sf-panel: #FFFFFF; --sf-panel2: #EFE8DA; --sf-rule: #DCD2C0; --sf-rule2: #C9BDA8; --sf-rule3: #B6A992; --sf-head: var(--sf-on-accent); --sf-text: #1A1420; --sf-text2: #3D3348; --sf-muted: #6A5C7C; --sf-muted2: #6E6076; --sf-muted3: #6B5F72; /* Unchanged but for the name: on cream this already measured 5.23 on the page and 5.87 on a panel. Only the dark theme's value was failing. */ --sf-faint: #6F6350; --sf-stripe: rgba(26, 20, 32, 0.045); --sf-glass: rgba(246, 241, 234, 0.92); --sf-pop-ink: #B3202F; --sf-pop-hover: #8E1A29; /* Already dark enough to carry white: 6.64:1. The dark theme is the only one that needed a separate fill. */ --sf-pop-fill: var(--sf-pop-ink); --sf-teal-ink: #166767; /* Toward the ink on cream, which is the same rule the dark theme follows in the other direction. */ --sf-teal-ink-hi: #0D4747; --sf-teal-ink2: #125555; --sf-violet: #6B3FB8; /* Charts go red on cream. Brass is a light colour: against #F6F1EA it has barely more contrast than the paper, and a row histogram is forty two-pixel bars with nothing else to identify them — at that width a low-contrast fill is not a faint chart, it is no chart. The red is the same ink the episode numbers use, so it stays inside the palette. */ --sf-chart-ink: var(--sf-pop-ink); --sf-chart-empty: var(--sf-rule2); /* Brass, the pale green and the pale violet all vanish into cream paper. The violet follows --sf-violet, which the theme already darkens. */ --sf-decade-80: var(--sf-accent-ink); --sf-decade-20: #3E8A2E; /* a 50%-black shadow reads as dirt on cream, so the light theme takes a browner and shallower one — same rim-plus-ambient construction, dark rim instead of light */ --sf-shadow-cover: 0 0 0 1px rgba(60, 40, 20, 0.10), 0 10px 24px rgba(60, 40, 20, 0.22); --sf-shadow-cover-hover: 0 0 0 1px rgba(60, 40, 20, 0.16), 0 18px 36px rgba(60, 40, 20, 0.30); --sf-shadow-pop: 0 24px 50px rgba(60, 40, 20, 0.20); --sf-shadow-bar: 0 -14px 40px rgba(60, 40, 20, 0.16); color-scheme: light; } /* ----------------------------------------------------------------- base -- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--sf-bg); } body { font-family: var(--sf-body); color: var(--sf-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--sf-text); text-decoration: none; } a:hover { color: var(--sf-accent-ink); } /* Form controls do not inherit the page font on their own — left alone, every search box, filter and admin field falls back to the browser's UI font and quietly drops out of Archivo. */ button, input, select, textarea, optgroup { font-family: inherit; } button { cursor: pointer; } ::placeholder { font-family: inherit; } :focus-visible { outline: 2px solid var(--sf-accent-ink); outline-offset: 2px; border-radius: var(--sf-radius-xs); } h1, h2, h3 { font-family: var(--sf-display); font-weight: var(--sf-weight-body); /* Alfa Slab One has one weight */ color: var(--sf-head); text-wrap: pretty; margin: 0; } .sf-page { max-width: var(--sf-page); margin: 0 auto; padding: 30px var(--sf-page-pad) 80px; } .sf-measure { max-width: var(--sf-measure); } /* Small caps label — used everywhere above a value or section. */ .sf-label { font-size: var(--sf-size-11); font-weight: var(--sf-weight-display); letter-spacing: 0.15em; text-transform: uppercase; color: var(--sf-muted2); } /* ---------------------------------------------------------------- header -- */ .sf-header { position: sticky; top: 0; z-index: 40; background: var(--sf-glass); backdrop-filter: blur(10px); border-bottom: 1px solid var(--sf-rule); } .sf-header__inner { max-width: var(--sf-page); margin: 0 auto; padding: 12px 26px; display: flex; align-items: center; gap: 18px; } .sf-wordmark { display: flex; /* Baseline, not centre. The cup is the letter O of SODA, and its artwork is drawn so the ring's outer edge touches the bottom of the viewBox — which for a replaced element is exactly what a flex baseline aligns on. Centring instead hung it ~2px below the S and the D, because the straw and cherry occupy the top of the box and nothing occupies the bottom. */ align-items: baseline; gap: 1px; font-family: var(--sf-display); font-size: 23px; line-height: 1; color: var(--sf-text); flex-shrink: 0; } /* The wordmark holds its width; the search field beside it is what flexes. */ .sf-masthead { flex-shrink: 0; } .sf-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } /* The theme switch is not a nav item and sits outside the