/* ═══════════════════════════════════════════════════════════════════════════ ESCARGO OS — shared page layer Loaded after escargo-os.css on every public route. 1. Global image fitting (nothing stretches, letterboxes or floats) 2. Interior page hero 3. Shared page components (image cards, product rows, CTA bands, loader) 4. Legacy bridge: restyles the original site.css markup so existing page bodies inherit this system instead of looking like a different website. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1 · Global image fitting ─────────────────────────────────────────────── */ .eo .eo-frame,.eo .eo-media,.eo .eo-dash-media, .eo .shot,.eo .ed-photo,.eo .illus,.eo .rec-photo,.eo .photo-card{ position:relative;overflow:hidden;border-radius:var(--radius-media);background:#0b2f1f; } .eo .eo-frame>img,.eo .eo-frame>picture>img,.eo .eo-frame>svg, .eo .eo-media>img,.eo .eo-media>picture>img, .eo .eo-dash-media>img,.eo .eo-dash-media>picture>img, .eo .shot>img,.eo .shot>picture>img, .eo .ed-photo>img,.eo .ed-photo>picture>img, .eo .illus>img,.eo .illus>picture>img, .eo .rec-photo>img,.eo .rec-photo>picture>img, .eo .photo-card>img,.eo .photo-card>picture>img{ width:100%;height:100%;display:block;object-fit:cover;object-position:center; } .eo picture{display:block;width:100%;height:100%} /* fixed ratios so an image can never push the page around */ .eo .eo-frame{aspect-ratio:16/10} .eo .eo-frame-tall{aspect-ratio:4/5} .eo .eo-frame-wide{aspect-ratio:21/9} .eo .eo-frame-square{aspect-ratio:1/1} .eo .shot,.eo .ed-photo,.eo .illus,.eo .rec-photo,.eo .photo-card{aspect-ratio:16/10} .eo .eo-dash-media{aspect-ratio:16/10} /* product-UI screenshots are documents: anchor to the top so the chrome reads */ .eo .eo-dash-media>img{object-position:top center} .eo .eo-frame-contain>img,.eo .eo-frame-contain>picture>img{object-fit:contain} /* per-asset focal points — faces, reception desks, vehicles must not be cropped out */ .eo [data-focus="showroom"] img{object-position:54% 50%} .eo [data-focus="reception"] img{object-position:66% 50%} .eo [data-focus="checkin"] img{object-position:62% 50%} .eo [data-focus="salesfloor"] img{object-position:50% 50%} .eo [data-focus="road"] img{object-position:68% 50%} .eo [data-focus="workshop"] img{object-position:50% 45%} .eo [data-focus="parts"] img{object-position:50% 50%} @media (max-width:640px){ .eo [data-focus="showroom"] img{object-position:57% 50%} .eo [data-focus="reception"] img{object-position:68% 48%} .eo [data-focus="checkin"] img{object-position:68% 52%} .eo [data-focus="salesfloor"] img{object-position:50% 55%} .eo .eo-frame{aspect-ratio:4/5} .eo .eo-frame-keep{aspect-ratio:16/10} } /* ── 2 · Interior page hero ───────────────────────────────────────────────── */ .eo-phero{position:relative;background:var(--eo-carbon);overflow:hidden;padding:0;border-bottom:1px solid var(--border)} .eo-phero-bg{position:absolute;inset:0;z-index:0} .eo-phero-bg img{width:100%;height:100%;object-fit:cover;display:block} .eo-phero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(90deg,rgba(4,26,16,.95) 0%,rgba(4,26,16,.88) 32%,rgba(4,26,16,.62) 62%,rgba(4,26,16,.34) 100%)} .eo-phero .eo-wrap{position:relative;z-index:2;padding-top:clamp(56px,6vw,88px);padding-bottom:clamp(56px,6vw,88px)} .eo-phero-copy{max-width:660px} .eo-phero h1{color:#fff;font-size:clamp(34px,3.6vw,52px);font-weight:300;line-height:1.14;letter-spacing:-.03em} .eo-phero .eo-lead{margin-top:18px;color:#c2d6c9;font-size:clamp(17px,1.35vw,20px);max-width:56ch} .eo-phero .eo-hero-ctas{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px} .eo-phero-crumb{display:flex;align-items:center;gap:8px;margin-bottom:14px;font-size:13px;color:#8fae9c} .eo-phero-crumb a{color:#8fae9c;text-decoration:none} .eo-phero-crumb a:hover{color:var(--eo-accent)} /* active navigation state */ .eo .eo-navbtn[aria-current="page"]{color:#fff} .eo .eo-navbtn[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:12px;height:2px;background:var(--eo-accent);border-radius:2px} /* ── 3 · Shared page components ───────────────────────────────────────────── */ .eo-prow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,4.5vw,72px);align-items:center} .eo-prow-rev .eo-prow-media{order:-1} .eo-prow h2{margin-bottom:16px} .eo-icards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px} .eo-icard{border:1px solid var(--eo-line);border-radius:var(--radius-card);overflow:hidden;background:#fff;display:flex;flex-direction:column} .eo-icard .eo-frame{border-radius:0;aspect-ratio:16/10} .eo-icard-body{padding:22px 20px;display:flex;flex-direction:column;flex:1} .eo-icard-body h3{margin-bottom:8px} .eo-icard-body p{font-size:14.5px;line-height:1.55;color:var(--eo-muted)} .eo-icard-body a{margin-top:auto;padding-top:16px;min-height:44px;display:inline-flex;align-items:flex-end;gap:7px;font-size:14px;font-weight:600;color:var(--eo-accent-lo);text-decoration:none} .eo-dark .eo-icard,.eo-deep .eo-icard{background:rgba(255,255,255,.035);border-color:var(--border)} .eo-dark .eo-icard-body p,.eo-deep .eo-icard-body p{color:#93ab9c} .eo-dark .eo-icard-body a,.eo-deep .eo-icard-body a{color:var(--eo-accent)} /* Escargo loading animation — shared shell loader */ .eo-loader{display:inline-flex;align-items:center;gap:11px;font-size:14px;color:var(--eo-muted)} .eo-loader i{width:22px;height:22px;border-radius:50%;border:2.5px solid rgba(128,191,32,.25);border-top-color:var(--eo-accent);display:block} @media (prefers-reduced-motion:no-preference){.eo-loader i{animation:eo-spin .9s linear infinite}} @keyframes eo-spin{to{transform:rotate(360deg)}} /* ── 4 · Legacy bridge ────────────────────────────────────────────────────── */ .eo main .wrap{max-width:var(--content-max);margin:0 auto;padding:0 var(--gutter);width:100%} .eo main section{padding:var(--section-y) 0} .eo main h1{font-family:var(--eo-display);font-weight:300;letter-spacing:-.03em;line-height:1.14} /* colour intentionally NOT set here: escargo-os.css:81 (.eo h1..h4) supplies --eo-ink at lower specificity, which is what lets .eo-dark/.eo-deep/.eo-aud-head override it on dark bands. Re-declaring it here (0,1,2) defeated that across all 49 pages. See ESCARGO-A11Y-AUDIT addendum 4. */ .eo main h2{font-family:var(--eo-display);font-size:clamp(28px,2.8vw,40px);font-weight:400;letter-spacing:-.022em;line-height:1.2} .eo main h3{font-family:var(--eo-display);font-size:19px;font-weight:600;letter-spacing:-.012em} .eo main p.lead,.eo main .lead{font-size:17px;line-height:1.6;color:var(--eo-body)} .eo main .sub{font-size:16px;color:var(--eo-muted);max-width:66ch} .eo main .kicker{display:inline-block;font-family:var(--eo-text);font-size:11px;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--eo-accent-lo); background:none;border:0;padding:0;margin-bottom:14px;border-radius:0} .eo main .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px; padding:13px 26px;border-radius:var(--eo-r-sm);font-family:var(--eo-text);font-size:.975rem; font-weight:600;border:1.5px solid transparent;text-decoration:none;cursor:pointer} .eo main .btn-lime{background:var(--eo-accent);color:var(--eo-carbon-deep);border-color:var(--eo-accent)} .eo main .btn-lime:hover{background:var(--eo-accent-hi);border-color:var(--eo-accent-hi)} .eo main .btn-outline{background:transparent;color:var(--eo-ink);border-color:#c3cfc0} .eo main .btn-outline:hover{border-color:var(--eo-carbon);background:var(--eo-grey)} .eo main .card{background:#fff;border:1px solid var(--eo-line);border-radius:var(--radius-card);padding:26px 24px;box-shadow:none} .eo main .card h3{margin-bottom:8px} .eo main .card p{font-size:14.5px;line-height:1.55;color:var(--eo-muted)} .eo main .card .icon{width:42px;height:42px;border-radius:6px;background:rgba(128,191,32,.13);color:var(--eo-accent-lo);display:flex;align-items:center;justify-content:center} .eo main .card .icon svg{width:21px;height:21px} .eo main .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px} .eo main .ed-pale,.eo main .features,.eo main .steps{background:var(--eo-grey)} .eo main .ed-white{background:#fff} .eo main .ed-forest{background:var(--eo-carbon);color:#c9dbd0} .eo main .ed-forest h2,.eo main .ed-forest h3{color:#fff} .eo main .ed-forest .lead,.eo main .ed-forest p{color:#b6cbbe} .eo main .ed-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,64px);align-items:center} .eo main .field label{display:block;font-size:13.5px;font-weight:600;color:var(--eo-ink);margin-bottom:6px} .eo main .field input,.eo main .field select,.eo main .field textarea{ width:100%;min-height:47px;padding:11px 14px;border:1.5px solid var(--eo-line); border-radius:var(--eo-r-sm);font-family:var(--eo-text);font-size:15.5px;color:var(--eo-ink);background:#fff} .eo main .field input:focus,.eo main .field select:focus,.eo main .field textarea:focus{ border-color:var(--eo-accent);outline:none;box-shadow:0 0 0 3px rgba(128,191,32,.18)} .eo main .faq details{border-bottom:1px solid var(--eo-line)} .eo main .faq summary{font-family:var(--eo-display);font-size:17px;font-weight:600;color:var(--eo-ink);padding:20px 0;cursor:pointer} .eo main .signup{background:var(--eo-grey)} .eo main .badge{background:var(--eo-grey-2);color:var(--eo-muted);border:1px solid var(--eo-line); font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;padding:3px 8px;border-radius:999px} /* legacy hero blocks adopt the interior page hero look */ .eo main .hero{background:var(--eo-carbon);color:#c9dbd0;position:relative;padding:clamp(56px,6vw,88px) 0} .eo main .hero h1{color:#fff} .eo main .hero .lead,.eo main .hero p{color:#c2d6c9} .eo main .hero .kicker{color:var(--eo-accent)} .eo main .hero .btn-outline{color:#fff;border-color:rgba(255,255,255,.34)} .eo main .hero .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.07)} .eo main .hero .trust{color:#9db5a6} /* legacy heroes carry an inline `style="display:block;max-width:860px"` on .wrap, which indents the copy off the page gutter. Only !important can reach past an inline style, and it is scoped to legacy heroes alone. */ .eo main .hero{overflow:hidden} .eo main .hero>.eo-phero-bg{position:absolute;inset:0;z-index:0} .eo main .hero>.eo-phero-bg img{width:100%;height:100%;object-fit:cover;display:block} .eo main .hero>.eo-phero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(90deg,rgba(4,26,16,.95) 0%,rgba(4,26,16,.88) 32%,rgba(4,26,16,.62) 62%,rgba(4,26,16,.34) 100%)} .eo main .hero>.wrap{position:relative;z-index:2;display:block!important;max-width:var(--content-max)!important;padding:0 var(--gutter)!important} @media (max-width:768px){ .eo main .hero>.eo-phero-scrim{background:linear-gradient(180deg,rgba(4,26,16,.62) 0%,rgba(4,26,16,.88) 46%,rgba(4,26,16,.96) 100%)} } .eo main .hero .lead,.eo main .hero p.lead{max-width:56ch!important} .eo main .hero h1{max-width:18ch} @media (max-width:1080px){ .eo-icards{grid-template-columns:repeat(2,1fr)} } @media (max-width:900px){ .eo main .grid-3,.eo main .ed-grid,.eo-prow{grid-template-columns:1fr;gap:36px} .eo-prow-rev .eo-prow-media{order:0} } @media (max-width:660px){ .eo-icards{grid-template-columns:1fr} .eo main .btn{width:100%} .eo main .hero-ctas{flex-direction:column;display:flex;gap:10px} } /* legacy .page-hero adopts the same photographic treatment as .hero */ .eo main .page-hero{position:relative;overflow:hidden;background:var(--eo-carbon);color:#c9dbd0;padding:clamp(56px,6vw,88px) 0} .eo main .page-hero h1{color:#fff} .eo main .page-hero p,.eo main .page-hero .lead{color:#c2d6c9} .eo main .page-hero .kicker{color:var(--eo-accent)} .eo main .page-hero>.eo-phero-bg{position:absolute;inset:0;z-index:0} .eo main .page-hero>.eo-phero-bg img{width:100%;height:100%;object-fit:cover;display:block} .eo main .page-hero>.eo-phero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(90deg,rgba(4,26,16,.95) 0%,rgba(4,26,16,.88) 32%,rgba(4,26,16,.62) 62%,rgba(4,26,16,.34) 100%)} .eo main .page-hero>.wrap{position:relative;z-index:2;max-width:var(--content-max);padding:0 var(--gutter)} @media (max-width:768px){ .eo main .page-hero>.eo-phero-scrim{background:linear-gradient(180deg,rgba(4,26,16,.62) 0%,rgba(4,26,16,.88) 46%,rgba(4,26,16,.96) 100%)} } /* ── 9 · Accessibility corrections (2026-07-22) ──────────────────────────────── Extends the existing token + dark-section system; introduces no new colour, button or type system (UI FREEZE compliant). (a) Skip link — WCAG 2.4.1 Bypass Blocks (Level A). (b) Dark-section precedence repair. escargo-os.css already declares the convention `.eo-dark h1..h4 { color:#fff }` (0,1,1), but `.eo main h2/h3` in section 6 of THIS file (0,1,2, loaded last) outranks it — painting --eo-ink #11201a onto dark forest sections at ratios as low as 1.11:1, i.e. effectively invisible headings. The rules below restate the SAME convention at matching specificity. They do not invent colours; they restore the ones escargo-os.css already intended. Dark sections are those carrying .eo-dark/.eo-deep plus the standalone dark bands (.eo-hero-v .eo-trust-strip .eo-aud .eo-dash .eo-demo .eo-cta .escargo-coverage). Bare .eo-sec and .eo-grey are LIGHT and are not touched. ──────────────────────────────────────────────────────────────────────────── */ .eo-skip{ position:absolute;left:-9999px;top:0;z-index:9999; padding:12px 18px;min-height:44px;display:inline-flex;align-items:center; background:var(--eo-white);color:var(--eo-carbon); font-family:var(--eo-text);font-size:15px;font-weight:600; text-decoration:none;border-radius:0 0 8px 0; } .eo-skip:focus{left:0} /* (b) restore the dark-section heading convention at .eo main specificity */ .eo main .eo-dark h1, .eo main .eo-dark h2, .eo main .eo-dark h3, .eo main .eo-dark h4, .eo main .eo-deep h1, .eo main .eo-deep h2, .eo main .eo-deep h3, .eo main .eo-deep h4, .eo main .eo-hero-v h1, .eo main .eo-hero-v h2, .eo main .eo-hero-v h3, .eo main .eo-hero-v h4, .eo main .eo-trust-strip h2, .eo main .eo-trust-strip h3, .eo main .eo-aud h2, .eo main .eo-aud h3, .eo main .eo-aud h4, .eo main .eo-dash h2, .eo main .eo-dash h3, .eo main .eo-dash h4, .eo main .eo-demo h2, .eo main .eo-demo h3, .eo main .eo-demo h4, .eo main .eo-cta h2, .eo main .eo-cta h3, .eo main .escargo-coverage h2, .eo main .escargo-coverage h3{ color:var(--eo-white) } /* body copy on the dark bands (escargo-os.css declares #bccfc2 for .eo-lead) */ .eo main .eo-demo .eo-lead,.eo main .eo-dash .eo-lead, .eo main .eo-cta .eo-lead,.eo main .eo-dark .eo-lead, .eo main .eo-deep .eo-lead{ color:#bccfc2 } /* outline/ghost button sitting on a dark band */ .eo main .eo-hero-v .eo-btn-outline,.eo main .eo-demo .eo-btn-outline, .eo main .eo-cta .eo-btn-outline,.eo main .eo-dark .eo-btn-outline, .eo main .eo-deep .eo-btn-outline{ color:var(--eo-white);border-color:rgba(255,255,255,.42) } /* primary lime button: escargo-os.css:109 already says --eo-carbon-deep (~7:1); it was being overridden to --eo-body (3.73:1 on lime). Restate it. */ .eo .eo-btn-primary{ color:var(--eo-carbon-deep) } /* ghost button: escargo-os.css:116 declares color:#fff — border-color survives but `color` was outranked, leaving --eo-body on a dark band (1.51:1). */ .eo .eo-btn-ghost{ color:var(--eo-white) } /* eyebrow on the dark bands that predate the .eo-dark/.eo-deep modifiers: escargo-os.css:100 already switches to --eo-accent there; these sections never carried the modifier, so they kept --eo-accent-lo (4.14:1 on forest). */ .eo main .eo-hero-v .eo-eyebrow,.eo main .eo-dash .eo-eyebrow, .eo main .eo-aud .eo-eyebrow,.eo main .eo-demo .eo-eyebrow, .eo main .eo-cta .eo-eyebrow,.eo main .escargo-coverage .eo-eyebrow{ color:var(--eo-accent) } /* ── Photographic masthead ──────────────────────────────────────────────────── For pages whose content is JS-mounted or is a bare form, where there is no hero container to fill. Purely decorative: it adds the photography without duplicating or moving the page's own heading. */ .eo-pbanner{position:relative;height:clamp(150px,20vw,230px);overflow:hidden;background:var(--eo-carbon);border-bottom:1px solid var(--border)} .eo-pbanner img{width:100%;height:100%;object-fit:cover;display:block} .eo-pbanner::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(4,26,16,.55) 0%,rgba(4,26,16,.30) 45%,rgba(4,26,16,.88) 100%)} @media (max-width:640px){ .eo-pbanner{height:132px} } /* skip-link + in-page anchor landing: the header is position:sticky at 71px, so an anchor target scrolls under it. scroll-padding-top reserves that band for every in-page jump (#top, #for-garages, #how-it-works, #coverage, #help). `main[tabindex="-1"]` is focusable only programmatically — it takes focus from the skip link without joining the tab order, and shows no ring for mouse users (:focus-visible does not match). */ html{ scroll-padding-top:84px } .eo main[tabindex="-1"]:focus{ outline:none } .eo main[tabindex="-1"]:focus-visible{ outline:3px solid var(--eo-accent);outline-offset:-3px } /* ── 10 · Legacy-system collision repairs (2026-07-22) ───────────────────────── These 18 pages carry BOTH the legacy site.css/directory.css system and the newer .eo token system. Two collisions produced WCAG AA failures. Both fixes are scoped under .eo so pages outside this system are untouched, and both restore a colour the legacy stylesheet already intended. (A) `.eo a{color:inherit}` (escargo-os.css:88, specificity 0,1,1) outranks site.css `.btn-lime{color:var(--forest-deep)}` (0,1,0), so the lime CTA inherited --eo-body: 3.73:1 on lime. --forest-deep IS defined (site.css:4) — it was simply being outranked, not missing. Affects "Get started" on 8 pages. (B) directory.css `.dir-check{color:var(--ink)}` (#232323) is a filter control designed for a light toolbar, but every directory page places `.dir-toolbar` inside the forest-green `.hero` — 1.24:1, the worst contrast in the estate. Affects "Verified only" on 8 pages. ──────────────────────────────────────────────────────────────────────────── */ .eo .btn-lime{ color:var(--forest-deep) } .eo .hero .dir-check{ color:var(--eo-white) } /* (C) legacy dark panels whose light-text rule lost a specificity TIE. `.garage-head h1{color:#fff}` (site.css:194) and `.rec-panel h2{...}` (site.css:300) are both (0,1,1) — identical to `.eo h1,.eo h2,.eo h3,.eo h4` (escargo-os.css:81). A tie is broken by source order, and escargo-os.css loads after site.css, so the legacy rule lost on any page that gained class="eo". Measured scope is exactly these two containers: `.page-hero h1` and `.ed-forest h2` were checked and pass at 12.65:1, so this is NOT a general latent problem across the legacy system. `.rec-panel` also has a markup/CSS mismatch: site.css styles `.rec-panel h2` but recovery.html uses `

`, so the legacy rule never matched at all. Both levels are covered below so the intent holds either way. .lead uses #bccfc2 — the same value escargo-os.css:102 already uses for `.eo-dark .eo-lead`. No new colours introduced. */ .eo .garage-head h1,.eo .garage-head h2, .eo .rec-panel h1,.eo .rec-panel h2{ color:var(--eo-white) } .eo .garage-head .lead,.eo .rec-panel .lead{ color:#bccfc2 } /* ── 11 · Header surface-flip repairs (2026-07-22) ───────────────────────────── Same root-cause family as §9 and §10: a colour declared for ONE surface leaks onto a DIFFERENT surface, because no rule restores the intended value at matching-or-higher specificity. Found by measuring the header's *interactive* states — the earlier sweeps only ever measured the default, closed state. (D) MOBILE DRAWER — the header is dark (`.eo-hdr` rgba(6,32,21,.93)), so `.eo .eo-navbtn{color:#d3e2d8}` (escargo-os.css:142) is correct there. At <=900px `.eo-hdr.eo-open .eo-nav` (escargo-os.css:600) re-parents the same buttons into a panel with `background:#fff` — and nothing restores an ink colour. Measured on the white drawer: rest #d3e2d8 on #fff = 1.34:1 (needs 4.5) :hover #fff = 1.00:1 li[data-open="true"] #fff = 1.00:1 (escargo-os.css:145) [aria-current="page"] #fff = 1.00:1 (this file, §nav) Five labels (Platform, Solutions, Resources, Company, Pricing) on all 49 pages — i.e. every phone visitor. The sibling drawer links are fine: they are anchors, so `.eo a{color:inherit}` picks up --eo-body from the panel; a