/* ═══════════════════════════════════════════════════════════════ Flare — Linking people to support · public, person-facing site Plain semantic HTML + CSS only. No JS, no external resources. Mobile-first. WCAG 2.1 AA. Logical properties for RTL-readiness. ═══════════════════════════════════════════════════════════════ */ :root { /* ── Flare brand (navy + orange, from the logo) ────────────────── The legacy --teal*/--terra* token NAMES are kept but REMAPPED to the new palette, so the whole app re-skins through the variables. New glossy components use the semantic --navy*/--accent* names below. */ --navy: #16294C; --navy-700: #1E3666; --navy-300: #5B6B8C; --accent: #EE7A1E; --accent-lite: #F4A63A; --accent-deep: #C65A12; --accent-deeper: #A8470C; --accent-050: #FDEFD9; --accent-100: #FAD9AE; --cream: #FBF6EE; --cream-2: #F4ECE0; --flare-glow: linear-gradient(180deg, var(--accent-lite) 0%, var(--accent) 52%, var(--accent-deep) 100%); /* Brand (legacy names → navy) */ --teal: #16294C; --teal-700: #1E3666; --teal-800: #16294C; --teal-900: #0F1E3A; /* crisis bar */ --teal-050: #E9EEF7; --teal-100: #D5E0F0; --teal-line: #C7D3E8; --brand-dark: #16294C; /* Warm accent (legacy names → orange; primary "I need help" action) */ --terra: #EE7A1E; --terra-700: #A8470C; /* deep enough for orange TEXT on cream/white (AA ≥4.5:1) */ --terra-050: #FDEFD9; --terra-100: #FAD9AE; /* Status — never colour-alone; always paired with icon + text */ --green: #1F7A52; --green-700: #196844; --green-050: #E6F3EC; --green-100: #BFE0CD; --amber: #8A6A1C; --amber-700: #6F5414; --amber-050: #F7EFD8; --amber-100: #E6D5A6; --red: #b23128; --red-700: #94271f; --red-050: #fbe9e7; --red-100: #f3cdc8; /* Match-quality aliases (results pills) */ --strong: #1F7A52; --strong-050: #E6F3EC; --strong-line: #BFE0CD; --good: #1E3666; --good-050: #E9EEF7; --good-line: #C7D3E8; --possible: #8A6A1C; --possible-050: #F7EFD8; --possible-line: #E6D5A6; /* Neutrals — warm cream surfaces */ --bg: #FBF6EE; --bg-sunk: #F0E8DA; --surface: #FFFFFF; --surface-2: #F7F1E7; --ink: #16294C; --ink-2: #45506B; /* AA on white/cream */ --ink-3: #5E6880; /* AA (≥4.5:1) for small text on cream + surface-2 */ --line: #E7DECF; --line-2: #D8CCB6; --r-card: 16px; --r-md: 12px; --r-sm: 9px; --r-btn: 16px; --r-pill: 999px; --sh-1: 0 1px 2px rgba(22,41,76,.06), 0 1px 1px rgba(22,41,76,.05); --sh-2: 0 2px 10px rgba(22,41,76,.07), 0 10px 30px rgba(22,41,76,.09); --sh-3: 0 10px 30px rgba(22,41,76,.13); --sh-orange: 0 8px 22px rgba(213,104,24,.30), 0 2px 6px rgba(168,71,12,.22); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Noto Sans Arabic", sans-serif; --maxw: 460px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg-sunk); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { margin: 0; font-weight: 750; letter-spacing: -0.02em; line-height: 1.18; text-wrap: balance; } h1 { font-size: 29px; } h2 { font-size: 22px; } h3 { font-size: 18px; } p { margin: 0; text-wrap: pretty; } a { color: var(--teal-800); } ul { margin: 0; padding: 0; } li { list-style: none; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; font-size: 17px; } img, svg { display: block; } /* ── Accessibility ─────────────────────────────────────────── */ :focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 4px; } .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; } .skip-link { position: absolute; inset-inline-start: 8px; inset-block-start: -100px; z-index: 200; background: var(--teal-900); color: #fff; padding: 12px 18px; border-radius: var(--r-sm); font-weight: 700; text-decoration: none; transition: inset-block-start .15s ease; } .skip-link:focus { inset-block-start: 8px; } /* ── App shell (mobile phone column centred on canvas) ────────── Renamed .app → .shell so it does NOT collide with our inner #app view container (set to class "app fade-in" by HL.ui.mount). */ .shell { max-width: var(--maxw); margin-inline: auto; min-height: 100vh; background: var(--bg); box-shadow: 0 0 0 1px rgba(31,42,43,.05), 0 24px 60px rgba(14,58,64,.10); } /* ── 1 · Crisis bar (always on, calm not alarming) ─────────── */ .crisisbar { position: sticky; top: 0; z-index: 100; background: var(--teal-900); color: #eaf3f3; padding: 8px max(12px, env(safe-area-inset-left)) 8px; } .crisisbar-inner { max-width: var(--maxw); margin-inline: auto; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; } .crisisbar .lead { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: #fff; } .crisisbar .nums { display: flex; flex-wrap: wrap; gap: 4px 6px; flex: 1; min-width: 160px; } .callchip { display: inline-flex; align-items: center; gap: 6px; color: #eaf3f3; text-decoration: none; font-weight: 700; font-size: 13px; padding: 6px 10px; border-radius: var(--r-pill); background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); white-space: nowrap; min-height: 32px; } .callchip:hover { background: rgba(255,255,255,.18); } .callchip strong { font-variant-numeric: tabular-nums; color: #fff; } /* Gel-glass treatment (design: "Gel-Glass Buttons"): a top shine window + bevel over the AA-tuned base colour. Text/icons stay white, so the white sheen never hurts legibility (white-on-red ≈ 4.9:1, white-on-green ≈ 5.1:1 — still AA). */ .callchip.urgent, .callchip.more { position: relative; isolation: isolate; border-color: transparent; color: #fff; } .callchip.urgent::before, .callchip.more::before { content: ""; position: absolute; left: 7%; right: 7%; top: 2px; height: 46%; border-radius: var(--r-pill); pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.04)); } .callchip.urgent { /* emergency red — Call 000 */ background: linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 46%, rgba(0,0,0,.20) 100%), #c62828; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 1px rgba(0,0,0,.22), 0 1px 1px rgba(140,20,20,.42), 0 3px 9px rgba(198,40,40,.42); } .callchip.more { /* green — supportive helplines */ background: linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 46%, rgba(0,0,0,.20) 100%), #2e7d32; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 1px rgba(0,0,0,.22), 0 1px 1px rgba(20,80,30,.42), 0 3px 9px rgba(46,125,50,.4); } .callchip.urgent:hover, .callchip.more:hover { filter: brightness(1.06) saturate(1.04); } .callchip.urgent:active, .callchip.more:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,.28), inset 0 -1px 0 rgba(255,255,255,.15); } /* Crisis "More help" dropdown — collapses the secondary lines so the bar stays Call 000 + More help at every width (CD header pass). Esc still quick-exits (a
doesn't close on Esc), preserving the DFV bail-fast behaviour. */ .lines { position: relative; display: inline-flex; } .lines-trigger { list-style: none; cursor: pointer; } .lines-trigger::-webkit-details-marker { display: none; } .lines-trigger::marker { content: ""; } .lines-trigger .lines-caret { width: 15px; height: 15px; opacity: .85; transition: transform .18s ease; } .lines[open] .lines-trigger .lines-caret { transform: rotate(90deg); } [dir="rtl"] .lines[open] .lines-trigger .lines-caret { transform: rotate(-90deg); } @media (prefers-reduced-motion: reduce) { .lines-trigger .lines-caret { transition: none; } } .lines-menu { position: absolute; top: calc(100% + 8px); inset-inline-start: 0; width: min(280px, calc(100vw - 24px)); background: var(--surface); color: var(--ink); border: 1px solid var(--teal-line); border-radius: var(--r-md); box-shadow: var(--sh-3); padding: 6px; z-index: 130; } .lines-menu :focus-visible { outline-color: var(--teal); } .lmi { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-decoration: none; color: var(--ink); padding: 10px 12px; border-radius: var(--r-sm); min-height: 46px; background: none; border: none; font: inherit; text-align: start; cursor: pointer; } .lmi:hover { background: var(--teal-050); } .lmi-name { font-weight: 800; font-size: 14.5px; color: var(--teal-800); } .lmi-num { font-weight: 700; font-size: 13.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .lmi-all { justify-content: flex-start; gap: 8px; color: var(--teal-800); font-weight: 800; font-size: 13.5px; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 12px; } .lmi-all svg { width: 16px; height: 16px; flex: none; color: var(--teal); } .quick-exit { display: inline-flex; align-items: center; gap: 7px; margin-inline-start: auto; background: #fff; color: var(--teal-900); text-decoration: none; font-weight: 800; font-size: 14px; padding: 9px 15px; border-radius: var(--r-pill); min-height: 40px; box-shadow: 0 1px 0 rgba(0,0,0,.15); } .quick-exit:hover { background: #f1f7f7; } .quick-exit .esc { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 5px; background: var(--bg-sunk); color: var(--ink-2); letter-spacing: .02em; } /* Mobile: stop the helpline chips from stacking raggedly beside the label. Row 1 = "In immediate danger?" + Quick exit (top-right, always reachable); row 2 = the call chips in a tidy left-aligned wrapping row. */ @media (max-width: 719px) { .crisisbar .nums { flex: 1 0 100%; min-width: 0; order: 2; } .crisisbar .quick-exit { order: 1; } } /* ── 2 · Language / interpreter bar ────────────────────────── */ .langbar { /* Not sticky: it would slide under the (sticky) crisis bar on scroll anyway, and the language/interpreter control is set-once — only the crisis bar + Quick exit need to stay pinned. */ position: static; background: var(--teal-050); border-bottom: 1px solid var(--teal-line); } .langbar-inner { max-width: var(--maxw); margin-inline: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 7px 12px; } /* ── Flare brand lockup (shared design system — CD) ─────── */ .brand { --brand-mark-size: 44px; /* 40–48 headers · 32 sidebar · 56 sign-in */ --brand-name-size: 21px; /* wordmark ≈ mark × 0.47 */ --brand-gap: 12px; --brand-ink: #1f2937; /* AA on white & #E9EEF7 */ display: inline-flex; align-items: center; gap: var(--brand-gap); text-decoration: none; color: var(--brand-ink); border-radius: 12px; padding: 4px; margin: -4px; /* hit-area + focus room */ -webkit-tap-highlight-color: transparent; } .brand-mark { width: var(--brand-mark-size); height: var(--brand-mark-size); flex: none; display: block; transition: transform .18s ease; } .brand-name { font: 800 var(--brand-name-size)/1 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; letter-spacing: -.02em; white-space: nowrap; color: inherit; } .brand .for { align-self: center; font: 800 11px/1 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; letter-spacing: .045em; text-transform: uppercase; color: #16294C; background: #E9EEF7; border: 1px solid #C7D3E8; padding: 5px 9px; border-radius: 999px; white-space: nowrap; } .brand-text { display: flex; flex-direction: column; gap: 3px; } .brand-text .name { font: 800 18px/1 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; letter-spacing: -.02em; color: var(--brand-ink); } .brand-text .sub { font: 650 12px/1 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; letter-spacing: .02em; color: #16294C; } .brand.is-sidebar { --brand-mark-size: 32px; } .brand.is-signin { --brand-mark-size: 56px; --brand-name-size: 26px; } .brand.is-signin .brand-text .name { font-size: 24px; } .brand.is-signin .brand-text .sub { font-size: 14px; } .brand:hover .brand-name, .brand:hover .brand-text .name { color: #16294C; } .brand:hover .brand-mark { transform: scale(1.04); } .brand:focus-visible { outline: 3px solid #16294C; outline-offset: 2px; } .brand.on-dark { --brand-ink: #eaf3f3; } .brand.on-dark .for { color: #eaf3f3; background: rgba(255,255,255,.12); border-color: rgba(234,243,243,.4); } .brand.on-dark .brand-text .sub { color: #bfe0e0; } .brand.on-dark:hover .brand-name, .brand.on-dark:hover .brand-text .name { color: #fff; } .brand.on-dark:focus-visible { outline-color: #bfe0e0; } @media (prefers-reduced-motion: reduce) { .brand-mark { transition: none; } .brand:hover .brand-mark { transform: none; } } @media (max-width: 480px) { .brand .brand-name, .brand .for, .brand .brand-text { display: none; } } /* keep the lockup left, language + interpreter right, in the client header row */ .langbar .brand { margin-inline-end: auto; } .lang-select { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13.5px; color: var(--teal-800); } .lang-select select { appearance: none; -webkit-appearance: none; background: #fff; border: 1px solid var(--teal-line); color: var(--teal-800); font-weight: 700; padding: 7px 30px 7px 11px; border-radius: var(--r-sm); min-height: 38px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134950' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; } [dir="rtl"] .lang-select select { background-position: left 9px center; padding: 7px 11px 7px 30px; } .interp { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); font-weight: 600; } .interp a { color: var(--teal-800); font-weight: 800; text-decoration: none; white-space: nowrap; } .interp a:hover { text-decoration: underline; } /* ── Screen routing ───────────────────────────────────────────── The standalone design used CSS :target routing (.screen hidden unless targeted). In the wired SPA the router renders exactly ONE screen into #app, so the design's hide-by-default is removed — a rendered .screen is always visible. (Hash routing is handled by HL.app, not CSS.) */ .screen { display: block; scroll-margin-top: 8px; } .wrap { padding: 18px 16px 30px; } .stack > * + * { margin-top: 14px; } .stack-lg > * + * { margin-top: 20px; } .section-gap { margin-top: 26px; } /* Back link row */ .topnav { display: flex; align-items: center; gap: 8px; padding: 12px 16px 4px; } .backlink { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; color: var(--ink-2); text-decoration: none; padding: 8px 10px 8px 6px; border-radius: var(--r-sm); min-height: 44px; } .backlink:hover { background: rgba(31,42,43,.05); } [dir="rtl"] .backlink svg { transform: scaleX(-1); } /* ── Buttons ───────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1.5px solid transparent; border-radius: var(--r-md); font-weight: 750; font-size: 17px; letter-spacing: -0.01em; padding: 0 20px; min-height: 52px; text-decoration: none; text-align: center; transition: background .15s ease, transform .08s ease, box-shadow .15s ease; } .btn:active { transform: translateY(1px); } .btn-block { display: flex; width: 100%; } .btn-lg { min-height: 58px; font-size: 18px; } .btn-primary { background: var(--terra); color: #fff; box-shadow: var(--sh-1); } .btn-primary:hover { background: var(--terra-700); } .btn-teal { background: var(--teal); color: #fff; box-shadow: var(--sh-1); } .btn-teal:hover { background: var(--teal-700); } .btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); } .btn-ghost:hover { background: var(--surface-2); } .btn-quiet { background: transparent; color: var(--ink-2); min-height: 48px; } .btn-quiet:hover { background: rgba(31,42,43,.05); } /* greyed/disabled flare on a directory listing — not on Flare yet */ .btn-greyed { background: var(--bg-sunk); color: var(--ink-3); border-color: var(--line-2); cursor: not-allowed; font-weight: 750; } .btn-greyed:hover { background: var(--bg-sunk); } .btn-greyed svg { opacity: .65; } .btn-danger { background: var(--red-050); color: var(--red-700); border-color: var(--red-100); } .btn-danger:hover { background: var(--red-100); } /* ── Cards ─────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-1); } .card-pad { padding: 18px; } .eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } /* ── Pills / status (icon + text + dot — never colour alone) ── */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 750; line-height: 1.1; white-space: nowrap; } .pill svg { width: 15px; height: 15px; } .pill .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .pill-green { background: var(--green-050); color: var(--green-700); } .pill-amber { background: var(--amber-050); color: var(--amber-700); } .pill-red { background: var(--red-050); color: var(--red-700); } .pill-teal { background: var(--teal-050); color: var(--teal-800); } .pill-grey { background: var(--bg-sunk); color: var(--ink-2); } .dot-green { background: var(--green); } .dot-amber { background: var(--amber); } .dot-red { background: var(--red); } .dot-teal { background: var(--teal); } /* ── Text helpers ──────────────────────────────────────────── */ .t-sec { color: var(--ink-2); } .t-muted { color: var(--ink-3); } .t-sm { font-size: 14.5px; } .lede { font-size: 18px; color: var(--ink-2); line-height: 1.55; } .num { font-variant-numeric: tabular-nums; } .divider { height: 1px; background: var(--line); border: 0; margin: 16px 0; } /* ── Icon helpers ──────────────────────────────────────────── */ .ic { width: 24px; height: 24px; flex: none; } .ic-sm { width: 18px; height: 18px; } .ic-lg { width: 28px; height: 28px; } .iconwrap { width: 52px; height: 52px; border-radius: 14px; flex: none; display: flex; align-items: center; justify-content: center; } .iw-teal { background: var(--teal-050); color: var(--teal); } .iw-terra { background: var(--terra-050); color: var(--terra-700); } .iw-green { background: var(--green-050); color: var(--green-700); } /* ── HERO ──────────────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; padding: 30px 18px 26px; } .hero-art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; } .hero-inner { position: relative; z-index: 1; } .hero h1 { font-size: 31px; } .hero .lede { margin-top: 10px; max-width: 22ch; } /* ── Big choice cards (Home) ───────────────────────────────── */ .choice { display: flex; align-items: center; gap: 15px; width: 100%; text-align: start; text-decoration: none; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-card); padding: 18px; box-shadow: var(--sh-1); transition: border-color .15s ease, box-shadow .15s ease, transform .08s ease; } .choice:hover { box-shadow: var(--sh-2); } .choice:active { transform: translateY(1px); } .choice.primary { border-color: var(--terra-100); background: linear-gradient(180deg,#fff, var(--terra-050)); } .choice .ctext { flex: 1; min-width: 0; } .choice .ctitle { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; } .choice .csub { display: block; color: var(--ink-2); font-size: 15px; margin-top: 3px; } .choice .chev { color: var(--ink-3); flex: none; } [dir="rtl"] .choice .chev { transform: scaleX(-1); } /* ── "In a hurry" panel ────────────────────────────────────── */ .hurry { background: var(--teal-800); color: #eaf3f3; border-radius: var(--r-card); padding: 18px; box-shadow: var(--sh-2); } .hurry h2 { color: #fff; font-size: 19px; } .hurry-grid { display: grid; gap: 9px; margin-top: 13px; } .hurry-call { display: flex; align-items: center; gap: 12px; text-decoration: none; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-md); padding: 13px 14px; color: #fff; min-height: 56px; } .hurry-call:hover { background: rgba(255,255,255,.15); } .hurry-call .hc-name { font-weight: 800; font-size: 16px; } .hurry-call .hc-sub { font-size: 13px; color: #cfe3e3; } .hurry-call .hc-num { margin-inline-start: auto; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 16px; } /* ── How it works (3 steps) ────────────────────────────────── */ .steps { display: grid; gap: 12px; } .step { display: flex; gap: 14px; align-items: flex-start; } .step-n { width: 36px; height: 36px; border-radius: 50%; flex: none; background: var(--teal-050); color: var(--teal-800); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; border: 1px solid var(--teal-line); } .step h3 { font-size: 16.5px; } .step p { font-size: 15px; color: var(--ink-2); margin-top: 2px; } /* ── Progress (questionnaire) ──────────────────────────────── */ .progress-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .progress-head .pct { font-size: 14px; font-weight: 800; color: var(--teal-800); } .progress-track { height: 8px; border-radius: 999px; background: var(--bg-sunk); overflow: hidden; } .progress-fill { height: 100%; border-radius: 999px; background: var(--teal); transition: width .3s ease; } /* ── Option list (big tap targets) ─────────────────────────── */ .optlist { display: grid; gap: 11px; } .opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: start; text-decoration: none; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line-2); border-radius: var(--r-md); padding: 15px 16px; min-height: 64px; transition: border-color .12s ease, background .12s ease; } .opt:hover { border-color: var(--teal); background: var(--teal-050); } .opt .opt-ic { color: var(--teal); flex: none; } .opt .opt-t { flex: 1; font-weight: 700; font-size: 16.5px; } .opt .opt-sub { display: block; font-weight: 500; font-size: 13.5px; color: var(--ink-3); margin-top: 1px; } .opt .chev { color: var(--ink-3); flex: none; } [dir="rtl"] .opt .chev { transform: scaleX(-1); } .opt.danger:hover { border-color: var(--red); background: var(--red-050); } .opt.danger .opt-ic { color: var(--red-700); } /* selected state for tap-to-select / toggle rows (step 3 "I'm…", pet/ATSI/LGBTQIA+) */ .opt.opt-selected { border-color: var(--teal); background: var(--teal-050); box-shadow: inset 0 0 0 1px var(--teal); } .opt.opt-selected .chev { color: var(--teal); } /* ── Form fields ───────────────────────────────────────────── */ .field { display: block; } .field > .label { display: block; font-weight: 750; font-size: 16px; margin-bottom: 6px; } .field .hint { font-size: 13.5px; color: var(--ink-3); margin-bottom: 8px; } .field .optional { font-weight: 600; color: var(--ink-3); font-size: 13.5px; } .input, .textarea, .select-box { width: 100%; background: var(--surface); border: 1.5px solid var(--line-2); border-radius: var(--r-md); padding: 13px 14px; color: var(--ink); min-height: 52px; line-height: 1.4; } .textarea { min-height: 110px; resize: vertical; } .input::placeholder, .textarea::placeholder { color: var(--ink-3); } .input:focus, .textarea:focus, .select-box:focus { border-color: var(--teal); outline: 3px solid var(--teal-050); outline-offset: 0; } .charhint { font-size: 13px; color: var(--ink-3); margin-top: 6px; } /* postcode -> suburb picker (live via /api/suburbs, bundled fallback) */ .suburbfield input { width: 100%; background: var(--surface); border: 1.5px solid var(--line-2); border-radius: var(--r-md); padding: 13px 14px; color: var(--ink); min-height: 52px; line-height: 1.4; } .suburbfield input::placeholder { color: var(--ink-3); } .suburbfield input:focus, .suburbfield select:focus { border-color: var(--teal); outline: 3px solid var(--teal-050); outline-offset: 0; } .suburbfield select { width: 100%; background: var(--surface); border: 1.5px solid var(--line-2); border-radius: var(--r-md); padding: 13px 14px; color: var(--ink); min-height: 52px; margin-top: 4px; } .suburbfield__sub { margin-top: 8px; } .suburbfield__sub .small { font-size: 13.5px; } .suburbfield__sub .muted { color: var(--ink-3); } /* chip choice group (CSS radio) */ .chipset { display: flex; flex-wrap: wrap; gap: 9px; } .chip-radio { position: absolute; opacity: 0; pointer-events: none; } .chip { display: inline-flex; align-items: center; gap: 8px; padding: 11px 15px; border-radius: var(--r-pill); min-height: 48px; border: 1.5px solid var(--line-2); background: var(--surface); font-weight: 700; font-size: 15px; color: var(--ink-2); cursor: pointer; } .chip:hover { border-color: var(--teal); } .chip-radio:checked + .chip { border-color: var(--teal); background: var(--teal-050); color: var(--teal-800); } .chip-radio:focus-visible + .chip { outline: 3px solid var(--teal); outline-offset: 2px; } .chip svg { color: var(--teal); } /* ── Danger banner ─────────────────────────────────────────── */ .danger-banner { display: flex; gap: 13px; align-items: flex-start; background: var(--amber-050); border: 1.5px solid var(--amber-100); border-radius: var(--r-card); padding: 15px 16px; } .danger-banner .db-ic { color: var(--amber-700); flex: none; margin-top: 1px; } .danger-banner h3 { font-size: 16px; color: var(--amber-700); } .danger-banner p { font-size: 14.5px; color: var(--ink-2); margin-top: 3px; } .danger-banner .db-calls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; } .db-call { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; background: #fff; border: 1.5px solid var(--amber-100); color: var(--amber-700); font-weight: 800; padding: 8px 13px; border-radius: var(--r-pill); min-height: 42px; font-size: 14.5px; } .db-call:hover { background: var(--amber-050); } /* ── Match card ────────────────────────────────────────────── */ .match { padding: 18px; display: flex; flex-direction: column; height: 100%; /* column: content grows, actions pin to base */ position: relative; isolation: isolate; animation: surface .5s cubic-bezier(.22,.61,.36,1) both; } /* subtle gloss sheen + gentle entrance as the contact card surfaces (CD: Flare App) */ .match::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(135deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 26%), radial-gradient(120% 80% at 0% 0%, rgba(244,166,58,.07), transparent 60%); } .match > * { position: relative; z-index: 1; } .results-grid .match:nth-child(2) { animation-delay: .07s; } .results-grid .match:nth-child(3) { animation-delay: .14s; } .results-grid .match:nth-child(4) { animation-delay: .21s; } .results-grid .match:nth-child(5) { animation-delay: .28s; } @keyframes surface { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .match { animation: none; } } /* light-sweep flourish — a soft diagonal highlight rides across once as each card surfaces (CD: Flare App) */ .match .sweep { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; border-radius: inherit; } .match .sweep::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: -60%; width: 45%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-18deg); opacity: 0; } .results-grid .match .sweep::after { animation: sweep 1.1s ease .30s 1; } .results-grid .match:nth-child(2) .sweep::after { animation-delay: .38s; } .results-grid .match:nth-child(3) .sweep::after { animation-delay: .46s; } .results-grid .match:nth-child(4) .sweep::after { animation-delay: .54s; } .results-grid .match:nth-child(5) .sweep::after { animation-delay: .62s; } @keyframes sweep { 0% { left: -60%; opacity: 0; } 12% { opacity: 1; } 60%, 100% { left: 120%; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .match .sweep { display: none; } } .match-head { display: flex; align-items: flex-start; gap: 12px; } .match-head > .m-headmain { flex: 1; min-width: 0; } /* long names wrap, don't overflow */ .match-head .pill { flex: none; } .match-head .m-name { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; overflow-wrap: anywhere; } .match-head .m-meta { font-size: 14px; color: var(--ink-3); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .match-head .m-meta svg { flex: none; } .match-head .m-pills { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; } /* "why this match" reasons on a directory card */ .m-reasons { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 11px; } .m-reason { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 650; color: var(--teal-800); } .m-reason svg { width: 14px; height: 14px; flex: none; color: var(--teal); } .why { display: flex; gap: 10px; align-items: flex-start; margin-top: 13px; background: var(--teal-050); border-radius: var(--r-md); padding: 12px 13px; } .why svg { color: var(--teal); flex: none; margin-top: 1px; } .why p { font-size: 14.5px; color: var(--teal-800); } .why strong { font-weight: 800; } .tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; } .tag { font-size: 13px; font-weight: 700; color: var(--ink-2); background: var(--bg-sunk); padding: 5px 11px; border-radius: var(--r-pill); } /* ── Multi-need (Layout B) ── "You asked for" chips + per-card ✓/✗ coverage strip. Honest: every item is icon + text label, never colour-alone; a miss is calm grey, not red. */ .asked { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; } .asked .a-label { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); } .asked .need-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--teal-050); border: 1px solid var(--teal-line); color: var(--teal-800); font-size: 13.5px; font-weight: 700; padding: 6px 12px; border-radius: var(--r-pill); } .asked .need-chip svg { width: 15px; height: 15px; color: var(--teal); flex: none; } .covstrip { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; } .cs-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 5px 11px 5px 7px; border-radius: var(--r-pill); } .cs-item .cs-badge { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; } .cs-item .ic-cs { width: 13px; height: 13px; } .cs-item.yes { background: var(--green-050); color: var(--green-700); } .cs-item.yes .cs-badge { background: var(--green-100); } .cs-item.no { background: var(--bg-sunk); color: var(--ink-3); } .cs-item.no .cs-badge { background: #e3dccd; } /* one-line description on a registered-charity card */ .m-desc { font-size: 14.5px; color: var(--ink-2); margin-top: 11px; line-height: 1.5; } /* actions pinned to the card base so rows line up across the grid */ .match .stack { display: flex; flex-direction: column; gap: 9px; margin-top: auto; padding-top: 16px; } .match .stack > * + * { margin-top: 0; } /* override the global .stack spacing; gap handles it */ .match .stack .btn { min-height: 48px; font-size: 15.5px; } /* "phone being confirmed" — reads as a control, isn't focusable */ .m-pending { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: var(--r-md); background: var(--surface-2); border: 1.5px dashed var(--line-2); color: var(--ink-3); font-weight: 700; font-size: 14.5px; } .m-pending svg { width: 17px; height: 17px; flex: none; } /* registered-charity directory section header */ .charity-head { margin: 4px 0 18px; padding-top: 6px; } .charity-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--teal-800); background: var(--teal-050); border: 1px solid var(--teal-line); padding: 6px 11px; border-radius: var(--r-pill); } .charity-eyebrow svg { width: 15px; height: 15px; color: var(--teal); flex: none; } .charity-title { font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--teal-900); margin: 13px 0 0; } .charity-intro { font-size: 15px; color: var(--ink-2); line-height: 1.55; margin: 7px 0 0; max-width: 62ch; } @media (max-width: 719px) { .charity-title { font-size: 19px; } .charity-intro { font-size: 14.5px; } } /* ── Burn-time bar (serious) ───────────────────────────────── */ .flarecard { padding: 18px; border: 1.5px solid var(--terra-100); } .burn-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .burn-time { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); } .burn-time .unit { font-size: 15px; font-weight: 700; color: var(--ink-3); } .burn-track { position: relative; height: 12px; border-radius: 999px; margin-top: 12px; background: var(--bg-sunk); overflow: hidden; border: 1px solid var(--line-2); } .burn-fill { height: 100%; border-radius: 999px 0 0 999px; background: linear-gradient(90deg, var(--teal) 0%, var(--teal) 55%, var(--amber) 100%); } .burn-meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; color: var(--ink-2); font-weight: 600; } .livedot { width: 9px; height: 9px; border-radius: 50%; background: var(--terra); flex: none; box-shadow: 0 0 0 4px var(--terra-050); } @media (prefers-reduced-motion: no-preference) { .livedot { animation: pulse 2.4s ease-in-out infinite; } } @keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px var(--terra-050); } 50% { box-shadow: 0 0 0 6px rgba(194,87,26,.10); } } /* ── Offer / thread rows ───────────────────────────────────── */ .offer { display: flex; gap: 13px; align-items: flex-start; padding: 15px; } .offer .o-name { font-weight: 800; font-size: 16px; } .offer .o-msg { font-size: 14.5px; color: var(--ink-2); margin-top: 3px; } .thread { display: flex; flex-direction: column; gap: 10px; } .bubble { max-width: 84%; padding: 11px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; } .bubble.them { background: var(--surface-2); border: 1px solid var(--line); border-end-start-radius: 5px; align-self: flex-start; } .bubble.me { background: var(--teal); color: #fff; border-end-end-radius: 5px; align-self: flex-end; } .bubble .who { font-size: 12px; font-weight: 800; color: var(--ink-3); margin-bottom: 3px; } /* ── Switch (CSS checkbox) ─────────────────────────────────── */ .switchrow { display: flex; align-items: center; gap: 14px; } .switchrow .sr-text { flex: 1; min-width: 0; } .switchrow .sr-title { font-weight: 750; font-size: 16px; } .switchrow .sr-sub { font-size: 14px; color: var(--ink-2); margin-top: 2px; } .switch { position: relative; flex: none; width: 56px; height: 32px; } .switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .switch .track { position: absolute; inset: 0; background: var(--line-2); border-radius: 999px; transition: background .18s ease; } .switch .knob { position: absolute; top: 3px; inset-inline-start: 3px; width: 26px; height: 26px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s ease; } .switch input:checked ~ .track { background: var(--teal); } .switch input:checked ~ .knob { transform: translateX(24px); } [dir="rtl"] .switch input:checked ~ .knob { transform: translateX(-24px); } .switch input:focus-visible ~ .track { outline: 3px solid var(--teal); outline-offset: 2px; } /* ── Privacy area rows ─────────────────────────────────────── */ .privacy-card { background: var(--surface-2); } .code-row { display: flex; align-items: center; gap: 12px; background: #fff; border: 1.5px dashed var(--line-2); border-radius: var(--r-md); padding: 14px; } .code-row .code { font-size: 22px; font-weight: 800; letter-spacing: .18em; font-variant-numeric: tabular-nums; color: var(--teal-800); } .list-action { display: flex; align-items: center; gap: 13px; width: 100%; text-align: start; background: none; border: 0; border-top: 1px solid var(--line); padding: 16px 2px; min-height: 60px; color: var(--ink); } .list-action:first-of-type { border-top: 0; } .list-action:hover { background: rgba(31,42,43,.03); } .list-action .la-t { flex: 1; font-weight: 700; font-size: 16px; } .list-action .la-sub { display: block; font-weight: 500; font-size: 13.5px; color: var(--ink-3); margin-top: 1px; } .list-action.danger .la-t { color: var(--red-700); } .list-action.danger svg { color: var(--red-700); } /* ── Browse list ───────────────────────────────────────────── */ .svc { display: flex; gap: 14px; align-items: flex-start; padding: 16px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--sh-1); } .svc:hover { background: var(--surface-2); border-color: var(--line-2); } .svc .s-name { font-weight: 800; font-size: 16.5px; } .svc .s-meta { font-size: 14px; color: var(--ink-3); margin-top: 2px; } .filterbar { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .filterbar::-webkit-scrollbar { display: none; } .filter-chip { white-space: nowrap; padding: 9px 15px; border-radius: var(--r-pill); min-height: 44px; border: 1.5px solid var(--line-2); background: var(--surface); font-weight: 700; font-size: 14.5px; color: var(--ink-2); display: inline-flex; align-items: center; cursor: pointer; } .filter-chip.on { border-color: var(--teal); background: var(--teal-050); color: var(--teal-800); } /* ── Footer ────────────────────────────────────────────────── */ .footer { background: var(--surface-2); border-top: 1px solid var(--line); padding: 22px 16px 34px; margin-top: 8px; } .footer-links { display: flex; flex-wrap: wrap; gap: 6px 20px; } .footer-links a { font-weight: 700; font-size: 15px; color: var(--ink-2); text-decoration: none; padding: 8px 0; min-height: 40px; display: inline-flex; align-items: center; } .footer-links a:hover { color: var(--teal-800); text-decoration: underline; } .footer .fineprint { font-size: 13px; color: var(--ink-3); margin-top: 12px; line-height: 1.5; } /* ── Prose (About / Privacy) ───────────────────────────────── */ .prose p { font-size: 16.5px; color: var(--ink-2); line-height: 1.6; } .prose p + p { margin-top: 13px; } .prose h2 { margin-top: 26px; } .prose h2:first-child { margin-top: 0; } .prose ul.bullets { margin-top: 10px; display: grid; gap: 9px; } .prose ul.bullets li { display: flex; gap: 10px; font-size: 16px; color: var(--ink-2); } .prose ul.bullets svg { color: var(--teal); flex: none; margin-top: 3px; } /* Card-collection helpers: a vertical stack on mobile, a grid on desktop. */ .results-grid > * + * { margin-top: 16px; } .svc-list { display: grid; gap: 12px; } /* ── Responsive: fill the screen on tablet/desktop ─────────────────── Matches the previous model's ~1080px layout. The frame + crisis/language bars widen to span the screen, and content collections lay out in grids so it never reads as a narrow "pamphlet". Reading- and form-heavy screens keep a comfortable measure, centred within the wide frame. */ @media (min-width: 720px) { :root { --maxw: 1080px; } .wrap { max-width: 760px; margin-inline: auto; padding: 28px 24px 48px; } .wrap.wrap--wide { max-width: 1080px; } .home-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .home-two > * { margin-top: 0 !important; } .hurry-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .steps { grid-template-columns: repeat(3, 1fr); gap: 16px; } .results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; } /* same-row cards equal height */ .results-grid > * + * { margin-top: 0; } .svc-list { grid-template-columns: 1fr 1fr; } } /* ── Wired-app tweaks (not in the standalone design) ─────────────── The static design used for quick-exit / "More help"; in the app they're