/** * The Africa Missions Initiative — the visual skin. * * Loaded AFTER tami-frontend.css by RegionPage::enqueue_skin(). That sheet * owns layout, responsiveness, accessibility and the client's measured rules; * this one owns the LOOK — type, colour, surfaces, corners — and is written * entirely as overrides of the tokens and components the structural sheet * defines. Modelled on the "Clothes Store" Elementor template the client * chose on 2026-09-02 — an Inter-like sans, near-black plum ink, warm * hairlines, one red accent, square corners, centred photo page headers, * "View All" outline pills, news and product cards — with two client * instructions layered on top: every hero is the page's full-viewport-width * header, and every card is a raised, three-dimensional card. * * SAME RULES AS THE STRUCTURAL SHEET: every selector under .tami (or a * body.tami-* gate), logical properties only, no @keyframes, no @import, * no @font-face, nothing fetched from outside the plugin, !important only to * counter the host theme and then with a comment saying so. * * Built from ordered parts (foundation, heroes, cards, singles, forms); the * part headers below mark where each begins. */ /* ====================================================================== * PART 10-foundation * ====================================================================== */ /** * The Africa Missions Initiative — skin, part S1: FOUNDATION. * * WHAT THIS FILE IS * ------------------------------------------------------------------------- * The first part of the "Clothes Store" skin (DESIGN-SPEC 2026-09-03). It * loads AFTER tami.css and tami-frontend.css and owns the things every * other part builds on: the design tokens — including the 3D card tokens of * spec §1.2 and the copy-able card mixin in §1.5 — the type scale, links, * every button variant, breadcrumbs, section heads, pagination, tables, * notices, the image treatment, the focus ring and the reduced-motion * neutraliser. * * Scope (spec §5, package S1) and nothing else: heroes are 20-heroes.css, * cards 30-cards.css, singles 40-singles.css, forms 50-forms.css. Where a * component below is shared with another part (the hero CTA, the card CTA, * the queue table's title link) only the part of it named in §5 is touched. * * HOW IT WINS * ------------------------------------------------------------------------- * The base sheet's component rules are mostly (0,1,0) or (0,2,0); restating * the same selector here wins on source order alone. Where the base is more * specific — the §27–§30 `.tami .a .b` rules — the selector is matched * exactly. Every block says WHY and names the base rule it overrides with * its line and specificity. No !important anywhere in this part. * * TOKENS FOR THE OTHER PARTS * ------------------------------------------------------------------------- * §1 below redefines the base aliases (--tami-ink, --tami-line, * --tami-elev-rest, …), adds --tami-card-edge (spec §1.2) and adds * skin-only names, all prefixed --tami-skin-*: the font stack, the * on-dark colour, the on-accent label colour (accent-contrast), the hero * scrim and the modal backdrop, the type scale (size-display / size-page / * size-banner / size-section / size-card / size-meta / size-label), the * three tracking values (track-label, track-button, track-eyebrow) and * the four 3D-card values (card-lift, card-zoom, card-dur, card-ease). New * names only — nothing in CONTRACTS-V2 §5 (--tami-color-*, * --tami-font-*, --tami-size-*, --tami-space-*) is ever assigned * here; those are only READ — in the alias chains and, for the three * neutrals and the accent, in the §1.1 style-query sentinels that * recognise the token sheet's own defaults — so the administrator's * settings and the per-region accent keep their precedence. Read §1's * comment before touching a colour: the chains' fallbacks are NOT what * paints the page. * * The house rules of the base sheet apply unchanged: every selector carries * .tami, logical properties only, no @keyframes / @import / @font-face / * external url(), mobile first with min-width queries on the §0 scale. */ /* ------------------------------------------------------------------------- * 1. TOKENS * * The demo's palette and shape language, transcribed (spec §1). Shape has * no inherited token, so it is set flat: square corners everywhere except * the View All pill and badges. Depth is the client's §1.2 instruction — * every card is a raised sheet of card stock — so the two elevation tokens * are REAL shadows, deeper than the base's, and a third token names the * card's visible thickness. * * COLOUR — why the alias chains below are not the whole story. Spec §1 * says to change only the fallback side of the base's chains * (`--tami-ink: var(--tami-color-heading, #26222f)`) so that an * administrator's colour still wins. Its premise is wrong about the token * sheet: tami.css L27–L32 declares --tami-color-heading / -text / * -text-muted / -border with a real value on `.tami` on EVERY page, so * a var() fallback for any of them is never reached, and the chains on * their own keep painting the base's cool greys (#1a1a1a / #2b2b2b / * #5f6b6d / #e3e6e8). Assigning the §5 tokens here instead would beat the * administrator's inline block — StyleInheritance prints it on the same * `.tami` (0,1,0), earlier in the document — and discard their choice * without a trace. So, three mechanisms, each for what it is right for: * 1. the chains stay, because they are correct whenever a colour WAS * configured: the administrator's or the theme's value flows through; * 2. §1.1 recognises "nothing configured" — the token still carrying the * token sheet's own default — with a style container query, and * applies the skin's colour only then; * 3. muted is set flat: no setting and no emitter feeds * --tami-color-text-muted (StyleInheritance maps heading / text / * bg / surface / border / link / breadcrumb only), so there is no * choice to preserve, and it is the token sheet's default that would * otherwise paint every meta line. * * THE ACCENT is the same story. StyleInheritance prints an accent and its * two AA-derived companions (accent-strong, accent-contrast) on every * render — FALLBACK_ACCENT #7cbb42 when nothing is set — and the token * sheet declares the same #7cbb42 on `.tami` (tami.css L33) for the * pages the emitter does not reach (the harness renders), so the red * fallbacks in the two accent chains below are never the value that * paints. Left to the chains, every accent surface — the hairline under * the hero, the At-a-Glance counts, a ministry card's story count, the * primary button's hover fill — is the base's green on a page whose * neutrals are the demo's. §1.1 therefore sentinel-swaps the accent * exactly like the neutrals, with one extra rule: the three accent values * (raw, ink, and the label colour that sits ON the raw fill) are swapped * TOGETHER or not at all, because the emitter's companions are derived * from the green and a red fill under a green-derived label (#1a1a1a on * #e01a2b, 4.0:1) would fail AA. A configured accent — the plugin setting * or a region's own — still flows through the chains untouched, with the * companions the server computed for it. * * Overrides the §1 module-token block of the base sheet (`.tami`, 0,1,0, * L311) on source order. * ------------------------------------------------------------------------- */ .tami { /* Colour. accent-ink is the accent as TEXT on white — #b8121f is 5.6:1; the raw accent (#e01a2b, 4.8:1) stays decorative and for fills that carry white. The skin's neutrals — painted by §1.1 when nothing is configured, or by the flat muted below — measure: ink #26222f on #ffffff 14.9:1 headings, primary fills ink-2 #312e39 on #ffffff 12.6:1 body copy muted #6b6873 on #ffffff 5.2:1 meta, labels, hints muted #6b6873 on #f5f4f2 4.9:1 meta on the wash white #ffffff on #26222f 14.9:1 labels on a primary button white #ffffff on #e01a2b 4.8:1 labels on the hover fill With the token sheet's defaults in effect (what an unsupporting browser, or a page whose colours ARE configured to those values, paints) ink/ink-2/line are #1a1a1a / #2b2b2b / #e3e6e8 — the base's own AA palette. */ --tami-accent-raw: var(--tami-color-accent, #e01a2b); --tami-accent-ink: var(--tami-color-accent-strong, #b8121f); /* The label colour ON an accent fill (the primary hover, §4.1): the emitter's computed choice while an accent is configured, white once §1.1 has swapped the fill to the skin's red. Skin-only name; the §5 token is only read. */ --tami-skin-accent-contrast: var(--tami-color-accent-contrast, #ffffff); --tami-ink: var(--tami-color-heading, #26222f); --tami-body-ink: var(--tami-color-text, #312e39); --tami-muted-ink: #6b6873; --tami-surface: var(--tami-color-surface, #ffffff); --tami-line: var(--tami-color-border, #eae4e1); /* The wash is a SOLID now, not an rgba tint: the demo's news cards and product plates are one flat grey, and a solid stays the same grey when a card sits on a washed section. */ --tami-wash: #f5f4f2; /* ELEVATION — spec §1.2, the client's 3D cards. Two layers each: a tight contact shadow that defines the edge and a wide ambient one that gives the lift; the raised pair is offset FURTHER, not merely darker, which is what reads as "coming toward you". Both are in the skin's ink (38,34,47) so the shadow is the card's own colour, not a grey. Every base rule that reads these — L1186 .tami__card, L1411 __stat-card, L2035 __dashboard-card, L2211 __story-card/__ministry-card, L2422 __contact, L2713 __stat-grid, L3458 __fieldset — becomes raised without being restated. The two places that must NOT rise (buttons, images) are neutralised by name in §4 and §10. */ --tami-elev-rest: 0 1px 2px rgba(38, 34, 47, 0.08), 0 12px 28px rgba(38, 34, 47, 0.12); --tami-elev-raise: 0 6px 10px rgba(38, 34, 47, 0.12), 0 28px 56px rgba(38, 34, 47, 0.22); /* The card's visible thickness: a 3px border-block-end in this colour, one step darker than the hairline, is the edge of the sheet. */ --tami-card-edge: #d9d2ce; /* THE CONTROL BOUNDARY — a SECOND line colour, and the reason there are two. --tami-line above is decoration: it separates a card from the page, a row from the next row, a legend from its fields. WCAG asks nothing of it, and at 1.26:1 on white (1.15:1 on the wash) it is deliberately almost nothing to look at. A text input, a select, a textarea and a file drop zone are not decoration. Their border is the only thing that says where the control begins and ends, which makes it "visual information required to identify a user interface component" under WCAG 2.1 SC 1.4.11 — floor 3:1 against what surrounds it. The hairline missed that by a factor of two and every field in the plugin was bounded by it. So the controls read this instead. The value is the skin's OWN muted ink rather than a new neutral: the field's boundary is then the same grey as the placeholder inside it and the hint under it, which keeps the form to one grey family, and it measures 5.45:1 on white and 4.96:1 on the wash — over the 3:1 floor with enough room that an administrator's slightly lighter surface cannot drop it under. Nothing decorative reads this token; --tami-line is untouched everywhere else. §1.2 (prefers-contrast) darkens it with the rest. */ --tami-field-line: #6b6873; /* Square. Every base radius that reads a token collapses to 0; the hard-coded 10px / 50% ones are overridden by name in §10 and by the parts that own them. Pill stays for View All and badges only. */ --tami-radius-card: 0; --tami-radius-control: 0; --tami-radius-pill: 999px; /* Skin-only tokens (new names, no collision — see the header). */ --tami-skin-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Nirmala UI", "Latha", "Vazirmatn", sans-serif; --tami-skin-on-dark: #ffffff; --tami-skin-scrim: rgba(38, 34, 47, 0.55); --tami-skin-backdrop: rgba(38, 34, 47, 0.92); --tami-skin-size-display: clamp(2.25rem, 1.6rem + 3.2vw, 3.75rem); --tami-skin-size-page: clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem); --tami-skin-size-banner: clamp(1.75rem, 1.4rem + 1.5vw, 2.4rem); --tami-skin-size-section: clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem); --tami-skin-size-card: 1.0625rem; --tami-skin-size-meta: 0.8125rem; --tami-skin-size-label: 0.75rem; --tami-skin-track-label: 0.06em; --tami-skin-track-button: 0.08em; --tami-skin-track-eyebrow: 0.12em; /* The 3D card's motion (spec §1.2), as tokens so every part lifts by the identical amount: perspective(900px) keeps the 1.5° tilt subtle at card size, −6px is the rise, 1.03 is the media zoom inside its clipped plate, 220ms ease-out is the only timing the cards use. */ --tami-skin-card-lift: perspective(900px) translateY(-6px) rotateX(1.5deg); --tami-skin-card-zoom: scale(1.03); --tami-skin-card-dur: 220ms; --tami-skin-card-ease: ease-out; } /* ------------------------------------------------------------------------- * 1.1 THE SKIN'S COLOURS WHEN NOTHING IS CONFIGURED — style-query sentinels * * Every element is a query container for style queries, so a rule on the * root's direct children is evaluated against the root's own computed * custom properties. `style(--tami-color-heading: #1a1a1a)` is true * exactly when the token still holds the token sheet's "nothing has been * configured" default — the sentinel values are tami.css L27–L33, * verbatim, and must follow that file if it ever changes. The moment * StyleInheritance prints an administrator's or the theme's colour on * `.tami`, the query is false and the alias keeps reading that colour * through its chain in §1. One query per token, because an administrator * may have set only one of them. * * The aliases are re-declared on `:where(.tami > *)` — the root's * direct children, at (0,0,0) — and inherit from there, so every descendant * reads the skin's colour while any component that sets its own alias (a * hero turning --tami-ink white, the high-contrast block below) still * wins on specificity. The root's own text colour is tami.css L71 * `color: var(--tami-color-text)`, read straight from the token, so the * text sentinel also sets `color` on the children at the same zero * specificity: a component's own colour rule beats it, everything else * inherits the skin's ink-2 exactly as it inherited the base's grey. * * The accent sentinel swaps three values in ONE block — the raw accent, * the accent-as-text and the label colour that sits on the raw fill — and * they must stay in one block: each is only correct beside the other two * (the AA note in §1). `style(--tami-color-accent: #7cbb42)` is true * when the token holds the sheet's default or the emitter's * FALLBACK_ACCENT, which are the same value by design (StyleInheritance * L74 keeps them in step); it turns false the moment the plugin setting or * a region's own accent is printed, and the chains then carry that colour * with its server-computed companions. Every base rule that reads * --tami-accent-raw / -ink (the hero's hairline L744, the focus ring * L2544) and every skin rule that does (the stat count, the ministry * count, the link hover, the primary hover) inherits the swap from the * root's children without being restated. * * A browser without style queries (Chrome/Edge 111+ and Safari 18+ have * them) ignores the four blocks and keeps the base's greys and green — an * AA page in a cooler palette, never a broken one. Should the skin's * palette be wanted OVER configured colours as well (the reviewers' option * b), delete the four @container preludes and keep their bodies * unconditional. * * No §5 token is assigned here — they are only read, in the preludes. * ------------------------------------------------------------------------- */ @container style(--tami-color-heading: #1a1a1a) { :where(.tami > *) { --tami-ink: #26222f; } } @container style(--tami-color-text: #2b2b2b) { :where(.tami > *) { --tami-body-ink: #312e39; color: var(--tami-body-ink); } } @container style(--tami-color-border: #e3e6e8) { :where(.tami > *) { --tami-line: #eae4e1; } } /* Raw #e01a2b: 4.8:1 under a white label. Ink #b8121f: 5.6:1 as text on white, 5.2:1 on the wash. The three move together — see the note above. */ @container style(--tami-color-accent: #7cbb42) { :where(.tami > *) { --tami-accent-raw: #e01a2b; --tami-accent-ink: #b8121f; --tami-skin-accent-contrast: #ffffff; } } /* * Region-aware accent ink, restated for the new fallback. The base derives * accent-ink from the accent with color-mix inside this same @supports * (L429, 0,1,0), which would otherwise still resolve to the green fallback * on a browser that has color-mix but no server-computed strong value. * 82% accent + 18% black turns #e01a2b into #b81523 (6.6:1 on white) and * pulls any other region accent down the same way. */ @supports (color: color-mix(in srgb, #000 50%, #fff)) { .tami { --tami-accent-ink: var(--tami-color-accent-strong, color-mix(in srgb, var(--tami-color-accent, #e01a2b) 82%, #000000)); } } /* * PREFERS-CONTRAST, restated. The base sheet's §23 block (L3139, 0,1,0) * strengthens --tami-line, --tami-muted-ink, --tami-wash and the * two elevations for high-contrast users; the token block above sits later * in the cascade and would silently undo it. Same intent in the skin's * colours: darker hairlines and card edge, muted text promoted to body ink, * a heavier wash, and the elevations turned into 1px / 2px rings because * rings are the only depth cue that survives a forced high-contrast * setting — the 3px edge stays and carries the "card" reading on its own. */ @media (prefers-contrast: more) { .tami { --tami-line: #7a7580; /* The control boundary goes with them: #4d4855 is 8.85:1 on white and 8.05:1 on the wash, so a field asked for more contrast reads as a hard edge rather than a grey suggestion. Declared on the root only — no §1.1 sentinel touches this token, so the children inherit it and nothing has to be restated on them. */ --tami-field-line: #4d4855; --tami-card-edge: #4d4855; --tami-muted-ink: var(--tami-color-text, #312e39); --tami-wash: #ebe9e6; --tami-elev-rest: 0 0 0 1px rgba(38, 34, 47, 0.35); --tami-elev-raise: 0 0 0 2px rgba(38, 34, 47, 0.55); } /* The §1.1 sentinels declare --tami-line on the root's children, which would beat the root's darker hairline above through plain inheritance; restated on the children at the same (0,0,0), later in source, together with the promoted muted text — which reads the child's own body ink, the skin's or the administrator's. */ :where(.tami > *) { --tami-line: #7a7580; --tami-muted-ink: var(--tami-body-ink); } } /* ------------------------------------------------------------------------- * 1.5 THE 3D CARD — the ONE shared treatment (spec §1.2), class-free * * CSS has no mixin and the spec forbids new markup, so this is a documented * declaration set. Every part that owns a card-like surface (story, * ministry, link, stat, contributor and media tiles, About / facts / * Contact, leadership, fieldsets, dashboard rows, featured-sidebar items, * the empty state, the modal dialog, the queue's table wrapper) copies it * VERBATIM onto its own selector, at whatever specificity beats the base's * rule for that element. The three tokens it reads (--tami-elev-rest / * -raise, --tami-card-edge) and the four --tami-skin-card-* values * come from §1, so one edit there re-tunes every card. * * REST — on the card's own selector: * * background: var(--tami-surface); * border: 1px solid var(--tami-line); * border-block-end: 3px solid var(--tami-card-edge); * border-radius: 0; * box-shadow: var(--tami-elev-rest); * transform: none; * transition: * transform var(--tami-skin-card-dur) var(--tami-skin-card-ease), * box-shadow var(--tami-skin-card-dur) var(--tami-skin-card-ease); * * The media plate inside the card, where there is one — the plate clips, * the image moves: * * .CARD .tami__card-media { overflow: hidden; } * .CARD .tami__card-media img { * transform: none; * transition: transform var(--tami-skin-card-dur) var(--tami-skin-card-ease); * } * * HOVER / FOCUS-WITHIN — mouse and trackpad only; on a touch screen the * gate is false, the card never lifts and the base's :active press stays: * * @media (hover: hover) and (pointer: fine) { * .CARD:hover, * .CARD:focus-within { * box-shadow: var(--tami-elev-raise); * transform: var(--tami-skin-card-lift); * } * .CARD:hover .tami__card-media img, * .CARD:focus-within .tami__card-media img { * transform: var(--tami-skin-card-zoom); * } * } * * REDUCED MOTION — shadow change only, nothing moves: * * @media (prefers-reduced-motion: reduce) { * .CARD, * .CARD .tami__card-media img { transition: none; } * .CARD:hover, * .CARD:focus-within { transform: none; } * .CARD:hover .tami__card-media img, * .CARD:focus-within .tami__card-media img { transform: none; } * } * * Two cautions for the copier. (1) Where the base already lifts the * element on an UNGATED :hover (L1198 __card, L1476 __stat-card, L2048 * __dashboard-card, L2226 __story-card) restate `transform: none` on that * same hover OUTSIDE the gate, or a phone will still get the base's * translateY(-4px) after a tap. (2) The lift transform makes the card a * containing block; the base §25 stretched link is `position: absolute; * inset: 0` relative to the card, which already has `position: relative`, * so it keeps covering the whole face — do not add `position` to the * card's children. * * The wrapper of the review-queue table below (§8) is this set applied * once, in this file, and doubles as the worked example. * ------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------- * 2. TYPOGRAPHY * * The demo is set in Inter. We do not fetch it (spec §0: no external * resource of any kind), so the stack is a FALLBACK: the token sheet sets * --tami-font-body to `inherit`, which on the root computes to the * guaranteed-invalid value, so var()'s fallback is what renders — unless an * administrator's or Divi's font arrives on the token, in which case that * wins, and the per-script :lang() stacks in tami.css (0,2,0) win over * this (0,1,0) rule regardless. Body size and leading (1rem / 1.7) are * already the token sheet's --tami-size-body / --tami-line-height * defaults and the base's `max(1rem, …)` phone floor (L536) — nothing to * restate. * * Overrides `.tami { font-family: var(--tami-font-body) }` in * tami.css (0,1,0). * ------------------------------------------------------------------------- */ .tami { font-family: var(--tami-font-body, var(--tami-skin-font)); } /* * Headings: the demo's weight is 600 everywhere except the hero display * line, which 20-heroes.css sets to 700 on its own selector. The heading * family falls back through body to the stack above. Tracking −0.01em is * the page-header / banner value of the spec's scale; the section title * resets it to 0 below, and it also stops the administrator's body * letter-spacing (inherited from the root) from spreading a headline. * * Overrides the §3 heading group (L546, 0,1,0) on source order. */ .tami__hero-title, .tami__page-title, .tami__section-title, .tami__card-title, .tami__leader-name { font-family: var(--tami-font-heading, var(--tami-font-body, var(--tami-skin-font))); font-weight: var(--tami-weight-heading, 600); letter-spacing: -0.01em; } /* * Every other heading element inside the plugin (group titles on the * dashboard and queue, the gallery heading, headings inside prose) takes * the same 600 so one page never mixes two heading weights. (0,1,1) — sits * above the (0,1,0) component rules that restate `var(--tami-weight- * heading, 700)` (L2014, L2259) and gives them the skin's weight instead. */ .tami h1, .tami h2, .tami h3, .tami h4 { font-weight: var(--tami-weight-heading, 600); } /* * The section title, in the section scale, with the accent underline gone. * * The base reserves 0.42em of bottom padding for its ::after underline; with * the underline removed the padding would be dead space under every head, * so it goes too. The About/Contact rule at L5296 (0,3,0) — the client's * "15px between heading and text" — is MORE specific than this and keeps * both its 15px margin and its own padding, so the measured box-to-text gap * there stays exactly what it was. * * Overrides §30 L5291 `.tami .tami__section-title` (0,2,0) and §6 * L1055 (0,1,0). --tami-size-h2 (the administrator's h2) still comes * first, as it does in the base. */ .tami .tami__section-title { font-size: var(--tami-size-h2, var(--tami-skin-size-section)); letter-spacing: 0; line-height: 1.2; padding-block-end: 0; } /* Overrides §6 `.tami__section-title::after` (L1069, 0,1,1) — the demo's heads carry no accent rule. (0,2,1). The hover scaleX rules on it become moot. */ .tami .tami__section-title::after { display: none; } /* ------------------------------------------------------------------------- * 3. LINKS IN PROSE * * ink-2, underlined at rest (WCAG 1.4.1 — colour alone must not carry the * link), accent-ink on hover. Overrides §3 `.tami__prose a` (L656, * 0,1,1); the base's thicker underline on hover (L663) is kept. * ------------------------------------------------------------------------- */ .tami__prose a, .tami__notice a, .tami__hint a, .tami__empty-message a { color: var(--tami-body-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; transition: color var(--tami-dur) var(--tami-ease); } .tami__prose a:hover, .tami__prose a:focus-visible, .tami__notice a:hover, .tami__notice a:focus-visible, .tami__hint a:hover, .tami__hint a:focus-visible, .tami__empty-message a:hover, .tami__empty-message a:focus-visible { color: var(--tami-accent-ink); } /* ------------------------------------------------------------------------- * 4. BUTTONS * * One box for every variant (spec §1): square, 44px minimum, 1.75em inline * padding, 0.8125rem UPPERCASE tracked 0.08em, weight 600, and a transition * on background / border / colour only — no lift, no shadow, no brightness * filter. A button is a control, not a card: it stays flat while the cards * around it rise, which is why `box-shadow: none` is stated on both the * rest and the hover — the base's hover (L1844) and its reduced-motion * block (L2965) both read --tami-elev-rest, which §1 has just made real. * * 4.1 Primary. Ink fill, white label; hover and focus swap to the accent * fill. The hover label reads --tami-skin-accent-contrast (§1): the * server-computed colour that is legible on whatever accent is * configured (near-black on a light region green), and white once * §1.1 has swapped the fill to the skin's red — so a region accent * cannot push the hover state under AA, and the skin's own hover is * white on #e01a2b (4.8:1), never the green's #1a1a1a on red (4.0:1). * * Overrides §8 `.tami__button` (L1822, 0,1,0) and its hover (L1842, * 0,2,0), and §4 `.tami__hero-cta` (L868, 0,1,0) and its hover (L929) * — the hero CTA carries both classes and the base's pill, green fill, * dark label and translateY lift all had to go. The hero CTA's * margin-block-start is left to 20-heroes.css. The empty-state CTA and the * filters' submit carry .tami__button in the markup, so the hover rule * reaches them through that class; they are listed for the reader. * ------------------------------------------------------------------------- */ .tami__button, .tami__hero-cta, .tami__empty-cta, .tami__filters-submit { align-items: center; background: var(--tami-ink); border: 1px solid var(--tami-ink); border-radius: 0; box-shadow: none; color: var(--tami-skin-on-dark); cursor: pointer; display: inline-flex; font-family: inherit; font-size: 0.8125rem; font-weight: 600; gap: 0.5em; justify-content: center; letter-spacing: var(--tami-skin-track-button); line-height: 1.2; min-block-size: 44px; padding-block: 0.75em; padding-inline: 1.75em; text-decoration: none; text-transform: uppercase; transition: background-color var(--tami-dur) var(--tami-ease), border-color var(--tami-dur) var(--tami-ease), color var(--tami-dur) var(--tami-ease); } .tami__button:hover, .tami__button:focus-visible, .tami__hero-cta:hover, .tami__hero-cta:focus-visible, .tami__empty-cta:hover, .tami__empty-cta:focus-visible, .tami__filters-submit:hover, .tami__filters-submit:focus-visible { background: var(--tami-accent-raw); border-color: var(--tami-accent-raw); box-shadow: none; color: var(--tami-skin-accent-contrast); filter: none; text-decoration: none; transform: none; } /* * 4.2 Secondary — the "Edit", "Save draft", "Fetch file" and review-queue * buttons: transparent, 1px ink border, ink label; hover fills with ink. * Overrides §8 `.tami__button--secondary` (L1853, 0,1,0) and its hover * (L1859, 0,2,0). Placed after 4.1 so the same-specificity hover wins. */ .tami__button--secondary { background: transparent; border-color: var(--tami-ink); color: var(--tami-ink); } .tami__button--secondary:hover, .tami__button--secondary:focus-visible { background: var(--tami-ink); border-color: var(--tami-ink); color: var(--tami-skin-on-dark); filter: none; } /* * 4.3 On-photo — the hero CTA on every COVER hero. The base paints cover * heroes dark whether or not a photograph arrived (§4 sets the title white * unconditionally; only the banner band is light), so an ink fill would * sink into the scrim: transparent with a 1px white border and a white * label instead, filling white with an ink label on hover. The banner band * (ministry / story singles) is excluded and keeps the primary button. * (0,3,0) / (0,4,0) — nothing in the base names this combination. */ .tami__hero:not(.tami__hero--banner) .tami__hero-cta { background: transparent; border-color: var(--tami-skin-on-dark); color: var(--tami-skin-on-dark); } .tami__hero:not(.tami__hero--banner) .tami__hero-cta:hover, .tami__hero:not(.tami__hero--banner) .tami__hero-cta:focus-visible { background: var(--tami-skin-on-dark); border-color: var(--tami-skin-on-dark); color: var(--tami-ink); } /* * 4.4 "View All" — the demo's one rounded element: a small outline pill, * 0.75rem uppercase, ink label, filling with ink on hover. The base's 44px * minimum is kept where fingers are involved and relaxed to 32px on a * mouse-driven screen, which is the base sheet's own §21 idiom for the * same trade (L4424). The arrow keeps the base's 0.35em start margin. * `box-shadow: none` on the hover because the base's reduced-motion block * (L2965, 0,2,0) paints --tami-elev-rest on `.tami__view-all:hover`. * * THE OUTLINE IS THE BUTTON. This pill has no fill at rest, so its border * is not decoration around a button — it IS the button, the only thing * that separates "VIEW ALL →" from the section title beside it. That makes * it a user-interface component boundary under WCAG 1.4.11, and the * decorative hairline it used to wear measured 1.26:1: an outline pill * whose outline could not be seen. It reads --tami-field-line (§1, the * control boundary, 5.45:1 on white) for that reason. The HOVER state is * unchanged — it fills with ink and the border goes ink with it. * * Overrides §7 `.tami__view-all` (L1600, 0,1,0) and its hover (L1621, * 0,2,0). */ .tami__view-all { background: transparent; border: 1px solid var(--tami-field-line); border-radius: var(--tami-radius-pill); box-shadow: none; color: var(--tami-ink); font-size: 0.75rem; font-weight: 600; gap: 0.45em; letter-spacing: var(--tami-skin-track-label); line-height: 1; padding-block: 0.5em; padding-inline: 1.1em; text-transform: uppercase; transition: background-color var(--tami-dur) var(--tami-ease), border-color var(--tami-dur) var(--tami-ease), color var(--tami-dur) var(--tami-ease); } .tami__view-all:hover, .tami__view-all:focus-visible { background: var(--tami-ink); border-color: var(--tami-ink); box-shadow: none; color: var(--tami-skin-on-dark); transform: none; } @media (hover: hover) and (pointer: fine) { .tami__view-all { min-block-size: 32px; } } /* * 4.5 Text link with arrow — "Read Story →", "View Profile →" and the * story's "← Back" link: ink, 0.8125rem, weight 600, underlined on hover; * the arrow travels 3px on hover, transform only. (The three legacy * classes from the base's L1867 list are carried so a child-theme override * that still uses them matches the skin.) * * Overrides §7 `.tami__card-cta` (L1360, 0,1,0) and hover (L1376), and * §8 L1867 / L1877 (0,1,0 / 0,2,0). */ .tami__card-cta, .tami__single-back, .tami__section-more, .tami__story-read, .tami__ministry-link { color: var(--tami-ink); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; transition: color var(--tami-dur) var(--tami-ease); } .tami__card-cta:hover, .tami__card-cta:focus-visible, .tami__single-back:hover, .tami__single-back:focus-visible, .tami__section-more:hover, .tami__story-read:hover, .tami__ministry-link:hover { color: var(--tami-ink); text-decoration: underline; text-underline-offset: 0.2em; } /* * The arrow. RIGHT-TO-LEFT: tami.css mirrors every directional glyph * with `scaleX(-1)` (0,2,0); a bare translateX on hover would REPLACE that * transform and un-mirror the arrow for exactly as long as the pointer sits * on it — the base's own hover rules (L1389/L1393, L1633/L1637) do that. * So every hover transform below is stated twice: LTR with the travel * alone, RTL with the travel AND the mirror, at a specificity that beats * the base's :dir(rtl) rules (L1393 is 0,5,0 and is restated verbatim). */ .tami__card-cta .tami__icon--directional, .tami__single-back .tami__icon--directional, .tami__view-all .tami__icon--directional { display: inline-block; transition: transform var(--tami-dur) var(--tami-ease); } .tami__card-cta:hover .tami__icon--directional, .tami__card-cta:focus-visible .tami__icon--directional, .tami__card:hover .tami__card-cta .tami__icon--directional, .tami__view-all:hover .tami__icon--directional, .tami__view-all:focus-visible .tami__icon--directional { transform: translateX(3px); } /* The back link's arrow points the other way, so it travels the other way. */ .tami__single-back:hover .tami__icon--directional, .tami__single-back:focus-visible .tami__icon--directional { transform: translateX(-3px); } .tami:dir(rtl) .tami__card-cta:hover .tami__icon--directional, .tami:dir(rtl) .tami__card-cta:focus-visible .tami__icon--directional, .tami:dir(rtl) .tami__card:hover .tami__card-cta .tami__icon--directional, .tami:dir(rtl) .tami__view-all:hover .tami__icon--directional, .tami:dir(rtl) .tami__view-all:focus-visible .tami__icon--directional { transform: translateX(-3px) scaleX(-1); } .tami:dir(rtl) .tami__single-back:hover .tami__icon--directional, .tami:dir(rtl) .tami__single-back:focus-visible .tami__icon--directional { transform: translateX(3px) scaleX(-1); } /* ------------------------------------------------------------------------- * 5. BREADCRUMBS (spec §3.6) * * 0.8125rem, "/" separators with 0.5em either side, links inheriting the * trail's colour, the current crumb at 600. On the dark cover heroes the * trail is white at 0.85; on the light banner band the base's §30 rules * (L5176/L5183, 0,3,0) already paint it muted with the current crumb in * ink — they read the tokens, so they pick up the skin's greys untouched. * The administrator's --tami-color-breadcrumb(-current) tokens keep * their place as the base's §20.3 rules (L2827/L2832) are not restated. * The region hero's centred 0.75rem uppercase variant is 20-heroes.css's. * * Overrides §4 `.tami__breadcrumbs` (L940), `-item` (L950), `-sep` * (L968, and L2837), `-current` (L974) — all 0,1,0. * ------------------------------------------------------------------------- */ .tami__breadcrumbs { color: rgba(255, 255, 255, 0.85); font-size: 0.8125rem; font-weight: 400; gap: 0.15rem 0.5em; letter-spacing: 0.02em; line-height: 1.4; } /* The trail's
    : no indent, the same wrap-and-gap as its parent. The base sheet has no rule for it, so this is the theme's list defaults being reset rather than a base rule being overridden. THE MARKER IS SUPPRESSED ON THE ITEM, NOT ON THE LIST. `list-style: none` used to sit on the
      here and never took effect: Divi ships `#left-area ol { list-style: decimal }`, an ID selector at (1,0,1) that no number of classes can outrank, so the computed value on this list is and stays "decimal inside" (measured on the region page). The only stylesheet answer would be !important, which the house rules keep for real theme collisions — and there is nothing to collide with, because list-style-type is INHERITED and a declaration on the item beats an inherited value outright. So the suppression moved one level down, to the element that would actually draw a marker. It is belt and braces today (the item is a flex container, and a flex container is not a list-item box, so no marker is generated whatever the type says) and it is the thing that keeps a "1. 2. 3." out of the trail if that display ever changes. */ .tami__breadcrumbs-list { display: flex; flex-wrap: wrap; gap: 0.15rem 0.5em; margin-block: 0; margin-inline: 0; padding-inline-start: 0; } .tami__breadcrumb-item { align-items: center; color: inherit; display: inline-flex; gap: 0.5em; list-style: none; margin-block: 0; } .tami__breadcrumb-item:hover, .tami__breadcrumb-item:focus-visible { color: inherit; } .tami__breadcrumb-sep { opacity: 0.6; } /* The current crumb sets its WEIGHT here and nothing else. It used to carry `color: inherit` as well, and that declaration never applied anywhere. The base's rule is `.tami__breadcrumb-current, .tami__breadcrumbs [aria-current="page"]`, and breadcrumbs.php prints the crumb as `` — so the SECOND member matches it at (0,2,0) and outranks this (0,1,0) selector on every hero. On the banner band a third rule, base §30's `.tami .tami__breadcrumb-current` (0,3,0), wins over both and paints the crumb ink, which is right for a light band. Removing it changes nothing on the page: the value that was winning is `var(--tami-color-breadcrumb-current, var(--tami-color-breadcrumb, currentColor))`, and with neither token set — they are administrator settings, empty on this site — it resolves to `currentColor`, which for the `color` property IS `inherit`. Measured on both cover heroes after the deletion: rgb(255,255,255) on the region trail, and the country trail's own rgba(255,255,255,0.85) on that one. An administrator who sets a breadcrumb colour now gets it, which is what those tokens are for and what the dead declaration would have blocked had it ever won. */ .tami__breadcrumb-current { font-weight: 600; } /* ------------------------------------------------------------------------- * 6. SECTION HEADS (spec §2.1) * * Title at the start, View All pill at the end, both vertically centred * now that the title has no underline padding to align to, 1.5rem below. * No hairline under the head — the demo has none. * * Overrides §6 `.tami__section-head` (L1046, 0,1,0) and * `.tami__section-actions` (L1106, 0,1,0), whose 0.42em padding only * existed to line up with the title's underline. * ------------------------------------------------------------------------- */ .tami__section-head { align-items: center; gap: 0.75rem var(--tami-space-col, 1.5rem); margin-block-end: 1.5rem; } .tami__section-actions { padding-block-end: 0; } /* ------------------------------------------------------------------------- * 7. PAGINATION (spec §2.2) * * Square 44×44 boxes with a hairline, ink digits; the current page is an * ink fill with a white label; hover is the wash. Centred by the base. * Both markup generations are covered: the template's __page-link / * __page-current / __page-gap and the older __pagination-link family the * base still styles. * * Overrides §7 L1559 (0,1,0 pair), L1576, L1585 (0,2,0), L1593, and * L2468–L2497 (0,1,0 / 0,2,0). The radius token is already 0, so only the * colours, type and the link's own padding change. * ------------------------------------------------------------------------- */ .tami__page-link, .tami__page-current, .tami__pagination-link { border: 1px solid var(--tami-line); border-radius: 0; font-size: 0.8125rem; font-weight: 600; min-block-size: 44px; min-inline-size: 44px; padding-inline: 0.75em; } .tami__page-link, .tami__pagination-link { background: var(--tami-surface); color: var(--tami-ink); transition: background-color var(--tami-dur) var(--tami-ease), border-color var(--tami-dur) var(--tami-ease), color var(--tami-dur) var(--tami-ease); } .tami__page-link:hover, .tami__page-link:focus-visible, .tami__pagination-link:hover, .tami__pagination-link:focus-visible { background: var(--tami-wash); border-color: var(--tami-line); color: var(--tami-ink); } .tami__page-current, .tami__pagination-link--current { background: var(--tami-ink); border-color: var(--tami-ink); color: var(--tami-skin-on-dark); font-weight: 600; } /* The "…" marker. The template's __page-gap had no base rule at all (only the legacy __pagination-gap, L2497); both get the same quiet box. */ .tami__page-gap, .tami__pagination-gap { align-items: center; color: var(--tami-muted-ink); display: inline-flex; font-size: 0.8125rem; min-block-size: 44px; padding-inline: 0.3em; } /* ------------------------------------------------------------------------- * 8. TABLES — the review queue (spec §2.7) * * 8.1 The wrapper is a 3D card — the §1.5 declaration set applied here, * once, exactly as written. It is the queue's scroll container * (tabindex="0", overflow-x: auto — base L237), so :focus-within also * raises it when the keyboard lands on the region or on any control in * a row. The lift is gated on a fine pointer like every card; the base * has no hover on this element, so there is nothing to neutralise * outside the gate. The 3px edge is the card's thickness; the table's * own hairlines stay inside it. * * Overrides §0 `.tami__table-wrap` (L237, 0,1,0) — only additions; its * scrolling declarations are untouched. * ------------------------------------------------------------------------- */ .tami__table-wrap { background: var(--tami-surface); border: 1px solid var(--tami-line); border-block-end: 3px solid var(--tami-card-edge); border-radius: 0; box-shadow: var(--tami-elev-rest); transform: none; transition: transform var(--tami-skin-card-dur) var(--tami-skin-card-ease), box-shadow var(--tami-skin-card-dur) var(--tami-skin-card-ease); } @media (hover: hover) and (pointer: fine) { .tami__table-wrap:hover, .tami__table-wrap:focus-within { box-shadow: var(--tami-elev-raise); transform: var(--tami-skin-card-lift); } } /* The space between one group's card and the next group's title — room for the lower shadow to breathe — is 50-forms.css's (`.tami .tami__group + .tami__group`, spec §2.7); not restated here. */ /* * 8.2 The table inside. Header cells 0.6875rem uppercase muted over a 1px * INK rule; body rows separated by hairlines with the wash on every even * row; the row's title link at 1rem / 600 in ink rather than the base's * h3-sized 700. These are the GENERAL table rules; 50-forms.css restates * the queue's table under `.tami.tami--review-queue` (0,3,2) with * the same values, so both readings agree. * * The cells' 0.9375rem is a desktop size. A rem on a descendant bypasses * the base's phone floor — L536 `max(1rem, …)` floors the ROOT only — so * on a phone the cells inherit the root's 16px (house rule 4) and the * smaller size arrives with the 48rem step of the base's scale. * * Overrides §0 `.tami__table` (L246, 0,1,0), `th, td` (L260, 0,1,1), * `thead th` (L268, 0,1,2) and, at (0,2,0), `.tami__story-title` * (L2259, 0,1,0) inside the table only. The wrapper's horizontal scroll * and the 38rem minimum width are the base's and stay. */ .tami__table { border-collapse: collapse; line-height: 1.5; } @media (min-width: 48rem) { .tami__table { font-size: 0.9375rem; } } .tami__table th, .tami__table td { border-block-end: 1px solid var(--tami-line); color: var(--tami-body-ink); padding-block: 0.85rem; padding-inline: 0.75rem; vertical-align: top; } .tami__table thead th { border-block-end: 1px solid var(--tami-ink); color: var(--tami-muted-ink); font-size: 0.6875rem; font-weight: 600; letter-spacing: var(--tami-skin-track-label); padding-block: 0.6rem; text-transform: uppercase; white-space: nowrap; } /* Zebra on the cells rather than the row so it paints under border-collapse in every engine. (0,2,2) — nothing in the base names tbody rows. The last row's hairline would double the card's edge, so it is dropped. */ .tami__table tbody tr:nth-child(even) > th, .tami__table tbody tr:nth-child(even) > td { background: var(--tami-wash); } .tami__table tbody tr:last-child > th, .tami__table tbody tr:last-child > td { border-block-end: 0; } .tami__table tbody th { font-weight: 600; } .tami__table .tami__story-title { color: var(--tami-ink); font-size: 1rem; font-weight: 600; line-height: 1.35; text-decoration: none; } .tami__table .tami__story-title:hover, .tami__table .tami__story-title:focus-visible { color: var(--tami-accent-ink); text-decoration: underline; text-underline-offset: 0.16em; } /* ------------------------------------------------------------------------- * 9. NOTICES (spec §3.7) * * The notice is a square box on the wash with a 1px hairline and ink-2 * text — the accent bar and the 10px radius are gone. The recovery notice * keeps its amber edge as a 3px start border, restated because the box * border below would otherwise reset the base's colour-only rule. * * WHO OWNS THE STATUS, AUTOSAVE AND HINT LINES: part 50, not this part. * They were styled TWICE at identical specificity — here and again in * 50-forms §2 — with the same colour and size but line-height stated at * 1.5 here and 1.6 there, so the rendered leading was decided by source * order rather than by a decision. The three are form furniture (the * status line is the form's aria-live slot, the autosave line reports the * draft timer, the hint is what sits under a field), 50-forms lists them * in its own scope note, and the phone type step they now take belongs * beside the label's. So this part's copies are deleted and part 50 §2 is * the single owner, at the 1.6 leading that was winning anyway — the * rendering does not move. `.tami__status--error` went with them for * the same reason. * * Overrides §26 `.tami .tami__notice` (L3779, 0,2,0), `--recovery` * (L3788), and tami.css's `.tami__notice` (0,1,0). * ------------------------------------------------------------------------- */ .tami .tami__notice { background: var(--tami-wash); border: 1px solid var(--tami-line); border-radius: 0; color: var(--tami-body-ink); font-size: 1rem; line-height: 1.6; margin: 0; padding-block: 0.9rem; padding-inline: 1.1rem; } .tami .tami__notice--recovery { border-inline-start: 3px solid #b26200; } /* ------------------------------------------------------------------------- * 10. IMAGES — square, no shadow of their own * * §20.2 of the base sheet (L2797–L2815) put a 10px radius and the resting * shadow on every image, card media plate and logo — an earlier client * request that this template supersedes (spec §1). With §1's shadows now * real this matters twice over: the CARD is the raised object, and a * second shadow under the picture inside it would read as a card within a * card. Restated with the SAME selector list so the (0,3,1) `.tami * img:not(…)` member is met on its own terms and every image, whatever its * wrapper, is square and flat. The token-driven radii (gallery, featured * thumbs, prose images) are already 0 through §1. The §30.5 lightbox rules * are deliberately left alone — the spec keeps them for 50-forms.css. * * Overrides L2797 (0,3,1 / 0,1,1 / 0,1,0), L2808 `.tami__card-media` * (0,1,0), L2815 `.tami__logo-image` (0,1,0), and §3 `.tami__prose * img` (L681, 0,1,1). * ------------------------------------------------------------------------- */ .tami img:not(.tami__logo-image):not(.tami__leader-image), .tami__card-media img, .tami__card-image, .tami__single img, .tami__prose img, .tami__logo-image { border-radius: 0; box-shadow: none; } .tami__card-media { border-radius: 0; } /* ------------------------------------------------------------------------- * 11. FOCUS RING (spec §1) * * 2px solid, offset 2px. Only the width and offset are restated: the base * already draws the ring in accent-ink on light surfaces (§16, L2544, * 0,2,1) and in white inside a dark hero (L2560, same specificity, same * longhands untouched here), and accent-ink is the server's AA-derived * value — or §1.1's #b8121f (5.6:1) when nothing is configured — so the * colour rule "never the raw accent" from the base header holds without * another word. The banner band's own ring (L5185/L5194, * 0,3,1) is matched so it takes the same 2px. * ------------------------------------------------------------------------- */ .tami a:focus-visible, .tami button:focus-visible, .tami input:focus-visible, .tami select:focus-visible, .tami textarea:focus-visible, .tami [tabindex]:focus-visible { outline-offset: 2px; outline-width: 2px; } .tami .tami__hero--banner a:focus-visible, .tami .tami__hero--banner button:focus-visible, .tami .tami__hero--banner [tabindex]:focus-visible { outline-offset: 2px; outline-width: 2px; } /* The base's §23 high-contrast ring (L3165, 4px) sits earlier in the cascade than the 2px above and would lose; a thicker ring for users who asked for more contrast is restored here. */ @media (prefers-contrast: more) { .tami a:focus-visible, .tami button:focus-visible, .tami input:focus-visible, .tami select:focus-visible, .tami textarea:focus-visible, .tami [tabindex]:focus-visible, .tami .tami__hero--banner a:focus-visible, .tami .tami__hero--banner button:focus-visible, .tami .tami__hero--banner [tabindex]:focus-visible { outline-width: 3px; } } /* ------------------------------------------------------------------------- * 12. REDUCED MOTION AND TOUCH * * The motion this part adds is the 3px arrow travel in §4.5, the colour * transitions, and the §8.1 card lift on the table wrapper. tami.css * already clamps every transition to 0.01ms for reduced-motion users; the * transforms are what remain, and they are neutralised here — to `none` in * LTR, to the bare mirror in RTL (a `none` there would un-mirror the * arrow, which is the same trap §4.5 describes). The base's own * neutralisers (L2598, L2973) were written before the RTL mirror existed * and say `none` in both directions, so the RTL selectors below sit above * them. The wrapper keeps its shadow change (that is the §1.2 rule for * reduced motion) and loses the lift. * * The (hover: none) block does the same for touch screens, where :hover * sticks after a tap and a permanently nudged arrow would look broken. * ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .tami__button, .tami__hero-cta, .tami__view-all, .tami__card-cta, .tami__single-back, .tami__page-link, .tami__pagination-link, .tami__table-wrap, .tami__card-cta .tami__icon--directional, .tami__single-back .tami__icon--directional, .tami__view-all .tami__icon--directional { transition: none; } .tami__table-wrap:hover, .tami__table-wrap:focus-within { transform: none; } .tami__card-cta:hover .tami__icon--directional, .tami__card-cta:focus-visible .tami__icon--directional, .tami__card:hover .tami__card-cta .tami__icon--directional, .tami__single-back:hover .tami__icon--directional, .tami__single-back:focus-visible .tami__icon--directional, .tami__view-all:hover .tami__icon--directional, .tami__view-all:focus-visible .tami__icon--directional { transform: none; } .tami:dir(rtl) .tami__card-cta:hover .tami__icon--directional, .tami:dir(rtl) .tami__card-cta:focus-visible .tami__icon--directional, .tami:dir(rtl) .tami__card:hover .tami__card-cta .tami__icon--directional, .tami:dir(rtl) .tami__single-back:hover .tami__icon--directional, .tami:dir(rtl) .tami__single-back:focus-visible .tami__icon--directional, .tami:dir(rtl) .tami__view-all:hover .tami__icon--directional, .tami:dir(rtl) .tami__view-all:focus-visible .tami__icon--directional { transform: scaleX(-1); } } @media (hover: none) { .tami__card-cta:hover .tami__icon--directional, .tami__card:hover .tami__card-cta .tami__icon--directional, .tami__single-back:hover .tami__icon--directional, .tami__view-all:hover .tami__icon--directional { transform: none; } .tami:dir(rtl) .tami__card-cta:hover .tami__icon--directional, .tami:dir(rtl) .tami__card:hover .tami__card-cta .tami__icon--directional, .tami:dir(rtl) .tami__single-back:hover .tami__icon--directional, .tami:dir(rtl) .tami__view-all:hover .tami__icon--directional { transform: scaleX(-1); } } /* ====================================================================== * PART 20-heroes * ====================================================================== */ /* ========================================================================= * The Africa Missions Initiative — SKIN PART 20: HEROES * ========================================================================= * * Package S2 of the "Clothes Store" skin (DESIGN-SPEC §1.1, §2.1, §2.3, the * band of §2.4/§2.5, the page titles of §2.6/§2.7 and the alternating wash * of §2.1). Loaded after tami-frontend.css and after 10-foundation.css; * every rule here is an override of a base rule and says which, with the * bracketed specificities, so the cascade can be checked without a browser. * * Scope, and nothing else: * 1. The full-viewport-width breakout of every .tami__hero, the * body-class gate that closes the scrollbar it would otherwise open, * the two rules that let a hero touch the site header, and the print * undo. * 2. What every COVER hero shares: the ink field, the flat scrim with its * bottom vignette, the CTA wrapper's spacing. * 3. The region hero — the demo's home hero. * 4. The country / city hero — the demo's inner-page header. * 5. The banner band of the ministry and story singles (band only: the * media box keeps every base §30.1 size and object-fit rule). * 6. .tami__page-title on the hero-less pages. * 7. The alternating wash on every second section. * 8. prefers-contrast and print restatements. * * Buttons (including the hero CTA's look), breadcrumb type and section * heads are 10-foundation.css; cards are 30-cards.css; everything under the * band on the singles is 40-singles.css. * * House rules honoured throughout: every selector carries .tami (the * body gate in §1 carries our own body class, exactly like the title * suppression in base §17); logical properties only; no keyframes, imports, * font-faces or external url(); min-width queries on the base scale, plus * the base's own short-landscape SHAPE query in §3/§4 so that behaviour is * not lost; no !important. * * TOKENS READ (all defined by 10-foundation.css on .tami, with the base * sheet's names underneath them): --tami-ink, --tami-body-ink, * --tami-muted-ink, --tami-surface, --tami-line, --tami-wash, * --tami-skin-on-dark, --tami-skin-scrim, --tami-skin-size-display * / -page / -banner, --tami-skin-track-label / -eyebrow. Each carries a * literal fallback so this part still renders if it is ever loaded alone. * ========================================================================= */ /* ------------------------------------------------------------------------- * 1. THE HERO IS THE PAGE HEADER, FULL VIEWPORT WIDTH (spec §1.1) * * The client's instruction: the featured image is the page's full-width * header, edge to edge, on every hero — region, country, city, ministry, * story. The base sheet's §4 (L708, 0,1,0) leaves the hero at the width of * whatever theme column it was dropped into, and its long comment explains * why the classic `calc(50% - 50vw)` breakout was tried and removed: 100vw * includes the vertical scrollbar, so the hero overhung the page by the * scrollbar's width and every plugin page scrolled sideways. The skin does * what the base could not: it owns a body-class gate (1.2) that clips that * overhang, exactly as the base's own §17 gates the theme title suppression * on `body.tami-page`. That gate and the header-gap gate in 1.3 are the * only body rules in the skin, and 1.3 says why it exists. * * 1.1 The breakout. Three declarations from the spec plus one of our own: * * inline-size / max-inline-size: 100vw — the hero is as wide as the * viewport, whatever column it sits in. * margin-inline-start: calc(50% - 50vw) — the 50% is half the COLUMN * (percent margins resolve against the containing block), the 50vw is * half the viewport, so the start edge lands on the viewport's edge. * One logical side is enough: with a fixed inline-size the end margin * is over-constrained and ignored, and in RTL the same declaration * pulls the right edge to the right viewport edge. Direction-neutral. * padding-inline: calc(50vw - 50%) — the addition. Percent PADDING also * resolves against the containing block, so this is exactly the * distance from the viewport edge to the column edge, and it puts the * hero's CONTENT box back on the column. That is what makes the spec's * promise true — "the hero's inner keeps the content column width and * gutters, so text still aligns with the sections below": the inner * (.tami__hero-inner, base §4 L778) is 80% of its containing block, * and without this padding that block would be the viewport, not the * column, and the band text on a ministry page would sit 100px to the * start of the About card under it. The background, the scrim * (`inset: 0`) and the accent hairline (`inset-inline: 0`) all paint * across the padding box, so they still run edge to edge. Should the * column ever be wider than the viewport the calc goes negative and CSS * clamps padding to 0 — never invalid. * box-sizing: border-box — so the padding lives INSIDE the 100vw, not on * top of it. Divi's reset is not relied on. * * (0,2,0) over §4's (0,1,0). No base rule sets the hero's inline-size or * inline margins, so nothing is fought; §21.4 and §24 restate other * properties only. * ------------------------------------------------------------------------- */ .tami .tami__hero { box-sizing: border-box; inline-size: 100vw; margin-inline-start: calc(50% - 50vw); max-inline-size: 100vw; padding-inline: calc(50vw - 50%); } /* * Banner mode: the media box spans the viewport too. In banner mode the * picture is a child of the hero (base §30.1 L5084, `.tami * .tami__hero-media { inline-size: 100% }`, 0,2,0), and 100% of the * content box is now the column, not the viewport. The same breakout, * applied one level down: its containing block is the hero's content box, * which 1.1 has centred on the viewport, so `50% - 50vw` lands its start * edge on the hero's own start edge. Only the WIDTH of the box is touched: * the picture inside keeps `inline-size: 100%`, `object-fit: contain`, the * min(80svh, 900px) ceiling and the blurred wash from §30.1 — it is still * whole, still uncropped, just as wide as the page (spec §0, §1.1). * (0,3,0) over (0,2,0). */ .tami .tami__hero--banner .tami__hero-media { inline-size: 100vw; margin-inline-start: calc(50% - 50vw); max-inline-size: 100vw; } /* * 1.2 The gate. 100vw counts the vertical scrollbar, so on any desktop with * a classic scrollbar the hero overhangs the layout viewport by half the * bar's width on each side. Clipping the BODY's inline overflow removes the * horizontal scrollbar that overhang would create — and nothing else: the * clip propagates to the viewport, where `clip` behaves as `hidden` on the * inline axis while the block axis keeps scrolling as it always did. Gated * on our own body class (Frontend adds `tami-page` only on pages this * plugin renders — base §17 explains the class), so no other page of the * site is touched. `clip` rather than `hidden` because `hidden` on the body * would also make the body a scroll container for its descendants in * browsers that do not propagate it; the @supports fallback accepts that * on the few engines without `clip`. * * Deliberately out of .tami scope, documented as such, and the ONE body * gate spec §1.1 sanctions. Everything this skin needs from outside its own * scope is written here, under that gate, and nowhere else in the file — * two declarations, one place to read and one place to strike. * * WHAT ACTUALLY HAPPENS ON A THEMED PAGE, measured rather than argued: this * declaration never wins there. Divi prints `style="overflow-x: hidden"` on * the element itself, and an inline declaration outranks every * stylesheet rule short of !important, so the computed value on * /call-to-africa/ is `hidden` — Divi's, not ours. The horizontal * scrollbar the 100vw hero would otherwise create is therefore already * suppressed, by the theme, before this rule is consulted; the reasoning * above is why `clip` would be the better of the two values, not a * description of what the page is doing. The rule is kept because it is * the only thing standing if a page renders this plugin WITHOUT Divi's * body attribute (an unthemed template, a different theme, the harness), * and it is not promoted with !important: overriding a host theme's own * body overflow to buy a value the page is already getting is not what * the "countering" allowance is for. */ body.tami-page { overflow-x: clip; } @supports not (overflow-x: clip) { body.tami-page { overflow-x: hidden; } } /* * 1.2a The gate, on the ROOT — because the body rule above does not hold. * * Measured on Divi 4.x + WordPress 7.1, not argued: the comment above expects * Divi's inline `overflow-x: hidden` on to suppress the overhang, with * the body rule as a fallback. On /call-to-africa/ NEITHER contains it. The * computed value on really is our `clip`, and the page still scrolls * sideways by exactly the scrollbar overhang — window.scrollTo(500, y) lands * at scrollX 8 on a 1440px viewport whose clientWidth is 1425. * * The reason is overflow propagation. A body's overflow only reaches the * viewport while the ROOT element's own overflow is `visible`, and the moment * one axis of the body is `clip` while the other is `visible`, that `visible` * computes to `auto` — so the body becomes its own scroll container instead of * handing the value up. The declaration is therefore correct, applied, and * inert. * * Setting it on the root removes the ambiguity: the root IS the viewport's * overflow, with nothing to propagate. `:has()` keeps the same scoping promise * as the body gate — it matches only a document whose body this plugin is * rendering, so no other page of the site is touched. A browser without * `:has()` simply drops the rule and gets today's 8px overhang, which is the * behaviour it already had. * * `clip`, not `hidden`, for the reason given above AND one more: `hidden` on * the root makes the root a scroll container, which silently breaks every * `position: sticky` descendant. `clip` does not. */ html:has(body.tami-page) { overflow-x: clip; } /* * The gate's second job: close the theme's gap above a hero, so the hero * meets the site header the way 1.3 requires. Two Divi paddings hold it * down and BOTH sit on ancestors of the plugin root: * * `body:not(.et-tb) #main-content .container { padding-top: 58px }` * (Divi's inline critical CSS, 1,2,1) on every page; and * `.et_pb_post .entry-content { padding-top: 30px }` (same sheet, 0,2,0) * on a CPT single, where single.php wraps the content in * article.et_pb_post — the ministry and story pages. * * WHY THE GATE IS UNAVOIDABLE HERE. A selector confined to .tami can * only ever style the plugin root and its descendants; these two boxes are * the root's PARENTS. Pulling the hero up by the sum instead (the negative * margin idiom of 1.3) would mean hard-coding 58px and 88px of somebody * else's theme inside our scope and overlapping the header the day the * theme changes either number — worse than saying plainly, once, that we * are countering Divi. Base §20.4 (L2855) counters Divi on the first of * these very elements, gated the same way; this follows that precedent * rather than inventing a second one. * * One rule, one selector: :is() takes the heavier of its two arguments, so * the whole thing weighs (1,6,1) — over Divi's (1,2,1) and (0,2,0) alike — * and no !important is needed. :has() narrows it to the pages that open * with a hero; RegionPage prints one first on every region, country, city, * ministry and story page, while the form, dashboard, queue and login pages * print .tami__page-title and keep the theme's air untouched. An engine * without :has() drops the rule and shows the page exactly as it was. * `padding-block-start` is `padding-top`'s longhand in a horizontal writing * mode, which is the only mode Divi's own value was ever written for. */ body.tami-page :is(#main-content .container, .et_pb_post .entry-content):has(.tami:not(.tami--inline) > .tami__hero:first-child) { padding-block-start: 0; /* countering Divi's `#main-content .container { padding-top: 58px }` and `.et_pb_post .entry-content { padding-top: 30px }` */ } /* * 1.3 The hero touches the site header. A page header sits directly under * the nav — the demo's does on every inner page — but three paddings held * ours ~88px below Divi's header on the region and term pages and ~118px * on the singles, at 1366 and at 390 alike: Divi's 58px on * `#main-content .container`, its further 30px on `.et_pb_post * .entry-content` (a CPT single only), and base §27.1 * `.tami { padding-block-start: 30px }` (L3858, 0,1,0) — the client's * "30px from the site header" for a plugin page. * * All three are right for a page that opens with a title or a form and * wrong for one that opens with a full-bleed hero: there the client's * newer instruction — spec §1.1, the hero IS the page header — is the one * that wins, and only there. Both halves of the fix key on one condition: a * non-inline root whose FIRST child is a hero. RegionPage prints the hero * first on every region, country, city, ministry and story page; the form, * dashboard, queue and login pages print .tami__page-title instead and * keep every padding exactly as it was; an inline shortcode keeps the * editor's flow (§27.1's own exception). * * This is the half that CAN be done in scope, and so is: the base's own * 30px is cancelled from inside with a negative block margin on the hero — * the technique of the inline breakout in 1.1, one axis over. The value * mirrors §27.1's 30px and must change with it. (0,4,0); no base rule sets * the hero's block-start margin (§4 L716 sets the end). * * Divi's two paddings sit on the root's PARENTS, where no .tami * selector reaches, so they are cancelled by the sanctioned body gate in * 1.2 — read that block for the reasoning and the specificity sum. Strike * it there in favour of a Divi Theme Builder setting and this margin still * stands on its own. */ .tami:not(.tami--inline) > .tami__hero:first-child { margin-block-start: -30px; } /* ------------------------------------------------------------------------- * 2. WHAT EVERY COVER HERO SHARES (region, country, city) * * A cover hero is a photograph (or a flag) behind white type. The base * paints its field a deep near-black green (#101815, §4 L708) with a * two-gradient scrim over a flat rgba(9,14,11,.55) floor (§4 L730). The * template's field is the skin's ink, and its scrim is the ink at 0.55 — * flat, so the photograph reads as a photograph — with a soft vignette * that is heaviest along the bottom, where the copy sits, and a little * firmer at the very top for the breadcrumbs. * * Contrast, measured the base's way (white over the brightest possible * image, i.e. pure white behind the scrim): the flat 0.55 alone would give * ~3.5:1, which is why the vignette is not decoration. Combined alpha at * the lightest point (35% down) is 1 - 0.45 × 0.82 = 0.63 → the scrim * resolves to #7A777E over white → 4.6:1 for white body copy; at the top * 0.72 → #635F69 → 6:1 for the title and 4.5:1 for breadcrumbs at 0.8; at * the bottom 0.83 → 8:1+. Real photographs are darker than pure white * where the text lands, so this is the floor, not the typical case. * * The banner band is excluded from the field colour with :not() — base * §30.1 (L5061, 0,2,0) paints it white with the `background` shorthand, * and a plain `.tami .tami__hero` at the same specificity LATER in * the cascade would have turned the band dark. The scrim needs no guard: * §30.1 (L5071) hides the band's ::before outright and only its * background-image is restated here. (0,3,0) over (0,2,0); (0,2,1) over * §4's (0,1,1). * ------------------------------------------------------------------------- */ .tami .tami__hero:not(.tami__hero--banner) { background-color: var(--tami-ink, #26222f); color: var(--tami-skin-on-dark, #ffffff); } .tami .tami__hero::before { background-image: linear-gradient(180deg, rgba(38, 34, 47, 0.38) 0%, rgba(38, 34, 47, 0.18) 35%, rgba(38, 34, 47, 0.62) 100%), linear-gradient(0deg, var(--tami-skin-scrim, rgba(38, 34, 47, 0.55)), var(--tami-skin-scrim, rgba(38, 34, 47, 0.55))); } /* * The CTA wrapper. templates/hero.php renders the button as an inside *

      ; the base has no rule for that

      , so * Divi's `p { padding-bottom: 1em }` was adding a dead em under the button, * and the 2rem the base hangs on the button itself (§4 L868 `.tami__hero- * cta { margin-block-start }`, 0,1,0; 1rem in the short-landscape query * §21.4) moves to the wrapper, which is the element actually in the flex * column. 10-foundation.css restyles the button and explicitly leaves this * margin to this file. (0,2,0) and (0,3,0). */ .tami .tami__hero-actions { margin-block: clamp(1.25rem, 4vw, 2rem) 0; padding-block: 0; } .tami .tami__hero-actions .tami__hero-cta { margin-block-start: 0; } /* * The eyebrow. Every current caller passes '' (RegionPage says why at * L1740), so this renders nowhere today; the template can still print it * and a child-theme override may, so it gets the spec's eyebrow scale * rather than falling through to body copy. No base rule exists for it. */ .tami .tami__hero-eyebrow { font-size: 0.8125rem; font-weight: 500; letter-spacing: var(--tami-skin-track-eyebrow, 0.12em); line-height: 1.4; margin-block: 0 0.75rem; opacity: 0.85; text-transform: uppercase; } /* ------------------------------------------------------------------------- * 3. THE REGION HERO — the demo's home hero (spec §2.1) * * Full-bleed photograph (§1), everything centred, the title in the display * scale in capitals, the blurb under it, the on-photo outline button under * that, breadcrumbs small and capitalised at the top. The base anchors the * H1 to the bottom of a start-aligned column (§4 L837 `margin-block: auto * 0` on the title) — but since the headline was wrapped in * .tami__hero-headline / -headline-text (§27.5) that auto margin sits * inside a plain block and does nothing; the headline actually sits right * under the breadcrumbs and the min-height is empty space below it. The * headline is the flex item now, so it takes the auto margin, and the last * item takes a matching one: breadcrumbs stay pinned to the top and the * headline group floats in the centre of what is left. * * The blurb and the description are NOT re-measured: base §30.2 (L5229, * 0,2,0) makes them full width, justified, 10px inset — a client rule the * suites assert — and `text-align: center` on the inner is inherited only * by what §30.2 does not name (the headline, the CTA line). * * Height: ~60vh on desktop, ~70vh on a phone (spec), read as svh with the * vh line first as the fallback (§4 explains the iOS reason), and capped in * rem so a 4K screen or a tall test window does not get a hero the height * of a wall. (0,3,0) over §4's (0,1,0) min-block-size and its ≥100rem * restatement (L829); the short-landscape SHAPE query at the end of this * section keeps §21.4's "drop the floor" behaviour, which this would * otherwise out-rank. * ------------------------------------------------------------------------- */ .tami .tami__hero--region .tami__hero-inner { justify-content: center; min-block-size: min(70vh, 40rem); min-block-size: min(70svh, 40rem); text-align: center; } @media (min-width: 64rem) { .tami .tami__hero--region .tami__hero-inner { min-block-size: min(60vh, 44rem); min-block-size: min(60svh, 44rem); } } /* Breadcrumbs at the top, centred, 0.75rem capitals, FULL white. The nav is a flex row (base §5 L940) and so is its

        (10-foundation §5), hence both are centred. (0,3,0) over the base's and the foundation's (0,1,0). WHY NOT THE 0.8 ALPHA SPEC §2.1 ASKED FOR. 12px is small text: WCAG 1.4.3 wants 4.5:1, and the trail sits ~12% down the hero, where the scrim is the flat 0.55 plus the vignette's 0.31 — combined 0.69 of ink over whatever the photograph is. Over the photograph the client actually has on /call-to-africa/ the composite measures #dfd7d6 on #5f3831, 7.07:1, and 0.8 was comfortable. Over a BRIGHT photograph it is not: with white under the scrim the background lands on #696670 and 0.8 white composites to #e1e0e2 — 4.27:1, under the floor, and this hero takes whatever image a region editor uploads. Full white on that same background is 5.62:1, and 7.07:1 → 10.02:1 on the current photograph. Raising the text was chosen over moving the vignette's light point, which is the other repair the audit offered: the light point is already BELOW the trail (35% down, against the trail's 12%), so moving it would have to darken the hero's whole upper third to buy 0.23 of a ratio, and the display line and the blurb underneath — the reason the photograph is there — would pay for it. The separators keep their 0.6 opacity: they are aria-hidden="true" decoration (breadcrumbs.php L59), not text. */ .tami .tami__hero--region .tami__breadcrumbs { color: var(--tami-skin-on-dark, #ffffff); font-size: 0.75rem; justify-content: center; letter-spacing: var(--tami-skin-track-label, 0.06em); text-transform: uppercase; } .tami .tami__hero--region .tami__breadcrumbs-list { justify-content: center; } /* The headline group floats between the breadcrumbs and the bottom edge: auto margins above the first item and below the last absorb the free space equally, and beat justify-content by design. The row gap the base gives the headline (§27.5 L4091, 0,2,0) stays; the 2rem the base pads the TITLE with (§4 L837) moves here so the group's top edge, not the H1's cap height, keeps its distance from the breadcrumbs. (0,3,0) and (0,4,0). */ .tami .tami__hero--region .tami__hero-headline { justify-content: center; margin-block-start: auto; padding-block-start: var(--tami-space-row, 2rem); } .tami .tami__hero--region .tami__hero-inner > :last-child { margin-block-end: auto; } /* * The display line: capitals, 700, tracked open 0.01em, the display clamp * (2.25rem → 3.75rem). The administrator's h1 size (--tami-size-h1, the * settings page's "H1 size", emitted inline by StyleInheritance) can RAISE * the line but never shrink it: `max()` of the two, not the plain * `var(--admin, scale)` chain the base uses (§4 L839). The reason is on * this very site — its H1 setting is 35px, and a 35px "display" line is * barely the h2 under it; the demo's home hero is a line twice its section * titles, and the client would never see it. An administrator who wants * bigger still gets bigger; the token's 0px fallback makes the max() a * no-op when the setting is empty (StyleInheritance emits nothing then). * The same pattern carries the page-header and banner scales in §4, §5 * and §6. 34ch is the spec's * measure for the centred block — at the 60px ceiling that is ~26 capitals * a line, so "BRINGING YOU THE ELEMENTS OF STYLE" breaks the way the demo * breaks it, and `text-wrap: balance` (§3 L546) evens the two lines. * `text-align: center` is stated on the H1 itself, not inherited: base * §27.2 pins every `.tami h1` to `start` (0,1,1) so a heading is never * justified, and that beats the inner's inherited centring — the title * sat at the start of its column until this was restated. Overrides §4 * `.tami__hero-title` (L837, 0,1,0): size, tracking, 20ch measure, the * 2rem padding. (0,3,0). */ .tami .tami__hero--region .tami__hero-title { color: var(--tami-skin-on-dark, #ffffff); font-size: max(var(--tami-size-h1, 0px), var(--tami-skin-size-display, clamp(2.25rem, 1.6rem + 3.2vw, 3.75rem))); font-weight: var(--tami-weight-heading, 700); letter-spacing: 0.01em; line-height: 1.08; margin-inline: auto; max-inline-size: 34ch; padding-block-start: 0; text-align: center; text-transform: uppercase; } /* The supporting line and the blurb: white at 0.92 (the base has the blurb at 0.86, §4 L854). Size, measure, justification and inset are the base's and §30.2's — see the section note. (0,3,0) over (0,1,0). */ .tami .tami__hero--region .tami__hero-desc, .tami .tami__hero--region .tami__hero-blurb { color: rgba(255, 255, 255, 0.92); margin-block-start: 1.25rem; } /* ------------------------------------------------------------------------- * 4. THE COUNTRY / CITY HERO — the demo's inner-page header (spec §2.3) * * The demo's "About Us" header: a short dark band, the title centred in * the page-header scale, the breadcrumb trail centred UNDER it. Ours adds * the crisp flag above the title — the base's §27.4 two-layer trick (the * flag painted as the backdrop and darkened by the scrim, a whole * aspect-correct copy in the flow) is kept exactly, only re-dressed: the * white mount goes square with a hairline instead of a rounded shadowed * plate, and it is centred. * * Breadcrumbs below the title without touching markup: the inner is a flex * column, so `order` moves the nav to the end of the visual sequence while * the DOM — and therefore the reading and tab order — keeps the trail * first, which is where a screen reader expects a breadcrumb landmark. * * The modifiers --country and --city are what RegionPage sets (L1804); the * --flag class arrives only when a flag file exists, so layout keys on the * former and the flag figure on the latter. (0,3,0) throughout, over §4's * (0,1,0) inner/title rules and §27.4–27.6's (0,2,0). * ------------------------------------------------------------------------- */ .tami .tami__hero--country .tami__hero-inner, .tami .tami__hero--city .tami__hero-inner { justify-content: center; min-block-size: 16.25rem; padding-block: clamp(2rem, 5vw, 3rem); text-align: center; } /* * The scrim on a flag, darker (spec §2.3: "so white text clears AA over any * flag"): the flat layer at 0.72 instead of 0.55, the same vignette on * top. A flag has large fields of pure white and pure yellow, so the base's * worst case is the normal case here — combined alpha at the lightest * point is 1 - 0.28 × 0.9 = 0.75 → #5D5A63 over white → white 6.6:1, * the tagline at 0.9 → 5.8:1, breadcrumbs at 0.85 → 5.2:1. * * The wash is BLURRED, as the spec describes it, with backdrop-filter on * the scrim layer rather than filter on the hero: the hero's own * `isolation: isolate` (§4) makes it the backdrop root, so the filter sees * exactly the flag painted behind the pseudo-element and nothing outside * the hero, the content above it stays sharp, and a 640px flag stretched * across 1366px stops showing its pixels. An engine without backdrop-filter * drops the declaration and gets the unblurred field the base always had. * §27.4's comment "DO NOT redefine .tami__hero::before here" warned * against replacing the scrim with a pale blurred copy that lost the * contrast guarantee; this keeps the guarantee and raises it. * (0,2,1) over §4's (0,1,1), and later in this file than §2's scrim. */ .tami .tami__hero--flag::before { -webkit-backdrop-filter: blur(24px) saturate(1.1); backdrop-filter: blur(24px) saturate(1.1); background-image: linear-gradient(180deg, rgba(38, 34, 47, 0.2) 0%, rgba(38, 34, 47, 0.1) 40%, rgba(38, 34, 47, 0.4) 100%), linear-gradient(0deg, rgba(38, 34, 47, 0.72), rgba(38, 34, 47, 0.72)); } /* The flag figure: centred above the title, 200px wide on a phone, 240px from tablet portrait (the base has 240/300 at §27.4 L4054/L4082). Auto inline margins centre a capped flex item on the cross axis. */ .tami .tami__hero--flag .tami__hero-flag { margin-block: 0 1rem; margin-inline: auto; max-inline-size: 200px; } @media (min-width: 48rem) { .tami .tami__hero--flag .tami__hero-flag { max-inline-size: 240px; } } /* * The mount: square, a hairline in `line` around the white 6px mat, no * shadow. Overrides §27.4 `.tami .tami__hero-flag img` (L4068, * 0,2,1): 10px radius, the two-layer shadow. The margin-inline reset kills * the 0.45em end margin every `.tami-flag` carries (§27.1 L3949, 0,2,0) * for inline use next to a name — here it pushed a 100%-wide image past * its figure. border-box so the border and mat live inside the 200/240px, * not outside it. (0,3,1). */ .tami .tami__hero--flag .tami__hero-flag img { border: 1px solid var(--tami-line, #eae4e1); border-radius: 0; box-shadow: none; box-sizing: border-box; margin-inline: 0; } /* The headline row centres its one child; the H1 takes the page-header scale (the administrator's h1 size may raise it, never shrink it — the max() of §3), 600, tightened 0.01em, on a 30ch measure centred by its own auto margins (the headline-text block it sits in is `flex: 1 1 16rem`, §27.5, so it spans the inner) and its own `text-align: center` — base §27.2 pins `.tami h1` to `start` at (0,1,1), above inheritance. Overrides §4 `.tami__hero-title` (L837). */ .tami .tami__hero--country .tami__hero-headline, .tami .tami__hero--city .tami__hero-headline { justify-content: center; } .tami .tami__hero--country .tami__hero-title, .tami .tami__hero--city .tami__hero-title { color: var(--tami-skin-on-dark, #ffffff); font-size: max(var(--tami-size-h1, 0px), var(--tami-skin-size-page, clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem))); font-weight: var(--tami-weight-heading, 600); letter-spacing: -0.01em; line-height: 1.15; margin-inline: auto; max-inline-size: 30ch; padding-block-start: 0; text-align: center; } /* * The tagline: 400, upright, white at 0.9, centred. §27.6 sets it italic * at 1.02rem in muted ink (L4154, 0,2,0) and then, for heroes, inherits the * hero's colour and dims it to 0.86 (L4163, 0,2,0); the template has no * italics, so the slant goes. The spec's 0.95rem is taken from tablet * portrait up; on a phone it stays at the 1rem body floor (house rule 4). * (0,3,0). */ .tami .tami__hero--country .tami__hero-tagline, .tami .tami__hero--city .tami__hero-tagline { color: rgba(255, 255, 255, 0.9); font-size: 1rem; font-style: normal; font-weight: 400; line-height: 1.5; margin-block: 0.5rem 0; opacity: 1; } @media (min-width: 48rem) { .tami .tami__hero--country .tami__hero-tagline, .tami .tami__hero--city .tami__hero-tagline { font-size: 0.95rem; } } /* The trail, moved below the title with `order` (see the section note), centred, 0.8125rem, white at 0.85, the "/" separators the foundation sets. Both the nav and its
          are flex rows, so both centre. (0,3,0) over base §5 (L940) and 10-foundation §5, both (0,1,0). */ .tami .tami__hero--country .tami__breadcrumbs, .tami .tami__hero--city .tami__breadcrumbs { color: rgba(255, 255, 255, 0.85); font-size: 0.8125rem; justify-content: center; margin-block-start: 0.75rem; order: 10; } .tami .tami__hero--country .tami__breadcrumbs-list, .tami .tami__hero--city .tami__breadcrumbs-list { justify-content: center; } /* * The base's one SHAPE query (§21.4 L3022): a phone turned sideways is * ~400px tall, and there a hero with a floor is a screen with nothing else * on it. §21.4 drops the floor at (0,1,0); the (0,3,0) floors in §3 and §4 * above would out-rank it, so the same query restates it at the same * specificity as those floors. Not a width query, so not on the width * scale — exactly as the base documents it. */ @media (orientation: landscape) and (max-height: 30rem) { .tami .tami__hero--region .tami__hero-inner, .tami .tami__hero--country .tami__hero-inner, .tami .tami__hero--city .tami__hero-inner { min-block-size: 0; padding-block: clamp(0.75rem, 7vh, 2.25rem); padding-block: clamp(0.75rem, 7svh, 2.25rem); } } /* ------------------------------------------------------------------------- * 5. THE BANNER BAND — ministry and story singles (spec §2.4, §2.5) * * The picture above (untouched but for its width, §1) and the light band * under it: breadcrumbs, the logo badge, the title, the excerpt. Base * §30.1 (L5061–L5195, all 0,2,0 / 0,3,0) already makes the band white with * ink type, muted breadcrumbs, no scrim and the ink focus ring — those are * kept and only the TYPE and the badge are re-dressed, at (0,3,0) so the * §30.1 rules of the same shape are beaten by source order and §27.5's * badge (L4105, 0,2,0) by weight. The excerpt keeps §30.2's full-width * justified 10px inset (a client rule). * ------------------------------------------------------------------------- */ /* The band's surface and ink, restated so no later same-weight rule in a sibling part can flip them (see §2's :not() note). The accent hand-off line under the band is 2px on the singles (spec §2.4) against the 3px under a photograph (§4 L744, 0,1,1). */ .tami .tami__hero--banner { background-color: var(--tami-surface, #ffffff); color: var(--tami-ink, #26222f); } .tami .tami__hero--banner::after { block-size: 2px; } /* The band is as tall as its content plus a little more air than §30.1's clamp(1.25rem, 3vw, 2rem) (L5143). */ .tami .tami__hero--banner .tami__hero-inner { padding-block: clamp(1.5rem, 3vw, 2.25rem); } /* The title in the banner scale (raised, never shrunk, by the administrator's h1 size — the max() of §3), 600, tightened, on a 36ch measure — the base's 20ch (§4 L837) broke a long ministry name into three lines under a picture that spans the page. Overrides §30.1 `.tami .tami__hero--banner .tami__hero-title` (L5150, 0,3,0) by source order. */ .tami .tami__hero--banner .tami__hero-title { color: var(--tami-ink, #26222f); font-size: max(var(--tami-size-h1, 0px), var(--tami-skin-size-banner, clamp(1.75rem, 1.4rem + 1.5vw, 2.4rem))); font-weight: var(--tami-weight-heading, 600); letter-spacing: -0.01em; line-height: 1.15; max-inline-size: 36ch; padding-block-start: 0.75rem; } /* The logo badge: a square white plate with a hairline, no radius, no shadow. §27.5 (L4105, 0,2,0) rounds it 10px under a two-layer shadow. border-box keeps the 84/104px slot the base sizes; the image inside is already square and shadowless (§27.5 L4121, 0,2,1). (0,3,0). */ .tami .tami__hero--banner .tami__hero-badge { background: var(--tami-surface, #ffffff); border: 1px solid var(--tami-line, #eae4e1); border-radius: 0; box-shadow: none; box-sizing: border-box; } /* The excerpt on the band: body ink, 1.0625rem on the body leading. §30.1 (L5155, 0,3,0) sets the colour; §4 (L846, 0,1,0) the fluid size. */ .tami .tami__hero--banner .tami__hero-desc, .tami .tami__hero--banner .tami__hero-blurb { color: var(--tami-body-ink, #312e39); font-size: 1.0625rem; line-height: 1.7; } /* A tagline on the band (a city hero never banners, but the template allows one): muted, upright. §30.1 L5163 (0,3,0) by source order. */ .tami .tami__hero--banner .tami__hero-tagline { color: var(--tami-muted-ink, #6b6873); font-size: 1rem; font-style: normal; font-weight: 400; opacity: 1; } /* ------------------------------------------------------------------------- * 6. PAGE TITLES — the hero-less pages (spec §2.6, §2.7) * * The submission form and the login prompt print .tami__page-title * instead of a hero (§3 L582 explains why they must). Page-header scale * (raised, never shrunk, by the administrator's h1 size — the max() of * §3), 600, tightened, ink, on a 30ch measure. The margins are NOT touched: * the form's 30px to the first fieldset is a client rule the base pins at * (0,3,0) (§30.4 L5766) and 50-forms.css centres the login title at the * same weight; this (0,2,0) sits under both. Overrides §3 `.tami__page- * title` (L582, 0,1,0): size, tracking, 24ch. * ------------------------------------------------------------------------- */ .tami .tami__page-title { color: var(--tami-ink, #26222f); font-size: max(var(--tami-size-h1, 0px), var(--tami-skin-size-page, clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem))); font-weight: var(--tami-weight-heading, 600); letter-spacing: -0.01em; line-height: 1.15; max-inline-size: 30ch; } /* ------------------------------------------------------------------------- * 7. THE ALTERNATING WASH (spec §2.1) * * Every second section inside .tami__main gets the wash, so a long page * has the demo's beat of white / grey / white bands. The band stays INSIDE * the column on purpose — the spec reserves the §1 breakout for heroes — * so it reads as a plate the content sits on, with the container's gutter * as its margin. * * The base already washes "every second divided section" (§6 L1040 * `.tami__section--divider:nth-of-type(even)`, 0,2,0), and that count * has two problems here: it only counts sections that carry the divider, * and nth-of-type counts by ELEMENT — on a ministry page the single is an *
          and the first
          after it is "first of type", so the * base's parity is out of step with the page's. nth-child counts every * sibling, and both wrappers RegionPage uses are named: sections sit * directly in .tami__main on the region page and the singles, and * inside .tami__archive on the country / city archives. The odd rule is * not a no-op — it is what switches OFF the base's wash where the two * counts disagree. (0,5,0) over (0,2,0). * * The filters toolbar is EXCLUDED, not counted out. On every browse view * (?tami_show=stories, ministries, countries, contributors, videos, photos) * .tami__main's children are the dashboard, the filters block, the * results — so the toolbar is the second child, and this rule painted a * wash band with a section's block padding around a toolbar that 40-singles * §2.2 already sets on the wash between two hairlines: grey on grey, and * 40–56px of dead grey above and below it. `:not(.tami__section-- * filters)` takes the toolbar out of BOTH rules, so 40-singles owns every * declaration on it, while nth-child still counts it: the beat stays * white (dashboard) / wash (the toolbar itself) / white (results), which * is the demo's shop page. The `of S` form of nth-child would drop the * toolbar from the count and wash the results directly under a wash * toolbar — the wrong beat, so it is not used. * * Inside a washed band the divider rule (§6 L1057 `::before`, restyled to * a hairline by 40-singles) would sit a padding's depth inside the grey and * say nothing the band's own edge does not; it is hidden there and its * 4rem bottom margin is replaced by the band's padding. (0,4,1) over * (0,1,1) / (0,2,1). * ------------------------------------------------------------------------- */ .tami .tami__main > .tami__section:nth-child(even):not(.tami__section--filters), .tami .tami__main > .tami__archive > .tami__section:nth-child(even):not(.tami__section--filters) { background-color: var(--tami-wash, #f5f4f2); padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 3.5rem); } .tami .tami__main > .tami__section:nth-child(odd):not(.tami__section--filters), .tami .tami__main > .tami__archive > .tami__section:nth-child(odd):not(.tami__section--filters) { background-color: transparent; padding-block-end: 0; } .tami .tami__main > .tami__section--divider:nth-child(even)::before, .tami .tami__main > .tami__archive > .tami__section--divider:nth-child(even)::before { display: none; } /* ------------------------------------------------------------------------- * 8. PREFERS-CONTRAST AND PRINT * ------------------------------------------------------------------------- */ /* Base §23 (L3177, 0,1,1) flattens the scrim to a single 0.86 stop for high-contrast users so white text has one predictable ratio; §2 and §4 above out-rank it, so it is restated at their weight, and the blur goes — a soft field behind sharp text is the opposite of what was asked for. */ @media (prefers-contrast: more) { .tami .tami__hero::before, .tami .tami__hero--flag::before { -webkit-backdrop-filter: none; backdrop-filter: none; background-image: linear-gradient(0deg, rgba(38, 34, 47, 0.86), rgba(38, 34, 47, 0.86)); } } /* * Print (spec §1.1: undo the breakout). Base §24 (L3238, 0,1,0) turns the * hero into a black-on-white title block; every (0,3,0) colour above would * out-rank it and print white type on nothing, so the ink is restated * here at that weight. The viewport clip is released — a printed page has * no scrollbar to hide — and the wash bands print white: grey plates are * toner for nothing. */ @media print { body.tami-page { overflow-x: visible; } .tami .tami__hero, .tami .tami__hero--banner .tami__hero-media { inline-size: auto; margin-inline-start: 0; max-inline-size: none; padding-inline: 0; } /* The header-gap pull of 1.3 has no header to close up to on paper; restated at its own (0,4,0). */ .tami:not(.tami--inline) > .tami__hero:first-child { margin-block-start: 0; } .tami .tami__hero:not(.tami__hero--banner), .tami .tami__hero--banner { background: none; color: #000000; } .tami .tami__hero--flag::before { -webkit-backdrop-filter: none; backdrop-filter: none; } .tami .tami__hero--region .tami__hero-inner, .tami .tami__hero--country .tami__hero-inner, .tami .tami__hero--city .tami__hero-inner { min-block-size: 0; padding-block: 0; text-align: start; } .tami .tami__hero .tami__hero-title, .tami .tami__hero .tami__hero-desc, .tami .tami__hero .tami__hero-blurb, .tami .tami__hero .tami__hero-tagline, .tami .tami__hero .tami__breadcrumbs { color: #000000; } .tami .tami__hero--flag .tami__hero-flag img { border-color: #000000; } .tami .tami__main > .tami__section:nth-child(even):not(.tami__section--filters), .tami .tami__main > .tami__archive > .tami__section:nth-child(even):not(.tami__section--filters) { background-color: transparent; padding-block: 0; } } /* ====================================================================== * PART 30-cards * ====================================================================== */ /* ========================================================================= * SKIN PART S3 — CARDS * ========================================================================= * * The "Clothes Store" look for every card the plugin draws, on top of the * structural sheet (tami-frontend.css, untouched). Loaded after it, so a * same-specificity rule here wins by source order; where the base rule is * more specific (§20.2 images at 0,3,1; §27.8 ministry parts at 0,3,0; * §20.1 stat cells at 0,3,0) the selector below matches or exceeds it. * Every block names the base rule it overrides and its specificity. * * THE CLIENT'S RULE (DESIGN-SPEC §1.2): every card is a RAISED, THREE- * DIMENSIONAL card. The treatment is one set of declarations, applied to * every card-like surface in this file (story, ministry and link cards, * the stat cards, the empty-state box, the featured-sidebar items): * * rest white surface · 1px hairline on three sides · a 3px * border-block-end in --tami-card-edge (the card's visible * thickness) · box-shadow --tami-elev-rest · square corners * hover only on (hover: hover) and (pointer: fine): * transform --tami-skin-card-lift (perspective(900px) * translateY(-6px) rotateX(1.5deg)) · box-shadow * --tami-elev-raise · --tami-skin-card-dur/-ease (220ms * ease-out) on transform and box-shadow only · the media image * takes --tami-skin-card-zoom (scale(1.03)) inside its * clipped plate * focus :focus-within takes the raise shadow on every pointer, so a * keyboard user sees the card answer; the lift joins it on fine * pointers * motion prefers-reduced-motion: no transform, shadow change only * touch no hover state; the base's :active press tint (§21.3) stays * * The declarations are S1's §1.5 mixin copied VERBATIM (10-foundation.css): * the three tokens (--tami-elev-rest, --tami-elev-raise, * --tami-card-edge) and the four motion values (--tami-skin-card- * lift / -zoom / -dur / -ease) are defined ONCE on .tami there, so one * edit in S1 re-tunes every card in this file. The base's high-contrast * block and S1's both turn the two elevations into hard rings, which the * same var() picks up with no extra rule here. * * Scope (DESIGN-SPEC §3.1–3.5, §2.1 stat cards, §2.2 tiles and empty * states): * S3.1 grid gaps * S3.2 the 3D card box — rest, hover, focus, media zoom * S3.3 card anatomy shared by every variant (media, body, title, meta, * excerpt, foot) * S3.4 story card — the demo's NEWS card * S3.5 ministry card — the demo's PRODUCT card * S3.6 link tiles — the demo's CATEGORY tile (countries, cities, * contributors, media) * S3.7 "At a Glance" stat cards * S3.8 empty states * S3.9 featured sidebar list * S3.10 motion, touch, contrast and print restatements * * Tokens (--tami-ink, -wash, -line, -muted-ink, -accent-ink, -surface) * are the base sheet's names; S1 redefines their values on .tami, so * this file only ever consumes them. The card CTA ("Read Story →") is S1's * (its §4.5) and is not restated here. * * House rules honoured: every selector carries .tami; logical properties * only; no @keyframes/@import/@font-face/external url(); min-width queries * on the base scale; no !important; no markup assumed beyond what the * templates print. * ========================================================================= */ /* ------------------------------------------------------------------------- * S3.1 GRID GAPS * * WHY: a raised card throws a 28px shadow below itself; two rows of cards * at the base's 2rem row gap would run their shadows into the next row's * top edge. The administrator's row_spacing setting still counts — it is * only floored, never replaced — so a larger admin value wins upward. * * Overrides §7 `.tami__grid { gap: var(--tami-space-row, 2rem) * var(--tami-space-col, 1.5rem) }` (0,1,0) for the pinned three-across * grid only; the generic auto-fit grid keeps its gap. * ------------------------------------------------------------------------- */ .tami .tami__grid--3 { row-gap: max(var(--tami-space-row, 2rem), 2.5rem); } /* ------------------------------------------------------------------------- * S3.1b THE GRID'S OWN EDGE — the one place the theme still wins * * WHY: every card grid is a