/* PétroSûr — minimal but polished. Dark navy header, light map area. */ :root { --bg: #f6f7f9; --fg: #0a2540; --fg-muted: #5e6b7a; --accent: #0a2540; --accent-hover: #14385f; --reg: #2ecc71; --reg-dark: #1f8a4d; --super: #f39c12; --super-dark: #b46f08; --diesel: #8e44ad; --diesel-dark: #5e2b75; --price-low: #2ecc71; --price-mid: #f1c40f; --price-high: #e74c3c; --border: #d8dde5; /* Theme-flipping surfaces. Component rules MUST use these instead of hardcoding light hexes — every dark-mode bug to date came from a hardcoded light background that no [data-theme] override caught. */ --panel: #fff; /* sidebar, modals, dropdowns, map popups */ --control: #fff; /* form controls, chips, toggles */ --surface: #eef2f7; /* raised buttons/badges inside a panel */ --surface-hover: #dde5ef; --surface-dim: #f6f7f9; /* subdued cells: price tiles, table heads */ --danger-bg: #fdecea; --danger-bg-hover: #f9d6d2; --danger-fg: #c0392b; --danger-border: #f5c6cb; --shadow: 0 4px 16px rgba(10, 37, 64, 0.08); --topbar-h: 56px; --sidebar-w: 320px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: var(--fg); background: var(--bg); } /* The map page (index.html) needs overflow: hidden so MapLibre takes the full viewport — but the static content pages (about, guide, contact, privacy, thematic SEO) need to scroll. We scope the rule to the map route via :has() so the same stylesheet works for both layouts. The fallback for browsers without :has() is a body class added inline on the static pages (see on those files). */ body:has(#map) { overflow: hidden; } body.content-page, body:not(:has(#map)) { overflow: auto; height: auto; min-height: 100%; } html:has(body.content-page) { height: auto; } a { color: var(--accent); } a:hover { color: var(--accent-hover); } /* ── Topbar ────────────────────────────────────────────────────────────────── */ .topbar { position: fixed; inset: 0 0 auto 0; height: var(--topbar-h); display: flex; align-items: center; gap: 12px; padding: 0 12px; background: var(--accent); color: #fff; box-shadow: var(--shadow); z-index: 1000; } .topbar-toggle { background: transparent; border: none; color: inherit; font-size: 22px; width: 40px; height: 40px; cursor: pointer; border-radius: 6px; } .topbar-toggle:hover { background: rgba(255, 255, 255, 0.1); } .topbar-brand { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; } .topbar-logo { width: 28px; height: 28px; border-radius: 6px; display: block; flex-shrink: 0; } .topbar-name { font-weight: 700; letter-spacing: 0.3px; } .topbar-search { flex: 1; position: relative; max-width: 560px; } .topbar-search input { width: 100%; height: 36px; padding: 0 12px; border: none; border-radius: 8px; background: rgba(255, 255, 255, 0.92); color: var(--fg); font-size: 14px; } .topbar-search input:focus { outline: 2px solid #fff; outline-offset: 1px; } .topbar-action { background: transparent; border: none; color: inherit; font-size: 18px; width: 40px; height: 40px; cursor: pointer; border-radius: 6px; } .topbar-action:hover { background: rgba(255, 255, 255, 0.1); } .search-results { position: absolute; top: 40px; left: 0; right: 0; background: var(--panel); border-radius: 8px; box-shadow: var(--shadow); max-height: 60vh; overflow-y: auto; z-index: 1100; } .search-result-item { display: block; width: 100%; text-align: left; padding: 10px 12px; border: none; background: transparent; color: var(--fg); font-size: 14px; cursor: pointer; border-bottom: 1px solid var(--border); } .search-result-item:last-child { border-bottom: none; } .search-result-item:hover, .search-result-item:focus { background: var(--surface); } /* ── Sidebar ──────────────────────────────────────────────────────────────── */ .sidebar { position: fixed; top: var(--topbar-h); bottom: 0; left: 0; width: var(--sidebar-w); background: var(--panel); border-right: 1px solid var(--border); overflow-y: auto; padding: 16px; z-index: 800; transition: transform 0.2s ease; } .sidebar.collapsed { transform: translateX(-100%); } .sidebar-section { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); } .sidebar-section:last-child { border-bottom: none; } .sidebar-section h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--fg-muted); margin: 0 0 10px 0; } .sidebar-footer p { font-size: 12px; margin: 4px 0; } .muted { color: var(--fg-muted); font-size: 12px; } /* Fuel toggles (radio styled as colorful pills) */ .fuel-toggles { display: flex; gap: 6px; } .fuel-toggle { flex: 1; text-align: center; padding: 8px 0; border: 2px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; background: var(--control); color: var(--fg-muted); user-select: none; transition: all 0.15s ease; } .fuel-toggle input { display: none; } .fuel-toggle:has(input:checked) { color: #fff; } .fuel-toggle--reg:has(input:checked) { background: var(--reg); border-color: var(--reg-dark); } .fuel-toggle--super:has(input:checked) { background: var(--super); border-color: var(--super-dark); } .fuel-toggle--diesel:has(input:checked) { background: var(--diesel); border-color: var(--diesel-dark); } /* Brand chips */ .chip-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 180px; overflow-y: auto; } .chip { display: inline-block; padding: 4px 10px; border-radius: 16px; border: 1px solid var(--border); background: var(--control); color: var(--fg-muted); font-size: 12px; cursor: pointer; user-select: none; } .chip.active { background: var(--accent); border-color: var(--accent); color: #fff; } #region-filter { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--control); color: var(--fg); font-size: 13px; } .price-range { display: flex; flex-direction: column; gap: 4px; } .price-range input[type='range'] { width: 100%; accent-color: var(--accent); } .price-range output { font-size: 12px; color: var(--fg-muted); text-align: right; } .btn-block { display: block; width: 100%; padding: 8px; background: var(--accent); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; } .btn-block:hover { background: var(--accent-hover); } .btn-block.saving { opacity: 0.6; } .btn-small { background: var(--surface); color: var(--fg); border: none; padding: 6px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; } .btn-small:hover { background: var(--surface-hover); } .btn-small--block { display: block; width: 100%; margin-top: 6px; } .btn-small--danger { background: var(--danger-bg); color: var(--danger-fg); } .btn-small--danger:hover { background: var(--danger-bg-hover); } /* Favorites list */ .favorites-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; } .favorite-row { display: flex; gap: 4px; } .favorite-go { flex: 1; padding: 8px 10px; background: var(--surface); border: none; border-radius: 4px; cursor: pointer; text-align: left; color: var(--fg); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .favorite-go:hover { background: var(--surface-hover); } .favorite-del { width: 32px; background: transparent; border: 1px solid var(--border); border-radius: 4px; cursor: pointer; color: var(--fg-muted); } .favorite-del:hover { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger-border); } /* ── Map ──────────────────────────────────────────────────────────────────── */ .map { position: fixed; top: var(--topbar-h); left: var(--sidebar-w); right: 0; bottom: 0; } .sidebar.collapsed ~ .map { left: 0; } .map { transition: left 0.2s ease; } /* MapLibre tweaks — style.css loads after maplibre-gl.css, so the same-specificity background here beats MapLibre's hardcoded #fff. */ .maplibregl-popup-content { border-radius: 10px; padding: 14px 16px; font-size: 14px; box-shadow: var(--shadow); min-width: 240px; background: var(--panel); color: var(--fg); } .maplibregl-popup-tip { border-top-color: var(--panel) !important; border-bottom-color: var(--panel) !important; } /* Search marker */ .search-marker-container { width: 28px; height: 38px; position: relative; } .search-marker { width: 18px; height: 18px; background: #0a2540; border: 3px solid #fff; border-radius: 50%; position: absolute; bottom: 6px; left: 5px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } /* ── Popup content ────────────────────────────────────────────────────────── */ .popup-station h3 { margin: 0 0 4px 0; font-size: 15px; color: var(--fg); } .popup-station .popup-brand { display: inline-block; padding: 2px 8px; background: var(--surface); color: var(--fg-muted); border-radius: 12px; font-size: 11px; font-weight: 600; } .popup-station .popup-addr { color: var(--fg-muted); font-size: 12px; margin: 4px 0 10px 0; } .popup-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; } .popup-price { text-align: center; padding: 6px 4px; border-radius: 6px; background: var(--surface-dim); border: 1px solid var(--border); } .popup-price-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--fg-muted); } .popup-price-value { display: block; font-size: 16px; font-weight: 700; color: var(--fg); margin-top: 2px; } .popup-price--reg { border-top: 3px solid var(--reg); } .popup-price--super { border-top: 3px solid var(--super); } .popup-price--diesel { border-top: 3px solid var(--diesel); } .popup-price--missing .popup-price-value { color: var(--fg-muted); font-weight: 400; } .popup-actions { display: flex; gap: 6px; flex-wrap: wrap; } .popup-actions button, .popup-actions a { flex: 1; min-width: 72px; padding: 6px 8px; font-size: 12px; border-radius: 4px; background: var(--surface); color: var(--fg); border: none; cursor: pointer; text-align: center; text-decoration: none; white-space: nowrap; } .popup-actions button:hover, .popup-actions a:hover { background: var(--surface-hover); } /* Alert form within popup */ .alert-form { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); display: none; gap: 6px; align-items: center; } .alert-form.open { display: flex; } .alert-form select { padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; flex: 1; } .alert-form input[type='number'] { width: 64px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px; font-size: 12px; } .alert-form button { padding: 4px 10px; font-size: 12px; background: var(--accent); color: #fff; border: none; border-radius: 4px; cursor: pointer; } /* ── Bell + alerts panel ─────────────────────────────────────────────────── */ .alerts-bell { position: fixed; bottom: 16px; right: 16px; z-index: 900; width: 48px; height: 48px; border-radius: 50%; background: var(--panel); border: 1px solid var(--border); font-size: 22px; cursor: pointer; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; } .alerts-bell:hover { background: var(--surface); } .alerts-badge { position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: #e74c3c; border: 2px solid #fff; } .alerts-panel { position: fixed; bottom: 72px; right: 16px; z-index: 900; width: 280px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 12px; } .alerts-empty { color: var(--fg-muted); font-size: 13px; margin: 0; } .alert-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); gap: 8px; } .alert-row:last-child { border-bottom: none; } .alert-row-info { flex: 1; min-width: 0; font-size: 13px; } .alert-row-info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .alert-row-info span { color: var(--fg-muted); font-size: 11px; } /* ── Sparkline (popup) ────────────────────────────────────────────────────── */ .popup-sparkline { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); } .popup-sparkline svg { display: block; background: var(--surface-dim); border-radius: 4px; } .sparkline-caption { font-size: 11px; margin-top: 4px; text-align: center; } .sparkline-empty { font-size: 11px; padding: 6px; background: var(--surface-dim); border-radius: 4px; text-align: center; } /* ── Stats overlay ────────────────────────────────────────────────────────── */ .stats-overlay { position: fixed; inset: 0; background: rgba(10, 37, 64, 0.55); z-index: 1500; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .stats-overlay.open { opacity: 1; pointer-events: auto; } .stats-modal { background: var(--panel); border-radius: 12px; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3); width: 100%; max-width: 880px; max-height: 88vh; display: flex; flex-direction: column; } .stats-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); } .stats-header h2 { margin: 0; font-size: 16px; color: var(--fg); } .stats-close { background: transparent; border: none; width: 32px; height: 32px; font-size: 18px; cursor: pointer; color: var(--fg-muted); border-radius: 4px; } .stats-close:hover { background: var(--surface); color: var(--fg); } .stats-body { padding: 14px 18px; overflow-y: auto; } .stats-meta { font-size: 12px; color: var(--fg-muted); margin-bottom: 12px; } .stats-table { width: 100%; border-collapse: collapse; font-size: 13px; } .stats-table th, .stats-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; } .stats-table thead th { background: var(--surface-dim); color: var(--fg-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; } .stats-sort-btn { background: transparent; border: none; cursor: pointer; color: inherit; font: inherit; padding: 0; } .stats-sort-btn.active { color: var(--accent); font-weight: 700; } .stats-figure { font-weight: 600; font-size: 14px; color: var(--fg); } .stats-range { font-size: 11px; color: var(--fg-muted); } .stats-global-row { background: var(--surface); } .stats-global-row td { font-weight: 600; } /* ── Mobile ──────────────────────────────────────────────────────────────── */ @media (max-width: 720px) { .sidebar { width: 280px; transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } .map { left: 0; } .topbar-search { display: none; } .topbar-search.mobile-open { display: block; position: absolute; left: 0; right: 0; top: var(--topbar-h); padding: 8px 12px; background: var(--accent); } } /* ── topbar-action (lang + theme buttons) ───────────────────────────────── */ .topbar-action { background: transparent; border: none; color: inherit; font-size: 18px; min-width: 40px; height: 40px; padding: 0 8px; cursor: pointer; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; letter-spacing: 0.5px; } .topbar-action:hover { background: rgba(255, 255, 255, 0.15); } #lang-toggle { font-size: 13px; } #lang-toggle-label { font-weight: 700; } /* ── Dark theme overrides ───────────────────────────────────────────────── */ [data-theme='dark'] { --bg: #0f1419; --fg: #e6e9ee; --fg-muted: #8a96a8; --accent: #14385f; --accent-hover: #1d4f86; --border: #2a3340; --panel: #181f28; --control: #232c38; --surface: #232c38; --surface-hover: #2a3340; --surface-dim: #1f2733; --danger-bg: #3a2226; --danger-bg-hover: #4a2a30; --danger-fg: #ff9b94; --danger-border: #5c2b31; --shadow: 0 4px 20px rgba(0, 0, 0, 0.35); } /* Surface/panel/control backgrounds flip via the variables above — do NOT re-add per-component dark overrides here; put the token in the base rule. The exceptions below exist because they need more than a colour flip. */ /* Form controls: color-scheme makes the browser render NATIVE widgets (the