/* =========================================================================== THEME + LIGHTBOX + INSTANT-NAV layer (2026-06-21) Loaded LAST so it wins. Three concerns, each independent: 1. Dark mode — [data-theme="dark"] overrides the semantic palette. The whole site is built on CSS custom properties (--bg/--surface/--card/ --ink/--muted/--line) plus a copper accent, so a single palette swap re-skins every page. Set by an inline script (no FOUC) from localStorage('ae:theme') or prefers-color-scheme; toggled in the nav. 2. Gallery lightbox — full-screen photo viewer (keyboard + swipe). 3. View transitions — activate the native cross-document morph that the per-card view-transition-name hooks were already set up for. =========================================================================== */ /* --------------------------------------------------------------------------- 1. DARK THEME PALETTE Warm near-black ground (not pure #000 — keeps the editorial warmth), raised card surfaces, a brighter copper that holds contrast on dark, and softened lines. Tuned so body text (--ink on --bg) and muted text clear WCAG AA. --------------------------------------------------------------------------- */ [data-theme="dark"] { --bg: #15120E; /* warm near-black page ground */ --surface: #211C16; /* cards, segmented controls, chips */ --card: #2A241D; /* raised panels (floorplan fig, decor card, popovers) */ --ink: #F3ECE1; /* primary text — 13.8:1 on --bg */ --muted: #B3A795; /* secondary text — 6.6:1 on --bg, clears AA */ --line: #3A3228; /* hairlines / borders */ --copper: #D98B5E; /* brighter copper for fills on dark */ --copper-deep: #E59A6C; /* link/heading copper — 6.1:1 on --bg */ --copper-text: #E7A172; /* small copper text — 7.0:1 on --bg */ --shadow: 0 1px 2px rgba(0,0,0,.40), 0 10px 30px rgba(0,0,0,.50); /* control layer (controls.css) */ --ctl-bg: #241E18; --ctl-bg-hover: #2B251E; --ctl-line: #3A3228; --ctl-line-hover: #6E5A45; --ctl-shadow: 0 1px 1px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.35); --ctl-shadow-hover: 0 2px 4px rgba(0,0,0,.40), 0 8px 18px rgba(0,0,0,.45); --ctl-ring: 0 0 0 3px rgba(217,139,94,.28); --copper-soft: rgba(217,139,94,.14); color-scheme: dark; } /* The sticky nav uses a translucent cream backdrop in site.css; in dark let the dark ground show through instead. */ [data-theme="dark"] .topnav { background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom-color: var(--line); } [data-theme="dark"] .topnav.is-stuck { background: color-mix(in srgb, var(--bg) 92%, transparent); } /* Raised panels keep a faint border so they read against the page in dark. */ [data-theme="dark"] .floorplan-fig, [data-theme="dark"] .decor-card, [data-theme="dark"] .up-table-wrap { border-color: var(--line); } [data-theme="dark"] .decor-swatch img { border-color: var(--line); } /* Photo gallery's dark ground is already #1a1a1a; nudge to match the theme. */ [data-theme="dark"] .gallery-img-wrap.is-photo { background: #100d0a; } /* Cutout gradient (cream sweep) would glow on dark — calm it to a warm slate. */ [data-theme="dark"] .gallery-img-wrap.is-cutout { background: radial-gradient(125% 135% at 50% 16%, #2c2620 0%, #241f19 52%, #1c1813 100%); } [data-theme="dark"] .gallery-img--cutout { mix-blend-mode: normal; } /* Saved page + save buttons: the warm cream card-media gradient and white studio cutouts need the same dark treatment the explore cards get, and the "is-saved" wash should read on the dark surface. */ [data-theme="dark"] .saved-card-media { background: radial-gradient(125% 135% at 50% 16%, #2c2620 0%, #241f19 52%, #1c1813 100%); } [data-theme="dark"] .saved-card-media img { mix-blend-mode: normal; } [data-theme="dark"] .save-btn.is-saved { background: rgba(217,139,94,.16); } [data-theme="dark"] .saved-remove:hover { color: #e8927c; border-color: #7a4035; background: rgba(232,146,124,.10); } /* Year/plan ribbons already sit on a translucent dark ink; deepen slightly so they hold over a dark photo too. */ [data-theme="dark"] .card-year, [data-theme="dark"] .xcard-year, [data-theme="dark"] .fam-plans { background: rgba(0,0,0,.58); } /* --- Status-colored components (tow verdict, campground fit, hookup pills) -- These carry semantic hues (green = ok, amber = tight, red = over/no, violet/blue = power grade). On light they're pale pastel fills; on dark a pale pill floats and glares. Re-tint each as a deep, low-light wash of the SAME hue with a light readable label, so the meaning survives the theme. */ [data-theme="dark"] .tow-verdict.tow-ok { background: #16241a; border-color: #2f5236; border-left-color: #4fae54; } [data-theme="dark"] .tow-verdict.tow-ok .tow-verdict-label { color: #8fd494; } [data-theme="dark"] .tow-verdict.tow-tight { background: #271f10; border-color: #574521; border-left-color: #d2a32e; } [data-theme="dark"] .tow-verdict.tow-tight .tow-verdict-label { color: #e6bd5e; } [data-theme="dark"] .tow-verdict.tow-over { background: #2a1813; border-color: #5a3127; border-left-color: #d0593e; } [data-theme="dark"] .tow-verdict.tow-over .tow-verdict-label { color: #ef9a82; } /* Tow insights panel + smart pick cards */ [data-theme="dark"] .tow-summary { background: #221c16; border-color: #3A3228; border-left-color: var(--copper); } [data-theme="dark"] .tow-pick { background: var(--surface); border-color: var(--line); } [data-theme="dark"] .tow-pick:hover { border-color: var(--copper); box-shadow: 0 2px 8px rgba(217,139,94,.18); } [data-theme="dark"] .cg-fit-fits { background: #16241a; color: #8fd494; } [data-theme="dark"] .cg-fit-tight { background: #271f10; color: #e6bd5e; } [data-theme="dark"] .cg-fit-no { background: #2a1813; color: #ef9a82; } [data-theme="dark"] .cg-fit-unknown { background: #221d16; color: var(--muted); } [data-theme="dark"] .cg-fit-limit { background: #221d16; color: var(--muted); } [data-theme="dark"] .cg-fit-why-fits { background: #16241a; border-left-color: #4fae54; color: #a7dcab; } [data-theme="dark"] .cg-fit-why-tight { background: #271f10; border-left-color: #d2a32e; color: #e6c578; } [data-theme="dark"] .cg-fit-why-no { background: #2a1813; border-left-color: #d0593e; color: #f0a892; } [data-theme="dark"] .cg-fit-why-unknown { background: #221d16; border-left-color: #6e6658; color: var(--muted); } [data-theme="dark"] .cg-pill-hook-full { background: #16241a; border-color: #2f5236; color: #a7dcab; } [data-theme="dark"] .cg-pill-hook-electric { background: #271f10; border-color: #574521; color: #e6c578; } [data-theme="dark"] .cg-pill-pt { background: #1f1a2a; border-color: #3d3454; color: #c3b4e6; } [data-theme="dark"] .cg-pill-el-elevated { background: #18202a; border-color: #324252; color: #aec4dc; } [data-theme="dark"] .cg-pill-el-high { background: #161f2c; border-color: #2c4262; color: #9cc0e8; } [data-theme="dark"] .cg-av-hook.has-elec { background: #18202a; color: #9cc0e8; } [data-theme="dark"] .cg-src-live { background: #16241a; color: #8fd494; } /* Image placeholders / segmented troughs that used a tan fill. */ [data-theme="dark"] .cphoto-link, [data-theme="dark"] .cg-card-img { background: #211c16; } [data-theme="dark"] .cg-av-segs { background: #1c1813; } [data-theme="dark"] .cg-av-card { background: var(--card); border-color: var(--line); } [data-theme="dark"] .cg-av-error { background: #2a1813; border-color: #5a3127; color: #f0a892; } /* --------------------------------------------------------------------------- THEME TOGGLE BUTTON (in the top nav) --------------------------------------------------------------------------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; margin-left: 4px; background: transparent; border: 1px solid transparent; border-radius: 999px; color: var(--ink); cursor: pointer; flex: 0 0 auto; transition: background .15s ease, border-color .15s ease, color .15s ease; } .theme-toggle:hover { background: var(--copper-soft, rgba(176,92,50,.10)); border-color: var(--line); color: var(--copper-deep); } .theme-toggle:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; } .theme-toggle svg { display: block; } /* Show the icon for the theme you'd switch TO: moon in light, sun in dark. */ .theme-icon-sun { display: none; } .theme-icon-moon { display: block; } [data-theme="dark"] .theme-icon-sun { display: block; } [data-theme="dark"] .theme-icon-moon { display: none; } /* --------------------------------------------------------------------------- 2. GALLERY — make each cell an interactive button + zoom affordance --------------------------------------------------------------------------- */ button.gallery-img-wrap { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; position: relative; font: inherit; color: inherit; text-align: left; -webkit-appearance: none; appearance: none; } button.gallery-img-wrap:focus-visible { outline: 3px solid var(--copper); outline-offset: 3px; } .gallery-zoom { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: rgba(20,16,12,.62); color: #fff; backdrop-filter: blur(3px); opacity: 0; transform: translateY(4px) scale(.92); transition: opacity .18s ease, transform .18s ease; pointer-events: none; } .gallery-img-wrap:hover .gallery-zoom, .gallery-img-wrap:focus-visible .gallery-zoom { opacity: 1; transform: translateY(0) scale(1); } /* --------------------------------------------------------------------------- LIGHTBOX OVERLAY --------------------------------------------------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; } .lightbox[hidden] { display: none; } .lightbox-backdrop { position: absolute; inset: 0; z-index: 0; background: rgba(10,8,6,.92); cursor: zoom-out; opacity: 0; transition: opacity .22s ease; } .lightbox.is-open .lightbox-backdrop { opacity: 1; } .lightbox-stage { position: relative; z-index: 1; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: min(92vw, 1400px); max-height: 88vh; transform: scale(.97); opacity: 0; transition: transform .24s cubic-bezier(.2,.7,.2,1), opacity .24s ease; } .lightbox.is-open .lightbox-stage { transform: scale(1); opacity: 1; } .lightbox-img { max-width: 92vw; max-height: 78vh; width: auto; height: auto; object-fit: contain; border-radius: 4px; box-shadow: 0 24px 80px rgba(0,0,0,.6); background: #1a1a1a; } .lightbox-caption { color: rgba(255,255,255,.86); font-size: 13.5px; letter-spacing: .03em; text-align: center; max-width: 80ch; } .lightbox-close { position: absolute; top: 16px; right: 18px; z-index: 3; width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.10); color: #fff; border: 0; border-radius: 999px; cursor: pointer; transition: background .15s ease, transform .12s ease; } .lightbox-close:hover { background: rgba(255,255,255,.20); transform: scale(1.06); } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 52px; height: 52px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.10); color: #fff; border: 0; border-radius: 999px; cursor: pointer; transition: background .15s ease, transform .12s ease; } .lightbox-nav:hover { background: rgba(255,255,255,.20); } .lightbox-prev { left: clamp(8px, 3vw, 28px); } .lightbox-next { right: clamp(8px, 3vw, 28px); } .lightbox-prev:hover { transform: translateY(-50%) translateX(-2px); } .lightbox-next:hover { transform: translateY(-50%) translateX(2px); } .lightbox-close:focus-visible, .lightbox-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Single-photo galleries: hide the arrows. */ .lightbox.is-single .lightbox-nav { display: none; } @media (max-width: 560px) { .lightbox-nav { width: 44px; height: 44px; background: rgba(255,255,255,.14); } .lightbox-img { max-height: 72vh; } } @media (prefers-reduced-motion: reduce) { .lightbox-backdrop, .lightbox-stage { transition: none; } } /* --------------------------------------------------------------------------- 3. VIEW TRANSITIONS — activate the cross-document morph. The per-card hero img carries view-transition-name:vt-hero-, matched on the family/detail page hero, so the photo morphs across navigation. The hook is the OLD spec; current Chrome needs this @view-transition at-rule to opt in. --------------------------------------------------------------------------- */ @view-transition { navigation: auto; } /* --- Dark mode: back-to-top, section nav, related cards --- */ [data-theme="dark"] .back-to-top { box-shadow: 0 2px 12px rgba(0,0,0,.4); } [data-theme="dark"] .secnav { background: color-mix(in srgb, var(--bg) 88%, transparent); } [data-theme="dark"] .rel-card { box-shadow: 0 1px 4px rgba(0,0,0,.2); } [data-theme="dark"] .rel-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.35); } /* Glossary tooltip — dark mode */ [data-theme="dark"] .spec-tip-text { color: var(--ink); background: var(--bg); box-shadow: 0 4px 16px rgba(0,0,0,.35); } [data-theme="dark"] .spec-tip-text::after { border-top-color: var(--bg); } [data-theme="dark"] .spec-tip { border-bottom-color: var(--line); } /* Standout badges — dark mode */ [data-theme="dark"] .standout-badge { background: rgba(232,184,154,.1); border-color: rgba(232,184,154,.22); color: #E8B89A; } /* Explore stats — dark mode */ [data-theme="dark"] .x-stats { color: var(--muted); } /* Hero zoom + keyboard help in dark mode */ [data-theme="dark"] .hero-zoom { background: rgba(255,255,255,.2); } [data-theme="dark"] .kb-help-backdrop { background: rgba(0,0,0,.6); } [data-theme="dark"] .kb-help-panel { box-shadow: 0 16px 48px rgba(0,0,0,.45); } [data-theme="dark"] .kb-row kbd { box-shadow: 0 1px 1px rgba(0,0,0,.2); } [data-theme="dark"] .xc-price select { background: var(--bg); color: var(--ink); border-color: var(--line); } /* Key stats dashboard — dark mode */ [data-theme="dark"] .key-stats { background: var(--line); border-color: var(--line); } [data-theme="dark"] .key-stat { background: var(--card); } /* Weight capacity bar — dark mode */ [data-theme="dark"] .weight-bar { background: var(--card); border-color: var(--line); } [data-theme="dark"] .weight-bar-dry { background: var(--muted); } [data-theme="dark"] .weight-bar-ccc { background: var(--copper, #D49A6A); } /* Photo badge — dark mode */ [data-theme="dark"] .xcard-photos { background: rgba(0,0,0,.55); } /* Card hover shadows — dark mode */ [data-theme="dark"] .xcard-link:hover { box-shadow: 0 12px 32px rgba(0,0,0,.25); } [data-theme="dark"] .card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.25); } [data-theme="dark"] .fam-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,.25); } /* Family comparison table — dark mode */ [data-theme="dark"] .fc-scroll { border-color: var(--line); } [data-theme="dark"] .fc-table thead th { background: var(--surface); } [data-theme="dark"] .fc-table tbody tr:hover { background: rgba(212,154,106,.08); } /* Unit toggle — dark mode */ [data-theme="dark"] .unit-toggle { color: var(--ink); border-color: var(--line); } [data-theme="dark"] .unit-toggle:hover { border-color: var(--copper); color: var(--copper); } /* Percentile indicators dark mode */ [data-theme="dark"] .spec-pct--top20 .spec-pct-bar { background: #93b882; } [data-theme="dark"] .spec-pct--top20 .spec-pct-text { color: #93b882; } /* Quick-view dark mode */ [data-theme="dark"] .xcard-peek { background: rgba(40,36,32,0.85); color: var(--ink); } [data-theme="dark"] .qv-close { background: rgba(40,36,32,0.85); color: var(--ink); } [data-theme="dark"] .qv-close:hover { background: rgba(50,46,42,0.95); } [data-theme="dark"] .qv-nav { background: rgba(40,36,32,0.9); color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,0.3); } [data-theme="dark"] .qv-nav:hover { background: rgba(50,46,42,0.95); box-shadow: 0 4px 16px rgba(0,0,0,0.4); } [data-theme="dark"] .qv-save-btn { border-color: var(--line); color: var(--ink); } [data-theme="dark"] .qv-save-btn:hover { border-color: var(--copper); color: var(--copper); } [data-theme="dark"] .qv-save-btn.is-saved { border-color: var(--copper); color: var(--copper); background: color-mix(in srgb, var(--copper) 12%, transparent); } [data-theme="dark"] .qv-compare-label { color: var(--muted); } [data-theme="dark"] .qv-compare-label:hover { color: var(--ink); } [data-theme="dark"] .qv-gallery-strip::-webkit-scrollbar-thumb { background: var(--line); } [data-theme="dark"] .qv-gallery-thumb { opacity: 0.6; } [data-theme="dark"] .qv-gallery-thumb:hover { opacity: 0.9; } [data-theme="dark"] .qv-gallery-thumb.is-active { opacity: 1; } [data-theme="dark"] .cn-fee-preset { border-color: var(--line); color: var(--muted); } [data-theme="dark"] .cn-fee-preset:hover { border-color: var(--copper); color: var(--ink); } [data-theme="dark"] .cn-fee-preset.is-active { background: var(--copper); border-color: var(--copper); color: #fff; } /* Quiz dark overrides */ [data-theme="dark"] .quiz-panel{background:var(--bg);box-shadow:0 24px 80px rgba(0,0,0,.5)} [data-theme="dark"] .quiz-opt{background:var(--surface);border-color:var(--line)} [data-theme="dark"] .quiz-opt:hover{background:color-mix(in srgb,var(--copper) 10%,var(--surface))} [data-theme="dark"] .quiz-opt.is-selected{background:color-mix(in srgb,var(--copper) 18%,var(--surface))} [data-theme="dark"] .quiz-match{border-color:var(--line)} [data-theme="dark"] .quiz-match:hover{border-color:var(--copper);box-shadow:0 4px 20px rgba(0,0,0,.2)} [data-theme="dark"] .quiz-reason{background:color-mix(in srgb,var(--copper) 18%,var(--surface))} [data-theme="dark"] .quiz-restart{background:var(--surface);color:var(--ink);border-color:var(--line)} [data-theme="dark"] .quiz-match-img{background:var(--surface)} /* --- Footer, breadcrumb, floorplan zoom dark overrides --- */ [data-theme="dark"] .footer-links a { color: var(--ink); } [data-theme="dark"] .footer-legal { border-top-color: var(--line); } [data-theme="dark"] .footer-legal a { color: var(--muted); } [data-theme="dark"] .breadcrumb-list li + li::before { color: var(--line); } [data-theme="dark"] .floorplan-zoom-btn:focus-visible { outline-color: var(--copper); } /* --- Radar chart dark overrides --- */ [data-theme="dark"] .radar-ring { stroke: var(--line); } [data-theme="dark"] .radar-spoke { stroke: var(--line); } [data-theme="dark"] .radar-fill { fill-opacity: 0.18; } [data-theme="dark"] .radar-label { fill: var(--muted); } /* --- Cross-family dark overrides --- */ [data-theme="dark"] .xfam-card { background: var(--card); border-color: var(--line); } [data-theme="dark"] .xfam-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.25); } [data-theme="dark"] .xfam-traits { background: color-mix(in srgb, var(--copper) 15%, var(--surface)); } [data-theme="dark"] .cross-family { border-top-color: var(--line); } /* Dark mode: compatible vehicles table */ [data-theme="dark"] .compat-ok .compat-badge { background: rgba(46, 125, 50, 0.2); color: #81c784; } [data-theme="dark"] .compat-tight .compat-badge { background: rgba(230, 81, 0, 0.2); color: #ffb74d; } [data-theme="dark"] .compat-over .compat-badge { background: rgba(198, 40, 40, 0.2); color: #ef9a9a; } /* Dark mode: tow vehicle picker + length/weight selects */ [data-theme="dark"] #tow-vehicle-pick, [data-theme="dark"] .xc-length select, [data-theme="dark"] .xc-weight select { border-color: var(--line); } /* Dark mode: layout toggle + list view */ [data-theme="dark"] .xc-layout-btn { border-color: var(--line); color: var(--muted); } [data-theme="dark"] .xc-layout-btn.is-active { background: var(--copper); color: #fff; border-color: var(--copper); } [data-theme="dark"] .xgrid.is-list .xcard { border-bottom-color: var(--line); } [data-theme="dark"] .xgrid.is-list .xcard:hover { background: color-mix(in srgb, var(--copper) 6%, var(--surface)); } /* Dark mode: detail pager */ [data-theme="dark"] .detail-pager-name { color: var(--ink); } [data-theme="dark"] .detail-pager-link:hover .detail-pager-name { color: var(--copper); } /* Dark mode: recently viewed */ [data-theme="dark"] .recent-card { background: var(--card); border-color: var(--line); } [data-theme="dark"] .recent-card:hover { border-color: var(--copper); } [data-theme="dark"] .recent-clear { border-color: var(--line); color: var(--muted); } [data-theme="dark"] .home-recent-card { background: var(--card); border-color: var(--line); } [data-theme="dark"] .home-recent-card:hover { border-color: var(--copper); } [data-theme="dark"] .home-recent-clear { border-color: var(--line); color: var(--muted); } /* Dark mode: range bars */ [data-theme="dark"] .range-bar-track { background: rgba(255,255,255,.08); } [data-theme="dark"] .range-bar-fill { background: linear-gradient(90deg, var(--copper), #E8B89A); } /* Dark mode: shimmer skeleton */ [data-theme="dark"] img[loading="lazy"]:not(.is-loaded) { background: linear-gradient(90deg, var(--surface) 25%, rgba(255,255,255,.06) 37%, var(--surface) 63%); background-size: 200% 100%; } [data-theme="dark"] .gallery-img--cutout:not(.is-loaded) { background: linear-gradient(90deg, var(--surface) 25%, rgba(255,255,255,.06) 37%, var(--surface) 63%); background-size: 200% 100%; } /* Dark mode: layout feature chips + filter pills + scroll-to-top */ [data-theme="dark"] .layoutfilter { background: var(--card); border-color: var(--line); color: var(--muted); } [data-theme="dark"] .layoutfilter:hover { border-color: var(--copper); color: var(--copper); } [data-theme="dark"] .layoutfilter[aria-pressed="true"] { background: var(--copper-deep); border-color: var(--copper-deep); color: #fff; } [data-theme="dark"] .filter-pill { background: rgba(200,150,100,.15); color: var(--copper); border-color: rgba(200,150,100,.25); } [data-theme="dark"] .filter-pill-x { color: var(--copper); } [data-theme="dark"] .filter-pill-x:hover { background: rgba(200,150,100,.2); } [data-theme="dark"] .scroll-top { background: var(--card); color: var(--ink); border-color: var(--line); box-shadow: 0 2px 12px rgba(0,0,0,.4); } [data-theme="dark"] .scroll-top:hover { background: var(--copper); color: #fff; border-color: var(--copper); } [data-theme="dark"] .finance-range-val { color: var(--ink); } [data-theme="dark"] .nextstep-card { background: var(--card); border-color: var(--line); } [data-theme="dark"] .nextstep-card:hover { border-color: var(--copper); box-shadow: 0 2px 12px rgba(0,0,0,.3); } /* Year diff dark mode */ [data-theme="dark"] .year-diff-table-wrap { background: var(--card); border-color: var(--line); } [data-theme="dark"] .year-diff-table th { color: var(--muted); border-color: var(--line); } [data-theme="dark"] .year-diff-table td { color: var(--ink); border-color: var(--line); } [data-theme="dark"] .diff-from { color: var(--muted); } [data-theme="dark"] .diff-good .diff-delta { color: #66BB6A; } [data-theme="dark"] .diff-warn .diff-delta { color: #FF8A65; } [data-theme="dark"] .diff-good .diff-arrow { color: #66BB6A; } [data-theme="dark"] .diff-warn .diff-arrow { color: #FF8A65; } /* Ownership tool dark mode */ [data-theme="dark"] .own-bar--insurance { background: #7986CB; } [data-theme="dark"] .own-bar--storage { background: #4DB6AC; } [data-theme="dark"] .own-bar--maintenance { background: #FFB74D; } [data-theme="dark"] .own-bar--depreciation { background: #90A4AE; } /* Collapsible chevron dark mode */ [data-theme="dark"] .detail section[data-collapsible] > h2::after, [data-theme="dark"] .detail section[data-collapsible] > .est-head > h2::after { border-color: var(--muted); } /* Compare verdict dark mode */ [data-theme="dark"] .cmp-verdict th, [data-theme="dark"] .cmp-verdict td { border-top-color: var(--line); } [data-theme="dark"] .cmp-verdict-lead { color: #D4A26A; } [data-theme="dark"] .cmp-diff { color: var(--muted); } /* Trip ready checklist dark mode */ [data-theme="dark"] .trip-ready { border-color: var(--line); } [data-theme="dark"] .trip-ready .collapsible-trigger { background: var(--card); } [data-theme="dark"] .trip-label:hover { background: rgba(212,162,106,0.08); } [data-theme="dark"] .trip-progress { background: var(--line); } [data-theme="dark"] .trip-progress-fill { background: #D4A26A; } [data-theme="dark"] .trip-reset { border-color: var(--line); color: var(--muted); } /* Recs cards dark mode */ [data-theme="dark"] .recs-card { background: var(--card); border-color: var(--line); } [data-theme="dark"] .recs-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.3); } /* --- Lightbox counter + dot navigation --- */ .lightbox-counter { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.85); font-size: 14px; font-weight: 500; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; pointer-events: none; z-index: 2; text-shadow: 0 1px 4px rgba(0,0,0,.5); } .lightbox-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; } .lightbox-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255,255,255,.35); padding: 0; cursor: pointer; transition: background .2s, transform .2s; } .lightbox-dot.is-active { background: #fff; transform: scale(1.25); } .lightbox-dot:hover { background: rgba(255,255,255,.7); } .lightbox-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } @media (max-width: 560px) { .lightbox-dots { gap: 6px; bottom: 14px; } .lightbox-dot { width: 7px; height: 7px; } .lightbox-counter { font-size: 13px; top: 12px; } } .lightbox.is-single .lightbox-counter { display: none; } .lightbox.is-single .lightbox-dots { display: none; } /* Tow class badges — dark mode */ [data-theme="dark"] .tow-badge--half-ton { background: #16241a; color: #8fd494; } [data-theme="dark"] .tow-badge--three-quarter { background: #271f10; color: #e6bd5e; } [data-theme="dark"] .tow-badge--one-ton { background: #2a1813; color: #ef9a82; } /* Lifestyle tag pills — dark mode */ [data-theme="dark"] .xcard-tag { color: var(--muted); background: color-mix(in srgb, var(--line) 40%, transparent); } [data-theme="dark"] .xcard-tag--solo { color: #a0adff; background: rgba(91,106,191,.18); } [data-theme="dark"] .xcard-tag--family { color: #e0a882; background: rgba(176,92,50,.18); } [data-theme="dark"] .xcard-tag--couples { color: #d4a0d4; background: rgba(139,90,139,.18); } [data-theme="dark"] .xcard-tag--off-grid { color: #82c88c; background: rgba(58,125,68,.18); } [data-theme="dark"] .xcard-tag--luxury { color: #d4c482; background: rgba(139,118,50,.20); } [data-theme="dark"] .xcard-tag--full-time { color: #82b8c8; background: rgba(74,124,139,.18); } [data-theme="dark"] .xcard-tag--national_parks { color: #b8c882; background: rgba(107,124,58,.18); } /* Seasonal guide — dark mode */ [data-theme="dark"] .season-card { background: var(--surface); border-color: var(--line); } [data-theme="dark"] .season-dot { background: var(--line); } [data-theme="dark"] .season-dot--filled { background: var(--copper); } /* Size scale — dark mode */ [data-theme="dark"] .size-ref-track { background: color-mix(in srgb, var(--line) 30%, transparent); } [data-theme="dark"] .size-ref-bar { background: color-mix(in srgb, var(--ink) 25%, transparent); } [data-theme="dark"] .size-ref--fits .size-ref-bar { background: rgba(74,140,92,0.3); } [data-theme="dark"] .size-ref-verdict { color: #6fc687; } [data-theme="dark"] .size-ref-verdict--no { color: var(--muted); } [data-theme="dark"] .wctx-bar--ref { background: color-mix(in srgb, var(--ink) 20%, transparent); } /* Cost per night — dark mode */ [data-theme="dark"] .cn-side--airstream { border-color: var(--copper); } [data-theme="dark"] .cn-side--hotel { border-color: var(--line); } [data-theme="dark"] .cn-verdict--saves { background: rgba(74,140,92,0.12); color: #6fc687; } [data-theme="dark"] .cn-verdict--over { background: color-mix(in srgb, var(--ink) 8%, transparent); } /* Tow compatibility banner — dark mode */ [data-theme="dark"] .tow-banner--ok { background: rgba(74,140,92,0.12); color: #6fc687; border-color: rgba(74,140,92,0.25); } [data-theme="dark"] .tow-banner--over { background: rgba(180,60,60,0.1); color: #e07070; border-color: rgba(180,60,60,0.2); } /* At-a-glance & notes — dark mode */ [data-theme="dark"] .glance-summary { background: color-mix(in srgb, var(--copper) 10%, var(--surface)); border-left-color: var(--copper); } [data-theme="dark"] .personal-notes { background: var(--surface); border-color: var(--line); } [data-theme="dark"] .notes-input { background: var(--bg); border-color: var(--line); color: var(--ink); } [data-theme="dark"] .notes-status--saved { color: #5abf7b; } /* CSV export button — dark mode */ [data-theme="dark"] .csv-export-btn { border-color: var(--line); color: var(--muted); } [data-theme="dark"] .csv-export-btn:hover { border-color: var(--copper); color: var(--ink); } /* Resale value projector — dark mode */ [data-theme="dark"] .resale-condition select { background: var(--surface); color: var(--ink); border-color: var(--line); } [data-theme="dark"] .resale-chart { border-bottom-color: var(--line); } [data-theme="dark"] .resale-hl { background: var(--surface); } /* Trip cost estimator — dark mode */ [data-theme="dark"] .trip-cost-tool .finance-select { background: var(--surface); color: var(--ink); border-color: var(--line); } /* Smart presets / nearest matches / browse links — dark theme */ [data-theme="dark"] .smart-preset { background: var(--surface); border-color: var(--line); color: var(--ink); } [data-theme="dark"] .smart-preset:hover { border-color: var(--copper); box-shadow: 0 2px 8px rgba(212,160,100,.15); } [data-theme="dark"] .smart-preset.is-active { background: color-mix(in srgb, var(--copper) 12%, var(--surface)); border-color: var(--copper); } [data-theme="dark"] .x-nearest-card { background: var(--surface); border-color: var(--line); color: var(--ink); } [data-theme="dark"] .x-nearest-card:hover { border-color: var(--copper); } [data-theme="dark"] .browse-link { color: var(--copper); border-color: color-mix(in srgb, var(--copper) 30%, transparent); } [data-theme="dark"] .browse-link:hover { background: color-mix(in srgb, var(--copper) 10%, transparent); } /* Winterization guide — dark mode */ [data-theme="dark"] .wz-label:hover { background: color-mix(in srgb, var(--copper) 10%, transparent); } [data-theme="dark"] .wz-check { border-color: var(--line); } [data-theme="dark"] .wz-check:checked { background: #4a8a5a; border-color: #4a8a5a; } [data-theme="dark"] .wz-progress { background: var(--surface); } [data-theme="dark"] .wz-progress-fill { background: linear-gradient(90deg, #5a9a6a, #4a8a5a); } [data-theme="dark"] .wz-reset { border-color: var(--line); color: var(--muted); } [data-theme="dark"] .wz-reset:hover { border-color: var(--copper); color: var(--copper); } [data-theme="dark"] .wz-cat--water .wz-group-title { color: #6ab0c4; } [data-theme="dark"] .wz-cat--electrical .wz-group-title { color: #d4a05b; } [data-theme="dark"] .wz-cat--gas .wz-group-title { color: #d07c5a; } [data-theme="dark"] .wz-cat--exterior .wz-group-title { color: #8aab94; } [data-theme="dark"] .wz-cat--interior .wz-group-title { color: #a09080; } /* Tow difficulty — dark mode dot overrides */ [data-theme="dark"] .tow-diff-dot { background: var(--surface); } [data-theme="dark"] .tow-diff--1 .tow-diff-dot.is-filled { background: #5ac05a; } [data-theme="dark"] .tow-diff--2 .tow-diff-dot.is-filled { background: #7aab84; } [data-theme="dark"] .tow-diff--3 .tow-diff-dot.is-filled { background: #d4a05b; } [data-theme="dark"] .tow-diff--4 .tow-diff-dot.is-filled { background: #e09060; } [data-theme="dark"] .tow-diff--5 .tow-diff-dot.is-filled { background: #d07c5a; } /* Compare button dark mode */ [data-theme="dark"] .share-btn.is-compared { background: color-mix(in srgb, var(--copper) 15%, transparent); } /* DARK MODE — spec deltas, water calc, maintenance ref */ [data-theme="dark"] .delta-better { --delta-better-bg:rgba(102,187,106,.15); --delta-better:#81c784; } [data-theme="dark"] .delta-more { --delta-more-bg:rgba(239,83,80,.12); --delta-more:#ef9a9a; } [data-theme="dark"] .delta-shorter { --delta-shorter-bg:rgba(102,187,106,.12); --delta-shorter:#81c784; } [data-theme="dark"] .delta-longer { --delta-longer-bg:rgba(255,255,255,.06); --delta-longer:#aaa; } [data-theme="dark"] .wc-usage-btn { border-color:var(--line); background:var(--surface); color:var(--ink); } [data-theme="dark"] .maint-badge--safety { background:rgba(239,83,80,.15); color:#ef9a9a; } [data-theme="dark"] .maint-badge--routine { background:rgba(102,187,106,.15); color:#81c784; } [data-theme="dark"] .maint-badge--seasonal { background:rgba(100,181,246,.15); color:#64b5f6; } /* Propane estimator dark theme */ [data-theme="dark"] .prop-stat-val { color: #d4a04a; } [data-theme="dark"] .prop-detail { color: var(--muted); } /* Electrical planner dark theme */ [data-theme="dark"] .elec-row { border-bottom-color: var(--line); } [data-theme="dark"] .elec-check { accent-color: #d4a04a; } [data-theme="dark"] .elec-bar { background: var(--line); } [data-theme="dark"] .elec-bar-fill { background: #d4a04a; } [data-theme="dark"] .elec-budget-bar { background: var(--line); } [data-theme="dark"] .elec-ok .elec-verdict { color: #6dba7d; } [data-theme="dark"] .elec-tight .elec-verdict { color: #d4a04a; } [data-theme="dark"] .elec-over .elec-verdict { color: #e74c3c; } /* View toggle dark theme */ [data-theme="dark"] .view-toggle { background: var(--line); } [data-theme="dark"] .view-btn.is-active { background: var(--surface); color: var(--ink); } [data-theme="dark"] .xgrid--list .xcard { border-bottom-color: var(--line); } /* Grade climbing dark theme */ [data-theme="dark"] .grade-pass-btn { background: var(--surface); border-color: var(--line); color: var(--ink); } [data-theme="dark"] .grade-pass-btn.is-active { border-color: #d4a04a; background: rgba(212,160,74,.12); } [data-theme="dark"] .grade-badge--grade-ok { background: rgba(46,125,50,.2); color: #6dba7d; } [data-theme="dark"] .grade-badge--grade-warn { background: rgba(230,81,0,.2); color: #d4a04a; } [data-theme="dark"] .grade-badge--grade-severe { background: rgba(198,40,40,.2); color: #e74c3c; } [data-theme="dark"] .grade-tip { background: rgba(212,160,74,.08); border-left-color: #d4a04a; } /* Hitch guide dark theme */ [data-theme="dark"] .hitch-item { background: var(--surface); border-color: var(--line); } [data-theme="dark"] .hitch-item--recommended { border-color: #d4a04a; } /* Compare floor plan dark theme */ [data-theme="dark"] .cmp-floorplan-img { border-color: var(--line); background: var(--surface); } /* Clearance fit dark theme */ [data-theme="dark"] .clearance-row--fits { border-color: rgba(46,125,50,.35); background: rgba(46,125,50,.12); } [data-theme="dark"] .clearance-row--blocked { border-color: rgba(198,40,40,.35); background: rgba(198,40,40,.12); } [data-theme="dark"] .clearance-verdict--yes { color: #6dba7d; } [data-theme="dark"] .clearance-verdict--no { color: #e74c3c; } /* Editor's picks dark */ [data-theme="dark"] .pick-card { background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,0.25); } [data-theme="dark"] .pick-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.35); } /* Payload presets dark */ [data-theme="dark"] .payload-preset { background: var(--surface); border-color: var(--line); color: var(--ink); } [data-theme="dark"] .payload-preset:hover { background: rgba(212,160,74,.12); border-color: #d4a04a; } [data-theme="dark"] .payload-preset.is-active { background: #d4a04a; color: #1a1714; border-color: #d4a04a; } /* Amenity chips dark */ [data-theme="dark"] .amenity-chip { background: var(--surface); border-color: var(--line); } /* Lifestyle fit dark */ [data-theme="dark"] .lf-row { background: var(--surface); border-color: var(--line); } [data-theme="dark"] .lf-dot { border-color: #d4a04a; } [data-theme="dark"] .lf-dot--filled { background: #d4a04a; border-color: #d4a04a; } /* Storage guide dark */ [data-theme="dark"] .sg-card { background: var(--surface); border-color: var(--line); } [data-theme="dark"] .sg-card-icon { color: #d4a04a; } /* Ideal-for & advisor dark overrides */ [data-theme="dark"] .ideal-chip, [data-theme="dark"] .advisor-pick { background: var(--surface); border-color: var(--line); } [data-theme="dark"] .ideal-label, [data-theme="dark"] .advisor-fp { color: var(--ink); } [data-theme="dark"] .ideal-desc, [data-theme="dark"] .advisor-why { color: var(--muted); } [data-theme="dark"] .advisor-q { color: var(--copper); } [data-theme="dark"] .spec-fleet-track { background: rgba(255,255,255,.12); } [data-theme="dark"] .spec-fleet-dot { border-color: var(--card, #2a2520); box-shadow: 0 0 0 1px var(--copper); } [data-theme="dark"] .rigfit-row { background: var(--card, #2a2520); border-color: var(--line); } [data-theme="dark"] .rigfit-row--over { background: rgba(198,40,40,.08); } [data-theme="dark"] .rigfit-bar-wrap { background: rgba(255,255,255,.08); } [data-theme="dark"] .rigfit-verdict--yes { color: #66bb6a; } [data-theme="dark"] .rigfit-verdict--no { color: #ef5350; } [data-theme="dark"] .rigfit-row--fits { border-color: rgba(46,125,50,.3); } [data-theme="dark"] .rigfit-row--over { border-color: rgba(198,40,40,.25); } [data-theme="dark"] .rigfit-row--fits .rigfit-bar { background: rgba(46,125,50,.65); } [data-theme="dark"] .rigfit-row--over .rigfit-bar { background: rgba(198,40,40,.65); } /* FAQ dark overrides */ [data-theme="dark"] .faq-item { border-color: var(--line); } [data-theme="dark"] .faq-q { color: var(--ink); } [data-theme="dark"] .faq-a p { color: var(--muted); } /* Budget alternatives dark overrides */ [data-theme="dark"] .budget-card { background: var(--card); border-color: var(--line); } [data-theme="dark"] .budget-card:hover { border-color: var(--copper); box-shadow: 0 4px 20px rgba(0,0,0,.3); } [data-theme="dark"] .budget-diff--less { background: rgba(46,160,67,.18); color: #56d364; } [data-theme="dark"] .budget-diff--more { background: rgba(176,92,50,.18); color: var(--copper); } [data-theme="dark"] .budget-diff--same { background: rgba(255,255,255,.08); color: var(--muted); } /* ── Hookup guide (dark) ──────────────────────────────────────────── */ [data-theme="dark"] .hookup-adapter { background: var(--surface); border-color: var(--line); } [data-theme="dark"] .hookup-gear-item { border-color: var(--line); } /* ── Model year highlights (dark) ─────────────────────────────────── */ [data-theme="dark"] .myh-stat { background: rgba(255,255,255,.06); border-color: var(--line); } [data-theme="dark"] .myh-stat--up { background: rgba(176,92,50,.2); color: var(--copper); } [data-theme="dark"] .myh-stat--down { background: rgba(46,160,67,.18); color: #56d364; } [data-theme="dark"] .myh-card { background: var(--card); border-color: var(--line); } [data-theme="dark"] .myh-card:hover { border-color: var(--copper); box-shadow: 0 2px 12px rgba(0,0,0,.3); } [data-theme="dark"] .myh-delta--up { background: rgba(176,92,50,.2); color: var(--copper); } [data-theme="dark"] .myh-delta--down { background: rgba(46,160,67,.18); color: #56d364; } [data-theme="dark"] .myh-delta--changed { background: rgba(255,255,255,.08); color: var(--muted); } /* ── Glossary (dark) ──────────────────────────────────────────────── */ [data-theme="dark"] .glossary-toc-link { background: var(--surface); border-color: var(--line); } [data-theme="dark"] .glossary-toc-link:hover { border-color: var(--copper); } [data-theme="dark"] .glossary-term { border-color: var(--line); } /* Year-over-year deltas in dark mode */ [data-theme="dark"] .spec-yd--up { background: rgba(239,83,80,.15); color: #ef9a9a; } [data-theme="dark"] .spec-yd--down { background: rgba(76,175,80,.15); color: #a5d6a7; } [data-theme="dark"] .spec-yd--changed { background: rgba(255,255,255,.08); color: var(--muted); } /* Saved badge on explore cards — dark mode */ [data-theme="dark"] .xcard-saved-badge { background: rgba(30,30,30,.88); box-shadow: 0 1px 4px rgba(0,0,0,.3); } /* Related section scroll fade — dark mode */ [data-theme="dark"] .related::after { background: linear-gradient(to right, transparent, var(--bg, #1a1714)); } /* Progress ring — dark mode */ [data-theme="dark"] .back-to-top .progress-ring .ring-bg { stroke: rgba(255,255,255,.12); } /* Fleet chart — dark mode */ [data-theme="dark"] .fleet-chart-wrap { border-color: var(--line); } [data-theme="dark"] .fleet-chart-toggle { background: var(--surface); } [data-theme="dark"] .fc-grid { stroke: var(--line); } [data-theme="dark"] .fc-dot--dimmed { opacity: .08; } /* Card carousel dots — dark mode */ [data-theme="dark"] .xcard-carousel-dot { background: rgba(255,255,255,.35); } [data-theme="dark"] .xcard-carousel-dot.is-active { background: #fff; } /* Priority ranker + family nav dark overrides */ [data-theme="dark"] .ranker-sort-btn { background: var(--copper); color: #1a1a1a; } [data-theme="dark"] .xcard-rank { background: var(--copper); color: #1a1a1a; } [data-theme="dark"] .famnav { background: var(--surface); border-color: var(--line); } [data-theme="dark"] .famnav-link { color: var(--muted); } [data-theme="dark"] .famnav-link.is-current { color: var(--copper); } [data-theme="dark"] .wc-seg { color: #fff; } [data-theme="dark"] .wc-seg.is-active { outline-color: var(--copper); } [data-theme="dark"] .fs-card { background: var(--surface); border-color: var(--line); } [data-theme="dark"] .fs-card-value { color: #f0ebe3; }