/* ========================================================================== Louisville Christmas Light Pros — Louisville, KY (East End) New design system per build-plan.md §2 (Brian McQuistion → Christmas translation). Vanilla CSS, no framework. Fonts: Barlow Condensed (headings/buttons/eyebrows/stats, always uppercase) + Libre Franklin (body), loaded from Google Fonts in with preconnect + display=swap. ========================================================================== */ :root { /* Brand tokens (build-plan §2, exact) */ --ink: #1C2128; --navy: #0E2A47; --red: #C42A31; --red-dark: #A31621; --cream: #F4F6F9; /* frost light gray (was candlelight cream #FFF4E3; Jason 2026-08-20 -- peachy read on the old value, this harmonizes with --navy instead) */ --gold: #F5B02E; --green: #1F4D2E; --muted: #4A525E; --white: #FFFFFF; --line: #E2E7EE; /* cool hairline (was warm beige #E7DCC8 derived from the old cream; swapped to match, 2026-08-20) */ --navy-2: #163A5E; /* lighter navy for gradients / hover states */ --font-display: "Barlow Condensed", "Arial Narrow", sans-serif; --font-body: "Libre Franklin", -apple-system, "Segoe UI", Roboto, sans-serif; --radius: 12px; --shadow: 0 10px 30px rgba(14, 42, 71, 0.16); --glow: 0 8px 30px rgba(245, 176, 46, 0.25); --glow-strong: 0 10px 36px rgba(245, 176, 46, 0.4); --glow-deep: 0 14px 44px rgba(245, 176, 46, 0.5); --maxw: 1200px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } /* Mobile overflow guards */ .hero-inner > *, .split-grid > *, .footer-grid > *, .stat-bar-inner > * { min-width: 0; } select, input, textarea { max-width: 100%; } /* -------------------------------------------------------------------------- Typography -------------------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: 0.98; letter-spacing: 0.01em; margin: 0 0 0.5em; color: var(--ink); } h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 0.95; } h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); } h3 { font-size: 1.2rem; } h4 { font-size: 1rem; } p { margin: 0 0 1em; } a { color: inherit; } .accent-red { color: var(--red); } .accent-gold { color: var(--gold); } /* Eyebrow: 24px rule + 15px/700/2.7px-tracked uppercase red label */ .eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 2.7px; text-transform: uppercase; color: var(--red); margin-bottom: 14px; } .eyebrow::before { content: ""; display: inline-block; width: 24px; height: 2px; background: var(--red); flex-shrink: 0; } .band-navy .eyebrow, .band-crimson .eyebrow { color: var(--gold); } .band-navy .eyebrow::before, .band-crimson .eyebrow::before { background: var(--gold); } .section-head { max-width: 760px; margin: 0 auto 40px; text-align: center; } .section-head.left { margin-left: 0; text-align: left; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { display: inline-block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1rem; text-decoration: none; text-align: center; padding: 15px 28px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .btn:active { transform: scale(0.97); } .btn-red { background: var(--red); color: var(--white); border-color: var(--red-dark); box-shadow: var(--glow); } .btn-red:hover { background: var(--red-dark); box-shadow: var(--glow-deep); transform: scale(1.03); } .btn-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.6); } .btn-outline:hover { background: rgba(255,255,255,0.12); } .btn-outline-dark { background: transparent; color: var(--navy); border-color: var(--navy); } .btn-outline-dark:hover { background: var(--navy); color: var(--white); } .btn-gold { background: var(--gold); color: var(--ink); border-color: #d6941e; box-shadow: var(--glow); } .btn-gold:hover { background: #e3a527; box-shadow: var(--glow-deep); transform: scale(1.03); } .btn-block { display: block; width: 100%; } /* -------------------------------------------------------------------------- Utility bar + header -------------------------------------------------------------------------- */ .util-bar { background: var(--navy); color: rgba(255,255,255,0.92); font-size: 0.82rem; } .util-bar-inner { max-width: var(--maxw); margin: 0 auto; padding: 8px 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .util-bar a { color: rgba(255,255,255,0.85); text-decoration: none; font-weight: 600; } .util-bar a:hover { color: var(--gold); } .util-links { display: flex; gap: 18px; } .util-links span { opacity: 0.45; } .site-header { position: sticky; top: 0; z-index: 60; background: var(--white); border-bottom: 1px solid var(--line); } .header-inner { display: flex; align-items: center; gap: 20px; padding: 12px 22px; max-width: var(--maxw); margin: 0 auto; } .logo-link { flex-shrink: 0; display: block; } .logo-link svg { display: block; height: 46px; width: auto; } .nav-toggle { display: none; margin-left: auto; background: none; border: 2px solid var(--navy); border-radius: 8px; color: var(--navy); font-size: 1.3rem; line-height: 1; padding: 6px 12px; cursor: pointer; } .main-nav { margin-left: auto; } .main-nav > ul { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; } .main-nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.94rem; padding: 6px 0; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; } .main-nav a:hover { color: var(--red); border-color: var(--red); } .header-actions { display: flex; align-items: center; gap: 14px; margin-left: 18px; } .header-phone { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--navy); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 0.88rem; letter-spacing: 0.02em; white-space: nowrap; } .header-phone svg { flex-shrink: 0; } .header-phone .phone-num { color: var(--red); font-size: 1rem; } .header-phone:hover .phone-num { color: var(--red-dark); } /* Header CTA short-text variant: hidden by default, shown only at very narrow widths (see @media max-width:480px) so the button never has to render "Book My Quote" in a space that only fits "Quote". nowrap: two words with one space between them will wrap at that space by default whenever the button is even slightly tight, producing a 2-line button (visual-QA fix, 2026-08-20) -- force it to stay on one line instead. */ .header-cta .cta-short { display: none; white-space: nowrap; } /* -------------------------------------------------------------------------- Light-string SVG divider (gold C9 bulbs). Max 2 per page, per build-plan. -------------------------------------------------------------------------- */ .lights-divider { display: block; width: 100%; height: auto; margin: 0; } .lights-divider.on-dark { opacity: 0.9; } /* -------------------------------------------------------------------------- Hero (homepage + interior pages) -------------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; color: var(--white); background: var(--navy); } .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(14,42,71,0.94) 0%, rgba(14,42,71,0.78) 34%, rgba(14,42,71,0.42) 68%, rgba(14,42,71,0.30) 100%), linear-gradient(180deg, rgba(9,25,44,0.35) 0%, transparent 22%, transparent 70%, rgba(9,25,44,0.55) 100%); } /* Homepage-only: the red/white alternating roofline (2026-08-20 photo swap) is busier than the previous stone-roofline shot, so the text-side stops go a touch deeper for H1 contrast. Same diagonal shape, same right-side brightness -- only the left (text) stops move. */ .hero-overlay.overlay-home { background: linear-gradient(100deg, rgba(14,42,71,0.96) 0%, rgba(14,42,71,0.85) 34%, rgba(14,42,71,0.46) 68%, rgba(14,42,71,0.32) 100%), linear-gradient(180deg, rgba(9,25,44,0.4) 0%, transparent 22%, transparent 70%, rgba(9,25,44,0.58) 100%); } @media (max-width: 749px) { .hero-overlay { background: linear-gradient(180deg, rgba(14,42,71,0.92) 0%, rgba(14,42,71,0.72) 46%, rgba(14,42,71,0.5) 100%); } .hero-overlay.overlay-home { background: linear-gradient(180deg, rgba(14,42,71,0.94) 0%, rgba(14,42,71,0.78) 46%, rgba(14,42,71,0.56) 100%); } } /* Strong/uniform overlay modifier: for center-aligned text over a photo (e.g. the mid-page CTA band), the diagonal .hero-overlay above is wrong — it's tuned for left-aligned hero copy and leaves the CENTER of the image too bright (coordinator visual-QA fix: headline nearly invisible there). This is flat and uniform at ~.8 opacity everywhere so contrast holds no matter where the text sits over the photo. */ .hero-overlay.overlay-strong { background: linear-gradient(180deg, rgba(9,25,44,0.82) 0%, rgba(14,42,71,0.8) 100%); } .hero-inner { position: relative; z-index: 3; max-width: var(--maxw); margin: 0 auto; padding: 64px 22px 60px; } .hero-inner.hero-home { padding: 76px 22px 56px; } .badge-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(245,176,46,0.14); border: 1px solid rgba(245,176,46,0.55); color: var(--gold); font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 16px; border-radius: 999px; margin-bottom: 22px; } .badge-pill::before { content: "\2605"; font-size: 0.9em; } .hero h1 { color: var(--white); max-width: 760px; } .hero h1 span.line { display: block; } /* Homepage hero: the 3 authored lines must each render as ONE visual line at common desktop widths (coordinator visual-QA fix, 2026-08-19). Root cause: 760px max-width + 3.5rem clamp max was too narrow/large for the longest line ("Lights, Install, Takedown, Storage. All Included.") to fit without wrapping mid-line. Fix: widen the container to the hero's actual available width and use a flat, conservatively-sized font-size above 1024px (hero-inner is capped at --maxw=1200px regardless of viewport, so a fluid vw-based size is not needed above that point — a flat value is correct and predictable). Mobile keeps the original fluid clamp() on the base .hero h1 rule and wraps naturally. */ .hero-home h1 { max-width: 100%; } @media (min-width: 1024px) { .hero-home h1 { font-size: 1.8rem; } .hero-home h1 .line { white-space: nowrap; } } @media (min-width: 1280px) { .hero-home h1 { font-size: 2.1rem; } } .hero-sub { font-size: 1.12rem; color: rgba(255,255,255,0.92); max-width: 640px; margin: 18px 0 26px; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; } .hero-ctas .btn-outline .call-label { opacity: 0.85; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 0.85rem; display: block; } /* Guarantee card, hero (red) */ .guarantee-card { background: linear-gradient(135deg, var(--red-dark), var(--red)); border-radius: var(--radius); padding: 22px 26px; max-width: 480px; box-shadow: 0 16px 40px rgba(163,22,33,0.4); } .guarantee-card h2 { color: var(--white); font-size: 1.15rem; margin-bottom: 6px; } .guarantee-card p { color: rgba(255,255,255,0.94); font-size: 0.95rem; margin: 0; font-family: var(--font-body); } /* -------------------------------------------------------------------------- Interior page hero (single column, shorter) -------------------------------------------------------------------------- */ .page-hero .hero-inner { max-width: 900px; padding: 56px 22px 48px; } .page-hero h1 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); } .page-hero.no-photo { background: linear-gradient(135deg, var(--navy) 0%, #0a1e35 100%); } .page-hero.no-photo .hero-overlay { display: none; } /* -------------------------------------------------------------------------- Stat bar — 5 stats, vertical rules -------------------------------------------------------------------------- */ .stat-bar { background: var(--navy); } .stat-bar-inner { max-width: var(--maxw); margin: 0 auto; padding: 26px 22px; display: grid; grid-template-columns: repeat(5, 1fr); } .stat-item { text-align: center; padding: 6px 14px; border-left: 1px solid rgba(255,255,255,0.16); } .stat-item:first-child { border-left: none; } .stat-num { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.2rem, 2.4vw, 1.7rem); color: var(--gold); text-transform: uppercase; line-height: 1.1; margin-bottom: 2px; } .stat-label { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.82); } /* -------------------------------------------------------------------------- Bands -------------------------------------------------------------------------- */ .band { padding: 74px 0; } .band-white { background: var(--white); } .band-cream { background: var(--cream); } .band-navy { background: var(--navy); color: var(--white); } .band-navy h2, .band-navy h3 { color: var(--white); } .band-navy p, .band-navy li { color: rgba(255,255,255,0.88); } .band-crimson { background: linear-gradient(120deg, var(--red-dark) 0%, var(--red) 100%); color: var(--white); } .band-crimson h2, .band-crimson h3 { color: var(--white); } .band-crimson p { color: rgba(255,255,255,0.92); } /* -------------------------------------------------------------------------- Service cards grid (6-up): photo top, navy title bar, one-liner -------------------------------------------------------------------------- */ .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .svc-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; text-decoration: none; color: var(--ink); } /* Hover lift now owned by .dz-lift (motion pass, see bottom of file) — every .svc-card carries that class in the markup. */ .svc-card-photo { aspect-ratio: 3 / 2; position: relative; background: var(--navy); } .svc-card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .svc-card-title { background: var(--navy); padding: 12px 18px; } .svc-card-title h3 { color: var(--white); font-size: 1.05rem; margin: 0; } .svc-card-body { padding: 16px 18px 20px; flex-grow: 1; display: flex; flex-direction: column; } .svc-card-body p { font-size: 0.93rem; color: var(--muted); margin-bottom: 12px; flex-grow: 1; } .svc-card-link { font-family: var(--font-display); font-weight: 800; font-size: 0.85rem; text-transform: uppercase; color: var(--red); } /* -------------------------------------------------------------------------- Guarantee band (crimson gradient) — 4 white check-cards -------------------------------------------------------------------------- */ .check-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 36px; } .check-card { background: var(--white); border-radius: var(--radius); padding: 22px 20px; color: var(--ink); box-shadow: 0 12px 28px rgba(0,0,0,0.18); } .check-card .check-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: var(--white); font-weight: 800; margin-bottom: 12px; } .check-card p { font-size: 0.93rem; margin: 0; font-weight: 600; color: var(--ink); } /* -------------------------------------------------------------------------- Tabs — "Know Before You Book" (ARIA tabs, keyboard nav, vanilla JS) -------------------------------------------------------------------------- */ .tabs-wrap { max-width: 980px; margin: 0 auto; } .tab-list { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 2px solid var(--line); margin-bottom: 0; list-style: none; padding: 0; } .tab-btn { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.88rem; background: none; border: none; padding: 12px 16px; cursor: pointer; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color 0.15s, border-color 0.15s; } .tab-btn:hover { color: var(--red); } .tab-btn[aria-selected="true"] { color: var(--red); border-color: var(--red); } .tab-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } .tab-panels { padding-top: 32px; } .tab-panel { display: none; } .tab-panel.active { display: block; } .tab-panel-inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 32px; align-items: center; } .tab-panel-photo { border-radius: var(--radius); overflow: hidden; box-shadow: var(--glow); aspect-ratio: 3/2; } .tab-panel-photo img { width: 100%; height: 100%; object-fit: cover; } .tab-panel-copy h3 { margin-bottom: 10px; } .tab-panel-copy .tab-actions { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; } /* -------------------------------------------------------------------------- About split (offset photo card, corner badge) -------------------------------------------------------------------------- */ .split-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; } .split-grid.reverse { grid-template-columns: 0.85fr 1.15fr; } .split-grid.reverse .split-photo { order: -1; } .split-photo { position: relative; } .split-photo-card { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transform: rotate(-1.2deg); max-width: 420px; margin: 0 auto; border: 6px solid var(--white); } .split-photo-card img { width: 100%; height: auto; display: block; } .corner-badge { position: absolute; bottom: -16px; right: 6px; background: var(--gold); color: var(--ink); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.03em; padding: 10px 16px; border-radius: 8px; box-shadow: var(--glow-strong); transform: rotate(2deg); text-align: center; line-height: 1.3; } .intro-links { margin-top: 6px; } .intro-links a, .body-link { color: var(--red); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } /* -------------------------------------------------------------------------- Rebook strip (cream) -------------------------------------------------------------------------- */ .rebook-strip { background: var(--cream); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .rebook-inner { max-width: var(--maxw); margin: 0 auto; padding: 40px 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; } .rebook-inner h2 { margin: 0 0 4px; font-size: clamp(1.3rem, 2.6vw, 1.8rem); } .rebook-inner p { margin: 0; color: var(--muted); } /* -------------------------------------------------------------------------- CTA band (navy, centered) -------------------------------------------------------------------------- */ .cta-band { text-align: center; } .cta-band h2 { color: var(--white); max-width: 720px; margin-left: auto; margin-right: auto; } .cta-band .hero-ctas { justify-content: center; margin-top: 26px; margin-bottom: 0; } /* -------------------------------------------------------------------------- Long-form SEO blocks (red arrow lists) -------------------------------------------------------------------------- */ .seo-block { max-width: 880px; margin: 0 auto 64px; } .seo-block:last-child { margin-bottom: 0; } .seo-block h2 { margin-bottom: 16px; } .arrow-list { list-style: none; margin: 20px 0; padding: 0; } .arrow-list li { position: relative; padding: 8px 0 8px 30px; border-bottom: 1px solid var(--line); font-weight: 600; } .arrow-list li:last-child { border-bottom: none; } .arrow-list li::before { content: "\2192"; position: absolute; left: 0; color: var(--red); font-weight: 800; } .seo-block-cta { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 0.92rem; color: var(--red); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .seo-block-cta:hover { color: var(--red-dark); } /* -------------------------------------------------------------------------- Checklist + stat row ("Why Louisville Families Call Dylan Back") -------------------------------------------------------------------------- */ .why-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; } .why-list { list-style: none; margin: 0 0 24px; padding: 0; } .why-list li { position: relative; padding: 10px 0 10px 32px; font-weight: 600; border-bottom: 1px solid var(--line); } .why-list li::before { content: "\2713"; position: absolute; left: 2px; color: var(--green); font-weight: 800; } .why-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .why-stat { background: var(--cream); border-radius: var(--radius); padding: 20px 14px; text-align: center; } .why-stat .num { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--red); } .why-stat .label { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); } /* -------------------------------------------------------------------------- Urgency band (red, solid) -------------------------------------------------------------------------- */ .urgency-band { background: var(--red); color: var(--white); text-align: center; } .urgency-band h2 { color: var(--white); font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 8px; } .urgency-band p { color: rgba(255,255,255,0.94); max-width: 620px; margin: 0 auto 22px; font-size: 1.02rem; } /* -------------------------------------------------------------------------- Reviews (5 gold stars) -------------------------------------------------------------------------- */ .review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .review-card { background: var(--white); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; border: 1px solid var(--line); } .review-stars { color: var(--gold); font-size: 1.05rem; letter-spacing: 3px; margin-bottom: 12px; } .review-card blockquote { margin: 0 0 16px; font-size: 0.96rem; flex-grow: 1; } .review-card blockquote p { margin: 0 0 0.8em; } .review-card blockquote p:last-child { margin-bottom: 0; } .review-meta { font-weight: 700; font-size: 0.85rem; color: var(--muted); margin: 0; } .review-source { text-align: center; margin-top: 30px; font-size: 0.92rem; color: var(--muted); } /* -------------------------------------------------------------------------- City chip grid -------------------------------------------------------------------------- */ .city-chip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .city-chip { display: block; background: rgba(255,255,255,0.06); border: 1px solid rgba(245,176,46,0.35); border-radius: 10px; padding: 16px 18px; color: var(--white); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.01em; transition: background 0.15s, border-color 0.15s; } .city-chip:hover { background: rgba(245,176,46,0.14); border-color: var(--gold); } .band-white .city-chip, .band-cream .city-chip { background: var(--white); border-color: var(--line); color: var(--ink); box-shadow: var(--shadow); } .band-white .city-chip:hover, .band-cream .city-chip:hover { border-color: var(--red); } .city-chip .tier { display: block; font-family: var(--font-body); font-weight: 400; text-transform: none; font-size: 0.78rem; opacity: 0.7; margin-top: 3px; letter-spacing: 0; } /* -------------------------------------------------------------------------- FAQ accordion — native
/, grouped -------------------------------------------------------------------------- */ .faq-groups { max-width: 840px; margin: 0 auto; } /* -------------------------------------------------------------------------- Map embed + price-anchor cards -- city-page thinness fix, Jason 2026-08-21. Map iframe src is injected by JS (IntersectionObserver) not loaded here -- this container only reserves a fixed aspect-ratio box so the page never shifts (CLS) whether or not the iframe has loaded yet. -------------------------------------------------------------------------- */ .map-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--cream); box-shadow: var(--shadow); } .map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .price-anchor-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 24px; } .price-anchor-card { background: var(--cream); border-radius: var(--radius); padding: 16px 22px; min-width: 160px; } .price-anchor-range { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--red); } .price-anchor-name { display: block; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-top: 2px; } .faq-group-title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.1rem; color: var(--red); margin: 40px 0 16px; } .faq-group-title:first-child { margin-top: 0; } .faq-list { list-style: none; margin: 0; padding: 0; } details.faq-item { border: 1.5px solid var(--line); border-radius: 10px; margin-bottom: 12px; background: var(--white); overflow: hidden; } details.faq-item summary { cursor: pointer; list-style: none; padding: 16px 20px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; text-transform: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--ink); } details.faq-item summary::-webkit-details-marker { display: none; } details.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--red); flex-shrink: 0; transition: transform 0.2s; line-height: 1; } details.faq-item[open] summary::after { transform: rotate(45deg); } details.faq-item .faq-a { padding: 0 20px 18px; font-size: 0.96rem; color: var(--muted); } details.faq-item .faq-a p { margin: 0; } /* -------------------------------------------------------------------------- Before/after slider — component ready, not instantiated on any live page yet (no "before" photos exist). Dusk-unlit vs night-lit comparison. Vanilla JS clip-path, no library. See js/site.js initBeforeAfterSliders(). -------------------------------------------------------------------------- */ .ba-slider { position: relative; aspect-ratio: 3/2; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); max-width: 720px; margin: 0 auto; touch-action: pan-y; } .ba-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; } .ba-slider .ba-after { clip-path: inset(0 0 0 50%); } .ba-slider .ba-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--gold); box-shadow: 0 0 10px rgba(245,176,46,0.8); transform: translateX(-50%); pointer-events: none; } .ba-slider .ba-handle { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; border-radius: 50%; background: var(--gold); transform: translate(-50%, -50%); box-shadow: var(--glow-strong); display: flex; align-items: center; justify-content: center; cursor: ew-resize; } .ba-slider .ba-handle::before { content: "\2194"; color: var(--ink); font-weight: 800; } .ba-slider input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; } .ba-slider .ba-label { position: absolute; bottom: 12px; font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--white); background: rgba(14,42,71,0.7); padding: 4px 10px; border-radius: 6px; } .ba-slider .ba-label.before-label { left: 12px; } .ba-slider .ba-label.after-label { right: 12px; } /* -------------------------------------------------------------------------- Project cards (town-tagged, gallery + city pages) -------------------------------------------------------------------------- */ .project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .project-card { background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); } .project-photo { position: relative; aspect-ratio: 3/2; background: var(--navy); } .project-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .project-photo.portrait { aspect-ratio: 3/4; } .project-town-tag { position: absolute; top: 10px; left: 10px; background: var(--red); color: var(--white); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.04em; padding: 5px 10px; border-radius: 999px; } .project-body { padding: 14px 18px 18px; } .project-body p { font-size: 0.9rem; color: var(--muted); margin: 0; } /* -------------------------------------------------------------------------- Pricing package cards (cost page) -------------------------------------------------------------------------- */ .pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; align-items: stretch; } .pkg-card { position: relative; background: var(--white); border: 1.5px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px 24px 24px; display: flex; flex-direction: column; } .pkg-card.featured { border: 2px solid var(--red); box-shadow: var(--glow-strong), var(--shadow); } .pkg-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--red); color: var(--white); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.72rem; padding: 6px 16px; border-radius: 999px; white-space: nowrap; } .pkg-name { font-size: 1.15rem; margin-bottom: 2px; } .pkg-price { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--red); margin: 0 0 8px; } .pkg-tagline { color: var(--muted); font-size: 0.9rem; margin-bottom: 16px; min-height: 44px; font-family: var(--font-body); text-transform: none; } .pkg-list { list-style: none; margin: 0 0 22px; padding: 0; flex-grow: 1; } .pkg-list li { padding: 8px 0 8px 26px; position: relative; border-bottom: 1px solid var(--line); font-size: 0.92rem; } .pkg-list li:last-child { border-bottom: none; } .pkg-list li::before { content: "\2713"; position: absolute; left: 2px; color: var(--green); font-weight: 800; } .price-table-scroll { overflow-x: auto; margin-top: 20px; } .price-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .price-table th, .price-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); } .price-table thead th { background: var(--navy); color: var(--white); font-family: var(--font-display); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; } .price-table tbody tr:nth-child(even) { background: var(--cream); } .price-table td:first-child { font-weight: 700; } /* -------------------------------------------------------------------------- Quote form (used on hero-adjacent bands and the dedicated /quote/ page) -------------------------------------------------------------------------- */ .quote-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px 28px 26px; color: var(--ink); max-width: 560px; margin: 0 auto; } .quote-card h2 { font-size: 1.4rem; margin-bottom: 4px; } .quote-card .quote-sub { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 0.92rem; color: var(--muted); margin-bottom: 18px; font-weight: 400; } .quote-card label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; margin: 14px 0 5px; } .quote-card input, .quote-card select, .quote-card textarea { width: 100%; padding: 12px 14px; font: inherit; font-size: 0.95rem; border: 1.5px solid var(--line); border-radius: 8px; background: #F9FAFC; font-family: var(--font-body); /* cool off-white (was warm #fffdf8; matches the frost swap, 2026-08-20) */ } .quote-card textarea { resize: vertical; min-height: 64px; } .quote-card input:focus, .quote-card select:focus, .quote-card textarea:focus { outline: 2px solid var(--gold); border-color: var(--gold); } .quote-card .btn { margin-top: 20px; } .consent-row { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; } .consent-row input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--red); } .consent-label { font-weight: 400; font-size: 0.78rem; line-height: 1.5; text-transform: none; letter-spacing: 0; color: var(--muted); cursor: pointer; margin: 0; font-family: var(--font-body); } .consent-fine { font-size: 0.7rem; line-height: 1.5; color: var(--muted); margin: 8px 0 0; } .consent-fine a { color: var(--muted); text-decoration: underline; } /* Quote-form failure fallback (2026-08-22, lead-email wiring). Shown only if the /api/quote POST fails or returns ok:false -- never hidden by redirecting anyway, since a failed lead must surface, not be swallowed. Same red as the rest of the error/urgency language on this site. */ .quote-form-error { font-size: 0.85rem; font-weight: 600; color: var(--red); background: rgba(163,22,33,0.08); border: 1px solid rgba(163,22,33,0.25); border-radius: 8px; padding: 12px 14px; margin: 12px 0 0; } .quote-form-error a { color: var(--red); font-weight: 700; } .hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } .quote-band { display: flex; justify-content: center; } /* -------------------------------------------------------------------------- Legal pages (privacy / terms) -------------------------------------------------------------------------- */ .legal-copy { max-width: 800px; margin: 0 auto; } .legal-copy h2 { font-size: 1.2rem; margin-top: 1.6em; } .legal-copy .updated { color: var(--muted); font-size: 0.85rem; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { background: var(--navy); color: rgba(255,255,255,0.82); padding: 56px 0 40px; font-size: 0.92rem; } .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 40px; } .site-footer h2 { color: var(--white); font-size: 0.88rem; letter-spacing: 0.04em; margin-bottom: 14px; } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin-bottom: 8px; } .site-footer a { color: rgba(255,255,255,0.82); text-decoration: none; } .site-footer a:hover { color: var(--gold); } .footer-logo svg { height: 40px; width: auto; margin-bottom: 14px; } .footer-nap p { margin: 0 0 6px; } .footer-legal { border-top: 1px solid rgba(255,255,255,0.14); margin-top: 40px; padding-top: 22px; } .footer-legal-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } .footer-legal p { font-size: 0.8rem; color: rgba(255,255,255,0.55); margin: 0 0 10px; } .footer-legal a { text-decoration: underline; color: rgba(255,255,255,0.6); } .footer-consent { font-size: 0.72rem; line-height: 1.6; color: rgba(255,255,255,0.45); max-width: 900px; } /* -------------------------------------------------------------------------- Sticky mobile call button -------------------------------------------------------------------------- */ .sticky-call { display: none; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 70; background: var(--red); color: var(--white); font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; text-transform: uppercase; text-align: center; text-decoration: none; padding: 15px 10px calc(15px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgba(0,0,0,0.3); } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 980px) { .svc-grid, .review-grid, .project-grid { grid-template-columns: 1fr 1fr; } .check-grid { grid-template-columns: 1fr 1fr; } .city-chip-grid { grid-template-columns: 1fr 1fr 1fr; } .split-grid, .split-grid.reverse, .why-grid, .tab-panel-inner { grid-template-columns: 1fr; } .split-grid.reverse .split-photo { order: 0; } .footer-grid { grid-template-columns: 1fr 1fr; } .stat-bar-inner { grid-template-columns: repeat(3, 1fr); row-gap: 18px; } .stat-item:nth-child(4) { border-left: none; } .pkg-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } .rebook-inner { justify-content: center; text-align: center; } .main-nav { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: var(--white); border-bottom: 1px solid var(--line); padding: 10px 22px 20px; box-shadow: var(--shadow); } .main-nav.open { display: block; } .main-nav > ul { flex-direction: column; align-items: flex-start; gap: 4px; } .main-nav a { display: block; padding: 10px 0; font-size: 1.05rem; } .nav-toggle { display: block; } .header-actions { margin-left: auto; } /* Flexbox safety net: default min-width:auto on flex items refuses to shrink below content size, which is what let the phone block push past the viewport edge. This lets every header-inner child shrink as needed instead of forcing overflow (coordinator visual-QA fix). */ .header-inner > * { min-width: 0; } } @media (max-width: 640px) { .svc-grid, .review-grid, .project-grid, .check-grid, .city-chip-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .stat-bar-inner { grid-template-columns: 1fr 1fr; } .stat-item:nth-child(3) { border-left: none; } /* Bug fix, Jason mobile QA 2026-08-21 (measured 375px): 5 stat-items in a 2-column grid leaves the 5th stat alone in a half-width cell, reads like a layout mistake. statBar is a single hardcoded 5-item constant used once (homepage only, never a shared component with a different item count elsewhere), so this last-child rule is safe unscoped -- confirmed via source before adding it. */ .stat-bar-inner > *:last-child { grid-column: 1 / -1; } /* Bug fix, Jason mobile QA 2026-08-21 (measured 375px): .why-stats had NO mobile override anywhere, so its base repeat(3, 1fr) stayed active all the way down to phone width. Measured 99.65px per column at 375px -- "10 / ZIP Codes Covered", "Same-Day / Design & Price", and "0 / Ladders You Climb" wrapped into unreadable slivers. Stack to one full-width column per stat; the existing .why-stat card (number over label, centered) already reads fine full-width, so no inner layout change was needed, just the container going 3-col -> 1-col. */ .why-stats { grid-template-columns: 1fr; } .band { padding: 52px 0; } .sticky-call { display: block; } .util-links { gap: 10px; font-size: 0.76rem; } .hero-inner { padding-top: 44px; padding-bottom: 44px; } body { padding-bottom: 0; } main { display: block; } /* Mobile header overflow fix (coordinator visual-QA, 2026-08-19): the "Call Dylan Anytime (502) 762-7939" text block was wide enough to push the header past 375px. The bottom sticky-call bar already carries the full "Tap to Call" affordance on mobile, so the header's phone link collapses to a round icon-only tel: button next to the hamburger. */ .header-inner { gap: 10px; padding: 10px 14px; } .logo-link svg { height: 34px; } .nav-toggle { padding: 5px 10px; font-size: 1.15rem; } .header-actions { gap: 8px; } .header-phone { width: 38px; height: 38px; padding: 0; flex-shrink: 0; justify-content: center; border-radius: 50%; background: var(--navy); color: var(--white); } .header-phone .phone-label-text { display: none; } } @media (max-width: 480px) { /* Utility bar: drop the tagline so "Booking now for the 2026 season" plus the Pricing/Takedown/Commercial links fit in one or two rows instead of three (coordinator visual-QA fix). */ .util-tagline { display: none; } /* Header CTA: swap to short text so it never has to fight the logo + icon-only call button for space at very narrow widths. Padding stepped down one notch (16px -> 14px horizontal) to pair with the .cta-short nowrap fix above -- extra margin against overflow now that "Light It" can't wrap to a second line. */ .header-cta .cta-full { display: none; } .header-cta .cta-short { display: inline; } .header-cta { padding: 12px 14px; } } /* ========================================================================== Motion pass (web-dazzle) — Jason-approved 2026-08-20. dz- prefix on every effect class. Only transform / opacity / box-shadow / background-color are ever animated — never layout properties (width, height, top, left, margin, padding). Every block below has its own reduced-motion guard; the global catch-all further down is a backstop, not a substitute. ========================================================================== */ /* --- Scroll reveal (site-wide) --- Applied via JS (js/site.js dzObserver) to elements carrying .dz-reveal: opacity/translateY fade-up on first scroll into view, once, never loops. --dz-delay staggers grid items; section headers use the default (0s). */ .dz-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition-delay: var(--dz-delay, 0s); } .dz-reveal.dz-in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .dz-reveal { opacity: 1; transform: none; transition: none; } } /* --- 3D card lift (hover): service cards, review cards, gallery/project cards. --- */ .dz-lift { position: relative; transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; z-index: 0; } .dz-lift:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 12px 24px rgba(0, 0, 0, 0.10), 0 32px 56px rgba(0, 0, 0, 0.14); z-index: 10; } @media (prefers-reduced-motion: reduce) { .dz-lift, .dz-lift:hover { transform: none; } } /* Dark-band lift variant: box-shadow doesn't read against navy, so city chips get a background lighten instead. Layered alongside the existing .city-chip:hover (gold border/tint) rather than replacing it — this rule sits later in the cascade so its background-color wins on hover, while .city-chip:hover's border-color: var(--gold) still applies underneath. */ .dz-lift-dark { transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform; } .dz-lift-dark:hover { transform: translateY(-10px) scale(1.02); background-color: rgba(255, 255, 255, 0.06); } @media (prefers-reduced-motion: reduce) { .dz-lift-dark, .dz-lift-dark:hover { transform: none; } } /* --- Micro-polish: underline slide (nav + footer text links, never buttons) --- */ .dz-underline { position: relative; text-decoration: none; } .dz-underline::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .dz-underline:hover::after { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .dz-underline::after { transition: none; } } /* --- Micro-polish: Ken Burns, city-page hero photos only (not homepage, which gets the bespoke bloom instead — one motion per element). Hero section already has overflow:hidden (see .hero above), so the 1.08x scale never bleeds past the hero bounds. --- */ .dz-kenburns { animation: dz-kenburns 24s ease-out both; will-change: transform; } @keyframes dz-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } } @media (prefers-reduced-motion: reduce) { .dz-kenburns { animation: none; } } /* --- Bespoke: pulse ring, HOMEPAGE HERO PRIMARY CTA ONLY (coordinator, 2026-08-20). animation-delay: 2.2s is deliberate — the hero bloom finishes fading at ~1.4s after load (250ms JS delay + 1.1s opacity transition), so the ring starts after: two attention moments, sequential, never simultaneous. Warm gold, tuned for the dark hero. No other button anywhere gets this — one attention-drawer per viewport. */ .dz-pulse { position: relative; } .dz-pulse::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 var(--dz-pulse-color, rgba(245, 176, 46, 0.45)); animation: dz-pulse 2.8s cubic-bezier(0.4, 0, 0.6, 1) infinite; animation-delay: 2.2s; pointer-events: none; } @keyframes dz-pulse { 0% { box-shadow: 0 0 0 0 var(--dz-pulse-color, rgba(245, 176, 46, 0.45)); } 55% { box-shadow: 0 0 0 14px rgba(0, 0, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } } @media (prefers-reduced-motion: reduce) { .dz-pulse::after { animation: none; } } /* --- Bespoke: homepage hero bloom, "the lights-on moment" --- Stacking (all explicit, no reliance on DOM-order tie-breaking): .hero-bg (z:0) < .hero-overlay (z:1) < .dz-bloom (z:2) < .hero-inner (z:3, bumped from 2 — see rule above). Bloom only ever darkens the photo/overlay layers; text sits above it and is never dimmed. */ .dz-bloom { position: absolute; inset: 0; z-index: 2; background: #0A1F35; opacity: 0.45; transition: opacity 1.1s ease; pointer-events: none; } .dz-bloom.dz-lit { opacity: 0; } @media (prefers-reduced-motion: reduce) { .dz-bloom { display: none; } } /* --- Bespoke: realistic C9 string-divider ignition (redesigned 2026-08-20 — the original circles-on-a-line read cheesy per Jason's live preview). Sagging wire + hanging teardrop bulbs with pigtail + socket, two glow layers per bulb (opacity only, no blur/filters). Unlit until the shared scroll observer marks .lights-divider.dz-in, then bulbs light up left-to-right on a per-bulb --i stagger. Fires once, never loops. Default (no .on-dark) = light/frost background, the only variant in use today; .on-dark is ready for a dark-band placement later. Light-variant cord/socket/unlit-bulb colors swapped cool 2026-08-20 to match the cream->frost token swap (were warm beige, would clash on cool gray). Lit bulbs stay warm gold on purpose -- warm lights on cool frost is the point. --- */ .lights-divider svg { display: block; } .lights-divider .wire { stroke: #C4CBD4; stroke-width: 1.6; fill: none; } .lights-divider.on-dark .wire { stroke: #223C5C; } .lights-divider .pigtail { stroke: #C4CBD4; stroke-width: 1.2; } .lights-divider.on-dark .pigtail { stroke: #223C5C; } .lights-divider .socket { fill: #9AA4B0; } .lights-divider.on-dark .socket { fill: #3A5578; } .lights-divider .bulb-body { fill: #C9CFD8; transition: fill 0.3s ease; transition-delay: calc(var(--i) * 65ms); } .lights-divider.on-dark .bulb-body { fill: #6A5F45; } .lights-divider .bulb-red .bulb-body { fill: #7A3038; } .lights-divider .glow-inner, .lights-divider .glow-outer { opacity: 0; transition: opacity 0.3s ease; transition-delay: calc(var(--i) * 65ms); } .lights-divider .glow-inner { fill: #F8C65E; } .lights-divider .glow-outer { fill: #F5B02E; } .lights-divider .bulb-red .glow-inner { fill: #E06A70; } .lights-divider .bulb-red .glow-outer { fill: #D8474F; } .lights-divider.dz-in .bulb-body { fill: #FFE9B8; } .lights-divider.dz-in .bulb-red .bulb-body { fill: #FF6B72; } /* Light/frost background: halve the glow opacities so they do not smear against a bright band (coordinator spec). Dark background keeps the full-strength glow. */ .lights-divider.dz-in .glow-inner { opacity: 0.25; } .lights-divider.dz-in .glow-outer { opacity: 0.08; } .lights-divider.on-dark.dz-in .glow-inner { opacity: 0.5; } .lights-divider.on-dark.dz-in .glow-outer { opacity: 0.16; } @media (prefers-reduced-motion: reduce) { .lights-divider .bulb-body { transition: none; fill: #FFE9B8; } .lights-divider .bulb-red .bulb-body { fill: #FF6B72; } .lights-divider .glow-inner, .lights-divider .glow-outer { transition: none; opacity: 0.25; } .lights-divider .glow-outer { opacity: 0.08; } .lights-divider.on-dark .glow-inner { opacity: 0.5; } .lights-divider.on-dark .glow-outer { opacity: 0.16; } } /* Reduced motion: kill all non-essential transitions/animations */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }