/* Theme Name: WCDP — Bricks Child Theme URI: https://www.waynedemocrats.org/ Description: Wayne County Democratic Party child theme. Styling lives in ACSS; this file carries only the brand token bridge and locked signature utilities. Logic belongs in the wcdp-functionality core plugin. Author: Michael Parks // Jus B Media Template: bricks Version: 1.0.0 Text Domain: bricks */ /* ========================================================================= WHERE THE BRAND TOKENS LIVE — they are not in this file. --font-display, --font-body, --line and --sky are pinned in ACSS → Settings → Global CSS. That is their only home (01 → Pinned custom tokens). ACSS delivers that field inline immediately after automatic.css via wp_add_inline_style() on the automaticcss-core handle, so the tokens beat anything ACSS emits by construction rather than by enqueue order, and they need no builder guard to reach the canvas. Moved out of this file 2026-08-18. They were here because the build predated the convention, not because of a decision. This file keeps only site-wide UTILITY CLASSES (01 layer 3) — the eyebrow signature device, the Sky utilities, and the form overrides below. Classes, not tokens. ========================================================================= */ /* ------------------------------------------------------------------------- Eyebrow — locked signature device (brand guide). Libre Franklin 800, uppercase, wide tracking, with a Liberty Red star. Text color inherits so it adapts to light/navy surfaces; set Sky on navy. ------------------------------------------------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-display); font-weight: 800; font-size: 0.78rem; line-height: 1.2; letter-spacing: 0.16em; text-transform: uppercase; } .eyebrow::before { content: "\2605"; /* ★ */ color: var(--accent); /* Liberty Red — display use */ font-size: 0.9em; line-height: 1; } /* ------------------------------------------------------------------------- Sky utilities — PROJECT-DEFINED, not ACSS. Named to match ACSS's .text--{color} / .bg--{color} convention so authoring reads consistently, but ACSS does not generate these: Sky has no slot. ⚠️ DARK SURFACES ONLY. Measured against the locked palette: Sky on Union Navy #102A54 .... 6.31:1 ✅ AA Sky on Ink #14181F ........... 7.92:1 ✅ AA Sky on White ................. 2.25:1 ❌ fails Sky on Paper #F4F6F9 ......... 2.08:1 ❌ fails Use it for type, eyebrows and rules sitting on navy or ink. On a light surface it is not an accessible text colour — reach for --primary instead. As a background (.bg--sky) it is a light tint: pair with --base / --secondary type, never white. ------------------------------------------------------------------------- */ .text--sky { color: var(--sky); } .bg--sky { background-color: var(--sky); } /* ------------------------------------------------------------------------- Buttons — the display face. ACSS's button layer drives weight, size, spacing, radius and colour from --btn-* tokens, but its rule never declares font-family, so buttons inherit the body face (Public Sans). The brand guide puts buttons on Libre Franklin alongside headings, nav and eyebrows, and the approved wireframe's .btn sets `font-family: var(--heading-font-family)`. This is a site-wide rule rather than a token because there is no --btn-font-family for ACSS to consume — nothing to override. Selector mirrors ACSS's own scoping, so it lands on exactly the elements ACSS styles and skips .btn--none. That makes it (0,2,0): to change the face on one button, beat it with a doubled class (.my-btn.my-btn), per 01's specificity cheat sheet. ------------------------------------------------------------------------- */ [class*="btn--"]:not(.btn--none) { font-family: var(--font-display); } /* ========================================================================= WS Form — branded through ACSS's own form system ACSS ships the WS Form styling layer (`option-forms`): ~240 rules on the `--f-*` token namespace, with `.form--light` / `.form--dark` selecting the context. Brand through those tokens; do not remap WS Form's own `--wsf-form-*` roots, which ACSS out-specifies anyway. ⚠️ THE CONTEXT CLASS DESCRIBES THE FORM, NOT THE SECTION BEHIND IT. `.form--dark` means a DARK form — dark fills, light text. The footer signup is a LIGHT form that happens to sit on navy, so it is `.form--light`. Getting this backwards means overriding every dark default back to light one token at a time; it is what the first version of this block was doing. A form wrapper with neither class renders WS Form's stock skin. ⚠️ NO --f-* TOKEN OVERRIDES LIVE HERE. The brand form values — the input border/placeholder a11y fixes and the label/button weights that used to sit in a :root block in this file — moved to ACSS's own form settings (`f-light-*` / `f-dark-*` keys in automatic_css_settings) on 2026-08-18. They compile into automatic.css as the tokens' fallback values. Reshade forms by editing those settings, not by re-adding a :root block here. Per-form scoping (like .footer__signup-form below) is the only legal --f-* CSS: it overrides the compiled fallback exactly where it applies. ========================================================================= */ /* ------------------------------------------------------------------------- Footer signup — a light form on the navy footer. The field itself needs nothing: .form--light already gives a white fill with dark text. Only the parts that render OUTSIDE the field, directly on the navy, need to change — plus the submit, whose Wayne Blue fill is 2.90:1 against this navy and fails SC 1.4.11 on its own boundary. ------------------------------------------------------------------------- */ .footer__signup-form { --f-light-label-text-color: var(--white); /* 14.18:1 on navy */ --f-light-legend-text-color: var(--white); --f-light-help-text-color: var(--white); /* Sky is the brand's designated tint-on-navy: 6.31:1 against the section, and Union Navy type on Sky is 6.31:1 too. Hover brightens to white (14.18:1) because Sky deliberately has no shade ladder. Border tracks fill — it is a separate token at 2px and is the outermost edge. */ --f-light-btn-background: var(--sky); --f-light-btn-border-color: var(--sky); --f-light-btn-text-color: var(--secondary); --f-light-btn-background-hover: var(--white); --f-light-btn-border-color-hover: var(--white); --f-light-btn-text-color-hover: var(--secondary); } /* Font family is the one surface ACSS's form layer does not reach — it sets font-family only on radio and checkbox labels. Set the faces directly: WS Form's base CSS consumes --wsf-* variables that its styler skin used to declare, and the skin is retired (`css_style` off, 2026-08-18) — so a --wsf-* remap here would be dead code that looks live. */ .wsf-form, .wsf-form :is(input, select, textarea, button) { font-family: var(--font-body); } .wsf-form button.wsf-button { font-family: var(--font-display); } /* Base chrome the retired styler skin was quietly supplying (css_style off, 2026-08-18) and ACSS's form layer does not cover: the section
falls back to the UA groove border, and .wsf-hidden-element — the visually-hidden legend WS Form emits when a section label is set not to render — loses its hiding rule and prints its label. Verified by DOM probe: fieldset computed "2px groove", legend display "table". */ .wsf-form .wsf-section { border: 0; margin: 0; padding: 0; min-inline-size: 0; } .wsf-form .wsf-hidden-element { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Horizontal choice layout (field Orientation = Horizontal adds .wsf-inline per row) — the display rule shipped in the dequeued base CSS. Mirrors it, with an ACSS token standing in for the retired --wsf spacing var. */ .wsf-form .wsf-inline { display: inline-block; margin-inline-end: var(--space-s); } /* Required marker for choice groups. WS Form's #required label span never reaches a checkbox group's top label, and `required: on` on the field is cosmetic there anyway — enforcement comes from checkbox_min, which renders as data-checkbox-min on the field wrapper. Key off that attribute so the marker tracks the real validation state. Colour matches ACSS's own marker token (…required-color, fallback --action). */ .wsf-form [data-checkbox-min] > .wsf-label::after { content: " *"; color: var(--f-light-required-color, var(--action)); } /* ------------------------------------------------------------------------- Phone links never break mid-number. Browsers treat the hyphens in 330-287-5400 as line-break opportunities, so a tel link in a narrow card wraps to "330-" / "287-5400" — found on /vote's Commissioners card during the 2026-08-18 visual pass. Site-wide by attribute so every current and future tel link is covered with no markup change. A phone number is short; forcing it whole never overflows a sane container. ------------------------------------------------------------------------- */ a[href^="tel:"] { white-space: nowrap; } /* ------------------------------------------------------------------------- Content-list bullets → RemixIcon arrow-right-s-fill (Michael, 2026-08-22). Sitewide brand device: every bulleted CONTENT list renders the solid arrow in Wayne Blue instead of the browser disc. Scope is the two shapes editor content actually produces — bare