/* ============================================================================ brand.css — one gold, one button character v2.40.0 ============================================================================ Owner decision (5 Aug 2026), after comparing against gracerevonline.com: adopt their gold AND their button character. Their palette, sampled live from gracerevonline.com — not guessed: #F7B731 button / accent fill, with BLACK text #C78800 gold used AS TEXT on white #1F1F1F dark surface #F6F6F6 / #DDDDDD greys ONE DELIBERATE DEVIATION, AND IT IS NOT A MISTAKE. Their #C78800 text gold measures 3.02:1 on white -- it FAILS WCAG AA, which needs 4.5:1 for normal text. Their fill colour is fine (black on #F7B731 is 11.77:1); it is only the text partner that is too light. So gold-as-text uses #8F6100 instead: 5.42:1 on white and 5.01:1 on the #F6F6F6 grey, both measured, and still plainly gold. The colour anyone actually reads as "their gold" -- the button fill -- is theirs exactly. Do not "correct" #8F6100 back to #C78800. Their buttons: ~3px radius, 700 weight, uppercase, letter-spaced — that squared, shouty geometry is what actually reads as "their site", far more than the hue does. Ours were 999px pills at 600 weight, sentence case. --------------------------------------------------------------------------- WHY THIS FILE EXISTS RATHER THAN EDITS SPREAD ACROSS EIGHT SHEETS --------------------------------------------------------------------------- There was never a single gold. Measured live before this change: --eos-gold #F5A312 (nav Give button, notes, studio) --gold #A9761F (declared under .home in home-redesign.css) --gold-ink #7E560F (gold used as text) plus separate declarations in events-redesign.css and event-operations.css Three different golds were on screen at once. Rather than chase eight scoped declarations and miss one, the tokens are re-pointed here, in a sheet that loads last — the same reasoning that put the panel outline in the file that wins its cascade. AND IT CLOSES THE NAVY LEAK. --color-accent resolves through parent/global.css:151 to --navy-700 #1B3A5C, and .eos-btn-primary and .eos-next-steps-toggle both consume it — the floating "Next steps" control measured rgb(27,58,92) live on a gold homepage. The owner has said more than once that navy is not this product's colour. ==========================================================================*/ /* .eos-ev-modal is listed because it is a DESCENDANT of .eos-app (which is a body class), and a custom property declared on a descendant always beats one inherited from an ancestor no matter which sheet loads later. Source order cannot reach it; only naming the selector can. Without this line the events modal keeps events-redesign.css:26's #A9761F and renders a second, browner gold beside the new one on the same page. .eop — the Setup admin console — is deliberately NOT listed. It is an internal tool with its own self-contained palette (--page/--strip/--surface1 and a #b45309 gold tuned to them); the owner's brief was the public site. */ :root, .home, .eos-app, .eos-ev-modal, .eos-watch--cinema { --eos-gold: #F7B731; /* fills. Black text on this reads ~11:1 */ --gold: #F7B731; --gold-ink: #8F6100; /* gold AS TEXT on light — 5.42:1, measured */ --gold-soft: rgba(247, 183, 49, .16); --gold-line: rgba(247, 183, 49, .45); --on-gold: #000000; /* their button text is black, and it is right */ } /* Dark surfaces need the brighter gold for text too — a dark gold on near-black is nowhere near 4.5:1, so the text partner flips rather than staying put. */ [data-theme="dark"] :root, [data-theme="dark"] .home, [data-theme="dark"] .eos-app, [data-theme="dark"] .eos-watch--cinema { --gold-ink: #F7B731; --on-gold: #1B160A; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .eos-app, :root:not([data-theme="light"]) .home { --gold-ink: #F7B731; --on-gold: #1B160A; } } /* ---------------------------------------------------------- the navy leak */ /* --color-accent was navy #1B3A5C and is consumed by the primary button, the floating "Next steps" CTA, the pagination current-page pill, form-field focus, the outline button's hover label and the SITE-WIDE FOCUS RING. The navy has to go — the owner has said repeatedly it is not this product's colour — but it must be replaced by another DARK colour, not by the bright gold, and this is the whole lesson of the change. THE ACCENT IS CONSUMED THREE INCOMPATIBLE WAYS: 1. as a FILL with white text on top (.eos-pagination .current:945, .eos-btn-primary:311) 2. as TEXT on a near-white surface (.eos-btn-outline:hover:326) 3. as a RING / BORDER on white (:3017 focus, :911 field focus) Only a dark colour satisfies all three at once. #F7B731 satisfies NONE of them: white on it is 1.78:1, it as text on #FAFAFA is 1.74:1, and as a ring on white it is 1.78:1 — under the 3:1 WCAG 1.4.11 floor for a focus indicator. A first pass of this file set the accent to #F7B731 and silently broke the keyboard focus ring on every page. Measured, not guessed. So the accent becomes the DARK gold. Every existing consumer keeps working unchanged, and the bright #F7B731 is painted explicitly, below, only on the surfaces that are meant to be a gold slab. DO NOT set --color-accent to #F7B731. That is the bug this comment exists to prevent. */ .eos-app { --color-accent: #8F6100; /* white on it 5.42:1; as text on white 5.42:1 */ --color-accent-hover: #7A5400; --color-accent-active: #6B4900; --color-accent-subtle: #FDF3DF; /* was --navy-50 #F0F4FA, a PALE BLUE that the field-focus glow still painted at :912 */ --color-accent-light: #B87D00; --color-accent-gold: #8F6100; /* legacy alias, was aliased to navy */ --gold-hi: #F7B731; /* the bright slab fill */ --gold-hi-hover: #FFC64D; } /* ============================================================ buttons */ /* The squared, uppercase, heavier character. Applied to the button families the audit inventoried, not with a blanket `button` selector — the chat composer, the notes toolbar and the studio chrome all have their own deliberate geometry and must not be dragged into this. */ .eos-app .eos-btn, .eos-app .eos-btn-primary, .eos-app .eos-btn-outline, .eos-app .eos-btn-light, .eos-app .eos-btn-lg, .eos-app .eos-nav-cta, .eos-app .eos-oa-btn, .eos-app .eos-hero-cta { /* !important ONLY on the radius, and only because home-redesign.css: .home .eos-btn { border-radius: 999px !important } matches at identical specificity (0,2,0). Loading later cannot beat an !important — importance is compared before source order — so the pills survived the first build of this file and the harness caught it. The other three properties here have no competing !important and are left normal; escalating them too would only make the next override harder to find. */ border-radius: 4px !important; text-transform: uppercase; font-weight: 700; letter-spacing: .04em; } .eos-app .eos-btn-primary, .eos-app .eos-nav-cta { background: var(--eos-gold) !important; /* kills the navy and the gradient */ background-image: none !important; color: var(--on-gold) !important; border-color: var(--eos-gold) !important; } /* The hover must brighten, so it reads --gold-hi-hover and NOT --color-accent-hover — the accent hover is deliberately dark now, and using it here would make the button go dark-brown under the cursor. */ .eos-app .eos-btn-primary:hover, .eos-app .eos-nav-cta:hover { background: var(--gold-hi-hover, #FFC64D) !important; border-color: var(--gold-hi-hover, #FFC64D) !important; } /* The outline button borrows their 2px hard edge rather than our hairline — at 4px radius a 0.5px border reads as an unfinished pill. */ .eos-app .eos-btn-outline { border-width: 2px; border-style: solid; } /* platform.css:326 hovers this button's LABEL to var(--color-accent) on var(--color-bg-alt) #FAFAFA. That was navy at 11.6:1. It is now the dark gold at 5.2:1, which is fine — but the 2px border above makes a low-contrast label much more obvious, so the label is pinned to full-strength ink and only the border carries the gold. */ .eos-app .eos-btn-outline:hover { color: var(--color-text, #141416); border-color: var(--color-accent, #8F6100); } /* The floating CTA: gold, not navy, and legible on it. */ .eos-app .eos-next-steps-toggle { background: var(--eos-gold) !important; color: var(--on-gold) !important; border-radius: 4px; text-transform: uppercase; font-weight: 700; letter-spacing: .04em; } /* Gold used as text anywhere must use the darker partner on light surfaces. */ .eos-app .eos-link-gold, .eos-app .eos-hero-meta b, .eos-app .eos-eyebrow { color: var(--gold-ink); } /* ------------------------------------------------------------- focus ring */ /* Two blocks, and THE ORDER OF THEM MATTERS. platform.css:3009 draws the site-wide ring from --color-accent for a, button, .eos-btn, .eos-chip, input, select and textarea. Because this file re-points that token, the ring follows it — which is exactly why the accent had to stay dark. It is restated here anyway so the ring's colour is stated where the brand is decided, rather than depending on a token three files away. .eos-nav-signin--icon is listed explicitly: platform.css:2039 targets it at (0,3,0), which outranks a generic (0,2,1) selector, so it would otherwise keep whatever the token happens to be. That control has lost its visible focus ring once before. */ .eos-app a:focus-visible, .eos-app button:focus-visible, .eos-app .eos-btn:focus-visible, .eos-app .eos-chip:focus-visible, .eos-app input:focus-visible, .eos-app select:focus-visible, .eos-app textarea:focus-visible, .eos-app .eos-oa-btn:focus-visible, .eos-app .eos-hero-cta:focus-visible, .eos-app .eos-nav-signin.eos-nav-signin--icon:focus-visible { outline: 2px solid var(--gold-ink, #8F6100); /* 5.42:1 on white, measured */ outline-offset: 2px; } [data-theme="dark"] .eos-app a:focus-visible, [data-theme="dark"] .eos-app button:focus-visible, [data-theme="dark"] .eos-app .eos-btn:focus-visible, [data-theme="dark"] .eos-app .eos-chip:focus-visible, [data-theme="dark"] .eos-app input:focus-visible, [data-theme="dark"] .eos-app select:focus-visible, [data-theme="dark"] .eos-app textarea:focus-visible, [data-theme="dark"] .eos-app .eos-oa-btn:focus-visible, [data-theme="dark"] .eos-app .eos-hero-cta:focus-visible, [data-theme="dark"] .eos-app .eos-nav-signin.eos-nav-signin--icon:focus-visible { outline-color: #F7B731; } /* SECOND, and therefore winning on the gold-filled controls: a dark-gold ring on a bright-gold button would be nearly invisible, so those three get the near-black ring. This block must stay BELOW the one above — both are (0,3,0) for .eos-btn-primary, so source order alone decides it. */ .eos-app .eos-btn-primary:focus-visible, .eos-app .eos-nav-cta:focus-visible, .eos-app .eos-next-steps-toggle:focus-visible { outline: 3px solid #1F1F1F; outline-offset: 2px; } [data-theme="dark"] .eos-app .eos-btn-primary:focus-visible, [data-theme="dark"] .eos-app .eos-nav-cta:focus-visible, [data-theme="dark"] .eos-app .eos-next-steps-toggle:focus-visible { outline-color: #FFFFFF; } /* ================================================== the hero service band */ /* The

is now evergreen (front-page.php v2.40.0) and the live/upcoming event moved here. It has to survive being laid over an arbitrary operator- uploaded photo, so it is a SOLID gold slab rather than a tinted panel — the same rule the blueprint sets for dialogs and content surfaces: opaque, never see-through. A translucent band over a bright poster is exactly the failure mode that makes text unreadable. */ /* v2.40.1 — THE EVENT NAME LEADS THE BAND. v2.40.0 sat the flag and the title on one row, which pushed the event name down to 21px — it had been the

at up to 64px, and the drop was too far; the owner asked for it back. The flag now sits ABOVE, so the name gets the band's full width and can run to 38px without a chip stealing the row. The evergreen headline still leads the page; the event is now clearly second rather than incidental. */ .eos-app .eos-hero-service { display: block; margin: 22px 0 6px; padding: 13px 18px 16px; max-width: 640px; background: var(--eos-gold); color: #1B160A; border-radius: 4px; border-left: 5px solid #1F1F1F; box-shadow: 0 6px 22px rgba(0, 0, 0, .28); text-align: left; /* the hero may be centre-aligned; the band never is */ /* home-redesign.css:59 puts `text-shadow: 0 1px 14px rgba(0,0,0,.42)` on EVERY direct child of .eos-hero-content, for white text over a dark photo. The band is a direct child, and text-shadow inherits, so without this every glyph on the gold — title, tagline, series, speaker, flag — carries a black halo. Reset it here and let it inherit down clean. */ text-shadow: none; } .eos-hero--align-center .eos-hero-service { margin-left: auto; margin-right: auto; } .eos-hero--align-right .eos-hero-service { margin-left: auto; } .eos-app .eos-hero-service-flag { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 3px; background: #1F1F1F; color: #F7B731; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } .eos-app .eos-hero-service-body { min-width: 0; margin-top: 9px; } /* The event name. 38px is the ceiling deliberately: the hero

tops out at 64px (home-redesign.css:62), so the event stays clearly subordinate while still reading as a headline rather than a caption. `text-wrap: balance` keeps a two-line event name from leaving one orphaned word on line two. */ .eos-app .eos-hero-service-title { margin: 0; font-size: clamp(24px, 3.6vw, 38px); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: #1B160A; text-wrap: balance; } .eos-app .eos-hero-service-sub { margin: 7px 0 0; font-size: 15px; line-height: 1.45; color: rgba(27, 22, 10, .78); } /* The meta row inherits hero styling that assumes a dark backdrop — on gold it would be near-invisible, so it is re-stated here. */ .eos-app .eos-hero-service .eos-hero-meta { margin-top: 8px; color: rgba(27, 22, 10, .72); } .eos-app .eos-hero-service .eos-hero-meta b { color: #1B160A; } .eos-app .eos-hero-service .eos-hero-pip { background: rgba(27, 22, 10, .38); } /* The live dot is red-on-dark elsewhere; inside the black flag it stays red, which reads correctly. Only the ring needs re-basing off the flag colour. */ .eos-app .eos-hero-service .eos-live-dot { box-shadow: 0 0 0 3px rgba(247, 183, 49, .25); } /* The band already stacks naturally now that it is display:block, so the phone rule only tightens the padding — the flex-direction/gap it used to set at v2.40.0 would be dead declarations against a block box. */ @media (max-width: 560px) { .eos-app .eos-hero-service { padding: 12px 15px 14px; } .eos-app .eos-hero-service-body { margin-top: 8px; } } /* Small screens: uppercase + letter-spacing eats horizontal room, and several of these labels are already close to wrapping at 360px. */ @media (max-width: 400px) { .eos-app .eos-btn, .eos-app .eos-btn-primary, .eos-app .eos-btn-outline, .eos-app .eos-nav-cta { letter-spacing: .02em; } } /* =========================================================================== v2.44.8 — A COLOUR PER ITEM, ACROSS THE WHOLE SITE --------------------------------------------------------------------------- Owner: "you forgot to introduce colours to icons and buttons... this should be different colours for each designated item." THE PALETTE IS THE CHURCH CALENDAR'S OWN. Violet for preparation, red for the Spirit, green for growth, gold for feast, rose for Gaudete. Chosen over a set of pleasant-but-arbitrary hues because these already mean something here, and because a church's colours should not look like a software product's. Gold stays in the set rather than being replaced — it is the brand, and it keeps the Give button. Every value is measured as text on the card (#fafafa) and as white-on-colour for buttons. Lowest is gold at 5.19:1; AA needs 4.5:1. Nothing is navy. HOW IT WORKS. Each item declares --i (ink) and --iw (wash) once, by position in its grid. Everything inside it — icon tile, glyph, link, button, hover border — reads those two, so recolouring an item is ONE line and adding a fifth card needs no new rule. The rotation repeats after five, so a grid of any length is covered and no item is ever left unpainted. WHY THIS LIVES IN brand.css. It was first written into home-redesign.css, which is enqueued ONLY on the front page — so it coloured the landing page and nothing else, which is not what was asked for. This sheet loads on every page and is pinned last in the chain, so the same rotation now reaches the events page, the watch page, the 404 and every other public template, and still out-ranks the per-page gold it replaces. Scoped to .eos-app, the body class functions.php:989 adds unconditionally. ========================================================================= */ .eos-app{ --lit-violet:#5B2178; --lit-violet-w:rgba(91,33,120,.12); --lit-red:#A31621; --lit-red-w:rgba(163,22,33,.12); --lit-green:#1F6B3A; --lit-green-w:rgba(31,107,58,.12); --lit-gold:#8F6100; --lit-gold-w:rgba(143,97,0,.13); --lit-rose:#9B3B5E; --lit-rose-w:rgba(155,59,94,.12); /* the fallback, so an item that never gets a position still has a colour — an undeclared var() drops the whole declaration, which would leave an icon unstyled rather than merely un-accented */ --i:var(--lit-gold); --iw:var(--lit-gold-w); } /* ---- the rotation ---- */ /* Every container of repeating items the sweep confirmed exists in markup. Listed explicitly rather than matched by a wildcard: a wildcard would also catch grids that are NOT sets of peer items — a photo gallery, a table of rows — and give them arbitrary colour. Adding a page means adding one selector here, which is a deliberate act rather than a surprise. */ .eos-app .eos-quick-grid > *:nth-child(5n+1), .eos-app .eos-steps-grid > *:nth-child(5n+1), .eos-app .eos-engage-grid > *:nth-child(5n+1), .eos-app .eos-404-grid > *:nth-child(5n+1), .eos-app .eos-cards-grid > *:nth-child(5n+1), .eos-app .eos-schedule-grid > *:nth-child(5n+1), .eos-app #eos-ev-list > *:nth-child(5n+1), .eos-app #eos-ev-grid > *:nth-child(5n+1), .eos-app .eos-footer-inner > *:nth-child(5n+1){ --i:var(--lit-gold); --iw:var(--lit-gold-w) } .eos-app .eos-quick-grid > *:nth-child(5n+2), .eos-app .eos-steps-grid > *:nth-child(5n+2), .eos-app .eos-engage-grid > *:nth-child(5n+2), .eos-app .eos-404-grid > *:nth-child(5n+2), .eos-app .eos-cards-grid > *:nth-child(5n+2), .eos-app .eos-schedule-grid > *:nth-child(5n+2), .eos-app #eos-ev-list > *:nth-child(5n+2), .eos-app #eos-ev-grid > *:nth-child(5n+2), .eos-app .eos-footer-inner > *:nth-child(5n+2){ --i:var(--lit-violet); --iw:var(--lit-violet-w) } .eos-app .eos-quick-grid > *:nth-child(5n+3), .eos-app .eos-steps-grid > *:nth-child(5n+3), .eos-app .eos-engage-grid > *:nth-child(5n+3), .eos-app .eos-404-grid > *:nth-child(5n+3), .eos-app .eos-cards-grid > *:nth-child(5n+3), .eos-app .eos-schedule-grid > *:nth-child(5n+3), .eos-app #eos-ev-list > *:nth-child(5n+3), .eos-app #eos-ev-grid > *:nth-child(5n+3), .eos-app .eos-footer-inner > *:nth-child(5n+3){ --i:var(--lit-green); --iw:var(--lit-green-w) } .eos-app .eos-quick-grid > *:nth-child(5n+4), .eos-app .eos-steps-grid > *:nth-child(5n+4), .eos-app .eos-engage-grid > *:nth-child(5n+4), .eos-app .eos-404-grid > *:nth-child(5n+4), .eos-app .eos-cards-grid > *:nth-child(5n+4), .eos-app .eos-schedule-grid > *:nth-child(5n+4), .eos-app #eos-ev-list > *:nth-child(5n+4), .eos-app #eos-ev-grid > *:nth-child(5n+4), .eos-app .eos-footer-inner > *:nth-child(5n+4){ --i:var(--lit-rose); --iw:var(--lit-rose-w) } .eos-app .eos-quick-grid > *:nth-child(5n+5), .eos-app .eos-steps-grid > *:nth-child(5n+5), .eos-app .eos-engage-grid > *:nth-child(5n+5), .eos-app .eos-404-grid > *:nth-child(5n+5), .eos-app .eos-cards-grid > *:nth-child(5n+5), .eos-app .eos-schedule-grid > *:nth-child(5n+5), .eos-app #eos-ev-list > *:nth-child(5n+5), .eos-app #eos-ev-grid > *:nth-child(5n+5), .eos-app .eos-footer-inner > *:nth-child(5n+5){ --i:var(--lit-red); --iw:var(--lit-red-w) } /* ---- the surfaces that were all one gold now read their item's colour ---- These override the !important gold declared earlier in this same file, so they carry !important too — at equal specificity the later rule wins, and both being !important keeps that comparison honest rather than accidental. */ .eos-app .eos-quick-icon{ background:var(--iw) !important; color:var(--i) !important } .eos-app .eos-quick-icon svg{ color:var(--i) !important } .eos-app .eos-quick-go{ color:var(--i) !important } .eos-app .eos-quick-go svg{ color:var(--i) !important } .eos-app .eos-step-n{ background:var(--iw) !important; color:var(--i) !important } /* The card answers the pointer in its own colour rather than a generic grey. */ .eos-app .eos-quick-card, .eos-app .eos-engage-card{ transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s cubic-bezier(.2,.7,.3,1), border-color .2s cubic-bezier(.2,.7,.3,1); } .eos-app .eos-quick-card:hover, .eos-app .eos-engage-card:hover{ transform:translateY(-3px); border-color:var(--i) !important; box-shadow:0 12px 28px var(--iw); } .eos-app .eos-quick-card .eos-quick-icon{ transition:transform .3s cubic-bezier(.2,.7,.3,1) } .eos-app .eos-quick-card:hover .eos-quick-icon{ transform:rotate(-6deg) scale(1.08) } .eos-app .eos-quick-go{ display:inline-flex; align-items:center; gap:5px; transition:gap .2s cubic-bezier(.2,.7,.3,1) } .eos-app .eos-quick-card:hover .eos-quick-go{ gap:10px } /* ---- BUTTONS INSIDE A COLOURED ITEM TAKE THAT ITEM'S COLOUR ---- The owner asked for buttons too. A button that lives inside an item is that item's action, so it wears the item's colour; buttons OUTSIDE any item (the hero pair, the closing band, GIVE in the nav) stay gold, because those are the site's own voice and gold is what a visitor has learned to press. */ .eos-app .eos-quick-card .eos-btn, .eos-app .eos-engage-card .eos-btn, .eos-app .eos-quick-card button, .eos-app .eos-engage-card button{ background:var(--i) !important; border-color:var(--i) !important; color:#fff !important; } @media (prefers-reduced-motion:reduce){ /* Clear the transform as well as the transition: clearing only the transition leaves the movement, it just snaps. */ .eos-app .eos-quick-card, .eos-app .eos-quick-card:hover, .eos-app .eos-engage-card, .eos-app .eos-engage-card:hover, .eos-app .eos-quick-card .eos-quick-icon, .eos-app .eos-quick-card:hover .eos-quick-icon, .eos-app .eos-quick-go, .eos-app .eos-quick-card:hover .eos-quick-go{ transition:none !important; transform:none !important; } } /* ---- the same two tokens, on the surfaces the other pages use ------------- */ /* 404 cards carry their glyph directly rather than in a tile. */ .eos-app .eos-404-grid > .eos-quick-card svg{ color:var(--i) !important } .eos-app .eos-404-grid > .eos-quick-card:hover{ border-color:var(--i) !important; box-shadow:0 12px 28px var(--iw) } /* Landing image cards: the badge and the per-card call to action. */ .eos-app .eos-cards-grid > * .eos-card-badge{ background:var(--iw) !important; color:var(--i) !important } .eos-app .eos-cards-grid > * .eos-card-cta{ color:var(--i) !important } /* Service schedule: the day/time line is the item's own colour. */ .eos-app .eos-schedule-grid > .eos-schedule-item p strong{ color:var(--i) } /* v2.44.9 — the broadcast section-tab rule was removed with the broadcast page itself. Left as a note rather than silently deleted, because the colour rotation is meant to cover every page: if broadcast ever returns, its tabs need a line here again. */ /* Event cards, list and grid view alike. The date block and the CTA are the two things that were gold on every card regardless of which event it was. */ .eos-app #eos-ev-list > * .d-mon, .eos-app #eos-ev-grid > * .d-mon{ color:var(--i) !important } .eos-app #eos-ev-list > * .eos-ev-card-link, .eos-app #eos-ev-grid > * .eos-ev-card-link{ color:var(--i) !important } /* Footer columns: the heading marks its column. */ /* Checked against footer.php: the columns are .eos-footer-col inside .eos-footer-inner. An earlier draft of this rule targeted a `.eos-footer-inner` wrapper that does not exist anywhere in this theme — it would have coloured nothing at all. The rotation counts from the brand block, the first child, so the brand keeps gold and the three link columns take the next three colours. */ .eos-app .eos-footer-inner > .eos-footer-col h3, .eos-app .eos-footer-inner > .eos-footer-col h4{ color:var(--i) } /* NOT RECOLOURED, ON PURPOSE: - the focus ring. It is one colour site-wide because it is a system affordance, not decoration; a ring that changes hue per item stops being recognisable as "this is where you are". - the hero pair, the closing band and GIVE in the nav. Those speak for the site rather than for an item, and gold is what a visitor has learned to press. Scattering it removes that. - the live dot, which is red because it means live. */