/* Williams Air Solutions — see ../../design-system.md for the reasoning behind every token. Hand-written. No CDN, no browser-side compiler, no third-party CSS on the critical path. */ /* ── Tokens ───────────────────────────────────────────────────────── TWO PALETTES, switchable on . Both are real candidates: A "wordmark" #004AAD — the blue in the logo file supplied from an external source (williams_air_solutions.svg), with its own two tints. 8.13:1 on white, so ONE blue serves both surfaces and body text. B "van" #0E83DD — the cross-photo average of four photographs of the van. 3.96:1, fails AA for body text, so it needs a darker sibling (#0D78C9) wherever text sits on or in it. These may be the same colour, one of them measured through a camera in Florida sun. Pick by eye; the arithmetic only says A needs less scaffolding. ------------------------------------------------------------------ */ :root { /* Palette A — wordmark blue (default) */ --brand: #004AAD; --brand-text: #004AAD; /* 8.13:1 on white — no second step needed */ --brand-hero: #004AAD; /* white body text on it: 8.13:1 */ --brand-dark: #00306F; /* 12.71:1 */ --brand-light: #D0EBFF; /* the wordmark's own light tint */ --brand-accent: #7BC3FF; /* the wordmark's own mid tint */ --cta: #D43511; --cta-hover: #A82A0D; --ink: #1a1a1a; --muted: #5A5A5A; --line: #D6D9DE; --surface: #fff; --star: #E8A100; --font-display: Jost, "Segoe UI", system-ui, sans-serif; --font-body: Poppins, "Segoe UI", system-ui, sans-serif; --wrap: 1200px; --measure: 68ch; --radius: 10px; --radius-sm: 6px; --call-bar: 60px; } /* Palette B — van blue */ html[data-palette="van"] { --brand: #0E83DD; --brand-text: #0D78C9; /* 4.62:1 — the text-safe step */ --brand-hero: #0D78C9; /* #0E83DD itself is only 3.96:1 and cannot carry body text */ --brand-dark: #063E69; /* 11.05:1 */ --brand-light: #E3F1FB; --brand-accent: #7BC3FF; } /* ── Reset ──────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.65; color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.2; margin: 0 0 .5em; color: var(--ink); } h1 { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; } h2 { font-size: 1.625rem; font-weight: 700; letter-spacing: -.01em; } h3 { font-size: 1.25rem; font-weight: 700; } p, ul, ol { margin: 0 0 1.15em; } a { color: var(--brand-text); text-underline-offset: .18em; } a:hover { color: var(--cta); } ul.plain { list-style: none; padding: 0; } /* Focus is never removed. WCAG 2.2 AA. */ :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 2px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--brand-dark); color: #fff; padding: 12px 20px; font-weight: 600; } .skip-link:focus { left: 8px; top: 8px; color: #fff; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; } .measure { max-width: var(--measure); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── Buttons — minimum 44px target (WCAG 2.2 target size) ───────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 12px 26px; font-family: var(--font-display); font-size: 1rem; font-weight: 600; white-space: nowrap; border-radius: var(--radius-sm); border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; } .btn-primary { background: var(--cta); color: #fff; } .btn-primary:hover { background: var(--cta-hover); color: #fff; } .btn-secondary { background: #fff; color: var(--brand-dark); border-color: var(--brand); } .btn-secondary:hover { background: var(--brand-light); color: var(--brand-dark); } .btn-onDark { background: #fff; color: var(--brand-dark); } .btn-onDark:hover { background: var(--brand-light); color: var(--brand-dark); } /* ── Header ─────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--line); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 84px; } .brand-lockup { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); flex: none; } .brand-lockup .mark { width: 62px; height: 62px; flex: none; object-fit: contain; } .brand-lockup .wordmark { display: none; width: 196px; height: auto; } .brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1rem; line-height: 1.15; } .brand-sub { display: block; font-size: .6875rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; } .nav-desktop { display: none; } .nav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .nav-link { display: block; padding: 10px 12px; text-decoration: none; font-family: var(--font-display); font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; color: var(--ink); border-radius: var(--radius-sm); } .nav-link:hover { color: var(--brand-dark); background: var(--brand-light); } .nav-link[aria-current="page"], .nav-link.is-section { color: var(--brand-dark); box-shadow: inset 0 -3px 0 var(--brand); } /* The emergency route is the highest-intent page on the site. Marked in the CTA colour so it reads as the urgent path, not just another link. Colour is not the only signal — the label itself says "24/7 Emergency". */ .nav-link.nav-urgent { color: var(--cta); } .nav-link.nav-urgent:hover { color: var(--cta-hover); background: #FDEEEA; } .has-menu { position: relative; } .menu-toggle { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-family: var(--font-display); font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; padding: 10px 10px; background: none; border: 0; border-radius: var(--radius-sm); color: var(--ink); cursor: pointer; } .menu-toggle:hover { color: var(--brand-dark); background: var(--brand-light); } .menu-toggle svg { transition: transform .15s; } .menu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .submenu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(6, 62, 105, .14); list-style: none; margin: 0; padding: 8px; } .submenu[hidden] { display: none; } .submenu a { display: block; padding: 10px 14px; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink); font-size: .9375rem; } .submenu a:hover { background: var(--brand-light); color: var(--brand-dark); } .submenu .divider { height: 1px; background: var(--line); margin: 6px 0; } /* ── Mega menu (Services) ──────────────────────────────────────────── */ .has-mega { position: static; } .mega-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 100; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 16px 48px rgba(6, 62, 105, .16); } .mega-panel[hidden] { display: none; } .mega-inner { display: grid; grid-template-columns: 1fr 220px; gap: 24px; max-width: var(--wrap); margin: 0 auto; padding: 28px 24px; } .mega-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; } .mega-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .15s, border-color .15s; } .mega-card:hover { border-color: var(--brand); box-shadow: 0 4px 16px rgba(6, 62, 105, .12); } .mega-card img { width: 100%; height: 120px; object-fit: cover; display: block; } .mega-card-body { padding: 12px 14px; } .mega-card-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: .9375rem; margin-bottom: 2px; } .mega-card-desc { display: block; font-size: .8125rem; color: var(--muted); line-height: 1.4; } .mega-rail { display: flex; flex-direction: column; justify-content: space-between; border-left: 1px solid var(--line); padding-left: 24px; } .mega-rail-emergency { text-align: center; } .mega-rail-heading { font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin: 0 0 12px; } .mega-rail-sub { font-size: .8125rem; color: var(--muted); margin: 8px 0 0; } .mega-all-link { display: block; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: .875rem; color: var(--brand); text-decoration: none; padding: 10px 0; } .mega-all-link:hover { color: var(--brand-dark); } @media (max-width: 899px) { .mega-panel { display: none !important; } } /* Phone and the booking CTA never collapse into the hamburger. */ .header-actions { display: flex; align-items: center; gap: 10px; } .header-phone { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--brand-dark); text-decoration: none; padding: 8px; white-space: nowrap; } .header-phone:hover { color: var(--cta); } .header-phone .num { display: none; } /* must NOT match .visually-hidden — that span carries the accessible name */ .header-cta { display: none; padding: 12px 20px; } .hamburger { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: none; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; color: var(--ink); } .mobile-panel { display: none; border-top: 1px solid var(--line); background: #fff; padding: 8px 0 20px; } .mobile-panel.is-open { display: block; } .mobile-panel ul { list-style: none; margin: 0; padding: 0; } .mobile-panel a { display: block; padding: 13px 4px; text-decoration: none; color: var(--ink); font-family: var(--font-display); font-weight: 600; border-bottom: 1px solid var(--line); } .mobile-panel .sub a { padding-left: 20px; font-weight: 500; font-size: .9375rem; color: var(--muted); } .mobile-panel .group-label { font-family: var(--font-display); font-weight: 700; padding: 14px 4px 6px; color: var(--brand-dark); } /* ── Trust bar ──────────────────────────────────────────────────────── */ .trust-bar { background: var(--brand-dark); color: #fff; font-size: .9375rem; } .trust-bar ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; list-style: none; margin: 0; padding: 13px 0; } .trust-bar li { display: flex; align-items: center; gap: 8px; font-weight: 500; } .trust-bar svg { flex: none; color: var(--star); } /* ── Sections ───────────────────────────────────────────────────────── */ .section { padding: 56px 0; } .section-lg { padding: 72px 0; } .section-sm { padding: 40px 0; } .section-tint { background: var(--brand-light); } /* --brand-text scores only 4.01:1 on --brand-light. Enforced here so no individual link has to remember it. See design-system.md §1.3 rule 2. */ .section-tint a:not(.btn) { color: var(--brand-dark); } .fact-tile a:not(.btn), .card a:not(.btn) { color: var(--brand-text); } .section-tint .card a:not(.btn) { color: var(--brand-text); } .section-dark { background: var(--brand-dark); color: #fff; } .section-dark h2, .section-dark h3 { color: #fff; } .section-dark a:not(.btn) { color: #fff; } /* Gradient: white → brand-light. Softer than flat .section-tint. */ .section-gradient { background: linear-gradient(180deg, #fff 0%, var(--brand-light) 100%); } .section-gradient a:not(.btn) { color: var(--brand-dark); } .section-gradient .card a:not(.btn) { color: var(--brand-text); } /* Gradient: brand → brand-dark at 135°. Deploys --brand-accent in eyebrow. */ .section-gradient-dark { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); color: #fff; } .section-gradient-dark h2, .section-gradient-dark h3 { color: #fff; } .section-gradient-dark a:not(.btn) { color: #fff; } .section-gradient-dark .eyebrow { color: var(--brand-accent); } .section-gradient-dark .btn-primary { box-shadow: 0 0 0 2px rgba(255,255,255,.9); } /* Neutral gray — alternation variety without blue. */ .section-gray { background: #F5F6F8; } /* Mid-page CTA strip — compact, catches users who are ready early. */ .cta-mid { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); color: #fff; padding: 28px 0; } .cta-mid .wrap { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; } .cta-mid p { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; } .cta-mid-actions { display: flex; gap: 12px; flex-wrap: wrap; } .cta-mid .btn-primary { box-shadow: 0 0 0 2px rgba(255,255,255,.9); } /* Accent bar under section headings — visual anchoring with --brand-accent. */ .section h2::after { content: ""; display: block; width: 48px; height: 3px; background: var(--brand-accent); margin-top: .3em; border-radius: 2px; } .card h2::after, .offer h2::after, .booking h2::after, .reviews-head h2::after { display: none; } .eyebrow { font-family: var(--font-display); font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-dark); margin: 0 0 .5em; } .section-dark .eyebrow { color: #A9D6F5; } .lede { font-size: 1.1875rem; line-height: 1.6; } /* ── Hero — v2's proportions, measured at 1440px: 700px tall, H1 67.7px/900 weight with line-height BELOW the font size, photo full-bleed on the right flush to top/right/bottom with no radius or shadow, platform badges above the headline. ─────────────────────── */ .hero { background: var(--brand-hero); color: #fff; } .hero-grid { display: grid; } .hero-content { padding: 34px 20px 44px; } .hero-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .hero-brand-text { min-width: 0; } .hero-wordmark { height: 44px; width: auto; max-width: 100%; } .hero-mark { width: 120px; height: auto; flex: none; } .hero-tagline { font-size: 1.0625rem; font-style: italic; color: #fff; margin: 12px 0 0; } .hero h1 { color: #fff; font-weight: 900; letter-spacing: -.02em; font-size: clamp(2rem, 4vw, 3.25rem); /* max ~52px — sized for 10-word SEO headline */ line-height: .98; margin: 0 0 .35em; } .hero-sub { font-size: 1.0625rem; color: #fff; margin: 0 0 1.35em; max-width: 50ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; } .hero-trustline { font-size: .8125rem; color: #fff; margin: 0; } /* no opacity: on the van hero only solid white reaches AA */ /* Photo bleeds to the viewport edge — no radius, no shadow, no gap. */ .hero-photo { position: relative; min-height: 300px; align-self: stretch; } .hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; border-radius: 0; box-shadow: none; } /* Emergency page: the darker ground reads as urgent and distinct from the homepage slab without a wall of red. White text 12.71:1 (A) / 11.05:1 (B). The CTA red only reaches 2.6:1 against it, so the white ring on .hero .btn-primary is doing real work here, not decoration. Research calls for red on emergency pages — our primary CTA already is red, so that is satisfied without shouting. */ .hero-urgent { background: var(--brand-dark); } .hero-urgent .eyebrow { color: var(--brand-accent); } .hero-urgent .hero-sub { max-width: 60ch; } /* Interior pages keep a lighter, shorter hero so the homepage slab stays distinctive. */ .hero-light { background: var(--brand-light); color: var(--ink); } .hero-light h1 { color: var(--ink); font-size: clamp(1.85rem, 3.4vw, 2.9rem); line-height: 1.08; font-weight: 800; } .hero-light .eyebrow { color: var(--brand-dark); } .hero-light .hero-sub { color: #333; } .hero-light .hero-tagline, .hero-light .hero-trustline { color: var(--muted); } .hero-light .hero-media img { box-shadow: 0 14px 34px rgba(0,0,0,.14); border-radius: var(--radius); max-height: 400px; width: 100%; object-fit: cover; } .hero-light .hero-grid { gap: 28px; } .hero-light .hero-content { padding-left: 0; padding-right: 0; } .hero-light > .wrap { padding-block: 40px 44px; } /* Primary button needs a ring on coloured surfaces — the CTA red measures only 1.67:1 against #004AAD, failing the 3:1 non-text contrast rule. */ .hero .btn-primary, .section-dark .btn-primary { box-shadow: 0 0 0 2px rgba(255,255,255,.9); } .hero .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.9); } .hero .btn-secondary:hover { background: rgba(255,255,255,.14); color: #fff; } .hero-light .btn-secondary { background: #fff; color: var(--brand-dark); border-color: var(--brand); } .hero-light .btn-primary { box-shadow: none; } .btn-lg { min-height: 56px; padding: 15px 30px; font-size: 1.0625rem; } .stars { color: var(--star); letter-spacing: .08em; } /* ── Platform rating badges — Google / Facebook / Yelp / Nextdoor ───── */ .platforms { display: flex; flex-wrap: wrap; gap: 12px 24px; list-style: none; padding: 0; margin: 0 0 16px; } .platforms li { display: flex; align-items: center; gap: 9px; } .platforms img { width: 34px; height: 34px; flex: none; object-fit: contain; } .platforms .val { display: block; font-family: var(--font-display); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #fff; margin-top: 2px; } .platforms .stars { font-size: .8125rem; line-height: 1; } .hero-light .platforms .val { color: var(--muted); } /* ── Photo service cards ────────────────────────────────────────────── */ .photo-card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; } .photo-card:hover { border-color: var(--brand-accent); box-shadow: 0 12px 30px rgba(0,0,0,.12); transform: translateY(-2px); } .photo-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 40%; } /* Portrait sources lose too much to a 3:2 crop. `fit-whole` scales the photo to fit the preview box entirely instead of filling it, on a tinted ground so the letterboxing reads as deliberate. */ .photo-card img.fit-whole { object-fit: contain; background: var(--brand-light); padding: 6px; } .photo-card .body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; } .photo-card h3 { font-size: 1.125rem; margin-bottom: .3em; } .photo-card p { font-size: .9375rem; color: #444; margin-bottom: 0; } .photo-card .card-cta { margin-top: auto; padding-top: 12px; } .photo-card a.stretched { text-decoration: none; color: inherit; } .photo-card a.stretched::after { content: ""; position: absolute; inset: 0; } /* ── Differentiators — numbered, each carrying a real review ────────── */ .diffs { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; } .diff { display: grid; grid-template-columns: 40px 1fr; gap: 14px; } .diff .n { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-light); color: var(--brand-dark); font-family: var(--font-display); font-weight: 800; } .diff h3 { font-size: 1.0625rem; margin-bottom: .25em; } .diff p { margin: 0; font-size: .9375rem; color: #444; } .diff .said { margin: .5em 0 0; font-size: .9375rem; font-style: italic; color: var(--muted); } /* ── Offer block ────────────────────────────────────────────────────── */ .offer { background: var(--brand-dark); color: #fff; border-radius: var(--radius); overflow: hidden; } .offer-grid { display: grid; } .offer .body { padding: 30px; } .offer h2 { color: #fff; } .offer .price { color: var(--star); } .offer ul { list-style: none; padding: 0; margin: 0 0 22px; } .offer li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 9px; font-size: .9375rem; color: #e6eef6; } .offer li svg { flex: none; margin-top: 3px; color: var(--brand-accent); } .offer img { width: 100%; height: 100%; object-fit: cover; min-height: 260px; } /* ── Review carousel ────────────────────────────────────────────────── */ .reviews-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: #fff; } .reviews-head .who { display: flex; align-items: center; gap: 12px; } @keyframes scroll-reviews { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .rail-wrap { overflow: hidden; position: relative; border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); background: var(--brand-light); } .rail-wrap::before, .rail-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40px; z-index: 2; pointer-events: none; } .rail-wrap::before { left: 0; background: linear-gradient(to right, var(--brand-light), transparent); } .rail-wrap::after { right: 0; background: linear-gradient(to left, var(--brand-light), transparent); } .reviews-rail { display: flex; gap: 16px; padding: 18px; margin: 0; width: max-content; animation: scroll-reviews 60s linear infinite; } .reviews-rail:hover, .reviews-rail:focus-within { animation-play-state: paused; } .review { flex: 0 0 320px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; } .review:hover { border-color: var(--brand-accent); box-shadow: 0 4px 16px rgba(6, 62, 105, .10); transform: translateY(-2px); } .review .top { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; } .review .avatar { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--brand); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1rem; } .review .name { font-family: var(--font-display); font-weight: 700; font-size: .9375rem; } .review .when { font-size: .75rem; color: var(--muted); } .review p { font-size: .9063rem; color: #444; margin: 0; } @media (prefers-reduced-motion: reduce) { .reviews-rail { animation: none; flex-wrap: wrap; width: auto; } } /* ── Contact form ───────────────────────────────────────────────────── */ .form-grid { display: grid; gap: 14px; } .field label { display: block; font-family: var(--font-display); font-weight: 600; font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; color: var(--ink); } .field input, .field select, .field textarea { width: 100%; padding: 12px 14px; font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); min-height: 48px; } .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--brand); } .form-note { font-size: .8125rem; color: var(--muted); margin: 0; } /* ── Cards ──────────────────────────────────────────────────────────── */ .grid { display: grid; gap: 20px; } .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr; } .card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: 0 1px 3px rgba(6, 62, 105, .06); } /* Only the CTA line is pushed to the bottom to align across a grid row. Applying this to any last paragraph strands prose under the heading. */ .card > .card-cta:last-child { margin-top: auto; padding-top: 12px; } .card-icon { display: block; width: 28px; height: 28px; color: var(--brand-accent); margin-bottom: 10px; flex-shrink: 0; } .card h3 { margin-bottom: .35em; } .card p:last-child { margin-bottom: 0; } .card-link { transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; } .card-link:hover { border-color: var(--brand-accent); box-shadow: 0 10px 26px rgba(6, 62, 105, .10); transform: translateY(-2px); } /* The whole card is the target, not just the heading. */ .card-link a.stretched::after { content: ""; position: absolute; inset: 0; } .card-link a.stretched { text-decoration: none; color: inherit; } .card-cta { font-family: var(--font-display); font-weight: 600; color: var(--brand-text); } .section-tint .card-cta, .section-gradient .card-cta { color: var(--brand-dark); } .fact-tile { background: var(--brand-light); border-radius: var(--radius); padding: 20px; transition: box-shadow .2s ease, transform .2s ease; } .fact-tile:hover { box-shadow: 0 4px 16px rgba(6, 62, 105, .08); transform: translateY(-1px); } .fact-tile h3 { font-size: 1.0625rem; margin-bottom: .3em; color: var(--brand-dark); } .fact-tile p { margin: 0; font-size: .9375rem; color: #333; } /* ── Quotes ─────────────────────────────────────────────────────────── */ .quote { background: var(--brand-light); border-radius: var(--radius); padding: 24px; margin: 0; position: relative; } .quote-top { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; } .quote .avatar { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .9375rem; flex-shrink: 0; } .quote .q-name { font-family: var(--font-display); font-weight: 700; font-size: .9375rem; } .quote .q-date { font-size: .75rem; color: var(--muted); } .quote p { font-size: 1rem; color: #2b2b2b; margin-bottom: 0; } .quote cite { display: block; font-style: normal; font-weight: 600; font-size: .875rem; color: var(--muted); margin-top: 12px; } .quote-simple { border-left: 4px solid var(--brand); background: transparent; padding: 4px 0 4px 20px; border-radius: 0; } .quote-simple .quote-top { display: none; } .quote-simple p { font-style: italic; font-size: 1.0625rem; } .section-dark .quote-simple { border-left-color: #A9D6F5; } .section-dark .quote-simple p { color: #eaf4fc; } .section-dark .quote-simple cite { color: #A9D6F5; } /* ── Offer ──────────────────────────────────────────────────────────── */ .price { font-family: var(--font-display); font-size: 3rem; font-weight: 800; line-height: 1; color: var(--cta); } .section-dark .price { color: #FFB199; } /* ── FAQ — native details, works with JS off, answers stay in the DOM ─ */ .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 4px; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; color: var(--ink); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--brand-text); flex: none; line-height: 1; } .faq details[open] summary::after { content: "\2212"; } .faq summary:hover { color: var(--brand-dark); background: var(--brand-light); border-radius: var(--radius-sm); } .faq .answer { padding: 0 4px 20px; max-width: var(--measure); } .faq .answer > :last-child { margin-bottom: 0; } /* ── Area lists ─────────────────────────────────────────────────────── */ .area-columns { columns: 2; column-gap: 28px; } .area-columns li { break-inside: avoid; margin-bottom: 8px; } .area-block { margin-bottom: 26px; } .area-block h3 { margin-bottom: .2em; font-size: 1.0625rem; color: var(--brand-dark); } .area-block p { margin: 0; color: #333; font-size: .9688rem; } /* ── Booking embed ──────────────────────────────────────────────────── */ .booking { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; } .booking iframe { width: 100%; min-height: 560px; border: 0; display: block; } /* ── Footer ─────────────────────────────────────────────────────────── */ .site-footer { background: var(--brand-dark); color: #dfe9f1; padding: 48px 0 24px; font-size: .9375rem; } .site-footer h2 { font-size: 1rem; color: #fff; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .9em; } .site-footer a { color: #dfe9f1; text-decoration: none; } .site-footer a:hover { color: #fff; text-decoration: underline; } .footer-grid { display: grid; gap: 32px; } .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer li { margin-bottom: 9px; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.18); margin-top: 36px; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; font-size: .875rem; } .footer-legal { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; padding: 0; margin: 0; } .social-row { display: flex; gap: 14px; margin-top: 14px; } .social-row a { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; } .footer-areas-row { border-top: 1px solid rgba(255,255,255,.12); margin-top: 32px; padding-top: 28px; } .footer-areas { columns: 2; column-gap: 24px; font-size: .8125rem; } .footer-areas li { break-inside: avoid; margin-bottom: 6px; } /* ── Sticky mobile call bar ─────────────────────────────────────────── */ .call-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; border-top: 1px solid rgba(0,0,0,.12); padding-bottom: env(safe-area-inset-bottom); } .call-bar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--call-bar); text-decoration: none; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1rem; } .call-bar .call { background: var(--cta); } .call-bar .book { background: var(--brand-dark); } body { padding-bottom: calc(var(--call-bar) + env(safe-area-inset-bottom)); } /* ── Breakpoints ────────────────────────────────────────────────────── */ @media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } h1 { font-size: 2.375rem; } } @media (min-width: 768px) { .header-phone .num { display: inline; } .header-cta { display: inline-flex; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .area-columns { columns: 3; } .footer-areas { columns: 3; } .offer-grid { grid-template-columns: 1.15fr .85fr; } .diffs { grid-template-columns: repeat(2, 1fr); gap: 26px 32px; } .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } } /* The wordmark costs ~196px. Below 1280 the nav needs that space more than the header needs the wordmark — the mark alone still carries the brand. */ @media (min-width: 1280px) { .brand-lockup .wordmark { display: block; } } @media (min-width: 1024px) { body { font-size: 18px; padding-bottom: 0; } h1 { font-size: 3rem; } h2 { font-size: 2.125rem; } h3 { font-size: 1.5rem; } .nav-desktop { display: block; } .brand-lockup .brand-name { display: none; } .hamburger, .mobile-panel, .call-bar { display: none; } .section { padding: 72px 0; } .section-lg { padding: 96px 0; } /* 60/40 split per cross-site research (Anchor, Comfort Monster, golden ratio). 80vh height per Acree/All Year Cooling pattern, capped at 800px. */ .hero-grid { grid-template-columns: 60% 40%; align-items: center; min-height: 80vh; max-height: 800px; } .hero-content { padding: 32px 24px 32px clamp(24px, 2.5vw, 48px); } .hero-mark { width: 160px; } .hero-wordmark { height: 64px; } .hero-sub { font-size: 1.125rem; } .hero-light .hero-grid { grid-template-columns: 1.05fr .95fr; min-height: 0; gap: 48px; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; } .hero-light .hero-content { padding: 56px 0; } .hero-light > .wrap { padding-block: 60px 64px; } .grid-4 { grid-template-columns: repeat(4, 1fr); } .footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1.3fr; } .footer-areas { columns: 4; column-gap: 32px; } .area-columns { columns: 4; } } /* ── Scroll fade-in ────────────────────────────────────────────────── */ .fade-in { opacity: 0; transform: translateY(20px); transition: opacity .4s ease, transform .4s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } .fade-in { opacity: 1; transform: none; } } /* ── Preview-only palette switcher. Enabled by palettePreview in _data. Delete this block and the include in base.njk once a palette is chosen. ── */ .palette-switch { position: fixed; right: 12px; bottom: calc(var(--call-bar) + 12px); z-index: 120; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: #111; color: #fff; padding: 8px 10px; border-radius: 8px; font-family: var(--font-display); font-size: .75rem; box-shadow: 0 8px 24px rgba(0,0,0,.35); } .palette-switch span { opacity: .65; text-transform: uppercase; letter-spacing: .08em; } .palette-switch button { font: inherit; font-weight: 700; cursor: pointer; color: #fff; background: #333; border: 1px solid #555; border-radius: 5px; padding: 6px 9px; } .palette-switch button[aria-pressed="true"] { background: #0B5FA5; border-color: #7BC3FF; } @media (min-width: 1024px) { .palette-switch { bottom: 12px; } }