/* ========================================================================== Dealer Locator — css/dealer-locator.css Ported from the SynQ concept site. Map-only layout: a full-bleed MapLibre map with a floating title. Dark theme. Two deliberate differences from the concept version: - Scoped to the .dealer-locator-page WRAPPER DIV, not . The storefront layout owns the body class, so the page can't claim it. - The concept sat under a fixed 70px header and sized itself 100dvh with a matching padding-top. The storefront header is position:sticky and 80px tall, so it occupies real layout space — the map just subtracts it. ========================================================================== */ .dealer-locator-page { --accent: #ea3000; --accent-soft: #ff4414; --accent-hover: #c72900; --accent-glow: rgba(234, 48, 0, 0.35); --dl-bg: #000; --dl-panel: #08090c; --dl-panel-2: #0e1014; --dl-line: rgba(255, 255, 255, 0.10); --dl-line-soft: rgba(255, 255, 255, 0.06); --dl-muted: rgba(244, 245, 247, 0.55); --dl-muted-2: rgba(244, 245, 247, 0.38); background: var(--dl-bg); } .dl-main { display: flex; flex-direction: column; height: calc(100vh - 80px); height: calc(100dvh - 80px); box-sizing: border-box; background: var(--dl-bg); } /* Shared eyebrow */ .dl-eyebrow { margin: 0 0 6px; font-family: "JetBrains Mono", monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: var(--accent); } /* ========================================================================== Floating title — hovers over the top-left of the map ========================================================================== */ .dl-map-title { position: absolute; top: clamp(16px, 2.4vw, 28px); left: clamp(16px, 2.4vw, 28px); z-index: 15; pointer-events: none; } .dl-map-title .dl-eyebrow { margin-bottom: 4px; font-size: 9.5px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85); } .dl-hero-title { margin: 0; font-family: "Oswald", sans-serif; font-weight: 700; font-size: clamp(0.78rem, 1.4vw, 1.15rem); line-height: 1.02; text-transform: uppercase; letter-spacing: 0.015em; color: rgba(255, 255, 255, 0.94); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85), 0 0 40px rgba(0, 0, 0, 0.6); } .dl-hero-accent { color: var(--accent); } /* ========================================================================== Map — fills the rest of the viewport ========================================================================== */ .dl-locator { position: relative; flex: 1; min-height: 420px; background: #0a0c10; } #dl-map { position: absolute; inset: 0; } #dl-map canvas { outline: none; } /* MapLibre chrome overrides */ .dealer-locator-page .maplibregl-ctrl-group { background: #101318; border: 1px solid var(--dl-line); border-radius: 10px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5); overflow: hidden; } .dealer-locator-page .maplibregl-ctrl-group button { width: 34px; height: 34px; background: transparent; } .dealer-locator-page .maplibregl-ctrl-group button + button { border-top: 1px solid var(--dl-line-soft); } .dealer-locator-page .maplibregl-ctrl-group button:hover { background: rgba(255, 255, 255, 0.07); } .dealer-locator-page .maplibregl-ctrl button .maplibregl-ctrl-icon { filter: invert(1) opacity(0.85); } .dealer-locator-page .maplibregl-ctrl-attrib { background: rgba(8, 9, 12, 0.72); color: var(--dl-muted-2); font-size: 10px; } .dealer-locator-page .maplibregl-ctrl-attrib a { color: var(--dl-muted); } .dealer-locator-page .maplibregl-ctrl-attrib.maplibregl-compact { border-radius: 999px; } .dealer-locator-page .maplibregl-ctrl-attrib-button { filter: invert(1); opacity: 0.45; } .dealer-locator-page .maplibregl-ctrl-attrib-button:hover { opacity: 0.8; } /* Popup */ .dealer-locator-page .maplibregl-popup { max-width: 300px !important; } .dealer-locator-page .maplibregl-popup-content { padding: 0; background: #101318; border: 1px solid var(--dl-line); border-radius: 13px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65); overflow: hidden; } .dealer-locator-page .maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: #101318; } .dealer-locator-page .maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: #101318; } .dealer-locator-page .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: #101318; } .dealer-locator-page .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: #101318; } .dealer-locator-page .maplibregl-popup-close-button { top: 6px; right: 8px; width: 22px; height: 22px; border-radius: 6px; color: var(--dl-muted); font-size: 16px; line-height: 1; } .dealer-locator-page .maplibregl-popup-close-button:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .dl-pop { padding: 15px 16px 14px; font-family: "Inter", sans-serif; } .dl-pop-type { display: inline-flex; align-items: center; gap: 6px; font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c, var(--dl-muted)); } .dl-pop-type .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--accent)); } .dl-pop-name { margin: 7px 0 0; padding-right: 14px; color: #f4f5f7; font-size: 14.5px; font-weight: 600; line-height: 1.35; } .dl-pop-addr { margin: 6px 0 0; color: var(--dl-muted); font-size: 12px; line-height: 1.5; } .dl-pop-phone { margin: 6px 0 0; font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--dl-muted); } .dl-pop-actions { display: flex; gap: 6px; margin-top: 12px; } .dl-pop-actions a { flex: 1; padding: 7px 4px; border-radius: 7px; border: 1px solid var(--dl-line); color: var(--dl-muted); font-size: 11.5px; font-weight: 600; text-align: center; text-decoration: none; transition: all 0.14s ease; } .dl-pop-actions a:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); } .dl-pop-actions a.pri { background: var(--accent); border-color: var(--accent); color: #fff; } .dl-pop-actions a.pri:hover { background: var(--accent-hover); } /* ========================================================================== Map fallback ========================================================================== */ .dl-map-fallback { position: absolute; inset: 0; z-index: 30; display: grid; place-content: center; gap: 4px; padding: 32px; text-align: center; background: radial-gradient(60% 60% at 50% 38%, rgba(234, 48, 0, 0.07), transparent 70%), #0a0c10; color: var(--dl-muted); font-size: 14px; } .dl-map-fallback[hidden] { display: none; } .dl-map-fallback strong { color: #f4f5f7; } .dl-map-fallback p { margin: 0; }