/* ═══════════════════════════════════════════════════════════ MDW 2026 — Main Application Styles ═══════════════════════════════════════════════════════════ */ /* Legal footer — small, unobtrusive. Sidebar variant + full-page variant. */ .mdw-legal { font-size: 11px; color: var(--text2); padding: 14px 16px; border-top: 1px solid var(--border); line-height: 1.6; opacity: 0.85; } .mdw-legal a { color: var(--text2); text-decoration: none; border-bottom: 1px dotted var(--border); margin-right: 10px; white-space: nowrap; } .mdw-legal a:hover { color: var(--accent); border-bottom-color: var(--accent); } .mdw-legal .op { display: block; margin-top: 6px; font-size: 10px; opacity: 0.7; } .mdw-legal .links { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 2px; } .app-footer { max-width: 1100px; margin: 32px auto 0; padding: 14px 20px 28px; border-top: 1px solid var(--border); color: var(--text2); font-size: 10px; line-height: 1.55; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; opacity: 0.5; transition: opacity 0.2s; } .app-footer:hover { opacity: 0.9; } .app-footer a { color: var(--text2); text-decoration: none; border-bottom: 1px dotted var(--border); } .app-footer a:hover { color: var(--accent); border-bottom-color: var(--accent); } .app-footer .footer-links a { margin-right: 10px; font-size: 10px; } .app-footer .footer-op { font-weight: 400; } /* Strip bold emphasis on the operator name in footer — no bragging. */ .app-footer .footer-op strong { font-weight: 400; color: inherit; } :root { /* Dark theme (default) */ --bg: #0a0a0a; --surface: #141414; --surface2: #1e1e1e; --border: #2a2a2a; --text: #e0e0e0; --text2: #888; --accent: #4ecdc4; --accent2: #ff6b6b; --free: #4ecdc4; --prereg: #ffd93d; --invite: #ff6b6b; --selected: #ffd700; --c-like: #ff6b6b; --c-bookmark: #ffd93d; --c-planned: #4ecdc4; --c-visited: #a78bfa; --map-fallback: #1a1a1a; --map-tile-url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'; /* Translucent panels floating over the map (attribution, count, legend, timeline strip). Theme-aware so light-mode map doesn't show dark chips. */ --overlay-bg: rgba(10, 10, 10, 0.85); --overlay-bg-strong: rgba(10, 10, 10, 0.92); --overlay-bg-soft: rgba(10, 10, 10, 0.72); --pill-count-bg: rgba(255, 255, 255, 0.1); /* Unified font stack — single source of truth. Any element that needs a different face should reference --font-mono explicitly; otherwise it inherits --font-sans through body. */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif; --font-mono: "SF Mono", "JetBrains Mono", "Fira Code", ui-monospace, monospace; } [data-theme="light"] { --bg: #ffffff; --surface: #fafafa; --surface2: #f0f0f0; --border: #d8d8d8; --text: #1a1a1a; --text2: #666; --accent: #0d9488; /* deeper teal for contrast */ --accent2: #dc2626; --free: #0d9488; --prereg: #ca8a04; --invite: #dc2626; --selected: #ca8a04; --c-like: #dc2626; --c-bookmark: #ca8a04; --c-planned: #0d9488; --c-visited: #7c3aed; --map-fallback: #e8e8e8; --overlay-bg: rgba(255, 255, 255, 0.92); --overlay-bg-strong: rgba(255, 255, 255, 0.96); --overlay-bg-soft: rgba(255, 255, 255, 0.85); --pill-count-bg: rgba(0, 0, 0, 0.08); } * { margin: 0; padding: 0; box-sizing: border-box; } /* ─── Font-size scale (data-fs on ) ─── Uses CSS `zoom` on text-heavy containers. Deliberately skips .map-container so Leaflet marker positions are unaffected. */ html[data-fs="sm"] .header, html[data-fs="sm"] .sidebar, html[data-fs="sm"] .panel, html[data-fs="sm"] .mobile-nav, html[data-fs="sm"] .detail-overlay, html[data-fs="sm"] .day-legend, html[data-fs="sm"] .map-legend { zoom: 0.9; } html[data-fs="lg"] .header, html[data-fs="lg"] .sidebar, html[data-fs="lg"] .panel, html[data-fs="lg"] .mobile-nav, html[data-fs="lg"] .detail-overlay, html[data-fs="lg"] .day-legend, html[data-fs="lg"] .map-legend { zoom: 1.12; } html[data-fs="xl"] .header, html[data-fs="xl"] .sidebar, html[data-fs="xl"] .panel, html[data-fs="xl"] .mobile-nav, html[data-fs="xl"] .detail-overlay, html[data-fs="xl"] .day-legend, html[data-fs="xl"] .map-legend { zoom: 1.25; } /* Sidebar "Display" section — font-size buttons */ .fs-pills { display: flex; gap: 6px; } .fs-pill { flex: 1; padding: 8px 10px; text-align: center; background: var(--surface); color: var(--text2); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; user-select: none; font-family: inherit; line-height: 1; transition: background 120ms, color 120ms, border-color 120ms; } .fs-pill:hover { color: var(--text); border-color: var(--text2); } .fs-pill.active { background: var(--accent); color: #0a0a0a; border-color: var(--accent); } .fs-pill[data-fs-set="sm"] { font-size: 11px; } .fs-pill[data-fs-set="md"] { font-size: 13px; } .fs-pill[data-fs-set="lg"] { font-size: 15px; } .fs-pill[data-fs-set="xl"] { font-size: 17px; } /* Match html background to theme — on iOS PWA, the safe-area regions (under the notch + home indicator) fall back to the html element's background when content doesn't cover them. Without this, home indicator area shows the browser-default white strip. */ html { background: var(--bg); color-scheme: dark light; } body { font-family: var(--font-sans); background: var(--bg); color: var(--text); height: 100dvh; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Override Leaflet / MarkerCluster / Supabase widget internal fonts — third-party CSS from CDN otherwise wins over our inherited stack. */ .leaflet-container, .leaflet-container input, .leaflet-container button, .leaflet-popup-content, .leaflet-control, .marker-cluster div { font-family: var(--font-sans) !important; } /* ─── Layout ─── */ .app { display: grid; grid-template-columns: 320px 380px 1fr; grid-template-rows: 56px 1fr; height: 100dvh; } /* Visual swap of map ↔ panel without touching DOM. */ .panel { order: 2; } .map-container { order: 3; } .header { grid-column: 1 / -1; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 20px; gap: 20px; } .header h1 { font-size: 16px; font-weight: 600; letter-spacing: 0.5px; } .header h1 span { color: var(--accent); } .header .stats { display: flex; gap: 16px; font-size: 11px; color: var(--text2); } .header .stats b { color: var(--text); } /* Primary nav surfaces hub pages (Districts / Designers / FAQ) to users on the map page. Mobile version appears at the top of the sidebar drawer instead. */ .header-nav { display: flex; gap: 18px; font-size: 12px; letter-spacing: 0.4px; margin-left: 4px; } .header-nav a { color: var(--text2); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; transition: color 0.15s, border-color 0.15s; white-space: nowrap; } .header-nav a:hover { color: var(--text); border-bottom-color: var(--accent); } .header-nav a.accent { color: var(--accent); font-weight: 500; } .header-nav a.accent:hover { border-bottom-color: var(--accent); opacity: 0.85; } @media (max-width: 900px) { .header-nav { display: none; } } .mobile-hub-nav { display: none; padding: 14px 16px 4px; border-bottom: 1px solid var(--border); margin-bottom: 6px; } .mobile-hub-nav h3 { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text2); margin: 0 0 8px; font-weight: 600; } .mobile-hub-nav a { display: block; padding: 10px 0; color: var(--text); text-decoration: none; font-size: 14px; border-bottom: 1px solid var(--border); } .mobile-hub-nav a:last-child { border-bottom: none; } .mobile-hub-nav a.accent { color: var(--accent); font-weight: 500; } @media (max-width: 900px) { .mobile-hub-nav { display: block; } } /* Brand logo — stacked "Milan" / "Design Week 2026" with year in accent. Used in both .header (index) and .top-bar (planner). Acts as the Home button: click resets filters on index.html (JS) and navigates back to /map on planner.html (via href). */ .brand { display: inline-flex; flex-direction: column; gap: 2px; color: var(--text); text-decoration: none; line-height: 1; flex: 0 0 auto; cursor: pointer; user-select: none; padding: 2px 0; transition: opacity 0.15s; } .brand:hover { opacity: 0.75; } .brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } .brand-line { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; } .brand-year { color: var(--accent); } .brand-sub { color: var(--text2); font-size: 12px; font-weight: 500; letter-spacing: 0.5px; padding-left: 10px; border-left: 1px solid var(--border); } .sidebar { background: var(--surface); border-right: 1px solid var(--border); overflow-y: auto; padding: 12px; } /* ─── Filters ─── */ .filter-section { margin-bottom: 16px; } .filter-section h3 { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text2); margin-bottom: 8px; } .search-input { width: 100%; background: var(--surface2); border: 1px solid var(--border); color: var(--text); padding: 8px 10px; font-family: inherit; font-size: 12px; border-radius: 4px; outline: none; } .search-input:focus { border-color: var(--accent); } /* Day pills */ .day-pills { display: flex; flex-wrap: wrap; gap: 4px; } .day-pill { padding: 4px 8px; font-size: 11px; background: var(--surface2); border: 1px solid var(--border); border-radius: 3px; cursor: pointer; transition: all 0.15s; } .day-pill:hover { border-color: var(--accent); } .day-pill.active { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 600; } /* M5: focus-visible outlines for keyboard users */ .day-pill:focus-visible, .access-pill:focus-visible, .chip:focus-visible, .interest-pill:focus-visible, .time-preset:focus-visible, .mobile-nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Chip list (district, category) */ .chip-list { display: flex; flex-wrap: wrap; gap: 4px; } .chip { padding: 3px 8px; font-size: 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 3px; cursor: pointer; transition: all 0.15s; } .chip:hover { border-color: var(--accent); } .chip.active { background: var(--accent); color: var(--bg); border-color: var(--accent); } .chip .count { color: var(--text2); margin-left: 4px; } .chip.active .count { color: rgba(0,0,0,0.5); } /* Access pills */ .access-pills { display: flex; gap: 4px; } /* Source pills variant — 7 pills (fuorisalone / salone / alcova / brera / 5vie / dropcity + All). Scroll horizontally on narrow viewports. */ .access-pills.source-pills-scroll { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; /* room for -webkit-scrollbar if enabled */ } .access-pills.source-pills-scroll::-webkit-scrollbar { display: none; } .access-pills.source-pills-scroll .access-pill { flex: 0 0 auto; white-space: nowrap; } .access-pill { padding: 4px 10px; font-size: 11px; background: var(--surface2); border: 1px solid var(--border); border-radius: 3px; cursor: pointer; } .access-pill:hover { border-color: var(--text2); } .access-pill.active[data-access="free"] { background: var(--free); color: var(--bg); border-color: var(--free); } .access-pill.active[data-access="pre-registration"] { background: var(--prereg); color: var(--bg); border-color: var(--prereg); } .access-pill.active[data-access="invitation"] { background: var(--invite); color: var(--bg); border-color: var(--invite); } .toggle-row { display: flex; align-items: center; gap: 8px; font-size: 11px; margin-top: 4px; cursor: pointer; } .toggle-row input[type="checkbox"] { accent-color: var(--accent); } /* Time range slider */ .time-range-wrap { position: relative; height: 36px; margin-top: 4px; } .time-range-wrap input[type="range"] { -webkit-appearance: none; appearance: none; position: absolute; left: 0; top: 0; width: 100%; height: 36px; background: none; pointer-events: none; outline: none; } /* Slider thumb — WebKit and Firefox both need explicit rules. 22px default / 28px on touch. Previously 16px webkit-only: invisible on Firefox mobile and too small to grab on any phone. */ .time-range-wrap input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); cursor: pointer; pointer-events: auto; position: relative; z-index: 2; } .time-range-wrap input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); cursor: pointer; pointer-events: auto; } .time-range-wrap input[type="range"]::-moz-range-track { background: transparent; border: none; } @media (pointer: coarse) { .time-range-wrap input[type="range"]::-webkit-slider-thumb, .time-range-wrap input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; } } .time-track { position: absolute; top: 16px; left: 0; right: 0; height: 4px; background: var(--surface2); border-radius: 2px; } .time-track-fill { position: absolute; top: 16px; height: 4px; background: var(--accent); border-radius: 2px; } .time-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--text2); margin-top: 2px; } .time-value { font-size: 12px; color: var(--accent); text-align: center; margin-bottom: 4px; font-weight: 600; } .time-presets { display: flex; gap: 4px; margin-top: 6px; } .time-preset { padding: 3px 8px; font-size: 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 3px; cursor: pointer; color: var(--text2); } .time-preset:hover { border-color: var(--accent); color: var(--text); } /* ─── Map ─── */ .map-container { position: relative; overflow: hidden; background: var(--bg); } #map { width: 100%; height: 100%; background: var(--bg); } /* Override Leaflet defaults — empty tile slots during load flash gray/white. Force theme-matching bg at every layer + on the tiles themselves. */ .leaflet-container, .leaflet-map-pane, .leaflet-tile-pane, .leaflet-layer, .leaflet-tile-container, .leaflet-pane { background: var(--map-fallback) !important; } .leaflet-tile { background: var(--map-fallback) !important; } /* Leaflet controls — zoom +/− buttons, attribution bar default to white */ .leaflet-bar, .leaflet-bar a, .leaflet-control-zoom-in, .leaflet-control-zoom-out { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; } .leaflet-bar a:hover { background: var(--surface2) !important; color: var(--accent) !important; } .leaflet-bar a.leaflet-disabled { background: var(--surface) !important; color: var(--text2) !important; } .leaflet-bar { box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important; } .leaflet-control-attribution { background: var(--overlay-bg-soft) !important; color: var(--text2) !important; backdrop-filter: blur(6px); padding: 2px 6px !important; font-size: 10px !important; } .leaflet-control-attribution a { color: var(--accent) !important; } /* Hide the Ukraine flag emoji in attribution */ .leaflet-attribution-flag { display: none !important; } .map-count { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 999; background: var(--overlay-bg); border: 1px solid var(--border); padding: 6px 14px; font-size: 12px; border-radius: 4px; backdrop-filter: blur(8px); } .map-count b { color: var(--accent); } /* Day legend (shown in Planning mode) */ .day-legend { display: none; position: absolute; top: 10px; right: 10px; z-index: 999; background: var(--overlay-bg); border: 1px solid var(--border); padding: 8px 12px; font-size: 10px; border-radius: 4px; backdrop-filter: blur(8px); } .day-legend.active { display: block; } /* Map legend — marker color key, shown bottom-left on desktop */ .map-legend { position: absolute; bottom: 10px; left: 10px; z-index: 999; background: var(--overlay-bg); border: 1px solid var(--border); padding: 6px 10px; font-size: 10px; border-radius: 4px; backdrop-filter: blur(8px); line-height: 1.4; pointer-events: none; /* don't block map clicks */ } .map-legend .ml-row { display: flex; align-items: center; gap: 6px; } .map-legend .ml-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.4); flex-shrink: 0; } .map-legend .ml-teal { background: #4ecdc4; } .map-legend .ml-orange { background: #ff9f43; } .map-legend .ml-gold { background: #ffd700; } /* Hide map legend on mobile — sidebar Source pills already serve */ @media (max-width: 768px) { .map-legend { display: none; } } /* ─── Fiera floor plan — button + modal ─── */ .fiera-open-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 8px; padding: 7px 10px; background: rgba(255, 159, 67, 0.12); border: 1px solid #ff9f43; color: #ff9f43; border-radius: 4px; font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; transition: background 0.15s; } .fiera-open-btn:hover { background: rgba(255, 159, 67, 0.22); } .fiera-modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); z-index: 10000; align-items: center; justify-content: center; padding: 20px; } .fiera-modal.open { display: flex; } .fiera-body { flex: 1; overflow: auto; padding: 0; } .fiera-body .hall-map-wrap { margin: 0; border: none; border-radius: 0; } @media (max-width: 768px) { .fiera-modal { padding: 0; } .fiera-modal-box { max-width: 100vw; max-height: 100vh; border-radius: 0; } } .fiera-modal-box { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; max-width: 95vw; max-height: 90vh; width: 1400px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6); } .fiera-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--surface2); } .fiera-modal-head h3 { font-size: 14px; font-weight: 600; color: var(--text); margin: 0; } .fiera-close { background: none; border: none; color: var(--text2); font-size: 22px; cursor: pointer; padding: 0 4px; line-height: 1; } .fiera-close:hover { color: var(--c-like); } /* Clean SVG schematic of the Salone hall layout. Used inline in the detail overlay + expanded in the Floor-plan modal. */ .hall-map-wrap { margin: 10px 0 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .hall-map-svg { display: block; width: 100%; height: auto; background: var(--surface2); } .hall-map-caption { padding: 6px 10px; font-size: 11px; color: var(--text2, #888); background: var(--surface2, #1e1e1e); border-top: 1px solid var(--border, #2a2a2a); text-align: center; } /* Hover feedback for interactive (modal) mode */ .hallmap-hall.interactive rect { transition: stroke-width 0.12s, fill-opacity 0.12s; } .hallmap-hall.interactive:hover rect { stroke: #ff9f43; stroke-width: 2; fill-opacity: 1; } /* Active hall outer ring pulse */ .hallmap-pulse { animation: hallmap-pulse-anim 1.6s ease-out infinite; } @keyframes hallmap-pulse-anim { 0% { opacity: 1; stroke-width: 2; } 50% { opacity: 0.3; stroke-width: 6; } 100% { opacity: 1; stroke-width: 2; } } .fiera-hint { padding: 10px 20px 14px; font-size: 11px; color: var(--text2); text-align: center; border-top: 1px solid var(--border); background: var(--surface2); } @media (max-width: 768px) { .fiera-svg-wrap { padding: 8px; } .fiera-modal-head h3 { font-size: 12px; } } .day-legend h4 { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--text2); margin-bottom: 6px; font-weight: 500; } .day-legend .dl-row { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; } .day-legend .dl-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.4); } .day-legend .dl-label { color: var(--text); font-size: 10px; } .day-legend .dl-count { color: var(--text2); font-size: 9px; margin-left: auto; } /* ─── Timeline strip (bottom, Planning mode) ─── */ .timeline-strip { display: none; position: absolute; bottom: 0; left: 0; right: 0; z-index: 998; background: var(--overlay-bg-strong); border-top: 1px solid var(--border); padding: 10px 14px 12px; backdrop-filter: blur(8px); font-size: 10px; } .timeline-strip.active { display: block; } .tl-header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; } .tl-day-chip { padding: 3px 10px; font-size: 10px; font-family: inherit; background: var(--surface2); border: 1px solid var(--border); color: var(--text2); border-radius: 3px; cursor: pointer; } .tl-day-chip:hover { color: var(--text); } .tl-day-chip.active { font-weight: 600; } .tl-summary { margin-left: auto; color: var(--text2); font-size: 10px; } .tl-axis { display: flex; justify-content: space-between; font-size: 9px; color: var(--text2); margin-bottom: 2px; padding: 0 2px; } .tl-tick { text-align: center; } .tl-track { position: relative; height: 28px; background: var(--surface2); border: 1px solid var(--border); border-radius: 3px; overflow: hidden; } .tl-gap { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient( 45deg, rgba(255,217,61,0.08), rgba(255,217,61,0.08) 6px, transparent 6px, transparent 12px ); border-left: 1px dashed rgba(255,217,61,0.3); border-right: 1px dashed rgba(255,217,61,0.3); pointer-events: none; } .tl-block { position: absolute; top: 2px; bottom: 2px; border-radius: 2px; cursor: pointer; overflow: hidden; display: flex; align-items: center; padding: 0 4px; opacity: 0.9; transition: opacity 0.1s; z-index: 2; } .tl-block:hover { opacity: 1; } .tl-block-label { font-size: 9px; color: #000; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } /* ─── Event list panel ─── */ .panel { background: var(--surface); border-left: 1px solid var(--border); border-right: 1px solid var(--border); overflow-y: auto; display: flex; flex-direction: column; } /* Search sits directly above the event list — primary discovery affordance. */ .panel-search { padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 5; } .panel-search .search-input { width: 100%; background: var(--surface2); border: 1px solid var(--border); color: var(--text); padding: 8px 12px; font-family: inherit; font-size: 13px; border-radius: 6px; outline: none; } .panel-search .search-input:focus { border-color: var(--accent); background: var(--bg); } .panel-header { padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 11px; color: var(--text2); } .event-list { flex: 1; overflow-y: auto; /* pan-y lets the list scroll vertically while denying the browser the option to hijack the gesture for pull-to-refresh / sheet drag. Without this, fast swipes in the list can leak into a sheet drag. */ touch-action: pan-y; -webkit-overflow-scrolling: touch; } .event-card { display: block; padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.15s; color: var(--text); text-decoration: none; } .event-card:hover { background: var(--surface2); } .event-card.active { background: var(--surface2); border-left: 3px solid var(--accent); } .ev-title { font-size: 12px; font-weight: 500; margin-bottom: 3px; line-height: 1.3; } .ev-title .star { color: var(--selected); font-size: 10px; } .ev-meta { font-size: 10px; color: var(--text2); } .ev-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; } .ev-tag { font-size: 9px; padding: 1px 5px; background: var(--surface); border: 1px solid var(--border); border-radius: 2px; color: var(--text2); } /* ─── Network-expansion grouping (Q.K3) ─── */ /* When a search surfaces events via the brand-network graph (not a direct * title/address substring match), group them under explicit section headers * and tint the cards so the user can tell which matches are related vs. * direct. Clicking the "via Apartamento" badge pivots the search to that * brand node so the user can traverse the graph manually. */ .ev-group-header { padding: 8px 12px 6px; font-size: 10px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: 0.06em; background: var(--surface); border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); } .ev-group-header-hop0 { color: var(--accent); } .ev-group-header-hop1 { color: #e59a4a; } .ev-group-header-hop2 { color: var(--text2); opacity: 0.8; } .event-card-network { opacity: 0.88; } .event-card-network-hop2 { opacity: 0.78; } .event-card-network::before { content: ''; display: inline-block; width: 3px; align-self: stretch; margin-right: 8px; background: #e59a4a; border-radius: 1px; float: left; height: 100%; } .event-card-network-hop2::before { background: var(--text2); } .ev-network-badge { display: inline-block; margin-top: 5px; font-size: 9px; padding: 1px 6px; background: rgba(229, 154, 74, 0.12); border: 1px solid rgba(229, 154, 74, 0.4); border-radius: 10px; color: #e59a4a; cursor: pointer; font-weight: 500; } .ev-network-badge:hover { background: rgba(229, 154, 74, 0.22); border-color: #e59a4a; } .ev-network-badge-hop2 { background: rgba(140, 140, 140, 0.1); border-color: rgba(140, 140, 140, 0.4); color: var(--text2); } /* ─── Event detail: network-relations hint + section ─── */ /* Hint: 1-line link under the action bar summarising "network reaches N events * via X / Y / Z". Clicking scrolls to the full section below. */ .det-network-hint-wrap { margin: 6px 0 12px; } .det-network-hint { display: inline-block; padding: 6px 10px; font-size: 11px; background: rgba(78, 205, 196, 0.08); border: 1px solid rgba(78, 205, 196, 0.32); border-radius: 4px; color: var(--accent); text-decoration: none; transition: background 0.15s; } .det-network-hint:hover { background: rgba(78, 205, 196, 0.16); text-decoration: none; } /* Full section — grouped related events, listed per "via" node. */ .det-network-section { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; } .det-network-section-title { font-size: 12px; font-weight: 600; margin-bottom: 10px; color: var(--text); } .det-network-group { margin-bottom: 14px; } .det-network-group:last-child { margin-bottom: 0; } .det-network-group-caption { font-size: 10px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } .det-network-row { padding: 8px 10px; border-left: 2px solid rgba(229, 154, 74, 0.5); background: var(--surface2); margin-bottom: 4px; border-radius: 2px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .det-network-row:hover { background: var(--surface); border-left-color: var(--accent); } .det-network-row-title { font-size: 12px; font-weight: 500; line-height: 1.3; } .det-network-row-meta { font-size: 10px; color: var(--text2); margin-top: 2px; } /* ─── Detail overlay ─── */ .detail-overlay { display: none; position: fixed; /* Covers ONLY the event-list area of .panel — leaves the search bar and list header visible above. 56px header + ~55px panel-search = 111px from top. */ top: 111px; bottom: 0; left: 320px; width: 380px; background: var(--surface); z-index: 1250; overflow-y: auto; } .detail-overlay.open { display: block; } .detail-overlay[hidden] { display: none !important; } /* C15/C16: backdrop behind detail overlay for click-to-close UX */ .detail-backdrop { display: none; position: fixed; inset: 0; z-index: 1249; /* directly below detail-overlay */ background: rgba(0, 0, 0, 0.4); cursor: pointer; } .detail-backdrop.open { display: block; } .detail-backdrop[hidden] { display: none !important; } .detail-close { position: absolute; top: 12px; right: 12px; background: var(--surface2); border: 1px solid var(--border); color: var(--text); width: 36px; height: 36px; font-size: 18px; cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: center; z-index: 3; } .detail-content { padding: 16px; } .detail-content h2 { font-size: 16px; font-weight: 600; margin-bottom: 12px; padding-right: 40px; line-height: 1.4; } .det-desc-wrap { margin-bottom: 16px; } .det-desc { font-size: 12px; line-height: 1.6; color: var(--text2); } .det-desc-clamped { display: -webkit-box; -webkit-line-clamp: 6; line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } .det-desc-toggle { display: inline-block; margin-top: 6px; padding: 0; background: none; border: none; color: var(--accent); font: inherit; font-size: 11px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .det-desc-toggle:hover { opacity: 0.75; } .det-row { display: flex; gap: 8px; font-size: 11px; margin-bottom: 6px; } .det-label { color: var(--text2); min-width: 70px; } .det-link { color: var(--accent); } /* Schedule table in detail */ .sched-table { width: 100%; font-size: 11px; border-collapse: collapse; margin-top: 12px; } .sched-table th { text-align: left; color: var(--text2); font-weight: normal; padding: 4px 6px; border-bottom: 1px solid var(--border); } .sched-table td { padding: 4px 6px; border-bottom: 1px solid var(--border); } .abadge { display: inline-block; padding: 1px 6px; border-radius: 2px; font-size: 10px; } .abadge-free { background: var(--free); color: var(--bg); } .abadge-prereg { background: var(--prereg); color: var(--bg); } .abadge-invite { background: var(--invite); color: var(--bg); } /* ─── Interest UI (in detail + sidebar) ─── */ .interest-bar { display: flex; gap: 4px; margin-bottom: 14px; } .int-btn { flex: 1; padding: 6px 0; font-family: inherit; font-size: 11px; background: var(--surface2); border: 1px solid var(--border); color: var(--text2); border-radius: 4px; cursor: pointer; text-align: center; transition: all 0.15s; display: inline-flex; align-items: center; justify-content: center; gap: 5px; } .int-btn svg { width: 13px; height: 13px; } .int-btn:hover { border-color: var(--text); color: var(--text); } .int-btn.active-like { background: #ff6b6b22; border-color: var(--c-like); color: var(--c-like); } .int-btn.active-bookmark { background: #ffd93d22; border-color: var(--c-bookmark); color: var(--c-bookmark); } .int-btn.active-planned { background: #4ecdc422; border-color: var(--c-planned); color: var(--c-planned); } .int-btn.active-visited { background: #a78bfa22; border-color: var(--c-visited); color: var(--c-visited); } /* Plan form */ .plan-form { display: none; background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; padding: 10px; margin-bottom: 14px; } .plan-form.open { display: block; } .plan-form label { font-size: 10px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 3px; margin-top: 8px; } .plan-form label:first-child { margin-top: 0; } .plan-form input[type="time"], .plan-form textarea { width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 5px 8px; font-family: inherit; font-size: 11px; border-radius: 3px; outline: none; } .plan-form textarea { height: 48px; resize: vertical; } /* Day-button grid — replaces the 7-day dropdown (faster tap target) */ .day-btn-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; border-radius: 3px; } .day-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 5px 2px; background: var(--bg); border: 1px solid var(--border); color: var(--text2); border-radius: 3px; cursor: pointer; font-family: inherit; transition: all 0.1s; line-height: 1; } .day-btn-d { font-size: 9px; letter-spacing: 0.3px; opacity: 0.75; } .day-btn-n { font-size: 13px; font-weight: 600; } .day-btn:hover { border-color: var(--text); color: var(--text); } .day-btn.active { background: var(--accent); color: var(--bg); border-color: var(--accent); } .day-btn.active .day-btn-d { opacity: 1; } .day-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* Compact variant inside map popup — same grid, smaller padding */ .popup-plan .day-btn { padding: 3px 1px; } .popup-plan .day-btn-d { font-size: 8px; } .popup-plan .day-btn-n { font-size: 11px; } .popup-plan .day-btn-grid { gap: 2px; margin-bottom: 4px; } .plan-form .plan-actions { display: flex; gap: 6px; margin-top: 10px; } .plan-form .plan-save { flex: 1; padding: 6px; background: var(--accent); color: var(--bg); border: none; border-radius: 3px; font-family: inherit; font-size: 11px; cursor: pointer; font-weight: 600; } .plan-form .plan-cancel { padding: 6px 12px; background: var(--surface); color: var(--text2); border: 1px solid var(--border); border-radius: 3px; font-family: inherit; font-size: 11px; cursor: pointer; } /* Rating stars */ .rating-stars { display: inline-flex; gap: 2px; } .rating-star { cursor: pointer; font-size: 14px; color: var(--border); transition: color 0.1s; } .rating-star.filled { color: var(--c-bookmark); } .rating-star:hover { color: var(--c-bookmark); } /* Interest indicator dot on event cards */ .ev-interest { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; } .ev-interest-like { background: var(--c-like); } .ev-interest-bookmark { background: var(--c-bookmark); } .ev-interest-planned { background: var(--c-planned); } .ev-interest-visited { background: var(--c-visited); } /* Editorial FEATURED pill — promoted events per web/curation.json */ .ev-featured { display: inline-block; font-size: 8.5px; font-weight: 700; letter-spacing: 0.08em; padding: 1px 5px; margin-right: 5px; border-radius: 2px; background: var(--accent); color: var(--bg); vertical-align: middle; text-transform: uppercase; } /* Header interest counts */ .header-interests { display: flex; gap: 10px; font-size: 11px; margin-left: auto; align-items: center; } .header-interests a { color: var(--text2); text-decoration: none; transition: color 0.15s; display: inline-flex; align-items: center; gap: 4px; line-height: 1; } .header-interests a:hover { color: var(--text); } .header-interests a svg { display: block; flex-shrink: 0; width: 14px; height: 14px; } .header-interests .hi-count { font-variant-numeric: tabular-nums; min-width: 0.8em; text-align: left; } .hi-like { color: var(--c-like) !important; } .hi-bookmark { color: var(--c-bookmark) !important; } .hi-planned { color: var(--c-planned) !important; } .hi-visited { color: var(--c-visited) !important; } /* Interest filter pills in sidebar */ .interest-pills { display: flex; flex-wrap: wrap; gap: 4px; } .interest-pill { padding: 3px 8px; font-size: 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 3px; cursor: pointer; } .interest-pill:hover { border-color: var(--text); } .interest-pill.active-like { background: #ff6b6b33; border-color: var(--c-like); color: var(--c-like); } .interest-pill.active-bookmark { background: #ffd93d33; border-color: var(--c-bookmark); color: var(--c-bookmark); } .interest-pill.active-planned { background: #4ecdc433; border-color: var(--c-planned); color: var(--c-planned); } .interest-pill.active-visited { background: #a78bfa33; border-color: var(--c-visited); color: var(--c-visited); } .planner-link { display: block; text-align: center; padding: 8px; margin-top: 8px; background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; color: var(--accent); text-decoration: none; font-size: 11px; } .planner-link:hover { border-color: var(--accent); } /* Pill counts: small parenthesized number after pill label */ .interest-pill .pill-count { display: inline-block; margin-left: 4px; padding: 0 5px; background: var(--pill-count-bg); border-radius: 8px; font-size: 9px; font-weight: 600; vertical-align: 1px; } .interest-pill.active-like .pill-count, .interest-pill.active-bookmark .pill-count, .interest-pill.active-planned .pill-count, .interest-pill.active-visited .pill-count { background: rgba(0,0,0,0.25); } /* My List inline preview — saved events grouped by interest type */ .my-list-preview { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; } .my-list-preview:empty { margin-top: 0; } .mlp-group { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; } .mlp-head { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 6px; } .mlp-item { padding: 6px 8px; margin: 0 -8px; border-radius: 4px; cursor: pointer; transition: background 0.12s; } .mlp-item:hover, .mlp-item:focus-visible { background: var(--surface); outline: none; } .mlp-title { font-size: 11px; color: var(--text); font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mlp-meta { font-size: 9px; color: var(--text2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mlp-more { display: block; margin-top: 4px; padding: 4px 8px; font-size: 10px; color: var(--accent); text-decoration: none; text-align: center; } .mlp-more:hover { text-decoration: underline; } /* Permanent map labels. Two visibility tiers: - Saved events (.mdw-marker-label-{like|bookmark|planned|visited}): always visible — user wants to spot their shortlist. - Discovery events (.mdw-marker-label-discovery): only visible when map has .zoom-deep class (zoom >= 17, clustering disabled). Below that threshold, 461 labels would overlap into noise. */ .mdw-marker-label.leaflet-tooltip { background: var(--overlay-bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-family: inherit; font-size: 10px; font-weight: 500; padding: 2px 6px; box-shadow: 0 2px 6px rgba(0,0,0,0.4); white-space: nowrap; cursor: pointer; pointer-events: auto !important; } .mdw-marker-label.leaflet-tooltip::before { display: none; } .mdw-marker-label-like { border-color: var(--c-like) !important; } .mdw-marker-label-bookmark { border-color: var(--c-bookmark) !important; } .mdw-marker-label-planned { border-color: var(--c-planned) !important; } .mdw-marker-label-visited { border-color: var(--c-visited) !important; } /* Discovery labels — visibility controlled per-element by JS collision detection (MDW.refreshLabelCollisions). Slightly muted so saved labels still visually dominate when both are shown. */ .mdw-marker-label-discovery { opacity: 0.88; background: var(--overlay-bg-soft); } /* Highlight ring when an event is selected via list/detail click — pulse draws the user's eye to which dot among many they just opened. */ .mdw-marker-highlight { animation: mdwPulse 1.4s ease-out 2; z-index: 1000 !important; } @keyframes mdwPulse { 0% { transform: scale(1); filter: drop-shadow(0 0 0 var(--accent)); } 50% { transform: scale(1.6); filter: drop-shadow(0 0 12px var(--accent)); } 100% { transform: scale(1); filter: drop-shadow(0 0 0 var(--accent)); } } /* ─── Leaflet overrides ─── */ .leaflet-popup-content-wrapper { background: var(--surface) !important; color: var(--text) !important; border-radius: 6px !important; border: 1px solid var(--border) !important; padding: 2px !important; } .leaflet-popup-tip { background: var(--surface) !important; } .leaflet-popup-content { font-family: inherit !important; font-size: 12px !important; margin: 10px 12px !important; min-width: 220px; } /* Compact event popup */ .popup-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; line-height: 1.3; cursor: pointer; } .popup-title:hover { color: var(--accent); } .popup-venue { font-size: 10px; color: var(--text2); margin-bottom: 8px; line-height: 1.3; } .popup-actions { display: flex; gap: 3px; margin-top: 6px; } .popup-btn { flex: 1; padding: 4px 0; font-family: inherit; font-size: 11px; background: var(--surface2); border: 1px solid var(--border); color: var(--text2); border-radius: 3px; cursor: pointer; text-align: center; transition: all 0.1s; display: inline-flex; align-items: center; justify-content: center; } .popup-btn svg { width: 13px; height: 13px; } .popup-btn:hover { border-color: var(--text); color: var(--text); } .popup-btn.active-like { background: #ff6b6b22; border-color: var(--c-like); color: var(--c-like); } .popup-btn.active-bookmark { background: #ffd93d22; border-color: var(--c-bookmark); color: var(--c-bookmark); } .popup-btn.active-planned { background: #4ecdc422; border-color: var(--c-planned); color: var(--c-planned); } .popup-btn.active-visited { background: #a78bfa22; border-color: var(--c-visited); color: var(--c-visited); } /* Inline plan form in popup */ .popup-plan { display: none; margin-top: 6px; padding: 8px; background: var(--surface2); border-radius: 3px; border: 1px solid var(--border); } .popup-plan.open { display: block; } .popup-plan-row { display: flex; gap: 4px; margin-bottom: 4px; } .popup-plan input[type="time"] { flex: 1; padding: 4px 6px; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 10px; border-radius: 2px; outline: none; } .popup-plan-save { width: 100%; padding: 4px; background: var(--accent); color: var(--bg); border: none; border-radius: 2px; font-family: inherit; font-size: 10px; font-weight: 600; cursor: pointer; margin-top: 4px; } .popup-sign-in { font-size: 10px; color: var(--text2); text-align: center; padding: 4px; } .popup-sign-in a { color: var(--accent); cursor: pointer; } /* ─── Scrollbar ─── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--surface); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } /* ─── Mobile UI additions ─── */ /* Hidden on desktop by default (grid children won't steal a slot) */ .mobile-nav { display: none; } .mobile-hamburger { display: none; } .mobile-sheet-handle { display: none; } .sidebar-backdrop { display: none; } /* iOS safe-area variables (notch / home indicator / dynamic island) */ :root { --sa-top: env(safe-area-inset-top, 0px); --sa-bottom: env(safe-area-inset-bottom, 0px); --sa-left: env(safe-area-inset-left, 0px); --sa-right: env(safe-area-inset-right, 0px); } @media (max-width: 768px) { /* M3: larger touch targets. Apple HIG 44px / Material 48px. Pills grow from 22-26px → ~36-40px height with generous tap padding. */ .day-pill, .access-pill, .interest-pill { padding: 9px 14px; font-size: 12px; border-radius: 6px; } .chip { padding: 8px 12px; font-size: 12px; border-radius: 6px; } .time-preset { padding: 9px 12px; font-size: 11px; } /* M15: prevent iOS zoom-on-focus. All form controls ≥16px font-size. */ .plan-form input[type="time"], .plan-form textarea, .popup-plan input[type="time"], .comment-form textarea, .comment-vis { font-size: 16px; } .app { grid-template-columns: 1fr; grid-template-rows: calc(48px + var(--sa-top)) 1fr calc(56px + var(--sa-bottom)); } .header { padding: var(--sa-top) calc(12px + var(--sa-right)) 0 calc(12px + var(--sa-left)); gap: 10px; } .header h1 { font-size: 14px; } .header .stats { display: none; } .brand-line { font-size: 10px; letter-spacing: 1px; } .brand-year { display: none; } .header-interests { gap: 6px; font-size: 10px; } .header-interests a:not(.auth-btn) { display: inline-block; min-width: 24px; text-align: center; } .header-interests a[style*="accent"] { display: none; } .mobile-hamburger { position: relative; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; color: var(--text); font-size: 16px; } .mobile-hamburger svg { width: 18px; height: 18px; } /* Active filter badge */ .filter-badge { position: absolute; top: -4px; right: -4px; min-width: 14px; height: 14px; padding: 0 3px; background: var(--accent); color: var(--bg); font-size: 9px; font-weight: 700; border-radius: 7px; display: flex; align-items: center; justify-content: center; line-height: 1; } .filter-badge:empty { display: none; } .sidebar { position: fixed; top: calc(48px + var(--sa-top)); left: 0; bottom: calc(56px + var(--sa-bottom)); width: calc(280px + var(--sa-left)); max-width: 85vw; padding-left: calc(12px + var(--sa-left)); z-index: 1500; transform: translateX(-100%); transition: transform 0.25s ease; box-shadow: 4px 0 20px rgba(0,0,0,0.5); border-right: 1px solid var(--border); } .sidebar.open { transform: translateX(0); } .sidebar-backdrop { display: none; position: fixed; /* M2: safe-area aware so no seam between header bottom and backdrop top */ inset: calc(48px + var(--sa-top)) 0 calc(56px + var(--sa-bottom)) 0; background: rgba(0,0,0,0.5); z-index: 1400; } .sidebar.open ~ .sidebar-backdrop { display: block; } .map-container { grid-row: 2; grid-column: 1; } /* Panel = bottom sheet with 3 snap points. Sized by top+bottom (not fixed height) so it never overshoots above the header or into the nav. Previously used height:85dvh which made snap-full push the panel behind the header (z:0 < panel z:1200), so the header appeared to be "pushed up" past the viewport. */ .panel { position: fixed; /* Panel fits between header bottom and nav top — transform-based snap states move it within this box instead of over it. */ top: calc(48px + var(--sa-top)); bottom: calc(56px + var(--sa-bottom)); left: 0; right: 0; height: auto; z-index: 1200; border-left: none; border-top: 1px solid var(--border); transform: translateY(calc(100% - 80px)); /* peek shows handle + search */ transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); border-top-left-radius: 12px; border-top-right-radius: 12px; will-change: transform; touch-action: pan-x; } .panel.snap-peek { transform: translateY(calc(100% - 80px)); } .panel.snap-half { transform: translateY(50%); } .panel.snap-full { transform: translateY(0); } /* Mobile panel-search styling — thumb-friendly, iOS-safe font-size */ .panel-search { padding: 8px 12px; } .panel-search .search-input { padding: 10px 14px; font-size: 16px; /* iOS needs >=16 to prevent zoom-on-focus */ } /* During drag, disable transition */ .panel.dragging { transition: none !important; } /* Internal list scrolls within the panel. Panel is now sized by top + bottom so max-height doesn't need an absolute cap — just fill the remaining space after handle + search + header. */ .panel .event-list { overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; flex: 1 1 auto; min-height: 0; } .mobile-sheet-handle { display: flex; align-items: center; justify-content: center; height: 24px; cursor: pointer; flex-shrink: 0; } .mobile-sheet-handle::before { content: ''; width: 40px; height: 3px; background: var(--border); border-radius: 2px; } .mobile-nav { display: flex; grid-row: 3; grid-column: 1; background: var(--surface); border-top: 1px solid var(--border); z-index: 1300; padding-bottom: var(--sa-bottom); padding-left: var(--sa-left); padding-right: var(--sa-right); } .mobile-nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: none; color: var(--text2); font-family: inherit; font-size: 10px; cursor: pointer; padding: 6px 0; } .mobile-nav-btn.active { color: var(--accent); } .mobile-nav-btn .icon { font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .mobile-nav-btn .icon svg { width: 18px; height: 18px; } .detail-overlay { width: 100%; max-width: 100%; left: 0; top: 0; bottom: calc(56px + var(--sa-bottom)); height: auto; padding-top: var(--sa-top); border-right: none; box-shadow: none; } /* M1: close button must clear the notch AND stay visible while user scrolls the overlay. Fixed (not absolute) so it doesn't scroll away with the content. Overlay is full-width on mobile so fixed is safe. */ .detail-close { position: fixed; top: calc(12px + var(--sa-top)); right: 12px; width: 44px; height: 44px; } .day-legend { top: 50px; right: 6px; padding: 6px 10px; } .timeline-strip { /* Clear the mobile-nav (56) + home indicator (sa_bottom) */ bottom: calc(56px + var(--sa-bottom)); padding: 8px 10px 10px; } .leaflet-bottom.leaflet-right { /* Zoom control: above nav + home indicator (+ 10px breathing room) */ bottom: calc(66px + var(--sa-bottom)) !important; } /* M-footer: belt-and-suspenders — make absolutely sure the nav fills the bottom safe-area region. iOS PWA sometimes shows a hairline gap below the nav's padding if background isn't on a fully-expanded box. */ .mobile-nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--sa-bottom); background: var(--surface); pointer-events: none; } .mobile-nav { position: relative; } } @media (max-width: 360px) { .header h1 { font-size: 12px; } .header-interests { font-size: 9px; gap: 4px; } .sidebar { width: 90vw; } .brand-line { font-size: 9px; letter-spacing: 0.8px; } } /* ─── Responsive (desktop scales) ─── */ @media (min-width: 769px) and (max-width: 1100px) { .app { grid-template-columns: 260px 300px 1fr; } } /* ─── Near (address search) ─── */ .near-results { background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; max-height: 150px; overflow-y: auto; margin-top: 4px; display: none; } .near-results.active { display: block; } .near-result-item { padding: 6px 10px; font-size: 11px; color: var(--text); cursor: pointer; border-bottom: 1px solid var(--border); line-height: 1.3; } .near-result-item:hover { background: var(--surface); color: var(--accent); } .near-result-item:last-child { border-bottom: none; } .near-controls { background: var(--surface2); border: 1px solid var(--accent); border-radius: 4px; padding: 8px; margin-top: 6px; font-size: 11px; } .near-active { color: var(--accent); font-weight: 600; margin-bottom: 6px; word-break: break-word; } .near-radius-row { color: var(--text2); font-size: 10px; margin: 4px 0 2px; } .near-radius-label #near-radius-val { color: var(--accent); font-weight: 600; } .near-controls input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: var(--surface2); border-radius: 2px; accent-color: var(--accent); outline: none; } .near-controls input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); cursor: pointer; } .near-controls input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); cursor: pointer; } @media (pointer: coarse) { .near-controls input[type="range"]::-webkit-slider-thumb, .near-controls input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; } } .near-clear { margin-top: 8px; padding: 4px 10px; font-size: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--text2); border-radius: 3px; cursor: pointer; font-family: inherit; } .near-clear:hover { color: var(--c-like); border-color: var(--c-like); } .near-me-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 6px; font-size: 11px; background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-radius: 4px; cursor: pointer; font-family: inherit; margin-top: 6px; } .near-me-btn:hover { border-color: var(--accent); } .near-me-btn .btn-icon, .near-me-btn svg { display: inline-flex; } .near-me-btn svg { width: 13px; height: 13px; } /* ─── Comments ─── */ .comment-form { background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; padding: 10px; margin-bottom: 10px; } .comment-form textarea { width: 100%; min-height: 60px; background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 8px; font-family: inherit; font-size: 12px; border-radius: 3px; resize: vertical; outline: none; } .comment-form textarea:focus { border-color: var(--accent); } .comment-star { cursor: pointer; color: var(--border); font-size: 16px; user-select: none; } .comment-star.filled { color: var(--c-bookmark); } .comment-vis { width: 100%; padding: 5px; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 11px; border-radius: 3px; margin-bottom: 6px; } .comment-submit { width: 100%; padding: 6px; background: var(--accent); color: var(--bg); border: none; border-radius: 3px; font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; } .comment-submit:disabled { opacity: 0.5; cursor: not-allowed; } .comment-row { background: var(--surface2); border-left: 2px solid var(--accent); padding: 8px 10px; margin-bottom: 6px; border-radius: 3px; position: relative; } .comment-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 11px; } .comment-name { font-weight: 600; color: var(--text); } .comment-rating { color: var(--c-bookmark); font-size: 10px; } .comment-time { color: var(--text2); font-size: 10px; margin-left: auto; } .comment-body { font-size: 12px; color: var(--text); line-height: 1.4; white-space: pre-wrap; } .comment-delete { position: absolute; top: 6px; right: 8px; background: none; border: none; color: var(--text2); font-size: 9px; cursor: pointer; font-family: inherit; } .comment-delete:hover { color: var(--c-like); } /* Phase 3b: comment reaction bar */ .reaction-btn { display: inline-flex; align-items: center; gap: 3px; background: var(--surface); border: 1px solid var(--border); color: var(--text2); padding: 2px 8px; border-radius: 10px; font-family: inherit; font-size: 11px; cursor: pointer; transition: all 0.12s; line-height: 1.3; } .reaction-btn svg { width: 12px; height: 12px; } .reaction-btn:hover { border-color: var(--accent); color: var(--text); } .reaction-btn.mine { background: color-mix(in srgb, var(--accent) 15%, var(--surface)); border-color: var(--accent); color: var(--accent); } .reaction-btn:disabled { opacity: 0.5; cursor: wait; }