/* ─── THEME TOKENS ─────────────────────────────────────────── All colors reference these variables. Swapping data-theme="light" on flips everything. ────────────────────────────────────────────────────────────── */ :root { /* Dark theme (default) */ --bg: #0f0f0f; --bg-surface: #1a1a1a; --bg-surface-hover: #222222; --bg-input: #1f1f1f; --border: rgba(255, 255, 255, 0.08); --text-primary: #f0ede8; --text-secondary: #9ca3af; --text-muted: #4b5563; --accent: #0074da; --accent-glow: rgba(0, 116, 218, 0.25); --nav-bg: #0c1929; --nav-border: rgba(255, 255, 255, 0.07); --btn-bg: #2a2a2a; --btn-text: #d1d5db; --btn-border: rgba(255, 255, 255, 0.12); } [data-theme="light"] { --bg: #f5f2ed; --bg-surface: #ffffff; --bg-surface-hover: #faf8f5; --bg-input: #ffffff; --border: rgba(0, 0, 0, 0.08); --text-primary: #1a1714; --text-secondary: #57534e; --text-muted: #a8a29e; --accent: #0074da; --accent-glow: rgba(0, 116, 218, 0.12); --nav-bg: #0074da; --nav-border: rgba(0, 0, 0, 0.15); --btn-bg: #e8e4dd; --btn-text: #374151; --btn-border: rgba(0, 0, 0, 0.12); } /* ─── TRANSITION ───────────────────────────────────────────── Smooth swap when toggling theme ────────────────────────────────────────────────────────────── */ body, .accordion-item, .accordion-button, .accordion-body, .form-select, .form-control, .filter-panel { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* ─── BASE ───────────────────────────────────────────────────*/ body { background-color: var(--bg); color: var(--text-primary); padding-top: 56px; } /* ─── NAVBAR ─────────────────────────────────────────────────*/ .navbar { background-color: var(--nav-bg) !important; border-bottom: 1px solid var(--nav-border); } /* Theme toggle button in navbar — always light since nav bg is always dark */ .theme-toggle { background: none; border: 1px solid rgba(255, 255, 255, 0.2); color: #d1d5db; padding: 0.25rem 0.6rem; border-radius: 6px; cursor: pointer; font-size: 0.85rem; margin-left: 0.75rem; transition: border-color 0.2s, color 0.2s, background 0.2s; } .theme-toggle:hover { border-color: rgba(255, 255, 255, 0.5); color: #ffffff; background: rgba(255, 255, 255, 0.08); } /* Prevent toggle overlapping hamburger on mobile */ @media (max-width: 991px) { .theme-toggle { margin-right: 0.5rem; } } /* ─── FILTER PANEL ───────────────────────────────────────────*/ .filter-panel { max-width: 900px; margin: 1rem auto 0; background-color: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } /* Always-visible header row */ .filter-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 1.25rem; cursor: pointer; user-select: none; background-color: var(--bg); border-bottom: 1px solid var(--border); } .filter-panel-header:hover { background-color: var(--bg-surface-hover); } .filter-panel-title { font-size: 0.72rem; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.06em; text-transform: uppercase; } .filter-panel-header .filter-chevron { color: var(--text-muted); } /* Solid in light mode */ [data-theme="light"] .filter-panel-header { background-color: var(--nav-bg); border-bottom-color: rgba(255, 255, 255, 0.2); } [data-theme="light"] .filter-panel-header:hover { background-color: #0066c4; } [data-theme="light"] .filter-panel-header .filter-panel-title, [data-theme="light"] .filter-panel-header .filter-chevron { color: #ffffff; } .filter-section-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.55rem 1.25rem; background-color: var(--bg); border: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; text-align: left; transition: background-color 0.15s, color 0.15s; } .filter-section-toggle:hover { background-color: var(--bg-surface-hover); color: var(--text-primary); } .filter-section-toggle .section-chevron { color: var(--text-muted); } /* Solid in light mode */ [data-theme="light"] .filter-section-toggle { background-color: var(--nav-bg); border-top-color: rgba(255, 255, 255, 0.15); border-bottom-color: rgba(255, 255, 255, 0.15); color: #ffffff; } [data-theme="light"] .filter-section-toggle:hover { background-color: #0066c4; color: #ffffff; } [data-theme="light"] .filter-section-toggle .section-chevron { color: #ffffff; } /* Active-filter count badge */ .active-filter-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.35rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; background: var(--accent); color: #fff; line-height: 1; } .active-filter-badge:empty { display: none; } /* Main panel expand/collapse chevron */ .filter-chevron { font-size: 0.7rem; color: var(--text-muted); display: inline-block; transition: transform 0.2s ease; } .filter-panel-header[aria-expanded="true"] .filter-chevron { transform: rotate(180deg); } /* Inner body — no padding; each section manages its own */ .filter-panel-body { padding: 0; } /* Padded content zones (search bar, chips, footer) */ .filter-section-content { padding: 0.75rem 1.25rem; } /* ─── FILTER SECTIONS ────────────────────────────────────────*/ .filter-section-toggle:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent-glow); } /* Section-level chevron — rotates when expanded */ .section-chevron { font-size: 0.65rem; display: inline-block; transition: transform 0.2s ease; } .filter-section-toggle[aria-expanded="true"] .section-chevron { transform: rotate(180deg); } /* Clear All footer */ .filter-panel-footer { border-top: 1px solid var(--border); } .clear-filter-btn { background: var(--btn-bg); color: var(--btn-text); border: 1px solid var(--btn-border); padding: 0.35rem 1rem; border-radius: 6px; cursor: pointer; font-size: 0.8rem; font-weight: 500; transition: border-color 0.2s, color 0.2s; } .clear-filter-btn:hover { border-color: var(--accent); color: var(--accent); } /* ─── FORM CONTROLS ──────────────────────────────────────────*/ .form-control, .form-select { background-color: var(--bg-input); color: var(--text-primary); border-color: var(--border); } .form-control:focus, .form-select:focus { background-color: var(--bg-input); color: var(--text-primary); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); } .form-control::placeholder { color: var(--text-muted); } .form-select option:checked { background-color: var(--accent-glow); color: var(--accent); } /* ─── ACCORDION ──────────────────────────────────────────────*/ .accordion-item { background-color: var(--bg-surface); border-color: var(--border); } .accordion-button { background-color: var(--bg-surface); color: var(--text-primary); } .accordion-button:not(.collapsed) { background-color: var(--bg-surface-hover); color: var(--accent); box-shadow: inset 0 -1px 0 var(--border); } /* Override Bootstrap's default blue focus ring */ .accordion-button:focus { box-shadow: 0 0 0 2px var(--accent-glow); border-color: var(--border); } /* Fix Bootstrap's hardcoded white chevron in dark mode */ .accordion-button::after { filter: brightness(10); } [data-theme="light"] .accordion-button::after { filter: none; } .accordion-body { background-color: var(--bg-surface); color: var(--text-secondary); } /* ─── TAGS ───────────────────────────────────────────────────*/ .tag { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 500; background: var(--accent-glow); color: var(--accent); border: 1px solid var(--accent); vertical-align: middle; margin-left: 0.5rem; white-space: nowrap; } .tag--purple { background: rgba(167, 139, 250, 0.15); color: #a78bfa; border-color: #a78bfa; } .tag--green { background: rgba(52, 211, 153, 0.15); color: #34d399; border-color: #34d399; } .tag--orange { background: rgba(251, 146, 60, 0.15); color: #fb923c; border-color: #fb923c; } .tag--red { background: rgba(248, 113, 113, 0.15); color: #f87171; border-color: #f87171; } .tag--yellow { background: rgba(250, 204, 21, 0.15); color: #fbbf24; border-color: #fbbf24; } /* Solid tags in light mode */ [data-theme="light"] .tag { background: var(--accent); color: #fff; border-color: var(--accent); } [data-theme="light"] .tag--purple { background: #7c3aed; color: #fff; border-color: #7c3aed; } [data-theme="light"] .tag--green { background: #059669; color: #fff; border-color: #059669; } [data-theme="light"] .tag--orange { background: #ea580c; color: #fff; border-color: #ea580c; } [data-theme="light"] .tag--red { background: #dc2626; color: #fff; border-color: #dc2626; } [data-theme="light"] .tag--yellow { background: #fbbf24; color: #ffffff; border-color: #fbbf24; } /* ─── MAP LINK ───────────────────────────────────────────────*/ .map-link { color: var(--text-secondary); text-decoration: none; } .map-link:hover { color: var(--accent); text-decoration: underline; } /* ─── MAP BUTTONS ────────────────────────────────────────────*/ .card-body-row { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 0.75rem; } .card-body-row .card-desc-text { flex: 1; min-width: 0; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; } .map-btns { display: flex; flex-direction: row; gap: 0.4rem; flex-shrink: 0; } .map-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-secondary); text-decoration: none; transition: border-color 0.15s, background 0.15s, color 0.15s; } .map-btn:hover { background: var(--bg-surface-hover); border-color: var(--accent); } .map-btn--google:hover { border-color: #EA4335; color: #EA4335; } .map-btn--apple:hover { border-color: #007AFF; color: #007AFF; } /* ─── HIDDEN UTILITY ─────────────────────────────────────────*/ div.hidden { display: none !important; } /* ─── FILTER CHIPS ───────────────────────────────────────────*/ .filter-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; } .filter-chip { padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 500; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; white-space: nowrap; line-height: 1.4; } .filter-chip:hover { border-color: var(--accent); color: var(--accent); } .filter-chip.active { background: var(--accent-glow); border-color: var(--accent); color: var(--accent); } /* ─── RESTAURANT LIST ────────────────────────────────────────*/ .restaurant-list-wrap { max-width: 900px; margin: 1rem auto 0; padding: 0 1rem; }