/* bio public website (docs/39). One stylesheet for every page: a dark "night" frame (header, hero, footer) around pages in the app's own light surfaces, with bio teal as the accent and the app's room colors as section tints. Theme: html[data-scheme="light"|"dark"], resolved before paint by the inline script in each page's . Language: html[lang="en"|"es"]; every text has an English and a Spanish element and the other one is hidden. */ @font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;src:url('/site/fonts/schibsted-grotesk-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;src:url('/site/fonts/schibsted-grotesk-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url('/site/fonts/onest-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Onest';font-style:normal;font-weight:400 700;font-display:swap;src:url('/site/fonts/onest-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('/site/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url('/site/fonts/jetbrains-mono-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Comfortaa';font-style:normal;font-weight:700;font-display:swap;src:url('/site/fonts/comfortaa-latin-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} :root{ /* Pages: the app's light surfaces (android/.../theme/Color.kt). */ --bg:#F6F8F6; --surface:#FFFFFF; --card:#F1F4F1; --card-2:#E8EDEA; --ink:#191C1B; --ink-2:#3F4945; --muted:#5B6661; --line:#DCE3DF; --line-2:#C5CFCA; --primary:#1E6F5C; --on-primary:#FFFFFF; --primary-soft:#A9E5D3; --on-primary-soft:#00201A; --link:#16624F; /* The app's room colors (RoomColors.kt): t = tint at rest, c = the stronger container, o = text on both. */ --t-teal:#E5F7F3; --c-teal:#B9ECE0; --o-teal:#00201A; --t-blue:#EDF4FF; --c-blue:#D3E4FF; --o-blue:#001C38; --t-amber:#F9F3E6; --c-amber:#FFE08C; --o-amber:#261A00; --t-purple:#F7F1FE; --c-purple:#EEDCFF; --o-purple:#2A0F4A; --t-green:#EEF6E9; --c-green:#C8EFB4; --o-green:#052100; --t-pink:#FFF0F4; --c-pink:#FFD9E4; --o-pink:#3E0021; --t-slate:#F0F4F7; --c-slate:#DCE3EA; --o-slate:#141C24; --t-orange:#FFF1E7; --c-orange:#FFDCC4; --o-orange:#331300; /* Night: the header, heroes and footer in both themes (the fingerprint mark's own world). */ --night:#090D0C; --night-2:#101614; --night-3:#18201D; --night-line:#25302C; --night-ink:#EAF1EE; --night-muted:#A0B1A9; --night-accent:#8FD6C1; --night-accent-ink:#04261D; --warn:#7A5000; --warn-soft:#FBEBC8; --bad:#9B2C22; --bad-soft:#F9DDD8; --display:"Schibsted Grotesk","Segoe UI",system-ui,-apple-system,sans-serif; --body:"Onest","Segoe UI",system-ui,-apple-system,sans-serif; --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace; --r-xl:32px; --r-lg:24px; --r:18px; --r-sm:12px; --max:1180px; --gutter:clamp(16px,4vw,40px); --header-h:64px; color-scheme:light; } /* The dark set also colors app surfaces shown inside a night band (previews, phones, cards), as the phones there show dark screens. */ html[data-scheme="dark"],.night .browser,.night .phone,.night .card,.night .note{ --bg:#0D1110; --surface:#131917; --card:#181D1C; --card-2:#1F2523; --ink:#E0E3E0; --ink-2:#BEC9C4; --muted:#97A39D; --line:#28302D; --line-2:#36403C; --primary:#8FD6C1; --on-primary:#00382D; --primary-soft:#16513F; --on-primary-soft:#A9E5D3; --link:#8FD6C1; --t-teal:#121D1B; --c-teal:#1D4D43; --o-teal:#D6F5EC; --t-blue:#181B23; --c-blue:#1F3A5F; --o-blue:#D8E6FF; --t-amber:#1E1B13; --c-amber:#5C4A00; --o-amber:#FFE9A8; --t-purple:#1D1A21; --c-purple:#46306B; --o-purple:#F0DEFF; --t-green:#181D15; --c-green:#2C4F1F; --o-green:#D2F5BE; --t-pink:#23181C; --c-pink:#6A2C47; --o-pink:#FFD9E3; --t-slate:#171C21; --c-slate:#3A4450; --o-slate:#E0E7EE; --t-orange:#221914; --c-orange:#6B3A17; --o-orange:#FFDCC4; --warn:#E7B964; --warn-soft:#3A2B0E; --bad:#F0A59B; --bad-soft:#3D1C18; color-scheme:dark; } /* ---- language: one element per language, the other hidden ------------------------------------------------------ */ html[lang="es"] [lang="en"], html[lang="en"] [lang="es"]{display:none !important} /* ---- base ---------------------------------------------------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} [hidden]{display:none !important} html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 16px)} body{margin:0; background:var(--bg); color:var(--ink); font:400 17px/1.6 var(--body); text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased} img,svg{display:block; max-width:100%} a{color:var(--link); text-underline-offset:3px} a:hover{text-decoration-thickness:2px} h1,h2,h3,h4{font-family:var(--display); margin:0; text-wrap:balance; letter-spacing:-.015em; line-height:1.08; font-weight:700} h1{font-size:clamp(40px,6.2vw,76px); letter-spacing:-.03em; line-height:1.0} h2{font-size:clamp(30px,3.8vw,48px); letter-spacing:-.025em} h3{font-size:clamp(20px,1.8vw,24px); line-height:1.2} h4{font-size:18px; line-height:1.25; font-weight:600} p{margin:0} ul,ol{margin:0; padding-left:1.2em} li+li{margin-top:.35em} :focus-visible{outline:3px solid var(--primary); outline-offset:3px; border-radius:6px} .skip{position:absolute; left:-999px; top:8px; z-index:100; background:var(--night-accent); color:var(--night-accent-ink); padding:10px 14px; border-radius:10px; font-weight:600} .skip:focus{left:12px} .sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} .wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter)} .eyebrow{font:500 12.5px/1.2 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--muted)} .lede{font-size:clamp(18px,1.6vw,21px); line-height:1.55; color:var(--ink-2); max-width:62ch} .muted{color:var(--muted)} .small{font-size:15px} .tiny{font-size:13px} .mono{font-family:var(--mono)} .stack{display:flex; flex-direction:column; gap:var(--gap,16px)} .row{display:flex; flex-wrap:wrap; gap:var(--gap,12px); align-items:center} .center{text-align:center; margin-inline:auto} /* ---- buttons ------------------------------------------------------------------------------------------------------- */ .btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 22px; border-radius:999px; font:600 16px/1 var(--body); text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:transform .15s ease, background-color .15s ease, border-color .15s ease; white-space:nowrap} .btn:hover{transform:translateY(-1px); text-decoration:none} .btn:active{transform:translateY(0)} .btn svg{width:20px; height:20px; flex:none} .btn.primary{background:var(--primary); color:var(--on-primary)} .btn.secondary{background:transparent; color:var(--ink); border-color:var(--line-2)} .btn.secondary:hover{border-color:var(--ink-2)} .btn.small{min-height:40px; padding:9px 16px; font-size:15px} .night .btn.primary,.btn.accent{background:var(--night-accent); color:var(--night-accent-ink)} .night .btn.secondary{color:var(--night-ink); border-color:#3A4944} .night .btn.secondary:hover{border-color:var(--night-ink)} .link-arrow{font-weight:600; text-decoration:none; display:inline-flex; gap:6px; align-items:center} .link-arrow::after{content:"→"; transition:transform .15s ease} .link-arrow:hover::after{transform:translateX(3px)} .night .link-arrow{color:var(--night-accent)} /* ---- honesty labels (the app's own: measured · calculated · ≈ estimated · verified) -------------------------------- */ .tag{align-self:flex-start; display:inline-flex; align-items:center; gap:6px; font:500 12px/1 var(--mono); letter-spacing:.02em; padding:6px 9px; border-radius:7px; border:1px solid currentColor; white-space:nowrap; vertical-align:middle} .tag::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none} .tag.measured{color:var(--primary)} .tag.calculated{color:var(--ink-2)} .tag.calculated::before{background:transparent; border:1.5px solid currentColor; width:5px; height:5px} .tag.estimated{color:var(--warn)} .tag.estimated::before{content:"≈"; width:auto; height:auto; background:none; font-weight:600} .tag.verified{color:var(--primary); background:var(--primary-soft); border-color:transparent; color:var(--on-primary-soft)} .tag.verified::before{content:"✓"; width:auto; height:auto; background:none; font-weight:700} .tag.account,.tag.partner,.tag.planned,.tag.android,.tag.sample{color:var(--muted); border-style:dashed} .tag.account::before,.tag.partner::before,.tag.planned::before,.tag.android::before,.tag.sample::before{display:none} /* application statuses on /signin: plain words, never the evidence glyphs */ .tag.status::before{display:none} .tag.status.new{color:var(--muted)} .tag.status.reviewing{color:var(--warn); border-color:currentColor} .tag.status.accepted{color:var(--on-primary-soft); background:var(--primary-soft); border-color:transparent} .tag.status.declined{color:var(--muted); border-style:dashed} .night .tag{color:var(--night-muted)} .night .tag.verified{background:#16513F; color:#CFEDE3} .night .tag.measured{color:var(--night-accent)} .night .tag.estimated{color:#E7B964} /* ---- header -------------------------------------------------------------------------------------------------------- */ .site-header{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:rgba(9,13,12,.92); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--night-line); color:var(--night-ink)} .site-header .bar{height:var(--header-h); display:flex; align-items:center; gap:10px} .brand{display:flex; align-items:center; gap:10px; color:var(--night-ink); text-decoration:none; font:700 24px/1 var(--display); letter-spacing:-.03em; margin-right:12px} .brand svg{width:54px; height:36px; stroke-width:22} .nav{display:flex; align-items:center; gap:2px; margin-right:auto} .nav > a,.nav-btn{display:inline-flex; align-items:center; gap:6px; color:var(--night-ink); text-decoration:none; font:500 15px/1 var(--body); padding:10px 12px; border-radius:10px; background:none; border:0; cursor:pointer} .nav > a:hover,.nav-btn:hover,.nav-btn[aria-expanded="true"]{background:var(--night-3)} .nav > a[aria-current="page"],.nav-btn.current{color:var(--night-accent)} .nav-btn svg{width:14px; height:14px; transition:transform .2s ease} .nav-btn[aria-expanded="true"] svg{transform:rotate(180deg)} .menu{position:relative} .panel{position:absolute; top:calc(100% + 10px); left:-8px; min-width:300px; background:var(--night-2); border:1px solid var(--night-line); border-radius:var(--r); padding:10px; box-shadow:0 24px 60px rgba(0,0,0,.45); display:none} .panel.open{display:block} .panel a{display:grid; grid-template-columns:auto 1fr; gap:2px 12px; align-items:start; padding:12px; border-radius:12px; color:var(--night-ink); text-decoration:none} .panel a:hover,.panel a:focus-visible{background:var(--night-3)} .panel a b{font:600 15.5px/1.3 var(--body)} .panel a span.d{grid-column:2; font-size:13.5px; line-height:1.4; color:var(--night-muted)} .panel .dot{grid-row:span 2; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:var(--night-ink)} .panel .dot svg{width:17px; height:17px} .panel.mega{width:min(720px,92vw); display:none; grid-template-columns:1fr 1fr 240px; gap:4px; left:-160px} .panel.mega.open{display:grid} .panel .aside{grid-row:span 3; grid-column:3; background:var(--night-3); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:10px} .panel .aside p{font-size:14px; color:var(--night-muted); line-height:1.5} .tools{display:flex; align-items:center; gap:4px} .icon-btn{width:40px; height:40px; display:grid; place-items:center; border-radius:10px; border:0; background:none; color:var(--night-ink); cursor:pointer; font:600 13px/1 var(--mono)} .icon-btn:hover{background:var(--night-3)} .icon-btn svg{width:20px; height:20px} .site-header .signin{color:var(--night-ink); text-decoration:none; font:500 15px/1 var(--body); padding:10px 12px; border-radius:10px} .site-header .signin:hover{background:var(--night-3)} .site-header .btn{min-height:40px; padding:9px 16px; font-size:15px} .burger{display:none} @media (max-width:1020px){ .nav,.site-header .signin,.site-header .get-app{display:none} /* A phone or tablet: the menu at the left edge, before the mark; the tools (and the avatar) at the right. */ .burger{display:grid; margin-left:-8px} .brand{margin-right:auto} } /* ---- the signed-in person, top right: the web apps' account menu, in the header's night colours (site.js) ---- */ .signed-in .site-header .signin,.signed-in .sheet .sheet-signin{display:none !important} .site-account{position:relative} .site-account[hidden]{display:none} .acct-btn{width:40px; height:40px; padding:4px; border:0; border-radius:50%; background:none; cursor:pointer; display:grid; place-items:center; margin-left:4px} .acct-btn:hover,.acct-btn[aria-expanded="true"]{background:var(--night-3)} .acct-btn:focus-visible{outline:2px solid var(--night-accent); outline-offset:1px} .acct-avatar{display:inline-grid; place-items:center; flex-shrink:0; border-radius:50%; overflow:hidden; color:#fff; font:600 14px/1 var(--body); user-select:none} .acct-avatar img{width:100%; height:100%; object-fit:cover; display:block} .acct-card{position:absolute; top:calc(100% + 10px); right:0; width:320px; background:var(--night-2); color:var(--night-ink); border:1px solid var(--night-line); border-radius:24px; padding:20px 12px 12px; box-shadow:0 24px 60px rgba(0,0,0,.45); z-index:60} .acct-card[hidden]{display:none} .acct-head{display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; padding:0 8px 16px} .acct-head .acct-avatar{margin-bottom:8px} .acct-name{font:500 18px/1.3 var(--body); overflow-wrap:anywhere} .acct-email{font-size:13.5px; color:var(--night-muted); overflow-wrap:anywhere} .acct-links{display:flex; flex-direction:column; border-top:1px solid var(--night-line); padding-top:6px} .acct-links a{display:flex; align-items:center; min-height:44px; padding:0 14px; border-radius:12px; color:var(--night-ink); text-decoration:none; font-size:15px} .acct-links a:hover,.acct-links a:focus-visible{background:var(--night-3); outline:none} .acct-out{display:block; width:100%; min-height:44px; margin-top:6px; border:1px solid var(--night-line); border-radius:12px; background:none; color:var(--night-ink); font:500 15px/1 var(--body); cursor:pointer} .acct-out:hover,.acct-out:focus-visible{background:var(--night-3); outline:none} @media (max-width:640px){ .acct-card{position:fixed; top:calc(var(--header-h) + env(safe-area-inset-top,0px) + 6px); left:8px; right:8px; width:auto; max-height:calc(100dvh - var(--header-h) - 20px); overflow-y:auto} } .sheet{position:fixed; inset:0; top:calc(var(--header-h) + env(safe-area-inset-top,0px)); z-index:49; background:var(--night); color:var(--night-ink); overflow-y:auto; padding:20px var(--gutter) calc(40px + env(safe-area-inset-bottom,0px)); display:none} .sheet.open{display:block} .sheet h3{font:500 12.5px/1 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--night-muted); margin:22px 0 8px} .sheet a{display:block; color:var(--night-ink); text-decoration:none; padding:12px 0; font:500 19px/1.2 var(--body); border-bottom:1px solid var(--night-line)} .sheet .row{margin-top:24px} body.locked{overflow:hidden} /* ---- night bands: heroes and the footer ---------------------------------------------------------------------------- */ .night{background:var(--night); color:var(--night-ink); --muted:var(--night-muted); --ink-2:#C9D6D0; --line:var(--night-line)} .night a:not(.btn){color:var(--night-accent)} .night .browser,.night .card{color:var(--ink)} .hero{position:relative; overflow:hidden; padding-block:clamp(56px,8vw,112px) clamp(56px,7vw,96px)} .hero .wrap{position:relative; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(24px,5vw,64px); align-items:center} .hero .copy{display:flex; flex-direction:column; gap:22px; position:relative; z-index:2} .hero .lede{color:#C9D6D0} .hero .fine{font-size:14px; color:var(--night-muted)} .hero.page{padding-block:clamp(48px,7vw,96px) clamp(44px,6vw,80px)} .hero.page .wrap{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)} /* a hero with nothing to show beside the words: one column */ .hero.solo .wrap{grid-template-columns:minmax(0,1fr)} .hero.solo .copy{max-width:820px} .hero .art{position:relative; min-height:420px; display:grid; place-items:center} .hero .art .phone{position:relative; z-index:2; width:min(300px,78%)} .hero .glow{position:absolute; inset:0; background:radial-gradient(60% 60% at 70% 40%, rgba(143,214,193,.10), transparent 70%); pointer-events:none} @media (max-width:860px){ .hero .wrap,.hero.page .wrap{grid-template-columns:minmax(0,1fr)} .hero .art{min-height:0; margin-top:8px} } /* ---- sections ------------------------------------------------------------------------------------------------------ */ .section{padding-block:clamp(64px,9vw,120px)} .section.tight{padding-block:clamp(48px,6vw,80px)} .section.alt{background:var(--card)} .section.pt0{padding-top:0} .section-head{display:flex; flex-direction:column; gap:14px; margin-bottom:clamp(32px,4vw,52px); max-width:760px} .section-head.center{align-items:center; text-align:center; margin-inline:auto} .grid{display:grid; gap:var(--gap,20px)} .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} @media (max-width:980px){ .g4{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:640px){ .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)} } .split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:center} .split.rev > :first-child{order:2} @media (max-width:860px){ .split{grid-template-columns:minmax(0,1fr)} .split.rev > :first-child{order:0} } /* ---- cards --------------------------------------------------------------------------------------------------------- */ .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(20px,2.2vw,28px); display:flex; flex-direction:column; gap:12px} .card.flat{background:var(--card); border-color:transparent} .card.night{background:var(--night); color:var(--night-ink); border-color:transparent} .card p{color:var(--ink-2)} .card .num{font:600 13px/1 var(--mono); color:var(--muted)} a.card{text-decoration:none; color:inherit; transition:transform .18s ease, border-color .18s ease} a.card:hover{transform:translateY(-3px); border-color:var(--line-2)} .tint{border-color:transparent} .tint-teal{background:var(--t-teal)} .tint-blue{background:var(--t-blue)} .tint-amber{background:var(--t-amber)} .tint-purple{background:var(--t-purple)} .tint-green{background:var(--t-green)} .tint-pink{background:var(--t-pink)} .tint-slate{background:var(--t-slate)} .tint-orange{background:var(--t-orange)} /* Featured organizations (about › investors): each logo in a dark-ink version for light pages and a white one for dark. */ .orgs{margin-top:clamp(48px,6vw,80px)} .orgs .section-head{margin-bottom:20px} .org-logo{height:64px; display:flex; align-items:center; margin-bottom:8px} .org-logo img{height:100%; width:auto; max-width:100%; object-fit:contain; object-position:left center} .logo-dark{display:none} html[data-scheme="dark"] .logo-light{display:none} html[data-scheme="dark"] .logo-dark{display:block} /* SDGInvestors: the emblem as an image, the name as live text in the SDGTalks wordmark's face (Comfortaa, stroked to the weight of its "talks"), in the page's ink so it follows the theme. */ .org-logo .org-mark{height:52px; width:auto} .org-name{font-weight:400} .org-name b{font-weight:800} .org-word{font:700 44px/1 "Comfortaa",var(--display); letter-spacing:.02em; color:var(--ink); -webkit-text-stroke:.07em currentColor; paint-order:stroke fill; margin-left:14px; white-space:nowrap} .ico{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; flex:none} .ico svg{width:24px; height:24px} .ico.teal{background:var(--c-teal); color:var(--o-teal)} .ico.blue{background:var(--c-blue); color:var(--o-blue)} .ico.amber{background:var(--c-amber); color:var(--o-amber)} .ico.purple{background:var(--c-purple); color:var(--o-purple)} .ico.green{background:var(--c-green); color:var(--o-green)} .ico.pink{background:var(--c-pink); color:var(--o-pink)} .ico.slate{background:var(--c-slate); color:var(--o-slate)} .ico.orange{background:var(--c-orange); color:var(--o-orange)} .ico.night{background:var(--night-3); color:var(--night-accent)} .checks{list-style:none; padding:0; display:flex; flex-direction:column; gap:10px} .checks li{position:relative; padding-left:30px; margin:0} .checks li::before{content:""; position:absolute; left:0; top:.25em; width:19px; height:19px; border-radius:50%; background:var(--primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300201A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat} html[data-scheme="dark"] .checks li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9E5D3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")} .crosses li::before{background:var(--bad-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239B2C22' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/12px no-repeat} .kv{display:grid; grid-template-columns:auto 1fr; gap:10px 18px; font-size:15.5px} .kv dt{font:500 13px/1.5 var(--mono); color:var(--muted); padding-top:2px} .kv dd{margin:0} .card.where{padding:6px 0; gap:0; width:100%; max-width:440px} .where .w-row{display:flex; gap:16px; align-items:center; padding:18px 22px} .where .w-row + .w-row{border-top:1px solid var(--line)} .where b{display:block; font:600 16.5px/1.3 var(--display)} .where .d{display:block; color:var(--muted); font-size:14.5px; margin-top:3px} .steps{counter-reset:step; list-style:none; padding:0; display:grid; gap:14px} .steps > li{counter-increment:step; position:relative; padding:18px 20px 18px 66px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); margin:0} .steps > li::before{content:counter(step); position:absolute; left:18px; top:16px; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--primary); color:var(--on-primary); font:600 15px/1 var(--mono)} .note{background:var(--warn-soft); color:var(--ink); border-radius:var(--r); padding:16px 18px; font-size:15.5px; display:flex; gap:12px; align-items:flex-start} .note svg{width:22px; height:22px; flex:none; color:var(--warn); margin-top:1px} .note.calm{background:var(--card)} .note.calm svg{color:var(--primary)} /* ---- phone frames (real app screens from Demo Mode) ---------------------------------------------------------------- */ .phone{position:relative; width:100%; max-width:320px; border-radius:40px; padding:9px; background:#0B0F0E; box-shadow:0 1px 0 #2B3531 inset, 0 40px 80px -30px rgba(0,0,0,.45); margin-inline:auto} .phone::before{content:""; position:absolute; top:17px; left:50%; width:9px; height:9px; margin-left:-4px; border-radius:50%; background:#1D2522; z-index:2} .phone .screen{width:100%; border-radius:32px; overflow:hidden; background:var(--bg); position:relative} .phone .preview{min-height:520px} .phone img{width:100%; height:auto; display:block} .phone .shot-dark{display:none} html[data-scheme="dark"] .phone .shot-light{display:none} html[data-scheme="dark"] .phone .shot-dark{display:block} .night .phone .shot-light{display:none} .night .phone .shot-dark{display:block} .phones{display:flex; gap:20px; justify-content:center; align-items:flex-start} .phones .phone{max-width:280px} .phones .phone:nth-child(2){margin-top:48px} @media (max-width:640px){ .phones .phone:nth-child(2){display:none} } figcaption,.caption{font-size:13.5px; color:var(--muted); text-align:center; margin-top:12px} /* ---- interface previews for screens that need a partner programme (sample data, labelled) -------------------------- */ .preview{background:var(--bg); border-radius:32px; padding:18px 14px; height:100%; display:flex; flex-direction:column; gap:10px; font-size:13px; color:var(--ink); overflow:hidden} .preview .ph-title{font:700 19px/1.2 var(--display); padding:6px 4px 2px} .preview .ph-card{background:var(--card); border-radius:18px; padding:13px 14px; display:flex; flex-direction:column; gap:6px} .preview .ph-card.tint{background:var(--c-teal); color:var(--o-teal)} .preview .ph-row{display:flex; justify-content:space-between; align-items:center; gap:8px} .preview .ph-big{font:700 22px/1 var(--display)} .preview .ph-muted{color:var(--muted); font-size:12px} .preview .ph-row > .ph-muted{white-space:nowrap} .preview .ph-pill{align-self:flex-start; background:var(--primary); color:var(--on-primary); border-radius:999px; padding:7px 12px; font-weight:600; font-size:12px} .preview .ph-pill.soft{background:var(--primary-soft); color:var(--on-primary-soft)} .preview .ph-bar{height:7px; border-radius:99px; background:var(--card-2); overflow:hidden} .preview .ph-bar i{display:block; height:100%; background:var(--primary); border-radius:99px} .preview .ph-sample{margin-top:auto; font:500 10.5px/1.3 var(--mono); color:var(--muted); text-align:center; letter-spacing:.03em} /* ---- the loop (interactive) ---------------------------------------------------------------------------------------- */ .loop{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:clamp(28px,5vw,72px); align-items:center} @media (max-width:900px){ .loop{grid-template-columns:minmax(0,1fr)} } .loop-tabs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:26px} @media (max-width:520px){ .loop-tabs{grid-template-columns:repeat(2,minmax(0,1fr))} } .loop-tab{appearance:none; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); border-radius:16px; padding:14px 12px; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:6px; font:600 17px/1.1 var(--display); transition:border-color .15s ease, background-color .15s ease} .loop-tab .n{font:500 12px/1 var(--mono); color:var(--muted)} .loop-tab:hover{border-color:var(--line-2)} .loop-tab[aria-selected="true"]{background:var(--primary); border-color:var(--primary); color:var(--on-primary)} .loop-tab[aria-selected="true"] .n{color:inherit; opacity:.8} .loop-panel{display:flex; flex-direction:column; gap:16px} .loop-panel[hidden]{display:none} .loop-panel h3{font-size:clamp(24px,2.4vw,32px)} .joins{display:flex; flex-wrap:wrap; gap:8px; align-items:center} .joins .eyebrow{margin-right:4px} .chip{display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; background:var(--card); font-size:14px; color:var(--ink-2); text-decoration:none} .chip i{width:9px; height:9px; border-radius:50%; display:block} .loop-screen{position:relative} .loop-screen .phone{max-width:300px} .loop-screen .frame{display:none} .loop-screen .frame.on{display:block} @media (prefers-reduced-motion:no-preference){ .loop-screen .frame.on{animation:rise .45s cubic-bezier(.2,.8,.2,1)} @keyframes rise{from{transform:translateY(10px)} to{transform:none}} } /* ---- ecosystem map (interactive) ----------------------------------------------------------------------------------- */ .eco{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(24px,4vw,56px); align-items:start} @media (max-width:900px){ .eco{grid-template-columns:minmax(0,1fr)} } .eco-map{position:relative; aspect-ratio:1/1; max-width:560px; width:100%; margin-inline:auto} .eco-map svg.lines{position:absolute; inset:0; width:100%; height:100%} .eco-map svg.lines line{stroke:var(--line-2); stroke-width:1.5; stroke-dasharray:4 6; vector-effect:non-scaling-stroke} .eco-map svg.lines line.on{stroke:var(--primary); stroke-width:3; stroke-dasharray:none} .eco-node{position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:8px; width:124px; text-align:center; background:none; border:0; cursor:pointer; color:var(--ink); font:600 14px/1.2 var(--body); padding:6px; border-radius:16px} .eco-node .ico{width:58px; height:58px; border-radius:18px; transition:transform .18s ease, box-shadow .18s ease} .eco-node[aria-pressed="true"] .ico{transform:scale(1.08); box-shadow:0 0 0 3px var(--bg), 0 0 0 6px var(--primary)} .eco-node:hover .ico{transform:scale(1.05)} /* The home at the centre: the fingerprint alone on the section's own background, no circle and no caption ("Your home" is its accessible name). The oval behind it, in the section's color, hugs the mark so the lines stop at its edge. */ .eco-center{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:40%; aspect-ratio:794/522; border-radius:50%; background:var(--card); display:grid; place-items:center} .eco-center svg{width:88%; color:var(--primary); stroke-width:10} .eco-detail{display:flex; flex-direction:column; gap:18px} .eco-detail[hidden]{display:none} .flow{display:grid; gap:12px} .flow .card{padding:18px 20px; gap:8px} .flow h4{display:flex; align-items:center; gap:10px} .flow h4 svg{width:18px; height:18px} .eco-list{display:none} @media (max-width:560px){ .eco-map{aspect-ratio:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px} .eco-map svg.lines,.eco-center{display:none} .eco-node{position:static; transform:none; width:auto} } /* ---- audience cards ------------------------------------------------------------------------------------------------ */ .aud{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px} @media (max-width:980px){ .aud{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:600px){ .aud{grid-template-columns:minmax(0,1fr)} } .aud .card{min-height:250px} .aud .card h3{margin-top:auto} .aud .card .link-arrow{color:var(--link)} /* ---- labels legend ------------------------------------------------------------------------------------------------- */ .legend{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px} @media (max-width:900px){ .legend{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:520px){ .legend{grid-template-columns:minmax(0,1fr)} } .legend .card{gap:10px} .figure{font:700 clamp(30px,3vw,40px)/1 var(--display); letter-spacing:-.02em; font-variant-numeric:tabular-nums} .figure small{font:500 14px/1 var(--mono); color:var(--muted); letter-spacing:0} /* ---- tabs (feature tours) ------------------------------------------------------------------------------------------ */ .tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px} .tab{appearance:none; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); border-radius:999px; padding:10px 18px; font:600 15px/1 var(--body); cursor:pointer} .tab[aria-selected="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)} .tabpanel[hidden]{display:none} /* ---- FAQ ----------------------------------------------------------------------------------------------------------- */ .faq{display:grid; gap:10px; max-width:860px} .faq details{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:4px 20px} .faq summary{cursor:pointer; list-style:none; padding:16px 0; font:600 17px/1.35 var(--body); display:flex; justify-content:space-between; gap:16px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+"; font:500 22px/1 var(--mono); color:var(--muted)} .faq details[open] summary::after{content:"–"} .faq details > div{padding:0 0 18px; color:var(--ink-2)} /* ---- call to action band ------------------------------------------------------------------------------------------- */ .cta-band{border-radius:var(--r-xl); padding:clamp(28px,5vw,56px); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; overflow:hidden; position:relative} .cta-band > *{position:relative} @media (max-width:760px){ .cta-band{grid-template-columns:minmax(0,1fr)} } /* ---- status strip -------------------------------------------------------------------------------------------------- */ .status{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px} @media (max-width:900px){ .status{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:520px){ .status{grid-template-columns:minmax(0,1fr)} } /* ---- footer -------------------------------------------------------------------------------------------------------- */ .site-footer{padding-block:64px 36px} .site-footer .top{display:grid; grid-template-columns:1.4fr repeat(4,minmax(0,1fr)); gap:28px} @media (max-width:900px){ .site-footer .top{grid-template-columns:repeat(2,minmax(0,1fr))} .site-footer .about{grid-column:1/-1} } .site-footer h3{font:500 12.5px/1 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--night-muted); margin-bottom:14px} .site-footer ul{list-style:none; padding:0; display:flex; flex-direction:column; gap:10px} .site-footer li{margin:0} .site-footer a:not(.btn){color:var(--night-ink); text-decoration:none; font-size:15px} .site-footer a:not(.btn):hover{color:var(--night-accent)} .site-footer .brand{font-size:24px} .site-footer .about p{color:var(--night-muted); font-size:15px; max-width:34ch; margin-top:14px} .site-footer .bottom{margin-top:48px; padding-top:22px; border-top:1px solid var(--night-line); display:flex; flex-wrap:wrap; gap:14px 24px; justify-content:space-between; align-items:center; color:var(--night-muted); font-size:13.5px} .site-footer .bottom .row{gap:8px} .site-footer .pillbtn{display:inline-flex; align-items:center; gap:8px; background:var(--night-3); color:var(--night-ink); border:0; border-radius:999px; padding:9px 14px; font:500 14px/1 var(--body); cursor:pointer} .site-footer .pillbtn svg{width:16px; height:16px} /* ---- forms (sign in, apply) ---------------------------------------------------------------------------------------- */ .form-card{max-width:680px; margin-inline:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,4vw,40px); display:flex; flex-direction:column; gap:20px} .field{display:flex; flex-direction:column; gap:8px} .field label,.field legend{font-weight:600; font-size:15.5px} .field .help{font-size:14px; color:var(--muted)} .field .err{font-size:14px; color:var(--bad); display:none} .field.invalid .err{display:block} .field.invalid input,.field.invalid textarea,.field.invalid select{border-color:var(--bad)} input[type=text],input[type=url],input[type=email],select,textarea{font:400 16px/1.4 var(--body); color:var(--ink); background:var(--bg); border:1.5px solid var(--line-2); border-radius:12px; padding:12px 14px; width:100%} textarea{min-height:130px; resize:vertical} input:focus,select:focus,textarea:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent)} fieldset{border:0; padding:0; margin:0} .choice{display:flex; flex-wrap:wrap; gap:8px} .choice label{display:inline-flex; align-items:center; gap:8px; border:1.5px solid var(--line-2); border-radius:999px; padding:9px 14px; font-weight:500; cursor:pointer; font-size:15px} .choice input{accent-color:var(--primary)} .choice label:has(input:checked){border-color:var(--primary); background:var(--t-teal)} .types{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px} @media (max-width:560px){ .types{grid-template-columns:minmax(0,1fr)} } .types label{display:flex; gap:12px; align-items:flex-start; border:1.5px solid var(--line); border-radius:16px; padding:14px; cursor:pointer; background:var(--surface)} .types label:has(input:checked){border-color:var(--primary); background:var(--t-teal)} .types input{margin-top:4px; accent-color:var(--primary)} .types b{display:block; font-size:15.5px} .types .t > span{display:block; font-size:13.5px; color:var(--muted); margin-top:2px} .types.picked{grid-template-columns:minmax(0,1fr)} .link-btn{align-self:flex-start; background:none; border:0; padding:2px 0; font:600 15px/1.4 var(--body); color:var(--link); text-decoration:underline; text-underline-offset:3px; cursor:pointer} .state[hidden]{display:none} .gbtn{min-height:44px} .apps{display:grid; gap:10px} .appcard{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; align-items:center; padding:14px 16px; border:1.5px solid var(--line); border-radius:18px; text-decoration:none; color:inherit; background:var(--surface)} .appcard:hover{border-color:var(--primary)} .appcard .ico{width:42px; height:42px; border-radius:12px} .appcard .ico svg{width:22px; height:22px} .appcard .t b,.app-list .t b{font-size:16.5px} .appcard .t small,.app-list .t small{display:block; font-size:14px; color:var(--muted); margin-top:2px} .appcard .go{font:600 20px/1 var(--mono); color:var(--primary)} .app-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px} .app-list li{margin:0; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 14px; background:var(--card); border-radius:14px; font-size:15px} .app-list .tag{flex:none} /* sign-in and apply: one centred card under the header */ .section.auth{padding-block:clamp(40px,6vw,80px)} .form-card h1{font-size:clamp(30px,3.6vw,40px); letter-spacing:-.02em; line-height:1.1} .h-small{font:600 17px/1.3 var(--display); letter-spacing:0; margin:0} .row.between{justify-content:space-between; align-items:flex-start} .alert{border-radius:14px; padding:14px 16px; font-size:15px; background:var(--card)} .alert.bad{background:var(--bad-soft)} .alert.good{background:var(--t-teal)} /* ---- misc ---------------------------------------------------------------------------------------------------------- */ .quote{font:500 clamp(22px,2.4vw,30px)/1.3 var(--display); letter-spacing:-.015em; max-width:28ch} .divider{height:1px; background:var(--line); border:0; margin:0} .table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)} table{border-collapse:collapse; width:100%; font-size:15px} th,td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top} @media (max-width:620px){ th,td{padding:11px 12px} table{font-size:14.5px} } @media (max-width:480px){ .hide-sm{display:none} } th{font:500 12px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); background:var(--card)} tr:last-child td{border-bottom:0} .dl-meta{font:400 13px/1.6 var(--mono); color:var(--night-muted); word-break:break-all} /* ---- platform-specific buttons: on an iPhone the header offers My Impact instead of the Android build ------------- */ .ios-only{display:none !important} html.ios .ios-only{display:inline-flex !important} html.ios .android-only{display:none !important} @media (max-width:1020px){ html.ios .site-header .ios-only{display:none !important} } /* ---- web console previews (partner console, creator studio, data room): sample data, labelled ---------------------- */ .browser{border-radius:18px; border:1px solid var(--line); background:var(--surface); overflow:hidden; box-shadow:0 30px 70px -40px rgba(0,0,0,.45)} .browser .chrome{display:flex; align-items:center; gap:7px; padding:10px 14px; background:var(--card); border-bottom:1px solid var(--line); font:500 12px/1 var(--mono); color:var(--muted)} .browser .chrome i{width:10px; height:10px; border-radius:50%; background:var(--line-2); display:block} .browser .chrome .url{margin-left:8px; background:var(--bg); border-radius:8px; padding:6px 10px; flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis} .console{display:grid; grid-template-columns:138px minmax(0,1fr); min-height:340px; font-size:13px} .console nav{background:var(--card); padding:12px 8px; display:flex; flex-direction:column; gap:2px; border-right:1px solid var(--line)} .console nav span{padding:6px 9px; border-radius:8px; color:var(--ink-2); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .console nav span.on{background:var(--primary-soft); color:var(--on-primary-soft); font-weight:600} .console .main{padding:18px; display:flex; flex-direction:column; gap:14px; min-width:0} .console h5{font:700 17px/1.2 var(--display); margin:0} .kpis{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px} .kpi{background:var(--card); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:4px} .kpi b{font:700 19px/1.1 var(--display); font-variant-numeric:tabular-nums; white-space:nowrap} .kpi > span{font-size:11.5px; color:var(--muted)} .mini-table{width:100%; min-width:0; font-size:12px; border-collapse:collapse} .mini-table th,.mini-table td{padding:7px 6px; border-bottom:1px solid var(--line); text-align:left; background:none} .mini-table th{font:500 10.5px/1.2 var(--mono); color:var(--muted); letter-spacing:.04em} .mini-table td.num{font-variant-numeric:tabular-nums; text-align:right} .demo-strip{background:var(--t-orange); color:var(--o-orange); font:500 11px/1.3 var(--mono); padding:7px 12px} @media (max-width:620px){ .console{grid-template-columns:minmax(0,1fr)} .console nav{display:none} } /* ---- The market globe on /for-partners (globe.js, docs/40) ---------------------------------------------------------- */ /* "Horizon": no box around the map. The section's own background is the globe's space, the globe rises from the bottom of the map area and its lower edge fades into the next section; the legend is plain text above it. */ .section.market{--globe-space:var(--bg); --glass:rgba(255,255,255,.72); --glass-line:rgba(25,28,27,.10); position:relative; overflow:hidden; padding-bottom:0; background:var(--bg)} html[data-scheme="dark"] .section.market{--glass:rgba(19,25,23,.62); --glass-line:rgba(234,241,238,.12)} .market-head{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center} .market-head h2{font-size:clamp(34px,5vw,60px); max-width:18ch} .market-head .lede{max-width:60ch} .market-legend{display:flex; flex-wrap:wrap; justify-content:center; column-gap:26px; row-gap:2px; margin-top:10px} .market-legend[hidden]{display:none} .market-legend button{display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:0; border:0; border-bottom:2px solid transparent; border-radius:0; background:none; color:var(--ink-2); font:500 15px/1 var(--body); cursor:pointer} .market-legend button:hover{color:var(--ink)} .market-legend button:focus-visible{outline:2px solid var(--primary); outline-offset:3px; border-radius:4px} .market-legend button[aria-pressed="true"]{color:var(--ink); font-weight:600; border-bottom-color:var(--primary)} .market-legend i{width:9px; height:9px; border-radius:50%; display:block; flex:none} .market-legend .n{font:500 12px/1 var(--mono); color:var(--muted); font-variant-numeric:tabular-nums} .market-stats{margin:0; min-height:1.3em; font:500 12.5px/1.3 var(--mono); color:var(--muted); font-variant-numeric:tabular-nums} .market-globe{position:relative; height:clamp(460px,56vw,780px); margin-top:clamp(0px,1vw,12px)} /* more specific than mapbox-gl.css, which makes its container position:relative */ .market-globe > .globe-map{position:absolute; inset:0} /* the map melts into the page at its top and bottom edges; controls, credits and popups are not masked */ .market-globe .mapboxgl-canvas{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 56px,#000 calc(100% - 200px),transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 56px,#000 calc(100% - 200px),transparent 100%)} .market-globe .mapboxgl-canvas:focus-visible{outline:2px solid var(--primary); outline-offset:-2px} .market-globe .mapboxgl-ctrl-top-right{top:clamp(12px,3vw,40px); right:max(12px,calc(50% - 590px))} /* no Mapbox logo or credits on this map: bio's agreement with Mapbox covers it (the user's instruction, 2026-09-27) */ .market-globe .mapboxgl-ctrl-logo,.market-globe .mapboxgl-ctrl-attrib{display:none!important} .market-ctrl{display:flex; flex-direction:column; gap:8px} .market-btn{width:40px; height:40px; padding:0; border-radius:50%; border:1px solid var(--glass-line); background:var(--glass); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); color:var(--ink); display:grid; place-items:center; cursor:pointer} .market-btn:hover{border-color:var(--line-2)} .market-btn:focus-visible{outline:2px solid var(--primary); outline-offset:2px} .market-btn svg{width:16px; height:16px; display:block} .globe-msg{position:absolute; inset:0; z-index:1; background:var(--globe-space); display:grid; place-items:center; margin:0; padding:24px; text-align:center; color:var(--muted); font-size:15px} .globe-msg[hidden]{display:none} /* Mapbox's popups, in the page's colours */ .globe-popup .mapboxgl-popup-content{background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:12px 14px; box-shadow:0 14px 34px -14px rgba(0,0,0,.35); font:400 13.5px/1.4 var(--body)} .globe-popup.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,.globe-popup.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,.globe-popup.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip{border-bottom-color:var(--surface)} .globe-popup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,.globe-popup.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,.globe-popup.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip{border-top-color:var(--surface)} .globe-popup.mapboxgl-popup-anchor-left .mapboxgl-popup-tip{border-right-color:var(--surface)} .globe-popup.mapboxgl-popup-anchor-right .mapboxgl-popup-tip{border-left-color:var(--surface)} .globe-popup .mapboxgl-popup-close-button{color:var(--muted); font-size:18px; width:28px; height:28px; border-radius:8px; top:4px; right:4px} .globe-popup .mapboxgl-popup-close-button:hover{background:var(--card)} .gp{display:flex; flex-direction:column; gap:10px; padding-right:14px} .gp-list{display:flex; flex-direction:column; gap:9px; max-height:280px; overflow:auto; overscroll-behavior:contain; padding-right:4px} .gp-head{font:500 11.5px/1.2 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted)} .gp-entry{display:flex; flex-direction:column; gap:4px} .gp-list .gp-entry + .gp-entry{border-top:1px solid var(--line); padding-top:9px} .gp-name{font:600 14px/1.3 var(--display)} .gp-services{display:flex; flex-wrap:wrap; gap:4px 10px} .gp-service{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--ink-2)} .gp-service i{width:8px; height:8px; border-radius:50%; display:block} .gp-place,.gp-facts{font-size:12.5px; color:var(--muted)} .gp-precision{font:500 11px/1.3 var(--mono); color:var(--primary)} .gp-precision.approx{color:var(--warn)} html[data-scheme="dark"] .gp-precision.approx{color:#F2C46B} .gp-more{font-size:12.5px; color:var(--muted)} .gp-tip{font-size:13px; white-space:nowrap; color:var(--ink-2)} @media (max-width:640px){ .market-legend{column-gap:16px} .market-legend button{font-size:14px} .market-globe .mapboxgl-canvas{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 32px,#000 calc(100% - 120px),transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 32px,#000 calc(100% - 120px),transparent 100%)} }