/* Theme Name: Cobell Scholar Description: Block theme for the Cobell Scholar site. Pages are composed entirely of ACF Blocks; native Gutenberg blocks are suppressed in the page and post editors. Requires at least: 6.6 Tested up to: 7.0 Requires PHP: 8.3 Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: cobell Tags: full-site-editing, block-patterns, block-styles, translation-ready */ /* * Shared primitives every block render template composes with. Colours, * type sizes, and spacing come from theme.json as custom properties — the * only hex values below are inside the grain data URI, which has no token * equivalent. Block-specific rules belong in blocks//style.css. */ /* * The face every glyph Inter does not carry falls back to, and the reason the * arrows were wrong. * * Inter ships here as a Latin subset, and live's ships as the same one: both * carry U+2191 and U+2193 and neither carries U+2192, U+2197 or U+2726. So no * arrow on either site is drawn in Inter — each falls through its own stack, * and the two stacks disagreed. Live's next entry is Next's generated * `Inter Fallback`, which is Arial with Inter's metrics laid over it; ours was * `ui-sans-serif`, which is SF on macOS and Segoe UI on Windows. Arial's * arrow is long and flat, SF's short with an angled head — a different mark, * not a different size, and nothing in a computed style shows it because both * sides report the same `font-family`. `CSS.getPlatformFontsForNode` is what * names the face that actually rendered. * * Descriptors are live's own, copied from its stylesheet verbatim. They matter: * `size-adjust` scales the glyph, so Arial without them draws a smaller arrow * than live's. * * theme.json's sans stack names this second, exactly where live names it. One * declaration therefore covers every arrow on the site — the button glyph, the * card cue, the lineup quicklinks, the nav's "All of …" row, the need-help * wizard — and the eligibility list's ✦ marker with them. */ @font-face { font-family: "Inter Fallback"; src: local( "Arial" ); ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%; } html { /* Forbids a single-word last line; the browser reflows earlier lines to pull a word down. Inherited, so every block gets it. `balance` is the fallback where `pretty` is unsupported. */ text-wrap: balance; text-wrap: pretty; scroll-behavior: smooth; /* * Live's `antialiased` on (layout.tsx), which is Tailwind's shorthand * for these two. Grayscale rasterisation lays down less ink than the * platform default, and without it every glyph on the site rendered a shade * heavier than live's — light-on-dark measurably brighter, dark-on-light * darker. It is the same amount of ink either way, so the direction flips * with the surface; that flip is the tell, and it is why the footer read as * a weight difference when its colours already matched to the byte. * * Rasterisation only. Metrics, advance widths and layout are untouched, and * so are the declared colours every contrast ratio in this build is measured * from. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* * Visually hidden but present for assistive technology. Used where a section * needs an accessible name and a correct place in the document outline but the * design carries no visible heading — clip-path rather than display:none, which * would remove it from the accessibility tree entirely. */ .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset( 50% ); white-space: nowrap; } /* * Skip link. First focusable element in the document, parked off-screen * until focused. Cream on deep forest clears WCAG AA at this size. */ .cobell-skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; } .cobell-skip-link:focus { left: 1rem; top: 1rem; padding: 0.75rem 1.25rem; border-radius: 0.375rem; background: var( --wp--preset--color--cream ); color: var( --wp--preset--color--forest ); outline: 2px solid var( --wp--preset--color--forest ); text-decoration: none; } /* * Focus-visible fallback (WCAG 2.4.11). Teal clears 3:1 against cream, which * is the surface most of the site uses. Dark sections override it below * rather than relying on one ring colour to clear both surfaces. */ :focus-visible { outline: 2px solid var( --wp--preset--color--teal ); outline-offset: 2px; } .cobell-section--dark :focus-visible { outline-color: var( --wp--preset--color--sunflower ); } /* * Ambient grain. A 6%-opacity multiplied noise field used across the * editorial sections so consecutive cream panels read as one surface. Applied * to a block's section element; the pseudo-element is inert to pointers and * sits behind content. */ .cobell-grain { position: relative; isolation: isolate; overflow: hidden; } .cobell-grain::before { content: ""; position: absolute; inset: 0; z-index: -10; pointer-events: none; opacity: var( --wp--custom--grain-opacity ); mix-blend-mode: multiply; background-image: url( "data:image/svg+xml;utf8," ); } /* Multiplying noise onto a dark surface is invisible, so dark sections screen it back out and carry slightly more of it. */ .cobell-section--dark.cobell-grain::before { opacity: 0.08; mix-blend-mode: screen; } @media ( prefers-reduced-motion: reduce ) { html { scroll-behavior: auto; } } /* * The page gutter is a step, not a ramp. * * It was `clamp(1.5rem, 4vw, 3.5rem)` against the reference's `px-6 md:px-14`. * A clamp cannot reproduce a step: it agreed with live at 375 (24) and from * ~1400 up (56) — the two widths this build was fitted at — and was wrong at * every width in between, bottoming the whole 768–1400 band out on `4vw`. At * 768 that is 31px against live's 56 and at 1024 it is 41. * * It is the single largest remaining source of difference on a tablet, and the * signature is unmistakable once you look for it: every section's first child * starts 25px left of live's. It was showing up as *height* differences, not * width ones, because a wider column makes a card shorter — /about-iei's whole * +141 at 768 was this, its board cards measuring 214 wide and 321 tall against * live's 197 and 296. * * Declared on `:root` rather than left in theme.json because theme.json cannot * carry a media query. `:root` is (0,1,0) and global styles emit their custom * properties on `body` at (0,0,1), so this wins on specificity and does not * depend on stylesheet order. theme.json keeps the mobile value so the token * still has one honest source for its base. * * Below 48rem this is a no-op: the old clamp's floor was already 1.5rem and * `4vw` only passes it at 600px. From 1400 up both resolve to 3.5rem. So 390 * and 1440 are the regression gates for any change here — they must not move. * * Six sections still want 48 rather than 56 at md — the contact, support and * news-press family is `md:px-12`. Not carried; they are 8px wide of live from * 768 up and were before this change too. */ :root { --wp--custom--gutter: 1.5rem; } @media ( min-width: 48rem ) { :root { --wp--custom--gutter: 3.5rem; } /* * The second register: 48, not 56. * * Live authors this per page and uses `px-12` on the six /support pages, on * /news-press, and on /contact's hero — `px-14` everywhere else. Read off the * deployed site by scanning for elements with a computed 48 or 56 inline * padding, not off the reference checkout, which is stale. * * Three of the four scopes are registers that render on one page each, so * they need no page context: `--wide` is /news-press's hero, `press-releases` * and `--measure-snug` are its two body sections. `--full-bleed` is the * /contact, /support and audience-page hero and is 48 on all seven. * * Only the /support cluster's body sections need to know what page they are * on, because card-grid, faq and cta-band all render at 56 elsewhere. That is * what `cobell-cluster-support` is for; see the note on it in helpers.php. * * Setting the token rather than `padding-inline` so anything doing arithmetic * on the gutter — the full-bleed hero's `calc(72rem + gutter * 2)` caps, the * contact spread's five-track grid — follows it instead of drifting from it. */ .cobell-hero--full-bleed, .cobell-hero--wide, .cobell-press, .cobell-media--measure-snug, body.cobell-cluster-support .cobell-section { --wp--custom--gutter: 3rem; } } /* * Section shell. Every block's outermost element takes this so vertical * rhythm and gutters are decided in one place instead of per block. * * The reference steps its section padding rather than scaling it — `py-28` * below its md breakpoint and `py-36` above, so 112px then 144px. A single * clamp cannot reproduce a step, and the earlier clamp landed 29px short at * every viewport, compounding down a seven-section page. So the step is a * local property rather than the theme.json token read directly: blocks that * scale the section rhythm (hero, cta-band) multiply this and follow the * breakpoint without repeating the media query. */ /* * Body copy is one step, set once. The reference runs every section's reading * copy at `text-base md:text-lg` — 16px, stepping to 18px at the same * breakpoint the section padding steps at — and tints it forest at 75%, which * measures 5.22:1 on cream. Blocks that need to sit off this (the Process * intro, which the reference holds at 16px) set their own size. * * The two font-size tokens are fixed rather than fluid, so the step has to be * a media query here rather than a clamp on the token. */ .cobell-section { --cobell-section-padding: var( --wp--custom--section-padding ); --cobell-body-size: var( --wp--preset--font-size--medium ); --cobell-body-color: color-mix( in srgb, var( --wp--preset--color--forest ) 75%, transparent ); padding-block: var( --cobell-section-padding ); padding-inline: var( --wp--custom--gutter ); background-color: var( --wp--preset--color--cream ); color: var( --wp--preset--color--forest ); } @media ( min-width: 48rem ) { .cobell-section { --cobell-section-padding: var( --wp--custom--section-padding-wide ); --cobell-body-size: var( --wp--preset--font-size--large ); } } /* * The homepage runs a looser rhythm than the interior, and the two were fought * over a single token before this rule existed. * * Measured on live: the interior pages sit at 128px on the large majority of * their sections, which is what --section-padding-wide is set to. The homepage * sits at 144px on every one of its editorial sections — the reference gives it * `md:py-36` where the interior templates use `py-32`. One global value cannot * be both, and splitting it by block does not work either: criteria-list and * media-text appear on the homepage and on interior pages, and want a different * value in each place. * * So the exception is scoped to the page rather than the block, which is where * the difference actually lives. * * The same split exists on a phone and only the desktop half of it had been * carried. Live's two registers are `py-24 md:py-32` on the interior — 96 then * 128 — and `py-28 md:py-36` on the homepage, 112 then 144. The shell's mobile * token was 7rem, which is the homepage's value, so every interior section that * did not override it locally ran 16px deep at both ends. Measured at 390: * /our-story's three media-text rows and its pull quote all read 112/112 against * live's 96/96, and /scholarships' ledger the same. * * The token is 6rem now and the homepage takes 7 here. Nothing else needs * scoping — /about-iei is live's other 112 page and all three of its sections * (a card-grid `--split` and two people-grids) already carry their own padding, * verified 112/112 against live on both sides at 390 before and after. */ body.home .cobell-section { --cobell-section-padding: 7rem; } @media ( min-width: 48rem ) { body.home .cobell-section { --cobell-section-padding: 9rem; } } /* * The hairline live draws between sections, on the three pages that have it. * `cobell-ruled-sections` is written by a body_class filter; the note on it in * helpers.php lists which pages carry rules and why this cannot be a rule on * `.cobell-section` generally. * * `:first-child` is the hero and `:last-child` the closing CTA band, and live * rules neither — the sections are the only element children of * `.wp-block-post-content`, so the two pseudo-classes name exactly those. That * also means the set follows the block list: reordering or adding a section in * the editor moves the rules with it rather than stranding them on a position. * * The colour is live's own `#26352a` at 15%, which is the forest token exactly. */ body.cobell-ruled-sections .cobell-section:not( :first-child ):not( :last-child ) { border-top: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 15%, transparent ); } /* * Dark surface — deep forest, the tone the reference uses to break the cream * rhythm at a page's decisive moment. Not the teal the footer uses; the footer * carries its own colours in chrome.css. */ .cobell-section--dark { --cobell-body-color: color-mix( in srgb, var( --wp--preset--color--cream ) 88%, transparent ); background-color: var( --wp--preset--color--forest ); color: var( --wp--preset--color--cream ); } .cobell-section__inner { margin-inline: auto; max-width: var( --wp--style--global--wide-size ); } .cobell-section__inner--narrow { max-width: var( --wp--style--global--content-size ); } /* * Eyebrow. Letterspaced small caps above a heading, optionally flanked by * hairline rules. The rules are drawn by ::before/::after so no decorative * markup reaches the render templates. * * Terracotta #d45d00, which is live's, and it costs a WCAG AA failure that is * a decision rather than an oversight. At the eyebrow's 10px this is * normal-size text and 1.4.3 wants 4.5:1; terracotta on cream measures * 3.15:1. An earlier pass here substituted ember #8b3a00 (6.26:1, same hue * family, already in the reference palette) and that was reversed on * 2026-08-05 on request — live is the target, the same call already made and * reversed once on the "Need help?" pill. Ember is the substitute to restore * if this is reversed again; nothing else has to move with it. * * The flanking hairlines were terracotta throughout and are unaffected — they * are aria-hidden decoration and carry no information. * * The margin and line-height below are the reference's own: 1.5 leading on a * 10px kicker, and 2rem of air beneath it. Sections that sit the eyebrow * tighter to the headline take --tight. */ .cobell-eyebrow { display: inline-flex; align-items: center; gap: 1rem; margin: 0 0 2rem; color: var( --wp--preset--color--terracotta ); font-size: var( --wp--custom--eyebrow-size ); font-weight: 600; letter-spacing: var( --wp--custom--eyebrow-tracking ); line-height: 1.5; text-transform: uppercase; } .cobell-eyebrow--tight { margin-bottom: 1.5rem; } /* Where the element beneath the eyebrow owns the gap itself — the scholarship detail regions space their list off the label rather than the other way round, so the eyebrow's own 2rem would double it. */ .cobell-eyebrow--flush { margin-bottom: 0; } /* * Hairline rules flanking the eyebrow. The reference has three registers, and * which one a section uses is part of its identity rather than a free choice: * a rule on both sides where the eyebrow is centred, a single leading rule * where it is left-aligned in a column, and none at all where the eyebrow sits * inside a card. */ .cobell-eyebrow--ruled::before, .cobell-eyebrow--ruled::after, .cobell-eyebrow--ruled-leading::before { content: ""; width: 2rem; height: 1px; background-color: color-mix( in srgb, var( --wp--preset--color--terracotta ) 60%, transparent ); } /* The single-rule register sits its label a notch closer to the hairline than the flanked one does — gap-3 against gap-4 in the reference. */ .cobell-eyebrow--ruled-leading { gap: 0.75rem; } /* Flame on deep forest is 5.39:1; ember would disappear against it. */ .cobell-section--dark .cobell-eyebrow { color: var( --wp--preset--color--flame ); } .cobell-section--dark .cobell-eyebrow--ruled::before, .cobell-section--dark .cobell-eyebrow--ruled::after, .cobell-section--dark .cobell-eyebrow--ruled-leading::before { background-color: color-mix( in srgb, var( --wp--preset--color--flame ) 60%, transparent ); } /* * Heading accent. The trailing fragment of a headline, set in terracotta. * Colour only — the reference build used a plain span, so this must not * italicise or carry semantic emphasis. * * Terracotta stays here: the accent is part of a heading whose smallest * clamped size is 1.75rem, so it is large text under WCAG and 3.15:1 clears * the 3:1 threshold that applies. */ .cobell-accent { color: var( --wp--preset--color--terracotta ); font-style: inherit; } /* * Terracotta on the dark surface too, which is what live does — the reference's * own note calls the accent "the visual through-line of the cluster" and keeps * it at `#d45d00` on both tones rather than lightening it. * * This was flame (#fa8a3b, 5.39:1). Terracotta on forest measures 3.30:1, and * the two sections that reach this rule are both dark `cta-band` closers — * /our-story and /how-to-apply — whose heading is `clamp(2rem, 4.6vw, 3.75rem)`. * It floors at 32px, so the fragment is large text at every width and 1.4.3's * threshold is 3:1, not 4.5. Flame is the substitute if that heading ever drops * below 24px, which is the only thing that would make this fail. * * Fifth live-colour decision on this build to be made and reversed; the others * are listed in CLAUDE.md. Do not change it back silently. */ .cobell-section--dark .cobell-accent { color: var( --wp--preset--color--terracotta ); } /* * Caption plate. The site's canonical photograph caption: a feathered glass * strip pinned to the foot of the image, carrying cream small caps. Live has it * on the Elouise spotlight, both /about-iei rosters, the scholarship detail * heroes and bodies, the support heroes, and the alumni rail — the reference * consolidated its five hand-written copies into one primitive after they had * drifted on glass opacity, mask cutoff and padding, so it is one rule here too. * * Two things make it work and both are easy to lose: * * The mask feathers the top edge of the glass into the photograph rather than * cutting it, so the type always sits on solid coverage and there is never a * hard horizontal seam across the picture. * * #14201a is a literal, not a token. It is darker than forest-deep and exists * to hold cream at AA over a photograph nobody has seen — cream on this tint is * legible whatever is behind it. * * The plate is positioned against its figure, so the figure owns the aspect * ratio, the radius and the overflow clip; a plate on a bare has nothing * to pin itself to. */ .cobell-caption-plate { position: absolute; inset: auto 0 0; padding: 0.75rem 1rem; background-color: color-mix( in srgb, #14201a 55%, transparent ); color: var( --wp--preset--color--cream ); font-family: var( --wp--preset--font-family--sans ); font-size: var( --wp--custom--eyebrow-size ); font-weight: 600; letter-spacing: 0.35em; line-height: 1.625; text-align: center; text-transform: uppercase; -webkit-backdrop-filter: blur( 40px ); backdrop-filter: blur( 40px ); -webkit-mask-image: linear-gradient( to top, #000 55%, transparent 100% ); mask-image: linear-gradient( to top, #000 55%, transparent 100% ); } /* * Tall register. A two-line caption reads as bottom-hugging on the standard * band, so the reference extends the glass and moves the headroom above the * type rather than below it. Live uses this on the support heroes; the * single-line captions everywhere else stay on the default. */ .cobell-caption-plate--tall { padding: 2.25rem 1rem 0.75rem; -webkit-mask-image: linear-gradient( to top, #000 66%, transparent 100% ); mask-image: linear-gradient( to top, #000 66%, transparent 100% ); } .cobell-caption-plate__line { display: block; } .cobell-caption-plate__line--meta { color: color-mix( in srgb, var( --wp--preset--color--cream ) 75%, transparent ); } /* * Buttons. Rendered by cobell_render_buttons() from the shared buttons * repeater, so the three variants below are the whole button vocabulary. */ /* * `gap-4` and `items-center`, both literal. The gap was `spacing--30`, which * resolves to 0.67rem rather than the 1rem the scale reads as — the preset trap * again — and live writes 16px on every row of these it draws. Only two * instances on the site carry more than one button and so could show it: the * homepage hero and /support/parents. `align-items` was missing outright, which * lets an outlined pill and a text link sit on different baselines. */ .cobell-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: var( --wp--preset--spacing--50 ); } /* * The reference has two call-to-action type treatments, not one. An earlier * note here claimed a single 11px uppercase treatment shared by all three * variants; that was wrong, and it is why every button on the site read a * step small and over-tracked. * * The pill CTAs — filled and outlined — are 14px semibold in sentence case * with no tracking, on 12px × 24px of padding and a 20px line box. The 11px * uppercase treatment belongs to the bare text link and to the blocks that set * their own register (cta-band, criteria-list), so the pill typography lives on * the base and --ghost overrides it below. * * Three of those numbers were wrong against live and every button on the site * carried all three: * * line-height 1.25 gave a 17.5px line box where live's is 20px, so every * filled pill stood 3px short of live's 44px. * padding 1.75rem inline where live sets 1.5rem, so each pill ran 8px * wide. The two blocks live pads differently override it. * border a 1px transparent border added 2px to every filled pill, * which is why they measured 46 against live's 44. Only the * outlined variant draws a border, so only it declares one. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border: 0; border-radius: 999px; /* A