/* Theme Name: Langley Strong (Kika) Theme URI: https://langleystrong.ca Author: Langley Strong Coalition Author URI: https://langleystrong.ca Description: Drag-and-drop WordPress theme for the Langley Strong campaign site. A complete municipal-campaign build: editorial hero, 12-column CSS Grid, token-driven design system (edit :root to re-skin), plus self-contained Events, News, Candidates, and Endorsements post types. Activate it and the full site — pages, menus, and placeholder content — appears out of the box, no plugins required. Version: 1.64.0 Requires at least: 6.0 Tested up to: 7.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: ls-kika Tags: one-column, custom-colors, custom-logo, custom-menu, featured-images, translation-ready, community --------------------------------------------------------------------------- DEVELOPER NOTE --------------------------------------------------------------------------- Everything below this header is the site's design system, copied verbatim from the approved static build (ls-kika/style.css) so the WordPress render is pixel-identical. Two layers: 1. GLOBAL — :root design tokens, reset, header, footer, buttons, shared components. Applies to every page. 2. PER-PAGE— each page's rules, scoped under a `.page-` class that the theme adds to (see ls_kika_body_class() in functions.php). Re-skin the whole site by editing the :root tokens only. The theme Version above is the single source of truth for cache-busting — functions.php enqueues every asset with wp_get_theme()->get('Version'). --------------------------------------------------------------------------- */ /* ============================================================================= LANGLEY STRONG | style.css (single stylesheet) HANDOVER NOTES -------------- • Design tokens live in :root below — re-skin by editing tokens only. • Type: Outfit (display + body), Barlow Condensed (labels/eyebrows), Caveat (script accent). Loaded from Google Fonts in each page . Reference the stacks via the --font-* tokens, never hardcoded strings. • Script accent (Caveat) is used in exactly ONE place: the hero heading, via `.hero h1 .script`. Nowhere else — CTA bands and body emphasis stay in Outfit. • Button colour roles: gold = primary, green = donate, blue = action/green. • Cards share one look: white fill with a hard black offset border (1px all round + 4px on the left & bottom edges). See the .card-frame helper note. • Header is a light (white) bar; the FOOTER is also white — its logo is the colour SVG (assets/langley-strong-logo.svg), not the white variant. • Structure of this file: 1–16 GLOBAL layer — tokens, reset, header, footer, buttons, shared bits. These apply to every page. 17+ PAGE-SCOPED layer — one section per page, every rule prefixed with a `.page-` class that also sits on that page's . Pages reuse generic class names (.hero, .eyebrow, .filter …) with different values, so scoping keeps them from colliding. To edit one page, jump to its `.page-` banner. • Colours/spacing use CSS custom properties; placeholder art is the .ph block; dashed tags (.anno-tag) flag copy needing review. ============================================================================= */ /* ===== 1. DESIGN TOKENS ===== */ :root { /* Colour palette — the complete set; reuse these, never new hexes. (Placeholder .ph hatches and the .anno-tag wireframe flags keep their own literal colours since they are scaffolding, not brand.) */ --green-900: #0e3863; /* darkest blue — dark bands, headings, header text */ --green-800: #175ea5; /* baltic blue — hero band, links, action buttons */ --green-700: #417cb6; /* light blue — dark-card fills, quiet links */ --jade: #009765; /* green — Donate button only */ --gold: #ffd071; /* brand yellow — highlight fills, on-dark accents */ --gold-dark: #626262; /* grey — section-label text on light grounds */ --cream: #fffae9; /* warm cream — page/section background */ --ink: #1c2a21; /* primary body text (near-black) */ --ink-soft: #45525e; /* secondary text (grey) */ --muted: #5f6b77; /* muted blue-grey labels (pillars/team eyebrows) — AA on cream */ --line: #e2dbc8; /* hairline card/divider border */ --white: #ffffff; --error: #b3261e; /* form validation only — no brand colour reads as "wrong", and #dc3232 (the Contact Form 7 default) misses AA on white. Not for decorative use. */ /* Type */ --font-display: 'Outfit', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Outfit', 'Helvetica Neue', Arial, sans-serif; --font-label: 'Barlow Condensed', 'Arial Narrow', sans-serif; --font-accent: 'Caveat', cursive; /* Radii + layout */ --radius-lg: 16px; --radius-md: 12px; --radius-sm: 8px; --maxw: 1160px; --maxw-narrow: 880px; } /* ===== 2. RESET & BASE ===== */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--cream); color: var(--ink); font-size: 16px; line-height: 1.6; font-family: var(--font-body); } h1, h2, h3, .display { font-weight: 600; line-height: 1.15; font-family: var(--font-display); } a { color: inherit; } .wrap { margin: 0 auto; padding: 0 32px; max-width: var(--maxw); } /* Holds a phrase together across a line break. Available inside every editable heading, because `span class` is on the inline allow-list. Its one job so far is hyphenated compounds: a line is allowed to break after the hyphen in "one-man show", which strands "one-" at the end of a line. */ .nowrap { white-space: nowrap; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } } /* ===== 3. SHARED COMPONENTS ===== */ /* Image/embed placeholder — hatched cream wireframe block (reference). The caption text indicates what photo/embed belongs there. */ .ph { display: flex; justify-content: center; align-items: center; border: 1px dashed #b9b19a; border-radius: var(--radius-md); background: repeating-linear-gradient(45deg, rgba(29, 61, 44, 0.08) 0 1px, transparent 1px 14px), repeating-linear-gradient(-45deg, rgba(29, 61, 44, 0.08) 0 1px, transparent 1px 14px), #e9e2d0; padding: 12px; color: #7a755f; font-size: 12px; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; } /* A .ph box holding a real image instead of placeholder art. Every .ph is sized by its own scoped rule (aspect-ratio, radius, margins), so keeping the wrapper and filling it means photos inherit the designed box everywhere rather than rendering at their intrinsic size. */ .ph.is-filled { border: 0; padding: 0; overflow: hidden; background: none; } .ph.is-filled img { display: block; width: 100%; height: 100%; object-fit: cover; /* Top-aligned: portraits crop from the bottom, so faces stay in frame. */ object-position: center top; } /* Dark variant — hatched lighter blue, for placeholders on the blue bands. */ .ph.dark { border-color: rgba(247, 241, 227, 0.35); background: repeating-linear-gradient(45deg, rgba(247, 241, 227, 0.07) 0 1px, transparent 1px 14px), repeating-linear-gradient(-45deg, rgba(247, 241, 227, 0.07) 0 1px, transparent 1px 14px), var(--green-700); color: rgba(247, 241, 227, 0.7); } /* Section rhythm + eyebrow labels */ section { padding: 84px 0; } /* Section eyebrow label — Barlow Condensed, grey, upper-tracked. */ .section-label { margin-bottom: 16px; color: var(--gold-dark); font-weight: 600; font-size: 16px; font-family: var(--font-label); letter-spacing: 0.1em; text-transform: uppercase; } /* Section titles are coloured by each page's `.page-* .section-title` rule (dark navy, var(--green-900)); the font comes from the global h2 rule. */ /* Heading emphasis: light-blue on LIGHT sections; dark bands override the to brand gold (see the per-band rules in the page layer). */ .section-title em, h2 em { color: var(--green-700); font-style: normal; } h1 em { font-style: normal; } /* Hero eyebrow — borderless gold Barlow Condensed text (reference). Every eyebrow on the site sits on a blue hero band. inline-flex keeps the span an atomic inline-level box so the vertical margins below actually apply. */ .eyebrow { display: inline-flex; /* 8px above / 20px below keep the eyebrow→heading gap on the same rhythm as the heading→paragraph gap (h1 margin-bottom 20px). */ margin-top: 8px; margin-bottom: 20px; color: var(--gold); font-weight: 500; font-size: 16px; font-family: var(--font-label); letter-spacing: 0.18em; text-transform: uppercase; } /* ===== Breadcrumbs (inside hero) ===== */ .breadcrumbs { margin-bottom: 16px; } .breadcrumbs ol { margin: 0; padding: 0; list-style: none; /* inline items inherit the hero's own text-align: centered on .wrap heroes, left on .wrap.hero-grid heroes */ font-family: var(--font-body); /* Outfit — quiet, not a label */ font-size: 12px; font-weight: 400; } .breadcrumbs li { display: inline; } .breadcrumbs li + li::before { content: "\203A"; /* › separator */ margin: 0 6px; color: rgba(247, 241, 227, 0.4); } .breadcrumbs a { color: rgba(247, 241, 227, 0.75); font-weight: 400; text-decoration: none; } .breadcrumbs a:hover { color: var(--gold); } .breadcrumbs [aria-current="page"] { color: rgba(247, 241, 227, 0.9); font-weight: 500; } /* Card frames — two tiers (reference): • CONTENT cards (pillars, news/resource/plan/event/form cards) get the hard black offset frame: 1px solid #000 all round + 4px on left & bottom. • PEOPLE & SOCIAL cards (candidates, team features, endorsements, posts) get a quiet hairline: 1px solid var(--line). */ /* Hero band — solid baltic blue, cream text. Per-page rules set their own padding/layout but inherit this ground (no diagonal hatch overlay). */ .hero { background: var(--green-800); padding: 84px 0 72px; color: var(--cream); } /* The heading is pure white in every mockup, while the lede below it stays cream — the band's own colour. Setting it here covers all seven heroes. */ .hero h1 { color: #fff; } /* Hero heading with a Caveat script accent. Normal leading — the "tuck" is done on the script line itself (below), NOT by collapsing the heading's line-height: a tight global leading made plain lines overlap each other (and the eyebrow) whenever the heading wrapped or carried a
. */ .hero h1:has(.script) { line-height: 1.05; } /* Hero script accent — Caveat, pollen, always lowercase. */ .hero h1 .script { color: var(--gold); font-weight: 700; /* Sized per hero rather than as 1.4em of it: the em landed on 78.4 and 89.6, and every step here has to be a multiple of four. The clamps below also sit closer to the mockups (81.2 / 84 / 89.1) than one ratio managed. Pages with a 56px hero use this; the two larger heroes override it. */ font-size: clamp(56px, 6.7vw, 80px); line-height: 1; font-family: var(--font-accent); text-transform: lowercase; } /* 60px heroes — About, Team. */ .page-about .hero h1 .script, .page-the-team .hero h1 .script { font-size: clamp(56px, 7vw, 84px); } /* 64px hero — home. */ .page-index .hero h1 .script { font-size: clamp(60px, 7.3vw, 88px); } /* Leading is not one value across the site. The three large heroes (home 64px, About and Team 60px) are drawn at 1.05, which is what the rule above gives them. The 56px heroes listed below are drawn tight — leading equal to the size — and their script accent tighter still at 0.8, which is what closes the gap between the two lines. Without the second rule the accent's taller line box holds the lines apart no matter what the heading is set to. Not every 56px hero is in this list, and that is not an oversight: News, FAQs, Resources and Events set headings short enough to stay on one line, so their leading never shows. Donate is here because "Power the campaign for a stronger Township." wraps, which is the only reason the gap was visible. Add a page here when its heading starts wrapping, not because of its size. */ .page-platform .hero h1:has(.script), .page-contact .hero h1:has(.script), .page-get-involved .hero h1:has(.script), .page-subscribe .hero h1:has(.script), .page-donate .hero h1:has(.script) { line-height: 1; } /* 0.7, not the 0.8 the mockup states. In Figma the accent is a separate overlaid layer, so its leading never affects the heading's line rhythm — all three lines sit evenly. Inline, an accent whose line box is taller than the heading's pushes its line away from the one above. That only shows where the accent lands on a middle line, which is Get Involved: its first gap measured 64px against 56px for the second. Zero takes the accent's box out of the line-height calculation altogether, so the heading's own leading governs all three lines and the accent overhangs without pushing anything — which is exactly what an overlaid layer does. Matching what the mockup looks like rather than what it says. */ .page-platform .hero h1 .script, .page-contact .hero h1 .script, .page-get-involved .hero h1 .script, .page-subscribe .hero h1 .script, .page-donate .hero h1 .script { line-height: 0; } /* Script accent alone on its line (home: "A Positive Path" / "Forward."): pull it up so it tucks tight under the heading text — the signature hero look. `:last-child` is doing real work here. An accent that merely starts a line but shares it with other words — Get Involved's "stronger Township" — must stay inline, or making it a block pushes the rest of its line down and the heading gains a line the mockup does not have. Inline accents mid-line (e.g. "One team. One goal.") never matched this in the first place. */ .hero h1 br + .script:last-child { display: block; margin-top: -0.3em; } /* Team "for" script accent (role-lines + candidate cards) — Caveat, per the approved reference, always lowercase. Endorsements' own `.for` uses a different selector (Outfit italic, not Caveat). */ .role-line .for, .cand span .for { margin-right: 2px; font-weight: 600; font-size: 1.4em; font-family: var(--font-accent); letter-spacing: 0; text-transform: lowercase; } /* Hero band contrast pass: eyebrow + labels turn pollen on the baltic ground */ .hero .section-label { color: var(--gold); } /* ===== 4. BUTTONS ===== */ .btn { display: inline-flex; align-items: center; gap: 8px; transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease; cursor: pointer; border: 2px solid transparent; border-radius: 999px; padding: 12px 24px; font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap; } .btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } /* Donate button — green fill, white text. Green is reserved for this button. */ .btn-donate { background: var(--jade); color: var(--white); } .btn-donate:hover { background: #007a52; } /* Primary CTA — gold fill, dark-blue text. */ .btn-primary { background: var(--gold); color: var(--green-900); } .btn-primary:hover { /* Darker gold keeps the navy label readable (grey hover failed contrast). */ background: #ecc068; } .btn-outline-light { border-color: rgba(247, 241, 227, 0.6); color: var(--cream); } .btn-outline-light:hover { background: rgba(247, 241, 227, 0.12); } .btn-outline-dark { border-color: var(--green-800); color: var(--green-800); } .btn-outline-dark:hover { background: var(--white); } /* Action button — solid baltic blue. (Overridden to gold inside the donate band.) */ .btn-green { background: var(--green-800); color: var(--cream); } .btn-green:hover { background: var(--green-700); } /* Quiet text link button */ .btn-text { padding: 12px 8px; color: var(--green-800); font-weight: 600; text-decoration: none; } .btn-text:hover { text-decoration: underline; } .arrow { font-family: var(--font-body); } /* ===== 5. HEADER ===== */ /* Light latte header (matches ls-static); contents are dark-on-light. */ header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(23, 94, 165, 0.18); background: var(--white); } .nav { display: flex; align-items: center; gap: 40px; margin: 0 auto; padding: 0 24px; max-width: 1280px; height: 76px; } /* Logo is the shared SVG (assets/langley-strong-logo.svg), rendered as . */ .logo { display: flex; align-items: center; color: var(--green-900); text-decoration: none; } .logo img { display: block; width: auto; height: 44px; } /* Footer logo runs larger than the header's (reference). */ footer .logo img { height: 52px; } /* Eight links have to share the row with the logo and CTAs, so the desktop nav runs slightly tighter than body copy; nowrap keeps every label on one line (the ≤1240px hamburger takes over before the row can overflow). */ nav.primary { display: flex; gap: 20px; margin-left: 0; } nav.primary a { border-bottom: 2px solid transparent; padding: 8px 0; color: var(--green-900); font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; } nav.primary a:hover, nav.primary a.active { border-bottom-color: var(--green-800); color: var(--green-900); } .nav-cta { display: flex; align-items: center; gap: 12px; margin-left: auto; } .nav-cta .btn { padding: 8px 20px; font-size: 12px; } /* "Get Involved" outline sits on the light header -> blue outline */ header .btn-outline-light { border-color: var(--green-800); color: var(--green-800); } header .btn-outline-light:hover { background: rgba(23, 94, 165, 0.08); } .btn-subscribe { padding: 8px 12px; color: var(--green-800); font-weight: 600; font-size: 12px; text-decoration: none; } .btn-subscribe:hover { color: var(--green-900); text-decoration: underline; } /* Linktree — solid brand-blue disc; the green brand icon is flipped to white via filter so it stays legible on the blue ground. */ .linktree { display: flex; justify-content: center; align-items: center; border: 1.5px solid transparent; border-radius: 50%; background: var(--green-800); width: 38px; height: 38px; color: var(--white); font-size: 16px; text-decoration: none; } .linktree:hover { background: var(--green-900); } .linktree img { display: block; filter: brightness(0) invert(1); width: auto; height: 18px; } /* Mobile nav — at ≤1240px the primary links collapse behind a hamburger (.nav-toggle, hidden on desktop). script.js toggles `nav-open` on ; the open menu drops down as a panel under the sticky header. */ .nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px; cursor: pointer; border: 0; background: none; padding: 8px; width: 40px; height: 40px; } .nav-toggle span { display: block; transition: transform 0.15s ease, opacity 0.15s ease; border-radius: 1px; background: var(--green-900); width: 20px; height: 2px; } body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 1240px) { .nav-toggle { display: flex; } nav.primary { display: none; position: absolute; top: 100%; right: 0; left: 0; flex-direction: column; gap: 0; margin-left: 0; box-shadow: 0 16px 24px rgba(14, 56, 99, 0.08); border-bottom: 1px solid rgba(23, 94, 165, 0.18); background: var(--white); padding: 8px 24px 16px; } body.nav-open nav.primary { display: flex; } nav.primary a { border-bottom: 1px solid rgba(23, 94, 165, 0.1); padding: 14px 0; font-size: 16px; } nav.primary a:hover, nav.primary a.active { border-bottom-color: var(--green-800); } } /* Phones: drop the Linktree disc and tighten the header row so the logo, Donate button, and hamburger all fit. */ @media (max-width: 640px) { .nav { gap: 12px; } .linktree { display: none; } } /* ===== 6. FOOTER ===== */ /* White footer — dark-on-light. Uses the colour logo (assets/langley-strong-logo.svg), NOT the white variant, so it stays visible on the light ground. */ footer { background: var(--white); padding: 64px 0 32px; color: var(--ink-soft); } .foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 48px; border-bottom: 1px solid rgba(0, 0, 0, 0.15); padding-bottom: 44px; } .foot-grid h4 { margin-bottom: 16px; color: var(--green-900); font-size: 20px; font-family: var(--font-display); } .foot-sub { display: flex; margin-top: 16px; max-width: 360px; } .foot-sub input { flex: 1; border: 1px solid rgba(0, 0, 0, 0.35); border-radius: 999px 0 0 999px; background: rgba(0, 0, 0, 0.04); padding: 12px 16px; color: #000; font-size: 16px; font-family: var(--font-body); } .foot-sub input::placeholder { color: rgba(0, 0, 0, 0.5); } .foot-sub button { cursor: pointer; border: none; border-radius: 0 999px 999px 0; background: var(--gold); padding: 12px 20px; color: var(--green-900); font-weight: 700; font-size: 16px; } footer nav { display: flex; flex-direction: column; gap: 8px; } footer nav a { color: var(--ink-soft); font-size: 16px; text-decoration: none; } footer nav a:hover { color: var(--green-800); text-decoration: underline; } .foot-social { display: flex; gap: 12px; margin-top: 16px; } /* Ring and glyph both take the Figma footer's values: a 1.23px hairline of baltic blue at 18%, with the mark itself in the darkest blue. The icons are inline SVG using currentColor, so `color` here drives the glyph and the two can be moved together on hover. */ .foot-social a { display: flex; justify-content: center; align-items: center; transition: background-color 0.15s ease, border-color 0.15s ease; border: 1.23px solid rgba(23, 94, 165, 0.18); border-radius: 50%; width: 44px; height: 44px; color: var(--green-900); text-decoration: none; } .foot-social a:hover { border-color: rgba(23, 94, 165, 0.45); background: rgba(23, 94, 165, 0.08); } /* The glyph is drawn against the icon's own 44px artboard, so the SVG fills the circle rather than being sized independently — the padding is already in the path coordinates. */ .foot-social .social-icon { display: block; width: 100%; height: 100%; } .foot-legal { display: flex; flex-direction: column; gap: 8px; padding-top: 28px; color: var(--ink-soft); font-size: 12px; } .foot-legal a { color: var(--ink-soft); } /* Visually-hidden text (WordPress core markup uses this class, e.g. the pagination's "Posts navigation" heading and the search form label). */ .screen-reader-text { position: absolute !important; clip-path: inset(50%); margin: -1px; border: 0; padding: 0; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; word-wrap: normal; } .screen-reader-text:focus { display: block; top: 5px; left: 5px; z-index: 100000; clip-path: none; background: var(--white); padding: 16px 24px; width: auto; height: auto; color: var(--ink); font-size: 16px; text-decoration: none; } /* ========================================================================= PAGE-SCOPED STYLES Each page's carries a `page-` class; the rules below are scoped to it so pages that reuse the same class names never collide. ========================================================================= */ /* ===== 17. PAGE — Home (.page-index) ===== */ .page-index img { display: block; max-width: 100%; } /* Dark placeholders on the blue bands — hatched lighter blue (reference). */ /* Full-bleed video band. The height is pinned to the mockup's 3.24:1 hero rather than left to the content, so the band never reflows as the copy is edited and the clip always crops to a known shape. clamp() keeps that ratio in the middle while stopping it collapsing on a phone or running away on an ultrawide. The blue underneath shows through before the poster decodes. */ .page-index .hero { display: flex; position: relative; align-items: center; background: var(--green-800); padding: 0; min-height: clamp(420px, 30.9vw, 760px); overflow: hidden; color: var(--cream); } .page-index .hero-media { position: absolute; inset: 0; z-index: 0; } .page-index .hero-media .hero-video { display: block; width: 100%; height: 100%; /* Centred cover: the band is far wider than 16:9, so the clip is cropped top and bottom and the middle of the frame is what survives. */ object-fit: cover; object-position: center; } /* The scrim. Opaque at the left edge where the copy sits, gone by the right so the footage reads cleanly, plus a light wash across the whole band to keep the video on-brand and stop a bright frame fighting the cream text. */ .page-index .hero::after { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--green-800) 0%, rgba(23, 94, 165, 0.94) 26%, rgba(23, 94, 165, 0.72) 44%, rgba(23, 94, 165, 0.32) 66%, rgba(23, 94, 165, 0.1) 100%), linear-gradient(0deg, rgba(14, 56, 99, 0.28) 0%, rgba(14, 56, 99, 0.08) 55%, rgba(14, 56, 99, 0.22) 100%); pointer-events: none; content: ""; } .page-index .hero-inner { position: relative; z-index: 2; /* Flex items are `0 1 auto`, so without this the band's only child shrinks to fit its text and the auto margins centre that narrow box — putting the copy a third of the way in instead of on the page's left grid line. */ width: 100%; padding-top: 40px; padding-bottom: 40px; max-width: var(--maxw); } /* The copy column stops well short of the full width so it never runs into the part of the frame the scrim has already released. */ .page-index .hero-inner .lede, .page-index .hero-inner h1 { max-width: 34ch; } .page-index .hero h1 { margin-bottom: 20px; color: var(--white); font-weight: 600; font-size: clamp(44px, 5.2vw, 64px); } /* Hero script accent is styled globally via `.hero h1 .script`. */ .page-index .hero p.lede { margin-bottom: 32px; /* 638.34 Figma px across, which is 518 here. Set in px rather than ch because the mockup's five lines are what is being matched, and a ch is the width of a "0" in whatever font happens to load. */ max-width: 518px; color: rgba(247, 241, 227, 0.85); font-weight: 300; font-size: 20px; } .page-index .hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } /* Motion here is pure decoration, so anyone who has asked the OS for less of it gets a still band. Handled in script.js by pausing the element rather than in CSS by hiding it: a hidden