/* ===================================================================== MyCommunity — public marketing site redesign Shared design system. Civic-tech, forest/cream identity, elevated. ===================================================================== */ /* ---------- Tokens ---------- */ :root { /* === Base theme: WALES (default — rolling green hills) === */ --forest-900:#08201A; --forest-800:#0E2C22; --forest-700:#143E30; --forest-600:#194E3D; --forest:#1F5F4A; --forest-400:#3F8166; --forest-300:#6FA98E; --forest-200:#A1C8B6; --forest-100:#CFE3DA; --forest-50:#EAF3EF; --emerald:#2E8B57; --emerald-dark:#226B43; --emerald-light:#3CA66A; --teal:#36B7B4; --teal-dark:#2A9491; --teal-light:#5BC9C6; --gold:#D9A441; --gold-dark:#BE8A2D; --gold-soft:#F6EBD4; --accent:#1F5F4A; /* neutrals (kept constant across themes so text stays neutral) */ --cream:#F7F7F5; --paper:#FFFFFF; --sand:#F0F0EC; --ink:#1A2322; --body:#3A4644; --muted:#637071; --line:#E4E7E6; --line-soft:#EDEFEE; /* effects */ --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:34px; --sh-sm:0 1px 2px rgba(14,44,34,.05), 0 2px 8px -4px rgba(14,44,34,.10); --sh:0 2px 4px rgba(14,44,34,.04), 0 18px 40px -22px rgba(14,44,34,.28); --sh-lg:0 30px 80px -40px rgba(8,32,26,.55); --container:1200px; --ease:cubic-bezier(.22,1,.36,1); --font-d:'Manrope', system-ui, sans-serif; --font-b:'Inter', system-ui, sans-serif; } /* === Nation themes (set data-nation on ) === */ [data-nation="uk"]{ --forest-900:#081530; --forest-800:#0C1E40; --forest-700:#102950; --forest-600:#163566; --forest:#1B4079; --forest-400:#3A5E9B; --forest-300:#7089B5; --forest-200:#A9B8D4; --forest-100:#D3DBEA; --forest-50:#EDF1F8; --emerald:#2A5BA8; --emerald-dark:#1F4684; --emerald-light:#4E7BC4; --teal:#5B8FD0; --teal-dark:#3F6FB0; --teal-light:#84ADE0; --gold:#C8102E; --gold-dark:#A60D26; --gold-soft:#F7DEE2; --accent:#C8102E; } [data-nation="wales"]{ --forest-900:#08201A; --forest-800:#0E2C22; --forest-700:#143E30; --forest-600:#194E3D; --forest:#1F5F4A; --forest-400:#3F8166; --forest-300:#6FA98E; --forest-200:#A1C8B6; --forest-100:#CFE3DA; --forest-50:#EAF3EF; --emerald:#2E8B57; --emerald-dark:#226B43; --emerald-light:#3CA66A; --teal:#36B7B4; --teal-dark:#2A9491; --teal-light:#5BC9C6; --gold:#D9A441; --gold-dark:#BE8A2D; --gold-soft:#F6EBD4; --accent:#1F5F4A; } [data-nation="scotland"]{ --forest-900:#081A2E; --forest-800:#0E2A48; --forest-700:#133961; --forest-600:#184879; --forest:#1E5793; --forest-400:#3F73B0; --forest-300:#6E9BCB; --forest-200:#A2C2E2; --forest-100:#CFE0F1; --forest-50:#ECF2F9; --emerald:#2E6FB0; --emerald-dark:#22568A; --emerald-light:#4E8AC8; --teal:#4F97C9; --teal-dark:#3E78A8; --teal-light:#82C0E8; --gold:#9579C5; --gold-dark:#6F5DA6; --gold-soft:#ECE7F4; --accent:#1E5793; } [data-nation="england"]{ --forest-900:#320A12; --forest-800:#4E111C; --forest-700:#6B1827; --forest-600:#861F30; --forest:#9E2A3C; --forest-400:#C44E63; --forest-300:#DD8090; --forest-200:#ECB0BA; --forest-100:#F6D7DC; --forest-50:#FBEEF0; --emerald:#B23A4C; --emerald-dark:#8E2C3B; --emerald-light:#C85A6B; --teal:#6E8398; --teal-dark:#556A7E; --teal-light:#93A6B8; --gold:#C9A24A; --gold-dark:#A98432; --gold-soft:#F3EBD6; --accent:#9E2A3C; } [data-nation="ireland"]{ --forest-900:#042817; --forest-800:#063A20; --forest-700:#084E2B; --forest-600:#0B6437; --forest:#0E7A43; --forest-400:#2A9D5B; --forest-300:#58B97F; --forest-200:#97D4AE; --forest-100:#CBEAD7; --forest-50:#E9F6EE; --emerald:#13914E; --emerald-dark:#0E7340; --emerald-light:#34AE6C; --teal:#3FAE9C; --teal-dark:#2E8E7E; --teal-light:#6FC8BA; --gold:#E08A3C; --gold-dark:#C26E22; --gold-soft:#F8E8D5; --accent:#0E7A43; } * { box-sizing:border-box; } html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body { margin:0; background:var(--cream); color:var(--body); font-family:var(--font-b); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img { max-width:100%; display:block; } a { color:var(--emerald-dark); text-decoration:none; } h1,h2,h3,h4 { font-family:var(--font-d); color:var(--ink); line-height:1.1; letter-spacing:-.02em; margin:0; font-weight:800; } p { margin:0; } ::selection { background:var(--forest-200); color:var(--forest-900); } :focus-visible { outline:2.5px solid var(--emerald); outline-offset:3px; border-radius:4px; } .container { max-width:var(--container); margin:0 auto; padding:0 28px; } .narrow { max-width:780px; margin-left:auto; margin-right:auto; } section { position:relative; } .sec { padding:clamp(72px,9vw,124px) 0; } .sec-sm { padding:clamp(56px,7vw,88px) 0; } .bg-cream { background:var(--cream); } .bg-paper { background:var(--paper); } .bg-sand { background:var(--sand); } .bg-forest { background:var(--forest-800); color:var(--cream); } .bg-forest-deep { background:radial-gradient(130% 120% at 50% -10%, var(--forest-700) 0%, var(--forest-900) 72%); color:var(--cream); } /* ---------- Typography helpers ---------- */ .eyebrow { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-d); font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--emerald-dark); } .eyebrow::before { content:""; width:22px; height:2px; background:var(--gold); border-radius:2px; } .eyebrow.center { justify-content:center; } .eyebrow.on-dark { color:var(--teal-light); } .display { font-size:clamp(38px,5.4vw,68px); font-weight:800; letter-spacing:-.03em; line-height:1.03; } .h-xl { font-size:clamp(30px,3.8vw,46px); font-weight:800; letter-spacing:-.025em; } .h-lg { font-size:clamp(25px,2.8vw,34px); font-weight:800; letter-spacing:-.02em; } .h-md { font-size:21px; font-weight:700; } .lede { font-size:clamp(18px,1.5vw,21px); line-height:1.6; color:var(--muted); } .on-dark .lede, .lede.on-dark { color:rgba(248,246,242,.74); } .on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4 { color:#fff; } .muted { color:var(--muted); } .grad-word { background:linear-gradient(100deg,var(--emerald) 0%,var(--teal) 95%); -webkit-background-clip:text; background-clip:text; color:transparent; } .section-head { max-width:680px; } .section-head.center { margin:0 auto; text-align:center; } .section-head .lede { margin-top:18px; } .section-head h2 { margin-top:16px; } /* ---------- Buttons ---------- */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-d); font-weight:700; font-size:15.5px; letter-spacing:-.01em; padding:14px 26px; border-radius:999px; border:1.5px solid transparent; cursor:pointer; transition:transform .25s var(--ease), background .2s, box-shadow .25s, color .2s, border-color .2s; white-space:nowrap; } .btn svg { width:18px; height:18px; } .btn .arr { transition:transform .25s var(--ease); } .btn:hover .arr { transform:translateX(3px); } .btn-primary { background:var(--forest); color:#fff; box-shadow:0 10px 24px -12px rgba(31,95,74,.7); } .btn-primary:hover { background:var(--forest-600); transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(31,95,74,.75); } .btn-gold { background:var(--gold); color:var(--forest-900); } .btn-gold:hover { background:var(--gold-dark); transform:translateY(-2px); } .btn-white { background:#fff; color:var(--forest); } .btn-white:hover { transform:translateY(-2px); box-shadow:0 16px 34px -16px rgba(0,0,0,.4); } .btn-ghost { background:transparent; color:var(--forest); border-color:var(--forest-100); } .btn-ghost:hover { border-color:var(--forest-300); background:var(--forest-50); } .btn-ghost.on-dark { color:#fff; border-color:rgba(255,255,255,.25); } .btn-ghost.on-dark:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.45); } .btn-lg { padding:17px 32px; font-size:16.5px; } /* ---------- Nav ---------- */ .nav { position:sticky; top:0; z-index:60; background:rgba(248,247,245,.82); border-top:3px solid var(--accent); backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid transparent; transition:border-color .3s, background .3s, box-shadow .3s; } .nav.scrolled { border-bottom-color:var(--line); background:rgba(248,247,245,.94); box-shadow:0 10px 30px -24px rgba(14,44,34,.5); } .nav-in { display:flex; align-items:center; gap:20px; height:72px; } .brand { display:flex; align-items:center; gap:11px; font-family:var(--font-d); font-weight:800; font-size:19px; color:var(--ink); letter-spacing:-.02em; } /* Brand mark = official "Your Place" app icon: solid forest tile + gold pin. */ .brand .mark { width:38px; height:38px; border-radius:11px; background:var(--forest); display:grid; place-items:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 14px -8px rgba(31,95,74,.6); flex:none; } .brand .mark svg { width:30px; height:30px; } .nav-links { display:flex; align-items:center; gap:2px; margin-left:8px; } .nav-links a { position:relative; white-space:nowrap; font-family:var(--font-d); font-weight:600; font-size:15px; color:var(--muted); padding:9px 13px; border-radius:999px; transition:color .2s, background .2s; } .nav-links a:hover { color:var(--forest); background:var(--forest-50); } .nav-links a.active { color:var(--forest); } .nav-links a.active::after { content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px; border-radius:2px; background:var(--accent); } .nav-cta { margin-left:auto; display:flex; align-items:center; gap:6px; } .nav-login { font-family:var(--font-d); font-weight:600; font-size:15px; color:var(--forest-700); padding:9px 16px; border-radius:999px; display:inline-flex; align-items:center; gap:7px; } .nav-login:hover { background:var(--forest-50); } .nav-burger { display:none; width:44px; height:44px; border:none; background:transparent; border-radius:12px; cursor:pointer; color:var(--ink); } .mobile-menu { display:none; } @media (max-width:940px){ .nav-links, .nav-login { display:none; } .nav-burger { display:grid; place-items:center; } .nav-cta .btn { padding:11px 18px; font-size:14px; } .mobile-menu { display:block; position:fixed; inset:74px 0 auto 0; z-index:55; background:var(--cream); border-bottom:1px solid var(--line); padding:14px 28px 22px; transform:translateY(-12px); opacity:0; pointer-events:none; transition:.25s var(--ease); } .mobile-menu.open { transform:translateY(0); opacity:1; pointer-events:auto; } .mobile-menu a { display:block; font-family:var(--font-d); font-weight:600; font-size:17px; color:var(--forest-800); padding:13px 8px; border-bottom:1px solid var(--line-soft); } .mobile-menu .btn { width:100%; margin-top:16px; } } /* ---------- Region selector (flag) ---------- */ .region { position:relative; } .region-btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-d); font-weight:600; font-size:14px; color:var(--forest-700); background:var(--paper); border:1.5px solid var(--line); padding:7px 12px 7px 8px; border-radius:999px; cursor:pointer; transition:border-color .2s, box-shadow .2s; } .region-btn:hover { border-color:var(--forest-300); box-shadow:var(--sh-sm); } .region-btn .flag { width:24px; height:16px; border-radius:3px; overflow:hidden; flex:none; box-shadow:0 0 0 1px rgba(14,44,34,.08); display:block; } .region-btn .chev { width:14px; height:14px; color:var(--muted); transition:transform .2s; } .region-btn[aria-expanded="true"] .chev { transform:rotate(180deg); } .region-name { white-space:nowrap; } .region-menu { position:absolute; right:0; top:calc(100% + 10px); width:248px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh); padding:8px; z-index:80; opacity:0; transform:translateY(-8px); pointer-events:none; transition:.2s var(--ease); } .region-menu.open { opacity:1; transform:none; pointer-events:auto; } .region-menu .rm-head { font-family:var(--font-d); font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:8px 10px 6px; } .region-opt { display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:transparent; border:none; cursor:pointer; padding:10px; border-radius:12px; font-family:var(--font-b); font-size:14.5px; color:var(--ink); transition:background .15s; } .region-opt:hover { background:var(--forest-50); } .region-opt .flag { width:30px; height:20px; border-radius:4px; overflow:hidden; flex:none; box-shadow:0 0 0 1px rgba(14,44,34,.08); } .region-opt .ro-name { font-family:var(--font-d); font-weight:600; } .region-opt .ro-sub { font-size:12px; color:var(--muted); margin-top:1px; } .region-opt .ro-check { margin-left:auto; color:var(--forest); opacity:0; } .region-opt.sel .ro-check { opacity:1; } .region-opt.sel { background:var(--forest-50); } @media (max-width:940px){ .region { order:-1; } .region-btn .region-name, .region-btn .chev { display:none; } .region-btn { padding:7px; } .region-menu { right:auto; left:0; } } /* ---------- Pills / chips / badges ---------- */ .chip { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; font-family:var(--font-d); padding:7px 14px; border-radius:999px; background:#fff; border:1px solid var(--forest-100); color:var(--forest-800); box-shadow:var(--sh-sm); } .chip svg { width:16px; height:16px; color:var(--emerald); } .chip.on-dark { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); color:#fff; } .chip.on-dark svg { color:var(--teal-light); } .tag { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; font-family:var(--font-d); letter-spacing:.04em; text-transform:uppercase; padding:4px 10px; border-radius:999px; } .tag.green { background:var(--forest-50); color:var(--emerald-dark); } .tag.gold { background:var(--gold-soft); color:var(--gold-dark); } .tag.teal { background:rgba(54,183,180,.14); color:var(--teal-dark); } .tag.dot::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; } /* ---------- Cards ---------- */ .card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); } .card-pad { padding:30px; } .feature { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; transition:transform .3s var(--ease), box-shadow .3s, border-color .3s; } .feature:hover { transform:translateY(-4px); box-shadow:var(--sh); border-color:var(--forest-100); } .ic { width:50px; height:50px; border-radius:14px; display:grid; place-items:center; flex:none; } .ic svg { width:24px; height:24px; } .ic.green { background:var(--forest-50); color:var(--emerald-dark); } .ic.teal { background:rgba(54,183,180,.13); color:var(--teal-dark); } .ic.gold { background:var(--gold-soft); color:var(--gold-dark); } .ic.ink { background:var(--forest-800); color:var(--teal-light); } .grid { display:grid; gap:22px; } .g-2 { grid-template-columns:repeat(2,1fr); } .g-3 { grid-template-columns:repeat(3,1fr); } .g-4 { grid-template-columns:repeat(4,1fr); } @media (max-width:900px){ .g-3,.g-4 { grid-template-columns:repeat(2,1fr); } } @media (max-width:620px){ .g-2,.g-3,.g-4 { grid-template-columns:1fr; } } /* ---------- Trust bar ---------- */ .trustbar { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper); } .trustbar .row { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding:22px 0; } .trustbar .lab { font-family:var(--font-d); font-weight:700; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } .trustbar .marks { display:flex; align-items:center; gap:34px; flex-wrap:wrap; } .trustbar .mk { display:flex; align-items:center; gap:9px; font-family:var(--font-d); font-weight:700; color:var(--forest-700); font-size:15px; opacity:.85; } .trustbar .mk svg { width:20px; height:20px; color:var(--forest-300); } /* ---------- Stat ---------- */ .stat .n { font-family:var(--font-d); font-weight:800; font-size:clamp(34px,4vw,46px); letter-spacing:-.03em; line-height:1; color:var(--forest); } .on-dark .stat .n, .stat.on-dark .n { color:#fff; } .stat .n span { color:var(--teal); } .stat .l { margin-top:8px; font-size:14.5px; color:var(--muted); } .on-dark .stat .l { color:rgba(248,246,242,.7); } /* ---------- Checklist ---------- */ .checks { list-style:none; padding:0; margin:0; display:grid; gap:13px; } .checks li { display:flex; gap:12px; align-items:flex-start; font-weight:500; color:var(--body); } .checks li .ck { width:23px; height:23px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--forest-50); color:var(--emerald); margin-top:1px; } .checks li .ck svg { width:13px; height:13px; } .on-dark .checks li { color:rgba(248,246,242,.88); } .on-dark .checks li .ck { background:rgba(255,255,255,.1); color:var(--teal-light); } /* ---------- Browser / device frames ---------- */ .browser { border-radius:16px; overflow:hidden; background:#fff; border:1px solid rgba(14,44,34,.1); box-shadow:var(--sh-lg); } .browser .bar { display:flex; align-items:center; gap:8px; padding:11px 15px; background:#EEF1EC; border-bottom:1px solid var(--line); } .browser .dots { display:flex; gap:6px; } .browser .dots i { width:11px; height:11px; border-radius:50%; background:#CBD2CB; } .browser .url { flex:1; margin-left:8px; background:#fff; border-radius:8px; padding:5px 12px; font-size:12px; color:var(--muted); font-family:ui-monospace,Menlo,monospace; display:flex; align-items:center; gap:7px; border:1px solid var(--line); } .browser .url svg { width:12px; height:12px; color:var(--emerald); } .phone { width:248px; border-radius:38px; background:#0E2C22; padding:11px; box-shadow:var(--sh-lg); } .phone .screen { border-radius:28px; overflow:hidden; background:var(--cream); position:relative; } .phone .notch { position:absolute; top:0; left:50%; transform:translateX(-50%); width:96px; height:22px; background:#0E2C22; border-radius:0 0 14px 14px; z-index:3; } /* ---------- FAQ ---------- */ .faq { border-top:1px solid var(--line); } .faq details { border-bottom:1px solid var(--line); } .faq summary { list-style:none; cursor:pointer; padding:24px 4px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-family:var(--font-d); font-weight:700; font-size:18.5px; color:var(--ink); } .faq summary::-webkit-details-marker { display:none; } .faq summary .pm { width:30px; height:30px; border-radius:50%; border:1.5px solid var(--forest-100); display:grid; place-items:center; flex:none; transition:.25s var(--ease); color:var(--forest); } .faq summary .pm svg { width:15px; height:15px; transition:.25s; } .faq details[open] summary .pm { background:var(--forest); border-color:var(--forest); color:#fff; transform:rotate(45deg); } .faq .ans { padding:0 4px 26px; color:var(--muted); font-size:16.5px; max-width:62ch; } /* ---------- Footer ---------- */ .footer { background:var(--forest-900); color:rgba(248,246,242,.7); } .footer .top { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; padding:72px 0 56px; } .footer .brand { color:#fff; } .footer .brand .mark { box-shadow:none; } .footer p.desc { margin-top:18px; font-size:14.5px; color:rgba(248,246,242,.6); max-width:32ch; line-height:1.6; } .footer h4 { color:#fff; font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-family:var(--font-d); } .footer ul { list-style:none; padding:0; margin:16px 0 0; display:grid; gap:11px; } .footer ul a { color:rgba(248,246,242,.66); font-size:14.5px; } .footer ul a:hover { color:var(--teal-light); } .footer .socials { display:flex; gap:10px; margin-top:22px; } .footer .socials a { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.08); display:grid; place-items:center; color:#fff; transition:background .2s; } .footer .socials a:hover { background:rgba(255,255,255,.18); } .footer .socials svg { width:18px; height:18px; } .footer .bottom { border-top:1px solid rgba(255,255,255,.1); padding:22px 0; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:13px; color:rgba(248,246,242,.5); } .footer .bottom a { color:rgba(248,246,242,.6); } @media (max-width:840px){ .footer .top { grid-template-columns:1fr 1fr; gap:32px; } } @media (max-width:520px){ .footer .top { grid-template-columns:1fr; } } /* ---------- Hero landscape (rolling hills, themed) ---------- */ .hero, .page-hero { position:relative; overflow:hidden; } .hero > .container, .hero-in, .page-hero > .container { position:relative; z-index:2; } .hero-hills { position:absolute; left:0; right:0; bottom:0; height:58%; z-index:0; pointer-events:none; } .page-hero .hero-hills { height:82%; } .hero-hills svg { position:absolute; bottom:0; left:0; width:100%; height:100%; display:block; } .hero-hills::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, var(--cream) 0%, rgba(247,247,245,0) 38%); } .hero .grain, .page-hero .grain { z-index:1; } /* ---------- CTA band ---------- */ .cta-band { background:radial-gradient(120% 140% at 50% 0%, var(--forest-700) 0%, var(--forest-900) 75%); border-radius:var(--r-xl); padding:clamp(48px,6vw,84px) 28px; text-align:center; position:relative; overflow:hidden; } /* ---------- Reveal on scroll ---------- */ .reveal { opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in { opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ .reveal { opacity:1; transform:none; transition:none; } } /* ---------- Misc layout ---------- */ .split { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center; } @media (max-width:880px){ .split { grid-template-columns:1fr; } } .grain { position:absolute; inset:0; opacity:.5; pointer-events:none; background-image:radial-gradient(circle at 1px 1px, rgba(14,44,34,.05) 1px, transparent 0); background-size:22px 22px; } .on-dark .grain, .grain.on-dark { background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0); } .skip { position:absolute; left:-999px; top:8px; z-index:100; background:var(--forest); color:#fff; padding:10px 18px; border-radius:10px; } .skip:focus { left:16px; } /* ---------- Finder ---------- */ .finder { position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh); padding:14px; } .finder-field { position:relative; } .finder-field svg.s { position:absolute; left:18px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--muted); } .finder-field input { width:100%; font-family:var(--font-b); font-size:17px; color:var(--ink); padding:16px 18px 16px 50px; border:1.5px solid var(--line); border-radius:var(--r); background:var(--cream); transition:border-color .2s, box-shadow .2s; } .finder-field input:focus { outline:none; border-color:var(--forest-300); box-shadow:0 0 0 4px var(--forest-50); background:#fff; } .finder-results { margin-top:12px; display:grid; gap:9px; } /* Find-your-community: float the results in front of the hero so the page (and header) never reflow as matches come in. Anchored to the .finder card. */ .finder .finder-results { position:absolute; left:0; right:0; top:calc(100% + 10px); z-index:50; margin-top:0; padding:10px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-lg); max-height:min(62vh,440px); overflow-y:auto; } .finder .finder-results:empty { display:none; } .finder-hint { font-size:14px; color:var(--muted); padding:10px 8px; } .finder-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r); background:#fff; transition:border-color .2s, box-shadow .2s; } .finder-row:hover { border-color:var(--forest-100); box-shadow:var(--sh-sm); } .finder-name { font-family:var(--font-d); font-weight:700; color:var(--ink); font-size:16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .finder-sub { font-size:13px; color:var(--muted); margin-top:3px; } .finder-go { font-family:var(--font-d); font-weight:700; color:var(--emerald-dark); font-size:14.5px; white-space:nowrap; } .finder-claim { font-family:var(--font-d); font-weight:700; font-size:14px; color:#fff; background:var(--forest); padding:9px 16px; border-radius:999px; white-space:nowrap; transition:background .2s; } .finder-claim:hover { background:var(--forest-600); } .finder-empty { text-align:center; padding:22px 16px; border:1px dashed var(--forest-100); border-radius:var(--r); background:var(--forest-50); } .finder-empty p { color:var(--body); margin-bottom:14px; } /* ---------- Lifecycle ---------- */ .lifecycle { counter-reset:step; display:grid; gap:0; margin-top:46px; } .life-step { display:grid; grid-template-columns:64px 1fr; gap:24px; padding-bottom:38px; position:relative; } .life-step:not(:last-child)::before { content:""; position:absolute; left:31px; top:58px; bottom:0; width:2px; background:linear-gradient(var(--forest-200), var(--forest-50)); } .life-num { width:64px; height:64px; border-radius:20px; background:#fff; border:1.5px solid var(--forest-100); display:grid; place-items:center; font-family:var(--font-d); font-weight:800; font-size:24px; color:var(--forest); box-shadow:var(--sh-sm); z-index:1; } .life-step.is-active .life-num { background:var(--forest); color:#fff; border-color:var(--forest); } .life-body h3 { font-size:21px; margin-bottom:8px; padding-top:14px; } .life-body p { color:var(--muted); max-width:54ch; } .life-body .meta { display:inline-flex; margin-top:12px; } /* ---- Flag-only region selector (request: reduce to just flags) ---- */ .region-btn--flag{ padding:6px 8px; gap:5px; } .region-btn--flag .flag{ width:26px; height:18px; border-radius:3px; overflow:hidden; display:block; box-shadow:0 0 0 1px rgba(0,0,0,.08); } .region-btn--flag .flag svg{ display:block; width:100%; height:100%; } .region-btn--flag .chev{ width:15px; height:15px; opacity:.7; } .region-menu .flag{ width:26px; height:18px; border-radius:3px; overflow:hidden; box-shadow:0 0 0 1px rgba(0,0,0,.08); } .region-menu .flag svg{ display:block; width:100%; height:100%; } /* ---- Real app/tablet screenshots in hero ---- */ .shot-tablet{ border-radius:18px; overflow:hidden; box-shadow:var(--sh); border:1px solid var(--line); background:#fff; } .shot-tablet img{ display:block; width:100%; height:auto; } .shot-phone{ position:absolute; right:-10px; bottom:-32px; width:170px; z-index:3; border-radius:28px; box-shadow:var(--sh); border:6px solid #0E2C22; background:#0E2C22; } .shot-phone img{ display:block; width:100%; height:auto; border-radius:22px; } @media (max-width:560px){ .shot-phone{ display:none; } } .demo-shot .shot-tablet{ box-shadow:0 24px 60px -28px rgba(0,0,0,.5); }