/* ============================================================ P4 — trust stack: unverified markers, share row, timeline ============================================================ */ /* Round-95k: the Dark basemap is OSM inverted in CSS — no keyed provider required. */ .tiles-darkened{ filter:invert(1) hue-rotate(180deg) brightness(.91) contrast(.9) saturate(.7); } /* Round-95m: the Street base, calmed toward the old Voyager feel — desaturated, a touch brighter, contrast eased so the service pins carry the colour hierarchy again. */ .tiles-muted{ filter:saturate(.55) brightness(1.04) contrast(.94); } /* Round-96l: street is real CARTO Voyager end-to-end — no filters. (.tiles-muted above stays for any future raw-OSM layer.) */ /* unverified community reports: hollow marker in the service color */ .inc-marker.unv{ background:rgba(243,244,241,.9) !important; border:2.5px dashed currentColor; } /* resolved incidents: dimmed grace-period rendering */ .inc-marker.dim{ opacity:.45; filter:grayscale(.5); } /* Round-130: the rounds-40/70 per-network share rows (.share-row/.share-inline) were retired — every share button now opens the OS sheet via aquaShareLink; their CSS went with them. */ /* public incident timeline */ .tl-row{ border-left:3px solid var(--track); padding:6px 0 6px 12px; margin-left:4px; font-size:.85rem; color:var(--ink-soft); } .tl-row b{ color:var(--deep); } .tl-row small{ color:var(--ink-soft); } /* Phase 3: the response strip on an agency's queue card — Dispatched / Arrived / Cleared */ .resp-strip{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; padding-top:12px; border-top:1px dashed var(--track); } .resp-k{ font-size:.85rem; color:var(--deep); margin-right:4px; } .resp-unit{ width:auto; max-width:220px; } .resp-ago{ display:flex; align-items:center; gap:6px; font-size:.82rem; color:var(--ink-soft); } /* Phase 2b item 5: area replay (/eoc/replay) — map + running log, slider bar under them */ .rpl-field{ display:flex; flex-direction:column; gap:4px; font-size:.85rem; font-weight:600; } .rpl-days{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; } .rpl-wrap{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:14px; } .rpl-map{ height:62vh; min-height:360px; border-radius:14px; overflow:hidden; } .rpl-side{ max-height:62vh; overflow:auto; padding:14px; } .rpl-counts{ font-weight:700; margin:0; } .rpl-log{ list-style:none; margin:0; padding:0; font-size:.82rem; } .rpl-log li{ border-left:3px solid var(--track); padding:4px 0 4px 10px; margin-bottom:4px; } .rpl-log li time{ color:var(--ink-soft); font-variant-numeric:tabular-nums; } .rpl-log li.rpl-em{ border-left-color:#C0392B; } .rpl-log li.rpl-ok{ border-left-color:#4F8577; } .rpl-log li.rpl-al{ border-left-color:#D9822B; } .rpl-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px; padding:12px 14px; } .rpl-bar input[type=range]{ flex:1; min-width:180px; } .rpl-clock{ font-weight:700; font-variant-numeric:tabular-nums; min-width:150px; } .rpl-speed{ display:flex; align-items:center; gap:6px; font-size:.85rem; } .rpl-speed select{ width:auto; } @keyframes rplIn{ from{ stroke-width:16; stroke-opacity:.25; } } .rpl-new{ animation:rplIn .9s ease-out; } @media (prefers-reduced-motion: reduce){ .rpl-new{ animation:none; } } @media (max-width:860px){ .rpl-wrap{ grid-template-columns:1fr; } .rpl-map{ height:50vh; } .rpl-side{ max-height:40vh; } } /* Phase 2b item 1: the incident's impact zone — one row per ring, counts only */ .imp-ring{ border-left:4px solid var(--imp-c, var(--track)); padding:8px 0 8px 12px; margin:0 0 6px 2px; } .imp-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; } .imp-head b{ color:var(--deep); font-size:.92rem; } .imp-ppl{ font-weight:700; font-size:.92rem; } .imp-ppl.none{ font-weight:400; color:var(--ink-soft); font-size:.82rem; } .imp-fac{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:4px; font-size:.82rem; color:var(--ink-soft); } .imp-fac span b{ color:var(--deep); font-weight:700; } .imp-note{ margin:10px 0 0; font-size:.78rem; color:var(--ink-soft); line-height:1.4; } /* legal pages */ .legal{ max-width:820px; margin:0 auto; } .legal h2{ color:var(--ink); font-size:1.3rem; margin:28px 0 10px; } .legal p, .legal li{ color:var(--ink-soft); font-size:.98rem; line-height:1.65; } .legal ul{ margin:8px 0 8px 22px; } .legal .flag{ background:#F3E9D8; border:1px solid #DECBA4; color:#7A5A22; padding:12px 16px; border-radius:10px; font-size:.9rem; margin-bottom:22px; } /* ---------------- omnibox search (P5) ---------------- */ .omni{ position:relative; margin-left:22px; flex:0 1 320px; } .omni input{ width:100%; padding:9px 14px; border-radius:999px; border:1.5px solid var(--track); background:#FBFBF8; font-family:var(--font); font-size:.92rem; color:var(--ink); } .omni input:focus{ outline:none; border-color:var(--accent); } .omni-results{ position:absolute; top:110%; left:0; right:0; z-index:1300; background:var(--paper); border:1px solid var(--track); border-radius:14px; box-shadow:0 14px 40px rgba(44,59,54,.25); overflow:hidden; max-height:calc(var(--app-h, 100vh) * 0.7); overflow-y:auto; } .omni-group{ padding:8px 14px 4px; font-size:.7rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--sage2); } .omni-hit{ display:block; padding:8px 14px; text-decoration:none; min-width:0; } /* Round-91p: a wide dropdown with the groups as columns. Stacked vertically, four categories meant scrolling a narrow strip past three of them to see the fourth — on a screen with room to spare. The panel now widens beyond the input and lays the groups out side by side, anchored to the input's RIGHT edge so it grows leftwards into the page rather than off it. Below 900px nothing applies: .omni-col is a plain block and the groups stack exactly as before, which is what a phone wants anyway. */ @media (min-width: 900px){ .omni-results{ /* FIXED and centred, not anchored to the input. Right-anchoring a 1040px panel to an input that sits well left of centre put three of its four columns off the left edge of the screen — measured at x=-622. A centred band under the header cannot overflow either side whatever the header layout does, and reads as the full-width panel this is meant to be. */ /* Stays ABSOLUTE, anchored to the search box as it always was — the vertical placement was never the problem. Only the width changes: right:0 made the panel match the input, and right-anchoring a wide one instead pushed three of its four columns off the left edge (measured at x=-622). Anchoring left and capping the width against the viewport keeps it on screen without needing to know where in the header the box sits. position:fixed was tried and is the wrong tool here: percentage offsets on a fixed element resolve against the VIEWPORT, so top:100% put the panel at the bottom of the window. */ left:0; right:auto; width:min(1040px, calc(100vw - 28px)); display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); align-items:start; gap:0 8px; padding:6px 4px; } .omni-col{ min-width:0; } /* Long headlines and OSM descriptions WRAP rather than run on. They were nowrap+ellipsis, which is the wrong trade in a column this narrow: a report headline and an address like "La, Accra, La-Dade-Kotopon Municipal District, Greater Accra Region" both lose the part that identifies them, and the last column lost its text past the panel edge. Two lines, wrapped, says which result this is; one clipped line does not. min-width:0 on the ANCHOR too — a grid item's automatic minimum is its content, so without it the longest address widens the whole column and pushes its neighbours out of the panel. */ .omni-hit{ min-width:0; } .omni-hit b, .omni-hit small{ white-space:normal; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } } .omni-hit:hover{ background:var(--mintbg); text-decoration:none; } .omni-hit b{ display:block; color:var(--ink); font-size:.92rem; } .omni-hit small{ color:var(--ink-soft); font-size:.78rem; } .omni-empty{ padding:14px; color:var(--ink-soft); font-size:.9rem; } /* The sheet-only controls never show on desktop. `.nav-icon.omni-open` rather than a bare `.omni-open`: the trigger also carries .nav-icon, whose display:inline-flex is declared later in this file at the same specificity and would otherwise win the cascade and leak the phone trigger onto desktop. */ .omni-close, .omni-clear, .nav-icon.omni-open{ display:none; } /* ============ round-84: phone search sheet ============================================ Two problems, one fix. 1. iOS Safari auto-zooms the page whenever a focused input has font-size < 16px. The nav inputs were 15.2px, so tapping search zoomed the viewport and pushed the right-hand icon cluster off-screen — the grid button sat at x=365 of a 375px viewport, so it took almost nothing to lose it. That is the "nav extends and the grid menu goes slightly beyond screen view" report. 16px is the whole fix; it is a threshold, not a preference. 2. Below 900px .omni was simply display:none, so on a phone there was NO site search on any page except the live map. The map's own box stayed, but shrunk to ~229px shared with the icons — enough to type into, not enough to read results in. So on a phone the box stops being a box: focusing it promotes the SAME element to a full-screen sheet, with the input at the top and results filling the rest. One input, one results container, same ids — the delegated search JS is untouched. ====================================================================================== */ /* Round-145: 1024px, not 900 — signed in, the row is six icons + the Report pill, and with the 320px search box beside them the grid menu fell off the right edge between 901 and ~1000px. */ @media (max-width: 1024px){ /* the inline pill disappears; the sheet and the nav trigger replace it */ .omni:not(.omni-sheet){ display:none; } .nav-icon.omni-open{ display:inline-flex; } /* THE iOS ZOOM FIX. Targeted by id on purpose: the global form-control rule in style.css is `input:not([type="checkbox"]):not([type="radio"])...` — eight attribute selectors, so specificity 0,8,1. A sane `.omni-sheet input` (0,1,1) loses to it and the input silently stays at 15.2px, which is exactly the bug. One id (1,0,0) settles it for both the inline map box and the sheet. Do not "tidy" this into a class selector. */ #omniInput{ font-size:16px; } } /* Round-186 (branch nav-06, owner's call): the search trigger wears the live map's mint disc. On the map the magnifier already sits on a round #E4ECE6 pad inside the search pill; on every other page it was a bare glyph among bare glyphs, so the one thing in that row people go looking for was the hardest to find. Colour only — no size. The header already sizes its own row (42 / 38 / 36px as the screen narrows) and the disc should be whatever the icons beside it are; naming a width here would fight three later rules of equal specificity and lose the argument at 420px anyway. Scoped to the widths where this trigger exists at all — above 1024px the inline .omni pill takes over and there is no button to paint. */ @media (max-width: 1024px){ .site-header .nav-icon.omni-open{ border-radius:50%; background:#E4ECE6; } .site-header .nav-icon.omni-open:hover{ background:#DAE4DC; } } @media (max-width: 1024px){ html.search-open, html.search-open body{ overflow:hidden; } /* no scrolling behind the sheet */ /* Two separate things the header does to its own children, both of which broke the sheet. 1. CONTAINING BLOCK. .site-header carries backdrop-filter:blur(8px), and a filtered element becomes the containing block for every position:fixed descendant. The sheet lives inside the header, so `inset:0` anchored to the header rather than the viewport and the sheet opened 93px down the page. 2. STACKING CONTEXT. The header is position:fixed with z-index:1100, which makes it a stacking context — so the sheet's z-index:2000 only ranks it against its siblings INSIDE the header. Against the signed-out "be the first to know" bar (#signupBar, z-index:1200, a sibling of the header, not a child) the entire header lost, and the bar sat on top of the search UI. Raising the header itself is the fix; raising the child never could be. Both are scoped to while the sheet is open, and cost nothing visually because the sheet covers the header completely. */ html.search-open .site-header, html.search-open .map-header{ backdrop-filter:none; z-index:2100; /* must exceed #signupBar's 1200 */ } /* GRID, not flex-wrap. The first version used `display:flex; flex-wrap:wrap` with the results pane at `flex:1 1 100%`, which sizes a wrapped item to its CONTENT height rather than to the space left over. The pane grew to 1132px inside an 812px viewport, clientHeight equalled scrollHeight, so overflow-y:auto had nothing to do and the results simply ran off the bottom of the screen — unreachable, because the body is scroll-locked while the sheet is up. A grid row can be told to stop. `minmax(0, 1fr)` is the load-bearing part: a plain `1fr` has an automatic minimum of min-content and would grow to fit the list all over again. The 0 minimum lets the row be capped at the leftover height, which is what finally gives the pane something to scroll. */ .omni.omni-sheet, .msearch.omni-sheet{ position:fixed; inset:0; top:var(--vvt, 0px); z-index:2000; /* round-97h: iOS pan */ display:grid; grid-template-columns:auto minmax(0,1fr) auto; /* back | input | clear */ grid-template-rows:auto minmax(0,1fr); /* bar | scrollable body */ align-items:center; gap:8px; width:auto; margin:0; /* Round-97: --safe-top first. env() alone is 0 on Android (no cutout), which is why the back arrow and the input sat under the clock and battery on the G6. */ padding:calc(var(--safe-top, env(safe-area-inset-top, 0px)) + 10px) 12px 0; background:var(--paper); border:0; border-radius:0; box-shadow:none; /* Round-97: sized from --vvh, not dvh. dvh is a parse error pre-108 (the G6's WebView is Chrome 101), so that line was simply dropped and the sheet stayed a full 100vh tall with its results list running on behind the keyboard. --vvh is maintained by site.js from the visual viewport, or from the native keyboard bridge in-app, so it is correct on every engine we ship to. vh stays first as the pre-var fallback. */ /* Round-180 (owner): NOT sized from --vvh any more. --vvh is updated by script after the keyboard has gone, so the sheet grew back a beat late and the page behind it showed below. The sheet now always reaches the bottom (inset:0); the keyboard's share is reserved INSIDE the results list instead, where a late update is invisible. */ } .omni-sheet .omni-results{ padding-bottom:max(0px, calc(var(--app-h, 100vh) - var(--vvh, var(--app-h, 100vh)))); } /* Placed explicitly so DOM order does not matter — the map header's box also contains a logo and a Go button, both hidden in sheet mode, and hidden items leave no grid track behind. */ .omni-sheet .omni-close{ grid-column:1; grid-row:1; } .omni-sheet input { grid-column:2; grid-row:1; } .omni-sheet .omni-clear{ grid-column:3; grid-row:1; } .omni-sheet .omni-results, .omni-sheet .omni-hint { grid-column:1 / -1; grid-row:2; align-self:stretch; min-height:0; } /* the map box's logo is redundant once the sheet fills the screen — the back arrow is clearer */ .omni-sheet .msearch-logo, .omni-sheet .msearch-btn{ display:none; } .omni-sheet .omni-close{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:40px; height:40px; padding:0; border:0; border-radius:50%; background:none; color:var(--ink); cursor:pointer; } .omni-sheet .omni-close:active{ background:var(--mintbg); } .omni-sheet .omni-close svg{ width:24px; height:24px; } .omni-sheet input{ min-width:0; height:44px; margin:0; padding:0 12px; border:1.5px solid var(--track); border-radius:999px; background:#FBFBF8; font-size:16px; /* THE iOS zoom threshold — do not lower this */ color:var(--ink); } .omni-sheet input:focus{ outline:none; border-color:var(--accent); } /* the platform's own clear affordance would sit under ours */ .omni-sheet input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; } .omni-sheet .omni-clear{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:var(--close-size, 44px); height:var(--close-size, 44px); padding:0; border:0; border-radius:50%; background:none; color:var(--ink-soft); font-size:1.1rem; line-height:1; cursor:pointer; } .omni-sheet .omni-clear[hidden]{ display:none; } /* results stop being a floating dropdown and become the scrollable body of the sheet */ .omni-sheet .omni-results{ position:static; width:100%; max-height:none; margin:0; border:0; border-radius:0; box-shadow:none; background:none; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding-bottom:calc(var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 16px); } .omni-sheet .omni-hit{ padding:13px 8px; /* >=44px tall: a thumb target, not a mouse target */ border-bottom:1px solid var(--track); } .omni-sheet .omni-hit b{ font-size:1rem; } .omni-sheet .omni-hit small{ font-size:.85rem; } .omni-sheet .omni-hit:active{ background:var(--mintbg); } .omni-sheet .omni-group{ padding:14px 8px 6px; font-size:.72rem; } .omni-sheet .omni-empty{ padding:20px 8px; } /* shown before anything is typed, so the sheet is never a blank white screen. display:block is load-bearing — the base `.omni-hint{display:none}` sits later in this file and would otherwise win by cascade order regardless of this rule's higher specificity. */ .omni-sheet .omni-hint{ display:block; flex:1 1 100%; padding:18px 8px; color:var(--ink-soft); font-size:.9rem; } .omni-sheet .omni-results:not([style*="none"]) ~ .omni-hint{ display:none; } } .omni-hint{ display:none; } .foot-legal{ display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:10px; } .foot-legal a{ font-size:.82rem !important; color:#9fb8ab !important; display:inline !important; padding:0 !important; } .foot-disclaimer{ font-size:.8rem; color:#9fb8ab; margin-top:12px; max-width:640px; } /* ---- P7: locked service pills + partner-with-us panel ---- */ .pill-svc.locked{ opacity:.55; border-style:dashed; } .pill-svc.locked:hover{ opacity:.85; border-color:var(--track); } .partner-panel{ position:fixed; top:calc(var(--header-h) + 60px); left:50%; transform:translateX(-50%); z-index:970; width:min(380px, calc(100vw - 28px)); padding:18px 20px; } .partner-panel h3{ margin-right:28px; } .partner-panel p{ font-size:.9rem; margin-top:8px; } /* ---- P18: "More" nav dropdown ---- */ .nav-more{ position:relative; display:inline-block; } .nav-more-btn{ background:none; border:none; cursor:pointer; font-family:var(--font); font-weight:600; font-size:inherit; color:inherit; padding:6px 2px; } .nav-more-menu{ display:none; position:absolute; top:100%; right:0; min-width:180px; z-index:1300; background:var(--paper, #F1EBE4); border:1.5px solid var(--track); border-radius:12px; box-shadow:0 10px 28px rgba(44,59,54,.18); padding:8px 0; } .nav-more.open .nav-more-menu{ display:block; } .nav-more-menu a{ display:block; padding:9px 18px; } .nav-more-menu a:hover{ background:rgba(97,141,124,.1); } @media (max-width: 900px){ .nav-more{ display:block; } .nav-more-menu{ position:static; display:block; border:none; box-shadow:none; padding:0; } .nav-more-btn{ display:none; } } /* ---- P18: aggregation bubbles (zoom-banded map) ---- */ .agg-bubble{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:.85rem; font-family:var(--font); border:2.5px solid rgba(255,255,255,.9); box-shadow:0 3px 10px rgba(44,59,54,.35); } /* ---- Brand refresh: theme-colored icons + themed scrollbars ---- */ /* Emoji rendered as single-color silhouettes (theme colors only): color:transparent + zero-blur text-shadow paints the glyph in one color. */ .inc-marker{ color:transparent; text-shadow:0 0 0 var(--ico, #F3F4F1); } .ico-t{ color:transparent; text-shadow:0 0 0 var(--ico, var(--accent, #618D7C)); } .chip.sel .ico-t, .chip.sel-amber .ico-t, .chip.sel-red .ico-t{ text-shadow:0 0 0 #F3F4F1; } /* neutralize native emoji colors on admin/nav card headings */ .grid a.card > h3{ filter:grayscale(1); } /* Themed scrollbars (Firefox + WebKit) */ html{ scrollbar-color:#618D7C transparent; scrollbar-width:thin; } /* Round-17b: native checkboxes/radios/switches wear the brand accent everywhere (settings toggles, map pin filters, story filters, report form, admin pages) */ input[type="checkbox"], input[type="radio"], input[type="range"], progress{ accent-color:var(--accent, #618D7C); } /* ---- Round-23: site-wide native control theme ---- `.field input/select/textarea` (style.css) already themed form-card controls, but every control OUTSIDE a .field (admin tables, inline filters, popovers) fell back to browser chrome — which is why several pages hand-rolled the same inline select styling. These are deliberately LOW specificity (bare element selectors), so every existing rule that targets a control via a class (.field input, .msearch input, .compose textarea, .base-switch …) still wins, and inline styles still win over everything. */ /* Drives the native bits CSS can't reach: the select popup list, date/time picker panels, spinners and autofill. The whole site is the light "paper" theme. */ :root{ color-scheme:light; } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]), select, textarea{ font-family:var(--font); font-size:.95rem; color:var(--ink, #2C3B36); background:#FBFBF8; border:1.5px solid var(--track, #ADC3B9); border-radius:10px; padding:9px 12px; transition:border-color .15s, box-shadow .15s; } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus, select:focus, textarea:focus{ outline:none; border-color:var(--accent, #618D7C); box-shadow:0 0 0 3px rgba(97,141,124,.18); } input:disabled, select:disabled, textarea:disabled{ background:#F1F0EA; color:var(--ink-soft, #55635C); cursor:not-allowed; opacity:.75; } input::placeholder, textarea::placeholder{ color:var(--ink-soft, #55635C); opacity:.8; } /* select: swap the OS arrow for a brand chevron (appearance:none kills the native one). `.field select` (style.css) MUST be listed explicitly: it is more specific (0,1,1) than a bare `select` (0,0,1), and its `background:` SHORTHAND resets background-image — so without this the native arrow would be suppressed while the chevron never painted, leaving no indicator at all. Same specificity + p4.css loads later ⇒ these win. */ select, .field select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer; padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F8577' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; background-size:14px; } select:disabled{ cursor:not-allowed; } html[dir="rtl"] select, html[dir="rtl"] .field select{ padding-right:12px; padding-left:34px; background-position:left 11px center; } /* the popup list itself (honoured by Firefox/Chromium on some platforms) */ select option{ background:#FBFBF8; color:var(--ink, #2C3B36); } /* date/time pickers: tint the OS indicator toward the brand instead of flat black */ input::-webkit-calendar-picker-indicator{ cursor:pointer; opacity:.65; } input::-webkit-calendar-picker-indicator:hover{ opacity:1; } /* file inputs (evidence upload, SafeNet photo): theme the button half */ input[type="file"]{ font-family:var(--font); font-size:.92rem; color:var(--ink, #2C3B36); } input[type="file"]::file-selector-button{ font-family:var(--font); font-weight:800; font-size:.85rem; cursor:pointer; margin-right:10px; padding:8px 14px; border-radius:999px; border:0; background:var(--accent, #618D7C); color:#fff; } input[type="file"]::file-selector-button:hover{ background:var(--deep, #4F8577); } ::-webkit-scrollbar{ width:11px; height:11px; } ::-webkit-scrollbar-track{ background:transparent; } ::-webkit-scrollbar-thumb{ background:#618D7C; border-radius:6px; border:2.5px solid #E2DCD3; } ::-webkit-scrollbar-thumb:hover{ background:#4F8577; } /* ---- Simplified header: right cluster, app-launcher grid menu, avatar-only user ---- */ .nav-right{ margin-left:auto; display:flex; align-items:center; gap:12px; } .nav-right > *{ flex:0 0 auto; } /* round-11: icons must never squash into ovals */ @media (max-width: 640px){ /* round-11: small screens drop the brand text + slogan, keep the droplet */ .site-header .brand > span{ display:none; } .nav-right{ gap:8px; } } /* Round-95l: at 360dp (LG G6 class — much of the Ghana install base) the standard header's row overflowed and the grid button was clipped off the right edge. Squeeze: tighter padding and gaps, slightly smaller circles, and the map shortcut goes — the brand logo already links to the live map. */ @media (max-width: 420px){ .site-header{ padding:0 10px; } .nav-right{ gap:4px; } /* Round-96e/g: map + stories icons live on phones AND the brand pin stays (user asked for the app icon on every nav) — only the wordmark yields. Measured on the G6: the row has ~100px slack at 360dp with 36px icons, so the ~44px pin fits. */ .site-header .brand span{ display:none; } .nav-icon{ width:36px; height:36px; } /* Round-96h: on every user page EXCEPT stories (fewer icons there — it reads fine packed right) the icon row spreads across the phone width instead of bunching right with dead space after the brand pin. The map header is separate markup. */ .site-header .nav-right{ flex:1 1 auto; justify-content:space-between; gap:0; margin-left:6px; } .nav-icon svg{ width:20px; height:20px; } .nav-right .bell, .nav-right .msg-btn{ padding:4px; } .nav-report{ transform:scale(.92); } } .bell{ position:relative; font-size:1.15rem; padding:6px; border-radius:8px; color:transparent; text-shadow:0 0 0 var(--deep, #4F8577); display:inline-flex; align-items:center; justify-content:center; } .msg-btn{ color:var(--deep, #4F8577); text-shadow:none; } /* Round-94c: .bell was styled for an EMOJI (transparent text + shadow silhouette). These two carry real SVGs now, so undo that and size them like the envelope always was. */ .nav-svg{ color:var(--deep, #4F8577); text-shadow:none; } .nav-svg svg{ width:20px; height:20px; } .nav-svg.on{ color:var(--accent, #618D7C); } .msg-btn svg{ width:20px; height:20px; } .bell:hover{ background:rgba(97,141,124,.12); text-decoration:none; } /* Round-188b: a count badge is a DOT with a number in it, not a pill. `padding: 1px 5px` sized the box to the glyph, so a single digit came out wider than it was tall — an ovoid on Alerts, Communities and Stories. A fixed 17px box with the digit centred is round for 1-9 and grows only when the content genuinely needs it ("9+"), where a slight stadium is correct rather than a squashed circle. box-sizing so the 2px ring the bar's badges wear does not add to it. */ .bell-badge{ position:absolute; top:0; right:0; background:#C0392B; color:#fff; font-size:.6rem; font-weight:800; border-radius:999px; line-height:1; box-sizing:border-box; min-width:17px; height:17px; padding:0 4px; display:inline-flex; align-items:center; justify-content:center; text-shadow:none; } .bell-badge[hidden]{ display:none; } .avatar{ display:inline-flex; } .avatar img, .avatar-fallback{ width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid var(--accent, #618D7C); } .avatar-fallback{ display:inline-flex; align-items:center; justify-content:center; background:var(--accent, #618D7C); color:#F3F4F1; font-weight:800; font-size:1rem; } .avatar:hover img, .avatar:hover .avatar-fallback{ border-color:var(--deep, #4F8577); } .nav-grid{ position:relative; } .grid-btn{ background:none; border:0; cursor:pointer; color:var(--deep, #4F8577); width:42px; height:42px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; transition:background .15s; } .grid-btn:hover, .nav-grid.open .grid-btn{ background:rgba(97,141,124,.14); } .grid-menu{ display:none; position:absolute; top:calc(100% + 8px); inset-inline-end:0; z-index:1200; width:min(340px, calc(100vw - 20px)); background:#F3F4F1; border:1.5px solid var(--track, #ADC3B9); border-radius:16px; box-shadow:0 14px 36px rgba(44,59,54,.22); padding:12px; grid-template-columns:repeat(3, 1fr); gap:4px; /* Round-84: the menu grew (get-the-app tile, language rows) past a short phone's screen — cap it to the viewport and scroll inside, without the page scrolling behind it. */ max-height:min(calc(var(--app-h, 100vh) * 0.74), calc(var(--app-h, 100vh) - 110px)); overflow-y:auto; overscroll-behavior:contain; } .nav-grid.open .grid-menu{ display:grid; } /* Round-94: the grid menu lives inside the header's stacking context (z 1100), and the mobile bottom-sheet incident panel sits at 1250 — the open menu rendered UNDER the panel. Lift the whole header only while the menu is open; the sheet's close button stays on top otherwise. */ /* Round-94c: 1300 cleared the mobile incident sheet (1250) but NOT Ada's FAB (2500), so the menu still opened behind Ada on ordinary pages. Above everything the menu can meet. */ /* The ladder this has to clear, top rung last: Ada's FAB 2500 < the phone messenger shell 2600 < the open grid menu. Equal z-index loses to whatever comes later in the document, which is how the menu ended up behind the messages pane. */ html.grid-open .site-header, html.grid-open .map-header{ z-index:2700; } /* :has twin (pre-105) */ html:has(.nav-grid.open) .site-header, html:has(.nav-grid.open) .map-header{ z-index:2700; } .grid-menu a{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:12px 6px; border-radius:12px; font-size:.78rem; font-weight:600; color:var(--ink, #2C3B36); line-height:1.2; } .grid-menu a:hover{ background:rgba(97,141,124,.12); text-decoration:none; } /* outline tiles: accent stroke, transparent fill */ .grid-menu a svg{ width:24px; height:24px; color:var(--accent, #618D7C); flex:0 0 auto; } /* ---- Live-map nav: transparent bar over the map (Google-Maps style) ---- */ :root{ --msearch-w:min(400px, 46vw); } .map-header{ position:fixed; top:var(--signup-h, 0px); left:0; right:0; z-index:1100; height:64px; /* literal: --header-h is header + sign-up bar when the bar shows */ display:flex; align-items:center; gap:12px; padding:0 14px; background:transparent; pointer-events:none; /* the map stays draggable between the islands */ } .map-header .msearch, .map-header .nav-right{ pointer-events:auto; } /* round-15f/16b: the icon cluster must never shrink below its content (the grid button was sliding off-screen on narrow phones when signed out) — the search box may SHRINK instead, but never GROW (flex-grow was stretching it over the service pills on desktop) */ .map-header .nav-right{ flex:0 0 auto; } .map-header .msearch{ flex:0 1 auto; min-width:0; } .msearch{ position:relative; display:flex; align-items:center; gap:6px; width:var(--msearch-w); padding:5px 8px 5px 10px; background:rgba(243,244,241,.96); border:1px solid var(--track); border-radius:12px; box-shadow:0 4px 18px rgba(44,59,54,.22); } .msearch-logo{ display:inline-flex; flex:0 0 auto; } .msearch-logo svg{ width:26px; height:26px; } .msearch input{ flex:1; min-width:0; border:0; background:none; padding:7px 4px; font-family:var(--font); font-size:.95rem; color:var(--ink); } .msearch input:focus{ outline:none; } .msearch-btn{ flex:0 0 auto; background:none; border:0; cursor:pointer; padding:6px; border-radius:8px; color:var(--accent); display:inline-flex; } .msearch-btn svg{ width:20px; height:20px; } .msearch-btn:hover{ background:rgba(97,141,124,.12); } /* Round-195d: the phone's copy of the map magnifier, which is a LINK to /search. Hidden on desktop, where the pill it sits in is a working search box with inline results. Round-199n: this has to sit AFTER .msearch-btn's display, not before it. The link carries BOTH classes, the two selectors have the same specificity, and the later one wins — so while this rule lived further up the file the link was displayed on desktop anyway and the header showed TWO magnifiers side by side. Reported by the owner; the media query at the bottom of this file hid #omniGo on phones, which is why only large screens showed it. */ .msearch-page{ display:none; } .msearch .omni-results{ top:calc(100% + 8px); } /* right-cluster buttons get a paper backing so they read over the map */ .map-header .grid-btn, .map-header .bell{ background:rgba(243,244,241,.96); border:1px solid var(--track); border-radius:50%; box-shadow:0 4px 14px rgba(44,59,54,.18); } .map-header .bell{ width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; padding:0; } .map-header .grid-btn:hover, .map-header .nav-grid.open .grid-btn{ background:#E9EFE9; } @media (max-width: 720px){ /* chips drop below the bar (see .svc-wrap); min-width:0 lets the box shrink past the input's intrinsic size so the right cluster never overflows */ .map-header .msearch{ flex:1 1 auto; width:auto; min-width:0; } .map-header{ gap:8px; padding:0 10px; } /* Round-94: below ~560px the inline input is a sliver — icon-only reads better. The 🔍 still opens the full-screen sheet (tap → input focus → round-84 sheet), where the real input lives. :not(.omni-sheet) keeps the sheet's own input visible. */ } @media (max-width: 560px){ .map-header .msearch:not(.omni-sheet){ flex:0 0 auto; gap:2px; padding:5px 6px; } .map-header .msearch:not(.omni-sheet) input, .map-header .msearch:not(.omni-sheet) .omni-clear{ display:none; } } /* ---- Nav quick actions: live map icon + report button (both navs) ---- */ .nav-icon{ width:42px; height:42px; border-radius:50%; color:var(--deep, #4F8577); display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; position:relative; /* round-96e: the stories icon carries a .bell-badge */ /* Round-96d: the search trigger is a