/* ============================================================================= Tucson Compass — stylesheet ----------------------------------------------------------------------------- Calm civic design with desert character. Warm neutrals, terracotta accent, mountain horizon footer. Soft elevation, modern type, generous tap targets. WCAG 2.1 AA across light + dark. Theme model - Default: follows OS preference (prefers-color-scheme). - Override: or forces a scheme. Set by an inline boot script (see HTML ) and toggled at runtime by the theme button in the site header. TABLE OF CONTENTS 1. TOKENS — light (default) 2. TOKENS — dark (OS preference + explicit override) 3. RESET / BASE 4. LAYOUT — container, main 5. TYPOGRAPHY — h1/h2/h3, eyebrow, lead, links, prose 6. HEADER — site header, brand, lang + theme toggles 7. NAV — primary nav 8. OFFLINE BANNER 9. COMPONENTS — chips 10. COMPONENTS — buttons / act 11. COMPONENTS — cards 12. COMPONENTS — badges 13. COMPONENTS — note box 14. COMPONENTS — no-results 15. PAGE — home (urgent strip, need grid, tools row) 16. PAGE — directory (dir-head, controls, search, filter, results) 17. PAGE — map (#map, legend, popup, pin) 18. PAGE — about (prose container) 19. FOOTER 20. UTILITIES 21. REDUCED MOTION ============================================================================= */ /* ============================================================================= 1. TOKENS — light (default) ============================================================================= */ :root { color-scheme: light; /* native UI (form controls, scrollbars) follows theme */ /* Warm neutral palette — quiet but with desert undertones */ --bg: #faf6ee; /* warm cream */ --bg-elev: #ffffff; --bg-warm: #f3ecdc; /* sand */ --bg-deep: #e8dfc8; --ink: #1f1810; /* warm near-black */ --ink-soft: #3c3127; --ink-muted: #6f6253; --border: #e6dec8; --border-strong: #cdc09b; /* Single warm accent — Tucson terracotta */ --accent: #c4452a; --accent-deep: #9c3420; --accent-soft: #fbede7; --accent-ink: #ffffff; /* Footer / night sky — deep navy matching the logo, with cool text tones for legibility. (Token name kept as --dusk for historical compatibility even though the palette is now night-blue rather than desert dusk.) */ --dusk: #0e2349; --dusk-deep: #061731; --dusk-text: #dbe4f3; --dusk-muted: #8c9bb8; --night-blue: #1a3a6b; --night-blue-deep: #122a4f; /* Footer scene — light mode default is DAY (sun, no stars, warm sky). Dark token blocks below override these to a NIGHT sky (moon + stars). */ --footer-sky: linear-gradient(180deg, #4d7da2 0%, #7aa7c8 100%); --footer-celestial-fill: #ffd56b; --footer-celestial-opacity: 1; --footer-glow-opacity: 0.30; --footer-star-opacity: 0; --footer-range-back-fill: #c1d4e3; --footer-range-back-opacity: 0.32; --footer-range-mid-fill: #a3bbd0; --footer-range-mid-opacity: 0.48; --link: #1f4f8b; --focus: #2563eb; --emergency: #c4351c; --emergency-deep: #8a0e0e; /* Category colors — curated, harmonized */ --cat-emergency: #c4452a; --cat-family: #4a6c8a; --cat-women: #7d4a6c; --cat-men: #3d5a7b; --cat-youth: #617a4b; --cat-food: #398050; --cat-veterans: #2d4356; --cat-domestic_violence: #8a3d44; --cat-employment: #8c6c35; --cat-outreach: #5a6273; --cat-civic: #6b4a8a; --cat-drop_in: #3a7d6d; --cat-coordinated_entry: #8a5e3a; --cat-prevention: #1f6e7e; --cat-heat: #a4631f; --cat-recovery: #4a5aa8; --cat-behavioral_health: #2c7a8c; /* Type — Geist with system fallback */ --font-sans: 'Geist', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: var(--font-sans); --fs-display: clamp(2.6rem, 8.5vw, 4rem); --fs-h1: clamp(2rem, 6vw, 2.85rem); --fs-h2: clamp(1.3rem, 3.4vw, 1.55rem); --fs-h3: 1.1rem; --fs-body: 1.0625rem; --fs-small: 0.93rem; --fs-tiny: 0.78rem; --tap: 52px; --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(31,24,16,.04), 0 1px 3px rgba(31,24,16,.05); --shadow-md: 0 2px 4px rgba(31,24,16,.04), 0 8px 20px rgba(31,24,16,.07); --shadow-lg: 0 4px 8px rgba(31,24,16,.05), 0 16px 36px rgba(31,24,16,.10); } /* ============================================================================= 2. TOKENS — dark (OS preference + explicit override) ----------------------------------------------------------------------------- Applied when: - OS prefers dark AND no explicit data-theme is set, OR - Duplicated intentionally so the explicit override always beats OS preference. ============================================================================= */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #11151e; --bg-elev: #181d28; --bg-warm: #1d2330; --bg-deep: #252d3d; --ink: #f3ede0; --ink-soft: #d8d1c0; --ink-muted: #a8a092; --border: #2a3140; --border-strong: #46506a; --accent: #e2674a; --accent-deep: #c4452a; --accent-soft: #2a1e18; --accent-ink: #11151e; --dusk: #061731; --dusk-deep: #030b1c; --dusk-text: #dbe4f3; --dusk-muted: #7484a4; --night-blue: #1a3a6b; --night-blue-deep: #122a4f; --link: #8db4e8; --focus: #8db4e8; --emergency: #ef5c5c; --emergency-deep: #b81818; --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3); --shadow-md: 0 2px 4px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.4); --shadow-lg: 0 4px 8px rgba(0,0,0,.4), 0 16px 36px rgba(0,0,0,.5); /* Footer scene — NIGHT (moon + stars) */ --footer-sky: var(--dusk); --footer-celestial-fill: #f4ead0; --footer-celestial-opacity: 0.92; --footer-glow-opacity: 0.08; --footer-star-opacity: 0.85; --footer-range-back-fill: #dbe4f3; --footer-range-back-opacity: 0.08; --footer-range-mid-fill: #dbe4f3; --footer-range-mid-opacity: 0.14; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #11151e; --bg-elev: #181d28; --bg-warm: #1d2330; --bg-deep: #252d3d; --ink: #f3ede0; --ink-soft: #d8d1c0; --ink-muted: #a8a092; --border: #2a3140; --border-strong: #46506a; --accent: #e2674a; --accent-deep: #c4452a; --accent-soft: #2a1e18; --accent-ink: #11151e; --dusk: #061731; --dusk-deep: #030b1c; --dusk-text: #dbe4f3; --dusk-muted: #7484a4; --night-blue: #1a3a6b; --night-blue-deep: #122a4f; --link: #8db4e8; --focus: #8db4e8; --emergency: #ef5c5c; --emergency-deep: #b81818; --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3); --shadow-md: 0 2px 4px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.4); --shadow-lg: 0 4px 8px rgba(0,0,0,.4), 0 16px 36px rgba(0,0,0,.5); /* Footer scene — NIGHT (moon + stars) */ --footer-sky: var(--dusk); --footer-celestial-fill: #f4ead0; --footer-celestial-opacity: 0.92; --footer-glow-opacity: 0.08; --footer-star-opacity: 0.85; --footer-range-back-fill: #dbe4f3; --footer-range-back-opacity: 0.08; --footer-range-mid-fill: #dbe4f3; --footer-range-mid-opacity: 0.14; } /* ============================================================================= 3. RESET / BASE ============================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* `hidden` would make body a scroll container and break the sticky header; `clip` cuts horizontal overflow without doing that. (hidden = old-browser fallback) */ html, body { overflow-x: hidden; overflow-x: clip; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.55; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .2s ease, color .2s ease; } img, svg { max-width: 100%; height: auto; vertical-align: middle; } button { font: inherit; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; } /* skip link */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--bg-elev); padding: 12px 18px; border-radius: var(--radius-sm); z-index: 9999; font-weight: 600; } .skip-link:focus { left: 12px; top: 12px; } /* ============================================================================= 4. LAYOUT — container, main ============================================================================= */ .container { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 20px; } @media (min-width: 980px) { .container { max-width: 960px; } } @media (min-width: 1100px) { .container { max-width: 1180px; } } /* Wide pages (map): the split map+list layout earns more of a large screen than the reading-width container. Must follow the .container media rules above — same specificity, so source order is what lets it win. */ .container--wide { max-width: 1400px; } /* main carries .container, whose padding (0 20px) outranks a bare `main` selector — match its specificity or the top padding silently dies. */ main.container { padding-top: 28px; } @media (min-width: 720px) { main.container { padding-top: 56px; } } /* ============================================================================= 5. TYPOGRAPHY — h1/h2/h3, eyebrow, lead, links, prose ============================================================================= */ h1, h2, h3 { font-family: var(--font-display); margin: 0; } h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 12px; } h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; margin: 28px 0 12px; } h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; } p { margin: 0 0 14px; } a { color: var(--link); text-decoration-thickness: 1.5px; text-underline-offset: 3px; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-tiny); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--accent-deep); margin-bottom: 14px; } .eyebrow::before { content: ""; display: inline-block; width: 24px; height: 2px; background: var(--accent); border-radius: 2px; } .lead { font-size: 1.15rem; color: var(--ink-soft); margin: 0 0 22px; max-width: 44ch; line-height: 1.45; font-weight: 400; } /* Reading-width container for long-form text (about page). */ .prose { max-width: 62ch; } .prose p { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; } .prose h2 { margin-top: 36px; } /* ============================================================================= 6. HEADER — site header, brand, lang + theme toggles ============================================================================= */ /* One sticky unit: brand row + nav. On phones the row wraps — brand and toggles on top, an app-style tab bar below. From 980px up everything sits on a single row: logo · centered links · toggles. */ .site-header { border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; /* Solid below 980px: backdrop-filter would become the containing block for the fixed bottom tab bar (which lives inside this header) and pin it to the header instead of the viewport. Blur is desktop-only. */ background: var(--bg); } @media (min-width: 980px) { .site-header { backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); background: color-mix(in srgb, var(--bg) 92%, transparent); } } .site-header__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; min-height: 56px; } .site-header__actions { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; } .brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 0; color: var(--ink); text-decoration: none; } /* Phones get the round compass mark + wordmark text; the in the header swaps in the horizontal logo (which carries its own text) at 980px. */ .brand__logo { height: 38px; width: 38px; display: block; object-fit: contain; } .brand__name { font-family: var(--font-display); font-weight: 800; font-size: 1.06rem; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; } @media (min-width: 980px) { .site-header__row { flex-wrap: nowrap; gap: 24px; min-height: 84px; } .brand { padding: 2px 0; } .brand__logo { height: 78px; width: auto; } .brand__name { display: none; } } /* Super-small screens (≤374px, incl. common 360px Androids): drop the wordmark so the theme + language toggles stay on the brand's line instead of wrapping beneath it. The round logo keeps its "Tucson Compass" aria-label. */ @media (max-width: 374px) { .brand__name { display: none; } } /* Pill button base used by header toggles */ .header-btn { background: var(--bg-elev); color: var(--ink); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 8px 14px; min-height: 40px; font-weight: 600; font-size: 0.9rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .15s ease, border-color .15s ease, color .15s ease; } .header-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--bg-elev); } .header-btn svg { width: 16px; height: 16px; } .lang-toggle { /* identical styling to .header-btn; kept as alias */ } .theme-toggle { padding: 8px; width: 40px; height: 40px; justify-content: center; } .theme-toggle svg { width: 18px; height: 18px; } /* ============================================================================= 7. NAV — primary nav ============================================================================= */ /* Lives inside .site-header__row (see header comment above). */ .nav-primary ul { margin: 0; padding: 0; list-style: none; } .nav-primary a { color: var(--ink-muted); text-decoration: none; font-weight: 600; white-space: nowrap; transition: color .15s ease, background .15s ease; } .nav-primary a:hover { color: var(--ink); } .nav-primary [data-icon] { display: inline-flex; flex: 0 0 auto; } /* Phone / tablet: fixed bottom tab bar (app-style, thumb-reachable) — four equal cells, icon over label. The active tab gets a soft accent pill behind its icon. Body padding reserves room so content and the footer never hide behind the bar. */ @media (max-width: 979px) { .nav-primary { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--bg-elev) 94%, transparent); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); box-shadow: 0 -4px 16px rgba(0, 0, 0, .06); padding-bottom: env(safe-area-inset-bottom, 0px); } body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } .nav-primary ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 560px; margin: 0 auto; padding: 0 8px; } .nav-primary a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px 8px; font-size: 0.72rem; letter-spacing: 0.01em; } .nav-primary [data-icon] { padding: 3px 14px; border-radius: var(--radius-pill); transition: background .15s ease, color .15s ease; } .nav-primary svg { width: 21px; height: 21px; } .nav-primary a[aria-current="page"] { color: var(--ink); font-weight: 700; } .nav-primary a[aria-current="page"] [data-icon] { background: var(--accent-soft); color: var(--accent-deep); } } /* Desktop: inline pill links centered between the brand and the toggles. */ @media (min-width: 980px) { .nav-primary { display: flex; justify-content: center; flex: 1 1 auto; min-width: 0; } .nav-primary ul { display: flex; gap: 4px; } .nav-primary a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 0.95rem; border-radius: var(--radius-pill); } .nav-primary svg { width: 18px; height: 18px; } .nav-primary a:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); } .nav-primary a[aria-current="page"] { color: var(--accent-deep); background: var(--accent-soft); } } /* Dark mode: --accent-deep on --accent-soft is only ~3:1 — lift the active link/icon to --accent to clear AA contrast. */ @media (min-width: 980px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav-primary a[aria-current="page"] { color: var(--accent); } } @media (min-width: 980px) { :root[data-theme="dark"] .nav-primary a[aria-current="page"] { color: var(--accent); } } @media (max-width: 979px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav-primary a[aria-current="page"] [data-icon] { color: var(--accent); } } @media (max-width: 979px) { :root[data-theme="dark"] .nav-primary a[aria-current="page"] [data-icon] { color: var(--accent); } } /* ============================================================================= 8. OFFLINE BANNER ============================================================================= */ .offline-banner { background: #fbe6a3; color: var(--ink); padding: 10px 16px; text-align: center; font-size: 0.92rem; font-weight: 600; border-bottom: 1px solid #d9bc4a; } .offline-banner[hidden] { display: none; } /* Dark: the pale-yellow banner would pair with near-white --ink text (unreadable); flip to dim amber with light text instead. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .offline-banner { background: #3a2f10; color: #fbe6a3; border-bottom-color: #5c4a1a; } } :root[data-theme="dark"] .offline-banner { background: #3a2f10; color: #fbe6a3; border-bottom-color: #5c4a1a; } /* ============================================================================= 9. COMPONENTS — chips ============================================================================= */ .chip { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 6px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--bg-elev); color: var(--ink); font-weight: 500; font-size: 0.92rem; cursor: pointer; white-space: nowrap; transition: background .12s ease, border-color .12s ease, color .12s ease; } .chip:hover { background: var(--bg-warm); } .chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); } .chip svg { width: 14px; height: 14px; } .chip__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cat); display: inline-block; flex: 0 0 10px; } /* ============================================================================= 10. COMPONENTS — action buttons (used on cards) ============================================================================= */ .act { display: flex; align-items: center; gap: 8px; padding: 9px 11px; min-height: var(--tap); text-decoration: none; border: 1px solid var(--border-strong); border-radius: var(--radius); font-weight: 600; background: var(--bg-elev); color: var(--ink); transition: transform .1s ease, box-shadow .15s ease, background .12s ease, border-color .12s ease; } @media (min-width: 640px) { .act { gap: 10px; padding: 12px 14px; } } .act:hover { box-shadow: var(--shadow-sm); text-decoration: none; } .act svg { width: 20px; height: 20px; flex: 0 0 20px; } @media (min-width: 640px) { .act svg { width: 22px; height: 22px; flex: 0 0 22px; } } .act__label { display: block; font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.75; line-height: 1; margin-bottom: 2px; font-weight: 600; } @media (min-width: 640px) { .act__label { font-size: 0.72rem; } } .act__val { display: block; font-size: 0.96rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; /* Long street names (e.g. "1234 N Stone Ave") would otherwise force the 2-column action grid to overflow on narrow phones. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 640px) { .act__val { font-size: 1.02rem; white-space: normal; } } .act__txt { flex: 1; min-width: 0; } .act--call { background: var(--c, var(--accent)); color: #fff; border-color: var(--c, var(--accent)); } .act--call:hover { background: var(--ink); border-color: var(--ink); } .act--dir { background: var(--bg-elev); color: var(--ink); } .act--dir:hover { background: var(--bg-warm); } /* ============================================================================= 11. COMPONENTS — cards ============================================================================= */ .card { --c: var(--cat-outreach); background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); position: relative; overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .15s ease, transform .12s ease, border-color .12s ease; scroll-margin-top: 76px; /* clear the sticky header on anchor jumps */ } /* Deep-linked card (directory.html#r-id): hold a visible highlight long enough for the eye to land on it. */ .card--target { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent), var(--shadow-md); } .card:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); } .card__body { padding: 12px 12px; min-width: 0; } @media (min-width: 640px) { .card__body { padding: 18px 20px 20px; } } .card__top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } @media (min-width: 640px) { .card__top { align-items: flex-start; gap: 14px; margin-bottom: 10px; } } .card__icon-frame { width: 36px; height: 36px; flex: 0 0 36px; display: inline-flex; align-items: center; justify-content: center; background: var(--c); color: #fff; border-radius: 10px; box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--c) 50%, transparent); } .card__icon-frame svg { width: 20px; height: 20px; } @media (min-width: 640px) { .card__icon-frame { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; } .card__icon-frame svg { width: 24px; height: 24px; } } .card__heading { min-width: 0; flex: 1; } .card__logo { flex: 0 0 32px; width: 32px; height: 32px; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 3px; opacity: 0.85; transition: opacity .15s ease; } .card:hover .card__logo { opacity: 1; } @media (min-width: 640px) { .card__logo { flex: 0 0 44px; width: 44px; height: 44px; padding: 4px; } } .card__name { font-size: 1.02rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; margin: 0; word-wrap: break-word; } @media (min-width: 640px) { .card__name { font-size: 1.2rem; } } .card__cats { margin-top: 3px; font-size: 0.82rem; font-weight: 500; color: var(--ink-muted); /* Wrap to as many lines as needed — truncating with an ellipsis hid which populations a service serves, which is exactly the info people need. */ white-space: normal; overflow-wrap: break-word; } @media (min-width: 640px) { .card__cats { font-size: 0.85rem; margin-top: 4px; } } .card__addr { display: flex; align-items: flex-start; gap: 8px; font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 8px; line-height: 1.35; } .card__addr svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; color: var(--ink-muted); } .card__addr--confidential { font-style: italic; color: var(--ink-muted); } .card__dist { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--c, var(--ink-muted)); margin-bottom: 8px; } .card__dist svg { width: 15px; height: 15px; flex: 0 0 15px; } @media (min-width: 640px) { .card__addr { font-size: 0.96rem; margin-bottom: 12px; line-height: 1.4; } .card__addr svg { width: 18px; height: 18px; flex: 0 0 18px; } } .card__field { font-size: 0.91rem; margin-bottom: 6px; line-height: 1.45; color: var(--ink-soft); } .card__field-label { display: inline; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); margin-right: 6px; vertical-align: 1px; } .card__field-val { color: var(--ink-soft); } @media (min-width: 640px) { .card__field { font-size: 0.94rem; margin-bottom: 8px; } .card__field-label { font-size: 0.7rem; } } .card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; } .card__actions--solo { grid-template-columns: 1fr; } /* On phones, stack actions one per row. The 2-column grid forced long phone/address values to ellipsis-truncate (and could push a button past the card edge); full-width rows give each value room to show in full. */ @media (max-width: 639px) { .card__actions { grid-template-columns: 1fr; } .act__val { white-space: normal; overflow: visible; text-overflow: clip; } } @media (min-width: 640px) { .card__actions { margin-top: 16px; } } /* Collapsible details — eligibility/hours/notes are tucked behind a "Show details" toggle so cards stay short by default. Uses native
/ for accessibility and no-JS support. */ .card__more { margin: 2px 0 0; } .card__more-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 0.85rem; font-weight: 600; color: var(--ink-muted); padding: 8px 0; user-select: none; -webkit-tap-highlight-color: transparent; } .card__more-toggle::-webkit-details-marker { display: none; } .card__more-toggle::marker { content: ""; } .card__more-toggle:hover { color: var(--ink); } .card__more-toggle svg { width: 14px; height: 14px; transform: rotate(90deg); transition: transform .15s ease; } .card__more[open] .card__more-toggle svg { transform: rotate(-90deg); } .card__more-text--hide { display: none; } .card__more[open] .card__more-text--show { display: none; } .card__more[open] .card__more-text--hide { display: inline; } .card__more-body { padding-top: 4px; } .card__more-body .card__field:last-child { margin-bottom: 0; } .card__note { margin-top: 14px; padding: 10px 12px; background: var(--bg-warm); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.88rem; color: var(--ink-soft); } /* ============================================================================= 12. COMPONENTS — badges ============================================================================= */ .badges { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 10px; } @media (min-width: 640px) { .badges { gap: 6px; margin: 8px 0 12px; } } .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.01em; background: var(--bg-warm); color: var(--ink-soft); border: 1px solid var(--border); } @media (min-width: 640px) { .badge { padding: 4px 10px; font-size: 0.76rem; } } .badge svg { width: 12px; height: 12px; } .badge--24-7 { background: #e4f0e8; color: #1f5938; border-color: #c7e0cf; } .badge--hotline { background: #fbe6e6; color: #8a0e0e; border-color: #f0c5c5; } .badge--verified { background: var(--bg-warm); } /* ============================================================================= 13. COMPONENTS — note box ============================================================================= */ .note-box { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px; font-size: 0.96rem; display: flex; align-items: flex-start; gap: 12px; } .note-box svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--accent); margin-top: 2px; } /* ============================================================================= 14. COMPONENTS — no-results ============================================================================= */ .no-results { text-align: center; padding: 56px 20px; color: var(--ink-muted); background: var(--bg-elev); border: 1px dashed var(--border-strong); border-radius: var(--radius); } .no-results svg { width: 44px; height: 44px; color: var(--ink-muted); margin-bottom: 10px; } /* ============================================================================= 15. PAGE — home ============================================================================= */ /* Hero — tighter than the default eyebrow/h1/lead so the page can get to the CTA + need-grid sooner. Scoped to .hero so other pages' typography (about, match) keeps the bigger default treatment. */ .hero { margin-bottom: 20px; } .hero .eyebrow { margin-bottom: 6px; } .hero h1 { font-size: clamp(1.75rem, 5.5vw, 2.4rem); margin-bottom: 4px; } .hero .lead { font-size: 1.02rem; line-height: 1.4; margin-bottom: 0; max-width: 38ch; } @media (min-width: 640px) { .hero { margin-bottom: 28px; } .hero h1 { font-size: clamp(2rem, 5vw, 2.6rem); margin-bottom: 6px; } .hero .lead { font-size: 1.1rem; } } /* Full-bleed home hero — the downtown Tucson skyline sits behind the emergency numbers, the headline, and the primary CTA. main.home-main drops the .container wrapper so this section spans the viewport; the inner .container keeps the copy aligned with the content below. */ .home-hero { position: relative; isolation: isolate; background-color: var(--bg-deep); background-image: linear-gradient(180deg, rgba(18,13,8,0.50) 0%, rgba(18,13,8,0.58) 50%, rgba(18,13,8,0.82) 100%), url("../images/downtown-tucson-sunset.webp"); background-size: cover; background-position: center 62%; background-repeat: no-repeat; } /* Desktop hero is short and wide, so `cover` crops to the foreground and loses the skyline — raise the focal point to keep downtown in frame. */ @media (min-width: 720px) { .home-hero { background-position: center 48%; } } .home-hero__inner { padding-top: 22px; padding-bottom: 36px; } @media (min-width: 720px) { .home-hero__inner { padding-top: 34px; padding-bottom: 52px; } } .home-hero .urgent-strip { margin-bottom: 28px; } .home-hero__copy { margin-bottom: 20px; max-width: 640px; } /* Desktop: set the headline + lead beside the primary CTA so the hero reads in one glance and the page reaches the content below sooner. The emergency strip stays full-width across the top of the grid. */ @media (min-width: 880px) { .home-hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; column-gap: 44px; align-items: center; } .home-hero .urgent-strip { grid-column: 1 / -1; margin-bottom: 38px; } .home-hero__copy { margin-bottom: 0; max-width: none; } .home-hero .match-cta { align-self: center; } } .home-hero .eyebrow { color: #ffd9c9; margin-bottom: 10px; } .home-hero .eyebrow::before { background: var(--accent); } .home-hero h1 { color: #fff; font-size: clamp(2rem, 6vw, 2.85rem); letter-spacing: -0.02em; margin: 0 0 8px; text-shadow: 0 1px 18px rgba(0,0,0,0.38); } .home-hero .lead { color: rgba(255,255,255,0.94); font-size: 1.08rem; line-height: 1.45; max-width: 48ch; margin: 0; text-shadow: 0 1px 12px rgba(0,0,0,0.40); } @media (min-width: 640px) { .home-hero .lead { font-size: 1.15rem; } } .home-hero .match-cta { margin: 0; } /* Content below the hero (browse + tools) regains the normal page rhythm. */ .home-content { padding-top: 28px; padding-bottom: 4px; } @media (min-width: 720px) { .home-content { padding-top: 44px; } } /* Emergency strip — direct, contained, calmer than before */ .urgent-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 18px; } @media (min-width: 640px) { .urgent-strip { gap: 8px; margin-bottom: 28px; } } .urgent-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; min-width: 0; text-decoration: none; color: #fff; font-weight: 700; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .15s ease; } @media (min-width: 640px) { .urgent-tile { flex-direction: row; align-items: center; gap: 14px; padding: 16px 18px; min-height: 88px; } } .urgent-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); text-decoration: none; } /* Desktop: an information strip, not buttons — nobody dials from a desktop. Kill the click/hover affordance and slim the tiles down. */ @media (min-width: 980px) { .urgent-tile { pointer-events: none; min-height: 0; padding: 10px 16px; gap: 12px; } } .urgent-tile--911 { background: var(--emergency); } .urgent-tile--911:hover { background: var(--emergency-deep); } .urgent-tile--211 { background: #1f3a5c; } .urgent-tile--211:hover { background: #15263d; } .urgent-tile--988 { background: #4a2d7a; } .urgent-tile--988:hover { background: #36205c; } .urgent-tile--dv { background: #7a3458; } .urgent-tile--dv:hover { background: #5b2541; } .urgent-tile--dv .urgent-tile__num { display: inline-flex; align-items: center; justify-content: center; } .urgent-tile--dv .urgent-tile__num svg { width: 28px; height: 28px; } @media (min-width: 640px) { .urgent-tile--dv .urgent-tile__num svg { width: 32px; height: 32px; } } .urgent-tile__num { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; flex: 0 0 auto; } @media (min-width: 640px) { .urgent-tile__num { font-size: 2rem; } } @media (min-width: 980px) { .urgent-tile__num { font-size: 1.7rem; } } .urgent-tile__body { line-height: 1.2; min-width: 0; } .urgent-tile__label { display: block; font-size: 0.72rem; font-weight: 600; opacity: 0.85; letter-spacing: 0.02em; } .urgent-tile__desc { display: block; font-size: 0.88rem; font-weight: 600; margin-top: 2px; } @media (min-width: 640px) { .urgent-tile__label { font-size: 0.78rem; } .urgent-tile__desc { font-size: 0.96rem; } } /* Section heading row */ .section-q { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 0 10px; } @media (min-width: 640px) { .section-q { margin: 8px 0 16px; } } .section-q h2 { margin: 0; } /* "What do you need?" — category grid */ .need-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; } @media (min-width: 560px) { .need-grid { grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 28px; } } @media (min-width: 880px) { .need-grid { grid-template-columns: repeat(4, 1fr); margin-bottom: 36px; } } /* Category tiles — left-aligned and editorial, not centered icon-over-label. Each tile wears its category color as a filled icon badge plus a faint background wash, so the grid reads as a designed set rather than a stack of identical cards. */ .need-tile { --icon-arrow: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14M13%206l6%206-6%206'/%3E%3C/svg%3E"); position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px 14px 15px; min-height: 112px; background: linear-gradient(155deg, color-mix(in srgb, var(--cat, var(--accent)) 9%, var(--bg-elev)) 0%, var(--bg-elev) 62%); color: var(--ink); text-decoration: none; border: 1px solid color-mix(in srgb, var(--cat, var(--accent)) 20%, var(--border)); border-radius: var(--radius); text-align: left; font-weight: 700; overflow: hidden; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease; box-shadow: var(--shadow-sm); } @media (min-width: 560px) { .need-tile { gap: 14px; padding: 16px 16px 17px; min-height: 128px; } } .need-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--cat, var(--accent)); background: linear-gradient(155deg, color-mix(in srgb, var(--cat, var(--accent)) 15%, var(--bg-elev)) 0%, var(--bg-elev) 70%); text-decoration: none; } .need-tile:active { transform: translateY(-1px); } /* hover arrow — quiet directional cue, top-right */ .need-tile::after { content: ""; position: absolute; top: 16px; right: 14px; width: 16px; height: 16px; background: var(--cat, var(--accent)); -webkit-mask: var(--icon-arrow) center / contain no-repeat; mask: var(--icon-arrow) center / contain no-repeat; opacity: 0; transform: translateX(-4px); transition: opacity .16s ease, transform .16s ease; } .need-tile:hover::after { opacity: 1; transform: translateX(0); } /* the top accent bar is gone — the icon badge carries the color now */ .need-tile__bar { display: none; } .need-tile__icon { width: 42px; height: 42px; flex: 0 0 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--cat, var(--accent)); color: #fff; box-shadow: 0 2px 7px color-mix(in srgb, var(--cat, var(--accent)) 38%, transparent); } @media (min-width: 560px) { .need-tile__icon { width: 46px; height: 46px; flex: 0 0 46px; } } .need-tile__icon svg { width: 24px; height: 24px; } @media (min-width: 560px) { .need-tile__icon svg { width: 26px; height: 26px; } } .need-tile__label { font-size: 0.96rem; line-height: 1.2; letter-spacing: -0.01em; margin-top: auto; max-width: 14ch; } @media (min-width: 560px) { .need-tile__label { font-size: 1.04rem; } } /* Tools row */ .tools-row { display: grid; gap: 10px; margin-bottom: 24px; } @media (min-width: 640px) { .tools-row { grid-template-columns: 1fr 1fr; gap: 12px; } } @media (min-width: 1100px) { .tools-row { grid-template-columns: repeat(5, 1fr); } } /* Tool tiles — secondary to the category grid, so they stay as quiet rows rather than bold cards: a soft per-tool color chip, and a trailing mark that signals where the link goes (chevron in-site, ↗ for new-tab links). */ .tool-tile { --c: var(--accent); --tool-chev: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%206l6%206-6%206'/%3E%3C/svg%3E"); --tool-ext: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%2017L17%207M9%207h8v8'/%3E%3C/svg%3E"); --tool-mark: var(--tool-chev); position: relative; display: flex; align-items: center; gap: 14px; padding: 15px 40px 15px 16px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); color: var(--ink); text-decoration: none; min-height: 76px; box-shadow: var(--shadow-sm); transition: transform .14s ease, box-shadow .15s ease, border-color .15s ease; } .tool-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--c) 50%, var(--border)); text-decoration: none; } .tool-tile[target="_blank"] { --tool-mark: var(--tool-ext); } .tool-tile::after { content: ""; position: absolute; top: 50%; right: 14px; width: 16px; height: 16px; transform: translateY(-50%) translateX(-3px); background: color-mix(in srgb, var(--c) 70%, var(--ink-muted)); -webkit-mask: var(--tool-mark) center / contain no-repeat; mask: var(--tool-mark) center / contain no-repeat; opacity: 0.5; transition: opacity .15s ease, transform .15s ease; } .tool-tile:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); } .tool-tile__icon { width: 42px; height: 42px; flex: 0 0 42px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c) 15%, var(--bg-elev)); color: var(--c); border-radius: 11px; } .tool-tile__icon svg { width: 21px; height: 21px; } .tool-tile__label { font-weight: 700; font-size: 1rem; display: block; line-height: 1.25; color: var(--ink); } .tool-tile__sub { display: block; font-size: 0.88rem; color: var(--ink-muted); font-weight: 500; margin-top: 2px; } /* ============================================================================= 16. PAGE — directory ============================================================================= */ .dir-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; } .dir-head h1 { font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 0; } /* On phones, the primary nav already highlights "Directory" with aria-current. Visually hide the H1 to reclaim ~50px above the fold, but keep it in the DOM for screen readers and SEO. */ @media (max-width: 639px) { .dir-head { margin: 0; gap: 0; } .dir-head h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } } @media (min-width: 640px) { .dir-head { margin-bottom: 18px; } .dir-head h1 { font-size: var(--fs-h1); letter-spacing: -0.03em; } } .controls { display: grid; gap: 10px; margin-bottom: 16px; } @media (min-width: 640px) { .controls { gap: 14px; margin-bottom: 24px; } } .search-wrap { position: relative; } .search-wrap__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--ink-muted); pointer-events: none; } .search-input { width: 100%; min-height: var(--tap); padding: 12px 14px 12px 44px; font-size: 1.02rem; font-weight: 500; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg-elev); color: var(--ink); box-shadow: var(--shadow-sm); transition: border-color .15s ease, box-shadow .15s ease; } .search-input::placeholder { color: var(--ink-muted); font-weight: 400; } .search-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } /* Filter chips — wrap on every screen size. Horizontal scroll was tried but (a) flex-wrap: nowrap forced the parent grid track wider than the viewport, pushing the search input off-screen, and (b) discovering a horizontal scroll inside a vertical-scrolling page is poor mobile UX. With 10 chips at ~80px each, wrapping fills 2-3 rows on mobile, which keeps every option visible. */ .filter-row { display: flex; flex-wrap: wrap; gap: 6px; } /* On phones the 11 categories are laid out in a single horizontally scrollable row instead of wrapping to 2–3 rows, reclaiming vertical space above the results. The scroll is contained by the parent grid track (`.controls > * { min-width: 0 }`), so it can't widen the page or push the search input off-screen. Scrollbar is hidden; scroll-snap makes paging feel deliberate. Tap target stays ≥34px. */ @media (max-width: 639px) { .filter-row { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; /* a little breathing room so chip shadows/edges aren't clipped */ padding-bottom: 2px; } .filter-row::-webkit-scrollbar { display: none; } .filter-row .chip { flex: 0 0 auto; scroll-snap-align: start; min-height: 34px; padding: 5px 11px; font-size: 0.86rem; gap: 6px; } .filter-row .chip__dot { width: 8px; height: 8px; flex: 0 0 8px; } } @media (min-width: 640px) { .filter-row { gap: 8px; } } /* Ensure the filter-row's wrapper div can't force the parent grid track wider than the viewport (which was the root cause of the search-input overflow). */ .controls > * { min-width: 0; } .controls__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: space-between; } .results-meta { color: var(--ink-muted); font-size: 0.9rem; font-weight: 500; } .results { display: grid; gap: 12px; } @media (min-width: 640px) { .results { gap: 16px; } } /* ============================================================================= 17. PAGE — map (app-like on mobile) ----------------------------------------------------------------------------- Mobile-first goals: - Big edge-to-edge map; full-bleed feel without breaking the container - Compact filter row + view toggle (Map / List) sit just below the title - FAB for locate-me overlays the map (no extra row of controls) - Confidential hotlines collapse to a single pill that opens a modal - In Map view the page is an app frame: no page scroll, map flexes to fit Tablet + desktop (≥720px) use the side-by-side map + list with full controls. ============================================================================= */ /* On the map page only, trim the page padding so more screen is map */ body[data-page="map"] main { padding-bottom: 28px; } @media (min-width: 720px) { body[data-page="map"] main { padding-bottom: 40px; } body[data-page="map"] main.container { padding-top: 24px; } } .map-head { margin-bottom: 14px; } .map-head h1 { margin-bottom: 4px; font-size: clamp(1.7rem, 5.5vw, 2.4rem); } .lead--tight { font-size: 0.95rem; margin-bottom: 14px; max-width: 60ch; color: var(--ink-muted); } @media (min-width: 720px) { .map-head { margin-bottom: 12px; } .map-head h1 { margin-bottom: 4px; } .lead--tight { font-size: 1rem; margin-bottom: 12px; color: var(--ink-soft); } } /* Hotline callout — for confidential-location 24/7 resources. On phones this same markup is reused inside a modal (see .modal), where the .act buttons stay as big filled tap targets. The desktop block below is deliberately flatter: one panel, no nested cards, phone numbers as quiet inline rows rather than saturated button bars. */ .hotline-block { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); border-radius: var(--radius-lg); padding: 16px 18px; margin-top: 22px; } .hotline-block__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; } .hotline-block__icon { width: 40px; height: 40px; flex: 0 0 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; border-radius: var(--radius-sm); } .hotline-block__icon svg { width: 20px; height: 20px; } .hotline-block__title { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 2px; } .hotline-block__sub { margin: 0; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.45; } .hotline-block__items { display: grid; gap: 10px; } @media (min-width: 640px) { .hotline-block__items { grid-template-columns: 1fr 1fr; } } .hotline-card { background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; } .hotline-card__name { font-weight: 700; font-size: 1rem; } .hotline-card__sub { font-size: 0.85rem; color: var(--ink-muted); margin-top: 2px; } .hotline-card__actions { display: grid; gap: 6px; } .hotline-card__actions .act { min-height: 48px; padding: 10px 12px; } /* Desktop ≥640px: flatten the block so it stops reading as boxes-in-boxes. Drop the inner card chrome and turn each phone into a clean, scannable row (accent icon · small label · number link) instead of a filled red bar. These overrides apply only to the desktop .hotline-block, never the modal. */ @media (min-width: 640px) { .hotline-block__head { margin-bottom: 4px; } .hotline-block__items { column-gap: 40px; row-gap: 0; } /* Hairline + spacing separates entries; no card outline needed. The first row in each column drops its top rule (it sits right under the header). */ .hotline-block .hotline-card { background: none; border: 0; border-top: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); border-radius: 0; padding: 16px 0; gap: 8px; } .hotline-block__items > .hotline-card:nth-child(1), .hotline-block__items > .hotline-card:nth-child(2) { border-top: 0; padding-top: 8px; } .hotline-block .hotline-card__name { font-size: 1.02rem; } .hotline-block .hotline-card__actions { gap: 0; } /* Phone rows: quiet text links, not buttons. */ .hotline-block .hotline-card__actions .act, .hotline-block .hotline-card__actions .act--call { background: none; border: 0; border-radius: 0; box-shadow: none; color: var(--ink); min-height: 0; padding: 6px 0; gap: 11px; } .hotline-block .hotline-card__actions .act:hover { background: none; box-shadow: none; } .hotline-block .hotline-card__actions .act svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--accent); } .hotline-block .hotline-card__actions .act__label { color: var(--ink-muted); opacity: 1; } .hotline-block .hotline-card__actions .act--call .act__val { color: var(--accent); } .hotline-block .hotline-card__actions .act:hover .act__val { text-decoration: underline; } } /* Two-axis filter as a fill-in-the-blank sentence: "I am a [▾] looking for [▾]". Custom listbox (.tw-select) so the open menu is fully branded. The trigger lights up with the accent + the selection's icon once a real value is chosen. */ .map-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .map-filter-part { display: inline-flex; align-items: center; gap: 9px; font-size: 0.98rem; font-weight: 600; color: var(--ink-soft); } .map-filter-part__lead { white-space: nowrap; letter-spacing: -0.01em; } /* --- custom select --- */ .tw-select { position: relative; display: inline-flex; } .tw-select__btn { display: inline-flex; align-items: center; gap: 8px; width: 100%; font: inherit; font-weight: 700; color: var(--ink); background: var(--bg-elev); border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill); padding: 10px 14px; min-height: 46px; cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease; } .tw-select__btn:hover { border-color: var(--accent); box-shadow: var(--shadow-md); } .tw-select__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent); } .tw-select__glyph { display: inline-flex; width: 17px; height: 17px; color: var(--accent-deep); flex: 0 0 auto; } .tw-select__glyph:empty { display: none; } .tw-select__glyph svg { width: 17px; height: 17px; } .tw-select__value { flex: 1 1 auto; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tw-select__chev { display: inline-flex; width: 15px; height: 15px; color: var(--ink-muted); flex: 0 0 auto; } .tw-select__chev svg { width: 15px; height: 15px; transform: rotate(90deg); transition: transform .15s ease; } .tw-select.is-open .tw-select__chev svg { transform: rotate(270deg); } /* active = a real choice (not the "Anyone/Anything" default) */ .tw-select[data-active="true"] .tw-select__btn { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 11%, var(--bg-elev)); color: var(--accent-deep); } .tw-select[data-active="true"] .tw-select__chev { color: var(--accent-deep); } /* --- branded menu (replaces the OS popup) --- */ .tw-select__menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 100%; max-width: min(300px, 84vw); max-height: 320px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); } .tw-select__menu[hidden] { display: none; } .tw-select__menu:focus-visible { outline: none; } .tw-select__opt { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius-sm); font-weight: 600; color: var(--ink); white-space: nowrap; cursor: pointer; } .tw-select__opt-icon { display: inline-flex; width: 18px; height: 18px; flex: 0 0 18px; color: var(--ink-muted); } .tw-select__opt-icon svg { width: 18px; height: 18px; } .tw-select__opt-label { flex: 1 1 auto; } .tw-select__opt-check { display: inline-flex; width: 16px; height: 16px; flex: 0 0 16px; color: var(--accent); opacity: 0; } .tw-select__opt-check svg { width: 16px; height: 16px; } .tw-select__opt.is-active { background: var(--accent-soft); } .tw-select__opt[aria-selected="true"] { color: var(--accent-deep); } .tw-select__opt[aria-selected="true"] .tw-select__opt-icon { color: var(--accent-deep); } .tw-select__opt[aria-selected="true"] .tw-select__opt-check { opacity: 1; } /* Phones: the inline sentence won't fit, so the two blanks sit side by side as labelled fields (label over control). Saves a whole row of height vs. stacking them, and the controls fill equal halves. */ @media (max-width: 559px) { .map-filters { flex-wrap: nowrap; gap: 10px; align-items: stretch; } .map-filter-part { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: stretch; gap: 4px; } .map-filter-part__lead { font-size: 0.8rem; color: var(--ink-muted); } .tw-select { width: 100%; } /* Right-hand menu opens from the right edge so a wide list can't run off the screen. */ .map-filter-part:last-child .tw-select__menu { left: auto; right: 0; } } /* Controls row — filter chips + locate-me. position/z-index lift the open dropdown menu above the Leaflet map that follows it. */ .map-controls { position: relative; z-index: 30; display: grid; gap: 12px; margin-bottom: 18px; } /* Wide screens: filters and the locate button share one row, buying the map an extra ~50px of height above the fold */ @media (min-width: 1100px) { .map-controls { grid-template-columns: minmax(0, 1fr) auto; align-items: center; margin-bottom: 14px; } } /* Phone-only space tightening (the split layout takes over at 720px): - Hide the title/lead (the nav already labels the page); keep h1 for AT - Filter chips become a single horizontal-scroll row, like Maps/Yelp - Explicit flex order on main's children so the hotline pill can sit below the map in Map view but above the list in List view */ @media (max-width: 719px) { body[data-page="map"] main { display: flex; flex-direction: column; } body[data-page="map"] .map-head { margin: 0; order: -3; } body[data-page="map"] .map-head h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } body[data-page="map"] .map-head .lead { display: none; } /* Each axis row scrolls horizontally and bleeds to the screen edges so the chips use the full width; the two rows stack with their labels above. */ body[data-page="map"] #map-filters .filter-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -20px; padding: 2px 20px 2px; } body[data-page="map"] #map-filters .filter-row::-webkit-scrollbar { display: none; } /* Full-size tap targets — these chips are the page's primary control. */ body[data-page="map"] #map-filters .chip { min-height: 44px; padding: 8px 14px; font-size: 0.92rem; gap: 7px; flex-shrink: 0; } body[data-page="map"] .map-controls { gap: 10px; margin-bottom: 12px; order: -2; } body[data-page="map"] .hotline-pill { order: 10; margin-top: 12px; margin-bottom: 0; } /* List view: the list can be long, so surface the hotline pill above it */ body[data-page="map"][data-map-view="list"] .hotline-pill { order: -1; margin-top: 0; margin-bottom: 12px; } /* List view: keep the Map/List switch reachable while scrolling the list. Sticks just below the sticky header (57px tall on phones) and stacks under it (header is z-index 50) so it never covers the nav. */ .map-layout[data-view="list"] .view-toggle { position: sticky; top: 65px; z-index: 40; box-shadow: var(--shadow-md); } /* Full-bleed map: break out of the container's 20px side padding so the map runs edge-to-edge on phones (Google/Apple Maps style). */ body[data-page="map"] .map-layout__map-wrap { margin-left: -20px; margin-right: -20px; border-radius: 0; } body[data-page="map"] #map { border: 0; border-radius: 0; box-shadow: none; } } .map-controls__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: space-between; } .chip--solid[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; } /* ============== Hotline pill (mobile compact) =================== */ .hotline-pill { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); border-radius: 14px; color: var(--ink); font: inherit; text-align: left; cursor: pointer; margin-bottom: 14px; transition: background .12s ease, border-color .12s ease, transform .08s ease; } .hotline-pill:hover { background: color-mix(in srgb, var(--accent) 12%, var(--accent-soft)); } .hotline-pill:active { transform: translateY(1px); } .hotline-pill__icon { width: 36px; height: 36px; flex: 0 0 36px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; border-radius: 10px; } .hotline-pill__icon svg { width: 18px; height: 18px; } .hotline-pill__body { flex: 1; min-width: 0; line-height: 1.2; } .hotline-pill__label { display: block; font-weight: 700; font-size: 0.98rem; } .hotline-pill__sub { display: block; font-size: 0.8rem; color: var(--ink-muted); margin-top: 2px; } .hotline-pill__chev { color: var(--ink-muted); display: inline-flex; } .hotline-pill__chev svg { width: 16px; height: 16px; } @media (min-width: 720px) { .hotline-pill { display: none; } } /* On phones, hide the full hotline block; on the split layout hide the pill */ @media (max-width: 719px) { .hotline-block { display: none !important; } .map-controls__row { display: none; } } /* ============== View toggle (mobile segmented control) =========== */ .view-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 4px; background: var(--bg-warm); border: 1px solid var(--border); border-radius: var(--radius-pill); /* Lives inside .map-layout now (below the map, above the list); the grid gap handles spacing, so no extra margin is needed. */ margin: 0; } .view-toggle__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; background: transparent; border: 0; border-radius: var(--radius-pill); font-weight: 600; font-size: 1rem; color: var(--ink-muted); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .12s ease, color .12s ease; } .view-toggle__btn svg { width: 18px; height: 18px; } .view-toggle__btn[aria-pressed="true"] { background: var(--bg-elev); color: var(--ink); box-shadow: var(--shadow-sm); } .view-toggle__count { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink-soft); padding: 1px 8px; border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 700; margin-left: 2px; } .view-toggle__btn[aria-pressed="true"] .view-toggle__count { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-deep); } @media (min-width: 720px) { .view-toggle { display: none; } } /* ============== Map / list split layout =========================== */ .map-layout { display: grid; gap: 14px; grid-template-columns: 1fr; } @media (min-width: 720px) { .map-layout { grid-template-columns: minmax(0, 2.2fr) minmax(290px, 1fr); align-items: stretch; gap: 18px; } } /* Phones: the Map page is map-only. The list view duplicated the Directory — which is one tap away in the bottom tab bar — so the Map/List toggle and the list are dropped here, giving the map its full height. (Desktop keeps the side-by-side map + list, where both are visible at once.) */ @media (max-width: 719px) { .view-toggle { display: none; } /* Higher specificity than the base `.map-layout__list { display:flex }` below, which (being later in source at equal specificity) would otherwise win and re-show the list. */ body[data-page="map"] .map-layout__list { display: none; } } .map-layout__map-wrap { position: relative; /* Contain Leaflet's internal z-indexes (panes 400–1000) in their own stacking context — without this the map, pins, and controls render on top of the sticky site header when the page scrolls. */ z-index: 0; height: 68vh; min-height: 420px; max-height: 720px; } /* Split layout: size map + list so they end near the fold instead of trapping the scroll wheel for an extra screenful. */ @media (min-width: 720px) { .map-layout__map-wrap, .map-layout__list { height: clamp(460px, calc(100vh - 350px), 880px); height: clamp(460px, calc(100dvh - 350px), 880px); max-height: none; min-height: 0; } } /* Tablets (720–979px) still show the fixed bottom tab bar — subtract it so the map doesn't run underneath */ @media (min-width: 720px) and (max-width: 979px) { .map-layout__map-wrap, .map-layout__list { height: clamp(420px, calc(100vh - 414px), 880px); height: clamp(420px, calc(100dvh - 414px), 880px); } } .map-layout__list { display: flex; flex-direction: column; min-height: 0; } #map { border: 1px solid var(--border-strong); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); width: 100%; height: 100%; } /* ---- App frame (phones, Map view): the page itself never scrolls — the map flexes to fill the space between the filter row and the tab bar, so the view toggle and the confidential-hotlines pill are always on screen and a swipe on the map can never strand the user. Skipped on very short (landscape) screens, where a fixed frame would crush the map. ---- */ @media (max-width: 719px) and (min-height: 560px) { body[data-page="map"][data-map-view="map"] { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; } body[data-page="map"][data-map-view="map"] main { flex: 1 1 auto; min-height: 0; padding-top: 10px; padding-bottom: 12px; } body[data-page="map"][data-map-view="map"] .map-layout { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; } body[data-page="map"][data-map-view="map"] .map-layout__map-wrap { height: auto; min-height: 0; max-height: none; } body[data-page="map"][data-map-view="map"] .site-footer { display: none; } } /* ============== Modal (hotline sheet) ============================= */ .modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; } .modal[hidden] { display: none; } .modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); animation: tw-modal-fade .2s ease-out; } .modal__panel { position: relative; width: 100%; max-width: 640px; max-height: 86vh; display: flex; flex-direction: column; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 22px 22px 0 0; box-shadow: var(--shadow-lg); animation: tw-modal-slide-up .26s cubic-bezier(.2,.8,.2,1); } @media (min-width: 640px) { .modal { align-items: center; padding: 24px; } .modal__panel { border-radius: var(--radius-lg); animation: tw-modal-fade .2s ease-out; } } .modal__panel::before { /* iOS-style drag handle (visual only) */ content: ""; display: block; width: 36px; height: 4px; margin: 8px auto 4px; background: var(--border-strong); border-radius: 999px; opacity: 0.7; } @media (min-width: 640px) { .modal__panel::before { display: none; } } .modal__head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px 6px; border-bottom: 1px solid var(--border); } .modal__head > div { flex: 1; min-width: 0; } .modal__title { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 2px; } .modal__sub { font-size: 0.88rem; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.4; } .modal__close { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-warm); color: var(--ink-soft); border: 1px solid var(--border); border-radius: 50%; cursor: pointer; flex: 0 0 36px; } .modal__close:hover { background: var(--bg-deep); color: var(--ink); } .modal__close svg { width: 16px; height: 16px; } .modal__body { padding: 14px 18px 22px; overflow-y: auto; display: grid; gap: 10px; } @keyframes tw-modal-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes tw-modal-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } } /* ============== Floating locate button (mobile) ==================== */ /* Extended FAB: icon + visible label, so the page's core action explains itself. Bottom offset clears the OSM attribution strip. */ .map-fab { position: absolute; bottom: 34px; right: 12px; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 16px 10px 13px; background: var(--bg-elev); color: var(--ink); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font: inherit; font-weight: 700; font-size: 0.92rem; cursor: pointer; box-shadow: var(--shadow-md); z-index: 401; /* above leaflet controls */ transition: background .12s ease, color .12s ease, transform .08s ease; -webkit-tap-highlight-color: transparent; } .map-fab:hover { background: var(--bg-warm); } .map-fab:active { transform: translateY(1px); } .map-fab[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); } .map-fab svg { width: 20px; height: 20px; flex: 0 0 20px; } .map-fab.is-searching svg { animation: tw-fab-pulse 1s ease-in-out infinite; } @keyframes tw-fab-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } @media (min-width: 720px) { .map-fab { display: none; } } /* List inside the layout */ .map-list { display: grid; gap: 8px; overflow-y: auto; padding-right: 4px; min-height: 0; flex: 1 1 auto; } .map-list__card { --c: var(--cat-outreach); display: grid; grid-template-columns: 36px 1fr; gap: 10px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 9px 11px; cursor: pointer; text-align: left; width: 100%; font: inherit; color: var(--ink); transition: border-color .12s ease, box-shadow .12s ease, transform .08s ease, background .12s ease; } .map-list__card:hover { background: var(--bg-warm); border-color: var(--border-strong); } .map-list__card:active { transform: translateY(1px); } .map-list__card.is-active { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); background: color-mix(in srgb, var(--c) 6%, var(--bg-elev)); } .map-list__icon { width: 34px; height: 34px; flex: 0 0 34px; background: var(--c); color: #fff; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; align-self: center; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--c) 50%, transparent); } .map-list__icon svg { width: 18px; height: 18px; } .map-list__body { min-width: 0; } .map-list__name { font-weight: 700; font-size: 0.94rem; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 1px; } .map-list__meta { font-size: 0.78rem; color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; } .map-list__meta strong { color: var(--ink-soft); font-weight: 600; } .map-list__addr { font-size: 0.82rem; color: var(--ink-soft); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .map-list__hours { display: flex; align-items: flex-start; gap: 5px; font-size: 0.78rem; line-height: 1.3; color: var(--ink-soft); margin-top: 4px; } .map-list__hours svg { flex: 0 0 auto; width: 13px; height: 13px; margin-top: 1px; color: var(--c, var(--accent)); } .map-list__hours span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .map-list__badges { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; } .map-list__badges .badge { font-size: 0.68rem; padding: 1px 7px; } .no-results--compact { padding: 24px 16px; } /* Rich pins — colored circle with category icon */ .map-pin-rich { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--cat, var(--accent)); border: 3px solid #fff; border-radius: 50% 50% 50% 0; box-shadow: 0 3px 8px rgba(0,0,0,.28); transform: rotate(-45deg); transform-origin: center; transition: transform .15s ease, box-shadow .15s ease; position: relative; } .map-pin-rich > svg { width: 18px; height: 18px; color: #fff; transform: rotate(45deg); stroke-width: 2.2; } .map-pin-rich.is-active { /* Scale up + bigger halo so the tapped place is unmistakable against the other pins. The pin is rotated -45deg, so the scale rides on top of it. */ transform: rotate(-45deg) scale(1.18); box-shadow: 0 0 0 6px color-mix(in srgb, var(--cat, var(--accent)) 40%, transparent), 0 4px 10px rgba(0,0,0,.32); z-index: 1000; } /* User-location pin */ .map-pin-user { width: 18px; height: 18px; border-radius: 50%; background: var(--focus); border: 3px solid #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--focus) 25%, transparent); } /* First-visit hint — floats at the top of the map on phones, where the explanatory lead paragraph is hidden */ .map-hint { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 500; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 96px); padding: 9px 15px; background: var(--bg-elev); color: var(--ink); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font-size: 0.88rem; font-weight: 600; text-align: center; box-shadow: var(--shadow-md); pointer-events: none; } .map-hint[hidden] { display: none; } /* Transient toast over the map — locate errors, scroll-zoom hints */ .map-toast { position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); z-index: 600; max-width: calc(100% - 32px); padding: 10px 16px; background: color-mix(in srgb, var(--ink) 90%, transparent); color: var(--bg-elev); border-radius: 12px; font-size: 0.9rem; font-weight: 600; line-height: 1.35; text-align: center; box-shadow: var(--shadow-md); pointer-events: none; } .map-toast[hidden] { display: none; } /* Phone list header — result count lives here because the desktop count row (.map-controls__row) is hidden below 720px */ .map-list__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px 8px; font-size: 0.85rem; font-weight: 600; color: var(--ink-muted); } .map-list__head[hidden] { display: none; } @media (min-width: 720px) { .map-list__head { display: none; } } /* Popup - compact directory card. Sized for a map overlay (narrower + tighter than a full directory card) and readable in both themes: text uses ink-soft (not muted), and the colored icon chip gets a hairline ring so light category colors don't bleed into the white popup background. */ .leaflet-popup-content-wrapper { border-radius: var(--radius) !important; border: 1px solid var(--border-strong) !important; box-shadow: var(--shadow-md) !important; background: var(--bg-elev) !important; color: var(--ink) !important; } .leaflet-popup-tip { background: var(--bg-elev) !important; border: 1px solid var(--border-strong) !important; } .leaflet-popup-content { font-family: var(--font-sans); font-size: 0.9rem; margin: 11px 13px; width: 220px !important; color: var(--ink); } .leaflet-popup-content .popup { display: flex; flex-direction: column; gap: 6px; } .leaflet-popup-content .popup__head { display: flex; align-items: flex-start; gap: 8px; /* leave room for the round close button in the top-right corner */ padding-right: 26px; } .leaflet-popup-content .popup__icon { width: 26px; height: 26px; flex: 0 0 26px; background: var(--c, var(--accent)); color: #fff; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); } .leaflet-popup-content .popup__icon svg { width: 15px; height: 15px; } .leaflet-popup-content .popup__name { font-size: 0.98rem; margin: 0; font-weight: 700; letter-spacing: -0.01em; line-height: 1.22; color: var(--ink); } .leaflet-popup-content .popup__cats { font-size: 0.68rem; color: var(--ink-soft); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-top: 2px; } .leaflet-popup-content .popup__addr { font-size: 0.84rem; color: var(--ink-soft); line-height: 1.35; margin: 0; } .leaflet-popup-content .popup__hours { display: flex; align-items: flex-start; gap: 6px; font-size: 0.8rem; line-height: 1.35; color: var(--ink-soft); } .leaflet-popup-content .popup__hours svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; color: var(--c, var(--accent)); } .leaflet-popup-content .popup__meta { font-size: 0.78rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 2px 8px; } .leaflet-popup-content .popup__badges { display: flex; flex-wrap: wrap; gap: 4px; } .leaflet-popup-content .popup__badges .badge { font-size: 0.68rem; padding: 2px 7px; } .leaflet-popup-content .popup__actions { display: grid; gap: 5px; margin-top: 2px; } .leaflet-popup-content .popup__actions .act { min-height: 38px; padding: 6px 10px; } .leaflet-popup-content .popup__actions .act__label { font-size: 0.62rem; } .leaflet-popup-content .popup__actions .act__val { font-size: 0.88rem; } /* Touch sizing: on phones the popup is the primary way to act on a place, so widen it and grow the Call/Directions buttons to full tap targets. Leaflet's default close button is a tiny glyph — give it a real hit area. */ @media (max-width: 979px) { .leaflet-popup-content { width: 244px !important; } .leaflet-popup-content .popup__actions { gap: 7px; } .leaflet-popup-content .popup__actions .act { min-height: 48px; padding: 9px 12px; } .leaflet-popup-content .popup__actions .act__label { font-size: 0.66rem; } .leaflet-popup-content .popup__actions .act__val { font-size: 0.96rem; } .leaflet-popup-content .popup__actions .act svg { width: 22px; height: 22px; flex: 0 0 22px; } } .leaflet-popup-close-button { width: 30px !important; height: 30px !important; display: flex !important; align-items: center; justify-content: center; font-size: 22px !important; font-weight: 600; color: var(--ink-muted) !important; background: var(--bg-elev) !important; border: 1px solid var(--border) !important; border-radius: 50% !important; top: 6px !important; right: 6px !important; box-shadow: var(--shadow-sm); } .leaflet-popup-close-button:hover { color: var(--ink) !important; background: var(--bg-warm) !important; } /* Float popups above the zoom control. Leaflet puts the popup pane at z-index 700 and the control corners at 1000, so a popup opening near the top-left corner is drawn behind the +/- buttons and clipped. Lift the popup pane above the controls so the whole card is always readable. */ .leaflet-popup-pane { z-index: 1100; } /* Leaflet ships `.leaflet-container a { color: #0078A8 }` which beats our `.act--call { color: #fff }` on specificity, leaving blue text on the category-colored button (vibrating contrast against purple/blue cats). Re-assert the action-button text colors with enough specificity to win. */ .leaflet-popup-content .popup__actions .act--call, .leaflet-popup-content .popup__actions .act--call:hover, .leaflet-popup-content .popup__actions .act--call:focus { color: #fff; } .leaflet-popup-content .popup__actions .act--dir, .leaflet-popup-content .popup__actions .act--dir:hover, .leaflet-popup-content .popup__actions .act--dir:focus { color: var(--ink); } /* Dark-mode overrides for the hardcoded-light badge variants. The pale green and pink defaults look out of place against dark cards and popups; reskin them in themed dim tones that still read as "24/7" and "hotline". (Unscoped on purpose: applies in directory cards AND map popups.) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge--24-7 { background: rgba(60, 140, 90, 0.18); color: #8fd5a8; border-color: rgba(60, 140, 90, 0.40); } :root:not([data-theme="light"]) .badge--hotline { background: rgba(226, 103, 74, 0.18); color: #ff9a7c; border-color: rgba(226, 103, 74, 0.40); } } :root[data-theme="dark"] .badge--24-7 { background: rgba(60, 140, 90, 0.18); color: #8fd5a8; border-color: rgba(60, 140, 90, 0.40); } :root[data-theme="dark"] .badge--hotline { background: rgba(226, 103, 74, 0.18); color: #ff9a7c; border-color: rgba(226, 103, 74, 0.40); } /* Dark-mode leaflet tile filtering — soften the bright OSM tiles */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .leaflet-tile-pane { filter: brightness(0.7) invert(1) contrast(0.92) hue-rotate(200deg) saturate(0.7); } } :root[data-theme="dark"] .leaflet-tile-pane { filter: brightness(0.7) invert(1) contrast(0.92) hue-rotate(200deg) saturate(0.7); } /* Dark-mode leaflet chrome — zoom buttons and the attribution strip ship white in leaflet.css and would glow against the night tiles. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .leaflet-bar a { background-color: var(--bg-elev); color: var(--ink); border-bottom-color: var(--border-strong); } :root:not([data-theme="light"]) .leaflet-bar a:hover, :root:not([data-theme="light"]) .leaflet-bar a:focus { background-color: var(--bg-deep); } :root:not([data-theme="light"]) .leaflet-control-attribution { background: rgba(29, 24, 18, 0.8); color: var(--ink-muted); } :root:not([data-theme="light"]) .leaflet-control-attribution a { color: var(--link); } } :root[data-theme="dark"] .leaflet-bar a { background-color: var(--bg-elev); color: var(--ink); border-bottom-color: var(--border-strong); } :root[data-theme="dark"] .leaflet-bar a:hover, :root[data-theme="dark"] .leaflet-bar a:focus { background-color: var(--bg-deep); } :root[data-theme="dark"] .leaflet-control-attribution { background: rgba(29, 24, 18, 0.8); color: var(--ink-muted); } :root[data-theme="dark"] .leaflet-control-attribution a { color: var(--link); } /* ============================================================================= 18. PAGE — about ----------------------------------------------------------------------------- (Long-form text — the .prose helper in section 5 handles reading width.) ============================================================================= */ /* ============================================================================= 19. FOOTER ----------------------------------------------------------------------------- Warm desert dusk. Layered mountain horizon (back / mid / foreground, with saguaro silhouettes standing on the front ridge) tucks the page into the sky — daytime in light mode, night (moon + stars) in dark mode. Body: a full-width match-CTA banner, then a 3-column grid (brand + tagline · explore · urgent contacts) over a thin bottom strip for disclaimer + meta. ============================================================================= */ .site-footer { margin-top: 72px; background: var(--dusk); color: var(--dusk-text); position: relative; overflow: hidden; } /* Mountain horizon — three SVG layers create parallax depth. Front silhouette (and the saguaros standing on it) is painted in the page bg so the page visually "drops" into the sky. Sky background is themed: daytime in light mode, night in dark mode. */ .site-footer__mountains { display: block; width: 100%; height: clamp(110px, 14vw, 160px); margin-bottom: -1px; /* hairline gap fix between SVG and footer body */ background: var(--footer-sky); } /* Celestial body + scattered stars over silhouette ranges. Light mode renders as DAY (sun, no stars); dark mode restores the NIGHT sky (moon + stars). */ .site-footer__moon { fill: var(--footer-celestial-fill); opacity: var(--footer-celestial-opacity); } .site-footer__moon-glow { fill: var(--footer-celestial-fill); opacity: var(--footer-glow-opacity); } .site-footer__star, .site-footer__star--bright { fill: #ffffff; opacity: var(--footer-star-opacity); } .site-footer__range--back { fill: var(--footer-range-back-fill); opacity: var(--footer-range-back-opacity); } .site-footer__range--mid { fill: var(--footer-range-mid-fill); opacity: var(--footer-range-mid-opacity); } .site-footer__range--front { fill: var(--bg); opacity: 1; } .site-footer__saguaro { fill: var(--bg); } /* Gentle star twinkle — invisible by day (star opacity is 0 in light mode), and skipped entirely for users who prefer reduced motion. */ @media (prefers-reduced-motion: no-preference) { .site-footer__star { animation: tw-twinkle 4.6s ease-in-out infinite; } .site-footer__star--bright { animation-duration: 3.2s; } .site-footer__star:nth-of-type(odd) { animation-delay: -1.6s; } .site-footer__star:nth-of-type(3n) { animation-delay: -2.9s; } } @keyframes tw-twinkle { 0%, 100% { opacity: var(--footer-star-opacity); } 50% { opacity: calc(var(--footer-star-opacity) * 0.25); } } .site-footer .container { position: relative; z-index: 1; } /* --- Match CTA banner -------------------------------------------------------- Full-width card at the top of the footer body: pitch on the left, a real pill button on the right. The whole banner is one big tap target. */ .footer-cta { display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 4vw, 44px); margin-top: clamp(12px, 2.5vw, 24px); padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px); background: radial-gradient(120% 180% at 100% 0%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 45%), linear-gradient(135deg, var(--night-blue) 0%, var(--night-blue-deep) 100%); color: #fff; border-radius: var(--radius-lg); text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 14px 36px rgba(3, 11, 28, .35); transition: box-shadow 160ms ease, transform 160ms ease; } .footer-cta:hover { text-decoration: none; color: #fff; transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), 0 18px 44px rgba(3, 11, 28, .45); } .footer-cta__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; } .footer-cta__badge { display: inline-flex; align-items: center; padding: 4px 10px; background: rgba(255, 255, 255, .14); border-radius: var(--radius-pill); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; } .footer-cta__title { font-family: var(--font-display); font-size: clamp(1.25rem, 2.2vw, 1.45rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; } .footer-cta__sub { font-size: 0.9rem; font-weight: 500; opacity: 0.85; line-height: 1.4; } .footer-cta__btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 24px; background: #fff; color: var(--night-blue-deep); border-radius: var(--radius-pill); font-weight: 700; font-size: 0.98rem; letter-spacing: 0.01em; box-shadow: 0 4px 14px rgba(3, 11, 28, .30); transition: transform 160ms ease, box-shadow 160ms ease; } .footer-cta__btn svg { width: 18px; height: 18px; stroke-width: 2.4; transition: transform 160ms ease; } .footer-cta:hover .footer-cta__btn { transform: scale(1.03); box-shadow: 0 6px 18px rgba(3, 11, 28, .40); } .footer-cta:hover .footer-cta__btn svg { transform: translateX(3px); } /* --- Link grid: brand · explore · urgent contacts -------------------------- */ .site-footer__grid { display: grid; grid-template-columns: 1.3fr 0.9fr 1.3fr; gap: clamp(28px, 5vw, 56px); padding-top: clamp(32px, 5vw, 48px); padding-bottom: clamp(28px, 4vw, 44px); } .site-footer__col { min-width: 0; } .site-footer__brand { display: inline-flex; align-items: center; text-decoration: none; margin-bottom: 14px; } .site-footer__logo { height: 72px; width: auto; max-width: 100%; display: block; } .site-footer__tagline { margin: 0; color: var(--dusk-muted); font-size: 0.96rem; line-height: 1.6; max-width: 32ch; } .site-footer__heading { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dusk-text); margin: 0 0 16px; opacity: 0.85; } .site-footer__links, .site-footer__contacts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .site-footer__links a { display: inline-flex; align-items: center; gap: 10px; color: var(--dusk-text); text-decoration: none; font-weight: 500; font-size: 0.98rem; padding: 4px 0; transition: color 120ms ease; } .site-footer__links a::before { content: ""; width: 14px; height: 1px; background: var(--accent); opacity: 0.6; transition: width 160ms ease, opacity 160ms ease; } .site-footer__links a:hover { color: #fff; } .site-footer__links a:hover::before { width: 22px; opacity: 1; } .site-footer__contacts a { display: flex; align-items: baseline; gap: 12px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.10); border-radius: var(--radius); background: rgba(255,255,255,.03); color: var(--dusk-text); text-decoration: none; transition: background 140ms ease, border-color 140ms ease; } .site-footer__contacts a:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.20); color: #fff; } .site-footer__contacts strong { color: #fff; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; min-width: 2.5em; font-variant-numeric: tabular-nums; } .site-footer__contacts span { font-size: 0.92rem; color: var(--dusk-muted); } .site-footer__contacts a:hover span { color: var(--dusk-text); } /* Bottom strip: disclaimer + meta */ .site-footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 22px 0 28px; } .site-footer__bottom-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 28px; } .site-footer__disclaimer { margin: 0; color: var(--dusk-muted); font-size: 0.86rem; line-height: 1.55; max-width: 60ch; flex: 1 1 380px; } .site-footer__copy { margin: 0; color: var(--dusk-muted); font-size: 0.86rem; white-space: nowrap; } .site-footer__copy a { color: var(--dusk-text); text-decoration: underline; text-underline-offset: 2px; } .site-footer__copy a:hover { color: #fff; } @media (max-width: 560px) { .site-footer__copy { white-space: normal; } } /* Keyboard focus — a light outline reads clearly against the dusk background */ .site-footer a:focus-visible { outline: 2px solid rgba(255, 255, 255, .85); outline-offset: 3px; border-radius: var(--radius-sm); } .footer-cta:focus-visible { outline-offset: 4px; border-radius: var(--radius-lg); } /* Generic link color inside footer (catch-all for any markup not covered above) */ .site-footer a:not(.site-footer__brand):not(.footer-cta):not(.site-footer__links a):not(.site-footer__contacts a):not(.site-footer__copy a) { color: var(--dusk-text); text-decoration-color: rgba(234,217,184,.4); } .site-footer a:not(.site-footer__brand):not(.footer-cta):not(.site-footer__links a):not(.site-footer__contacts a):not(.site-footer__copy a):hover { color: #fff; text-decoration-color: #fff; } /* ============== Footer — mobile ============================================= - Shrink the mountain decoration so it doesn't dominate the small screen - CTA banner stacks; the button goes full width for the thumb - Urgent contacts first (2×2 tiles), Explore as a pill row, brand last - Tighten the disclaimer and bottom row */ @media (max-width: 760px) { .site-footer { margin-top: 40px; } .site-footer__mountains { height: 64px; } .footer-cta { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 10px; padding: 18px 16px 16px; } .footer-cta__btn { width: 100%; } /* Single column; reorder: Help (most urgent) → Explore → brand matter */ .site-footer__grid { grid-template-columns: 1fr; gap: 24px; padding-top: 28px; } .site-footer__col--help { order: 1; } .site-footer__col--explore { order: 2; } .site-footer__col--brand { order: 3; } /* Brand: compact line */ .site-footer__brand { margin-bottom: 6px; } .site-footer__logo { height: 56px; } .site-footer__tagline { font-size: 0.86rem; line-height: 1.45; } /* Section headings: smaller on mobile */ .site-footer__heading { font-size: 0.72rem; margin-bottom: 8px; } /* Explore: horizontal pill row, drop the decorative dash */ .site-footer__links { flex-direction: row; flex-wrap: wrap; gap: 6px 8px; } .site-footer__links a { padding: 7px 12px; font-size: 0.85rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-pill); } .site-footer__links a::before { display: none; } .site-footer__links a:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); } /* Help right now: clean 2×2 of stacked tiles */ .site-footer__contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .site-footer__contacts a { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; height: 100%; } .site-footer__contacts strong { font-size: 1rem; min-width: 0; } .site-footer__contacts span { font-size: 0.82rem; line-height: 1.35; } /* Bottom strip: tighter */ .site-footer__bottom { padding: 14px 0 22px; } .site-footer__bottom-row { gap: 10px; } .site-footer__disclaimer { font-size: 0.76rem; line-height: 1.5; } .site-footer__copy { font-size: 0.78rem; } } /* ============================================================================= 20. UTILITIES ============================================================================= */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } [hidden] { display: none !important; } .spacer { height: 8px; } .icon-inline { width: 1em; height: 1em; vertical-align: -0.125em; } /* ============================================================================= 22. PAGE — match (questionnaire + results) ---------------------------------------------------------------------------- Single-page form. Each fieldset is a "qsection". Options are tap-friendly chips/cards that toggle a visible "on" state. Results render below the form in grouped buckets so people see what's relevant to *them*. ============================================================================= */ .match-main { padding-bottom: 80px; } .privacy-banner { display: flex; gap: 14px; align-items: flex-start; margin: 18px 0 28px; padding: 16px 18px; background: var(--accent-soft); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); } .privacy-banner__icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-pill); flex-shrink: 0; } .privacy-banner__icon svg { width: 18px; height: 18px; } .privacy-banner__title { margin: 0 0 4px; font-weight: 700; color: var(--ink); } .privacy-banner__body { margin: 0; font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.5; } .match-form { display: flex; flex-direction: column; gap: 26px; } .qsection { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 18px 20px; background: var(--bg-elev); box-shadow: var(--shadow-sm); margin: 0; } .qsection__legend { /* float opts the legend out of the browser's native fieldset rendering, which anchors it half-outside the top border of the card */ float: left; width: 100%; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; color: var(--ink); padding: 0; margin-bottom: 4px; } .qsection__legend + * { clear: both; } .qnum { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: var(--bg-warm); color: var(--ink-soft); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font-size: 0.85rem; font-weight: 700; flex-shrink: 0; } .qsection__help { margin: 0 0 12px; font-size: var(--fs-small); color: var(--ink-muted); } .opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .opt { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--bg); cursor: pointer; font-size: var(--fs-small); color: var(--ink-soft); transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease; user-select: none; } .opt:hover { border-color: var(--accent); color: var(--ink); } .opt input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; } .opt--on { background: var(--accent); border-color: var(--accent-deep); color: var(--accent-ink); font-weight: 600; } .opt--on:hover { background: var(--accent-deep); color: var(--accent-ink); } .match-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; } .match-actions--bottom { margin-top: 32px; justify-content: center; } .btn-primary, .btn-secondary { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 12px 22px; border-radius: var(--radius); font-size: 1rem; font-weight: 700; cursor: pointer; border: 1.5px solid transparent; transition: transform 100ms ease, box-shadow 120ms ease, background 120ms ease; } .btn-primary svg, .btn-secondary svg, .btn-ghost svg { width: 18px; height: 18px; flex: 0 0 18px; } .btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-deep); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--accent-deep); box-shadow: var(--shadow-md); } .btn-primary:active { transform: translateY(1px); } .btn-secondary { background: var(--bg-elev); color: var(--ink); border-color: var(--border-strong); } .btn-secondary:hover { background: var(--bg-warm); border-color: var(--accent); color: var(--ink); } /* ---------- results ---------- */ .match-results { margin-top: 40px; } .match-results__h2 { font-size: var(--fs-h1); margin: 0 0 6px; color: var(--ink); } .match-results__sub { margin: 0 0 24px; color: var(--ink-muted); } .crisis-callout { margin-bottom: 28px; padding: 18px 20px; background: linear-gradient(180deg, #ffe9e0 0%, #fff5ef 100%); border: 1.5px solid var(--emergency); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } :root[data-theme="dark"] .crisis-callout { background: linear-gradient(180deg, #3a1810 0%, #2a1208 100%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .crisis-callout { background: linear-gradient(180deg, #3a1810 0%, #2a1208 100%); } } .crisis-callout__title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--emergency-deep); font-size: 1.15rem; font-weight: 800; } .crisis-callout__title svg { width: 22px; height: 22px; } :root[data-theme="dark"] .crisis-callout__title { color: #ffb29a; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .crisis-callout__title { color: #ffb29a; } } .crisis-callout__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .crisis-callout__item { display: flex; align-items: center; gap: 14px; padding: 10px 12px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); } .crisis-callout__call { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 10px 16px; background: var(--emergency); color: #fff; border-radius: var(--radius); font-weight: 700; text-decoration: none; flex-shrink: 0; } .crisis-callout__call:hover { background: var(--emergency-deep); } .crisis-callout__call svg { width: 18px; height: 18px; } .crisis-callout__phone { font-size: 1rem; } .crisis-callout__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .crisis-callout__meta strong { color: var(--ink); font-size: var(--fs-small); } .crisis-callout__meta span { color: var(--ink-muted); font-size: var(--fs-tiny); } .match-group { margin-bottom: 32px; } .match-group__title { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--border-strong); } .match-group__count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; padding: 2px 8px; background: var(--bg-warm); color: var(--ink-soft); border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 700; } .match-group__grid { display: grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 700px) { .match-group__grid { grid-template-columns: 1fr 1fr; } } .match-card { padding: 14px 16px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px; } .match-card__top { display: flex; flex-direction: column; gap: 6px; } .match-card__name { margin: 0; font-size: 1.02rem; color: var(--ink); font-weight: 700; line-height: 1.3; } .match-card__why { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 0; list-style: none; } .match-card__why li { display: inline-block; padding: 2px 8px; background: var(--bg-warm); border-radius: var(--radius-pill); font-size: 0.78rem; color: var(--ink-soft); } .match-card__addr { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: var(--fs-small); color: var(--ink-muted); } .match-card__addr svg { width: 14px; height: 14px; margin-top: 3px; flex-shrink: 0; } .match-card__addr--confidential { color: var(--accent-deep); } .match-card__actions { display: flex; gap: 8px; flex-wrap: wrap; } .match-card__call, .match-card__more { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: var(--radius); font-size: var(--fs-small); font-weight: 600; text-decoration: none; white-space: nowrap; /* phone numbers must never wrap mid-number */ } .match-card__call { background: var(--accent); color: var(--accent-ink); } .match-card__call svg { width: 16px; height: 16px; flex: 0 0 16px; } .match-card__call:hover { background: var(--accent-deep); } .match-card__call small { opacity: 0.85; font-weight: 500; } .match-card__more { background: var(--bg-warm); color: var(--ink); border: 1px solid var(--border-strong); } .match-card__more:hover { background: var(--bg-deep); } .match-card__more svg { transform: rotate(-90deg); width: 14px; height: 14px; } .match-disclaimer { margin-top: 32px; padding: 14px 16px; background: var(--bg-warm); border: 1px solid var(--border); border-radius: var(--radius); display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-small); color: var(--ink-muted); line-height: 1.5; } .match-disclaimer svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; } /* Featured tool tile (Find Your Fit on the home page) */ .tool-tile--featured { background: linear-gradient(135deg, var(--accent-soft) 0%, var(--bg-elev) 100%); border-color: var(--accent); border-width: 1.5px; } .tool-tile--featured .tool-tile__icon { background: var(--accent); color: var(--accent-ink); } .tool-tile--featured .tool-tile__label { color: var(--accent-deep); } /* ============================================================================= 21. REDUCED MOTION ============================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* ============================================================================= PAGE — home: primary CTA card (Find Your Fit) Big, single, unambiguous primary action. Lives above the category tiles so users in a hurry tap one thing and move on. ============================================================================= */ .match-cta { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 12px 0 20px; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-lg); text-decoration: none; box-shadow: var(--shadow-sm); transition: background 140ms ease, box-shadow 160ms ease; min-height: 76px; } @media (min-width: 640px) { .match-cta { gap: 16px; padding: 16px 20px; margin: 16px 0 24px; min-height: 84px; } } .match-cta:hover { background: var(--accent-deep); box-shadow: var(--shadow-md); } .match-cta:active { box-shadow: var(--shadow-sm); } .match-cta__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: rgba(255,255,255,0.18); border-radius: var(--radius-pill); flex-shrink: 0; } .match-cta__icon svg { width: 30px; height: 30px; color: var(--accent-ink); } .match-cta__body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } .match-cta__eyebrow { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.88; } .match-cta__title { font-size: clamp(1.35rem, 4vw, 1.75rem); font-weight: 800; line-height: 1.15; } .match-cta__sub { font-size: var(--fs-small); opacity: 0.92; line-height: 1.4; } .match-cta__arrow { display: inline-flex; align-items: center; flex-shrink: 0; opacity: 0.85; transition: transform 120ms ease; } .match-cta__arrow svg { width: 28px; height: 28px; stroke-width: 2.2; } .match-cta:hover .match-cta__arrow { transform: translateX(4px); opacity: 1; } @media (max-width: 480px) { .match-cta { padding: 16px 16px; gap: 14px; } .match-cta__icon { width: 48px; height: 48px; } .match-cta__arrow { display: none; } } /* Directions + share buttons on match cards */ .match-card__dir, .match-card__share, .match-card__site { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: var(--radius); font-size: var(--fs-small); font-weight: 600; text-decoration: none; background: var(--bg-warm); color: var(--ink); border: 1px solid var(--border-strong); white-space: nowrap; } .match-card__dir:hover, .match-card__share:hover, .match-card__site:hover { background: var(--bg-deep); } .match-card__dir svg, .match-card__share svg, .match-card__site svg { width: 16px; height: 16px; } .match-card__share { background: transparent; cursor: pointer; font: inherit; } /* PWA install nudge — fixed pill at bottom, dismissible */ .install-nudge { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom, 16px)); transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--ink); color: var(--bg); border-radius: 999px; box-shadow: var(--shadow-md); max-width: calc(100% - 24px); font-size: var(--fs-small); } .install-nudge[hidden] { display: none; } /* Sit above the fixed bottom tab bar on phones/tablets */ @media (max-width: 979px) { .install-nudge { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } } .install-nudge__text { padding: 0 4px; line-height: 1.3; } .install-nudge__actions { display: flex; gap: 6px; flex-shrink: 0; } .install-nudge__btn { appearance: none; border: 1px solid rgba(255,255,255,0.25); background: transparent; color: inherit; padding: 8px 12px; border-radius: 999px; font-size: var(--fs-small); font-weight: 600; cursor: pointer; min-height: 36px; } .install-nudge__btn--primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; } .install-nudge__btn:hover { background: rgba(255,255,255,0.1); } .install-nudge__btn--primary:hover { background: var(--accent-deep); } @media (max-width: 480px) { .install-nudge { flex-direction: column; gap: 8px; border-radius: 16px; padding: 12px; } .install-nudge__actions { width: 100%; } .install-nudge__btn { flex: 1; } } /* ============================================================ Print stylesheet — caseworkers print directory + hotline lists. Strip chrome, force black-on-white, expand collapsed details, keep each listing whole across page breaks. ============================================================ */ @media print { @page { margin: 0.5in; } html, body { background: #fff !important; color: #000 !important; font-size: 10pt; } /* Site chrome — none of it is useful on paper */ .skip-link, .offline-banner, .site-header, .nav-primary, .site-footer, .controls, .view-toggle, .map-controls, .map-fab, .map-hint, .map-toast, .map-list__head, .hotline-pill, .modal, .install-nudge, #no-results, #map { display: none !important; } /* Map page: drop the map, keep the list + hotlines */ body[data-page="map"] .map-layout { display: block !important; } body[data-page="map"] .map-layout__list { display: block !important; } body[data-page="map"] .hotline-block { display: block !important; } main, .container, .container--wide, .dir-main { max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; } .dir-head, .map-head { margin: 0 0 8pt !important; } .dir-head h1, .map-head h1 { font-size: 18pt !important; margin: 0 0 4pt !important; color: #000 !important; } .map-head .lead { font-size: 9pt !important; color: #333 !important; margin: 0 !important; } /* One-column listings */ .results, .map-list, .hotline-block__items { display: block !important; grid-template-columns: none !important; gap: 0 !important; } /* Cards: keep each whole; light frame */ .card, .map-list__card, .hotline-card { display: block !important; page-break-inside: avoid; break-inside: avoid; background: #fff !important; color: #000 !important; border: 1px solid #888 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 0 6pt !important; padding: 8pt !important; text-align: left !important; width: 100% !important; } .card__body, .map-list__body { display: block !important; } .card__top { display: block !important; } .card__icon-frame, .card__logo, .map-list__icon { display: none !important; } .card__heading { display: block !important; } .card__name, .map-list__name, .hotline-card__name { font-size: 12pt !important; font-weight: 700 !important; color: #000 !important; margin: 0 !important; } .card__cats, .map-list__meta, .hotline-card__sub { font-size: 9pt !important; color: #333 !important; margin: 1pt 0 !important; } .card__addr, .map-list__addr { font-size: 10pt !important; color: #000 !important; margin: 2pt 0 !important; display: block !important; } .card__addr svg { display: none !important; } .card__addr--confidential { font-style: italic !important; } .card__note { font-size: 8.5pt !important; color: #555 !important; margin: 1pt 0 !important; } /* "Show details" is collapsed by default — open it for print */ .card__more, .card__more-body { display: block !important; padding: 0 !important; } .card__more-toggle { display: none !important; } .card__field { display: block !important; margin: 1pt 0 !important; font-size: 9.5pt !important; color: #000 !important; } .card__field-label { font-weight: 600 !important; color: #333 !important; margin-right: 4pt !important; } .card__field-label::after { content: ":"; } /* Action rows become plain labeled lines */ .card__actions, .hotline-card__actions { display: block !important; grid-template-columns: none !important; gap: 0 !important; margin: 4pt 0 0 !important; } .act, .act--call, .act--dir { display: block !important; background: none !important; color: #000 !important; border: none !important; padding: 0 !important; min-height: 0 !important; margin: 1pt 0 !important; box-shadow: none !important; text-decoration: none !important; } .act svg { display: none !important; } .act__txt { display: inline !important; } .act__label { font-weight: 600 !important; font-size: 9.5pt !important; color: #333 !important; margin-right: 4pt !important; } .act__label::after { content: ":"; } .act__val { font-size: 10pt !important; color: #000 !important; } /* Badges: keep semantically but flatten to outlined text */ .badges { margin: 2pt 0 !important; display: block !important; } .badge, .badge--24-7, .badge--hotline, .badge--verified { background: #fff !important; color: #000 !important; border: 1px solid #555 !important; font-size: 8pt !important; padding: 1pt 4pt !important; margin-right: 3pt !important; } .badge svg { display: none !important; } /* Map page hotline section */ .hotline-block { background: none !important; box-shadow: none !important; border: none !important; padding: 0 !important; margin-top: 10pt !important; } .hotline-block__head { display: block !important; margin: 6pt 0 !important; } .hotline-block__icon { display: none !important; } .hotline-block__title { font-size: 14pt !important; color: #000 !important; margin: 0 !important; } .hotline-block__sub { font-size: 9pt !important; color: #333 !important; margin: 0 !important; } /* Links: black text, no underline noise from anchor hrefs */ a, a:visited { color: #000 !important; text-decoration: none !important; } } /* ============================================================================= 23. PAGE — match: wizard (one question at a time) ---------------------------------------------------------------------------- match.js upgrades the static form into a stepper: a progress header, one visible qsection, and a Back / Skip / Next footer. The plain form remains the no-JS fallback (all fieldsets visible, submit button at the end). ============================================================================= */ /* Focused single-column survey — don't let the wizard sprawl across the wide desktop container. */ .match-main { max-width: 760px; } .match-head { margin-bottom: 0; } .match-head h1 { margin-bottom: 4px; font-size: clamp(1.7rem, 5.5vw, 2.3rem); } .match-head .lead { margin-bottom: 8px; font-size: 1.05rem; } .wizard-head { margin: 10px 0 12px; } .wizard-head__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .wizard-head__step { font-size: var(--fs-small); font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; } .wizard-head__privacy { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-tiny); font-weight: 600; color: var(--ink-muted); } .wizard-head__privacy svg { width: 13px; height: 13px; } .wizard-bar { height: 6px; background: var(--bg-deep); border-radius: var(--radius-pill); overflow: hidden; } .wizard-bar__fill { display: block; height: 100%; width: 0; background: var(--accent); border-radius: var(--radius-pill); transition: width 240ms cubic-bezier(.4, 0, .2, 1); } /* Wizard mode: the progress header repeats the privacy promise, so the large banner above the form is redundant — reclaim the screen for Q1. */ body.wizard-on .privacy-banner { display: none; } /* Wizard mode: show only the active question */ .match-form--wizard { gap: 14px; } .match-form--wizard .qsection { display: none; } .match-form--wizard .qsection--active { display: block; animation: tw-step-in 200ms ease-out; } @keyframes tw-step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* In wizard mode the progress header counts questions, so hide the number chip inside the legend and let the question read as a clean heading. */ .match-form--wizard .qnum { display: none; } .match-form--wizard .qsection__legend { font-size: 1.18rem; margin-bottom: 6px; } .match-form--wizard .match-actions { display: none; } /* Bigger, easier targets inside the wizard */ .match-form--wizard .opt { min-height: 48px; font-size: 1rem; padding: 10px 16px; } .wizard-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; } .wizard-nav__back { flex: 0 0 auto; min-height: 46px; padding: 9px 16px; } .wizard-nav__next { flex: 0 0 auto; margin-left: auto; min-height: 46px; padding: 9px 22px; } /* Jump-back-to-results shortcut, shown while re-editing answers. Sits between Back and Next; the two auto margins center it in the free space. */ .wizard-nav__results { flex: 0 0 auto; margin-left: auto; min-height: 46px; padding: 9px 14px; } .wizard-nav__results[hidden] { display: none; } /* Steps receive programmatic focus on advance (for screen-reader announcement); no visible ring on the container itself. */ .match-form--wizard .qsection:focus { outline: none; } .btn-ghost { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 12px 16px; background: transparent; border: 1.5px solid transparent; border-radius: var(--radius); color: var(--ink-muted); font-size: 1rem; font-weight: 600; cursor: pointer; transition: color 120ms ease, background 120ms ease; } .btn-ghost:hover { color: var(--ink); background: var(--bg-warm); } /* ---------- results header + toolbar ---------- */ .results-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin-bottom: 6px; } .results-head h2 { margin: 0 0 2px; font-size: clamp(1.6rem, 5vw, 2.1rem); } .match-results__sub { margin: 0; color: var(--ink-muted); } .results-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 22px; } .results-toolbar .btn-secondary, .results-toolbar .btn-ghost { min-height: 44px; padding: 8px 16px; font-size: var(--fs-small); } .results-toolbar svg { width: 16px; height: 16px; } /* What the user told us — compact recap chips above the groups */ .answer-recap { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; } .answer-recap li { display: inline-flex; align-items: center; padding: 4px 11px; background: var(--bg-warm); border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); } /* ============================================================================= 24. PAGE — resources (organized link hub) ============================================================================= */ .res-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 18px; margin-bottom: 14px; } .res-head__text { min-width: 0; } .res-head h1 { margin-bottom: 6px; } .res-head .lead { margin-bottom: 0; } .res-head__actions { flex: 0 0 auto; padding-bottom: 4px; } .res-head__actions .btn-secondary { min-height: 44px; padding: 8px 16px; font-size: var(--fs-small); } .res-head__actions svg { width: 16px; height: 16px; } /* Jump-to-section chips */ .jump-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 26px; } .jump-row a { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 5px 13px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--bg-elev); color: var(--ink-soft); font-size: 0.88rem; font-weight: 600; text-decoration: none; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .jump-row a:hover { background: var(--bg-warm); color: var(--ink); } .jump-row .chip__dot { width: 8px; height: 8px; flex: 0 0 8px; } .res-group { margin-bottom: 30px; scroll-margin-top: 76px; } @media (min-width: 980px) { .card, .res-group { scroll-margin-top: 100px; } } .res-group__head { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; padding-bottom: 8px; border-bottom: 2px solid var(--border-strong); } .res-group__icon { width: 30px; height: 30px; flex: 0 0 30px; display: inline-flex; align-items: center; justify-content: center; background: var(--gc, var(--accent)); color: #fff; border-radius: 8px; } .res-group__icon svg { width: 17px; height: 17px; } .res-group__head h2 { margin: 0; font-size: 1.18rem; } .res-group__sub { margin: 8px 0 12px; font-size: var(--fs-small); color: var(--ink-muted); max-width: 70ch; } .res-group__grid { display: grid; gap: 8px; grid-template-columns: 1fr; } @media (min-width: 700px) { .res-group__grid { grid-template-columns: 1fr 1fr; gap: 10px; } } .link-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--ink); min-height: var(--tap); transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease; } .link-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); background: var(--bg-warm); text-decoration: none; } .link-card__icon { width: 34px; height: 34px; flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--gc, var(--accent)) 12%, var(--bg-elev)); color: var(--gc, var(--accent)); border: 1px solid color-mix(in srgb, var(--gc, var(--accent)) 25%, var(--border)); border-radius: 9px; margin-top: 1px; } .link-card__icon svg { width: 17px; height: 17px; } .link-card__body { flex: 1; min-width: 0; } .link-card__name { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.99rem; line-height: 1.25; letter-spacing: -0.01em; } .link-card__name svg { width: 13px; height: 13px; flex: 0 0 13px; color: var(--ink-muted); } .link-card__desc { display: block; margin-top: 2px; font-size: 0.88rem; line-height: 1.4; color: var(--ink-soft); } .link-card__meta { display: block; margin-top: 5px; font-size: 0.8rem; font-weight: 600; color: var(--link); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .link-card--tel .link-card__meta { color: var(--accent-deep); } /* Dual-action card: a wide "call" zone (primary) and a narrower "website" zone, split by a divider, so the phone and the site are each a real, separate tap target instead of the URL being unreachable text. */ .link-card--dual { padding: 0; gap: 0; align-items: stretch; overflow: hidden; } .link-card__main { display: flex; align-items: flex-start; gap: 12px; flex: 1 1 auto; min-width: 0; padding: 12px 14px; color: var(--ink); text-decoration: none; transition: background 120ms ease; } .link-card__main:hover { background: var(--bg-warm); text-decoration: none; } .link-card__site { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: 0 0 auto; max-width: 40%; padding: 8px 12px; border-left: 1px solid var(--border); color: var(--link); font-size: 0.72rem; font-weight: 700; text-align: center; text-decoration: none; transition: background 120ms ease; } .link-card__site:hover { background: var(--bg-warm); text-decoration: none; } .link-card__site svg { width: 16px; height: 16px; flex: 0 0 16px; } .link-card__site-host { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .res-note { margin-top: 6px; font-size: var(--fs-small); color: var(--ink-muted); display: flex; gap: 8px; align-items: flex-start; } .res-note svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; } /* ============================================================================= 25. PRINT — match results + resources page ---------------------------------------------------------------------------- "Print / Save as PDF" produces a clean handout: header with site + date, the matched services grouped with phone + address, crisis numbers, and the call-ahead disclaimer. Everything else (form, nav, footer) is stripped. ============================================================================= */ .print-header { display: none; } @media print { /* Match page: print ONLY the results (plus disclaimer) */ body[data-page="match"] .match-head, body[data-page="match"] .privacy-banner, body[data-page="match"] .wizard-head, body[data-page="match"] #match-form, body[data-page="match"] .results-toolbar { display: none !important; } .print-header { display: block; border-bottom: 2pt solid #000; padding-bottom: 6pt; margin-bottom: 10pt; } .print-header__brand { font-size: 16pt; font-weight: 800; letter-spacing: -0.01em; color: #000; margin: 0 0 2pt; } .print-header__meta { font-size: 9pt; color: #333; margin: 0; } .match-results { margin-top: 0 !important; } .results-head h2 { font-size: 15pt !important; color: #000 !important; margin: 0 0 2pt !important; } .match-results__sub { font-size: 9.5pt !important; color: #333 !important; margin-bottom: 6pt !important; } .answer-recap { margin: 0 0 10pt !important; } .answer-recap li { background: #fff !important; color: #000 !important; border: 1px solid #777 !important; font-size: 8pt !important; padding: 1pt 6pt !important; } .crisis-callout { background: #fff !important; border: 1.5pt solid #000 !important; border-radius: 0 !important; box-shadow: none !important; padding: 8pt !important; margin-bottom: 10pt !important; page-break-inside: avoid; } .crisis-callout__title { color: #000 !important; font-size: 11.5pt !important; margin-bottom: 6pt !important; } .crisis-callout__title svg { display: none !important; } .crisis-callout__item { border: none !important; background: none !important; padding: 2pt 0 !important; display: block !important; } .crisis-callout__call { background: none !important; color: #000 !important; padding: 0 !important; min-height: 0 !important; display: inline !important; font-size: 11pt !important; } .crisis-callout__call svg { display: none !important; } .crisis-callout__meta { display: inline !important; margin-left: 6pt; } .crisis-callout__meta strong { font-size: 10pt !important; color: #000 !important; } .crisis-callout__meta span { font-size: 9pt !important; color: #333 !important; margin-left: 4pt; } .match-group { margin-bottom: 10pt !important; } .match-group__title { font-size: 12pt !important; color: #000 !important; border-bottom: 1pt solid #000 !important; padding-bottom: 2pt !important; margin-bottom: 5pt !important; } .match-group__count { display: none !important; } .match-group__grid { display: block !important; } .match-card { display: block !important; page-break-inside: avoid; break-inside: avoid; background: #fff !important; border: 1px solid #888 !important; border-radius: 0 !important; box-shadow: none !important; padding: 6pt 8pt !important; margin-bottom: 5pt !important; } .match-card__name { font-size: 11pt !important; color: #000 !important; } .match-card__why { margin: 1pt 0 !important; } .match-card__why li { background: #fff !important; border: 1px solid #999 !important; color: #333 !important; font-size: 7.5pt !important; padding: 0 4pt !important; } .match-card__addr { color: #000 !important; font-size: 9.5pt !important; } .match-card__addr svg { display: none !important; } .match-card__actions { display: block !important; margin-top: 2pt !important; } .match-card__call { display: inline !important; background: none !important; color: #000 !important; padding: 0 !important; min-height: 0 !important; font-size: 10.5pt !important; font-weight: 700 !important; } .match-card__call svg { display: none !important; } .match-card__call::before { content: "Tel: "; } .match-card__dir, .match-card__share, .match-card__site, .match-card__more { display: none !important; } .match-disclaimer { background: #fff !important; border: none !important; border-top: 1pt solid #888 !important; border-radius: 0 !important; color: #333 !important; font-size: 8pt !important; padding: 6pt 0 0 !important; margin-top: 10pt !important; } .match-disclaimer svg { display: none !important; } /* Resources page: linear list of groups with URLs/numbers visible */ body[data-page="resources"] .res-head__actions, body[data-page="resources"] .jump-row { display: none !important; } .res-group { margin-bottom: 10pt !important; page-break-inside: auto; } .res-group__head { border-bottom: 1pt solid #000 !important; padding-bottom: 2pt !important; } .res-group__head h2 { font-size: 12pt !important; color: #000 !important; margin: 0 !important; } .res-group__icon { display: none !important; } .res-group__sub { font-size: 8.5pt !important; color: #333 !important; margin: 2pt 0 4pt !important; } .res-group__grid { display: block !important; } .link-card { display: block !important; page-break-inside: avoid; border: none !important; border-bottom: 0.5pt solid #bbb !important; border-radius: 0 !important; padding: 3pt 0 !important; background: #fff !important; } .link-card__icon { display: none !important; } .link-card__name { font-size: 10.5pt !important; color: #000 !important; } .link-card__name svg { display: none !important; } .link-card__desc { font-size: 9pt !important; color: #333 !important; margin-top: 0 !important; } .link-card__meta { font-size: 9.5pt !important; color: #000 !important; font-weight: 700 !important; margin-top: 1pt !important; white-space: normal !important; } .link-card__main { display: block !important; padding: 0 !important; } .link-card__site { display: block !important; border: none !important; padding: 0 !important; margin-top: 1pt !important; max-width: none !important; font-size: 9pt !important; font-weight: 400 !important; color: #333 !important; text-align: left !important; } .link-card__site svg { display: none !important; } .link-card__site-host { white-space: normal !important; } .res-note { font-size: 8pt !important; color: #333 !important; } .res-note svg { display: none !important; } } /* ---------- 404 / error page ---------- */ .err-page { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: clamp(60vh, 70vh, 720px); padding-top: 24px; padding-bottom: 48px; } .err-card { max-width: 560px; } .err-compass { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; margin-bottom: 22px; border-radius: 50%; background: var(--bg-elev); border: 1.5px solid var(--border-strong); box-shadow: var(--shadow-sm); color: var(--accent); } .err-compass svg { width: 48px; height: 48px; } .err-eyebrow { margin: 0 0 6px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .err-h1 { margin: 0 0 12px; font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.1; color: var(--ink); } .err-lead { margin: 0 auto 28px; max-width: 46ch; font-size: 1.1rem; color: var(--ink-muted); } .err-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 28px; } .err-actions a { text-decoration: none; } .err-crisis { display: inline-flex; align-items: center; gap: 8px; max-width: 48ch; margin: 0 auto; padding: 12px 18px; border-radius: var(--radius); background: var(--bg-warm); border: 1px solid var(--border-strong); font-size: 0.95rem; color: var(--ink-muted); text-align: left; } .err-crisis svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--accent); }