/* ========================================================= ShowingScore — Landing v2 (dark-glass) Rebuilt from design_handoff_landing_v2. Dark is the default theme; the nav toggle stamps [data-theme="light"] on . ========================================================= */ /* ---- Theme tokens ---- */ :root, :root[data-theme="dark"] { --bg: #07080D; --bg-elev: #0B0D14; --text: #EDEFF7; --text-sec: #9096A8; --nav-bg: rgba(7, 8, 13, .6); --nav-border: rgba(255, 255, 255, .07); --card-bg: rgba(255, 255, 255, .04); --card-border: rgba(255, 255, 255, .08); --footer-border: rgba(255, 255, 255, .07); --phone-bg: rgba(255, 255, 255, .05); --phone-border: rgba(255, 255, 255, .1); --hero-glow: rgba(61, 116, 217, .35); --phone-glow: rgba(61, 116, 217, .28); --phone-shadow: 0 40px 90px rgba(0, 0, 0, .35); --shot-shadow: 0 24px 60px rgba(0, 0, 0, .2); } :root[data-theme="light"] { --bg: #F5F6FA; --bg-elev: #FFFFFF; --text: #12141C; --text-sec: #5B6472; --nav-bg: rgba(255, 255, 255, .7); --nav-border: rgba(20, 22, 30, .08); --card-bg: #FFFFFF; --card-border: rgba(20, 22, 30, .09); --footer-border: rgba(20, 22, 30, .08); --phone-bg: #FFFFFF; --phone-border: rgba(20, 22, 30, .08); --hero-glow: rgba(61, 116, 217, .14); --phone-glow: rgba(61, 116, 217, .12); --phone-shadow: 0 20px 45px rgba(20, 22, 30, .14); --shot-shadow: 0 14px 34px rgba(20, 22, 30, .1); } /* Fixed brand + accent (do not shift with theme) */ :root { --brand: #3D74D9; --accent: #3D74D9; --accent2: #5B94E6; --accent-shadow: rgba(61, 116, 217, .4); --accent-soft: rgba(61, 116, 217, .18); --feature-glow-op: .3; --green: #3FBE79; --coral: #E8785C; --yellow: #F0B44C; } /* ---- Base ---- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; background: var(--bg); color: var(--text); transition: background .25s ease, color .25s ease; -webkit-font-smoothing: antialiased; } a { color: #8FA3F5; text-decoration: none; } a:hover { color: #B9C4FF; } img { max-width: 100%; display: block; } ::-webkit-scrollbar { display: none; } .shell { max-width: 1440px; margin: 0 auto; background: var(--bg); overflow: clip; } @keyframes glowPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } } /* ---- Glass nav ---- */ /* Bar spans the full viewport; .nav-inner keeps content framed at the same 1440px column as the rest of the page. */ .nav { position: sticky; top: 0; z-index: 20; background: var(--nav-bg); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid var(--nav-border); } .nav-inner { display: flex; align-items: center; gap: 36px; max-width: 1440px; margin: 0 auto; padding: 18px 48px; } .brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); } .brand svg { display: block; } .brand .mark-b { color: var(--brand); } .nav-spacer { flex: 1; } .nav-links { display: flex; align-items: center; gap: 26px; } .nav-links a { font-size: 14px; font-weight: 500; color: var(--text-sec); } .nav-links a:hover { color: var(--text); } .theme-toggle { width: 34px; height: 34px; border-radius: 10px; background: var(--card-bg); border: 1px solid var(--card-border); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; color: var(--text); } .theme-toggle svg { display: block; } /* Show sun in light theme, moon in dark theme (dark is default) */ :root[data-theme="light"] .icon-moon { display: none; } :root[data-theme="dark"] .icon-sun, :root:not([data-theme="light"]) .icon-sun { display: none; } .nav-links a.btn-pill, .btn-pill { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #FFFFFF; font-size: 13.5px; font-weight: 600; padding: 10px 20px; border-radius: 999px; box-shadow: 0 6px 18px var(--accent-shadow); } .nav-links a.btn-pill:hover, .btn-pill:hover { color: #FFFFFF; } /* ---- Hero ---- */ .hero { position: relative; padding: 100px 48px 60px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; overflow: hidden; } .hero-glow { position: absolute; width: 900px; height: 600px; top: -260px; left: 50%; transform: translateX(-50%); background: radial-gradient(closest-side, var(--hero-glow), transparent 70%); pointer-events: none; } .badge { position: relative; display: flex; align-items: center; gap: 8px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 999px; padding: 7px 16px; font-size: 12.5px; font-weight: 600; color: #5C7FE0; } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px 2px rgba(63, 190, 121, .7); animation: glowPulse 2.2s ease-in-out infinite; } .hero h1 { position: relative; margin: 0; font-size: clamp(34px, 6vw, 64px); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; max-width: 16ch; text-wrap: balance; color: var(--text); } .hero .sub { position: relative; margin: 0; font-size: 19px; line-height: 1.6; color: var(--text-sec); max-width: 46ch; text-wrap: pretty; } .store-row { position: relative; display: flex; align-items: center; gap: 14px; margin-top: 6px; flex-wrap: wrap; justify-content: center; } /* Official store badges (Apple / Google artwork). Matched by height (both stores' recommendation); the Google asset is trimmed of its built-in transparent margin so both badges fill to the same height. */ .badge-link { display: inline-flex; align-items: center; } .badge-link img { display: block; width: auto; } .store-row .badge-link img { height: 48px; } .mini-row .badge-link img { height: 40px; } .text-link { font-size: 15px; font-weight: 600; color: var(--text-sec); padding: 15px 10px; } .text-link:hover { color: var(--text); } /* Floating phone mockup */ .phone-wrap { position: relative; margin-top: 36px; width: 340px; max-width: 88vw; } .phone-glow { position: absolute; inset: -40px; background: radial-gradient(closest-side, var(--phone-glow), transparent 70%); pointer-events: none; z-index: 0; } .phone-frame { position: relative; z-index: 1; border-radius: 44px; padding: 14px; background: var(--phone-bg); border: 1px solid var(--phone-border); box-shadow: var(--phone-shadow); backdrop-filter: blur(10px); } .phone-screen { border-radius: 32px; overflow: hidden; aspect-ratio: 390 / 844; } .phone-screen img { width: 100%; height: 100%; object-fit: cover; } .chip { position: absolute; z-index: 2; background: rgba(20, 22, 30, .9); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; box-shadow: 0 14px 32px rgba(0, 0, 0, .4); } .chip-scored { left: -64px; bottom: 70px; padding: 12px 16px; display: flex; align-items: center; gap: 10px; } .chip-scored .ico { width: 30px; height: 30px; border-radius: 9px; background: rgba(63, 190, 121, .18); display: flex; align-items: center; justify-content: center; flex: none; } .chip-scored .t { font-size: 13px; font-weight: 700; color: #FFFFFF; } .chip-scored .s { font-size: 11px; color: #B7BCC8; } .chip-score { right: -70px; top: 120px; padding: 12px 16px; } .chip-score .n { font-size: 22px; font-weight: 800; color: #5C9BFF; } .chip-score .l { font-size: 10.5px; color: #B7BCC8; margin-top: 1px; } /* ---- Stat strip ---- */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--card-border); margin: 60px 48px 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--card-border); } .stat { background: var(--bg-elev); padding: 28px 30px; border-top: 3px solid var(--accent); } .stat.green { border-top-color: var(--green); } .stat.green .n { color: var(--green); } .stat.coral { border-top-color: var(--coral); } .stat.coral .n { color: var(--coral); } .stat .n { font-size: 30px; font-weight: 800; color: var(--accent); } .stat .l { font-size: 13px; color: var(--text-sec); margin-top: 4px; } /* ---- Section scaffolding ---- */ .section { padding: 96px 48px; } .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5C7FE0; } .section h2 { margin: 0; font-size: 38px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); text-wrap: balance; } /* Features */ .features { padding-bottom: 20px; display: flex; flex-direction: column; gap: 44px; } .features .head { display: flex; flex-direction: column; gap: 12px; max-width: 60ch; } .features .head h2 { font-size: clamp(22px, 3.4vw, 38px); } .bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .card { border-radius: 20px; background: var(--card-bg); border: 1px solid var(--card-border); padding: 26px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; } .card .blob { position: absolute; width: 120px; height: 120px; border-radius: 50%; filter: blur(46px); opacity: var(--feature-glow-op); top: -30px; right: -30px; } .card .ico { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; position: relative; } .card .ico svg { display: block; } .card .t { font-size: 17px; font-weight: 700; color: var(--text); position: relative; } .card .b { font-size: 14px; line-height: 1.6; color: var(--text-sec); position: relative; text-wrap: pretty; } /* Screens showcase */ .screens { display: flex; flex-direction: column; gap: 44px; align-items: center; text-align: center; } .screens .head { display: flex; flex-direction: column; gap: 12px; max-width: 56ch; } .shots { display: flex; gap: 20px; width: 100%; max-width: 1100px; justify-content: center; padding: 10px 4px 20px; flex-wrap: wrap; } .shot { flex: none; display: flex; flex-direction: column; gap: 14px; } .shot.results { width: 340px; } .shot.compare { width: 340px; } .shot .frame { border-radius: 36px; padding: 10px; background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--shot-shadow); } .shot .frame .inner { border-radius: 26px; overflow: hidden; aspect-ratio: 390 / 844; } .shot .frame img { width: 100%; height: 100%; object-fit: cover; } .shot .cap { font-size: 14px; font-weight: 600; color: var(--text-sec); } /* How it works */ .how { display: flex; flex-direction: column; align-items: center; gap: 48px; padding-top: 20px; } .how .head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; width: 100%; max-width: 1020px; } .steps .connector { position: absolute; top: 27px; left: 17%; right: 17%; border-top: 2px dashed var(--card-border); pointer-events: none; } .step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .step .num { width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 800; box-shadow: 0 10px 24px var(--accent-shadow); } .step .t { font-size: 18px; font-weight: 700; color: var(--text); } .step .b { font-size: 14px; line-height: 1.6; color: var(--text-sec); max-width: 32ch; text-wrap: pretty; } /* CTA band */ .cta { margin: 0 20px 20px; border-radius: 28px; background: linear-gradient(135deg, #1A1F3D 0%, var(--accent) 100%); padding: 72px 56px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; position: relative; overflow: hidden; } .cta .band-glow { position: absolute; width: 500px; height: 500px; top: -200px; right: -120px; background: radial-gradient(closest-side, var(--accent-shadow), transparent 70%); pointer-events: none; } .cta h2 { position: relative; margin: 0; font-size: clamp(28px, 4.5vw, 42px); font-weight: 800; letter-spacing: -0.02em; color: #FFFFFF; max-width: 22ch; text-wrap: balance; } .cta p { position: relative; margin: 0; font-size: 17px; color: rgba(255, 255, 255, .8); max-width: 46ch; text-wrap: pretty; } .cta .download-label { position: relative; margin: 14px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: #FFFFFF; } .cta .btn-white { position: relative; display: inline-flex; align-items: center; gap: 8px; background: #FFFFFF; color: #1A1F3D; font-size: 16px; font-weight: 700; padding: 15px 32px; border-radius: 999px; margin-top: 8px; box-shadow: 0 14px 34px rgba(0, 0, 0, .35); } .cta .btn-white:hover { color: #1A1F3D; } .cta .mini-row { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; justify-content: center; } /* Footer */ .footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 32px 48px 44px; border-top: 1px solid var(--footer-border); } .footer .fbrand { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 700; color: var(--text); } .footer .flinks { display: flex; align-items: center; gap: 26px; font-size: 13.5px; justify-content: center; } .footer .flinks a { color: #8FA3F5; } .footer .copy { font-size: 12.5px; color: var(--text-sec); text-align: right; } /* ---- Doc pages (privacy / support) ---- */ .doc { max-width: 760px; margin: 0 auto; padding: 64px 24px 88px; } .doc h1 { margin: 0 0 8px; font-size: clamp(30px, 5vw, 44px); font-weight: 800; letter-spacing: -0.02em; color: var(--text); } .doc .updated { margin: 0 0 32px; font-size: 14px; color: var(--text-sec); } .doc h2 { margin: 40px 0 12px; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); } .doc h3 { margin: 28px 0 10px; font-size: 17px; font-weight: 700; color: var(--text); } .doc p { margin: 0 0 16px; font-size: 16px; line-height: 1.7; color: var(--text-sec); text-wrap: pretty; } .doc p strong, .doc li strong { color: var(--text); font-weight: 700; } .doc ul { margin: 0 0 16px; padding-left: 22px; } .doc li { margin-bottom: 8px; font-size: 16px; line-height: 1.7; color: var(--text-sec); } .doc a { color: #8FA3F5; } .doc a:hover { color: #B9C4FF; } .doc .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; padding: 22px 24px; margin: 0 0 28px; } .doc .card p:last-child { margin-bottom: 0; } /* ---- Responsive ---- */ @media (max-width: 900px) { .nav-inner { padding: 16px 20px; gap: 16px; } .nav-links { gap: 16px; } .nav-links a[href="#features"], .nav-links a[href="#how"], .nav-links a[href="#screens"] { display: none; } .hero { padding: 64px 20px 40px; } .stats { margin: 40px 20px 0; } .section { padding: 64px 20px; } .bento { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; gap: 36px; } .steps .connector { display: none; } .cta { padding: 56px 28px; } .footer { grid-template-columns: 1fr; text-align: center; gap: 16px; } .footer .fbrand { justify-content: center; } .footer .flinks { flex-wrap: wrap; } .footer .copy { text-align: center; } } @media (max-width: 560px) { .chip-scored { left: -12px; } .chip-score { right: -12px; } .bento { gap: 14px; } }