/* ========================================================================== AURORA PADEL CLUBS — DESIGN SYSTEM v2 "Engineered for the padel boom." Vanilla CSS. No frameworks. Section-commented, hand-built. v2 evolves the static v1 stylesheet: same tokens, same components, plus the WordPress-era additions (court sub-nav + filter, single-court page, partner voices, sticky FAQ, rules index, fact stream, pagination, search, form states). Nothing was rewritten that already worked. Contents 01. Custom properties (tokens) 02. Reset & base 03. Accessibility helpers 04. Typography 05. Layout (container / section / section-header / grid) 06. Icons 07. Buttons & ghost links 08. Header & desktop nav 09. Mobile menu overlay 10. Hero (full / 60vh / compact ink) + scroll cue 11. Stat strip / stat tile 12. Cards (generic, numbered, icon, service) 13. Mission / offset media frame 14. Steps (How It Works) + quiet band 15. Court card (grid — home) 16. Court sub-nav, filter, and rows (Our Courts) 17. Single court (hero, intro, spec card, gallery) 18. Partner voices (quote cards) 19. FAQ accordion + checklist (sticky two-column) 20. News cards + pagination 21. Contact CTA 22. Footer 23. Lightbox 24. Reveal on scroll 25. Article prose + pull-quote 26. Rules layout (sticky index) + fact stream 27. Video facade (YouTube click-to-load) 28. Forms (fieldset cards, option cards, inputs, states) 29. Prev/next nav 30. Search 31. WordPress core classes 32. Utilities 33. Reduced motion ========================================================================== */ /* ========================================================================== 01. Custom properties ========================================================================== */ :root { /* Brand tokens — from brief, verbatim */ --ink: #0D1512; --ink-soft: #16211C; --paper: #FFFFFF; --paper-alt: #F3F6F4; --accent: #0A9347; --accent-bright: #2FBF71; --accent-hover: #087B3B; --text: #101614; --muted: #4F5B55; --muted-dark: #93A39B; --line: #E2E8E4; --line-dark: #223129; --body-on-ink: #E8EDEA; /* Derived system tokens */ --radius-sm: 4px; --radius-md: 6px; --shadow-1: 0 1px 2px rgb(13 21 18 / .06); --container: 1200px; --gutter: clamp(20px, 4vw, 48px); --section-pad: clamp(72px, 10vw, 136px); --header-h: 84px; --header-h-sm: 68px; --ease: cubic-bezier(.4, 0, .2, 1); --dur-fast: 150ms; --dur-med: 200ms; --dur-slow: 300ms; --reveal-dur: 450ms; --z-header: 40; --z-overlay: 50; --z-lightbox: 60; --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif; --font-body: 'Barlow', -apple-system, 'Segoe UI', sans-serif; } /* ========================================================================== 02. Reset & base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; scroll-behavior: smooth; scroll-padding-top: var(--header-h); /* overflow-x lives on (the document's scrolling element), never on : setting only one overflow axis on an element makes the other axis compute to `auto` (CSS Overflow spec), which on would turn it into its own independent scroll container and silently break window.scrollY / IntersectionObserver's viewport root. On the root element this pairing is harmless — the UA already propagates root overflow to the viewport the same way for `visible` and `auto`. */ overflow-x: hidden; } /* overflow:hidden alone is enough to block user scrolling on the root scroller — it must NOT be paired with height:100% here. height:100% on resolves against the viewport (the root element's percentage basis), which collapses the box to exactly one viewport tall and destroys the scrollable overflow area, silently zeroing window.scrollY the instant the class is applied (verified: this was the scroll-jump bug). */ html.no-scroll, html.no-scroll body { overflow: hidden; } body { font-family: var(--font-body); font-weight: 400; font-size: 1rem; line-height: 1.65; color: var(--text); background: var(--paper); min-height: 100vh; } img, picture, video, canvas, svg { display: block; max-width: 100%; } img { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: none; } a { color: inherit; text-decoration-color: currentColor; } ul, ol { padding: 0; list-style: none; } table { border-collapse: collapse; width: 100%; } ::selection { background: var(--accent); color: #fff; } /* Global focus-visible ring */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } /* On ink the brand green ring is too dark to read — brighten it. */ .section--ink :focus-visible, .hero :focus-visible, .hero-compact :focus-visible, .court-hero :focus-visible, .site-header :focus-visible, .site-footer :focus-visible, .mobile-menu :focus-visible, .lightbox :focus-visible { outline-color: var(--accent-bright); } /* Fixed header + in-page anchor nav clearance. */ section[id], article[id], [id^="court-"], [id^="rule-"] { scroll-margin-top: 96px; } /* ========================================================================== 03. Accessibility helpers ========================================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: -100px; left: 12px; z-index: 70; background: var(--accent); color: #fff; font-weight: 600; padding: 12px 20px; border-radius: var(--radius-sm); text-decoration: none; transition: top var(--dur-fast) var(--ease); } .skip-link:focus { top: 12px; } /* ========================================================================== 04. Typography ========================================================================== */ h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .01em; line-height: .95; color: var(--text); text-wrap: balance; } h1, .h1 { font-size: clamp(3.5rem, 9vw, 7.5rem); line-height: .92; } h2, .h2 { font-size: clamp(2.25rem, 5vw, 4rem); line-height: .98; } h3, .h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 600; line-height: 1.08; } h4, .h4 { font-size: 1.05rem; font-weight: 600; line-height: 1.15; } .section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #fff; } p { max-width: 65ch; } p + p { margin-top: 1em; } .lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.6; color: var(--muted); } .section--ink .lead { color: var(--body-on-ink); } small, .text-small { font-size: .875rem; } .text-muted { color: var(--muted); } .section--ink .text-muted, .card--on-ink .text-muted { color: var(--muted-dark); } .text-accent { color: var(--accent); } .text-accent-bright { color: var(--accent-bright); } .numeral { font-family: var(--font-display); font-weight: 700; font-variant-numeric: lining-nums tabular-nums; } /* Eyebrow label — precedes every h2 */ .eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: .9rem; letter-spacing: .22em; color: var(--accent); margin-bottom: 16px; } .eyebrow::before { content: ""; display: inline-block; width: 24px; height: 2px; background: currentColor; flex: none; } .section--ink .eyebrow, .eyebrow--on-ink { color: var(--accent-bright); } /* ========================================================================== 05. Layout ========================================================================== */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-pad); position: relative; } .section--tight { padding-block: clamp(56px, 7vw, 96px); } .section--paper { background: var(--paper); color: var(--text); } .section--alt { background: var(--paper-alt); color: var(--text); } .section--ink { background: var(--ink); color: var(--body-on-ink); } /* Seam between two consecutive ink sections (Partner Voices → Our Courts): one dark chapter, two chapters' worth of content, kept legible by a hairline rather than a colour change. */ .section--seam { border-top: 1px solid var(--line-dark); } .section-header { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: clamp(40px, 6vw, 64px); } @media (min-width: 768px) { .section-header { grid-template-columns: 1.1fr .9fr; align-items: end; gap: clamp(24px, 4vw, 64px); } } .section-header__intro { font-size: 1.125rem; line-height: 1.65; color: var(--muted); max-width: 46ch; } .section--ink .section-header__intro { color: var(--body-on-ink); } .grid { display: grid; gap: clamp(20px, 3vw, 32px); } .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr; } @media (min-width: 600px) { .grid-2, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } } .actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .actions-row--center { justify-content: center; margin-top: clamp(40px, 5vw, 56px); } /* ========================================================================== 06. Icons ========================================================================== */ .icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; /* SVG elements need an explicit transform-box for a CSS `transform` (e.g. the accordion's plus-icon rotation) to compute/render consistently — without it, engines vary on which box the transform is measured against. */ transform-box: fill-box; transform-origin: center; } .icon-sm { width: 18px; height: 18px; } .icon-lg { width: 32px; height: 32px; } .icon-inline { display: inline-block; vertical-align: -3px; margin-right: 6px; } /* ========================================================================== 07. Buttons & ghost links ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding-inline: 28px; font-family: var(--font-body); font-weight: 600; font-size: 1rem; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease), color var(--dur-med) var(--ease); } /* Icons inside buttons nudge on hover — transform on the svg only, so the button box never moves and nothing around it reflows. */ .btn .icon, .ghost-link .icon, .court-card__link .icon, .news-card__cta .icon { transition: transform var(--dur-med) var(--ease); } .btn:hover .icon, .btn:focus-visible .icon, .ghost-link:hover .icon, .ghost-link:focus-visible .icon, .court-card__link:hover .icon, .court-card__link:focus-visible .icon, .news-card:hover .news-card__cta .icon, .news-card:focus-visible .news-card__cta .icon { transform: translateX(3px); } /* Back-pointing arrows nudge the other way. */ .btn:hover .icon[data-dir="back"], .ghost-link:hover .icon[data-dir="back"] { transform: translateX(-3px); } .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover, .btn-primary:focus-visible { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-ghost { background: transparent; color: var(--text); border-color: currentColor; } .btn-ghost:hover, .btn-ghost:focus-visible { background: rgb(13 21 18 / .06); } .btn-ghost--on-ink { color: #fff; } .btn-ghost--on-ink:hover, .btn-ghost--on-ink:focus-visible { background: rgb(255 255 255 / .08); } .btn-sm { height: 40px; padding-inline: 20px; font-size: .9rem; } .btn-block { width: 100%; } .btn__meta { font-weight: 400; font-size: .8rem; opacity: .7; } /* Ghost link — a text-weight CTA used inside cards and rows. */ .ghost-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; color: var(--accent); text-decoration: none; cursor: pointer; transition: color var(--dur-fast) var(--ease); } .ghost-link:hover, .ghost-link:focus-visible { color: var(--accent-hover); } .ghost-link--on-ink { color: var(--accent-bright); } .ghost-link--on-ink:hover, .ghost-link--on-ink:focus-visible { color: #fff; } /* ========================================================================== 08. Header & desktop nav ========================================================================== */ .site-header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: var(--z-header); background: transparent; border-bottom: 1px solid transparent; color: #fff; transition: background-color var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease); } html.menu-open .site-header { z-index: 51; } .site-header.scrolled { background: var(--ink); border-bottom-color: var(--line-dark); box-shadow: var(--shadow-1); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 20px; transition: padding-block var(--dur-med) var(--ease); } /* v2: the bar tightens once you leave the hero, so the content gains height as you read. Padding only — the logo keeps its size, so nothing jitters. */ .site-header.scrolled .site-header__inner { padding-block: 12px; } /* Pages without a full-bleed hero start with the solid bar so the white nav text is never on white paper. */ body.has-compact-hero .site-header { background: var(--ink); border-bottom-color: var(--line-dark); } .site-header__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; flex: none; } .site-header__logo { width: 44px; height: 44px; display: block; object-fit: contain; } .site-header__wordmark { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.15rem; letter-spacing: .03em; white-space: nowrap; } .site-header__nav { display: none; align-items: center; gap: clamp(20px, 3vw, 40px); } @media (min-width: 1080px) { .site-header__nav { display: flex; } } .site-header__links { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px); } .site-header__links a { position: relative; display: block; color: #fff; text-decoration: none; font-family: var(--font-body); font-weight: 600; font-size: .95rem; padding-block: 6px; white-space: nowrap; transition: color var(--dur-fast) var(--ease); } .site-header__links a:hover, .site-header__links a:focus-visible { color: var(--accent-bright); } /* Any aria-current value counts: "page" for the page itself, "true" for an ancestor (Our Courts while reading a court, News while reading a post). */ .site-header__links a[aria-current]::after, .site-header__links a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--accent-bright); } /* An ancestor is a weaker state than the page itself. */ .site-header__links a[aria-current="true"]::after { background: var(--muted-dark); } /* While the home-page scroll-spy owns an anchor section, the static "Home is the current page" underline stands down so only one item reads as active. aria-current is untouched — this is purely the visual mark. */ .site-header__links.has-spy-active a[aria-current]:not(.is-active)::after { display: none; } .menu-toggle { position: relative; width: 44px; height: 44px; display: none; align-items: center; justify-content: center; cursor: pointer; color: #fff; flex: none; } @media (max-width: 1079px) { .menu-toggle { display: inline-flex; } } .menu-toggle__bar { position: absolute; width: 24px; height: 2px; background: currentColor; transition: transform var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease); } .menu-toggle__bar:nth-child(1) { transform: translateY(-7px); } .menu-toggle__bar:nth-child(2) { transform: translateY(0); } .menu-toggle__bar:nth-child(3) { transform: translateY(7px); } .menu-toggle.is-active .menu-toggle__bar:nth-child(1) { transform: translateY(0) rotate(45deg); } .menu-toggle.is-active .menu-toggle__bar:nth-child(2) { opacity: 0; } .menu-toggle.is-active .menu-toggle__bar:nth-child(3) { transform: translateY(0) rotate(-45deg); } /* ========================================================================== 09. Mobile menu overlay ========================================================================== */ .mobile-menu { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; overflow-y: auto; padding: 110px 24px 60px; opacity: 0; visibility: hidden; transition: opacity var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow); } .mobile-menu.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-slow) var(--ease), visibility 0s linear 0s; } @media (min-width: 1080px) { .mobile-menu { display: none; } } .mobile-menu__links { text-align: center; } .mobile-menu__links a { display: inline-block; font-family: var(--font-display); text-transform: uppercase; font-weight: 600; font-size: clamp(1.75rem, 7vw, 2.5rem); line-height: 1.25; color: #fff; text-decoration: none; opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), color var(--dur-fast) var(--ease); } .mobile-menu__links a:hover, .mobile-menu__links a:focus-visible { color: var(--accent-bright); } .mobile-menu__links a[aria-current] { color: var(--accent-bright); } .mobile-menu.is-open .mobile-menu__links a { opacity: 1; transform: translateY(0); } .mobile-menu__links li:nth-child(1) a { transition-delay: 40ms; } .mobile-menu__links li:nth-child(2) a { transition-delay: 80ms; } .mobile-menu__links li:nth-child(3) a { transition-delay: 120ms; } .mobile-menu__links li:nth-child(4) a { transition-delay: 160ms; } .mobile-menu__links li:nth-child(5) a { transition-delay: 200ms; } .mobile-menu__links li:nth-child(6) a { transition-delay: 240ms; } .mobile-menu__links li:nth-child(7) a { transition-delay: 280ms; } .mobile-menu__links li:nth-child(8) a { transition-delay: 320ms; } .mobile-menu__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; flex: none; } .mobile-menu__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; padding-top: 24px; border-top: 1px solid var(--line-dark); width: min(420px, 100%); } .mobile-menu__contact { display: inline-flex; align-items: center; gap: 8px; color: var(--muted-dark); text-decoration: none; font-size: .9rem; transition: color var(--dur-fast) var(--ease); } .mobile-menu__contact:hover, .mobile-menu__contact:focus-visible { color: var(--accent-bright); } /* ========================================================================== 10. Hero ========================================================================== */ .hero { position: relative; isolation: isolate; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; overflow: hidden; background: var(--ink); } .hero--60 { min-height: 60vh; } .hero__media { position: absolute; inset: 0; z-index: -1; } .hero__video { width: 100%; height: 100%; object-fit: cover; display: block; } .hero__overlay { position: absolute; inset: 0; background: rgb(13 21 18 / .58); } /* Content is already bottom-anchored by the flex column on .hero, so it only needs a small top buffer (guards against the eyebrow touching the fixed header on very short/tall content) — NOT the header-clearance padding that .hero-compact (below) needs, since that component isn't flex-anchored. */ .hero__content { position: relative; padding-block: 120px 56px; } .hero__title { color: #fff; margin-bottom: 24px; } .hero__sub { color: var(--body-on-ink); font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 52ch; margin-bottom: 36px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: clamp(40px, 6vw, 72px); } /* v2: a quiet scroll cue at the bottom-right of the hero content column. A static rule and a label — no bouncing loop. */ .hero__scroll-cue { display: none; position: absolute; right: var(--gutter); bottom: 56px; flex-direction: column; align-items: center; gap: 12px; color: var(--muted-dark); text-decoration: none; font-family: var(--font-display); text-transform: uppercase; font-size: .78rem; letter-spacing: .22em; transition: color var(--dur-med) var(--ease); } @media (min-width: 900px) { .hero__scroll-cue { display: inline-flex; } } .hero__scroll-label { writing-mode: vertical-rl; } .hero__scroll-line { width: 1px; height: 40px; background: currentColor; } .hero__scroll-cue:hover, .hero__scroll-cue:focus-visible { color: var(--accent-bright); } /* Compact ink hero — interior pages */ .hero-compact { position: relative; isolation: isolate; background: var(--ink); color: #fff; padding-block: clamp(150px, 20vw, 200px) clamp(56px, 7vw, 80px); } /* The shared h1 rule (color: var(--text)) matches the

element directly, which beats the inherited color:#fff from .hero-compact — same specificity trap .herotitle works around on the full-bleed home hero. Fix at the source instead of per-page overrides: target the h1 directly here. Also give interior titles their own (smaller) size — unstyled they inherit the home hero's h1 clamp (3.5rem–7.5rem), oversized for a compact header. / .hero-compact h1 { color: #fff; font-size: clamp(2.5rem, 6vw, 4.5rem); } .hero-compactstandfirst { color: var(--body-on-ink); font-size: 1.125rem; max-width: 65ch; margin-top: 20px; } .hero-compactactions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; } .hero-compactsearch { margin-top: 28px; max-width: 560px; } .hero-compact .article-meta { margin-top: 20px; } / ========================================================================== 11. Stat strip / stat tile ========================================================================== / .stat-strip { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line-dark); } @media (min-width: 860px) { .stat-strip { grid-template-columns: repeat(4, 1fr); } } .stat-tile { padding: 24px 16px 0; border-left: 1px solid var(--line-dark); text-align: center; } / Two-up on mobile: reset the rule on each row's first cell. / .stat-tile:nth-child(odd) { border-left: none; } @media (min-width: 860px) { .stat-tile:nth-child(odd) { border-left: 1px solid var(--line-dark); } .stat-tile:first-child { border-left: none; padding-left: 0; } } .stat-tile:nth-child(n + 3) { padding-top: 28px; } @media (min-width: 860px) { .stat-tile:nth-child(n + 3) { padding-top: 24px; } } .stat-tilenum { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.25rem, 5vw, 4rem); color: var(--accent-bright); line-height: 1; } .stat-tilelabel { display: block; margin-top: 8px; font-family: var(--font-display); text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; color: var(--muted-dark); } / Stat tile on paper (not currently used on the home hero, kept for reuse). / .section--paper .stat-tilenum, .section--alt .stat-tilenum { color: var(--accent); } / ========================================================================== 12. Cards ========================================================================== / .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 32px; transition: border-color var(--dur-med) var(--ease), transform var(--dur-med) var(--ease); } .card:hover { border-color: var(--accent); transform: translateY(-2px); } .card--on-ink { background: var(--ink-soft); border-color: var(--line-dark); color: var(--body-on-ink); } .card--on-ink:hover { border-color: var(--accent-bright); } .card--static { transition: border-color var(--dur-med) var(--ease); } .card--static:hover { transform: none; } / Numbered card — Welcome section (01 / 02 / 03). v2: bigger numeral and a 2px top rule that takes the accent on hover. / .numbered-card { border-top: 2px solid var(--line); border-radius: 0 0 var(--radius-md) var(--radius-md); transition: border-color var(--dur-med) var(--ease), transform var(--dur-med) var(--ease); } .numbered-card:hover { border-top-color: var(--accent); } .numbered-cardnum { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 4vw, 3.25rem); color: var(--accent); line-height: 1; margin-bottom: 20px; } .numbered-cardtitle { margin-bottom: 12px; } .numbered-cardbody { color: var(--muted); } / Icon card — We Work With / .icon-card { display: flex; flex-direction: column; } .icon-cardicon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--accent); margin-bottom: 24px; } .icon-cardtitle { margin-bottom: 10px; } .icon-cardbody { color: var(--muted); } .icon-cardlink { margin-top: auto; padding-top: 24px; align-self: flex-start; } / Service card — icon image, 40px / .service-card { text-align: left; } .service-cardicon { width: 40px; height: 40px; object-fit: contain; margin-bottom: 24px; } .service-cardtitle { margin: 0 0 12px; } .service-cardbody { color: var(--muted); font-size: .95rem; } / ========================================================================== 13. Mission / offset media frame ========================================================================== / .mission { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; } @media (min-width: 900px) { .mission { grid-template-columns: 1fr .85fr; gap: clamp(48px, 6vw, 96px); } .missionmedia { order: 2; } } .missionbody .eyebrow { margin-bottom: 16px; } .missionbody h2 { margin-bottom: 28px; } .missionbody p { color: var(--body-on-ink); } .missionbody p + p { margin-top: 20px; } .missionmedia { position: relative; isolation: isolate; padding: 0 24px 24px 0; } .missionmedia::before { content: ""; position: absolute; top: 24px; left: 24px; right: 0; bottom: 0; border: 1px solid var(--line-dark); z-index: 0; } .missionmedia img { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--ink-soft); } / ========================================================================== 14. Steps (How It Works) + quiet band ========================================================================== / .steps { display: grid; grid-template-columns: 1fr; gap: 48px; position: relative; } @media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 32px; } .steps::before { content: ""; position: absolute; top: 26px; left: 6%; right: 6%; height: 1px; background: var(--line); z-index: 0; } } .step { position: relative; z-index: 1; } .stepnum { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 4vw, 3.25rem); color: var(--accent); line-height: 1; background: var(--paper); padding-right: 14px; margin-bottom: 16px; } / v2: a small line icon per step, sitting under the numeral. / .stepicon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--accent); margin-bottom: 20px; } .steptitle { margin-bottom: 10px; } .stepbody { color: var(--muted); } .quiet-band { margin-top: clamp(56px, 8vw, 96px); padding: clamp(40px, 6vw, 64px); background: var(--paper-alt); border: 1px solid var(--line); border-radius: var(--radius-md); display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; } @media (min-width: 768px) { .quiet-band { grid-template-columns: 1.4fr auto; } } .quiet-bandtitle { margin-bottom: 12px; } .quiet-bandbody { color: var(--muted); } / ========================================================================== 15. Court card (grid — home) ========================================================================== / .court-cardmedia { position: relative; isolation: isolate; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-sm); margin: -32px -32px 24px; width: calc(100% + 64px); padding: 0; border: 0; cursor: pointer; background: var(--ink-soft); } .court-cardmedia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; / v2: slow zoom on hover. Transform only — the box never changes size, so nothing around it reflows and the overflow clip does the framing. / transition: transform var(--dur-slow) var(--ease); } .court-card:hover .court-cardmedia img, .court-card:focus-within .court-cardmedia img { transform: scale(1.04); } .court-cardmedia img.is-swap { opacity: 0; transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); } .court-card:hover .court-cardmedia img.is-swap, .court-card:focus-within .court-cardmedia img.is-swap { opacity: 1; } / v2: catalogue index and photo count, flat chips on the image corners. / .court-cardindex, .court-cardcount, .court-rowcount { position: absolute; z-index: 1; font-family: var(--font-display); text-transform: uppercase; font-size: .75rem; letter-spacing: .12em; line-height: 1; padding: 7px 10px; background: rgb(13 21 18 / .78); color: #fff; border: 1px solid rgb(255 255 255 / .16); border-radius: var(--radius-sm); } .court-cardindex { top: 12px; left: 12px; } .court-cardcount, .court-rowcount { bottom: 12px; right: 12px; } .court-cardtag { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: .8rem; letter-spacing: .12em; color: var(--muted); margin-bottom: 6px; } .card--on-ink .court-cardtag { color: var(--muted-dark); } .court-cardname { margin-bottom: 0; } .court-cardname a { text-decoration: none; transition: color var(--dur-fast) var(--ease); } .court-cardname a:hover, .court-cardname a:focus-visible { color: var(--accent-bright); } .section--paper .court-cardname a:hover { color: var(--accent); } .court-cardactions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); } .card--on-ink .court-cardactions { border-top-color: var(--line-dark); } .court-cardlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; color: inherit; cursor: pointer; text-decoration: none; padding: 0; transition: color var(--dur-fast) var(--ease); } .court-cardlink:hover, .court-cardlink:focus-visible { color: var(--accent); } .card--on-ink .court-cardlink:hover, .card--on-ink .court-cardlink:focus-visible { color: var(--accent-bright); } / ========================================================================== 16. Court sub-nav, filter, and rows (Our Courts) ========================================================================== / .court-subnav { position: sticky; top: var(--header-h-sm); z-index: 30; background: var(--paper); border-bottom: 1px solid var(--line); } .court-subnavinner { display: flex; flex-direction: column; gap: 12px; padding-block: 12px; } @media (min-width: 1024px) { .court-subnavinner { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; } } .court-subnavmodels { min-width: 0; overflow: hidden; } .court-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; / Keep the focus ring from being clipped by the scroller. / scroll-padding-inline: 8px; } .court-chip { display: block; white-space: nowrap; font-family: var(--font-display); text-transform: uppercase; font-size: .82rem; letter-spacing: .1em; color: var(--muted); text-decoration: none; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .court-chip:hover, .court-chip:focus-visible { color: var(--accent); border-color: var(--accent); } .court-chip.is-active { color: #fff; background: var(--accent); border-color: var(--accent); } .court-chip[hidden] { display: none; } .court-filter { display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; } .court-filterbtn { font-family: var(--font-display); text-transform: uppercase; font-size: .82rem; letter-spacing: .1em; color: var(--muted); padding: 9px 16px; cursor: pointer; border-left: 1px solid var(--line); transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .court-filterbtn:first-child { border-left: none; } .court-filterbtn:hover { color: var(--accent); } .court-filterbtn.is-active { background: var(--ink); color: #fff; } / Court row — alternating catalogue layout / .court-row { display: grid; grid-template-columns: 1fr; gap: 32px; padding-block: clamp(48px, 7vw, 72px); border-bottom: 1px solid var(--line); align-items: center; } .court-row:first-of-type { border-top: 1px solid var(--line); } .court-row[hidden] { display: none; } @media (min-width: 900px) { .court-row { grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 6vw, 88px); } .court-row--reverse .court-rowmedia { order: 2; } .court-row--reverse .court-rowcontent { order: 1; } } .court-rowfeature { position: relative; isolation: isolate; display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0; cursor: pointer; background: var(--paper-alt); } .court-rowfeature img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease), opacity var(--dur-med) var(--ease); } .court-rowfeature:hover img, .court-rowfeature:focus-visible img { transform: scale(1.03); opacity: .92; } .court-rowthumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; } .court-rowthumbs button { aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0; cursor: pointer; } .court-rowthumbs img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity var(--dur-med) var(--ease); } .court-rowthumbs button:hover img, .court-rowthumbs button:focus-visible img { opacity: .8; } .court-rowindex { font-size: .85rem; letter-spacing: .14em; color: var(--muted-dark); margin-bottom: 12px; } .court-rowtag { font-family: var(--font-display); text-transform: uppercase; font-size: .85rem; letter-spacing: .12em; color: var(--accent); margin-bottom: 10px; } .court-rowname { margin-bottom: 16px; } .court-rowname a { text-decoration: none; transition: color var(--dur-fast) var(--ease); } .court-rowname a:hover, .court-rowname a:focus-visible { color: var(--accent); } .court-rowexcerpt { color: var(--muted); margin-bottom: 24px; } .court-rowactions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 28px; } .court-listcount { margin-bottom: 0; } / ========================================================================== 17. Single court ========================================================================== / .court-hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: min(72vh, 640px); background: var(--ink); color: #fff; overflow: hidden; } .court-heromedia { position: absolute; inset: 0; z-index: -1; } .court-heromedia img { width: 100%; height: 100%; object-fit: cover; } .court-herocontent { padding-block: 140px 56px; } .court-hero h1 { color: #fff; font-size: clamp(2.75rem, 7vw, 5.5rem); } .court-intro { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; } @media (min-width: 900px) { .court-intro { grid-template-columns: 1.4fr .6fr; } } .court-introactions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; } .spec-card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 32px; background: var(--paper-alt); } .spec-cardicon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); color: var(--accent); margin-bottom: 20px; } .spec-cardtitle { margin-bottom: 10px; font-size: 1.15rem; } .spec-cardbody { color: var(--muted); font-size: .95rem; margin-bottom: 24px; } .spec-cardmeta { margin-top: 14px; font-family: var(--font-display); text-transform: uppercase; font-size: .78rem; letter-spacing: .12em; color: var(--muted); } .court-gallery { display: grid; grid-template-columns: 1fr; gap: clamp(12px, 2vw, 20px); } @media (min-width: 700px) { .court-gallery { grid-template-columns: repeat(2, 1fr); } .court-galleryitem--wide { grid-column: 1 / -1; } } .court-galleryitem { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0; cursor: pointer; background: var(--paper); } .court-galleryitem--wide { aspect-ratio: 21 / 9; } .court-galleryitem img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); } .court-galleryitem:hover img, .court-galleryitem:focus-visible img { transform: scale(1.03); } .court-nav-wrap { padding-block: clamp(40px, 5vw, 64px); } / ========================================================================== 18. Partner voices (quote cards) ========================================================================== / .quote-grid { align-items: stretch; } .quote-card { display: flex; flex-direction: column; gap: 24px; height: 100%; padding: clamp(28px, 4vw, 40px); background: var(--ink-soft); border: 1px solid var(--line-dark); border-left: 2px solid var(--accent-bright); border-radius: 0 var(--radius-md) var(--radius-md) 0; transition: border-color var(--dur-med) var(--ease); } .quote-card:hover { border-color: var(--accent-bright); } .quote-cardquote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 2.2vw, 1.75rem); line-height: 1.28; color: #fff; } .quote-cardquote p { max-width: none; } .quote-cardattribution { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line-dark); } .quote-cardname { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: .9rem; color: var(--accent-bright); } .quote-cardrole { display: block; margin-top: 4px; font-size: .875rem; color: var(--muted-dark); } .quote-gridmore { margin-top: clamp(32px, 4vw, 48px); } / ========================================================================== 19. FAQ accordion + checklist ========================================================================== / / v2: sticky intro column on desktop, accordion on the right. / .faq-layout { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 5vw, 72px); } @media (min-width: 1024px) { .faq-layout { grid-template-columns: .8fr 1.2fr; align-items: start; } .faq-asideinner { position: sticky; top: calc(var(--header-h-sm) + 32px); } } .faq-asideintro { color: var(--muted); font-size: 1.125rem; margin-top: 20px; max-width: 40ch; } .faq-asidecontact { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); } .faq-asidecontact-title { font-family: var(--font-display); text-transform: uppercase; font-size: .85rem; letter-spacing: .14em; color: var(--muted); margin-bottom: 10px; } .faq-asidecontact a { font-weight: 600; color: var(--accent); text-decoration: none; overflow-wrap: anywhere; transition: color var(--dur-fast) var(--ease); } .faq-asidecontact a:hover, .faq-asidecontact a:focus-visible { color: var(--accent-hover); } .accordion { border-top: 1px solid var(--line); } .accordion-item { border-bottom: 1px solid var(--line); } .accordion-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 4px; font-family: var(--font-body); font-weight: 600; font-size: 1.125rem; color: var(--text); transition: color var(--dur-fast) var(--ease); } .accordion-item summary:hover { color: var(--accent); } .accordion-item summary::-webkit-details-marker { display: none; } .accordion-item summary::marker { content: ""; } .accordion-item summary .icon-plus { color: var(--accent); transition: transform var(--dur-med) var(--ease); } / `.is-open` is mirrored from the native `open` state by main.js as a defence-in-depth measure; the attribute selector alone is correct and sufficient per spec, so both are kept (harmless if both match). / .accordion-item[open] summary .icon-plus, .accordion-item.is-open summary .icon-plus { transform: rotate(45deg); } .accordion-itempanel { padding: 0 4px 32px; color: var(--muted); max-width: 68ch; } .accordion-itempanel > + * { margin-top: 16px; } .accordion-itempanel ul { padding-left: 0; } .accordion-itempanel li { position: relative; padding-left: 22px; margin-top: 10px; } .accordion-itempanel li::before { content: ""; position: absolute; left: 4px; top: .65em; width: 6px; height: 6px; background: var(--accent); } .accordion-itempanel li > ul { margin-top: 10px; } .accordion-itempanel li > ul li::before { background: var(--muted); } .accordion-itempanel .qualifier { display: block; font-style: italic; color: var(--muted); margin-bottom: 4px; } .accordion-itempanel h4 { color: var(--text); margin-top: 20px; } .accordion-itempanel dl { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 12px; } .accordion-itempanel dl > div { border-left: 2px solid var(--line); padding-left: 16px; } .accordion-itempanel dt { font-weight: 600; color: var(--text); } .accordion-itempanel dd { margin: 4px 0 0; font-family: var(--font-display); font-weight: 700; color: var(--accent); font-size: 1.15rem; } .accordion-itempanel dd span { display: block; font-family: var(--font-body); font-weight: 400; color: var(--muted); font-size: .875rem; margin-top: 2px; } .accordion-itemcols { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 12px; } @media (min-width: 600px) { .accordion-itemcols { grid-template-columns: 1fr 1fr; } } .faq-support { margin-top: clamp(40px, 5vw, 56px); } .checklist { margin-top: 20px; } .checklist li { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); color: var(--muted); } .checklist li:first-child { border-top: none; } .checklist .icon { color: var(--accent); margin-top: 2px; } /* ========================================================================== 20. News cards + pagination ========================================================================== / .news-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; isolation: isolate; background: var(--paper); height: 100%; transition: border-color var(--dur-med) var(--ease), transform var(--dur-med) var(--ease); } .news-card:hover, .news-card:focus-visible { border-color: var(--accent); transform: translateY(-2px); } .news-cardmedia { aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-alt); } .news-cardmedia img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease); } .news-card:hover .news-cardmedia img, .news-card:focus-visible .news-cardmedia img { transform: scale(1.04); } .news-cardbody { display: flex; flex-direction: column; flex: 1; padding: 28px; } / v2: date + category above the title. / .news-cardmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-family: var(--font-display); text-transform: uppercase; font-size: .78rem; letter-spacing: .12em; color: var(--muted); margin-bottom: 14px; } .news-cardcat { color: var(--accent); } .news-cardcat::before { content: ""; display: inline-block; width: 12px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 10px; } .news-cardtitle { margin: 0 0 14px; } / v2: accent underline on hover. text-decoration-color is animatable and costs no layout, so a multi-line title underlines cleanly without the pseudo-element fragmentation problem. / .news-cardtitle-ink { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: transparent; transition: text-decoration-color var(--dur-med) var(--ease); } .news-card:hover .news-cardtitle-ink, .news-card:focus-visible .news-cardtitle-ink { text-decoration-color: var(--accent); } .news-cardexcerpt { color: var(--muted); margin: 0 0 18px; } .news-cardcta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-weight: 600; font-size: .9rem; color: var(--accent); } / Pagination / .pagination { margin-top: clamp(48px, 6vw, 72px); padding-top: 32px; border-top: 1px solid var(--line); } .pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; } .pagination .page-numbers { display: inline-flex; align-items: center; gap: 8px; min-width: 44px; height: 44px; padding-inline: 14px; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; text-decoration: none; color: var(--muted); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .pagination a.page-numbers:hover, .pagination a.page-numbers:focus-visible { color: var(--accent); border-color: var(--accent); } .pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; } .pagination .page-numbers.dots { border-color: transparent; } / ========================================================================== 21. Contact CTA ========================================================================== / .contact-cta { display: grid; grid-template-columns: 1fr; gap: 32px; } @media (min-width: 900px) { .contact-cta { grid-template-columns: 1.2fr .8fr; align-items: end; } } .contact-ctabody h2 { margin-bottom: 28px; } .contact-ctabody p { color: var(--body-on-ink); } .contact-ctabody p + p { margin-top: 16px; } .contact-ctaactions { display: flex; flex-direction: column; gap: 20px; } @media (min-width: 900px) { .contact-ctaactions { align-items: flex-end; text-align: right; } } .contact-ctabuttons { display: flex; flex-wrap: wrap; gap: 16px; } @media (min-width: 900px) { .contact-ctabuttons { justify-content: flex-end; } } / v2: the address itself, set large, as the third CTA. / .contact-ctaemail { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 2.4vw, 1.9rem); line-height: 1.1; color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: var(--line-dark); overflow-wrap: anywhere; transition: color var(--dur-med) var(--ease), text-decoration-color var(--dur-med) var(--ease); } .contact-ctaemail:hover, .contact-ctaemail:focus-visible { color: var(--accent-bright); text-decoration-color: var(--accent-bright); } .contact-ctasocial { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line-dark); border-radius: var(--radius-sm); color: var(--muted-dark); transition: color var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease); } .contact-ctasocial:hover, .contact-ctasocial:focus-visible { color: var(--accent-bright); border-color: var(--accent-bright); } / ========================================================================== 22. Footer ========================================================================== / .site-footer { background: var(--ink); color: var(--body-on-ink); padding-block: clamp(56px, 8vw, 96px) 32px; } .site-footerwordmark { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: #fff; font-size: clamp(2.5rem, 8vw, 5rem); line-height: .95; margin-bottom: clamp(40px, 6vw, 72px); max-width: none; } .site-footergrid { display: grid; grid-template-columns: 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line-dark); } @media (min-width: 700px) { .site-footergrid { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; } } .site-footerbrand { max-width: 34ch; } .site-footerlogo { width: 40px; height: 40px; margin-bottom: 16px; object-fit: contain; } .site-footerbrand p { color: var(--muted-dark); } .site-footercol-title { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: .85rem; letter-spacing: .14em; color: var(--muted-dark); margin-bottom: 18px; } .site-footerlist li { margin-top: 10px; } .site-footerlist li:first-child { margin-top: 0; } .site-footerlist a, .site-footercol a { color: var(--body-on-ink); text-decoration: none; overflow-wrap: anywhere; transition: color var(--dur-fast) var(--ease); } .site-footerlist a:hover, .site-footerlist a:focus-visible, .site-footercol a:hover, .site-footercol a:focus-visible { color: var(--accent-bright); } .site-footerpartner-logo { max-height: 56px; width: auto; } .site-footerbottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 28px; font-size: .875rem; color: var(--muted-dark); } .site-footerbottom p { max-width: none; } .site-footerbottom-links { display: flex; align-items: center; gap: 10px; } .site-footerbottom a { color: var(--muted-dark); text-decoration: underline; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease); } .site-footerbottom a:hover, .site-footerbottom a:focus-visible { color: var(--accent-bright); } / ========================================================================== 23. Lightbox ========================================================================== / .lightbox { position: fixed; inset: 0; z-index: var(--z-lightbox); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow); } .lightbox.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-slow) var(--ease), visibility 0s linear 0s; } .lightboxbackdrop { position: absolute; inset: 0; background: rgb(13 21 18 / .94); border: none; cursor: pointer; } .lightboxinner { position: relative; z-index: 1; width: min(90vw, 1100px); max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: 18px; padding-inline: 64px; } .lightboxstage { width: 100%; text-align: center; } .lightboximage { max-height: 76vh; max-width: 100%; width: auto; margin-inline: auto; border: 1px solid var(--line-dark); background: var(--ink-soft); } .lightboxcaption { color: var(--muted-dark); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; max-width: none; } .lightboxclose, .lightboxprev, .lightboxnext { position: absolute; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: rgb(13 21 18 / .7); border: 1px solid var(--line-dark); color: #fff; cursor: pointer; transition: background-color var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease); } .lightboxclose:hover, .lightboxclose:focus-visible, .lightboxprev:hover, .lightboxprev:focus-visible, .lightboxnext:hover, .lightboxnext:focus-visible { background: var(--ink); border-color: var(--accent-bright); } .lightboxclose { top: 20px; right: 20px; } .lightboxprev { left: 12px; top: 50%; transform: translateY(-50%); } .lightboxnext { right: 12px; top: 50%; transform: translateY(-50%); } .lightboxthumbs { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; padding: 4px; } .lightboxthumb { flex: none; width: 64px; height: 64px; border: 2px solid transparent; border-radius: var(--radius-sm); overflow: hidden; padding: 0; cursor: pointer; background: var(--ink-soft); } .lightboxthumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .lightboxthumb.is-active { border-color: var(--accent-bright); } @media (max-width: 640px) { .lightboxinner { padding-inline: 48px; } .lightboxclose { top: 12px; right: 12px; width: 38px; height: 38px; } .lightboxprev { left: 4px; width: 38px; height: 38px; } .lightboxnext { right: 4px; width: 38px; height: 38px; } } / ========================================================================== 24. Reveal on scroll ========================================================================== / html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease); } html.js .reveal.is-visible { opacity: 1; transform: translateY(0); } html.js .reveal-d1 { transition-delay: 80ms; } html.js .reveal-d2 { transition-delay: 160ms; } html.js .reveal-d3 { transition-delay: 240ms; } / ========================================================================== 25. Article prose + pull-quote ========================================================================== / .prose { max-width: 68ch; margin-inline: auto; } .prose--flush { margin-inline: 0; } .prose > + * { margin-top: 1.4em; } .prose h2 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.25rem); margin-top: 1.8em; } .prose h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); margin-top: 1.6em; } .prose p { max-width: none; color: var(--text); } .prose ul, .prose ol { padding-left: 0; margin-top: 1em; } .prose li { position: relative; padding-left: 24px; margin-top: 10px; } .prose ul li::before { content: ""; position: absolute; left: 4px; top: .65em; width: 6px; height: 6px; background: var(--accent); } .prose ol { counter-reset: prose-counter; } .prose ol li { counter-increment: prose-counter; padding-left: 30px; } .prose ol li::before { content: counter(prose-counter) "."; position: absolute; left: 0; top: 0; font-family: var(--font-display); font-weight: 700; color: var(--accent); } .prose a { color: var(--accent); text-underline-offset: 3px; } .prose a:hover { color: var(--accent-hover); } .prose strong { font-weight: 600; } .prose img { width: 100%; height: auto; border: 1px solid var(--line); } .prose figure { margin: 0; } .prose figcaption { font-size: .875rem; color: var(--muted); margin-top: 8px; } .prose table { border: 1px solid var(--line); font-size: .95rem; } .prose th, .prose td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; } .prose th { background: var(--paper-alt); font-weight: 600; } /* Pull-quotes: the theme styles bare
in prose so imported content needs no special class. / .pull-quote, .prose blockquote { border-left: 2px solid var(--accent); padding-left: 24px; margin-block: 40px; font-family: var(--font-display); font-weight: 500; text-transform: none; font-size: clamp(1.35rem, 2.4vw, 1.6rem); line-height: 1.3; color: var(--text); } .prose blockquote p { font-size: inherit; line-height: inherit; } .prose blockquote > + * { margin-top: 14px; } .pull-quote cite, .prose blockquote cite { display: block; margin-top: 14px; font-family: var(--font-body); font-style: normal; font-weight: 600; font-size: .9rem; color: var(--muted); } .article-meta { color: var(--muted-dark); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; } .article-lead-media { margin: 0 0 clamp(40px, 6vw, 64px); border: 1px solid var(--line); } .article-lead-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } /* ========================================================================== 26. Rules layout (sticky index) + fact stream ========================================================================== / / The rules are editor content — a flat run of h3 + ul. The numerals are drawn by CSS counters and the index is built from the same h3s by JS, so adding or reordering a rule in the editor needs no template change. / .rules-layout { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 64px); counter-reset: rule; } @media (min-width: 1024px) { .rules-layout { grid-template-columns: 260px 1fr; align-items: start; } .rules-index { position: sticky; top: calc(var(--header-h-sm) + 32px); } } .rules-indextitle { font-family: var(--font-display); text-transform: uppercase; font-size: .85rem; letter-spacing: .14em; color: var(--muted); padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line); } .rules-indexlist:empty { display: none; } .rules-indexlist li { border-bottom: 1px solid var(--line); } .rules-indexlist a { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .95rem; transition: color var(--dur-fast) var(--ease); } .rules-indexlist a:hover, .rules-indexlist a:focus-visible, .rules-indexlist a.is-active { color: var(--accent); } .rules-indexlist .numeral { color: var(--muted-dark); font-size: 1rem; letter-spacing: .04em; } .rules-indexlist a.is-active .numeral { color: var(--accent); } .rules-content { max-width: 68ch; margin-inline: 0; } .rules-content > h3 { counter-increment: rule; display: flex; align-items: baseline; gap: 16px; margin-top: 2.4em; padding-top: 1.4em; border-top: 1px solid var(--line); scroll-margin-top: 96px; } .rules-content > h3:first-child { margin-top: 0; padding-top: 0; border-top: none; } .rules-content > h3::before { content: counter(rule, decimal-leading-zero); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1; color: var(--accent); flex: none; } / The 20 facts are also editor content: h2 + p + p.fact-source. The numeral sits in a left gutter drawn by a counter, so the markup stays a clean stream with no wrapper elements to maintain. / .fact-stream { counter-reset: fact; } .fact-stream > { max-width: 62ch; } .fact-stream > h2 { counter-increment: fact; position: relative; margin-top: 2.2em; /* rem, not em: the ::before numeral below is positioned with the same value, and `em` inside the pseudo resolves against the pseudo's own (much larger) font-size, which pushed the numeral a full line low. / padding-top: 2.2rem; border-top: 1px solid var(--line); font-size: clamp(1.25rem, 2.4vw, 1.75rem); text-wrap: balance; } .fact-stream > h2:first-child { margin-top: 0; } .fact-stream > h2::before { content: counter(fact, decimal-leading-zero); font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1; color: var(--accent); display: block; margin-bottom: 12px; } .fact-stream > p { color: var(--muted); margin-top: 12px; } .fact-stream > p:last-child { margin-bottom: 0; } .fact-stream .fact-source, .fact-stream > p em:only-child { display: block; font-size: .8rem; font-style: normal; color: var(--muted-dark); text-transform: uppercase; letter-spacing: .06em; margin-top: 10px; } @media (min-width: 800px) { .fact-stream > h2, .fact-stream > p { padding-left: 140px; } .fact-stream > h2 { padding-left: 140px; } .fact-stream > h2::before { position: absolute; left: 0; top: 2.2rem; margin-bottom: 0; } } / ========================================================================== 27. Video facade ========================================================================== / .video-facade { position: relative; isolation: isolate; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); background: var(--ink); border-radius: var(--radius-sm); } .video-facadetrigger { position: absolute; inset: 0; width: 100%; height: 100%; border: none; padding: 0; margin: 0; cursor: pointer; background: none; } .video-facadethumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .video-facadeplay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: rgb(13 21 18 / .72); border: 1px solid rgb(255 255 255 / .5); color: #fff; transition: background-color var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease); } .video-facadeplay .icon { width: 26px; height: 26px; margin-left: 3px; fill: currentColor; } .video-facadetrigger:hover .video-facadeplay, .video-facadetrigger:focus-visible .video-facadeplay { background: var(--accent); border-color: var(--accent); } .video-facade.is-loaded .video-facadetrigger { display: none; } .video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-cardtitle { margin-top: 20px; margin-bottom: 8px; } .video-cardbody { color: var(--muted); } / ========================================================================== 28. Forms ========================================================================== / / Both .form-section and the nested per-question .form-field groups are real
elements (for a11y grouping) with a real as their heading — but must render as flat design-system blocks, not native fieldset/legend chrome. Two separate native behaviours to defeat: (1) the UA fieldset border/padding/min-width, reset below; (2) browsers give special layout that straddles the fieldset's border-block-start regardless of the legend's own `display`, breaking the border into a gap around the label text. `float: left; width: 100%` is the standard escape from that special layout — it makes the legend behave like an ordinary full-width block instead of straddling anything. These are the only fieldsets on the site, so resetting the bare elements is safe. / fieldset { border: 0; padding: 0; margin: 0; min-inline-size: auto; } legend { display: block; float: left; width: 100%; padding: 0; margin: 0; } / A 100%-wide float still doesn't force a normal-flow sibling to clear it — only inline content avoids the float's box, not a following block's own border/padding box, which measurably overlapped the legend without this. Only the first sibling after the legend needs to clear; everything after that already stacks below it in ordinary block flow. / legend + { clear: both; } .get-started-form { max-width: 820px; margin-inline: auto; } /* v2: the "Interested in " chip shown when the visitor arrives from a court page with ?court=. / .form-prefill { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; max-width: none; margin-bottom: 32px; padding: 16px 20px; border: 1px solid var(--accent); border-left-width: 2px; border-radius: var(--radius-sm); background: rgb(10 147 71 / .06); } .form-prefilllabel { font-family: var(--font-display); text-transform: uppercase; font-size: .8rem; letter-spacing: .14em; color: var(--muted); } .form-prefillvalue { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.25rem; line-height: 1; color: var(--accent-hover); } .form-section { border: 1px solid var(--line); border-radius: var(--radius-md); padding: clamp(24px, 4vw, 40px); margin-bottom: 32px; } .form-sectionlegend { display: flex; align-items: baseline; gap: 14px; width: 100%; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); } .form-sectionnum { / Sized to match .stepnum (How It Works) rather than sit as a tiny footnote — same family/weight/line-height so baseline-alignment with the h2 next to it lands correctly instead of looking offset. / font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 4vw, 3.25rem); line-height: 1; color: var(--accent); } .form-sectionlegend h2 { margin: 0; font-size: clamp(1.75rem, 3.5vw, 2.5rem); } .form-section > + * { margin-top: 24px; } .form-field { display: block; } .form-label { display: block; font-family: var(--font-body); font-weight: 600; font-size: .95rem; color: var(--text); margin-bottom: 10px; } .form-hint { font-size: .875rem; color: var(--muted); margin-top: 8px; } .form-hint a { color: var(--accent); } .form-input, .form-textarea, .form-select { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 16px; font-family: var(--font-body); font-size: 1rem; color: var(--text); background: var(--paper); transition: border-color var(--dur-med) var(--ease); } .form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--accent); } .form-input.has-error, .form-textarea.has-error, .form-select.has-error { border-color: #B3261E; } .form-textarea { min-height: 120px; resize: vertical; } .form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F5B55' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 18px; padding-right: 44px; } .option-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 560px) { .option-grid { grid-template-columns: 1fr 1fr; } } .option-card { position: relative; } .option-cardinput { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .option-cardlabel { display: block; height: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 20px; cursor: pointer; font-weight: 600; color: var(--text); transition: border-color var(--dur-med) var(--ease), background-color var(--dur-med) var(--ease), color var(--dur-med) var(--ease); } .option-cardlabel:hover { border-color: var(--accent); } .option-cardlabel .text-small { display: block; font-weight: 400; color: var(--muted); margin-top: 6px; } .option-cardinput:checked + .option-cardlabel { border-color: var(--accent); background: rgb(10 147 71 / .06); color: var(--accent-hover); } .option-cardinput:focus-visible + .option-cardlabel { outline: 2px solid var(--accent); outline-offset: 2px; } .cost-guide { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px; background: var(--paper-alt); } .cost-guidetitle { font-family: var(--font-display); text-transform: uppercase; font-size: .85rem; letter-spacing: .1em; color: var(--muted); margin-bottom: 16px; } .cost-guide dl { display: grid; gap: 14px; } .cost-guiderow { display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid var(--line); } .cost-guiderow:first-child { padding-top: 0; border-top: none; } .cost-guide dt { font-weight: 600; max-width: 60%; } .cost-guide dd { margin: 0; font-family: var(--font-display); font-weight: 700; color: var(--accent); text-align: right; white-space: nowrap; } /* Honeypot — off-screen rather than display:none, which some bots skip. / .form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 40px; } .form-submit-row .btn[disabled] { opacity: .6; cursor: progress; } .form-error { margin-top: 20px; padding: 16px 20px; border: 1px solid #B3261E; border-left-width: 2px; border-radius: var(--radius-sm); background: rgb(179 38 30 / .05); color: #8C1D18; font-weight: 600; max-width: none; } .form-error[hidden] { display: none; } .form-success { display: flex; gap: 16px; align-items: flex-start; border: 1px solid var(--accent); background: rgb(10 147 71 / .06); border-radius: var(--radius-md); padding: 24px; color: var(--text); margin-top: 24px; } .form-success[hidden] { display: none; } .form-successicon { color: var(--accent); flex: none; width: 28px; height: 28px; } .form-successtitle { margin-bottom: 6px; } .form-successbody { color: var(--muted); } / ========================================================================== 29. Prev/next nav ========================================================================== / .article-nav { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: clamp(56px, 8vw, 96px); } @media (min-width: 700px) { .article-nav { grid-template-columns: 1fr 1fr; } } / The first and last item in a sequence only have one neighbour. The single link takes the whole row so the container's hairline background can't show through as an empty grey cell — "Previous" still reads from the left edge, "Next" from the right. / .article-nav--single { grid-template-columns: 1fr; } .article-nav--single a { grid-column: 1 / -1; } .court-nav-wrap .article-nav { margin-top: 0; } .article-nav a { display: flex; flex-direction: column; gap: 10px; background: var(--paper); padding: 28px 32px; text-decoration: none; color: var(--text); transition: background-color var(--dur-med) var(--ease); } .article-nav a:hover, .article-nav a:focus-visible { background: var(--paper-alt); } .article-navdir { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); text-transform: uppercase; font-size: .8rem; letter-spacing: .12em; color: var(--accent); } .article-navnext { text-align: right; } .article-navnext .article-navdir { justify-content: flex-end; } .article-navtitle { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; } / ========================================================================== 30. Search ========================================================================== / .search-formrow { display: flex; gap: 10px; } .search-forminput { flex: 1; } .search-results { border-top: 1px solid var(--line); } .search-result { border-bottom: 1px solid var(--line); } .search-result a { display: block; padding-block: 28px; text-decoration: none; color: inherit; } .search-resulttype { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: .78rem; letter-spacing: .14em; color: var(--accent); margin-bottom: 10px; } .search-resulttitle { margin-bottom: 8px; transition: color var(--dur-fast) var(--ease); } .search-result a:hover .search-resulttitle, .search-result a:focus-visible .search-resulttitle { color: var(--accent); } .search-result__excerpt { color: var(--muted); } / ========================================================================== 31. WordPress core classes ========================================================================== / .alignleft { float: left; margin: .5em 1.5em 1em 0; } .alignright { float: right; margin: .5em 0 1em 1.5em; } .aligncenter { display: block; margin-inline: auto; } .alignwide { width: min(100%, 1100px); margin-inline: auto; } .alignfull { width: 100%; } .wp-caption { max-width: 100%; } .wp-caption-text, .wp-element-caption { font-size: .875rem; color: var(--muted); margin-top: 8px; } .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .admin-bar .site-header { top: 32px; } @media (max-width: 782px) { .admin-bar .site-header { top: 46px; } } .admin-bar .court-subnav { top: calc(var(--header-h-sm) + 32px); } / ========================================================================== 32. Utilities ========================================================================== / .max-w-prose { max-width: 68ch; } .center { text-align: center; } .mt-0 { margin-top: 0 !important; } .hidden { display: none !important; } .divider { height: 1px; background: var(--line); border: none; margin-block: 0; } .section--ink .divider { background: var(--line-dark); } / ========================================================================== 33. Reduced motion ========================================================================== / @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js .reveal { opacity: 1; transform: none; transition: none; } , ::before, ::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }