/* ============================================================ YUCA AUTO — Dark theme override Applies when ============================================================ */ body.dark { /* Palette flip */ --ink: #FAFAF7; --ink-2: #E5E5E1; --ink-3: #B8B8B0; --muted: #7F7F84; --line: #25252A; --line-2: #1A1A1F; --paper: #08080A; --paper-2: #111114; --white: #14141A; /* elevated card surface */ --orange-soft: #2C1709; /* dark variant of orange tint */ background: #08080A; color: #FAFAF7; } /* ---- Nav ---- */ body.dark .nav { background: #08080A; border-bottom-color: #1F1F24; } body.dark .logo-mark { background: #FAFAF7; color: #08080A; } body.dark .logo-img { height: 56px; } body.dark .logo-foot .logo-img { height: 68px; } body.dark .nav-links a { color: #B8B8B0; } body.dark .nav-links a:hover { color: #FAFAF7; } body.dark .lang-btn { color: #7F7F84; } body.dark .lang-btn.active { color: #FAFAF7; } body.dark .lang-sep { color: #25252A; } /* ---- Buttons ---- */ body.dark .btn-dark { background: #FAFAF7; color: #08080A; } body.dark .btn-dark:hover { background: #E5E5E1; } body.dark .btn-ghost { background: transparent; color: #FAFAF7; border: 1px solid #FAFAF7; } body.dark .btn-ghost:hover { background: #FAFAF7; color: #08080A; } body.dark .btn-ghost.btn-light { color: #08080A; border-color: rgba(0,0,0,0.25); } body.dark .btn-ghost.btn-light:hover { background: #08080A; color: #FAFAF7; } /* ---- Hero ---- */ body.dark .h1-line-thin { color: #6F6F75; } body.dark .hero-grid { border-bottom-color: #1F1F24; } body.dark .hero-lede { color: #B8B8B0; } /* The dark search bar stays dark — but slightly elevated against page bg. Scope --paper back to light inside so children using var(--paper) read correctly. */ body.dark .hero-search, body.dark .calc-output, body.dark .cta-wrap, body.dark .fin-calc { --paper: #FAFAF7; background: #14141A; border: 1px solid #1F1F24; color: #FAFAF7; } body.dark .search-field { background: rgba(255,255,255,0.025); border-color: rgba(255,255,255,0.06); } body.dark .search-field .mono-label { color: rgba(255,255,255,0.45); } /* Select dropdown arrow → light */ body.dark .field select, body.dark .sort select { background-image: url("data:image/svg+xml;utf8,"); } /* ---- Section heads ---- */ body.dark .head-link { color: #FAFAF7; border-bottom-color: #FAFAF7; } body.dark .head-link:hover { color: var(--orange); border-color: var(--orange); } body.dark .section-sub { color: #B8B8B0; } /* ---- Car cards ---- */ body.dark .car-card { background: #14141A; border-color: #1F1F24; } body.dark .car-card:hover { border-color: #3A3A40; box-shadow: 0 24px 48px -28px rgba(0,0,0,0.6); } body.dark .car-badge { background: rgba(20,20,26,0.92); color: #FAFAF7; border: 1px solid rgba(255,255,255,0.1); } /* Dim the placeholder gradients so light tints don't fight the dark theme */ body.dark .car-media[data-tint="a"] { background: linear-gradient(135deg, #2a2a2f, #15151a); } body.dark .car-media[data-tint="b"] { background: linear-gradient(135deg, #4a4640, #2b2924); } body.dark .car-media[data-tint="c"] { background: linear-gradient(135deg, #b8460a, #7a2e05); } body.dark .car-media[data-tint="d"] { background: linear-gradient(135deg, #3a4a3e, #1f2823); } body.dark .car-media[data-tint="e"] { background: linear-gradient(135deg, #3a4854, #1f2630); } body.dark .car-media[data-tint="f"] { background: linear-gradient(135deg, #44495a, #252a35); } body.dark .car-media .media-label { color: rgba(255,255,255,0.35) !important; } body.dark .car-silh { background: rgba(255,255,255,0.05); } /* ---- Services ---- */ body.dark .section-svc { background: #14141A; border: 1px solid #1F1F24; } body.dark .svc-grid { border-top-color: #1F1F24; } body.dark .svc-card { border-right-color: #1F1F24; } body.dark .svc-card:hover { background: #1A1A20; } body.dark .svc-card p { color: #B8B8B0; } body.dark .svc-link { color: #FAFAF7; } body.dark .svc-link:hover { color: var(--orange); } /* ---- Finance teaser & calculator ---- */ body.dark .fin-left p { color: #B8B8B0; } /* ---- Location ---- */ body.dark .loc-block p { color: #FAFAF7; } body.dark .loc-block a { border-bottom-color: #25252A; } body.dark .loc-map { background: #14141A; } /* ---- Footer ---- */ body.dark .footer { background: #08080A; border-top-color: #1F1F24; } body.dark .foot-col a { color: #B8B8B0; } body.dark .foot-col a:hover { color: #FAFAF7; } body.dark .foot-bottom { border-top-color: #1F1F24; } /* ---- Sub-page chips / pills (in case sub pages re-use) ---- */ body.dark .chip { background: #14141A; border-color: #25252A; color: #B8B8B0; } body.dark .chip:hover { border-color: #FAFAF7; color: #FAFAF7; } body.dark .chip.active { background: #FAFAF7; color: #08080A; border-color: #FAFAF7; } body.dark .chip-count { color: #7F7F84; } body.dark .chip.active .chip-count { color: rgba(8,8,10,0.5); } /* ---- Sub-page filters ---- */ body.dark .pg:hover { background: #14141A; color: #FAFAF7; } body.dark .pg.active { background: #FAFAF7; color: #08080A; } /* ---- Form ---- */ body.dark .field input, body.dark .field select, body.dark .ko-form textarea { background: #14141A; border-color: #25252A; color: #FAFAF7; } body.dark .field input:focus, body.dark .field select:focus, body.dark .ko-form textarea:focus { border-color: #FAFAF7; box-shadow: 0 0 0 3px rgba(242, 92, 14, 0.20); } body.dark .field input::placeholder, body.dark .ko-form textarea::placeholder { color: #4F4F55; } body.dark .radio-row label { border-color: #25252A; color: #B8B8B0; } body.dark .radio-row label:has(input:checked) { background: #FAFAF7; color: #08080A; border-color: #FAFAF7; } body.dark .consent input[type="checkbox"] { border-color: #4A4A50; } body.dark .pin-label { background: #FAFAF7; color: #08080A; } /* ---- Map subtle stuff ---- */ body.dark .map-grid { background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); } /* ---- Legal & sub hero ---- */ body.dark .sub-hero { border-bottom-color: #1F1F24; } body.dark .crumb a:hover { color: #FAFAF7; } body.dark .legal-wrap a { border-bottom-color: #25252A; } body.dark .legal-wrap address { background: #14141A; border-color: #1F1F24; }