/* Theme Name: TCF (Blocksy Child) Theme URI: https://tcfky.com Description: Trinity Christian Fellowship's child theme. All customisation lives here so Blocksy can be updated without losing work. Version controlled at github.com/forhisglory-llc/NewChurchSite under theme/tcf-child, and deployed with tools/deploy_theme.sh. Author: Trinity Christian Fellowship Template: blocksy Version: 0.56.11 Text Domain: tcf-child */ /* --------------------------------------------------------------------------- WEBFONTS This reverses an earlier decision, knowingly. The site shipped system stacks and zero font downloads on performance grounds; the design handoff (§1.2) requires self-hosted Newsreader and Public Sans, and the handoff is authoritative on design. Its own performance budget absorbs the change - six files, two preloaded, homepage under 900 KB (docs/handoff/05, §5.9). Self-hosted, never the Google Fonts CDN: a third-party connection on the critical path is both a render-blocking DNS+TLS round trip and a GDPR liability, and neither is worth it for a font we can serve ourselves. These are ordinary @font-face rules in the child stylesheet, NOT theme.json `fontFace` entries. Blocksy is a classic theme and a theme.json in a classic child changes how WordPress emits layout CSS - see HANDOFF_ADOPTION_PLAN.md §2. The src paths are relative to this file, so they resolve correctly both on the front end and inside the block editor, which loads this same stylesheet through add_editor_style(). The unicode-range values are Google's own subset boundaries, copied verbatim. They are what makes the split worthwhile: a page of English prose fetches the `latin` files and nothing else, and the `latin-ext` and italic files stay on the server until something on the page actually needs them. The vietnamese subsets are deliberately absent. They are the third of the three subsets Google ships and nothing on this site will ever need them. Weights are declared as ranges because these are variable fonts - one file covers 300-400 for Newsreader and 400-700 for Public Sans. NEVER ask Newsreader for a weight above 400 (§1.2): the range stops there, so a `bold` heading gets a synthesised smear rather than a designed weight. Two faces are preloaded from functions.php - newsreader-latin and public-sans-latin, the pair used above the fold. The preload carries `crossorigin` because font fetches are always CORS-mode requests even same-origin; without it the preload does not match the later @font-face fetch and the browser downloads the file twice. --------------------------------------------------------------------------- */ /* Newsreader - display and headings. latin-ext first, latin second: order is irrelevant to matching (the browser picks by unicode-range) but reads in the same order as the comments in the source Google stylesheet. */ @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 400; font-display: swap; src: url("assets/fonts/newsreader-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; } @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 400; font-display: swap; src: url("assets/fonts/newsreader-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; } /* Italic Newsreader is for pull quotes and Scripture, and for nothing else. It is 98 KB that most pages never touch, which is exactly why it is a separate face rather than a synthesised slant. All four Newsreader files are INSTANCED to the 300-400 weight range these @font-face rules already declare. Shipped from Google Fonts they carry the full 200-800 axis, so three quarters of the weight data was being downloaded by every visitor and used by nothing - 141 KB across the four files, 85 KB of it on the home page alone, which is what put that page over the 900 KB budget in §5.9. The `opsz` axis is deliberately left whole: browsers derive optical size from font-size and clamping it risks clipping at sizes we do not control. If a font is ever re-downloaded from Google, re-run the instancing or the budget silently regresses: uv run --with fonttools --with brotli python -c "..." (see SESSION_KNOWLEDGE.md) And if §1.2's ban on Newsreader at 500+ is ever lifted, these files must be regenerated FIRST - a heavier weight will otherwise clamp to 400 with no error anywhere. */ @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 300 400; font-display: swap; src: url("assets/fonts/newsreader-italic-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; } @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 300 400; font-display: swap; src: url("assets/fonts/newsreader-italic-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; } /* Public Sans - body, UI, labels, buttons. One file covers 400 through 700. */ @font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/public-sans-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; } @font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/public-sans-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; } /* --------------------------------------------------------------------------- DESIGN TOKENS The single place colour, type and spacing are decided. Every rule below references a token rather than a literal, so the look of the site can be changed here rather than hunted through a stylesheet. Full rationale, contrast measurements and usage guidance: docs/DESIGN_SYSTEM.md Direction: editorial, warm, photography-led, classical type leaning into the creeds - explicitly NOT the megachurch template. Blocksy ships a generic SaaS blue; everything here replaces it. Values come from the design handoff, docs/handoff/01-design-system.md. The token NAMES are the ones this theme already used, because ~950 lines of component CSS below reference them; the values underneath moved. Where a name and the handoff's vocabulary disagree, the handoff's word is in the comment: `--tcf-accent` is `brick`, `--tcf-surface` is `paper-alt`, and so on. --------------------------------------------------------------------------- */ :root { /* -- Colour --------------------------------------------------------------- Six colours, no secondary accent, no gradients anywhere (§1.1). Warm neutrals rather than the blue-greys Blocksy defaults to: photographs of a modest room in ordinary light sit badly on cool grey and sit well on warm off-white. The accent is a deep clay red - old, bookish and quiet, where a saturated blue would read as software. Ratios below are measured on `paper`, which is now the page colour. They were computed from relative luminance, not estimated; see DESIGN_SYSTEM.md for the full table and for the three places these values must stay in sync. */ --tcf-accent: #96412E; /* brick - buttons, links, eyebrows 6.41:1 on paper */ --tcf-accent-strong: #7A3324; /* hover/active 8.52:1 on paper */ --tcf-ink: #1A1714; /* ink - body text, dark bands 16.85:1 on paper */ --tcf-muted: #6B6259; /* muted - secondary text, metadata 5.64:1 on paper */ --tcf-rule: #E7E0D4; /* rule - hairlines, borders, dividers */ --tcf-surface: #F3EEE4; /* paper-alt - alternating band, callouts */ --tcf-surface-soft: #FBF8F3; /* paper - kept as an alias of the page colour */ --tcf-page: #FBF8F3; /* paper - the page background is no longer white */ /* `--tcf-body` is retired as a DECISION and kept as a NAME. The handoff sets body text to ink, so there is no longer a separate body colour to decide. But the token is referenced throughout the component CSS below, and deleting it would mean touching dozens of rules that are otherwise correct - each one an opportunity to get something wrong for no design gain. Pointing it at ink means every existing reference keeps working and quietly picks up the new value. Do not use it in new rules. Use `--tcf-ink`. */ --tcf-body: var(--tcf-ink); /* Support tints. NOT editor-facing (§1.1) - these only ever appear as foreground on a coloured background, so offering them as swatches would invite text the same colour as the paper it sits on. */ --tcf-on-ink-accent: #E0B9A6; /* eyebrows on ink 9.91:1 */ --tcf-on-ink-body: #B8B0A4; /* body copy on ink 8.32:1 */ --tcf-on-ink-muted: #9B9284; /* footer body on ink (§1.6) - 5.81:1 */ --tcf-on-ink-quiet: #D8D1C6; /* utility bar (§1.1) - 11.78:1 */ /* Two more values the canvas paints and §1.1's table does not list, found by measuring rather than reading. Recorded here so they are palette entries with contrast figures rather than literals scattered through the file. --tcf-nav is the top-level navigation label. Slightly lifted off ink, so the wordmark beside it stays the darkest thing in the header. --tcf-on-photo is the hero lede over the darkened photograph, a step down from paper so the headline above it keeps the emphasis. */ --tcf-nav: #3B3630; /* nav labels (2a canvas) - 11.29:1 on paper */ --tcf-on-photo: #DBD3C7; /* hero lede on the scrim - 12.31:1 on ink */ --tcf-on-ink-rule: rgba(251, 248, 243, 0.16);/* hairline on ink */ --tcf-on-brick-accent: #F0CBBD; /* eyebrows on brick 4.52:1 */ --tcf-on-brick-body: #F2D6CB; /* body copy on brick 4.93:1 */ --tcf-on-brick-rule: rgba(251, 248, 243, 0.35);/* hairline on brick */ --tcf-on-dark-border: rgba(251, 248, 243, 0.4); /* secondary button on dark 3.68:1 */ /* A photograph under the §2a.1 scrim is not a flat ink band, and the 3.68:1 above is measured on one. The scrimmed hero sits nearer rgb(46,42,36), so the same 0.4 alpha yields 3.44:1 there and measured 3.31:1 on the real hero at 1440 and 2.31:1 at 390 - a 1.4.11 failure, and the reason the secondary hero button reads as plain text. 0.55 measures 4.99:1 at 1440 and 4.96:1 at 390 over the corrected scrim, and costs the label nothing. Two tokens rather than one moved value: --tcf-on-dark-border is correct where it is used, and its other consumer is the scrub track's unplayed rail below, which was tuned against 3.68:1 on purpose. */ --tcf-on-photo-border: rgba(251, 248, 243, 0.55);/* secondary button on photo 5.16:1 */ /* Component neutrals (§1.1). Each of these is a single documented use; none of them is a general-purpose colour. */ --tcf-photo-fill: #EBE3D5; /* dashed PHOTO SLOT fill */ --tcf-photo-border: #D5C9B6; /* dashed PHOTO SLOT border */ --tcf-link-underline: #D7B4A8; /* the underline under a body link, before hover */ --tcf-button-border: #918470; /* secondary button border - 3.45:1, see below */ --tcf-tertiary: #8A8175; /* tertiary label - 3.62:1, see the warning below */ --tcf-numeral: #B4AA98; /* the big numerals in numbered lists - decorative only */ /* Status. The handoff defines no error or success colour anywhere - it specifies six values and no secondary accent - yet §5.5 requires login errors to be announced and to describe the fix, and a form has to distinguish "sent" from "failed". Ruled 2026-08-08: error reuses brick rather than introducing a second red, and success gets one new value. Moss, not a notification green. At brick's own saturation a green reads grassy where a red reads earthy, so this is pulled back to 0.36 and sits at hue 88 - yellow-leaning, which is what keeps it warm. Measured 4.94:1 on paper and 4.52:1 on paper-alt, so it clears AA as text and not merely as a border; 3.41:1 on ink if it is ever needed on a dark band. Neither carries meaning alone. Both blocks state their outcome in words, as §5.1 requires. */ /* The adaptive hairline. Some components - the teaching player, the footer - sit on paper in one place and inside an ink band in another, so their rule is mixed from currentColor rather than pinned to a colour. 16% matches the handoff's documented on-ink hairline rgba(251,248,243,0.16) (§1.1), and on paper it lands within a shade of `rule`. One value, documented, rather than the 0.12 / 0.14 / 0.03 that had accumulated. */ /* §1.3 and the reference: content is capped at 1280 and centred, with a 40px gutter; bands themselves run full-bleed and scale. The reference canvas is a fixed 1280 artboard, so there the band and the content width coincide - the gutter is what tells you they are different things. */ --tcf-content-max: 1280px; --tcf-gutter: 40px; --tcf-hairline-alpha: 16%; /* The tinted panel a player or callout sits in, mixed from currentColor for the same reason. 7% matches the handoff's rgba(251,248,243,0.07) player bar on the dark teaching header (§2d). */ --tcf-panel-alpha: 7%; /* The teaching row's play button. §2c names this in prose and §1.1 does not list it, the same omission as the status colours. It is a fill behind a brick glyph, not text, and brick on it measures 5.79:1. */ --tcf-play-fill: #F0E8DA; --tcf-status-error: var(--tcf-accent); /* brick - 6.41:1 on paper */ --tcf-status-success: #587537; /* moss - 4.94:1 on paper */ /* --tcf-button-border departs from the handoff, which specifies #C9BFAE. Measured, that is 1.72:1 against paper and 1.57:1 against paper-alt. A secondary button here is transparent with ink text, so the border is the only thing marking where the control is - and WCAG 1.4.11 wants 3:1 for exactly that. §1.4 and §5's "WCAG 2.2 AA, treat as a requirement" cannot both be satisfied, so the accessibility section wins, as it has everywhere else these two disagree. #918470 is the same hue (37.8deg), dropped in lightness until it clears 3:1 on BOTH backgrounds a secondary button can sit on, with a little margin because a 1px border antialiases lighter than its nominal colour: 3.45:1 on paper, 3.16:1 on paper-alt. The label was never the problem - that reads at 16.85:1 either way. Ruled 2026-08-08. */ /* --tcf-tertiary is the one colour in this system that fails AA for body text: 3.62:1 on paper, measured. The handoff flags it too (§5.1). It is permitted ONLY on labels of 19px or larger at semibold, and only where the label repeats information available elsewhere. Anything that carries meaning uses --tcf-muted. On the photo-slot fill it drops to 3.01:1, so the PHOTO SLOT label is legible-but-marginal scaffolding and must not outlive the placeholders. */ /* -- Type ----------------------------------------------------------------- Two families and no more (§1.2). Newsreader carries the display and heading voice; Public Sans carries everything a person interacts with rather than reads. Georgia and system-ui are the fallbacks the swap period shows. The `serif` / `ui` names are what the component CSS below already asks for, so they stay as aliases. New rules should name the role, not the shape. */ --tcf-font-display: "Newsreader", Georgia, "Times New Roman", serif; --tcf-font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --tcf-font-serif: var(--tcf-font-display); --tcf-font-ui: var(--tcf-font-body); /* `sans` as well as `ui` and `body`, because all three names get reached for and a custom property that does not exist takes its whole declaration down with it - silently, leaving the element to inherit whatever its parent had. Seven rules in this file were referencing --tcf-font-sans and none of them was doing anything. Aliasing costs nothing and removes a trap that has now caught two people. */ --tcf-font-sans: var(--tcf-font-body); /* The scale is the handoff's (§1.2), with the fluid min/max pairs taken from docs/handoff/theme.json `settings.typography.fontSizes`. That file is an FSE starter this classic theme cannot use as a stylesheet, but it is the shipped source of the numbers, so the numbers come from it rather than from a reading of the table. THE HEADINGS ARE FLUID, and that is not decoration. A fixed scale meant a 44px page title and 28px item titles on a 390px phone: on the teaching archive every title wrapped to three lines and four teachings filled the entire screen, which is what a list is supposed to save you from. THE BODY SIZES ARE NOT FLUID, and that is not laziness. §1.2 sets a floor of 15px on every breakpoint, and the way to honour a floor is to not go near it: 17px prose and 15.5px card copy are fixed at every width. Shrinking body text on a small screen is the opposite of what a small screen needs. The two values below 15px - meta at 14 and eyebrow at 11.5 - are the handoff's own, and are labels and metadata rather than anything anyone reads a paragraph of. */ --tcf-text-eyebrow: 0.71875rem; /* 11.5px - uppercase, 700, 0.2em tracking */ --tcf-text-meta: 0.875rem; /* 14px - dates, durations, captions */ --tcf-text-ui: 0.9375rem; /* 15px - nav, buttons, chips */ --tcf-text-body-sm: 0.96875rem; /* 15.5px - card copy, list descriptions */ --tcf-text-body: 1.0625rem; /* 17px - long-form prose */ --tcf-text-lede: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); /* 17 -> 19 */ --tcf-text-stat: clamp(1.4375rem, 1.25rem + 0.75vw, 1.6875rem); /* 23 -> 27 */ --tcf-text-card: clamp(1.5rem, 1.25rem + 1vw, 1.875rem); /* 24 -> 30 */ --tcf-text-section: clamp(1.75rem, 1rem + 3vw, 2.5rem); /* 28 -> 40 */ --tcf-text-page: clamp(2.125rem, 1.125rem + 4vw, 3.25rem); /* 34 -> 52 */ --tcf-text-display: clamp(2.5rem, 1rem + 6vw, 4rem); /* 40 -> 64 */ /* The old size names, re-pointed at the steps above. They are what the component rules below ask for; the aliases are what let those rules pick up the new scale without being rewritten one at a time. */ --tcf-text-xs: var(--tcf-text-eyebrow); --tcf-text-sm: var(--tcf-text-meta); --tcf-text-base: var(--tcf-text-body); --tcf-text-lg: var(--tcf-text-lede); --tcf-text-xl: var(--tcf-text-card); --tcf-text-2xl: var(--tcf-text-section); --tcf-text-3xl: var(--tcf-text-page); --tcf-text-4xl: var(--tcf-text-display); /* Leading, per step. A 64px hero line and a 17px paragraph do not want the same ratio - the bigger the type, the less air a line needs between it and the next one. */ --tcf-leading-display: 1.06; /* display and page title */ --tcf-leading-tight: 1.15; /* section headings */ --tcf-leading-card: 1.22; /* card and panel headings */ --tcf-leading-stat: 1.25; --tcf-leading-lede: 1.65; --tcf-leading-body: 1.75; /* long-form prose */ --tcf-leading-sm: 1.6; /* Tracking. §1.2 sets it by rendered size, not by element: -0.02em at 40px and above, -0.01em from 24 to 39px, 0 below 24. Because the heading sizes are fluid, the rules that apply these swap at the viewport width where each clamp crosses the boundary - see the heading section below. */ --tcf-tracking-display: -0.02em; --tcf-tracking-heading: -0.01em; --tcf-tracking-eyebrow: 0.2em; /* -- Spacing -------------------------------------------------------------- A 4px base (§1.3). The first four steps are the fine scale for padding and gaps inside a component; from 5 up they are the coarse section rhythm the handoff names - 28 / 40 / 56 / 72 / 88 - because a page's vertical rhythm wants a few widely-spaced values, not a smooth geometric run. Named by size, not by use, so the same token can serve a margin here and a gap there without lying about itself. */ --tcf-space-1: 0.25rem; /* 4px */ --tcf-space-2: 0.5rem; /* 8px */ --tcf-space-3: 0.75rem; /* 12px */ --tcf-space-4: 1rem; /* 16px */ --tcf-space-5: 1.75rem; /* 28px - grid gutter between cards */ --tcf-space-6: 2.5rem; /* 40px - page gutter, mobile section padding */ --tcf-space-7: 3.5rem; /* 56px - tablet section padding */ --tcf-space-8: 4.5rem; /* 72px - desktop section padding */ --tcf-space-9: 5.5rem; /* 88px - the largest section break */ /* -- Rhythm --------------------------------------------------------------- UI_UX_BRIEF.md §5.7: the heading sizes came from the scale and the gaps between sections never did. They were made consistent - one value, 40px, nearly everywhere - rather than designed, and a page whose biggest break is 20px SMALLER than the gap between a back link and a title has no hierarchy for a reader to use. Measured on the single teaching page, 2026-09-06: the change of surface from ink to paper was 60px and the gap between a back link and the title beneath it was 40px. Four steps, named for WHAT THEY DIVIDE rather than for how big they are. A gap grows with the rank of the boundary it marks: group two items of the same kind one list row to the next section two groups inside one section the back link to the title block band two sections on one surface, and a band's own padding surface a change of surface ink to paper, paper to footer `surface` is the only one that reaches the top of the scale, and only at 1280 and up: the largest gap on this site is reserved for a change of ground. Every value is an existing step of the coarse scale - space-3 through space-8 - and no new number enters the system. Each rung is exactly one step above the rung below it AT EVERY BREAKPOINT, so the ladder never collapses at a narrow width. docs/reviews/DS_TEACHING_SINGLE.md §5. */ --tcf-rhythm-group: var(--tcf-space-3); /* 12 */ --tcf-rhythm-section: var(--tcf-space-4); /* 16 */ --tcf-rhythm-band: var(--tcf-space-5); /* 28 */ --tcf-rhythm-surface: var(--tcf-space-6); /* 40 */ /* The teaching artwork, in one place instead of three. It is `alt=""`, it is the show cover rather than per-episode art, and it is byte-identical on all 892 teaching pages - so its size is a decision about how much of a fold a decoration may claim, and that decision deserves a name. 120px is not a new number: it is the value this element already used below 768px. */ --tcf-teaching-art: 120px; /* Page gutters (§1.3). Set here and stepped down at the breakpoints below, so nothing has to restate them. */ --tcf-gutter: 2.5rem; /* 40px desktop */ --tcf-container: 1280px; /* content max width */ --tcf-measure: 68ch; /* prose column */ --tcf-measure-lede: 56ch; /* a lede is shorter on purpose - it is read at a glance */ /* Radius is 2px EVERYWHERE (§1.4). Nearly square: a bookish edge, not an app's. The single exception is a chip, which is a toggle rather than a button and reads as one only if it is round. */ --tcf-radius: 2px; --tcf-radius-chip: 24px; /* -- Fields --------------------------------------------------------------- The one thing this system had no vocabulary for. Seven rules across five files each invented a padding, a type size, a border and a width for the same control, and NONE of them rendered: Blocksy sets `height` on every form control from --theme-form-field-height, and with border-box that swallows the padding. Measured before this block existed, every text input on the site was 40px tall whatever its stylesheet said. Three facts every rule that consumes these tokens depends on, all measured in a browser rather than reasoned about: 1. `height: auto` is what makes the rest visible. Without it, nothing here renders. It binds without !important, and so does `min-height`. 2. `padding` and `max-width` need !important on every surface, because Blocksy emits its form settings as inline CSS after every stylesheet. 3. box-sizing is border-box everywhere, so the measures below are outer widths. MEASURES, not widths. §1.3 already speaks this way - --tcf-measure is 68ch of prose - and a field is the same idea: as wide as the value it holds, never as wide as the box it sits in. When the two disagree, the container moves. Sized against the shipped Public Sans at 16px, where 1ch is 9.69px and a real email address averages 8.4px per character. The audit, the bands and the four questions for choosing between them: docs/reviews/DESIGN_SYSTEM_FIELDS.md. */ --tcf-field-pad-x: var(--tcf-space-4); /* 16px inline */ --tcf-field-pad-y: var(--tcf-space-3); /* 12px block */ /* NOT a step in the type scale, and that is why it is a token: below 16px iOS Safari zooms the whole page when a field takes focus. Two files had already ruled this independently. */ --tcf-field-text: 1rem; /* 16px - the iOS zoom floor */ /* §5.8's 44px as a floor, not a height: a field computes to 48.4px and this never binds. It is here so smaller type cannot fall under the target. */ --tcf-field-min-h: 2.75rem; /* 44px */ --tcf-field-border-w: 1px; /* The three measures a single-line field is allowed to be; `md` is the answer unless the data has a reason. Anything longer than `lg` is prose and takes a textarea at --tcf-measure-lede. */ --tcf-field-measure-sm: 10rem; /* 160px - bounded short data */ --tcf-field-measure-md: 20rem; /* 320px - the default */ --tcf-field-measure-lg: 24rem; /* 384px - unbounded one-line */ /* The border and the label are the ONLY things a dark surface may move. The fill does not: paper on the sign-in card is 14.40:1, so it carries WCAG 1.4.11 alone - which is why that card's border is transparent. */ --tcf-field-fill: var(--tcf-page); --tcf-field-border: var(--tcf-button-border); /* 3.45:1 on paper */ --tcf-field-label: var(--tcf-ink); /* 16.85:1 on paper */ /* -- Motion --------------------------------------------------------------- §1.7 is a complete list, not a starting point. Button and link hover colour, card border hover, accordion max-height, the mobile drawer - and nothing else on this site animates at all. A chip changing state is instant, deliberately: it is reporting a fact, not performing one. Every duration drops to 0ms under prefers-reduced-motion, at the bottom of this file. That is why they are tokens rather than literals. */ --tcf-motion-hover: 120ms; --tcf-motion-accordion: 150ms; --tcf-motion-drawer: 200ms; --tcf-ease: ease; } /* Gutters step down with the viewport (§1.3): 40px desktop, 32px tablet, 20px mobile. Nothing horizontally scrolls at 320px, ever. */ @media (max-width: 1279px) { :root { --tcf-gutter: 2rem; } /* 32px */ } @media (max-width: 767px) { :root { --tcf-gutter: 1.25rem; } /* 20px */ } /* The rhythm ladder steps with the viewport, and only `surface` reaches the top of the scale. Min-width rather than max-width, so the ladder above reads as the phone case and each breakpoint states what it raises. */ @media (min-width: 768px) { :root { --tcf-rhythm-group: var(--tcf-space-4); /* 16 */ --tcf-rhythm-section: var(--tcf-space-5); /* 28 */ --tcf-rhythm-band: var(--tcf-space-6); /* 40 */ --tcf-rhythm-surface: var(--tcf-space-7); /* 56 */ } } @media (min-width: 1280px) { :root { --tcf-rhythm-surface: var(--tcf-space-8); } /* 72 */ } /* --------------------------------------------------------------------------- Hand the tokens to Blocksy's palette slots. Blocksy paints everything - buttons, links, borders, menus - from eight palette slots, so redefining the slots is far better than chasing individual selectors: the theme's own components follow automatically, and so does anything added later. NOTE THE SELECTOR. It is `html:root`, not `:root`, and that is deliberate. Blocksy ships its blue defaults in a `:root` block inside its compiled stylesheet, which the browser applies after this file. Same specificity means the later one wins, so a plain `:root` here loses - measured in a browser, not assumed. `html:root` scores one higher and wins regardless of order. The theme_mod_colorPalette filter in functions.php sets the same values at source, which is what the Customizer reads, and the editor palette in the same file is what the block editor shows. All THREE carry the same colours; change them together. A mismatch does not error - it makes the editor lie about the site. EIGHT SLOTS, SIX COLOURS. The handoff has six; Blocksy insists on eight. The mapping below spends the two spare slots on duplicates rather than inventing colours to fill them: 1 brick accent - links, buttons, active states 2 brick hover the darker brick, for hover and active 3 ink body text. The handoff sets body text to ink (§1.1), so this is no longer a separate value from slot 4 4 ink headings - same colour, different Blocksy job 5 rule borders and dividers 6 paper-alt the alternating band and callout surface 7 paper Blocksy's "lighter background". In the old palette this was a near-white distinct from the page; now paper IS the page, so 7 and 8 are the same value 8 paper THE PAGE COLOUR - and read the warning below before you touch it `muted` deliberately gets no slot. It is a text colour only, and every slot Blocksy owns it can also paint as a background; handing it a slot risks the theme filling a panel with a mid-grey that was only ever meant for a date. SLOT 8 IS THE TRAP. Blocksy uses palette-color-8 for two unrelated things: the page background, and the link colour inside a nav dropdown, because its dropdown panel is dark by default. Under the old palette slot 8 was #ffffff and the desktop dropdown was therefore white text - which, once the child theme lightened that panel, was white on white. That is fixed further down this file with an !important override, and the fix is load-bearing: slot 8 is now #FBF8F3, still near-white, so removing the override brings the bug straight back. The mobile off-canvas panel is a separate element and stays dark, where near-white links are correct (16.85:1) - do not "fix" that one. UI_UX_BRIEF.md §6 has the full account. --------------------------------------------------------------------------- */ html:root { --theme-palette-color-1: var(--tcf-accent); --theme-palette-color-2: var(--tcf-accent-strong); --theme-palette-color-3: var(--tcf-ink); --theme-palette-color-4: var(--tcf-ink); --theme-palette-color-5: var(--tcf-rule); --theme-palette-color-6: var(--tcf-surface); --theme-palette-color-7: var(--tcf-surface-soft); --theme-palette-color-8: var(--tcf-page); /* Blocksy's own base font becomes Public Sans, not the display face. Its components are UI - menus, buttons, widgets - and §1.2 gives UI to Public Sans. Headings take Newsreader back below. */ --theme-font-family: var(--tcf-font-body); --theme-border-radius: var(--tcf-radius); } /* Headings in Newsreader, tightly led, and NEVER above weight 400 (§1.2). The variable font's range stops at 400, so asking for bold does not get a bolder Newsreader - it gets the browser's synthetic emboldening, which smears the letterforms and is the single most visible way to make a self-hosted font look cheap. Blocksy's heading defaults are 600 and 700, so this is stated rather than inherited. */ h1, h2, h3, h4, h5, h6, .entry-title { font-family: var(--tcf-font-display); font-weight: 400; line-height: var(--tcf-leading-tight); color: var(--tcf-ink); text-wrap: balance; } /* Sizes come from the type scale rather than from Blocksy. Blocksy's defaults rendered an h2 LARGER than the h1 above it, so a page title was outranked by its own first subheading - which is not a matter of taste, it misstates the structure of the page to anyone skimming it. The ladder is the handoff's: page-title, section, card-title, and then the lede size. There is deliberately no step between card-title (24-30) and lede (17-19) in §1.2 - `stat` at 27px is a value display, not a heading rank, and giving it to h4 would make h4 the same size as h3 and reintroduce exactly the problem the paragraph above describes. h4 therefore takes the lede size and earns its rank from Newsreader against the surrounding Public Sans. */ h1, .entry-title { font-size: var(--tcf-text-page); font-weight: 300; /* §1.2: page titles are the light weight */ line-height: var(--tcf-leading-display); letter-spacing: var(--tcf-tracking-display); } h2 { font-size: var(--tcf-text-section); line-height: var(--tcf-leading-tight); letter-spacing: var(--tcf-tracking-heading); } h3 { font-size: var(--tcf-text-card); line-height: var(--tcf-leading-card); letter-spacing: var(--tcf-tracking-heading); } h4 { font-size: var(--tcf-text-lede); line-height: var(--tcf-leading-card); letter-spacing: 0; } h5, h6 { font-size: var(--tcf-text-body); line-height: var(--tcf-leading-card); letter-spacing: 0; } /* The hero display size, for a homepage h1 that is meant to fill the screen. */ .tcf-display { font-family: var(--tcf-font-display); font-weight: 300; font-size: var(--tcf-text-display); line-height: var(--tcf-leading-display); letter-spacing: var(--tcf-tracking-display); text-wrap: balance; } /* §1.2 sets tracking by RENDERED SIZE - -0.02em at 40px and above, -0.01em from 24 to 39px, 0 below - and the heading sizes are fluid, so a single value per element cannot be right at every width. These two queries switch each heading at the viewport width where its own clamp crosses 40px: h1 clamp(34px, 18px + 4vw, 52px) crosses 40px at a 550px viewport h2 clamp(28px, 16px + 3vw, 40px) reaches 40px at an 800px viewport Both numbers are solved from the clamps above rather than guessed; change a clamp and these move with it. */ @media (max-width: 549px) { h1, .entry-title { letter-spacing: var(--tcf-tracking-heading); } } @media (min-width: 800px) { h2 { letter-spacing: var(--tcf-tracking-display); } } /* An eyebrow is a label, never a heading element (§1.2) - it carries no document structure, and marking one up as an h2 tells a screen-reader user the page has a section that does not exist. */ .tcf-eyebrow { font-family: var(--tcf-font-body); font-size: var(--tcf-text-eyebrow); font-weight: 700; line-height: 1; letter-spacing: var(--tcf-tracking-eyebrow); text-transform: uppercase; color: var(--tcf-accent); } /* Headings need room above them and little below - they belong to what follows, not to what precedes. */ h2, h3, h4 { margin-top: var(--tcf-space-7); margin-bottom: var(--tcf-space-3); } /* A page's own title already sits in its own header area; it does not need the same top gap as a heading in running text. */ .entry-title { margin-top: 0; } /* Footer headings are labels for three short columns, not page-level headings. At the full h2 size they shouted louder than the page title. */ .tcf-footer h2, .tcf-footer h3 { font-size: var(--tcf-text-lg); margin-top: 0; } /* Prose gets Public Sans at 17/1.75 (§1.2) on paper, in ink. This is the second half of the type reversal. The site read as a serif document; it now reads as a serif-headed page of clean sans prose, which is what the handoff asks for and what holds up better at 17px on a phone than an old-style serif does. */ body { font-family: var(--tcf-font-body); font-size: var(--tcf-text-body); line-height: var(--tcf-leading-body); color: var(--tcf-ink); background-color: var(--tcf-page); } /* `pretty` on paragraphs and list items: it costs nothing and it stops the single-word last line that makes a short paragraph look broken. */ p, li, dd, figcaption, blockquote { text-wrap: pretty; } /* A block quote is prose, so it is set at the prose step. It was not. Nothing in this theme gave `.wp-block-quote` a size, so it fell through to Blocksy's own `--theme-font-size` at 16px - a value §1.2 does not contain and nobody chose. On What We Believe that put both creeds a single pixel under the 17px paragraphs immediately above and below them, which is a font change a reader can see and cannot explain. Measured at 1280 before the fix: paragraph 17, creed 16, paragraph 17. The quote is already marked as a quote by its brick rule and its indent; it does not need to be marked a second time by being slightly smaller. The leading stays tighter than prose (1.6 against 1.75) so the block still reads as set apart. `:not(.is-style-pull)` because the pull quote is a different component - 40px italic Newsreader, §1.2's one italic - and owns its own size. Element+class, not `.entry-content ...`, because Blocksy emits its inline CSS after this file: a bare `.wp-block-quote` here would tie on specificity and lose on order. */ blockquote.wp-block-quote:not(.is-style-pull), blockquote.wp-block-quote:not(.is-style-pull) > p { font-size: var(--tcf-text-body); line-height: var(--tcf-leading-sm); } /* THE LEDE IS BODY TEXT. 17px / 1.75, the same as the paragraphs around it. A lede is the paragraph that opens a page. It is read at a glance rather than settled into, and since 2026-09-07 the measure is what says so rather than the size. §1.2 draws a lede at 19/1.65 and the site shipped that. Jay reported the step on /life-together/home-groups/, where a 19px lede stood above two 17px paragraphs in the same column and read as one paragraph changing size halfway. That page was settled by taking the class off. On 2026-09-07 he ruled it for the whole site: "make all the ledes 17px for consistency". THE SIZE MOVES, NOTHING ELSE DOES. Each lede class keeps its measure, its margins and its colour - those are what make it a lede now. Stripping the classes would have taken the measure with the size and run these paragraphs the full width of their bands. `--tcf-text-lede` is NOT retuned either: it also sizes every h4 on the site, and retuning it would move headings nobody asked about. THE LEADING MOVES WITH IT. Measured on home groups at 1280 with the class put back: at 17/1.65 over 17/1.75 body the opening block is still visibly tighter than the two beneath it - the same defect one notch quieter. At 17/1.75 the three paragraphs are one texture. See DECISIONS_TO_REVIEW.md §23a. */ .tcf-lede { font-size: var(--tcf-text-body); line-height: var(--tcf-leading-body); max-width: var(--tcf-measure-lede); } /* Small print, metadata and controls take the UI stack - which is now the same family the body uses, so this block no longer switches typeface. It stays because the rules below still name it, and because the day someone gives metadata a different face, this is the list of what "metadata" means. */ .tcf-teaching-meta, .tcf-teaching-card__meta, .tcf-latest-teaching__meta, button, input, select, textarea { font-family: var(--tcf-font-ui); } /* --------------------------------------------------------------------------- Links §1.1: "Define `a` and `a:hover` globally - do not leave defaults." So the base treatment is on the bare element rather than only inside .entry-content, and the underline is a real colour of its own: brick text with a 1px #D7B4A8 underline, which on hover darkens to #7A3324 with the underline coming up to full brick. The underline strengthening is the point - it means the hover is legible to someone who cannot tell the two reds apart. A bare `a` selector is (0,0,1), so every rule further down this file that gives a link its own colour still wins, and so does Blocksy's `.ct-menu-link`. That is deliberate: this sets the default for prose links and does not fight anything that has already decided. The underline is never removed in running text. Removing it would leave colour as the only signal, which fails for anyone who cannot distinguish it. */ a { color: var(--tcf-accent); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--tcf-link-underline); text-underline-offset: 0.15em; transition: color var(--tcf-motion-hover) var(--tcf-ease), text-decoration-color var(--tcf-motion-hover) var(--tcf-ease); } a:hover { color: var(--tcf-accent-strong); text-decoration-color: currentColor; } .entry-content a:not(.wp-block-button__link):not(.wp-element-button):not(.tcf-teaching-card a):not(.tcf-latest-teaching a):not(.tcf-selector__tab):not(.tcf-selector__cta):not(.tcf-hero-teaching__title):not(.tcf-hero-teaching__play):not(.tcf-whats-on a):not(.tcf-dir a):not(.tcf-cal a) { color: var(--tcf-accent); text-decoration: underline; text-decoration-color: var(--tcf-link-underline); text-underline-offset: 0.15em; } /* Cards carry their own link treatment. Inside .entry-content - which is where the latest-teaching block sits on the home page - the prose underline rule was also catching the card's title, series label and metadata, so the same card looked different on the home page and in the archive. */ .tcf-teaching-card a, .tcf-latest-teaching a { text-decoration: none; } .tcf-teaching-card a:hover, .tcf-latest-teaching__more a:hover { text-decoration: underline; } .entry-content a:not(.wp-block-button__link):not(.wp-element-button):not(.tcf-teaching-card a):not(.tcf-latest-teaching a):not(.tcf-selector__tab):not(.tcf-selector__cta):not(.tcf-hero-teaching__title):not(.tcf-hero-teaching__play):not(.tcf-whats-on a):not(.tcf-dir a):not(.tcf-cal a):hover { color: var(--tcf-accent-strong); } /* --------------------------------------------------------------------------- Focus §5.4: a 2px brick outline at 2px offset, on EVERY focusable element, and never `outline: none` without a replacement. One rule rather than a per component one, because the failure mode of per-component focus styling is a control somebody adds later that quietly has none. `html :is(...)` rather than a bare list: Blocksy sets its own focus styling, and one extra element in the selector is what wins without reaching for !important. This is the same trick as the palette and the header height - see the note above html:root. It has not been measured in a browser yet; if a control turns up with a dashed blue ring, that is Blocksy still winning and the fix is more specificity, not a different colour. :focus-visible rather than :focus, so a mouse click on a button does not leave a ring behind it - but keyboard focus always shows. */ html :is(a, button, input, select, textarea, summary, details, [tabindex], [contenteditable]):focus-visible { outline: 2px solid var(--tcf-accent); outline-color: var(--tcf-accent); outline-offset: 2px; } /* --------------------------------------------------------------------------- Motion The complete permitted list (§1.7) is four transitions: button and link hover colour 120ms ease (on `a` above, and on buttons) card border hover 120ms ease accordion open/close 150ms ease on max-height mobile drawer 200ms ease on transform A chip changing state is instant, deliberately. Everything else on this site is static, and "everything else" includes the box-shadow fades and 150ms easings that were here before this section existed - they have been removed rather than retimed. If you are adding an animation, the question is not how long it should run. It is which of the four lines above it is, and if it is none of them it does not ship. --------------------------------------------------------------------------- */ .tcf-accordion__panel { overflow: hidden; transition: max-height var(--tcf-motion-accordion) var(--tcf-ease); } .tcf-drawer { transition: transform var(--tcf-motion-drawer) var(--tcf-ease); } /* --------------------------------------------------------------------------- Stated preferences Two media queries, both required by §5.6, and both implemented by moving TOKENS rather than by restating rules. That is the whole reason the durations and the two neutrals are tokens in the first place. --------------------------------------------------------------------------- */ /* Reduce motion: every duration in the list above goes to 0ms. The blanket rule underneath it is not redundant - it catches Blocksy's own transitions and any animation a plugin brings with it, which our tokens cannot reach. Durations go to 0.01ms rather than 0 in the blanket rule so that transitionend and animationend still fire and any script waiting on one does not hang. */ @media (prefers-reduced-motion: reduce) { :root { --tcf-motion-hover: 0ms; --tcf-motion-accordion: 0ms; --tcf-motion-drawer: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* More contrast: `rule` strengthens and `muted` collapses into ink (§5.6). Because the palette slots above are declared as var(--tcf-rule) rather than as literals, slot 5 follows this automatically and so does every Blocksy border painted from it. Worth knowing what this does and does not buy. Muted going to ink takes secondary text from 5.64:1 to 16.85:1, which is a real gain. Rule going to #C9BFAE takes a hairline from 1.24:1 to 1.72:1 against paper, which is visibly stronger but still nowhere near the 3:1 WCAG asks of a meaningful UI boundary. Hairlines here are decorative separators, so that is defensible; a border that is the ONLY thing marking a control is not, and needs its own answer. See DESIGN_SYSTEM.md. */ @media (prefers-contrast: more) { :root { --tcf-rule: #C9BFAE; --tcf-muted: var(--tcf-ink); } } /* --------------------------------------------------------------------------- Measure The site is prose. A paragraph running the full 1290px container is around 130 characters per line, roughly twice what anyone reads comfortably - the eye loses its place coming back to the start of the next line. THE PART THAT IS EASY TO GET WRONG, because a first attempt got it wrong: `.entry-content` is NOT a container. It spans the full viewport with no padding. Its children only appear to sit in a gutter because WordPress's constrained layout gives each of them `max-width: ` plus `margin-left/right: auto !important`, which centres them. The gutter is a side effect of that centring, not a property of the parent. So narrowing the children while left-aligning them - the obvious move - puts the prose hard against the edge of the window, because there was never a gutter to keep. It has to be done in two steps: 1. give `.entry-content` the same container width the page title already has, so the gutter belongs to the parent and survives on its own 2. only then constrain the children and align them left, where left now means the container's edge rather than the window's Both steps are required. Either alone is broken. --------------------------------------------------------------------------- */ /* Step 1: entry-content becomes a real container, matching .entry-header so the prose lines up with the page title above it. This reproduces Blocksy's own container formula rather than hard-coding a width, because the container is not a fixed number - it is the smaller of the maximum width and a percentage of the viewport, and the percentage itself changes on small screens (90vw down to 88vw). A fixed 1290px matched only at desktop and left the prose against the window edge at every width below it. Using both of Blocksy's variables tracks all of that automatically, including any future change made in the Customizer. */ .entry-content { width: min( var(--theme-normal-container-max-width, 1290px), var(--theme-container-edge-spacing, 90vw) ); max-width: 100%; margin-left: auto; margin-right: auto; } /* Step 2: text-level blocks take the measure and align to that container's edge. The !important is needed to beat WordPress's own !important auto margins; without it the blocks re-centre inside the container and drift away from the title. */ .entry-content > p, .entry-content > ul, .entry-content > ol, .entry-content > blockquote, .entry-content > h2, .entry-content > h3, .entry-content > h4, .entry-content > .tcf-draft, .tcf-prose > p, .tcf-prose > ul, .tcf-prose > ol, .tcf-prose > blockquote { max-width: var(--tcf-measure); margin-left: 0 !important; margin-right: auto !important; } /* Images, the map and anything the editor widened are meant to be wide; they keep the container width and stay centred. */ .entry-content > figure, .entry-content > .wp-block-image, .entry-content > .tcf-map, .entry-content > .alignwide, .entry-content > .aligncenter { max-width: none; margin-left: auto !important; margin-right: auto !important; } /* Full-bleed blocks - the home page hero - must still reach both edges of the window. Now that the parent is 1290px rather than the viewport, they need the standard break-out rather than relying on the parent already being full width. */ .entry-content > .alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } /* --------------------------------------------------------------------------- Teachings Structural only - rhythm, alignment, hit areas. No colour or type decisions beyond inheriting Blocksy's, because the design direction is not chosen yet (punch list Part Three). Everything here should survive that decision. --------------------------------------------------------------------------- */ /* Metadata on a single teaching: a definition-style list that stays legible when a teaching has one facet or all four. */ .tcf-teaching-meta { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; } .tcf-teaching-meta__item { display: flex; flex-direction: column; gap: 0.15rem; } /* An eyebrow, so it takes the eyebrow tokens. The `opacity: 0.65` this used to carry is gone: opacity produces a colour nothing has measured, and a contrast table that does not know about it is a contrast table that is wrong. --tcf-muted is 5.64:1 on paper and is in the table. */ .tcf-teaching-meta__label { font-size: var(--tcf-text-eyebrow); font-weight: 700; letter-spacing: var(--tcf-tracking-eyebrow); text-transform: uppercase; color: var(--tcf-muted); } .tcf-teaching-meta__value { font-size: var(--tcf-text-body-sm); } .tcf-teaching-player { margin: 0 0 2rem; } .tcf-teaching-player__download { margin: 0.5rem 0 0; font-size: var(--tcf-text-meta); } .tcf-teaching-noaudio { margin: 0 0 2rem; opacity: 0.75; font-style: italic; } .tcf-teaching-series-nav, .tcf-teaching-back { margin-top: 2.5rem; } /* Browse panel. The whole point of splitting the old overloaded category into four taxonomies, so it gets prominence at the top of the archive. */ /* --------------------------------------------------------------------------- Teaching filters One row of dropdowns rather than three open lists. The open version ran 127px on a desktop and 356px on a phone, pushing the first teaching below the fold on an archive that exists to show teachings.
does the opening and closing, so this works with JavaScript off. The active filter is named on its own button, so the state is readable without opening anything. --------------------------------------------------------------------------- */ .tcf-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tcf-space-2); margin: 0 0 var(--tcf-space-5); /* No `padding-bottom` either: it was holding the controls off the bottom rule that is now gone, so it was buying nothing and it was 16px of the height the count line needed. Measured at 1440 the row is 60px with it and 44px without, which is the search field plus nothing. */ padding: 0; /* No `border-bottom`. `.tcf-teaching-list` already draws a top rule 28px below this one, so the page carried two parallel hairlines with nothing between them at every width: measured at 1440, y=504.3 and y=533.3. The list's rule is the structural one - it is the top edge of the row set and matches the `border-bottom` on every `.tcf-teaching-row` - so this is the one that goes, and the count line now sits in the gap it opened. */ font-family: var(--tcf-font-ui); font-size: var(--tcf-text-sm); } .tcf-filter { position: relative; } .tcf-filter__toggle { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.45em 0.85em; border: 1px solid var(--tcf-rule); /* The one exception to the 2px rule (§1.4). A chip is a toggle rather than a button and only reads as one if it is round. */ border-radius: var(--tcf-radius-chip); background: var(--tcf-page); color: var(--tcf-body); cursor: pointer; list-style: none; /* Firefox */ white-space: nowrap; } .tcf-filter__toggle::-webkit-details-marker { display: none; } .tcf-filter__toggle:hover { border-color: var(--tcf-accent); color: var(--tcf-accent); } .tcf-filter__toggle:focus-visible { outline: 2px solid var(--tcf-accent); outline-offset: 2px; } /* A filter in force names itself, so the state is legible without opening it. */ .tcf-filter.is-active .tcf-filter__toggle { border-color: var(--tcf-accent); background: var(--tcf-accent); color: var(--tcf-page); } .tcf-filter__chosen { font-weight: 600; } .tcf-filter.is-active .tcf-filter__label { opacity: 0.75; } .tcf-filter__label::after { content: ":"; } .tcf-filter:not(.is-active) .tcf-filter__label::after { content: ""; } .tcf-filter__caret { width: 0; height: 0; border-style: solid; border-width: 4px 4px 0 4px; border-color: currentColor transparent transparent transparent; opacity: 0.7; } .tcf-filter[open] .tcf-filter__caret { transform: rotate(180deg); } .tcf-filter__panel { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 15rem; max-height: 60vh; overflow-y: auto; padding: var(--tcf-space-2); background: var(--tcf-page); border: 1px solid var(--tcf-rule); border-radius: var(--tcf-radius); } .tcf-filter__list { list-style: none; margin: 0; padding: 0; } .tcf-filter__link { display: flex; justify-content: space-between; gap: var(--tcf-space-4); padding: 0.4em 0.6em; border-radius: var(--tcf-radius); color: var(--tcf-body); text-decoration: none; } .tcf-filter__link:hover { background: var(--tcf-surface); color: var(--tcf-accent); } .tcf-filter__link.is-current { color: var(--tcf-accent); font-weight: 600; } .tcf-filter__count { color: var(--tcf-muted); font-variant-numeric: tabular-nums; } .tcf-filters__clear { color: var(--tcf-muted); text-decoration: underline; padding: 0.45em 0.3em; } .tcf-filters__clear:hover { color: var(--tcf-accent); } /* On a phone the panel is anchored to the row rather than to its chip, so it cannot open off the edge of the screen: a 15rem panel hung off the Series chip at x=206.6 would run to 446.6 in a 330px viewport. `.tcf-filters` MUST carry `position: relative` for that to work. Without it the panel's containing block resolved all the way up to an unclassed Blocksy wrapper measuring 3,717px, and `top: calc(100% + 6px)` computed against that: measured at 375 on 2026-09-07, the panel opened at y=3722.8 against a toggle whose bottom edge was y=616.6. 3,106px below its own button, on every phone, which made the filters look like they simply did nothing. 3717 + 6 = 3723. And no `overflow` on this element. `overflow-x: auto` computes `overflow-y` to `auto` as well, which makes the row a scroll container - and a scroll container clips an absolutely positioned descendant whose containing block is inside it. So the sideways-scrolling row and the row-anchored panel cannot both be had on this markup, and the panel wins: a filter you cannot see is a filter that does not exist. The row therefore wraps, and the sideways-scroll rules that used to sit here are gone rather than overridden. They had already been dead for some time - `@media (max-width: 767px)` below restores `flex-wrap: wrap` and is later in this file at equal specificity, so `nowrap` never applied. Two blocks that silently fought; now they do not overlap at all. See docs/reviews/PUNCHLIST_LAYOUT.md §1.1 for the height arithmetic and why the documented 56px row is not recoverable (it predates the search form). */ @media (max-width: 600px) { .tcf-filters { position: relative; } .tcf-filter { position: static; } .tcf-filter__panel { left: 0; right: 0; min-width: 0; } } /* Listing. `.tcf-teaching-list`'s own reset (list-style/margin/padding) is declared under "Teaching cards" below and again in the archive row section; the copy that used to sit here restated the same three values and rendered nothing. */ .tcf-teaching-list__item + .tcf-teaching-list__item { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid currentColor; border-color: color-mix(in srgb, currentColor var(--tcf-hairline-alpha), transparent); } /* --------------------------------------------------------------------------- Teaching cards The archive is the most-used part of this site and the part most likely to be browsed rather than read. A card therefore has to answer four questions at a glance - what is it, who preached it, when, and how long - and then let someone start listening without going anywhere. Structure: artwork left, everything else right, actions last. The artwork is the podcast cover unless a teaching has its own image; repeated down a list it reads as a set rather than as a gap, which is the point. --------------------------------------------------------------------------- */ .tcf-teaching-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tcf-space-4); } /* Blocksy and the block-library list styles both put margin on list items, and an article inside one picks up its own. Together they added 67px between cards on top of the grid gap, which read as a separator rule rather than as spacing. The grid owns the gap; nothing else should contribute to it. */ .tcf-teaching-list > .tcf-teaching-list__item, .entry-content .tcf-teaching-list > .tcf-teaching-list__item { margin: 0; padding: 0; } .tcf-teaching-list > .tcf-teaching-list__item > .tcf-teaching-card { margin: 0; } .tcf-teaching-card { display: grid; grid-template-columns: 88px 1fr; gap: var(--tcf-space-4); align-items: start; padding: var(--tcf-space-4); background: var(--tcf-page); border: 1px solid var(--tcf-rule); border-radius: var(--tcf-radius); /* §1.4: a card hover moves its border and nothing else. The box-shadow that used to fade in here has gone rather than been retimed - cards in this system have no shadow at all, and a lifting card is a different design language from the one the handoff describes. */ transition: border-color var(--tcf-motion-hover) var(--tcf-ease); } .tcf-teaching-card:hover { border-color: var(--tcf-accent); } /* `is-open` is the player being on screen at all, `is-playing` only while sound is coming out. A card whose teaching is paused is still the card you are listening to, so it keeps the highlight. */ .tcf-teaching-card.is-playing, .tcf-teaching-card.is-open { border-color: var(--tcf-accent); background: var(--tcf-surface-soft); } .tcf-teaching-card__art { display: block; line-height: 0; border-radius: var(--tcf-radius); overflow: hidden; background: var(--tcf-surface); } .tcf-teaching-card__art img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; } .tcf-teaching-card__body { min-width: 0; } /* let long titles wrap, not overflow */ /* The series, as a quiet label above the title. Someone browsing an archive is usually looking for a series rather than a single talk. */ .tcf-teaching-card__eyebrow { margin: 0 0 var(--tcf-space-1); font-family: var(--tcf-font-body); font-size: var(--tcf-text-eyebrow); font-weight: 700; letter-spacing: var(--tcf-tracking-eyebrow); text-transform: uppercase; color: var(--tcf-muted); } .tcf-teaching-card__eyebrow a { color: inherit; text-decoration: none; } .tcf-teaching-card__eyebrow a:hover { color: var(--tcf-accent); } .tcf-teaching-card__title { margin: 0 0 var(--tcf-space-2); font-size: var(--tcf-text-lg); line-height: 1.25; } .tcf-teaching-card__title a { color: var(--tcf-ink); text-decoration: none; } .tcf-teaching-card__title a:hover { color: var(--tcf-accent); } .tcf-teaching-card__meta { margin: 0 0 var(--tcf-space-3); font-family: var(--tcf-font-ui); font-size: var(--tcf-text-sm); color: var(--tcf-muted); } .tcf-teaching-card__meta a { color: inherit; } .tcf-teaching-card__meta a:hover { color: var(--tcf-accent); } .tcf-teaching-card__sep { margin: 0 0.45em; opacity: 0.55; } .tcf-teaching-card__length { white-space: nowrap; } .tcf-teaching-card__excerpt { margin: 0 0 var(--tcf-space-3); font-size: var(--tcf-text-base); color: var(--tcf-body); max-width: var(--tcf-measure); } .tcf-teaching-card__actions { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--tcf-space-3); font-family: var(--tcf-font-ui); font-size: var(--tcf-text-sm); } /* Listen is the primary action and looks like one. Download is deliberately quiet - useful, but not what most people came to do. */ .tcf-teaching-card__play { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; /* §5.8's 44px floor, which Jay's 2026-08-08 AA ruling kept strict for media transports specifically: a transport is not a line of text that happens to be tappable, it is the object the page exists for and it is pressed with a thumb. `check_design.py` checks it separately for that reason (MIN_TRANSPORT_PX) and was failing this control at 83.4x39.1 on /members/ at every width - 24.5px of line plus 2 x 6.3px of padding plus the border. The padding is left alone so the label keeps its optical inset; the floor does the work, and 39.1 -> 44 costs 4.9px in one row of a card that is 300px tall. Why this survived every crawl the project has run, which is the interesting part: the card block renders on `/members/` and nowhere else, and `/members/` answers a stranger with the login form under an HTTP 200, so an anonymous checker measures the login form and reports the page clean. The one place the same class appears in public is the home hero, and that variant pins itself to 52px, so the floor never binds there and the class looked fine wherever anyone could see it. It took a signed-in measurement to find. */ min-height: 44px; padding: 0.45em 1em 0.45em 0.85em; border: 1px solid var(--tcf-accent); border-radius: var(--tcf-radius); /* a button, not a chip - 2px (§1.4) */ color: var(--tcf-accent); text-decoration: none; font-weight: 600; transition: background-color var(--tcf-motion-hover) var(--tcf-ease), color var(--tcf-motion-hover) var(--tcf-ease); } .tcf-teaching-card__play:hover, .tcf-teaching-card__play:focus-visible { background: var(--tcf-accent); color: var(--tcf-page); } .tcf-teaching-card__play-icon { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; } /* Playing, the same span becomes the pause glyph: two bars drawn with the left and right borders of a box, the way the triangle is drawn with one border. §1.9 permits exactly three glyphs and forbids an icon set, so no icon arrives here. */ .tcf-teaching-card.is-playing .tcf-teaching-card__play-icon { width: 9px; height: 10px; border-width: 0 3px; border-color: currentColor; } /* `display: inline-flex` above beats the browser's own `[hidden] {display:none}`, so the script could set hidden and the button stayed on screen next to the player it had just opened. Any element given an explicit display needs this said again. */ .tcf-teaching-card__play[hidden] { display: none; } .tcf-teaching-card__download { color: var(--tcf-muted); text-decoration: none; } .tcf-teaching-card__download:hover { color: var(--tcf-accent); text-decoration: underline; } /* The inline timeline, once someone presses Listen. It no longer wraps and no longer needs to. The native