/** * Fulton Dems — supplemental styles. * Everything theme.json cannot express: hover motion, focus rings, the accent * mechanic (--fd-accent / --fd-accent-deep, injected per-region by the * fulton-dems-core render_block filter), header/footer chrome, and block-style * variants. Tokens come from theme.json presets — never hardcode brand hex here. */ /* ---- Base ---------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--wp--preset--color--sky); outline-offset: 2px; } body { -webkit-font-smoothing: antialiased; } /* Full-bleed sections stack flush: kill the root block gap between template-level blocks and between the section groups inside main. Sections own their spacing via padding. The third selector matters. When the front page moved from rendering a pattern inline to rendering wp:post-content, WordPress wrapped the sections in `div.wp-block-post-content.is-layout-flow` — so they stopped being direct children of `main` and the rule above stopped reaching them. Core's 24px flow gap came back, and on full-bleed coloured bands that reads as a paper-coloured seam between every section. Matching the wrapper's children rather than `main > * > * + *` on purpose: this should apply to the post-content level and nowhere deeper. */ body .wp-site-blocks > * + *, main.wp-block-group > * + *, main.wp-block-group > .wp-block-post-content > * + * { margin-block-start: 0; } /* Uppercase tracked label (eyebrows, field labels, captain cities). */ .fd-eyebrow { text-transform: uppercase; letter-spacing: var(--wp--custom--tracking--eyebrow); font-weight: 600; font-size: var(--wp--preset--font-size--eyebrow); } /* Hover lift for cards and tiles. */ .fd-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; } .fd-lift:hover { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--lift); } /* Make the lift affordance true (P1-1). `.fd-lift` promises a click: the card rises on hover and casts a shadow. On 14 cards across /get-involved/, /how-to-vote/ and /voting-guides/ it was a
, so the promise was false — only the small "Open →" link at the bottom actually did anything. The link is stretched over the card instead of the affordance being removed, because every one of those 14 cards contains exactly ONE link, so there is no ambiguity about where the card goes. It also enlarges a small text link into a card-sized target, which is the same problem P2-14 is about. `:not(a)` matters: `.fd-lift` is also worn by ``, which is already a link end to end. Stretching a child link inside an anchor would nest clickable areas for no gain. */ .fd-lift:not(a) { position: relative; } .fd-lift:not(a) .fd-arrow-link::after { content: ""; position: absolute; inset: 0; /* Above the card's own background, below anything that needs its own click. Nothing in these cards does today — that is the precondition checked before writing this. */ z-index: 1; } .fd-arrow-link { color: var(--fd-accent-deep, var(--wp--preset--color--sky-deep)); font-weight: 600; font-size: var(--wp--preset--font-size--small); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .fd-arrow-link:hover { gap: 10px; } /* ---- Header -------------------------------------------------------------- */ /* No backdrop-filter here: a filter on the header creates a containing block that traps the nav block's position:fixed mobile overlay inside the header strip. At 0.97 alpha the blur was invisible anyway. */ .fd-header { background: rgba(22, 41, 57, 0.97); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .fd-header__brand-name { font-weight: 800; font-size: var(--wp--preset--font-size--body); color: var(--wp--preset--color--snow); letter-spacing: -0.01em; line-height: 1; } .fd-header__brand-sub { font-weight: 600; font-size: 0.62rem; /* Mist, not Stone. Stone on the header navy measured 1.93:1 against the sticky ground and 2.43:1 against the scrolled one, both far under the 4.5 floor for 9.9px text — the Muted Split Rule the footer already follows correctly. Mist gives 8.72:1 and 10.98:1 respectively. */ color: var(--wp--preset--color--mist); letter-spacing: var(--wp--custom--tracking--eyebrow); text-transform: uppercase; line-height: 1; } .fd-header__brand-name a { color: var(--wp--preset--color--snow); text-decoration: none; } /* Compact icon-only search button on the dark header. */ .fd-header__search .wp-block-search__button { background: rgba(255, 255, 255, 0.05); border: 1.5px solid rgba(255, 255, 255, 0.18); border-radius: var(--wp--custom--radius--pill); color: var(--wp--preset--color--mist); padding: 8px 14px; transition: border-color 0.18s ease; } .fd-header__search .wp-block-search__button:hover { border-color: var(--wp--preset--color--sky); } /* Nav row sits on a darker strip, like the prototype. */ .fd-header__nav-row { border-top: 1px solid rgba(255, 255, 255, 0.08); /* navy-deep (#0E1C28) at 39%, not black at 16%. Black is not in the palette — the darkest entry is ink #10202E — and a neutral overlay greys the navy it sits on rather than deepening it. Alpha chosen by compositing against the real stack (paper -> header at 97% -> this strip): it reproduces the former colour to within 1.16/255 on the worst channel, so nothing shifts visually. */ background: rgba(14, 28, 40, 0.39); } /* Navigation block: top-level links. */ .fd-header .wp-block-navigation .wp-block-navigation-item__content { color: var(--wp--preset--color--mist); font-size: var(--wp--preset--font-size--small); font-weight: 500; text-decoration: none; transition: color 0.18s ease; padding: 15px 15px; } .fd-header .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--snow); } .fd-header .wp-block-navigation .wp-block-navigation__submenu-icon { color: var(--wp--preset--color--mist); } /* Dropdown panel. A floating menu earns a shadow for separation, but a narrow one (card, not the 30px lift) reads cleaner beside its hairline than the thin-border + wide-shadow "AI panel" combo. The `.has-child` is defensive: core's navigation stylesheet declares `background: inherit` at the same specificity, and matching core's own `.has-child` outranks it so this wins on specificity rather than on load order. Order alone would in fact be enough on the front end — both sheets are in the head and this one is printed last — but the editor canvas (add_editor_style) is a separate cascade and a CSS-combine on staging can reorder, and specificity holds in all three. */ .fd-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container { background: var(--wp--preset--color--snow); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--base); box-shadow: var(--wp--preset--shadow--card); padding: 8px; min-width: 234px; } .fd-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--small); font-weight: 500; padding: 9px 14px; border-radius: var(--wp--custom--radius--sharp); white-space: nowrap; transition: background 0.14s ease, color 0.14s ease; } .fd-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--sky-deep); } /* Mobile nav. The core hamburger/close buttons inherit the page ink color — invisible on the dark strip — and the overlay inherits no background. Snow buttons, full-screen navy overlay, submenus flattened to an indented list (the white dropdown card is a desktop treatment). The overlay is painted here rather than with the nav block's overlayBackgroundColor/overlayTextColor attrs: core stamps those onto the submenu containers too, as `.has-navy-background-color`, which global styles declare `!important` — that repaints the desktop dropdown navy and no ordinary rule can outrank it. */ .fd-header .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--snow); padding: 12px; } .fd-header .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--snow); padding: 10px; } /* Mirrors core's own `:not(.has-background)` overlay default so the two rules stay conditioned alike. WP 7.0 added `:not(.disable-default-overlay)` to core's white-overlay rule, which made it specificity-equal to this one — the extra `.fd-header__nav-row` restores a strict win rather than a source-order tie that a CSS-combine on staging could invert. The container is position:fixed when open but is still a DOM descendant of the nav row. */ .fd-header .fd-header__nav-row .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--navy); padding: 72px 28px 28px; } .fd-header .is-menu-open .wp-block-navigation-item__content { font-size: var(--wp--preset--font-size--lede); padding: 10px 0; } /* Six classes deliberately: core flattens the overlay submenu at (0,5,0) with `padding-left/right: 2rem; min-width: 200px`, which beat this rule's previous (0,4,0) and rendered a 32px indent instead of 18px. Core also sets `padding-top` at (0,4,0) — an exact tie that only source order was deciding. (0,6,0) wins all three outright. */ .fd-header .fd-header__nav-row .wp-block-navigation .is-menu-open .has-child .wp-block-navigation__submenu-container { background: transparent; border: 0; box-shadow: none; padding: 0 0 8px 18px; min-width: 0; } .fd-header .is-menu-open .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: var(--wp--preset--color--mist); font-size: var(--wp--preset--font-size--body); white-space: normal; padding: 8px 0; } .fd-header .is-menu-open .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: transparent; color: var(--wp--preset--color--snow); } /* Mobile-nav breakpoint. Core defaults the nav block to overlayMenu:"mobile", which drops the hamburger at 600px — but these six items measure 656px and need ~710px of viewport before they sit on one row. Between 600px and 709px core had already taken the hamburger away while the menu was still wrapping to two rows, so there was no way to reach the nav at all. Hold the overlay treatment to 781.98px: the menu goes horizontal only at 782px (72px of headroom), reusing the same breakpoint as the grid rules at the end of this file, and matching WP's admin-bar breakpoint so the open overlay's close button clears the admin bar when logged in. Both rules outspecify core rather than relying on load order: core (0,2,0) .wp-block-navigation__responsive-container-open:not(.always-shown) here (0,3,0) .fd-header .wp-block-navigation .…-open core (0,3,0) .…__responsive-container:not(.hidden-by-default):not(.is-menu-open) here (0,4,0) .fd-header .wp-block-navigation .…-container:not(.is-menu-open) `:not(.is-menu-open)` stops the second rule matching the moment the overlay opens, so the open overlay keeps exactly the cascade it has already. Use 781.98 rather than 781 so fractional viewports (zoom, non-integer DPR) can't land in a 1px gap with neither control. */ @media (max-width: 781.98px) { .fd-header .wp-block-navigation .wp-block-navigation__responsive-container-open { display: flex; } .fd-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; } } /* ---- Region hero ---------------------------------------------------------- */ /* .fd-hero is worn by SIX templates — home, page, archive, press-release archive, the regions archive and single-region. Everything shared stays here; the photo band is .fd-hero--photo below and must not leak. Adding the photo treatment to the base class broke the other five: the scrim painted a 0.94-alpha veil over their headings (white read as grey on "Find your region"), because `> * { position: relative }` is what lifts their content above the ::before layer and they have no .fd-hero__body to carry a z-index of their own. */ .fd-hero { position: relative; overflow: hidden; border-top: 6px solid var(--fd-accent, var(--wp--custom--accent-fallback)); } .fd-hero::before { content: ""; position: absolute; inset: 0; background-image: var(--fd-map-watermark); background-repeat: no-repeat; background-position: right -80px center; background-size: 640px auto; opacity: 0.1; pointer-events: none; } .fd-hero > * { position: relative; } /* ---- Region hero: photo band (single-region only) ------------------------- */ /* The chapter photograph carries the band. The county-map watermark is suppressed here because the photograph occupies that layer; the 6px accent top border stays, being the only thing that tells the three chapters apart above the fold. THE SCRIM IS MEASURED, NOT CHOSEN. The mockup specified 0.95 across the text half, which rendered all three photographs as near-black rectangles — the band cost a photograph and delivered a texture. Measured against the brightest pixel actually visible under the text at the live band size (not an assumed white), snow clears AA at 0.58 and AAA at 0.72: north rgb(249,243,231) AA 0.58 AAA 0.72 mid rgb(241,246,249) AA 0.57 AAA 0.71 south rgb(231,246,252) AA 0.57 AAA 0.71 0.72 holds AAA on the worst of the three with the photograph still legible; the right side falls to 0.30 because no text sits there. Re-measure if the photographs are replaced. */ .fd-hero--photo { background: var(--wp--preset--color--navy); isolation: isolate; } .fd-hero--photo::before { content: none; } /* Two classes deep on purpose, and it must stay that way. This figure is a `core/post-featured-image`, so THREE other rules declare `position` on it, all at 0,1,0: .wp-block-post-featured-image relative (WordPress core's own block CSS) .fd-hero > * relative (line ~316, below) .wp-block-post-featured-image relative (line ~3531, the credit anchor) At equal specificity the last one wins, so when 105d5b4 appended the credit anchor to the end of this file the hero backdrop silently fell back into normal flow: the photograph became a ~1000px block and pushed

to 1477px on /north-fulton/ and /mid-fulton/, 1355px on /south-fulton/ — below the fold on all three. /events/ uses the same class and was affected too. `.fd-hero .fd-hero__media` is 0,2,0 and beats all three regardless of source order, which matters because one of them is core's and its print position is an enqueue-order accident we do not control. Deleting the credit anchor would also "work" today for exactly that accidental reason; specificity is the fix that stays fixed. See the :where() at ~3531. NOTE for whoever credits a hero photograph one day: `z-index: 0` here creates a stacking context, so a .fd-photo-credit injected INSIDE this figure can never rise above .fd-hero--photo::after (z-index 1) and would render invisible under the scrim. Render hero credits as a sibling of .fd-hero__body instead. No hero photo carries a credit today. */ .fd-hero .fd-hero__media { position: absolute; inset: 0; margin: 0; z-index: 0; } .fd-hero__media img { width: 100%; height: 100%; object-fit: cover; /* Subjects sit around the middle of all three frames; biasing slightly up keeps faces in shot when the band goes tall on a phone. */ object-position: 50% 42%; display: block; } .fd-hero--photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 100deg, rgba(14, 28, 40, 0.94) 0%, rgba(14, 28, 40, 0.72) 58%, rgba(14, 28, 40, 0.30) 100% ); } .fd-hero__body { position: relative; z-index: 2; } /* The band turns portrait on a phone (0.58:1 at 390px), and a horizontal ramp then puts almost the whole photograph in its dark half — the image stops doing any work. Below the two-column breakpoint the ramp runs vertically instead, so the photograph reads at the top and the text sits on the dark floor. Both stops respect the same measured floors: 0.62 at the top clears the 0.58 AA minimum for the snow tabs, 0.86 at the bottom is past the 0.72 AAA figure for the heading and body copy. */ @media (max-width: 782px) { .fd-hero--photo::after { background: linear-gradient( 180deg, rgba(14, 28, 40, 0.62) 0%, rgba(14, 28, 40, 0.72) 38%, rgba(14, 28, 40, 0.86) 100% ); } .fd-hero__media img { object-position: 50% 34%; } } /* The text stops well short of the right edge so the photograph has somewhere to be seen. The cap goes on the CHILDREN, not on .fd-hero__lede itself: constrained layout writes margin-left/right:auto !important onto its children, so capping the lede centred a 620px column in the middle of the band. */ .fd-hero__lede > * { max-width: 620px; margin-left: 0; margin-right: auto; } /* Accent carries as a RULE, not as the type. Measured against the composited band, the raw accent on this small uppercase text came out at 3.48:1 on North (sky) and 4.48:1 on Mid (peach) — both below 4.5:1. Only South (gold) passed, at 7.53:1. Snow is 9.2-9.8:1 on every chapter, and the 28px accent bar keeps the region cue. */ .fd-hero__kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: var(--wp--preset--font-size--eyebrow); font-weight: 600; letter-spacing: var(--wp--custom--tracking--eyebrow); text-transform: uppercase; color: var(--wp--preset--color--snow); } .fd-hero__kicker::before { content: ""; flex: none; width: 28px; height: 3px; /* Pill, not a literal 2px. At 3px tall the radius clamps to 1.5px either way, so this renders identically — but 2px was a fifth value in a four-step scale, and the only fifth value DESIGN.md sanctions is the square corner on gala buttons. */ border-radius: var(--wp--custom--radius--pill); background: var(--fd-accent, var(--wp--custom--accent-fallback)); } /* One button plus text links, replacing four competing buttons. */ .fd-hero__actions { align-items: center; gap: 12px 22px; } /* These are core buttons, not a paragraph of links — "Join a committee" binds to fdc_join_url so each chapter sends volunteers to its own Google Form, and only core/button carries a url binding. theme.json gives every wp-element-button a sky-deep pill background, so it has to be undone here or three solid pills appear beside the one real primary action. */ .fd-hero__links { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; } .fd-hero__links .wp-block-button, .fd-hero__links .wp-block-button__link { margin: 0; } /* One rule, not a reset plus an override: `border: 0` here is (0,2,0) and beats a `.fd-hero__links a` underline at (0,1,1), so splitting them silently drops the underline. */ .fd-hero__links .wp-block-button__link, .fd-hero__links a { background: transparent; background-color: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.4); border-radius: 0; padding: 0 0 2px; color: var(--wp--preset--color--snow); font-weight: 600; font-size: var(--wp--preset--font-size--small); text-decoration: none; } .fd-hero__links .wp-block-button__link:hover, .fd-hero__links .wp-block-button__link:focus-visible, .fd-hero__links a:hover, .fd-hero__links a:focus-visible { background: transparent; border-bottom-color: var(--wp--preset--color--snow); filter: none; } /* Hero headings overflow their own padding on phones. The size is authored as `clamp(2.6rem, 5vw, 3.9rem)` (and `h-1` in theme.json as `clamp(2.6rem, 7vw, 5rem)`), so on any phone the 2.6rem *floor* wins at 41.6px — the vw term never gets to shrink it. "announcements" then needs 343px inside the 342px the 24px page padding leaves at 390px, so it sits flush to the edge with no right margin, and at 320px it forces the whole page to scroll sideways. Re-floor it for small screens so the vw term can do its job. Capped at 2.05rem, which is the largest size that still clears a 320px viewport. `!important` is required: four templates set this as an inline style, which no selector can outrank. Scoped to `.fd-hero h1` so only hero titles move — body copy already wrapped correctly. */ @media (max-width: 600px) { .fd-hero h1 { font-size: clamp(1.8rem, 8vw, 2.05rem) !important; } } .fd-breadcrumb { color: var(--wp--preset--color--mist); font-size: var(--wp--preset--font-size--caption); } .fd-breadcrumb a { color: var(--wp--preset--color--mist); text-decoration: none; } .fd-breadcrumb a:hover { color: var(--wp--preset--color--snow); } /* ---- Region switcher (fulton-dems/region-switcher block) ----------------- */ /* Chapter tabs. Restyle of the existing region-switcher block — a