:root { /* Fun, bright, fresh water-inspired professional palette (light defaults) */ --bg-primary: #F0F9FF; /* Light fresh blue */ --bg-surface: #FFFFFF; --bg-surface-2: #E0F2FE; /* Soft blue tint */ --text-primary: #0F172A; --text-secondary: #475569; --accent: #0EA5E9; /* Bright sky blue */ --accent-warm: #F59E0B; /* Sunny amber for fun/energy */ --border: #BAE6FD; --border-strong: #7DD3FC; --accent-bg: #E0F2FE; --accent-border: #7DD3FC; --accent-text: #0369A1; --accent-strong: #0284C7; --icon-secondary: #64748B; --warm-bg: #FEF3C7; --warm-border: #FCD34D; --warm-text: #92400E; --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.08); --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); } /* Night mode: dark theme CSS custom properties. Activated by .dark class on . */ .dark { --bg-primary: #0F172A; /* Deep slate */ --bg-surface: #1E293B; /* Card / surface */ --bg-surface-2: #334155; /* Subtle tint */ --text-primary: #F1F5F9; --text-secondary: #94A3B8; --accent: #67E8F9; /* Neon cyan for dark (vibrant on dark tiles) */ --accent-warm: #F59E0B; --border: #475569; --border-strong: #475569; --accent-bg: #1e3a5f; --accent-border: #155e75; --accent-text: #67E8F9; --accent-strong: #67E8F9; --icon-secondary: #CBD5E1; --warm-bg: #451a03; --warm-border: #92400e; --warm-text: #fed7aa; --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5); } html, body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: var(--bg-primary); color: var(--text-primary); -webkit-font-smoothing: antialiased; touch-action: manipulation; } /* Night mode: smooth color/border transitions on theme switch (respects reduced-motion) */ .btn, .card, .modal-panel, .tag, .badge, .spot-card, .weather-card, .modal-content, .toast, header, #map, .leaflet-control-zoom a, .marker-glow { transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), border-color 300ms cubic-bezier(0.4, 0, 0.2, 1), color 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1); } .focus-ring:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2); } .btn, .card, .modal-panel, .tag, .badge { transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast), opacity var(--transition-fast); } @media (prefers-reduced-motion: reduce) { .radar-logo *, .sweep, .pulse-ring, .btn, .card, .modal-panel, .tag, .badge { animation: none !important; transition: none !important; transform: none !important; } } /* Radar logo - clean professional */ .radar-logo { filter: drop-shadow(0 0 4px rgba(2, 132, 199, 0.2)); } /* Map container - fun and bright */ #map { width: 100%; height: min(520px, 62vh); border-radius: 16px; border: 1px solid var(--bg-surface-2); box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.05); overflow: hidden; background: var(--bg-surface); } .leaflet-container { background: var(--bg-surface) !important; font-family: inherit; } .leaflet-control-zoom { border: 1px solid var(--border) !important; box-shadow: var(--shadow) !important; border-radius: 8px !important; overflow: hidden; } .leaflet-control-zoom a { background-color: var(--bg-surface) !important; color: var(--accent) !important; border: none !important; font-weight: 600; width: 34px; height: 34px; line-height: 32px; font-size: 16px; } .leaflet-control-zoom a:hover { background-color: #F1F5F9 !important; color: var(--accent-text) !important; } .leaflet-control-attribution { background: rgba(255,255,255,0.8) !important; color: #64748B !important; font-size: 10px !important; padding: 2px 6px !important; border-radius: 4px; border: 1px solid var(--border); } .leaflet-control-attribution a { color: var(--accent) !important; text-decoration: none; } /* Clean professional map markers (48px tap targets) */ .neon-marker { background: transparent !important; border: none !important; } .marker-glow { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: var(--bg-surface); border: 3px solid var(--neon-color); border-radius: 9999px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transition: transform 0.15s ease, box-shadow 0.15s ease; } .marker-glow:hover, .neon-marker:hover .marker-glow { transform: scale(1.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .marker-inner { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; color: var(--neon-color); } /* Subtle highlight for Near Me (no heavy glow) */ .neon-halo { background: transparent !important; border: none !important; pointer-events: none !important; } .halo-inner { width: 56px; height: 56px; border-radius: 9999px; border: 2px solid var(--accent); box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15); opacity: 0.7; } /* User "You are here" indicator — clean blue dot with subtle pulse + accuracy circle */ .user-location-marker { background: transparent !important; border: none !important; } .user-location-dot { width: 15px; height: 15px; background: #0EA5E9; border: 2.5px solid #ffffff; border-radius: 50%; box-shadow: 0 0 0 5px rgba(14, 165, 233, 0.22), 0 2px 8px rgba(0, 0, 0, 0.25); position: relative; z-index: 1000; } .user-location-dot::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid #0EA5E9; opacity: 0.35; animation: user-location-pulse 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes user-location-pulse { 0% { transform: scale(1); opacity: 0.35; } 70% { transform: scale(2.4); opacity: 0; } 100% { transform: scale(2.4); opacity: 0; } } .legend { display: flex; gap: 16px; margin: -4px 0 12px; flex-wrap: wrap; } .legend-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); } .legend-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; } .legend-icon svg { width: 16px; height: 16px; display: block; } /* Spot cards - fun and friendly */ #spots-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 12px 0 32px; } @media (min-width: 480px) { #spots-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } } .spot-card { background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: 16px; padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; min-height: 148px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } .spot-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); } .spot-card.near-highlight { border-color: var(--accent-strong); box-shadow: 0 0 0 8px rgba(14, 165, 233, 0.32); background-color: var(--bg-primary); } .spot-card .badge { align-self: flex-start; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 9999px; letter-spacing: 0.5px; text-transform: uppercase; background: var(--warm-bg); color: #B45309; border: 1px solid var(--warm-border); } .spot-card h4 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--accent); } .spot-card .meta { font-size: 12px; color: #64748B; margin: 0; } .spot-card .species { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; } .species-pill { font-size: 10px; padding: 2px 7px; border-radius: 999px; background: var(--accent-bg); border: 1px solid var(--accent-border); color: var(--accent-text); white-space: nowrap; } .spot-card .dist { font-size: 11px; font-weight: 700; color: var(--accent); margin-top: 4px; } /* Toast */ .toast { position: fixed; bottom: 20px; left: 50%; transform: translate(-50%, 20px); max-width: calc(100% - 32px); width: 420px; background: var(--bg-surface); border: 1px solid var(--border-strong); color: var(--text-primary); padding: 14px 18px; border-radius: 12px; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); z-index: 9999; display: flex; align-items: center; gap: 12px; opacity: 0; pointer-events: none; transition: all 0.25s cubic-bezier(0.23,1,0.32,1); } .toast.visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .toast .msg { flex: 1; font-size: 14px; } .toast .actions { display: flex; gap: 8px; flex-shrink: 0; } .toast button { font-size: 12px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--accent); background: transparent; color: var(--accent); cursor: pointer; min-height: 32px; } .toast button:hover { background: var(--accent-bg); } /* Modal - fun and friendly (supports light + night mode via .dark) */ .modal { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.35); backdrop-filter: blur(6px); display: none; align-items: flex-end; justify-content: center; z-index: 10000; padding: env(safe-area-inset-top) 0 0 0; } .modal.visible { display: flex; } .modal-content { background: var(--bg-surface); width: 100%; max-width: 520px; max-height: 92vh; border-radius: 20px 20px 0 0; border: 1px solid var(--border-strong); box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); overflow: hidden; display: flex; flex-direction: column; position: relative; } @media (min-width: 640px) { .modal { align-items: center; padding: 20px; } .modal-content { border-radius: 20px; max-height: 86vh; } } .modal-header { padding: 18px 20px 12px; border-bottom: 1px solid var(--bg-surface-2); display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; z-index: 1; } @media (max-width: 639px) { .modal-header { padding-top: 30px; } } .modal-header .badge { font-size: 11px; padding: 4px 11px; border-radius: 999px; font-weight: 700; letter-spacing: 0.6px; } .modal-header .badge.pier { background: #DBEAFE; color: var(--accent-text); border: 1px solid var(--accent-border); } .modal-header .badge.shore { background: #CCFBF1; color: #0F766E; border: 1px solid #5EEAD4; } .modal-header h2 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); } .modal-close { background: none; border: none; color: var(--text-secondary); font-size: 28px; line-height: 1; cursor: pointer; padding: 0 4px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 999px; } .modal-close:hover { color: var(--accent); background: var(--bg-primary); } .modal-body { padding: 18px 20px 20px; overflow-y: auto; flex: 1; position: relative; z-index: 1; } .field { display: grid; grid-template-columns: 86px 1fr; gap: 4px 12px; margin-bottom: 9px; font-size: 14px; } .field-label { color: var(--text-secondary); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; } .field-value { color: var(--text-primary); } .address-row { display: flex; align-items: center; gap: 8px; } .copy-btn { width: 32px; height: 32px; min-width: 32px; min-height: 32px; background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-secondary); font-size: 13px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: all 0.1s ease; } .copy-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); } .species-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; } #modal-species .species-pill { font-size: 12px; padding: 4px 10px; background: var(--accent-bg); border: 1px solid var(--accent-border); color: var(--accent-text); white-space: nowrap; } .modal-description { font-size: 14.5px; line-height: 1.55; color: var(--text-primary); margin: 8px 0 14px; } .modal-tip { font-size: 12.5px; padding: 8px 12px; border-radius: 10px; background: var(--warm-bg); border: 1px solid var(--warm-border); color: var(--warm-text); margin-bottom: 14px; } .modal-actions { display: grid; grid-template-columns: 1fr; gap: 10px; padding-top: 12px; border-top: 1px solid var(--bg-surface-2); position: relative; z-index: 1; } @media (min-width: 360px) { .modal-actions { grid-template-columns: 1fr 1fr; } } .modal-actions .modal-btn { min-height: 54px; padding: 14px 20px; font-size: 15px; font-weight: 700; border-radius: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; border: 2px solid #0EA5E9; background: #0EA5E9; color: white; transition: all 0.15s cubic-bezier(0.23, 1, 0.32, 1); box-shadow: 0 4px 6px -1px rgb(14 165 233 / 0.3); } .modal-actions .modal-btn:hover { background: #0284C7; transform: translateY(-1px); box-shadow: 0 10px 15px -3px rgb(14 165 233 / 0.4); } .modal-actions .modal-btn:active { transform: scale(0.985); } .modal-actions .modal-btn .btn-icon { width: 20px; height: 20px; flex-shrink: 0; transition: transform 0.15s ease; } .modal-close-text { grid-column: 1 / -1; background: none; border: none; color: var(--text-secondary); font-size: 13px; padding: 6px 4px 2px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; opacity: 0.75; font-weight: 500; justify-self: center; min-height: 32px; } .modal-close-text:hover { color: var(--text-primary); opacity: 1; } /* ======================================== Weather section: hourly (current + 4) Matches spot-card styling (light + night mode supported) 5 cards always fill the full available width (grid-cols-5 + bleed margins) ======================================== */ .weather-cards { /* grid always fills the full available width */ } .weather-card { background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: 12px; padding: 7px 5px; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; min-height: 86px; transition: border-color 0.1s ease, transform 0.1s ease; } .weather-card:hover { border-color: var(--accent); transform: translateY(-1px); } .weather-card.loading { opacity: 0.55; pointer-events: none; } @media (min-width: 480px) { .weather-card { padding: 8px 6px; } } .weather-error { width: 100%; border: 1px solid var(--border-strong); background: var(--bg-surface); border-radius: 12px; padding: 8px 10px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11px; color: #64748B; } .weather-error { grid-column: 1 / -1; } /* spans full row when weather-cards is grid */ /* ======================================== NIGHT MODE (DARK THEME) OVERRIDES All added rules are .dark prefixed for clean separation. Light theme remains 100% unchanged when .dark is absent. Uses the .dark CSS vars defined above for consistency. ======================================== */ /* Map + leaflet in dark */ .dark .leaflet-control-zoom a:hover { background-color: var(--bg-surface-2) !important; color: #a5f3fc !important; } .dark .leaflet-control-attribution { background: rgba(30, 41, 59, 0.85) !important; color: #64748b !important; border-color: var(--border) !important; } /* Markers pop better on dark tiles */ .dark .marker-glow { background: var(--bg-surface); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); } .dark .marker-glow:hover, .dark .neon-marker:hover .marker-glow { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.65); } /* Spot cards */ .dark .spot-card { background: var(--bg-surface); border-color: var(--border); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3); } .dark .spot-card:hover { border-color: var(--accent); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.35); } .dark .spot-card.near-highlight { border-color: #0EA5E9; box-shadow: 0 0 0 8px rgba(103, 232, 249, 0.25); background-color: #0f172a; } .dark .spot-card .badge { background: #334155; color: #e0f2fe; border-color: #475569; } /* Modal (dark surface, high contrast) */ .dark .modal { background: rgba(0, 0, 0, 0.7); } .dark .modal-close:hover { color: var(--accent); background: #1e293b; } /* Modal badges (pier/shore) */ .dark .modal-header .badge.pier { background: #1e3a8c; color: #bae6fd; border-color: #67e8f9; } .dark .modal-header .badge.shore { background: #134e4a; color: #99f6e4; border-color: #5eead4; } /* Weather cards */ .dark .weather-error { background: var(--bg-surface); border-color: var(--border); color: #94a3b8; } /* Subtle separation for weather section - very light tint + slight padding, minimal */ #weather-section { background-color: var(--bg-primary); padding-top: 4px; padding-bottom: 4px; } .dark #weather-section { background-color: #1e293b; } /* Legend text already uses var(--text-secondary) so inherits .dark */ /* Header, footer, intro, etc. use dark: Tailwind variants in markup */