/* -------------------------------------------------------------------------- */ /* Local font: PP Neue Machina — place licensed files in this folder. */ /* -------------------------------------------------------------------------- */ @font-face { font-family: "PP Neue Machina"; src: url("PP Neue Machina Font/PPNeueMachina-PlainRegular.woff2") format("woff2"), url("PP Neue Machina Font/PPNeueMachina-PlainRegular.otf") format("opentype"), url("PP Neue Machina Font/PP Neue Machina Plain Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "PP Neue Machina"; src: url("PP Neue Machina Font/PPNeueMachina-PlainUltrabold.woff2") format("woff2"), url("PP Neue Machina Font/PPNeueMachina-PlainUltrabold.otf") format("opentype"), url("PP Neue Machina Font/PP Neue Machina Plain Ultrabold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } /* -------------------------------------------------------------------------- */ /* Theme tokens — [data-theme] on (see script.js). */ /* Cream / paper: #FFFAE7 — dark bg & accents unchanged. */ /* -------------------------------------------------------------------------- */ :root { --accent: #fb3f58; --accent-2: #5d9386; --cream: #fffae7; --ink: #121619; --font: "PP Neue Machina", system-ui, sans-serif; --radius: 14px; --radius-sm: 10px; --transition: 0.22s cubic-bezier(0.25, 0.1, 0.25, 1); } [data-theme="dark"] { --bg: #121619; --text: #fffae7; --scape: #fffae7; --panel: rgba(26, 30, 34, 0.97); --panel-border: rgba(255, 250, 231, 0.1); --muted: rgba(255, 250, 231, 0.5); --input-bg: rgba(18, 22, 25, 0.92); --map-ui: #121619; --shadow: 0 12px 40px rgba(0, 0, 0, 0.35); } [data-theme="light"] { --bg: #fffae7; --text: #121619; --scape: #121619; --panel: #fffae7; --panel-border: rgba(18, 22, 25, 0.12); --muted: rgba(18, 22, 25, 0.5); --input-bg: rgba(18, 22, 25, 0.06); --map-ui: #fffae7; --shadow: 0 10px 32px rgba(18, 22, 25, 0.1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; min-height: 100%; font-family: var(--font); background: var(--bg); color: var(--text); } body { min-height: 100dvh; } /* -------------------------------------------------------------------------- */ /* App shell — single column. */ /* -------------------------------------------------------------------------- */ .app-shell { min-height: 100dvh; } .app-main { min-width: 0; display: flex; flex-direction: column; padding: 0 1rem 1.25rem; max-width: 100%; } /* -------------------------------------------------------------------------- */ /* Map stack — anchor for floating filter card + FAB. */ /* -------------------------------------------------------------------------- */ .map-stack { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; } .filter-backdrop { display: none; position: absolute; inset: 0; z-index: 405; background: rgba(18, 22, 25, 0.35); border-radius: var(--radius); opacity: 0; transition: opacity var(--transition); pointer-events: none; } .filter-backdrop--visible { display: block; opacity: 1; pointer-events: auto; } .filter-float { position: absolute; top: 0.45rem; right: 0.45rem; width: min(15.25rem, calc(100% - 3.25rem)); max-height: min(36vh, 18.5rem); z-index: 410; border-radius: var(--radius); border: 1px solid var(--panel-border); background: var(--panel); box-shadow: var(--shadow), 0 1px 0 rgba(255, 250, 231, 0.04) inset; backdrop-filter: blur(12px); display: flex; flex-direction: column; overflow: hidden; transition: border-color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition); } .filter-float:hover { border-color: rgba(93, 147, 134, 0.35); } .filter-float__inner { display: flex; flex-direction: column; gap: 0.65rem; padding: 1rem 1.05rem 1.05rem; min-height: 0; overflow: hidden; } .filter-float__section { display: flex; flex-direction: column; gap: 0.5rem; flex-shrink: 0; } .filter-float__section--tags { flex: 1; min-height: 0; } .filter-float__heading { margin: 0; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .filter-float-toggle { display: none; position: absolute; bottom: 0.55rem; right: 0.55rem; z-index: 415; align-items: center; gap: 0.4rem; font-family: inherit; padding: 0.5rem 0.85rem; border-radius: 999px; border: 1px solid var(--panel-border); background: var(--panel); color: var(--text); cursor: pointer; font-size: 0.72rem; font-weight: 600; box-shadow: var(--shadow); transition: border-color var(--transition), transform 0.15s ease; } .filter-float-toggle:hover { border-color: var(--accent); transform: translateY(-1px); } .filter-float-toggle__bars { width: 13px; height: 9px; border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); box-shadow: 0 3px 0 0 var(--accent-2); opacity: 0.9; } @media (max-width: 720px) { .filter-float { top: auto; bottom: 3.25rem; left: 0.45rem; right: 0.45rem; width: auto; max-height: min(48vh, 22rem); transform: translateY(calc(100% + 4rem)); opacity: 0; pointer-events: none; } .filter-float--open { transform: translateY(0); opacity: 1; pointer-events: auto; } .filter-float-toggle { display: flex; } } .filter-list { overflow-y: auto; flex: 1 1 auto; min-height: 3.5rem; max-height: min(22vh, 10.5rem); display: flex; flex-direction: column; gap: 0.2rem; padding: 0.15rem 0.1rem 0.25rem 0; scrollbar-width: thin; scrollbar-color: var(--accent-2) transparent; } /* -------------------------------------------------------------------------- */ /* Header — tagscape split color; subtitle editorial. */ /* -------------------------------------------------------------------------- */ .site-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-start; gap: 0.75rem 1rem; padding: 1.1rem 0 0.85rem; flex-shrink: 0; } .site-header .brand { flex: 1 1 12rem; min-width: 0; } .site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; } .site-nav__link { font-family: inherit; font-size: 0.72rem; font-weight: 600; text-decoration: none; padding: 0.45rem 0.8rem; border-radius: 999px; border: 1px solid var(--panel-border); color: var(--text); background: var(--input-bg); white-space: nowrap; transition: border-color var(--transition), background var(--transition), color var(--transition); } .site-nav__link:hover { border-color: var(--accent-2); } .site-nav__link--current { border-color: var(--accent); color: var(--cream); background: rgba(251, 63, 88, 0.14); } .brand-title { margin: 0; font-size: clamp(1.65rem, 4vw, 2.15rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; } .brand-title__tag { color: var(--accent); } .brand-title__scape { color: var(--scape); } .tagline { margin: 0.45rem 0 0; font-size: 0.78rem; font-weight: 400; letter-spacing: 0.02em; color: var(--text); opacity: 0.52; max-width: 22rem; line-height: 1.35; } .theme-toggle { margin-left: auto; font-family: inherit; border: 1px solid var(--panel-border); background: var(--panel); color: var(--text); padding: 0.5rem 0.85rem; border-radius: 999px; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; font-weight: 600; transition: border-color var(--transition), background var(--transition), transform 0.15s ease; } .theme-toggle:hover { border-color: var(--accent); transform: translateY(-1px); } .theme-toggle__state { color: var(--accent); font-weight: 700; } /* Map stack: toolbar + map canvas (see earlier .map-stack for layout). */ .map-toolbar { padding: 0 0 0.5rem; min-height: 1.5rem; } .selection-hint { margin: 0; font-size: 0.78rem; color: var(--accent-2); font-weight: 600; letter-spacing: 0.02em; } .map { flex: 1; min-height: min(52vh, 520px); border-radius: var(--radius); border: 1px solid var(--panel-border); overflow: hidden; background: var(--bg); box-shadow: 0 0 0 1px rgba(255, 250, 231, 0.04) inset; transition: border-color var(--transition), box-shadow var(--transition); } .map:hover { border-color: rgba(251, 63, 88, 0.25); } /* Mapbox canvas */ .map .mapboxgl-canvas { outline: none; } /* Filters inside floating card — .filter-list sizing also set above. */ .map-mode { display: flex; width: 100%; border: 1px solid var(--panel-border); border-radius: 999px; overflow: hidden; background: var(--input-bg); } .mode-btn { font-family: inherit; flex: 1; border: none; background: transparent; color: var(--text); padding: 0.5rem 0.65rem; font-size: 0.7rem; font-weight: 600; cursor: pointer; opacity: 0.55; transition: opacity var(--transition), background var(--transition); } .mode-btn:hover { opacity: 1; } .mode-btn--active { background: var(--accent); color: #fffae7; opacity: 1; } .filter-actions { display: flex; } .filter-counter { font-size: 0.72rem; color: var(--muted); line-height: 1.35; } .filter-item { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.8rem; cursor: pointer; padding: 0.45rem 0.35rem; border-radius: var(--radius-sm); border: 1px solid transparent; transition: background var(--transition), border-color var(--transition); } .filter-item:hover { background: rgba(251, 63, 88, 0.06); border-color: var(--panel-border); } .filter-item input { margin-top: 0.2rem; accent-color: var(--accent); } /* -------------------------------------------------------------------------- */ /* Below map — cards */ /* -------------------------------------------------------------------------- */ .below-map { padding: 1.1rem 0 0; display: grid; gap: 1rem; } @media (min-width: 900px) { .below-map { grid-template-columns: 1.35fr 1fr; align-items: start; } } .section-title { margin: 0 0 0.6rem; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .chart-block, .walk-block { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: 0 1px 0 rgba(255, 250, 231, 0.04) inset; transition: border-color var(--transition), box-shadow var(--transition); } .chart-block:hover, .walk-block:hover { border-color: rgba(93, 147, 134, 0.35); } .chart-wrap { position: relative; height: 220px; } .walk-hint { margin: 0 0 0.65rem; font-size: 0.78rem; color: var(--muted); min-height: 1.2em; line-height: 1.4; } .walk-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.65rem; } .btn { font-family: inherit; border-radius: 999px; padding: 0.52rem 1rem; font-size: 0.78rem; font-weight: 600; cursor: pointer; border: 1px solid var(--panel-border); background: var(--input-bg); color: var(--text); transition: border-color var(--transition), background var(--transition), transform 0.12s ease; } .btn:hover { border-color: var(--accent-2); transform: translateY(-1px); } .btn--small { padding: 0.4rem 0.75rem; font-size: 0.72rem; } .btn--accent { background: var(--accent); border-color: var(--accent); color: #fffae7; } .btn--accent:hover { filter: brightness(1.06); } .btn--ghost { background: transparent; } .route-panel { border-top: 1px solid var(--panel-border); padding-top: 0.75rem; margin-top: 0.2rem; } .route-panel--hidden { display: none; } .route-panel__title { margin: 0 0 0.45rem; font-size: 0.88rem; color: var(--text); } .route-panel__meta { margin: 0; display: grid; gap: 0.45rem; font-size: 0.78rem; } .route-panel__meta dt { color: var(--muted); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; } .route-panel__meta dd { margin: 0.12rem 0 0; color: var(--text); } /* -------------------------------------------------------------------------- */ /* Custom HTML markers — solid fills only (no stroke / shadow). */ /* -------------------------------------------------------------------------- */ .map-marker { width: 14px; height: 14px; border-radius: 50%; background: #5d9386; border: none; box-shadow: none; outline: none; cursor: pointer; transition: transform 0.18s ease, background 0.18s ease, opacity 0.18s ease; } .map-marker:hover { transform: scale(1.25); } .map-marker--hover { background: #5d9386; transform: scale(1.2); } .map-marker--selected { background: #fb3f58; transform: scale(1.35); } .map-marker--dimmed { opacity: 0.28; transform: scale(0.85); background: #6a6f73; } /* -------------------------------------------------------------------------- */ /* Mapbox GL popups — theme-aligned (class set in JS). Above drawer. */ /* -------------------------------------------------------------------------- */ .mapboxgl-popup { z-index: 650; } .mapboxgl-popup.tagscape-popup .mapboxgl-popup-content { padding: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--panel); color: var(--text); border: 1px solid var(--panel-border); box-shadow: var(--shadow); font-family: var(--font); min-width: 168px; max-width: 240px; } .mapboxgl-popup.tagscape-popup .mapboxgl-popup-tip { border-top-color: var(--panel); border-bottom-color: var(--panel); } .popup-card { padding: 0.85rem 0.95rem; } .popup-card__name { font-weight: 700; margin: 0 0 0.45rem; font-size: 0.92rem; letter-spacing: -0.01em; color: var(--text); } .popup-card__img { width: 100%; max-width: 220px; border-radius: 8px; display: block; margin-bottom: 0.45rem; object-fit: cover; aspect-ratio: 4 / 3; background: var(--input-bg); } .popup-card__count { font-size: 0.72rem; color: var(--muted); margin: 0; } /* Walk stop markers (DOM) */ .walk-number-icon-wrap { background: none !important; border: none !important; } .walk-number-icon { width: 28px !important; height: 28px !important; margin-left: -14px !important; margin-top: -14px !important; border-radius: 50%; background: var(--accent); color: #fffae7; font-weight: 700; font-size: 0.75rem; display: flex !important; align-items: center; justify-content: center; border: 2px solid var(--bg); font-family: var(--font); box-shadow: var(--shadow); }