/* FloodSpots shared design system — light/dark themable via [data-theme] on . "Soft dashboard": a lavender-white surface, a warm coral brand colour, big soft-rounded shapes, and diffused floating shadows standing in for hard borders — closer to a consumer app than a corporate tool, which is also the fastest way to read as unlike GAB FloodSense (green/gold, sharp corners, flat corporate cards, no dark mode). */ :root{ --bg:#eef0f7; --bg-soft:#e6e9f4; --panel:#ffffff; --panel-2:#f7f8fc; --text:#15161f; --muted:#84879a; --line:#eaecf4; --accent:#ef5a3c; --accent-strong:#d94526; --accent-soft:rgba(239,90,60,.13); --accent-contrast:#ffffff; --water:#3a7bd5; --water-minor:#6fa3e0; --sev-confirmed:#e11d48; --sev-chronic:#f59e0b; --sev-emerging:#7c5cfc; --ok:#16a34a; --err:#e11d48; --cat-demolition:#a8326e; --shadow:0 22px 44px -12px rgba(30,25,60,.16); --shadow-soft:0 10px 26px -10px rgba(30,25,60,.10); --shadow-btn:0 12px 26px -6px rgba(239,90,60,.40); --radius:22px; --radius-sm:14px; --content-max:1770px; --font-display:'Montserrat',sans-serif; --font-body:'Montserrat',system-ui,sans-serif; --font-mono:'IBM Plex Mono','SF Mono',ui-monospace,monospace; /* Glassmorphism recipe used on the nav and floating map chrome: a translucent panel + backdrop-blur (set per component) + this 1px light edge, which is what sells "frosted glass" rather than just "semi-transparent grey". */ --glass-border:rgba(255,255,255,.55); color-scheme:light; } [data-theme="dark"]{ --bg:#131320; --bg-soft:#191929; --panel:#1e1e30; --panel-2:#25253a; --text:#f0eff8; --muted:#9a9ab0; --line:#31314a; --accent:#ff7a57; --accent-strong:#ff9679; --accent-soft:rgba(255,122,87,.18); --accent-contrast:#1a1610; --water:#5b9ce8; --water-minor:#4779ad; --sev-confirmed:#fb7185; --sev-chronic:#fbbf24; --sev-emerging:#a78bfa; --ok:#4ade80; --err:#fb7185; --cat-demolition:#e772ac; --shadow:0 22px 48px rgba(0,0,0,.5); --shadow-soft:0 10px 26px rgba(0,0,0,.4); --shadow-btn:0 12px 26px rgba(255,122,87,.30); --glass-border:rgba(255,255,255,.10); color-scheme:dark; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0;padding:0;background:var(--bg);color:var(--text); font-family:var(--font-body);font-size:15px;line-height:1.6; transition:background .25s ease,color .25s ease; } h1,h2,h3,h4{font-family:var(--font-display);line-height:1.2;margin:0;} a{color:var(--accent);text-decoration:none;} a:hover{text-decoration:underline;} img{max-width:100%;} ::selection{background:var(--accent-soft);} /* Opt-in monospace, for the odd spot (a coordinate, a raw timestamp) where looking like data helps. Not the house style — that's the bold display face. */ .mono{ font-family:var(--font-mono); font-feature-settings:"tnum" 1; } /* ---------- Nav ---------- */ /* Floating glass pill instead of an edge-to-edge bar: inset with margin on every side, strongly rounded, frosted. Reads as one component sitting *on* the page rather than a strip the page is clipped into — the cue both reference layouts share, and it works identically whether what's under it is the hero gradient or a plain page background. */ .nav{ position:sticky;top:14px;z-index:2000;margin:14px 18px 0; display:grid;grid-template-columns:1fr auto 1fr;column-gap:18px;align-items:center; padding:12px 22px;background:color-mix(in srgb, var(--panel) 78%, transparent); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border:1px solid var(--glass-border);border-radius:999px;box-shadow:var(--shadow-soft); } .brand{display:flex;align-items:center;gap:10px;font-family:'Montserrat',sans-serif;font-weight:700;font-size:17px;color:var(--text);justify-self:start;} .brand:hover{text-decoration:none;} /* An uploaded logo image (admin override) is sized by height, never cropped. */ .wordmark{height:34px;width:auto;max-width:210px;object-fit:contain;display:block;flex-shrink:0;} [data-theme="dark"] .wordmark{filter:invert(1);} /* The text wordmark: "Flood" solid + "Spots" light italic, over a reversed "by GHANA GROUND UP" bar — the artwork rebuilt as type, so it stays sharp at any size and follows the theme's colours instead of being inverted. */ .wordmark-text{display:inline-flex;flex-direction:column;align-items:stretch;gap:2px;flex-shrink:0;line-height:1;} .wordmark-text .wm-name{ font-family:'Montserrat',sans-serif;font-weight:800;font-size:21px;letter-spacing:-.02em; color:var(--text);line-height:1;white-space:nowrap; } .wordmark-text .wm-name em{font-weight:400;font-style:italic;letter-spacing:0;} .wordmark-text .wm-sub{ background:var(--text);color:var(--bg); font-family:'Montserrat',sans-serif;font-weight:600;font-size:7.5px;letter-spacing:.18em; text-transform:uppercase;text-align:center;padding:3px 4px 2.5px;white-space:nowrap; } .brand-sub{font-family:'Montserrat',sans-serif;font-weight:500;font-size:10.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;padding-left:10px;margin-left:2px;border-left:1px solid var(--line);align-self:center;} .nav-collapse{display:contents;} .nav-menu{justify-self:center;} .nav-actions{justify-self:end;} .nav-links{display:flex;gap:4px;align-items:center;} /* Hamburger toggle — hidden on desktop, shown under the mobile breakpoint. */ .nav-hamburger{ display:none;width:38px;height:38px;border:none;background:transparent;cursor:pointer; flex-direction:column;justify-content:center;align-items:center;gap:5px;flex-shrink:0; } .nav-hamburger span{display:block;width:22px;height:2px;border-radius:2px;background:var(--text);transition:transform .2s ease,opacity .2s ease;} .nav-hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);} .nav-hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;} .nav-hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* The menu as its own translucent pill, nested inside the nav bar rather than just a row of links — the cue pulled from the reference navs, where the centre link group is a distinct capsule and the logo/buttons sit free of it. */ .nav-menu{justify-self:center;} .nav-links a{color:var(--text);font-size:13.5px;font-weight:600;padding:8px 14px;border-radius:999px;} .nav-links a:hover{color:var(--accent);background:var(--bg-soft);text-decoration:none;} /* .nav-links a outranks .btn-* — without these overrides the signup button's text renders muted-on-accent (near invisible in light mode). */ .nav-links a.btn-primary{color:var(--accent-contrast);background:var(--accent);font-weight:600;} .nav-links a.btn-primary:hover{color:var(--accent-contrast);background:var(--accent-strong);} .nav-links a.btn-ghost{color:var(--text);background:transparent;} .nav-links a.btn-ghost:hover{color:var(--accent);background:transparent;border-color:var(--accent);} .nav-ext .ext-arrow{font-size:10px;margin-left:3px;opacity:.7;} .nav-user{font-size:13px;color:var(--muted);padding:0 6px;white-space:nowrap;} .nav-user b{color:var(--text);} .nav-msg-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--sev-confirmed);color:#fff;font-size:10px;font-weight:700;margin-left:-4px;} .nav-links a.active-tab{color:var(--accent);background:var(--accent-soft);} @media (max-width:900px){ /* A true pill doesn't suit a nav that's about to stack a hamburger menu under it — soften to the standard card radius, and let the flyout below pick up matching bottom corners so it reads as one glass object, not two. */ .nav{grid-template-columns:1fr auto;position:relative;padding:10px 16px;border-radius:var(--radius);} .nav-hamburger{display:flex;} .nav-collapse{ display:none;position:absolute;top:100%;left:0;right:0;margin-top:8px; background:color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border:1px solid var(--glass-border);border-radius:var(--radius);box-shadow:var(--shadow); flex-direction:column;align-items:stretch;gap:14px;padding:14px 18px 20px; max-height:calc(100vh - 60px);overflow-y:auto; } .nav-collapse.open{display:flex;} .nav-menu,.nav-actions{flex-direction:column;align-items:stretch;justify-self:auto;gap:2px;} .nav-menu a,.nav-actions a{width:100%;padding:11px 12px;} .nav-actions{border-top:1px solid var(--line);padding-top:12px;} .nav-actions .theme-toggle{align-self:flex-start;} .nav-user{padding:6px 12px;} } /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer; font-family:'Montserrat',sans-serif;font-weight:700;font-size:16.2px; padding:10.8px 22px;border-radius:999px;transition:all .15s ease;text-decoration:none; } .btn:hover{text-decoration:none;} .btn-primary{background:var(--accent);color:var(--accent-contrast);box-shadow:var(--shadow-btn);} .btn-primary:hover{background:var(--accent-strong);box-shadow:var(--shadow-btn);transform:translateY(-1px);} .btn-primary:active{transform:translateY(0);} .btn-ghost{background:transparent;color:var(--text);border:1.5px solid var(--line);font-weight:600;} .btn-ghost:hover{border-color:var(--accent);color:var(--accent);} .btn-danger{background:transparent;color:var(--err);border:1.5px solid var(--err);font-weight:600;} .btn-danger:hover{background:var(--err);color:#fff;} .btn-sm{padding:7.2px 15px;font-size:15px;border-radius:999px;} /* Theme toggle */ /* Labelled, not just an icon: the label names the mode you get by pressing it. */ .theme-toggle{ background:var(--panel);border:none;color:var(--text);cursor:pointer; height:43.2px;padding:0 16px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center; transition:all .15s ease;flex-shrink:0;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:600;white-space:nowrap; box-shadow:var(--shadow-soft); } .theme-toggle:hover{color:var(--accent);} .theme-toggle .tt-state{display:inline-flex;align-items:center;gap:7px;} .theme-toggle .tt-icon{font-size:15px;line-height:1;} /* Only the state you can switch *to* is shown. */ .theme-toggle .tt-to-light{display:none;} [data-theme="dark"] .theme-toggle .tt-to-dark{display:none;} [data-theme="dark"] .theme-toggle .tt-to-light{display:inline-flex;} /* ---------- Badges / chips ---------- */ .badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 10px;border-radius:999px;} .badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor;} .badge-confirmed{color:var(--sev-confirmed);background:color-mix(in srgb, var(--sev-confirmed) 20%, transparent);} .badge-chronic{color:var(--sev-chronic);background:color-mix(in srgb, var(--sev-chronic) 22%, transparent);} .badge-emerging{color:var(--sev-emerging);background:color-mix(in srgb, var(--sev-emerging) 20%, transparent);} .badge-pending{color:var(--sev-chronic);background:color-mix(in srgb, var(--sev-chronic) 22%, transparent);} .badge-approved{color:var(--ok);background:color-mix(in srgb, var(--ok) 20%, transparent);} .badge-rejected{color:var(--err);background:color-mix(in srgb, var(--err) 20%, transparent);} /* news category badges */ .badge-recovery{color:var(--ok);background:color-mix(in srgb, var(--ok) 20%, transparent);} .badge-cleanup{color:var(--accent);background:var(--accent-soft);} .badge-destruction{color:var(--sev-confirmed);background:color-mix(in srgb, var(--sev-confirmed) 20%, transparent);} .badge-relief{color:var(--sev-chronic);background:color-mix(in srgb, var(--sev-chronic) 22%, transparent);} .badge-rebuilding{color:var(--sev-emerging);background:color-mix(in srgb, var(--sev-emerging) 20%, transparent);} .badge-waterways{color:var(--water);background:color-mix(in srgb, var(--water) 20%, transparent);} .badge-demolition{color:var(--cat-demolition);background:color-mix(in srgb, var(--cat-demolition) 20%, transparent);} .badge-other{color:var(--muted);background:color-mix(in srgb, var(--muted) 16%, transparent);} .chip{ font-size:12px;font-weight:600;padding:8px 15px;border:none;border-radius:999px; background:var(--panel);color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:7px; transition:all .15s ease;box-shadow:var(--shadow-soft); } .chip .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;} .chip[data-tier="confirmed"] .dot{background:var(--sev-confirmed);} .chip[data-tier="chronic"] .dot{background:var(--sev-chronic);} .chip[data-tier="emerging"] .dot{background:var(--sev-emerging);} .chip.active{color:var(--accent);background:var(--accent-soft);box-shadow:none;} .chip:not(.active){opacity:.55;} /* ---------- Cards / panels ---------- */ .card{background:var(--panel);border:none;border-radius:var(--radius);box-shadow:var(--shadow-soft);} .section{max-width:var(--content-max);margin:0 auto;padding:64px 26px;} .section-title{font-size:26px;margin-bottom:8px;} .section-sub{color:var(--muted);font-size:14.5px;max-width:640px;margin-bottom:30px;} .eyebrow{color:var(--accent);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px;} /* ---------- Forms ---------- */ label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:13px 0 5px;} input[type=text],input[type=email],input[type=password],input[type=date],select,textarea{ width:100%;background:var(--panel-2);border:1.5px solid var(--line);color:var(--text); font-family:'Montserrat',sans-serif;font-size:14px;padding:10px 12px;border-radius:var(--radius-sm);outline:none; transition:border-color .15s ease; } input:focus,select:focus,textarea:focus{border-color:var(--accent);} input::placeholder,textarea::placeholder{color:var(--muted);opacity:.65;} textarea{resize:vertical;min-height:70px;} .form-error{background:color-mix(in srgb, var(--err) 10%, transparent);border:1px solid var(--err);color:var(--err);font-size:13px;padding:10px 13px;border-radius:var(--radius-sm);margin-top:14px;} .form-ok{background:color-mix(in srgb, var(--ok) 10%, transparent);border:1px solid var(--ok);color:var(--ok);font-size:13px;padding:10px 13px;border-radius:var(--radius-sm);margin-top:14px;} /* ---------- Footer ---------- */ .footer{border-top:1px solid var(--line);background:var(--panel);margin-top:40px;} .footer-inner{max-width:var(--content-max);margin:0 auto;padding:34px 26px;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px;} .footer-brand{display:flex;align-items:center;gap:14px;} .footer-region{font-size:12px;color:var(--muted);padding-left:14px;border-left:1px solid var(--line);} /* ================================================================== MAP — shared styles (public map section + dashboard map) ================================================================== */ .map-shell{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);} .map-shell .leaflet-container{background:var(--bg-soft);font-family:'Montserrat',sans-serif;} /* pulsating hotspot circles */ @keyframes zonePulse{ 0%,100%{stroke-width:2;stroke-opacity:.9;} 50%{stroke-width:11;stroke-opacity:.12;} } .zone-pulse{animation:zonePulse 2.6s ease-in-out infinite;} @media (prefers-reduced-motion:reduce){ .zone-pulse{animation:none;} } /* hotspot labels (collision-managed in JS) */ .flood-label{ background:color-mix(in srgb, var(--panel) 92%, transparent); border:1px solid var(--line);color:var(--text); font-family:'Montserrat',sans-serif;font-size:11px;font-weight:600;letter-spacing:.01em; padding:3px 8px;border-radius:6px;box-shadow:var(--shadow-soft);white-space:nowrap; } .flood-label::before{display:none;} /* waterways */ .ww{fill:none;stroke:var(--water);stroke-linecap:round;stroke-linejoin:round;} .ww-river{stroke-width:3;stroke-opacity:.85;} .ww-canal{stroke-width:2.2;stroke-opacity:.75;} .ww-drain{stroke-width:1.8;stroke-opacity:.7;stroke:var(--water-minor);} .ww-stream{stroke-width:1.3;stroke-opacity:.55;stroke:var(--water-minor);} @keyframes wwFlow{to{stroke-dashoffset:-22;}} .ww-flow{stroke-dasharray:8 14;animation:wwFlow 1.7s linear infinite;} @media (prefers-reduced-motion:reduce){ .ww-flow{animation:none;stroke-dasharray:none;} } /* map UI chrome — frosted glass floating over the tiles rather than solid panels, so the map itself stays the visual focus underneath the controls. */ .map-ctl{ position:absolute;z-index:1000;background:color-mix(in srgb, var(--panel) 72%, transparent); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid var(--glass-border); border-radius:var(--radius-sm);box-shadow:var(--shadow-soft); } .basemap-switch{top:14px;right:14px;display:flex;overflow:hidden;} .bm-btn{ font-family:'Montserrat',sans-serif;font-size:12px;font-weight:600;padding:8px 13px;background:transparent; color:var(--muted);border:none;cursor:pointer;border-right:1px solid var(--line); } .bm-btn:last-child{border-right:none;} .bm-btn.active{background:var(--accent);color:var(--accent-contrast);} .layer-panel{top:56px;right:14px;padding:12px 14px;width:200px;max-width:calc(100% - 28px);} .layer-panel .lp-row + .lp-row{margin-top:10px;} .lp-toggle{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--text);cursor:pointer;user-select:none;} .lp-toggle input{accent-color:var(--accent);width:15px;height:15px;cursor:pointer;margin:0;} .lp-label{font-size:11px;font-weight:600;color:var(--muted);display:block;margin-bottom:5px;} .lp-label span{color:var(--accent);} .layer-panel input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer;} /* A small uppercase label plus a ring around each swatch (matching the panel colour, so it works on any theme) turns this from a bare list of dots into something that reads as one deliberate card. */ .map-legend{bottom:14px;left:14px;padding:13px 16px;font-size:12.5px;min-width:184px;} .map-legend .lg-title{ font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em; color:var(--muted);margin-bottom:9px; } .map-legend .lg-row{display:flex;align-items:center;gap:10px;margin-top:8px;color:var(--text);font-weight:500;} .map-legend .lg-row:first-of-type{margin-top:0;} .map-legend .lg-dot{ width:12px;height:12px;border-radius:50%;flex-shrink:0; box-shadow:0 0 0 3px var(--panel); } .map-legend .lg-line{width:22px;height:0;border-top:3px dashed var(--water);border-radius:2px;flex-shrink:0;} /* leaflet popups themed */ .leaflet-popup-content-wrapper{background:var(--panel);color:var(--text);border-radius:var(--radius-sm);border:1px solid var(--line);box-shadow:var(--shadow);} .leaflet-popup-tip{background:var(--panel);border:1px solid var(--line);} .leaflet-popup-content{margin:14px 16px;line-height:1.5;} .pop-title{font-weight:700;font-size:14px;margin-bottom:2px;font-family:'Montserrat',sans-serif;} .pop-body{font-size:12.5px;color:var(--muted);margin-top:6px;} .pop-media{display:flex;gap:6px;margin-top:9px;overflow-x:auto;} .pop-media img{width:64px;height:64px;object-fit:cover;border-radius:var(--radius-sm);cursor:pointer;flex-shrink:0;border:1px solid var(--line);transition:transform .12s ease;} .pop-media img:hover{transform:scale(1.05);} .pop-meta{font-size:11px;color:var(--muted);margin-top:8px;padding-top:8px;border-top:1px solid var(--line);} .pop-meta a{color:var(--accent);} .leaflet-container a.leaflet-popup-close-button{color:var(--muted);} .leaflet-bar a{background:var(--panel);color:var(--text);border-bottom-color:var(--line);} .leaflet-bar a:hover{background:var(--bg-soft);} .leaflet-control-attribution{background:color-mix(in srgb, var(--panel) 75%, transparent) !important;color:var(--muted) !important;} .leaflet-control-attribution a{color:var(--accent) !important;} /* fullscreen map */ .map-shell:fullscreen,.map-area:fullscreen{border-radius:0;background:var(--bg);} .map-shell:fullscreen .leaflet-container,.map-area:fullscreen .leaflet-container{height:100vh !important;} /* photo lightbox — appended inside the fullscreen target so it still shows while the map itself is in native fullscreen */ .fs-lightbox{position:fixed;inset:0;z-index:5000;background:rgba(5,10,16,.92);display:none;align-items:center;justify-content:center;} .fs-lightbox.open{display:flex;} .fs-lb-img{max-width:88vw;max-height:82vh;border-radius:var(--radius-sm);box-shadow:0 12px 48px rgba(0,0,0,.5);} .fs-lb-close{position:absolute;top:18px;right:22px;background:rgba(255,255,255,.12);border:none;color:#fff;width:38px;height:38px;border-radius:var(--radius-sm);font-size:22px;cursor:pointer;line-height:1;} .fs-lb-close:hover{background:rgba(255,255,255,.22);} .fs-lb-prev,.fs-lb-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:none;color:#fff;width:46px;height:46px;border-radius:50%;font-size:26px;cursor:pointer;} .fs-lb-prev{left:18px;} .fs-lb-next{right:18px;} .fs-lb-prev:hover,.fs-lb-next:hover{background:rgba(255,255,255,.22);} .fs-lb-count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#fff;font-size:12.5px;background:rgba(255,255,255,.12);padding:5px 12px;border-radius:999px;} /* ---------- Before/after satellite comparison ---------- Same dark full-screen treatment as the photo lightbox above (same overlay colour, same close-button style), so this reads as one family of "media viewer" surfaces rather than a bolted-on widget with its own visual voice. */ .fs-ba{position:fixed;inset:0;z-index:5100;background:rgba(5,10,16,.94);display:none;flex-direction:column;align-items:center;justify-content:center;padding:22px 18px;touch-action:none;} .fs-ba.open{display:flex;} .fs-ba-close{position:absolute;top:18px;right:22px;background:rgba(255,255,255,.12);border:none;color:#fff;width:38px;height:38px;border-radius:var(--radius-sm);font-size:22px;cursor:pointer;line-height:1;z-index:20;} .fs-ba-close:hover{background:rgba(255,255,255,.22);} .fs-ba-head{width:100%;max-width:820px;margin-bottom:14px;color:#fff;text-align:center;} .fs-ba-head b{display:block;font-size:19px;font-family:var(--font-display);font-weight:700;} .fs-ba-head .fs-ba-sub{display:block;font-size:12.5px;color:rgba(255,255,255,.6);margin-top:3px;} .fs-ba-mapwrap{ position:relative;width:100%;max-width:820px;aspect-ratio:4/3; border-radius:var(--radius);overflow:hidden;box-shadow:0 12px 48px rgba(0,0,0,.55); touch-action:none; } .fs-ba-map{position:absolute;inset:0;background:#0b1220;} /* The handle is a sibling of the Leaflet map, not a child of it, so dragging it never triggers the map's own pan/drag handling underneath. */ .fs-ba-handle{position:absolute;top:0;bottom:0;left:50%;width:0;z-index:600;transform:translateX(-50%);cursor:ew-resize;touch-action:none;} .fs-ba-handle::before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,.6);pointer-events:none;} .fs-ba-handle-grip{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:40px;height:40px;border-radius:50%;background:#fff;color:#141b26; display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700; box-shadow:0 4px 14px rgba(0,0,0,.45); } .fs-ba-tag{ position:absolute;bottom:12px;z-index:500;background:rgba(0,0,0,.6);color:#fff; font-size:11px;font-weight:600;padding:5px 11px;border-radius:999px;pointer-events:none; backdrop-filter:blur(4px);white-space:nowrap; } .fs-ba-tag-before{left:12px;} .fs-ba-tag-after{right:12px;} .fs-ba-foot{width:100%;max-width:820px;margin-top:12px;font-size:11px;color:rgba(255,255,255,.5);text-align:center;} /* Popup/hotspot-card trigger button */ .pop-ba-btn{width:100%;justify-content:center;margin-top:10px;} @media (max-width:640px){ .fs-ba-mapwrap{aspect-ratio:3/4;} .fs-ba-head b{font-size:16px;} .fs-ba-tag{font-size:10px;padding:4px 9px;} } .map-topleft{position:absolute;top:14px;left:14px;z-index:1000;display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start;max-width:calc(100% - 28px);} .map-actions{ display:flex;overflow:hidden;background:color-mix(in srgb, var(--panel) 72%, transparent); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid var(--glass-border);border-radius:var(--radius-sm);box-shadow:var(--shadow-soft); } .map-actions .ma-btn{font-size:12px;font-weight:600;padding:8px 12px;background:transparent;color:var(--muted);border:none;cursor:pointer;border-right:1px solid var(--line);display:inline-flex;align-items:center;gap:6px;font-family:'Montserrat',sans-serif;} .map-actions .ma-btn:last-child{border-right:none;} .map-actions .ma-btn:hover{color:var(--accent);background:var(--bg-soft);} .map-actions .ma-btn.active{background:var(--accent);color:var(--accent-contrast);} /* origin badges (community vs media) */ .badge-community{color:var(--accent);background:var(--accent-soft);} .badge-media{color:var(--muted);background:color-mix(in srgb, var(--muted) 13%, transparent);} /* share menu */ .share-menu{position:absolute;z-index:1500;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:8px;display:none;min-width:180px;} .share-menu.open{display:block;} .share-menu button,.share-menu a{display:flex;align-items:center;gap:9px;width:100%;background:none;border:none;color:var(--text);font-family:'Montserrat',sans-serif;font-size:13px;font-weight:500;padding:8px 10px;border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;} .share-menu button:hover,.share-menu a:hover{background:var(--bg-soft);text-decoration:none;} /* ---------- flood-risk advisor panel ---------- */ /* Text-heavy (verdict, reasons, incident list), so kept mostly opaque — legible over a busy map matters more here than the glass effect, so this stays a frosted-but-solid card rather than the see-through chrome elsewhere. */ .risk-panel{ position:absolute;top:64px;left:14px;z-index:1200;width:330px;max-width:calc(100% - 28px); max-height:calc(100% - 78px);overflow-y:auto; background:color-mix(in srgb, var(--panel) 96%, transparent); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid var(--glass-border); border-radius:var(--radius);box-shadow:var(--shadow);display:none; } .risk-panel.open{display:block;} .risk-head{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;} .risk-head h3{font-size:14.5px;} .risk-close{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;line-height:1;padding:2px 6px;} .risk-close:hover{color:var(--text);} .risk-body{padding:14px 16px 16px;} .risk-verdict{border-radius:var(--radius-sm);padding:12px 14px;font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:10px;line-height:1.35;border-left:4px solid currentColor;} .risk-verdict small{display:block;font-weight:500;font-size:11.5px;opacity:.85;margin-top:2px;} .risk-verdict.r-high{background:color-mix(in srgb, var(--sev-confirmed) 20%, transparent);color:var(--sev-confirmed);} .risk-verdict.r-elevated{background:color-mix(in srgb, var(--sev-chronic) 22%, transparent);color:var(--sev-chronic);} .risk-verdict.r-caution{background:color-mix(in srgb, var(--sev-emerging) 20%, transparent);color:var(--sev-emerging);} .risk-verdict.r-low{background:color-mix(in srgb, var(--ok) 18%, transparent);color:var(--ok);} .risk-meter{display:flex;gap:4px;margin:12px 0 4px;} .risk-meter i{flex:1;height:7px;border-radius:4px;background:var(--line);} .risk-meter.r-low i:nth-child(1){background:var(--ok);} .risk-meter.r-caution i:nth-child(-n+2){background:var(--sev-emerging);} .risk-meter.r-elevated i:nth-child(-n+3){background:var(--sev-chronic);} .risk-meter.r-high i{background:var(--sev-confirmed);} .risk-meter-labels{display:flex;justify-content:space-between;font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;} .risk-reasons{margin:0 0 6px;padding:0;list-style:none;} .risk-reasons li{font-size:12.5px;color:var(--muted);padding:5px 0 5px 20px;position:relative;line-height:1.45;} .risk-reasons li::before{content:"";position:absolute;left:4px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--accent);} .risk-incidents{margin-top:10px;border-top:1px solid var(--line);padding-top:10px;} .risk-incidents h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 8px;font-family:'Montserrat',sans-serif;} .risk-inc{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:5px 0;font-size:12.5px;} .risk-inc .nm{font-weight:600;color:var(--text);} .risk-inc .nm .tdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;} .risk-inc .d{color:var(--muted);font-size:11.5px;white-space:nowrap;} .risk-disclaimer{margin-top:12px;font-size:11px;color:var(--muted);line-height:1.5;border-top:1px solid var(--line);padding-top:10px;} .risk-cta{margin-top:12px;padding:12px 14px;background:var(--accent-soft);border-radius:var(--radius-sm);font-size:12.5px;line-height:1.5;} .risk-cta .btn{margin-top:9px;width:100%;justify-content:center;} .risk-actions{display:flex;gap:8px;margin-top:12px;} .risk-actions .btn{flex:1;justify-content:center;} /* The risk check is the whole point of the map, but it used to be a small button in the toolbar cluster and people missed it. It is now a pulsing CTA across the top of the map, stating both what it does and what to do next. */ .map-check-cta{ position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:1300; display:inline-flex;align-items:center;gap:12px;cursor:pointer; background:var(--accent);color:var(--accent-contrast);border:none; font-family:'Montserrat',sans-serif;text-align:left; padding:11px 22px;border-radius:999px;box-shadow:var(--shadow); max-width:calc(100% - 28px); animation:mccPulse 2.6s ease-out infinite; } .map-check-cta:hover{filter:brightness(1.06);} .map-check-cta .mcc-idle,.map-check-cta .mcc-active{display:inline-flex;align-items:center;gap:12px;} .map-check-cta .mcc-active{display:none;} .map-check-cta.active{animation:none;background:var(--sev-confirmed);} .map-check-cta.active .mcc-idle{display:none;} .map-check-cta.active .mcc-active{display:inline-flex;} .map-check-cta .mcc-icon{font-size:20px;line-height:1;flex-shrink:0;} .map-check-cta b{display:block;font-size:14.5px;font-weight:700;line-height:1.25;} .map-check-cta small{display:block;font-size:11.5px;opacity:.85;line-height:1.3;} /* Pulse a ring outward, rather than moving the button — a target that jumps is harder to hit. */ @keyframes mccPulse{ 0%{box-shadow:var(--shadow),0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);} 70%{box-shadow:var(--shadow),0 0 0 16px color-mix(in srgb, var(--accent) 0%, transparent);} 100%{box-shadow:var(--shadow),0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);} } @media (prefers-reduced-motion:reduce){.map-check-cta{animation:none;}} @media (max-width:720px){ .map-check-cta{width:calc(100% - 28px);justify-content:center;padding:10px 16px;} .map-check-cta b{font-size:13px;} } /* Shared "look here" cue — the same outward box-shadow ring as .map-check-cta, generalised so other elements can reuse it instead of each defining their own copy. --pulse-base preserves whatever static shadow the element already has (a card would otherwise lose its resting shadow for the whole cycle, since a CSS animation replaces box-shadow outright rather than adding to it); --pulse-color lets an element pulse something other than the brand accent. */ .pulse-ring{animation:ringPulse 2.6s ease-out infinite;} @keyframes ringPulse{ 0%{box-shadow:var(--pulse-base,none),0 0 0 0 color-mix(in srgb, var(--pulse-color, var(--accent)) 55%, transparent);} 70%{box-shadow:var(--pulse-base,none),0 0 0 14px color-mix(in srgb, var(--pulse-color, var(--accent)) 0%, transparent);} 100%{box-shadow:var(--pulse-base,none),0 0 0 0 color-mix(in srgb, var(--pulse-color, var(--accent)) 0%, transparent);} } @media (prefers-reduced-motion:reduce){.pulse-ring{animation:none;}} /* ---------- Floating actions (feedback shortcut + scroll-to-top) ---------- */ .floating-actions{position:fixed;right:22px;bottom:22px;z-index:1800;display:flex;flex-direction:column;gap:12px;align-items:center;} .fab{ width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:20px;text-decoration:none;cursor:pointer;border:none;box-shadow:var(--shadow); transition:transform .15s ease,opacity .15s ease; } .fab:hover{transform:translateY(-2px);text-decoration:none;} /* Points at the homepage's #feedback section — the form only lives there, so from any other page this is a normal cross-page link with a fragment. */ .fab-feedback{background:var(--accent);color:var(--accent-contrast);--pulse-base:var(--shadow);} .fab-top{ background:var(--panel);color:var(--text);border:1px solid var(--line); opacity:0;pointer-events:none;transform:translateY(8px); } .fab-top.show{opacity:1;pointer-events:auto;transform:translateY(0);} @media (max-width:600px){ .floating-actions{right:14px;bottom:14px;gap:10px;} .fab{width:44px;height:44px;font-size:18px;} } /* scrollbars */ .scroll-slim::-webkit-scrollbar{width:7px;} .scroll-slim::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;} .scroll-slim::-webkit-scrollbar-track{background:transparent;}