/* ============================================================ Real Viking — theme layer Two jobs, in this order: 1. Dark mode. The site's three stylesheets (modernist.css for the main pages, site-chrome.css for the shared nav/footer, site.css for the account area) each drive their colours from CSS variables at the top of the file. So dark mode is a remap of those variables, not a second copy of the site. Light stays the default: nothing here applies until . 2. Glass buttons, in both themes. Sharp corners kept — the frosted surface is the change, not the shape. Load this AFTER modernist.css / site-chrome.css / site.css. ============================================================ */ /* ------------------------------------------------------------ 1. GLASS — applies in both themes ------------------------------------------------------------ */ :root { /* Frosted surface, tuned for a light background */ --glass-tint: rgba(255, 255, 255, 0.55); --glass-tint-hover: rgba(255, 255, 255, 0.78); --glass-border: color-mix(in srgb, var(--color-text, #201e1d) 26%, transparent); --glass-highlight: rgba(255, 255, 255, 0.65); --glass-shadow: 0 2px 10px rgba(32, 30, 29, 0.10); --glass-blur: blur(14px) saturate(150%); /* The primary button leans on the deeper end of the gold so white type on it stays readable once the fill is translucent. */ --btn-primary-a: color-mix(in srgb, #8b1518 95%, transparent); --btn-primary-b: color-mix(in srgb, #6d0b0d 92%, transparent); --btn-primary-a-hi: color-mix(in srgb, #a3282c 97%, transparent); --btn-primary-b-hi: color-mix(in srgb, #8b1518 95%, transparent); --btn-primary-ink: #fdf7f7; } .btn { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-radius: 0; /* the sharp corner is the house style */ transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; } .btn-primary { background: linear-gradient(180deg, var(--btn-primary-a), var(--btn-primary-b)); border: 1px solid color-mix(in srgb, var(--color-accent, #a3282c) 55%, transparent); color: var(--btn-primary-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), var(--glass-shadow); } .btn-primary:hover { background: linear-gradient(180deg, var(--btn-primary-a-hi), var(--btn-primary-b-hi)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), var(--glass-shadow); } .btn-primary:active { background: linear-gradient(180deg, var(--btn-primary-b), var(--btn-primary-b)); } .btn-secondary { background: var(--glass-tint); border: 1px solid var(--glass-border); color: var(--color-text, #201e1d); box-shadow: inset 0 1px 0 var(--glass-highlight); } .btn-secondary:hover { background: var(--glass-tint-hover); } .btn-ghost { background: transparent; border: 1px solid transparent; color: var(--color-accent-700, #6d0b0d); } .btn-ghost:hover { background: var(--glass-tint); border-color: var(--glass-border); } /* On the gold CTA band */ .cta-poster .btn-light { background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(255, 255, 255, 0.9); color: #201e1d; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), var(--glass-shadow); } .cta-poster .btn-light:hover { background: rgba(255, 255, 255, 0.96); } .cta-poster .btn-outline-light { background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.62); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28); } .cta-poster .btn-outline-light:hover { background: rgba(255, 255, 255, 0.26); } /* Over photography (hero video panel, car cards) */ .btn-glass { background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.45); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); } .btn-glass:hover { background: rgba(255, 255, 255, 0.28); } /* Nav "Book now" and the footer buttons on the older Tailwind pages */ .nav .btn-primary, .site-footer .btn-primary { background: linear-gradient(180deg, var(--btn-primary-a), var(--btn-primary-b)); color: var(--btn-primary-ink); } /* Buttons on the pages still built with Tailwind (product, checkout). Scoped to a/button so section backgrounds using the same colour class are left alone. */ a.bg-ink, button.bg-ink, a.bg-brass, button.bg-brass { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--glass-shadow); } a.bg-ink, button.bg-ink { background: linear-gradient(180deg, rgba(32, 30, 29, 0.94), rgba(32, 30, 29, 0.86)) !important; border: 1px solid rgba(255, 255, 255, 0.14); } a.bg-brass, button.bg-brass { background: linear-gradient(180deg, var(--btn-primary-a), var(--btn-primary-b)) !important; border: 1px solid color-mix(in srgb, #a3282c 55%, transparent); } /* Where the browser can't frost, lean on opacity instead so nothing turns into unreadable washed-out type. */ @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { :root { --glass-tint: rgba(255, 255, 255, 0.86); --glass-tint-hover: rgba(255, 255, 255, 0.95); } } /* ------------------------------------------------------------ 2. DARK THEME ------------------------------------------------------------ */ html[data-theme="dark"] { /* --- modernist.css tokens --- */ --color-bg: #17161a; --color-surface: #201f24; --color-text: #f1efea; --color-divider: color-mix(in srgb, #f1efea 24%, transparent); /* The gold scale is flipped. Everything on the site reaches for accent-600/700 when it wants "gold text", and those are the dark end of the scale — on a dark background they need to be the light end instead. */ --color-accent: #d4494d; --color-accent-100: #370405; --color-accent-200: #520709; --color-accent-300: #e79093; --color-accent-400: #dd6d70; --color-accent-500: #d4494d; --color-accent-600: #e07f82; --color-accent-700: #ea9b9e; --color-accent-800: #f2bcbe; --color-accent-900: #f9dcdd; --color-accent-2: #d4494d; --color-accent-2-300: #e79093; --color-accent-2-500: #d4494d; --color-accent-2-600: #e07f82; --color-accent-2-700: #ea9b9e; --color-neutral-100: #26252a; --color-neutral-200: #2e2d33; --color-neutral-300: #3a383f; --color-neutral-400: #4c4a52; --color-neutral-500: #6d6a74; --color-neutral-600: #8f8c96; --color-neutral-700: #b3b0b8; --color-neutral-800: #d3d0d6; --color-neutral-900: #f1efea; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 3px 12px rgba(0, 0, 0, 0.55); --shadow-lg: 0 14px 38px rgba(0, 0, 0, 0.6); /* --- site-chrome.css tokens (nav + footer on every page) --- */ --gk-bg: #17161a; --gk-text: #f1efea; --gk-divider: rgba(241, 239, 234, 0.24); --gk-accent: #d4494d; --gk-accent-600: #e07f82; --gk-accent-700: #ea9b9e; --gk-shadow-md: 0 3px 12px rgba(0, 0, 0, 0.55); /* --- site.css tokens (account area) --- */ --white: #17161a; --ink: #f1efea; --ink-2: #cbc7c0; --muted: #98948d; --line: #33313a; --line-2: #2a2830; --cream: #221f1c; --gold: #e07f82; --gold-deep: #d4494d; --gold-light: #f2bcbe; --gold-soft: #241f16; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-lift: 0 12px 34px rgba(0, 0, 0, 0.6); /* --- glass, retuned for a dark background --- */ --glass-tint: rgba(255, 255, 255, 0.07); --glass-tint-hover: rgba(255, 255, 255, 0.14); --glass-border: rgba(255, 255, 255, 0.22); --glass-highlight: rgba(255, 255, 255, 0.16); --glass-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); --btn-primary-a: color-mix(in srgb, #b8353a 92%, transparent); --btn-primary-b: color-mix(in srgb, #9a1e22 88%, transparent); --btn-primary-a-hi: color-mix(in srgb, #c9464b 96%, transparent); --btn-primary-b-hi: color-mix(in srgb, #ac2a2e 94%, transparent); --btn-primary-ink: #fdf7f7; /* light type on the deep brand red */ color-scheme: dark; } html[data-theme="dark"] body { background: var(--color-bg); color: var(--color-text); } /* Full-bleed dark panels go a step deeper than the page so they still separate from it. */ html[data-theme="dark"] .page-hero, html[data-theme="dark"] .fleet-hero { background: #100f12; } html[data-theme="dark"] .hero-media { background: #100f12; } /* The red CTA band is deepened on a dark page so it reads as a band, not a glare. */ html[data-theme="dark"] .cta-poster { background: linear-gradient(180deg, #7d1214, #5c0d0f); } html[data-theme="dark"] .cta-poster h2, html[data-theme="dark"] .cta-poster p { color: #f9eeee; } /* Photo overlays: slightly heavier so white type holds on a dark page. */ html[data-theme="dark"] .cat-card::before { background: linear-gradient(to top, rgba(10, 9, 11, 0.9), rgba(10, 9, 11, 0.25)); } html[data-theme="dark"] .input { background: var(--color-surface); color: var(--color-text); } html[data-theme="dark"] .input::placeholder { color: color-mix(in srgb, var(--color-text) 45%, transparent); } /* Native date pickers render black-on-black otherwise. */ html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.7); } html[data-theme="dark"] .search-preview { background: var(--color-surface); } html[data-theme="dark"] .car-card, html[data-theme="dark"] .card { background: var(--color-surface); } /* The 3D highlight is softer on a dark page — full-strength white over a dark photo blows out rather than glints. */ html[data-theme="dark"] .car-card.is-3d .car-card-media::after { background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 62%); } html[data-theme="dark"] .car-card.is-3d.is-tilting .car-card-media { box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.85); } /* --- the older Tailwind pages (product, checkout, terms, privacy) --- These use a fixed grey palette from the CDN build, which can't read our variables. This maps the handful they actually use. */ html[data-theme="dark"] .bg-white { background-color: var(--color-surface) !important; } html[data-theme="dark"] .bg-gray-50, html[data-theme="dark"] .bg-gray-100 { background-color: #1c1b20 !important; } html[data-theme="dark"] .bg-paper { background-color: var(--color-bg) !important; } html[data-theme="dark"] .text-gray-900, html[data-theme="dark"] .text-gray-800, html[data-theme="dark"] .text-ink { color: var(--color-text) !important; } html[data-theme="dark"] .text-gray-700, html[data-theme="dark"] .text-gray-600 { color: #c2bfb8 !important; } html[data-theme="dark"] .text-gray-500, html[data-theme="dark"] .text-gray-400 { color: #98948d !important; } html[data-theme="dark"] .text-brass { color: var(--color-accent-700) !important; } html[data-theme="dark"] .border-gray-100 { border-color: #2a2830 !important; } html[data-theme="dark"] .border-gray-200, html[data-theme="dark"] .border-gray-300 { border-color: #35333c !important; } html[data-theme="dark"] .border-brass { border-color: var(--color-accent-500) !important; } html[data-theme="dark"] .shadow-md, html[data-theme="dark"] .shadow-lg { box-shadow: var(--shadow-md) !important; } html[data-theme="dark"] a.bg-ink, html[data-theme="dark"] button.bg-ink { background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06)) !important; border-color: var(--glass-border); color: var(--color-text) !important; } /* ------------------------------------------------------------ 3. THE SWITCH ------------------------------------------------------------ */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 38px; height: 38px; padding: 0; flex: none; border: 1px solid var(--glass-border); background: var(--glass-tint); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset 0 1px 0 var(--glass-highlight); color: var(--color-text, #201e1d); cursor: pointer; transition: background-color .2s ease, border-color .2s ease, transform .2s ease; } .theme-toggle:hover { background: var(--glass-tint-hover); transform: translateY(-1px); } .theme-toggle:active { transform: translateY(0) scale(0.96); } .theme-toggle svg { display: block; } .theme-toggle .theme-toggle-label { display: none; } .theme-toggle .icon-moon { display: block; } .theme-toggle .icon-sun { display: none; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } html[data-theme="dark"] .theme-toggle .icon-sun { display: block; } /* In the mobile menu it's a full-width row with a label, like the other items there. */ .nav-mobile-menu .theme-toggle { width: 100%; height: auto; justify-content: flex-start; gap: 10px; padding: 14px 4px; border: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-bottom: 1px solid color-mix(in srgb, var(--color-text, #201e1d) 10%, transparent); font-family: inherit; font-size: 15px; color: var(--color-text, #201e1d); text-align: start; } .nav-mobile-menu .theme-toggle:hover { background: transparent; transform: none; } .nav-mobile-menu .theme-toggle .theme-toggle-label { display: inline; } @media (prefers-reduced-motion: reduce) { .theme-toggle, .btn { transition: none !important; } .theme-toggle:hover, .theme-toggle:active { transform: none !important; } }