/* ========================================================================== Dealerweb — Shared stylesheet for all header blocks -------------------------------------------------------------------------- THEMES: set one class on (or any wrapper): .theme-white -> white (light, default) .theme-platinum -> silver / platinum (light) .theme-slate -> mid slate grey (dark text on light? no — light text) .theme-midnight -> deep navy .theme-carbon -> charcoal / carbon .theme-black -> pure black Primary colour is BLUE across every theme. Change the --primary tokens inside a theme to rebrand it. ========================================================================== */ /* ---- LIGHT THEMES (dark text) ------------------------------------------- */ :root, .theme-white { --bg:#ffffff; --bg-elevated:#ffffff; --bg-subtle:#f5f7fa; --text:#0f172a; --text-muted:#475569; --border:#e5e7eb; --primary:#2563eb; --primary-hover:#1d4ed8; --primary-soft:#eff6ff; --primary-contrast:#ffffff; --topbar-bg:#0f172a; --topbar-text:#e2e8f0; } .theme-platinum { --bg:#e7e9ec; --bg-elevated:#ffffff; --bg-subtle:#dcdfe4; --text:#1a1f2b; --text-muted:#4b5563; --border:#cdd2d9; --primary:#2563eb; --primary-hover:#1d4ed8; --primary-soft:#e2ebff; --primary-contrast:#ffffff; --topbar-bg:#1f2937; --topbar-text:#e5e7eb; } /* ---- DARK THEMES (light text) ------------------------------------------- */ .theme-slate { --bg:#334155; --bg-elevated:#3c4a5e; --bg-subtle:#2b3645; --text:#f1f5f9; --text-muted:#b6c0cf; --border:#4a5a70; --primary:#60a5fa; --primary-hover:#3b82f6; --primary-soft:rgba(96,165,250,.16); --primary-contrast:#0b1220; --topbar-bg:#1e293b; --topbar-text:#cbd5e1; } .theme-midnight { --bg:#0f172a; --bg-elevated:#16213a; --bg-subtle:#1e293b; --text:#f8fafc; --text-muted:#94a3b8; --border:#233047; --primary:#3b82f6; --primary-hover:#2563eb; --primary-soft:rgba(59,130,246,.18); --primary-contrast:#ffffff; --topbar-bg:#0a0f1d; --topbar-text:#cbd5e1; } .theme-carbon { --bg:#18181b; --bg-elevated:#232327; --bg-subtle:#27272a; --text:#fafafa; --text-muted:#a1a1aa; --border:#34343a; --primary:#3b82f6; --primary-hover:#2563eb; --primary-soft:rgba(59,130,246,.18); --primary-contrast:#ffffff; --topbar-bg:#0c0c0e; --topbar-text:#d4d4d8; } .theme-black { --bg:#000000; --bg-elevated:#0c0c0c; --bg-subtle:#161616; --text:#ffffff; --text-muted:#a3a3a3; --border:#222222; --primary:#3b82f6; --primary-hover:#2563eb; --primary-soft:rgba(59,130,246,.18); --primary-contrast:#ffffff; --topbar-bg:#000000; --topbar-text:#cccccc; } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ * { box-sizing: border-box; } body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } a { text-decoration: none; color: inherit; } /* Helper tokens */ .dw-header { background: var(--bg-elevated); color: var(--text); } .dw-surface { background: var(--bg-elevated); } .dw-subtle { background: var(--bg-subtle); } .dw-border { border-color: var(--border); } .dw-border-b { border-bottom: 1px solid var(--border); } .dw-text { color: var(--text); } .dw-text-muted { color: var(--text-muted); } .dw-logo-mark { color: var(--primary); } /* Nav links */ .dw-nav-link { position: relative; display: inline-flex; align-items: center; gap: .3rem; color: var(--text); font-weight: 500; transition: color .15s ease; } .dw-nav-link:hover { color: var(--primary); } .dw-nav-link.is-active { color: var(--primary); } .dw-nav-link.underline-hover::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--primary); transition: width .2s ease; } .dw-nav-link.underline-hover:hover::after { width: 100%; } /* -------------------------------------------------------------------------- Dropdown menu (Servicing) -------------------------------------------------------------------------- */ .dw-dropdown { position: relative; display: inline-flex; align-items: center; } .dw-caret { transition: transform .15s ease; } .dw-dropdown:hover .dw-caret, .dw-dropdown.is-open .dw-caret { transform: rotate(180deg); } .dw-dropdown-menu { position: absolute; top: 100%; left: 0; margin-top: .5rem; min-width: 230px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: .625rem; box-shadow: 0 16px 40px rgba(0,0,0,.18); padding: .375rem; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 70; } .dw-dropdown:hover .dw-dropdown-menu, .dw-dropdown.is-open .dw-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .dw-dropdown-menu a { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: .45rem; color: var(--text); font-weight: 500; font-size: .95rem; } .dw-dropdown-menu a:hover { background: var(--primary-soft); color: var(--primary); } .dw-dropdown-menu a svg { color: var(--primary); flex: none; } /* Right-aligned variant (when item sits near the end of the bar) */ .dw-dropdown-menu.align-right { left: auto; right: 0; } /* Mobile disclosure (Servicing inside the burger menu) */ .dw-mobile-sub { display: none; padding-left: .75rem; } [data-mobile-sub-toggle].is-open + .dw-mobile-sub { display: flex; flex-direction: column; } [data-mobile-sub-toggle] .dw-caret.is-open { transform: rotate(180deg); } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .dw-btn { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; border-radius: .5rem; padding: .625rem 1.25rem; cursor: pointer; border: 1px solid transparent; transition: background .15s ease, color .15s ease, border-color .15s ease; white-space: nowrap; } .dw-btn-primary { background: var(--primary); color: var(--primary-contrast); } .dw-btn-primary:hover { background: var(--primary-hover); } .dw-btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); } .dw-btn-outline:hover { background: var(--primary); color: var(--primary-contrast); } .dw-btn-ghost { background: transparent; color: var(--text); border-color: var(--border); } .dw-btn-ghost:hover { border-color: var(--primary); color: var(--primary); } /* WhatsApp */ .dw-btn-whatsapp { background: #25D366; color: #ffffff; } .dw-btn-whatsapp:hover { background: #1ebe5b; } .dw-icon-whatsapp { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: .5rem; background: #25D366; color: #fff; flex: none; } .dw-icon-whatsapp:hover { background: #1ebe5b; } /* Social icon buttons (match the WhatsApp button) */ .dw-social { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: .5rem; color: #fff; flex: none; transition: background .15s ease, opacity .15s ease; } .dw-social:hover { opacity: .9; } .dw-facebook { background: #1877F2; } .dw-instagram { background: #E4405F; } .dw-youtube { background: #FF0000; } .dw-linkedin { background: #0A66C2; } .dw-tiktok { background: #000000; } .dw-twitter { background: #000000; } /* Keep the (near-black) TikTok / X buttons visible on dark themes */ .dw-tiktok, .dw-twitter { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); } /* Greyscale mode (body.dw-mono): drop brand colours on social + WhatsApp buttons. Uses the mono --primary/--primary-contrast already set on . */ body.dw-mono .dw-social, body.dw-mono .dw-icon-whatsapp { background: var(--primary); color: var(--primary-contrast); box-shadow: none; } body.dw-mono .dw-social:hover, body.dw-mono .dw-icon-whatsapp:hover { background: var(--primary-hover); opacity: 1; } /* Top utility / address bar */ .dw-topbar { background: var(--topbar-bg); color: var(--topbar-text); } .dw-topbar a:hover { color: #ffffff; } .dw-topbar-close { background: transparent; border: 0; color: inherit; cursor: pointer; opacity: .65; line-height: 0; padding: 4px; } .dw-topbar-close:hover { opacity: 1; } /* Phone / icon pill */ .dw-pill { display: inline-flex; align-items: center; gap: .5rem; color: var(--primary); font-weight: 600; } /* Hamburger */ .dw-burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: .5rem; border: 1px solid var(--border); color: var(--text); background: transparent; cursor: pointer; } .dw-burger:hover { border-color: var(--primary); color: var(--primary); } /* Burger is mobile-only: hide on desktop (>=1024px). !important guarantees it beats the base .dw-burger display and any Tailwind utility, regardless of stylesheet load order. */ @media (min-width: 1024px) { .dw-burger { display: none !important; } } /* -------------------------------------------------------------------------- Demo-only theme switcher (remove in production) -------------------------------------------------------------------------- */ .dw-theme-switch { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(15, 23, 42, .92); box-shadow: 0 8px 24px rgba(0,0,0,.3); } .dw-theme-switch button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); cursor: pointer; padding: 0; } .dw-theme-switch button[data-theme="theme-white"] { background:#ffffff; } .dw-theme-switch button[data-theme="theme-platinum"] { background:#d1d5db; } .dw-theme-switch button[data-theme="theme-slate"] { background:#475569; } .dw-theme-switch button[data-theme="theme-midnight"] { background:#0f172a; } .dw-theme-switch button[data-theme="theme-carbon"] { background:#18181b; } .dw-theme-switch button[data-theme="theme-black"] { background:#000000; }