/* ========================================================================== RefuseRadar — Marketing site Palette lifted from the product's own design tokens (grey / off-white): --brand:#6B7280 --brand-pressed:#4B5563 --secondary:#0EA5E9 ========================================================================== */ :root{ --bg-canvas:#FAFAF9; --bg-surface:#FFFFFF; --bg-raised:#FFFFFF; --bg-sunken:#F1F0EE; --border:#E7E5E4; --border-strong:#D6D3D1; --text:#1C1917; --text-2:#57534E; --text-3:#A8A29E; --brand:#6B7280; --brand-pressed:#4B5563; --brand-light:#9CA3AF; --secondary:#0EA5E9; --secondary-dark:#0369A1; --danger:#DC2626; --warning:#F59E0B; --success:#22C55E; --shadow-sm:0 1px 3px rgba(28,25,23,0.06); --shadow:0 8px 24px rgba(28,25,23,0.08); --shadow-lg:0 24px 60px -12px rgba(28,25,23,0.22); --radius-sm:8px; --radius-md:16px; --radius-lg:24px; --container:1160px; --ease:cubic-bezier(0.16,1,0.3,1); --ease-bounce:cubic-bezier(0.34,1.56,0.64,1); } *,*::before,*::after{box-sizing:border-box} /* Smooth-scroll is driven by main.js (eased, nav-offset aware) so JS handles anchor navigation; this stays as a no-JS fallback only. */ html{scroll-behavior:smooth} html.js-scroll{scroll-behavior:auto} body{ margin:0; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--bg-canvas); color:var(--text); -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit} .container{max-width:var(--container);margin:0 auto;padding:0 24px} section{position:relative} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--brand-pressed); background:rgba(107,114,128,0.1); border:1px solid rgba(107,114,128,0.18); padding:6px 14px;border-radius:999px; } .eyebrow.blue{color:var(--secondary-dark);background:rgba(14,165,233,0.08);border-color:rgba(14,165,233,0.18)} h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-0.02em;color:var(--text)} p{margin:0;color:var(--text-2);line-height:1.6} .section-head{max-width:640px;margin:0 auto 56px;text-align:center} .section-head h2{font-size:clamp(28px,4vw,40px);margin-top:14px} .section-head p{font-size:16.5px;margin-top:14px} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; height:52px;padding:0 26px;border-radius:999px;border:none; font-size:15px;font-weight:700;cursor:pointer; transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease); white-space:nowrap; } .btn:active{transform:scale(.97)} .btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-pressed));color:#fff;box-shadow:0 10px 24px -8px rgba(75,85,99,0.55)} .btn-primary:hover{box-shadow:0 14px 30px -8px rgba(75,85,99,0.65);transform:translateY(-1px)} .btn-secondary{background:var(--bg-surface);color:var(--text);border:1.5px solid var(--border-strong)} .btn-secondary:hover{border-color:var(--brand);color:var(--brand-pressed);transform:translateY(-1px)} .btn-ghost{background:none;color:var(--text-2);border:1.5px solid var(--border)} .btn-ghost:hover{border-color:var(--text-3);color:var(--text)} .btn-sm{height:42px;padding:0 18px;font-size:13.5px} /* ---------------------------- Reveal-on-scroll --------------------------- */ /* Opacity settles quickly and linearly; transform gets a "back out" curve that overshoots slightly past its resting place, so content lands with a light, springy bounce rather than a flat slide. */ [data-reveal]{ opacity:0;transform:translateY(34px) scale(.96); transition:opacity .55s cubic-bezier(.22,.61,.36,1), transform 1s var(--ease-bounce); will-change:transform,opacity; } [data-reveal].is-visible{opacity:1;transform:translateY(0) scale(1)} [data-reveal="left"]{transform:translateX(-52px) scale(.97)} [data-reveal="left"].is-visible{transform:translateX(0) scale(1)} [data-reveal="right"]{transform:translateX(52px) scale(.97)} [data-reveal="right"].is-visible{transform:translateX(0) scale(1)} [data-reveal="scale"]{transform:scale(.86)} [data-reveal="scale"].is-visible{transform:scale(1)} @media (prefers-reduced-motion: reduce){ [data-reveal]{opacity:1!important;transform:none!important;transition:none!important} *{animation-duration:.001s!important;animation-iteration-count:1!important} } /* ================================ NAV ==================================== */ .nav{ position:fixed;top:0;left:0;right:0;z-index:100; padding:14px 0; background:rgba(250,250,249,0.72); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); border-bottom:1px solid transparent; transition:border-color .3s ease,box-shadow .3s ease,background .3s ease; } .nav.scrolled{border-bottom-color:var(--border);box-shadow:0 4px 20px rgba(28,25,23,0.05)} .nav .container{display:flex;align-items:center;justify-content:space-between;gap:20px} .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:-.01em} .brand img{width:30px;height:30px} .nav-links{display:flex;align-items:center;gap:6px} .nav-links a{ padding:9px 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--text-2); transition:background .15s ease,color .15s ease; } .nav-links a:hover{background:var(--bg-sunken);color:var(--text)} .nav-cta{display:flex;align-items:center;gap:10px} .nav-toggle{display:none;width:40px;height:40px;border-radius:10px;border:1.5px solid var(--border);background:var(--bg-surface);align-items:center;justify-content:center;cursor:pointer} /* ================================ HERO ==================================== */ .hero{ padding:168px 0 100px; background: radial-gradient(1100px 480px at 82% -8%, rgba(107,114,128,0.14), transparent 60%), radial-gradient(700px 420px at 8% 6%, rgba(14,165,233,0.08), transparent 60%), var(--bg-canvas); overflow:hidden; } .hero .container{display:grid;grid-template-columns:1.05fr 0.95fr;gap:40px;align-items:center} .hero-copy h1{font-size:clamp(34px,5vw,54px);line-height:1.06} .hero-copy .eyebrow{margin-bottom:20px} .hero-copy p.lead{font-size:18px;margin-top:20px;max-width:520px} .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px} .store-badges{margin-top:28px} .store-badges-label{display:block;font-size:12.5px;font-weight:600;color:var(--text-3);margin-bottom:10px} .store-badges-row{display:flex;flex-wrap:wrap;gap:12px} .store-badge{ display:flex;align-items:center;gap:10px;height:50px;padding:0 16px;border-radius:12px; background:#111;color:#fff;border:1px solid #111; transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease); } .store-badge:hover{transform:translateY(-2px);box-shadow:0 10px 22px -8px rgba(0,0,0,0.4);background:#000} .store-badge:active{transform:translateY(0) scale(.98)} .store-badge span{display:flex;flex-direction:column;line-height:1.15} .store-badge i{font-style:normal;font-size:10px;color:#c9c6c1} .store-badge b{font-size:14.5px;font-weight:700;letter-spacing:-0.01em} .hero-trust{display:flex;flex-wrap:wrap;gap:22px;margin-top:32px} .hero-trust div{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text-2)} .hero-trust svg{flex:0 0 auto;color:var(--brand)} .hero-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:640px} .hero-visual .glow{ position:absolute;inset:-60px;border-radius:50%; background:radial-gradient(closest-side, rgba(107,114,128,0.22), transparent 70%); filter:blur(10px); } .hero-device-wrap{ position:relative;z-index:2; animation:heroFloat 6s ease-in-out infinite; } .hero-ring{ position:absolute;border-radius:50%;border:1px solid var(--border-strong); animation:ringPulse 5s ease-in-out infinite; } .hero-ring.r1{width:520px;height:520px;animation-delay:0s} .hero-ring.r2{width:420px;height:420px;animation-delay:.6s} .hero-ring.r3{width:320px;height:320px;animation-delay:1.2s} @keyframes heroFloat{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-16px) rotate(1deg)}} @keyframes ringPulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.9;transform:scale(1.02)}} .hero-badge-float{ position:absolute;background:var(--bg-surface);border:1px solid var(--border); border-radius:16px;padding:12px 16px;box-shadow:var(--shadow-lg); display:flex;align-items:center;gap:10px;z-index:3; animation:badgeFloat 4.5s ease-in-out infinite; } .hero-badge-float.b1{top:12%;left:-2%;animation-delay:.2s} .hero-badge-float.b2{bottom:16%;right:-4%;animation-delay:1s} @keyframes badgeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} .hero-badge-float .ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:#fff} .hero-badge-float .ic.green{background:linear-gradient(135deg,var(--success),#15803d)} .hero-badge-float .ic.amber{background:linear-gradient(135deg,var(--warning),#b45309)} .hero-badge-float .t1{font-size:12.5px;font-weight:700;color:var(--text)} .hero-badge-float .t2{font-size:11px;color:var(--text-3)} /* ============================ DEVICE MOCKUP =============================== */ .ios-device{ width:272px;height:558px;border-radius:44px;position:relative;overflow:hidden; background:#000; box-shadow:0 46px 90px -20px rgba(28,25,23,0.35), 0 0 0 1.5px rgba(0,0,0,0.08); } .ios-device .screen{ position:absolute;inset:9px;border-radius:36px;overflow:hidden;background:var(--bg-canvas); } .ios-device .island{ position:absolute;top:16px;left:50%;transform:translateX(-50%); width:82px;height:24px;border-radius:16px;background:#000;z-index:50; } .ios-device .home-ind{ position:absolute;bottom:8px;left:50%;transform:translateX(-50%); width:100px;height:4px;border-radius:100px;background:rgba(0,0,0,0.28);z-index:60; } .ios-device .statusbar{ position:absolute;top:0;left:0;right:0;z-index:40; display:flex;align-items:center;justify-content:space-between; padding:14px 22px 0;font-size:13px;font-weight:600;color:var(--text); } .ios-device .statusbar .icons{display:flex;align-items:center;gap:5px;color:var(--text)} .ios-device .statusbar .icons svg{display:block} .ios-device.dark .statusbar .icons{color:#fff} .ios-device.sm .statusbar .icons{gap:4px} .ios-device.sm .statusbar .icons svg{transform:scale(.92)} .ios-device.dark .statusbar{color:#fff} .ios-device.dark .screen{background:#15181a} /* The map screen's background is a literal light green (real map tiles don't reflect OS theme) with no card behind the status bar, so its time/ icon color must be pinned dark regardless of --text — otherwise OS dark mode flips it near-white and it disappears into the light map. */ .ios-device:has(.scr-map) .statusbar, .ios-device:has(.scr-map) .statusbar .icons{color:#1C1917} /* Small showcase-scale variant so 9 mockups don't overwhelm the layout */ .ios-device.sm{width:246px;height:504px;border-radius:38px} .ios-device.sm .screen{inset:8px;border-radius:31px} .ios-device.sm .island{top:13px;width:70px;height:20px;border-radius:14px} .ios-device.sm .home-ind{width:90px} /* =============================== STAT BAR ================================= */ .statbar{padding:44px 0;background:var(--bg-surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .statbar .container{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .stat{text-align:center;padding:0 8px} .stat .num{font-size:clamp(24px,3vw,32px);font-weight:800;color:var(--brand-pressed);letter-spacing:-.02em} .stat .lbl{font-size:13px;color:var(--text-2);margin-top:6px;font-weight:600} /* ============================== HOW IT WORKS =============================== */ .how{padding:110px 0} .how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .how-card{ background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md); padding:32px 28px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease); } .how-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--border-strong)} .how-icon{ width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center; color:#fff;margin-bottom:20px; } .how-card h3{font-size:19px;margin-bottom:10px} .how-card p{font-size:14.5px} .how-step{font-size:12px;font-weight:700;color:var(--text-3);letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px;display:block} /* ============================ PRODUCT SHOWCASE ============================= */ .showcase{padding:60px 0 120px} .showcase-row{ display:grid;grid-template-columns:0.9fr 1.1fr;gap:56px;align-items:center; padding:70px 0; } .showcase-row:not(:last-child){border-bottom:1px solid var(--border)} .showcase-row.reverse{grid-template-columns:1.1fr 0.9fr} .showcase-row.reverse .showcase-copy{order:2} .showcase-row.reverse .showcase-visual{order:1} .showcase-copy .num{ font-size:13px;font-weight:800;color:var(--brand);letter-spacing:.08em;text-transform:uppercase; display:flex;align-items:center;gap:10px;margin-bottom:16px; } .showcase-copy .num svg{flex:0 0 auto} .showcase-copy h3{font-size:clamp(22px,2.6vw,28px);margin-bottom:14px} .showcase-copy p{font-size:15.5px;margin-bottom:20px} .showcase-feature-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .showcase-feature-list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text-2)} .showcase-feature-list svg{flex:0 0 auto;margin-top:2px;color:var(--brand)} .showcase-visual{display:flex;justify-content:center;position:relative} .showcase-visual .device-glow{ position:absolute;width:340px;height:340px;border-radius:50%; background:radial-gradient(closest-side, rgba(107,114,128,0.16), transparent 72%); z-index:0; } /* --- inner "screenshot" content shared styles --- */ .scr{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg-canvas)} .scr .pad{padding:52px 16px 16px} .scr .row{display:flex;align-items:center;justify-content:space-between} .scr h4{font-size:17px;margin:0;color:var(--text)} .scr .muted{color:var(--text-3);font-size:11px} .scr .card{background:var(--bg-surface);border:1px solid var(--border);border-radius:14px} .scr .chip{font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:999px} .scr .avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex:0 0 auto} .scr .tabbar{ position:absolute;left:8px;right:8px;bottom:26px;background:rgba(255,255,255,0.9); backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:20px; display:flex;justify-content:space-around;padding:9px 4px;box-shadow:var(--shadow-sm); } .scr .tabbar .tab{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:8.5px;font-weight:700;color:var(--text-3)} .scr .tabbar .tab.active{color:var(--brand)} .scr .tabbar svg{width:16px;height:16px} /* Welcome screen */ .scr-welcome{background:linear-gradient(160deg,#4B5563 0%,#6B7280 45%,#9CA3AF 100%);color:#fff;justify-content:flex-end;padding:30px 22px 40px} .scr-welcome .rings{position:absolute;top:60px;left:50%;transform:translateX(-50%);width:220px;height:220px} .scr-welcome .rings i{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:block} .scr-welcome .rings i:nth-child(1){inset:0} .scr-welcome .rings i:nth-child(2){inset:30px} .scr-welcome .rings i:nth-child(3){inset:60px} .scr-welcome .rings i:nth-child(4){inset:90px;border:none;background:rgba(255,255,255,.16)} .scr-welcome h2{font-size:24px;line-height:1.2;font-weight:800;margin:0 0 10px;position:relative;color:#fff} .scr-welcome p{color:rgba(255,255,255,.88);font-size:13px;position:relative;margin-bottom:18px} .scr-welcome .cta{position:relative;height:42px;border-radius:999px;background:#fff;color:var(--brand-pressed);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center} /* Map / Home screen */ .scr-map{background:linear-gradient(160deg,#e4f0e8 0%,#cfe6de 45%,#d9ecdf 100%)} .scr-map .map-grid{position:absolute;inset:0;opacity:.55} .scr-map .pin{position:absolute;width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(45deg);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.25)} .scr-map .pin span{transform:rotate(-45deg);color:#fff;font-size:10px;font-weight:800} .scr-map .topbar{position:absolute;top:44px;left:14px;right:14px;display:flex;justify-content:space-between} .scr-map .pill-card{background:var(--bg-surface);border-radius:16px;padding:9px 13px;box-shadow:var(--shadow);display:flex;align-items:center;gap:8px} .scr-map .fab{ position:absolute;left:50%;bottom:108px;transform:translateX(-50%); height:44px;padding:0 18px;border-radius:999px;background:linear-gradient(135deg,var(--brand),var(--brand-pressed)); color:#fff;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;box-shadow:0 10px 22px -6px rgba(75,85,99,.6); } .scr-map .sheet{position:absolute;left:0;right:0;bottom:0;background:var(--bg-surface);border-radius:20px 20px 0 0;box-shadow:0 -8px 24px rgba(0,0,0,.08);padding:10px 14px 66px} /* Severe / Cleanest list */ .scr-list .pad{padding-top:52px} .seg{display:flex;gap:4px;background:var(--bg-canvas);border:1px solid var(--border);border-radius:10px;padding:3px;margin:12px 0} .seg span{flex:1;text-align:center;font-size:11px;font-weight:700;padding:7px 0;border-radius:8px;color:var(--text-2);white-space:nowrap} .seg span.on{background:var(--brand);color:#fff} .scr-list .rows{padding:0 16px} .scr-list .r{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)} .scr-list .rank{width:18px;font-size:11px;font-weight:700;color:var(--text-3)} .scr-list .dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto} .scr-list .name{font-size:12px;font-weight:700;color:var(--text)} .scr-list .meta{font-size:10px;color:var(--text-3)} /* Report Detail (near, scored) */ .scr-detail .photo{height:150px;position:relative;background:linear-gradient(135deg,#7d8a97,#4B5563)} /* The air/tips variant carries more content in the same frame, so it trades photo height for it, and HOLDS that height. --------------------------------------------------------------------- flex:0 0 auto because .scr is a flex COLUMN, which makes .photo a SHRINKABLE item: content taller than the frame silently squashes the photo to nothing rather than overflowing. That reads as a design choice in a screenshot instead of a fault, and it is how this screen's own overflow first went unnoticed. Held, an overflow is visible as one. --------------------------------------------------------------------- SCOPED TO .scr-air RATHER THAN APPLIED TO .scr-detail, and that is a finding rather than caution. The Potential mock uses .scr-detail too and is ALREADY over its frame: applying this there stops the squash and clips its caption instead, which was rendered and confirmed in review round 2. That is a real fault in that mock and it is #167's row to fix, not this ticket's. Recorded there. */ .scr-detail.scr-air .photo{height:78px;flex:0 0 auto} .scr-detail.scr-air .tip-row{padding:6px 0} .scr-detail .photo .badge{position:absolute;bottom:10px;left:12px;font-size:10px;font-weight:700;color:#fff;background:rgba(0,0,0,.45);padding:5px 10px;border-radius:999px} .scr-detail .body{padding:14px 16px} .scr-detail .score-row{margin-bottom:10px} .scr-detail .score-row .lbl{display:flex;justify-content:space-between;font-size:10.5px;color:var(--text);margin-bottom:4px} .scr-detail .bar{height:6px;border-radius:999px;background:linear-gradient(90deg,#22C55E,#F59E0B,#DC2626);position:relative} .scr-detail .bar i{position:absolute;top:-2px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--text);transform:translateX(-50%)} .scr-detail .pt-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)} .scr-detail .pt-ic{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:13px;flex:0 0 auto} .scr-detail .pt-row b{font-size:11px;font-weight:700;color:var(--text)} .scr-detail .pt-row span{font-size:9.5px;color:var(--text-2);margin-left:4px} /* Air quality banner (P2-36/P2-40). The one figure on this screen that is not ours: it carries its own attribution, and the amber is the US EPA Moderate band rather than a house colour. */ .scr-detail .aqi-banner{display:flex;align-items:center;gap:10px;margin-top:12px;padding:9px 11px; border-radius:12px;background:#FEF3C7;border:1px solid #FDE68A} .scr-detail .aqi-fig{display:flex;align-items:baseline;gap:3px;flex:0 0 auto} .scr-detail .aqi-fig b{font-size:20px;font-weight:800;color:#92400E;line-height:1} .scr-detail .aqi-fig span{font-size:9px;font-weight:700;color:#78350F;letter-spacing:.04em} .scr-detail .aqi-txt{min-width:0} .scr-detail .aqi-band{font-size:11px;font-weight:700;color:#92400E} /* #78350F, not #B45309, which measures 4.51:1 on this background -- a hair over the 4.5:1 AA floor, at 9px, where there is no room to be marginal. This is 8.15:1. Same mistake as #263's textTertiary sweep. */ .scr-detail .aqi-src{font-size:9px;color:#78350F;margin-top:1px} /* "What to do nearby" tips. */ .scr-detail .tip-row{display:flex;align-items:flex-start;gap:8px;padding:7px 0; border-bottom:1px solid var(--border);font-size:9.5px;color:var(--text);line-height:1.45} .scr-detail .tip-ic{flex:0 0 auto;font-size:12px;line-height:1.2} /* The air provenance note in the report-detail showcase copy. Set apart from the feature list because it is an explanation rather than a selling point, and the honesty is the point of it. */ .air-note{margin-top:22px;padding:16px 18px;border-radius:14px; background:var(--bg-surface);border:1px solid var(--border)} .air-note h4{margin:0 0 8px;font-size:14px;font-weight:700;color:var(--text)} .air-note p{font-size:13.5px;line-height:1.6;margin:0 0 8px} .air-note p:last-child{margin-bottom:0} .air-note .air-note-caveat{font-size:12.5px;color:var(--text-2);padding-top:8px; border-top:1px solid var(--border)} /* Area Detail (far / view-only) */ .scr-area .photo{height:130px;position:relative;background:linear-gradient(135deg,#8b95a1,#5b6572)} .scr-area .viewonly{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.5);color:#fff;font-size:9px;font-weight:700;padding:4px 9px;border-radius:999px} .scr-area .notice{margin:14px 16px;padding:10px 12px;border-radius:10px;background:var(--bg-surface);border:1px solid var(--border);font-size:10.5px;color:var(--text-2)} /* Validate request */ .scr-validate .avatars{display:flex;gap:14px;padding:16px;overflow:hidden} .scr-validate .av-item{display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 0 auto} .scr-validate .av-item .avatar{width:44px;height:44px;background:#9CA3AF;color:#374151;font-size:13px} .scr-validate .av-item.sel .avatar{outline:2.5px solid var(--brand);outline-offset:2px} .scr-validate .av-item .nm{font-size:9.5px;font-weight:600;color:var(--text)} /* Profile */ .scr-profile{text-align:center} .scr-profile .badge-ring{width:88px;height:88px;border-radius:50%;padding:5px;background:conic-gradient(from 0deg, rgba(107,114,128,.55), transparent 30%);margin:6px auto 10px} .scr-profile .badge{width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,#94a3b8,#64748b);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:11px;box-shadow:var(--shadow)} .scr-profile .prog{height:7px;background:var(--border);border-radius:999px;margin:12px auto;width:80%;overflow:hidden} .scr-profile .prog i{display:block;height:100%;background:var(--brand);border-radius:999px} .scr-profile .stats{display:flex;gap:8px;padding:0 16px;margin-top:14px} .scr-profile .stat-card{flex:1;background:var(--bg-surface);border:1px solid var(--border);border-radius:12px;padding:10px 6px} .scr-profile .stat-card b{font-size:16px;color:var(--brand-pressed);display:block} .scr-profile .stat-card span{font-size:9px;color:var(--text-2)} /* Tier up celebration */ .scr-tierup{align-items:center;justify-content:center;text-align:center;background:#fff;padding:30px} .scr-tierup .badge-lg{width:104px;height:104px;border-radius:50%;background:linear-gradient(135deg,#EAB308,#CA8A04);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;box-shadow:var(--shadow-lg);margin-bottom:18px;position:relative;overflow:hidden} .scr-tierup .badge-lg::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);background-size:250% 250%;animation:shimmer 2.4s ease-in-out infinite} @keyframes shimmer{0%{background-position:150% 150%}100%{background-position:-50% -50%}} .scr-tierup .tag{font-size:10px;font-weight:800;color:var(--brand);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px} /* This screen's card is pinned to a literal white background (a real celebration-screen screenshot, not theme-reactive) — its heading and body text must be pinned to literal dark colors too, not the global h4/p rules' var(--text)/var(--text-2), which flip light in OS dark mode and would otherwise wash out to near-white-on-white. */ .scr-tierup h4{font-size:20px;color:#1C1917} .scr-tierup p{font-size:11.5px;margin-top:8px;color:#57534E} .scr-tierup .confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden} .scr-tierup .confetti i{position:absolute;top:-10%;width:6px;height:10px;border-radius:1px;animation:confettiFall 3.2s linear infinite} @keyframes confettiFall{0%{transform:translateY(0) rotate(0deg);opacity:1}100%{transform:translateY(560px) rotate(360deg);opacity:0}} /* =========================== BUSINESS / API =============================== */ .biz{padding:110px 0;background:var(--bg-surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .biz-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center} .biz-copy .section-head{text-align:left;margin:0 0 28px;max-width:520px} .biz-list{list-style:none;margin:0 0 32px;padding:0;display:flex;flex-direction:column;gap:18px} .biz-list li{display:flex;gap:14px} .biz-list .ic{width:42px;height:42px;border-radius:12px;background:var(--bg-sunken);display:flex;align-items:center;justify-content:center;color:var(--brand-pressed);flex:0 0 auto} .biz-list b{font-size:14.5px;color:var(--text);display:block;margin-bottom:2px} .biz-list span{font-size:13.5px;color:var(--text-2)} .biz-visual{position:relative} .api-card{ background:#1C1917;border-radius:20px;padding:26px;box-shadow:var(--shadow-lg); font-family:'SF Mono','Fira Code',ui-monospace,monospace;font-size:12.5px;color:#e7e5e4; position:relative;overflow:hidden; } .api-card .dots{display:flex;gap:6px;margin-bottom:16px} .api-card .dots i{width:10px;height:10px;border-radius:50%} .api-card .dots i:nth-child(1){background:#DC2626} .api-card .dots i:nth-child(2){background:#F59E0B} .api-card .dots i:nth-child(3){background:#22C55E} .api-card pre{margin:0;white-space:pre-wrap;line-height:1.65} .api-card .k{color:#9CA3AF} .api-card .s{color:#7dd3fc} .api-card .n{color:#fbbf24} .api-card .c{color:#57534E} .biz-badges{display:flex;gap:12px;margin-top:20px} .biz-badges span{ font-size:11.5px;font-weight:700;color:var(--text-2);background:var(--bg-canvas); border:1px solid var(--border);padding:8px 14px;border-radius:999px; } /* ================================ ABOUT ==================================== */ .about{padding:110px 0} .about-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:60px;align-items:start} .about-visual{ position:relative;display:flex;align-items:center;justify-content:center; padding:30px;min-height:320px; } .about-visual .glow{ position:absolute;inset:0;margin:auto;width:78%;height:78%;border-radius:50%; background:radial-gradient(closest-side, rgba(107,114,128,0.16), transparent 72%); filter:blur(6px); } .about-visual img{ position:relative;width:100%;max-width:440px; filter:drop-shadow(0 18px 30px rgba(28,25,23,0.16)); } .about-copy .section-head{text-align:left;margin:0 0 20px} .about-copy p{font-size:15.5px;margin-bottom:16px} .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px} .pillar{background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;padding:18px} .pillar .n{font-size:22px;font-weight:800;color:var(--brand-pressed)} .pillar .l{font-size:12px;color:var(--text-2);margin-top:4px;font-weight:600} /* ================================ CONTACT =================================== */ .contact{padding:110px 0;background:linear-gradient(180deg,var(--bg-canvas),var(--bg-sunken))} .contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} @media (max-width:860px){.contact-grid{grid-template-columns:1fr}} .contact-card{ background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md); padding:32px;display:flex;flex-direction:column;gap:16px; transition:transform .3s var(--ease),box-shadow .3s var(--ease); } .contact-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .contact-card .ic{width:48px;height:48px;border-radius:14px;background:var(--bg-sunken);display:flex;align-items:center;justify-content:center;color:var(--brand-pressed)} .contact-card h4{font-size:17px} .contact-card a.link{color:var(--secondary-dark);font-weight:700;font-size:14.5px} .contact-card a.link:hover{text-decoration:underline} /* The contact form (#1006). Two columns: the three addresses, which are the fallback, and the form card. The addresses come first in the document as well as on the page, because they work with no JavaScript at all. */ .contact-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:64px;align-items:start} .contact-intro h2{font-size:clamp(32px,4.5vw,44px);line-height:1.08;letter-spacing:-.02em;margin:14px 0 16px} .contact-intro p{font-size:16px;line-height:1.6;color:var(--text-2);margin:0 0 34px;max-width:470px} .contact-rows{display:flex;flex-direction:column;gap:20px} .contact-row{display:flex;flex-direction:column;gap:3px;border-top:1px solid var(--border);padding-top:16px} .contact-row-title{font-size:15px;font-weight:700} .contact-row-body{font-size:14px;color:var(--text-2)} .contact-row a.link{font-size:14px;font-weight:700;margin-top:3px;color:var(--secondary-dark)} .contact-row a.link:hover{text-decoration:underline} .contact-form-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:18px;padding:32px;align-self:start} .contact-form-title{font-size:22px;font-weight:800;letter-spacing:-.02em} .contact-form-sub{font-size:13.5px;color:var(--text-2);margin:6px 0 22px;line-height:1.5} #contactForm{display:flex;flex-direction:column;gap:14px} .field{display:flex;flex-direction:column;gap:6px} .field>span:first-child{font-size:13px;font-weight:700} .field input,.field textarea{ font-family:inherit;font-size:15px;color:var(--text);background:var(--bg-canvas); border:1.5px solid var(--border);border-radius:12px;padding:12px 14px;width:100%; } .field textarea{resize:vertical;min-height:120px} .field input:focus,.field textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)} /* THE INVALID STATE IS A COLOUR AND A MESSAGE, never a colour alone: a red border says nothing to somebody who cannot see it, and the message below is what aria-describedby points at. */ .field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--danger)} .field-err{font-size:12px;color:var(--danger)} .contact-send{height:50px;margin-top:4px;justify-content:center} .contact-form-note{font-size:12px;color:var(--text-3);text-align:center;margin:0} .contact-form-failed{text-align:center;margin:0} /* OFF-SCREEN RATHER THAN display:none. A field a browser treats as hidden is one some bots skip; this one is in the layout and simply not where anybody can see it. aria-hidden on the wrapper keeps a screen reader off it. */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .contact-sent-tick{ width:48px;height:48px;border-radius:14px;margin-bottom:18px; background:linear-gradient(135deg,#22C55E,#15803D); display:flex;align-items:center;justify-content:center; } .contact-sent-body{font-size:14px;color:var(--text-2);margin-top:8px;line-height:1.6} .contact-again{margin-top:22px;height:42px;padding:0 20px} /* The billing-account join page (#1007). Panels rather than one long form: five minutes of typing is easier to face in four named sections. */ .join{max-width:760px;margin:0 auto;padding:0 0 110px} .join-panel{ background:var(--bg-surface);border:1px solid var(--border);border-radius:18px; padding:28px;margin-bottom:20px; } .join-title{font-size:19px;font-weight:800;letter-spacing:-.01em;margin-bottom:6px} .join-muted{font-size:13.5px;color:var(--text-2);line-height:1.6;margin:0 0 18px} .join-rows{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:14px 0 0;font-size:14px} .join-rows dt{color:var(--text-2)} .join-rows dd{margin:0;font-weight:700;text-align:right} .join-panel .field{margin-bottom:14px} .join-panel .field select{ font-family:inherit;font-size:15px;color:var(--text);background:var(--bg-canvas); border:1.5px solid var(--border);border-radius:12px;padding:12px 14px;width:100%; } .join-panel .field select:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)} .join-send{width:100%;height:52px;justify-content:center} .join-failed{text-align:center;margin:14px 0 0} .join-foot{margin:18px 0 0;text-align:center} .join-tick{ width:48px;height:48px;border-radius:14px;margin-bottom:18px; background:linear-gradient(135deg,#22C55E,#15803D); display:flex;align-items:center;justify-content:center; } /* ================================ FOOTER =================================== */ .site-footer{background:#17181a;color:#a8a29e;padding:64px 0 28px} .footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;padding-bottom:40px;border-bottom:1px solid #2a2a28} .footer-brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:17px;margin-bottom:14px} .footer-brand img{width:28px;height:28px} .site-footer p{color:#8a8782;font-size:13.5px;max-width:320px} .footer-col h5{color:#fff;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px} .footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .footer-col a{font-size:14px;color:#a8a29e;transition:color .15s ease} .footer-col a:hover{color:#fff} .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;font-size:12.5px;color:#6f6c67;flex-wrap:wrap;gap:10px} /* ================================ RESPONSIVE ================================ */ @media (max-width:960px){ .hero .container,.biz-grid,.about-grid,.contact-grid{grid-template-columns:1fr} .hero-visual{margin-top:40px;min-height:520px} .how-grid{grid-template-columns:1fr 1fr} .showcase-row,.showcase-row.reverse{grid-template-columns:1fr!important} .showcase-row .showcase-copy,.showcase-row.reverse .showcase-copy{order:2!important} .showcase-row .showcase-visual,.showcase-row.reverse .showcase-visual{order:1!important} .footer-grid{grid-template-columns:1fr 1fr} .statbar .container{grid-template-columns:repeat(2,1fr);row-gap:24px} } @media (max-width:720px){ .nav-links{display:none} .nav-toggle{display:flex} .how-grid{grid-template-columns:1fr} .pillars{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr} .hero{padding-top:140px} .ios-device{transform:scale(.86)} } /* Dark-mode aware surfaces (marketing shell mainly stays light per brand ask, but avoid a jarring white flash for OS dark-mode users) */ @media (prefers-color-scheme: dark){ body{background:#141513} :root{ --bg-canvas:#141513;--bg-surface:#1c1e1b;--bg-sunken:#232522; --border:#2b2d29;--border-strong:#3a3c37; --text:#f5f5f4;--text-2:#c9c6c1;--text-3:#8a8782; } .nav{background:rgba(20,21,19,0.72)} .api-card{background:#0d0e0c} } /* ============================ DOCUMENT PAGES ============================== privacy.html and delete-account.html. These are long-form prose, which index.html has no pattern for: every marketing section is a bespoke layout, so a page that is only headings, paragraphs and tables had nothing to inherit and was carrying its own inline palette instead. Four things were broken by that, and none of them were about taste: - The palette was slate and emerald (#334155, #15803D), which appears nowhere else on this site. The shell around it was stone and grey. - The reset sets p{margin:0}, correct for the marketing grids and wrong for prose, so paragraphs ran together with no gap at all. - Both pages closed with