/* ============================================================================ MAMBO — BASE. v3.0.0 Reset, type, links, the focus ring, the shell, the section rhythm. This sheet loads after platform.css and parent/global.css, so its job is partly to reclaim the element-level defaults those two set. It uses no IDs, no !important, and never a literal colour. ============================================================================ */ .mb *, .mb *::before, .mb *::after { box-sizing: border-box; } html[data-theme] { color-scheme: light dark; } body.mb { font-family: var(--font); background: var(--pg); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* clip, not hidden: `hidden` on makes position:sticky stop working in several engines, which would kill the header. */ overflow-x: clip; transition: background var(--dur-reveal) ease, color var(--dur-reveal) ease; } /* The site chrome and main column sit above the fixed backdrop field. NOTE: never give these a transform, filter, backdrop-filter, perspective, contain or content-visibility. Any one of them makes this element a containing block, which pins the position:fixed backdrop to it instead of to the viewport — the backdrop then scrolls with the section and clips. */ body.mb .eos-main, body.mb .mb-nav, body.mb .mb-footer { position: relative; z-index: 1; } /* ---- type ---------------------------------------------------------------- */ /* Two rules govern every element reset in this sheet: 1. RECLAIM everything the parent sheets set. global.css:734 puts uppercase + var(--font-heading) on every bare h1-h6 — without text-transform/font-family here the whole landing page rendered in caps in the wrong face. 2. :where() so the reclaim has ZERO class weight. Written bare, `.mb h2` is (0,1,1) — one higher than every single-class component — so `margin: 0` was silently beating .mb-band-title's `margin: 14px auto 0` and the closing band's copy lost its auto-centring and pinned left. (0,1,0) still beats the parent themes' bare-element rules, but any .mb-* class now wins on source order, which is the whole design of the layer. */ .mb :where(h1, h2, h3, h4, h5, h6) { margin: 0; font-family: inherit; font-weight: 700; color: var(--ink); text-transform: none; text-wrap: balance; } /* Two more parent-theme reclaims. global.css dresses every bare

as a navy-ruled callout with a tinted ground; the design's quotes (voices, scripture) are plain text inside their own cards. And browsers give
a 1em 40px default margin that would break every card built on one. */ /* box-shadow included: global.css:4167 dresses bare blockquotes as callout cards — border, wash AND a shadow. Reclaiming everything but the shadow left a ghost card-edge floating around every quote. */ .mb :where(blockquote) { margin: 0; padding: 0; border: 0; background: transparent; border-radius: 0; box-shadow: none; } .mb :where(figure) { margin: 0; } .mb :where(h1) { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -.03em; } .mb :where(h2) { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.14; letter-spacing: -.028em; } .mb :where(h3) { font-size: 20px; line-height: 1.25; letter-spacing: -.02em; } .mb :where(h4) { font-size: 15.5px; line-height: 1.3; letter-spacing: -.015em; } /* Reclaims every declaration global.css:763 puts on bare
— the parent's `max-width: 70ch` was the sneakiest: a short centred kicker got a 70ch box that hugged the LEFT of its centred container, so the text floated far off-centre. `inherit`/`none` here re-opens normal inheritance at (0,1,0); every component that wants a measure, a colour or a size declares its own and wins on order. */ .mb :where(p) { margin: 0; max-width: none; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; text-wrap: pretty; } /* Every figure, counter, timestamp and table cell. Without this the countdown digits change width as they tick and the tiles visibly breathe. */ .mb [data-unit], .mb .mb-num, .mb .mb-stat-figure, .mb time { font-variant-numeric: tabular-nums; } /* Newsreader is reserved for scripture, pull-quotes and sermon body copy. :where() so a quote that opts back out (.mb-voice-quote p is Figtree by design) wins with its own single-class rule — bare, this was (0,1,2) and the voice cards rendered serif against the design. */ .mb :where(blockquote p), .mb .mb-serif { font-family: var(--font-serif); } /* :where() contributes ZERO specificity, and that is the whole point. Written as a plain `.mb a` this resets is (0,1,1) — one higher than every single-class component variant — so it silently outranked .mb-btn--primary, .mb-btn--tint, .mb-nav-give and every other button colour in the theme. Every button then inherited the page's ink: white-on-clay came out dark-on-clay, and the only ones that looked right were the ones whose variant colour happened to be --ink anyway. With :where() these are (0,1,0), so any component rule in a later sheet wins on source order, while browser-default link blue is still overridden. */ .mb :where(a) { color: inherit; text-decoration: none; } .mb :where(a):hover { color: inherit; } /* Prose links still need to look like links. Chrome and cards opt out via .mb-a-plain. */ .mb .mb-prose a:not(.mb-a-plain) { color: var(--link); text-decoration: underline; text-underline-offset: 2px; } .mb .mb-prose a:not(.mb-a-plain):hover { color: var(--linkHover); } /* Same reason as the anchor reset above — as `.mb button` this was (0,1,1) and beat .mb-btn--tint, which is why "Set a reminder" rendered ink instead of clay. */ .mb :where(button) { font: inherit; color: inherit; } .mb img, .mb svg, .mb video { max-width: 100%; } .mb img { height: auto; } /* Also :where() — as `.mb ul.mb-list` this was (0,1,2), which beat .mb-socials' `margin-left: auto` and un-flushed the footer's social row, and swallowed .mb-notice-list's top margin. */ .mb :where(ul.mb-list, ol.mb-list) { margin: 0; padding: 0; list-style: none; } /* ---- focus --------------------------------------------------------------- */ /* :focus-visible only — a visible ring on every mouse click was the complaint that got the previous ring removed altogether. */ .mb :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: var(--r-xs); } /* On an accent-filled surface the accent ring is invisible against its own background, so those surfaces ring in the on-accent colour instead. */ .mb .mb-btn--primary:focus-visible, .mb .mb-band-btn:focus-visible, .mb .mb-drawer-give:focus-visible { outline-color: var(--focus-on-acc); outline-offset: -3px; } .mb .skip-link:focus-visible { outline-offset: 4px; } /* ---- selection + scrollbar ----------------------------------------------- */ /* Retinted from the leftover indigo rgba(46,38,96,…) the prototype inherited from an archived palette. */ .mb ::selection { background: var(--accsoft); color: var(--acc); } .mb ::-webkit-scrollbar { width: 9px; height: 9px; } .mb ::-webkit-scrollbar-track { background: transparent; } .mb ::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--r-md); } .mb ::-webkit-scrollbar-thumb:hover { background: var(--faint); } /* ---- the shell + section rhythm ------------------------------------------ */ .mb-shell { width: 100%; max-width: var(--shell); margin-inline: auto; } /* Sections carry TOP padding only: each one supplies the gap for the next, so two adjacent sections never double their margins. */ .mb-sec { position: relative; padding: clamp(56px, 7vw, 100px) var(--gutter) 0; } /* Full-bleed bands cannot use padding for the gap — they'd tint it. */ .mb-sec--bleed { padding-inline: 0; padding-top: 0; margin-top: clamp(56px, 7vw, 100px); } .mb-sec--tight { padding: clamp(38px, 5vw, 72px) var(--gutter) clamp(52px, 6.5vw, 92px); } /* ---- section heads -------------------------------------------------------- The 12px grid gap is the ONLY internal spacing mechanism: the paragraphs carry no margin, so eyebrow -> h2 -> lede is a steady 12/12 (the design's rhythm) and the eyebrow, a grid item whose margin could never collapse away, adds no stray height above the head. */ .mb-head { display: grid; gap: 12px; margin-bottom: 30px; } .mb-head--row { grid-template-columns: 1fr auto; align-items: end; gap: 16px 24px; } /* The copy column is its own grid so the row variant keeps the same 12px steps — as a plain block, .mb-head's gap could not reach inside it and the eyebrow sat flush on the headline. min-width:0 keeps a long headline from shoving the side button out of the row. */ .mb-head--row .mb-head-copy { grid-column: 1; display: grid; gap: 12px; min-width: 0; } /* 11px / .15em, not the token file's 10.5px / .12em. The prototype sets these values on every section eyebrow, and the prototype wins over the doc when they disagree. */ .mb-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--kicker); } /* :not(.mb-eyebrow) is load-bearing twice over: this selector outranks .mb-eyebrow (0,1,1 vs 0,1,0), so without the guard every section eyebrow was silently repainted --body at 15px — the kicker colour never showed anywhere. */ .mb-head p:not(.mb-eyebrow) { font-size: 15px; line-height: 1.55; color: var(--body); max-width: 62ch; } .mb-head-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--acc); white-space: nowrap; transition: gap var(--dur) var(--ease); } .mb-head-link:hover { gap: 10px; } /* ---- screen-reader only -------------------------------------------------- */ .mb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ============================================================================ CASCADE ARMOUR — the (0,1,1)+ legacy war Everything above assumes the fight is against BARE element selectors, which .mb :where(el) at (0,1,0) wins. But two legacy sheets punch harder: ux-upgrade.css `.eos-app h1..h4` (0,1,1) platform.css `.eos-app a:focus-visible` (0,2,1) `.eos-app a, .eos-app button` (0,1,1) transition pins body carries .eos-app site-wide, so these reach every landing element and outrank single-class component rules. The rules below restate the design's own values at matching specificity — body.mb :where(...) — and win on source order. VALUES MIRROR THE COMPONENT SHEETS; if a mirrored declaration changes there, change it here in the same commit. ============================================================================ */ /* Focus. platform.css:3017 rings every a/button/input in legacy gold #F5A312 at (0,2,1), one over `.mb :focus-visible`. Same ring as ours, right colour. The on-accent overrides above ((0,3,0)) still outrank both. */ body.mb :where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: var(--r-xs); } /* These two fields draw focus themselves — clay border + accsoft ring on the subscribe input, the dialog chrome on the palette — so no outline on top. */ body.mb :where(.mb-subscribe-input, .mb-palette-input):focus-visible { outline: none; } /* Inputs also get global.css:3823's navy/cream box-shadow ring at (0,1,1). The two self-focused fields are excluded HERE too, not just from the outline rule: this selector computes to (0,2,1), which would beat their own (0,2,0) :focus rules and strip the subscribe field's accsoft ring. */ body.mb :where(input:not(.mb-subscribe-input):not(.mb-palette-input), select, textarea):focus-visible { border-color: var(--acc); box-shadow: none; } /* Headings. ux-upgrade's `.eos-app h1..h4 { color: var(--ink); letter-spacing: -.02em }` swallows every single-class heading rule. Colour first — the two that do not want --ink at all: */ body.mb :where(.mb-stage-title) { color: var(--onphoto); } /* mirrors mambo-landing */ body.mb :where(.mb-footer-col-title) { color: var(--muted); letter-spacing: .12em; } /* mirrors mambo-chrome */ /* ...then tracking, for the display titles whose set is tighter than -.02em: */ body.mb :where(.mb-hero-title) { letter-spacing: -.04em; } /* mirrors mambo-landing */ body.mb :where(.mb-band-title) { letter-spacing: -.036em; } /* mirrors mambo-landing */ body.mb :where(.mb-promo-title) { letter-spacing: -.026em; } /* mirrors mambo-landing */ body.mb :where(.mb-announce-title) { letter-spacing: -.018em; } /* mirrors mambo-landing */ body.mb :where(.mb-subscribe-title) { letter-spacing: -.024em; } /* mirrors mambo-chrome */ /* ...and the bare section h2/h4, which want the base scale's own tracking. :not([class]) inside :where() stays weightless, so this can never outrank a classed component rule. */ body.mb :where(h2:not([class])) { letter-spacing: -.028em; } body.mb :where(h4:not([class])) { letter-spacing: -.015em; } /* Transitions. platform.css:2931 pins a 7-property 220ms ease on bare a/button at (0,1,1): the head-links' gap hover SNAPPED (gap is not in the legacy list) and the quiet button lost its spring. (0,2,0) restatements. */ .mb .mb-head-link { transition: gap var(--dur) var(--ease); } .mb .mb-btn { transition: background var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease, transform var(--dur) ease, box-shadow var(--dur) ease; } .mb .mb-btn--quiet { transition: transform var(--dur-pop) var(--spring), background var(--dur-pop) ease; } .mb .mb-icon-btn { transition: background var(--dur) ease, color var(--dur) ease, border-color var(--dur) ease, transform var(--dur) ease; } /* Sizing. platform.css:2901 floors every text input at 44px; the palette field is designed to size from its own padded row. Any declaration beats the legacy :where()-form rule. global.css's coarse-pointer 44px floor survives at (0,1,1) inside its media query — on touch, the tap target stays. */ .mb :where(input, select) { min-height: auto; } /* The base measure. body.mb inherited 16px/1.6 from global.css's body rules — correct values, wrong owner. Pinned here so retiring the legacy sheet can never reflow the whole page. */ body.mb { font-size: 16px; line-height: 1.6; } /* global.css:23 sets scroll-behavior:smooth with no reduced-motion guard. is above body.mb's scope, so :has() reaches up. */ @media (prefers-reduced-motion: reduce) { html:has(body.mb) { scroll-behavior: auto; } }