/* ========================================================================== TrialBell — trialbell.app Calm, trustworthy, premium. Light + dark. Mobile-first, accessible. No external fonts/trackers — fast, private, system font stack. ========================================================================== */ :root { color-scheme: light dark; /* Type */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, "Apple Color Emoji", sans-serif; /* Spacing scale */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --radius: 16px; --radius-sm: 10px; --radius-lg: 28px; --container: 1120px; --measure: 68ch; /* Light theme (default) — cool, calm off-white */ --bg: #F7F8FB; --bg-tint: #EEF1F8; --surface: #FFFFFF; --surface-2: #F1F4FA; --text: #1A1D24; --text-muted: #5B6473; --border: #E6E9F0; --border-strong: #D6DBE8; --brand: #4F6BED; /* TrialBell indigo — primary actions/links */ --brand-ink: #3A4FC9; /* darker for hover */ --brand-soft: #EAEEFD; /* tinted brand background */ --on-brand: #FFFFFF; --sun: #8AA0FF; /* decorative indigo accent */ --sun-2: #7C8DF5; /* decorative violet-indigo */ --sky: #C7D6FF; /* decorative pale blue */ --good: #2E7D5B; --good-soft: #E4F1EA; --focus: #3A4FC9; --shadow: 0 1px 2px rgba(20,28,48,.04), 0 8px 28px rgba(20,28,48,.08); --shadow-lg: 0 2px 6px rgba(20,28,48,.06), 0 24px 60px rgba(20,28,48,.14); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0D0F14; --bg-tint: #12161F; --surface: #161A22; --surface-2: #1C212C; --text: #F2F4F8; --text-muted: #A0A7B5; --border: #262C38; --border-strong: #333B4A; --brand: #8AA0FF; --brand-ink: #A7B6FF; --brand-soft: #1B2540; --on-brand: #0D0F14; --sun: #8AA0FF; --sun-2: #7C8DF5; --sky: #24314F; --good: #6FD3A2; --good-soft: #15281F; --focus: #8AA0FF; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.45); --shadow-lg: 0 2px 6px rgba(0,0,0,.35), 0 24px 60px rgba(0,0,0,.55); } } /* Manual override via the theme toggle (data-theme on ). */ :root[data-theme="dark"] { --bg: #0D0F14; --bg-tint: #12161F; --surface: #161A22; --surface-2: #1C212C; --text: #F2F4F8; --text-muted: #A0A7B5; --border: #262C38; --border-strong: #333B4A; --brand: #8AA0FF; --brand-ink: #A7B6FF; --brand-soft: #1B2540; --on-brand: #0D0F14; --sun: #8AA0FF; --sun-2: #7C8DF5; --sky: #24314F; --good: #6FD3A2; --good-soft: #15281F; --focus: #8AA0FF; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.45); --shadow-lg: 0 2px 6px rgba(0,0,0,.35), 0 24px 60px rgba(0,0,0,.55); } /* ------------------------------ Base ------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; font-size: 1.0625rem; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 var(--sp-4); font-weight: 700; } h1 { font-size: clamp(2.25rem, 6vw, 3.6rem); } h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); } h3 { font-size: 1.25rem; letter-spacing: -0.01em; } p { margin: 0 0 var(--sp-4); max-width: var(--measure); } a { color: var(--brand); text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent); text-underline-offset: 2px; } a:hover { color: var(--brand-ink); } img, svg { max-width: 100%; height: auto; } ul, ol { padding-left: 1.25rem; } li { margin-bottom: var(--sp-2); } strong { font-weight: 650; } hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-7) 0; } /* Focus — always visible for keyboard users */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); } .narrow { max-width: 760px; } .skip-link { position: absolute; left: var(--sp-4); top: -100px; background: var(--brand); color: var(--on-brand); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); z-index: 200; transition: top .15s ease; font-weight: 600; } .skip-link:focus { top: var(--sp-4); color: var(--on-brand); } .eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; color: var(--brand); margin: 0 0 var(--sp-3); } .muted { color: var(--text-muted); } .center { text-align: center; } .center p { margin-inline: auto; } /* ------------------------------ Header ---------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--border); } .nav { display: flex; align-items: center; gap: var(--sp-5); height: 64px; } .brand { display: inline-flex; align-items: center; gap: var(--sp-3); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--text); text-decoration: none; } .brand:hover { color: var(--text); } .brand .logo { width: 34px; height: 34px; flex: none; } .nav-links { display: flex; gap: var(--sp-2); margin-left: auto; align-items: center; } .nav-links a { color: var(--text-muted); text-decoration: none; font-weight: 550; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); font-size: .98rem; } .nav-links a:hover { color: var(--text); background: var(--surface-2); } .nav-links a[aria-current="page"] { color: var(--text); } .icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; } .icon-btn:hover { background: var(--surface-2); } .icon-btn .sun-icon { display: none; } :root[data-theme="dark"] .icon-btn .sun-icon, :root:not([data-theme="light"]) .icon-btn .sun-icon { display: block; } :root[data-theme="dark"] .icon-btn .moon-icon, :root:not([data-theme="light"]) .icon-btn .moon-icon { display: none; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .icon-btn .sun-icon { display: none; } :root:not([data-theme="dark"]) .icon-btn .moon-icon { display: block; } } .nav-toggle { display: none; } /* ------------------------------ Buttons --------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-weight: 650; font-size: 1rem; line-height: 1; padding: 0.9rem 1.4rem; border-radius: 999px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .08s ease, background .15s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--brand); color: var(--on-brand); } .btn-primary:hover { background: var(--brand-ink); color: var(--on-brand); } .btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .btn-ghost:hover { background: var(--surface-2); color: var(--text); } /* "Coming soon" App Store badge — NOT a link until a real URL is configured. */ .appstore { display: inline-flex; align-items: center; gap: var(--sp-3); padding: 0.7rem 1.2rem; border-radius: var(--radius-sm); background: var(--text); color: var(--bg); font-weight: 600; text-decoration: none; } .appstore[aria-disabled="true"] { opacity: .9; cursor: default; } .appstore .badge-label { display: flex; flex-direction: column; line-height: 1.1; text-align: left; } .appstore .badge-label .small { font-size: .72rem; opacity: .8; } .appstore .badge-label .big { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; } .appstore svg { width: 26px; height: 26px; flex: none; } .cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; } .compat-note { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: .95rem; color: var(--text-muted); font-weight: 550; } .compat-note svg { width: 18px; height: 18px; color: var(--brand); } /* ------------------------------ Hero ------------------------------------ */ .hero { position: relative; padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 4.5rem); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 85% -10%, color-mix(in srgb, var(--sun) 26%, transparent), transparent 55%), radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--sky) 40%, transparent), transparent 60%); } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-8); align-items: center; } .hero h1 { margin-bottom: var(--sp-5); } .hero .lede { font-size: clamp(1.1rem, 2.2vw, 1.3rem); color: var(--text-muted); margin-bottom: var(--sp-4); } .hero-tagline { font-size: 1.02rem; color: var(--text-muted); margin: 0 0 var(--sp-6); max-width: 54ch; } .hero-tagline strong { color: var(--text); font-weight: 650; } .hero-art { display: grid; place-items: center; } /* ---- Calm sunrise motion (all disabled by the prefers-reduced-motion rule above) ---- */ @keyframes tb-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes tb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes tb-sun-breathe { 0%, 100% { opacity: .3; transform: scale(1); } 50% { opacity: .65; transform: scale(1.09); } } @keyframes tb-sun-rays { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Staggered fade-up of the hero copy on load */ .hero-copy > * { animation: tb-rise .7s ease both; } .hero-copy > *:nth-child(2) { animation-delay: .06s; } .hero-copy > *:nth-child(3) { animation-delay: .12s; } .hero-copy > *:nth-child(4) { animation-delay: .18s; } .hero-copy > *:nth-child(5) { animation-delay: .24s; } .hero-art { animation: tb-rise .8s ease .16s both; } /* Gentle float of the phone */ .device { animation: tb-float 7s ease-in-out infinite; will-change: transform; } /* Sun: soft breathing halo + very slow rays */ .sun-glow { transform-box: fill-box; transform-origin: center; animation: tb-sun-breathe 5.5s ease-in-out infinite; } .sun-rays { transform-box: fill-box; transform-origin: center; animation: tb-sun-rays 60s linear infinite; } /* ------------------------------ Sections -------------------------------- */ section { padding: clamp(2.75rem, 7vw, 5rem) 0; } .section-head { max-width: 720px; margin: 0 auto var(--sp-7); text-align: center; } .section-head p { margin-inline: auto; } .bg-tint { background: var(--bg-tint); } /* Steps */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); counter-reset: step; } .step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-6); box-shadow: var(--shadow); } .step .num { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-weight: 800; margin-bottom: var(--sp-4); } .step h3 { margin-bottom: var(--sp-2); } .step p { margin: 0; color: var(--text-muted); } /* Feature cards */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } .feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-6); box-shadow: var(--shadow); } .feature .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); margin-bottom: var(--sp-4); } .feature .ic svg { width: 26px; height: 26px; } .feature h3 { margin-bottom: var(--sp-2); font-size: 1.15rem; } .feature p { margin: 0; color: var(--text-muted); font-size: .98rem; } /* Use-cases chips */ .chips-group { margin-bottom: var(--sp-6); } .chips-group:last-child { margin-bottom: 0; } .chips-label { text-align: center; font-weight: 650; color: var(--text); margin: 0 0 var(--sp-4); font-size: 1.02rem; } .chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; } .chip { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--surface); border: 1px solid var(--border); padding: var(--sp-3) var(--sp-4); border-radius: 999px; font-weight: 550; box-shadow: var(--shadow); } .chip svg { width: 18px; height: 18px; color: var(--brand); } /* Plans */ .plans { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: stretch; } .plan { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-7); box-shadow: var(--shadow); display: flex; flex-direction: column; } .plan.featured { border-color: var(--brand); box-shadow: var(--shadow-lg); position: relative; } .plan .tag { position: absolute; top: -12px; right: var(--sp-6); background: var(--brand); color: var(--on-brand); font-size: .76rem; font-weight: 700; padding: var(--sp-1) var(--sp-3); border-radius: 999px; letter-spacing: .02em; } .plan h3 { font-size: 1.4rem; } .plan .plan-sub { color: var(--text-muted); margin-top: -.5rem; } .plan ul { list-style: none; padding: 0; margin: var(--sp-4) 0 0; } .plan li { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-3); } .plan li svg { width: 20px; height: 20px; color: var(--good); flex: none; margin-top: 3px; } /* Compatibility band */ .compat-band { background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border)); border-radius: var(--radius-lg); padding: var(--sp-7); text-align: center; } .compat-band h2 { margin-bottom: var(--sp-3); } .compat-band .badge-os { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 1.15rem; font-weight: 700; color: var(--brand); margin-bottom: var(--sp-3); } /* FAQ */ .faq { max-width: 820px; margin-inline: auto; } .faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: var(--sp-3); overflow: hidden; } .faq summary { list-style: none; cursor: pointer; padding: var(--sp-5); font-weight: 650; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; width: 12px; height: 12px; flex: none; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform .2s ease; margin-right: 4px; } .faq details[open] summary::after { transform: rotate(225deg); } .faq .answer { padding: 0 var(--sp-5) var(--sp-5); color: var(--text-muted); } .faq .answer p:last-child { margin-bottom: 0; } /* ------------------------------ Footer ---------------------------------- */ .site-footer { border-top: 1px solid var(--border); background: var(--surface-2); padding: var(--sp-8) 0 var(--sp-7); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-6); } .footer-grid h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: var(--sp-4); } .footer-grid ul { list-style: none; padding: 0; margin: 0; } .footer-grid li { margin-bottom: var(--sp-3); } .footer-grid a { color: var(--text); text-decoration: none; } .footer-grid a:hover { text-decoration: underline; } .footer-brand .brand { margin-bottom: var(--sp-3); } .footer-bottom { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); justify-content: space-between; align-items: center; margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--border); color: var(--text-muted); font-size: .9rem; } .appstore-soon { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: .9rem; color: var(--text-muted); } .appstore-soon .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--sun); } /* ------------------------------ Legal/doc pages ------------------------- */ .doc { padding-top: var(--sp-8); padding-bottom: var(--sp-8); } .doc-head { margin-bottom: var(--sp-7); } .doc-head .updated { color: var(--text-muted); font-size: .95rem; } .doc-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-8); align-items: start; } .toc { position: sticky; top: 84px; font-size: .92rem; border-left: 2px solid var(--border); padding-left: var(--sp-4); } .toc h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: var(--sp-3); } .toc ul { list-style: none; padding: 0; margin: 0; } .toc li { margin-bottom: var(--sp-2); } .toc a { color: var(--text-muted); text-decoration: none; } .toc a:hover { color: var(--brand); } .doc-body h2 { margin-top: var(--sp-7); scroll-margin-top: 84px; font-size: 1.5rem; } .doc-body h2:first-child { margin-top: 0; } .doc-body h3 { margin-top: var(--sp-5); font-size: 1.12rem; } .doc-body p, .doc-body li { color: var(--text); } .doc-body ul, .doc-body ol { max-width: var(--measure); } .callout { background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--border)); border-radius: var(--radius); padding: var(--sp-5); margin: var(--sp-5) 0; } .callout.warn { background: color-mix(in srgb, var(--sun) 16%, var(--surface)); border-color: color-mix(in srgb, var(--sun) 40%, var(--border)); } .callout p:last-child { margin-bottom: 0; } /* Support page specifics */ .support-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } .support-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-6); box-shadow: var(--shadow); } .support-card h3 { display: flex; align-items: center; gap: var(--sp-3); } .support-card h3 svg { width: 22px; height: 22px; color: var(--brand); } .checklist { list-style: none; padding: 0; margin: var(--sp-3) 0 0; } .checklist li { display: flex; gap: var(--sp-3); align-items: flex-start; } .checklist li::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--brand); margin-top: 10px; flex: none; } .contact-card { background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border)); border-radius: var(--radius-lg); padding: var(--sp-7); text-align: center; margin-bottom: var(--sp-7); } .contact-card .email { font-size: 1.4rem; font-weight: 700; word-break: break-word; } /* 404 */ .notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: var(--sp-8) 0; } .notfound .code { font-size: clamp(4rem, 18vw, 9rem); font-weight: 800; color: var(--brand); letter-spacing: -.04em; line-height: 1; margin: 0; } /* Device mockup */ .device { width: min(300px, 78vw); aspect-ratio: 300 / 610; border-radius: 42px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); padding: 14px; position: relative; } .device .screen { width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--sky) 60%, var(--surface)) 0%, var(--surface) 46%); display: flex; flex-direction: column; } .device .notch { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 96px; height: 26px; background: #0b0e16; border-radius: 999px; z-index: 2; } /* ---- Animated scan demo inside the phone. First the alarm rings, then the scanner opens and a figure walks across the room to the registered QR code, which locks on, then the stay-awake check. Sizes use container-query units so it scales with the device. It keeps its own "app" colours in either site theme. All motion is disabled by the global prefers-reduced-motion rule near the top; the JS also freezes on the ringing frame, which stays meaningful. ---- */ .device .screen.sd-screen { background: #0F1524; } .sd-screen { container-type: inline-size; position: relative; overflow: hidden; color: #fff; -webkit-font-smoothing: antialiased; background: #0F1524; } .sd-panel { position: absolute; inset: 0; display: none; } .sd-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } /* --- Video middle beat, framed as the open scanner --- */ .sd-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; background: #0F1524; } /* The scanner viewfinder (corner brackets) is part of the video footage itself, so no overlay brackets or scan-line are drawn here. */ /* --- Tap on the Scan to stop button (stage 0) --- */ .sd-tap { position: absolute; left: 50%; top: 74%; width: 22cqw; height: 22cqw; transform: translate(-50%, -50%); z-index: 4; pointer-events: none; } .sd-tap .sd-finger { position: absolute; left: 50%; top: 50%; width: 9cqw; height: 9cqw; border-radius: 50%; background: rgba(20,20,30,.42); border: 1.6cqw solid rgba(255,255,255,.9); transform: translate(-50%, -50%); } .sd-tap .sd-ripple { position: absolute; left: 50%; top: 50%; width: 9cqw; height: 9cqw; border-radius: 50%; border: 1.2cqw solid rgba(255,255,255,.85); transform: translate(-50%, -50%) scale(.6); opacity: 0; } .sd-screen[data-scan="0"] .sd-tap .sd-finger { animation: sd-tapfinger 2.4s ease-in-out infinite; } .sd-screen[data-scan="0"] .sd-tap .sd-ripple { animation: sd-tapripple 2.4s ease-out infinite; } @keyframes sd-tapfinger { 0%,44% { transform: translate(-50%,-50%) scale(1); } 58% { transform: translate(-50%,-50%) scale(.78); } 74%,100% { transform: translate(-50%,-50%) scale(1); } } @keyframes sd-tapripple { 0%,50% { opacity: 0; transform: translate(-50%,-50%) scale(.6); } 60% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(2.4); } } /* --- Press and hold, then complete (stage 2) --- */ .sd-press { position: absolute; left: 50%; top: 62%; width: 54cqw; height: 54cqw; transform: translate(-50%, -50%); z-index: 4; display: grid; place-items: center; } .sd-pressring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .sd-pressfill { fill: none; stroke: #4B49E6; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 289; } .sd-press .sd-finger { width: 11cqw; height: 11cqw; border-radius: 50%; background: rgba(20,20,30,.4); border: 1.6cqw solid rgba(255,255,255,.9); } .sd-complete { position: absolute; inset: 12%; display: grid; place-items: center; color: #fff; background: #2E7D5B; border-radius: 50%; opacity: 0; transform: scale(.4); box-shadow: 0 3cqw 8cqw rgba(46,125,91,.4); } .sd-complete svg { width: 46%; height: 46%; } .sd-screen[data-scan="2"] .sd-pressfill { animation: sd-fill 1.7s ease-out .35s forwards; } .sd-screen[data-scan="2"] .sd-complete { animation: sd-pop .45s cubic-bezier(.2,1.4,.4,1) 2.05s forwards; } @keyframes sd-fill { to { stroke-dashoffset: 0; } } @keyframes sd-pop { to { opacity: 1; transform: scale(1); } } /* ---------- 1 · Alarm ringing ---------- */ .sd-screen[data-scan="0"] .sd-ring { display: flex; } .sd-ring { flex-direction: column; align-items: center; text-align: center; padding: 15cqw 8cqw 8cqw; gap: 2.4cqw; color: #24211d; background: radial-gradient(120% 80% at 50% -10%, #FBDDB0 0%, rgba(251,221,176,0) 60%), linear-gradient(180deg, #FBEFDD 0%, #FBF6EE 52%); } .sd-eyebrow { margin: 0; font-size: 3.4cqw; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #E0872F; } .sd-time { font-size: 17cqw; font-weight: 800; letter-spacing: -.4cqw; line-height: 1.02; color: #1B2233; } .sd-time span { font-size: 5cqw; font-weight: 700; margin-left: 1.4cqw; color: #9AA0AC; vertical-align: .7em; } .sd-qricon { margin: 2cqw 0 1cqw; width: 22cqw; height: 22cqw; border-radius: 50%; display: grid; place-items: center; color: #4B49E6; background: #fff; box-shadow: 0 3cqw 8cqw rgba(75,73,230,.18); animation: sd-ring-pulse 1.6s ease-out infinite; } .sd-qricon svg { width: 11cqw; height: 11cqw; } .sd-title { margin: 0; font-size: 6.3cqw; font-weight: 800; line-height: 1.08; color: #1B2233; } .sd-title.big { font-size: 8.4cqw; } .sd-sub { margin: 0; font-size: 3.7cqw; color: #6A6157; line-height: 1.35; max-width: 82%; } .sd-btn { margin-top: 3cqw; padding: 3.4cqw 8cqw; border-radius: 999px; background: #4B49E6; color: #fff; font-weight: 800; font-size: 4.2cqw; box-shadow: 0 4cqw 10cqw rgba(75,73,230,.34); animation: sd-btn-pulse 1.6s ease-in-out infinite; } @keyframes sd-ring-pulse { 0% { box-shadow: 0 0 0 0 rgba(75,73,230,.34); } 70% { box-shadow: 0 0 0 9cqw rgba(75,73,230,0); } 100% { box-shadow: 0 0 0 0 rgba(75,73,230,0); } } @keyframes sd-btn-pulse { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1cqw); } } /* ---------- 2 & 3 · Scanner open ---------- */ .sd-screen[data-scan="1"] .sd-cam { display: block; } .sd-cam { background: radial-gradient(120% 60% at 50% -8%, rgba(247,180,120,.28) 0%, rgba(247,180,120,0) 55%), linear-gradient(180deg, #1C2340 0%, #141A30 60%, #0F1524 100%); background-color: #0F1524; } .sd-camtag { position: absolute; top: 8cqw; left: 6cqw; z-index: 3; display: inline-flex; align-items: center; gap: 1.8cqw; font-size: 3.1cqw; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.9); background: rgba(0,0,0,.28); border-radius: 999px; padding: 1.4cqw 3cqw 1.4cqw 2.2cqw; backdrop-filter: blur(2px); } .sd-camtag i { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: #FF5A5A; animation: sd-blink 1.1s steps(2) infinite; } @keyframes sd-blink { 50% { opacity: .25; } } .sd-screen[data-scan="2"] .sd-camtag i { background: #37C48A; animation: none; } .sd-scene { position: absolute; inset: 0; } .sd-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, #232B4A 0%, #1A2138 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } .sd-bed { position: absolute; left: 5%; bottom: 24%; width: 30%; height: 13%; border-radius: 3cqw 3cqw 1.4cqw 1.4cqw; background: linear-gradient(180deg, #3A4472 0%, #2C355C 100%); box-shadow: 0 3cqw 6cqw rgba(0,0,0,.3); } .sd-bed::after { content: ""; position: absolute; left: 8%; top: -26%; width: 40%; height: 42%; border-radius: 2cqw; background: #E9ECF6; opacity: .9; } /* the registered code on the far wall */ .sd-target { position: absolute; right: 12%; top: 30%; width: 28%; aspect-ratio: 1; height: auto; border-radius: 2.4cqw; padding: 2.4cqw; background: #EDEFF7; box-shadow: 0 0 0 1.2cqw #47507E, 0 5cqw 12cqw rgba(0,0,0,.4); display: grid; place-items: center; } .sd-qr { width: 100%; height: 100%; display: block; } .sd-qr svg { width: 100%; height: 100%; display: block; } .sd-check { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; opacity: 0; transform: scale(.4); transition: opacity .3s ease, transform .3s cubic-bezier(.2,1.4,.4,1); } .sd-check svg { width: 52%; height: 52%; } /* the walking figure */ .sd-walker { position: absolute; left: 10%; bottom: 20%; width: 18%; height: auto; z-index: 2; animation: sd-walk-x 3.1s cubic-bezier(.4,0,.5,1) forwards; } .sd-walk { animation: sd-walk-bob .5s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; } .sd-leg { transform-box: fill-box; transform-origin: 50% 8%; } .sd-leg-a { animation: sd-step .5s ease-in-out infinite; } .sd-leg-b { animation: sd-step .5s ease-in-out infinite reverse; } @keyframes sd-walk-x { from { left: 10%; } to { left: 46%; } } @keyframes sd-walk-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2.2%); } } @keyframes sd-step { 0%,100% { transform: rotate(19deg); } 50% { transform: rotate(-19deg); } } /* scanner reticle over the target */ .sd-reticle { position: absolute; right: 7.5%; top: 27%; width: 37%; aspect-ratio: 1; height: auto; z-index: 3; transition: transform .35s cubic-bezier(.2,1.3,.4,1); } .sd-reticle i { position: absolute; width: 22%; height: 16%; border: 1cqw solid #fff; opacity: .95; transition: border-color .3s ease; } .sd-reticle i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 1.6cqw 0 0 0; } .sd-reticle i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 1.6cqw 0 0; } .sd-reticle i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 1.6cqw; } .sd-reticle i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 1.6cqw 0; } .sd-screen[data-scan="1"] .sd-reticle { animation: sd-hunt 1.5s ease-in-out infinite; } @keyframes sd-hunt { 0%,100% { transform: scale(1.06); } 50% { transform: scale(.99); } } /* locked-on state */ .sd-screen[data-scan="2"] .sd-reticle i { border-color: #37C48A; } .sd-screen[data-scan="2"] .sd-target { box-shadow: 0 0 0 1.4cqw #37C48A, 0 5cqw 14cqw rgba(55,196,138,.4); } .sd-screen[data-scan="2"] .sd-check { opacity: 1; transform: scale(1); color: #1F9D6B; } /* ---------- 4 · Stay-awake check ---------- */ .sd-screen[data-scan="2"] .sd-awake { display: flex; } .sd-awake { flex-direction: column; align-items: center; text-align: center; padding: 16cqw 8cqw 8cqw; gap: 2.4cqw; color: #24211d; background: radial-gradient(120% 80% at 50% -10%, #FBDDB0 0%, rgba(251,221,176,0) 60%), linear-gradient(180deg, #FBEFDD 0%, #FBF6EE 52%); } .sd-hold { position: relative; width: 34cqw; height: 34cqw; margin: 2cqw 0; display: grid; place-items: center; color: #4B49E6; } .sd-holdring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .sd-holdring circle { fill: none; stroke-width: 5; } .sd-holdring circle:first-child { stroke: rgba(75,73,230,.18); } .sd-holdfill { stroke: #4B49E6; stroke-linecap: round; stroke-dasharray: 276.5; stroke-dashoffset: 276.5; } .sd-screen[data-scan="3"] .sd-holdfill { animation: sd-hold 1.5s ease-out forwards; } @keyframes sd-hold { to { stroke-dashoffset: 0; } } .sd-holdicon { width: 12cqw; height: 12cqw; } .sd-goodmorning { margin-top: 1cqw; font-size: 4.4cqw; font-weight: 800; color: #2E7D5B; opacity: 0; } .sd-screen[data-scan="3"] .sd-goodmorning { animation: sd-fadeup .5s ease .95s forwards; } @keyframes sd-fadeup { from { opacity: 0; transform: translateY(1.6cqw); } to { opacity: 1; transform: none; } } /* ------------------------------ Responsive ------------------------------ */ @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: var(--sp-6); } /* Content-first when stacked: headline + CTA come before the product shot. */ .features { grid-template-columns: 1fr 1fr; } .steps { grid-template-columns: 1fr 1fr; } .doc-layout { grid-template-columns: 1fr; } .toc { position: static; border-left: none; border-top: 1px solid var(--border); padding: var(--sp-4) 0 0; padding-left: 0; } } @media (max-width: 760px) { .nav-links { position: fixed; inset: 64px 0 auto 0; flex-direction: column; align-items: stretch; background: var(--bg); border-bottom: 1px solid var(--border); padding: var(--sp-4); gap: var(--sp-1); transform: translateY(-130%); transition: transform .22s ease; box-shadow: var(--shadow-lg); } .nav-links.open { transform: translateY(0); } .nav-links a { padding: var(--sp-4); font-size: 1.05rem; } .nav-toggle { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-left: auto; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); cursor: pointer; color: var(--text); } .nav .theme-toggle { margin-left: 0; } .steps { grid-template-columns: 1fr; } .features { grid-template-columns: 1fr; } .plans { grid-template-columns: 1fr; } .support-grid { grid-template-columns: 1fr; } /* Content-first, centered hero on phones; the product shot becomes a smaller supporting visual below the value proposition instead of filling the screen. */ .hero { padding-top: var(--sp-6); } .hero-grid { gap: var(--sp-7); } .hero-copy { text-align: center; } .hero h1 { margin-bottom: var(--sp-4); } .hero .lede, .hero-tagline { margin-left: auto; margin-right: auto; } .hero-tagline { max-width: 42ch; } .cta-row { flex-direction: column; align-items: center; gap: var(--sp-4); } .appstore { width: 100%; max-width: 300px; justify-content: center; padding-block: 0.85rem; } .compat-note { justify-content: center; } .device { width: min(244px, 66vw); } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 440px) { .footer-grid { grid-template-columns: 1fr; } .cta-row { gap: var(--sp-3); } } /* ========================================================================== v2 — "Bold refresh": animated dawn backdrop, scroll reveals, stat band, sticky mobile CTA, and the blog (index + article). Additive only — the markup above keeps working if these styles are ignored. ========================================================================== */ /* ---- Animated dawn aurora behind the hero ------------------------------- */ @keyframes tb-aurora { 0% { transform: translate3d(-4%, -2%, 0) scale(1); } 50% { transform: translate3d(4%, 3%, 0) scale(1.12); } 100% { transform: translate3d(-4%, -2%, 0) scale(1); } } .hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; top: -28%; right: -16%; width: 60vw; max-width: 720px; aspect-ratio: 1; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--sun) 55%, transparent) 0%, transparent 60%), radial-gradient(circle at 65% 35%, color-mix(in srgb, var(--sun-2) 45%, transparent) 0%, transparent 55%); filter: blur(34px); opacity: .55; border-radius: 50%; animation: tb-aurora 16s ease-in-out infinite; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero::after { opacity: .4; } } :root[data-theme="dark"] .hero::after { opacity: .4; } /* ---- Scroll reveal (progressive enhancement; hidden only when JS present) */ .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); } .js .reveal.is-visible { opacity: 1; transform: none; } .js .reveal.d1 { transition-delay: .07s; } .js .reveal.d2 { transition-delay: .14s; } .js .reveal.d3 { transition-delay: .21s; } .js .reveal.d4 { transition-delay: .28s; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } } /* ---- Honest "stat band" (facts, not fake reviews) ----------------------- */ .stat-band-wrap { padding-top: 0; } .stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); } .stat { background: var(--surface); padding: var(--sp-6) var(--sp-4); text-align: center; } .stat .stat-num { font-size: clamp(1.6rem, 4.5vw, 2.3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; background: linear-gradient(135deg, var(--brand), var(--sun-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat .stat-label { display: block; margin-top: var(--sp-3); color: var(--text-muted); font-size: .92rem; font-weight: 550; line-height: 1.35; } /* ---- Sticky mobile download bar ---------------------------------------- */ .mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-top: 1px solid var(--border); box-shadow: 0 -8px 28px rgba(20,28,48,.10); transform: translateY(120%); transition: transform .28s cubic-bezier(.2,.7,.2,1); } .mobile-cta.show { transform: translateY(0); } .mobile-cta .mc-text { display: flex; flex-direction: column; line-height: 1.2; } .mobile-cta .mc-text strong { font-size: .98rem; } .mobile-cta .mc-text span { font-size: .8rem; color: var(--text-muted); } .mobile-cta .appstore { margin-left: auto; padding: .55rem 1rem; } .mobile-cta .appstore svg { width: 22px; height: 22px; } @media (max-width: 760px) { .mobile-cta { display: flex; } /* keep the closing CTA / footer clear of the bar */ body.has-mobile-cta .site-footer { padding-bottom: calc(var(--sp-7) + 64px); } } @media (prefers-reduced-motion: reduce) { .mobile-cta { transition: none; } } /* ---- Glow ring around the featured plan & hero device ------------------ */ .plan.featured::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1; background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 70%, transparent), color-mix(in srgb, var(--sun-2) 60%, transparent)); opacity: .5; filter: blur(10px); } /* ========================================================================== BLOG ========================================================================== */ /* Blog hero */ .blog-hero { padding: clamp(2.5rem, 7vw, 4.5rem) 0 var(--sp-6); position: relative; overflow: hidden; } .blog-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 60% at 80% -10%, color-mix(in srgb, var(--sun) 20%, transparent), transparent 60%), radial-gradient(70% 60% at 0% 0%, color-mix(in srgb, var(--sky) 34%, transparent), transparent 60%); } .blog-hero h1 { margin-bottom: var(--sp-3); } .blog-hero .lede { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--text-muted); max-width: 60ch; } /* Category filter chips */ .blog-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-5) 0 0; } .filter-chip { appearance: none; cursor: pointer; font: inherit; font-weight: 600; font-size: .92rem; padding: var(--sp-2) var(--sp-4); border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted); transition: background .15s ease, color .15s ease, border-color .15s ease; } .filter-chip:hover { color: var(--text); background: var(--surface-2); } .filter-chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } /* Post grid + cards */ .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); margin-top: var(--sp-6); } .post-grid.featured-row { grid-template-columns: 1fr; margin-bottom: var(--sp-6); } .post-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: var(--text); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); color: var(--text); } .post-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } .post-card .post-body { padding: var(--sp-5) var(--sp-5) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; } .post-card .post-cat { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); } .post-card h3 { margin: 0; font-size: 1.2rem; line-height: 1.25; } .post-card p { margin: 0; color: var(--text-muted); font-size: .96rem; } .post-card .post-meta { margin-top: auto; padding-top: var(--sp-2); color: var(--text-muted); font-size: .85rem; display: flex; gap: var(--sp-3); align-items: center; } .post-card .post-meta .read { display: inline-flex; align-items: center; gap: 5px; } /* Featured card: media beside copy on wide screens */ .post-card.is-featured { flex-direction: row; } .post-card.is-featured .post-cover { width: 46%; min-height: 280px; } .post-card.is-featured .post-body { justify-content: center; padding: var(--sp-7); } .post-card.is-featured h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); } .post-card.is-featured p { font-size: 1.02rem; } /* Generated gradient covers (no stock photos — brand-built art) */ .post-cover { position: relative; aspect-ratio: 16 / 10; overflow: hidden; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--c1, var(--brand)), var(--c2, var(--brand-ink))); } .post-cover::after { content: ""; position: absolute; width: 70%; aspect-ratio: 1; right: -12%; top: -28%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.32), transparent 65%); } .post-cover svg { width: 34%; height: auto; opacity: .96; position: relative; z-index: 1; filter: drop-shadow(0 6px 16px rgba(0,0,0,.22)); } .cover-sleep { --c1: #33518F; --c2: #6A4B8A; } .cover-routine { --c1: #E97E67; --c2: #F2A65A; } .cover-wakecheck { --c1: #2E7D5B; --c2: #33518F; } .cover-focus { --c1: #4C63B6; --c2: #26406F; } /* ---- Single article page ----------------------------------------------- */ .article { padding-bottom: var(--sp-8); } .article-head { max-width: 760px; margin: 0 auto; padding: clamp(2rem, 5vw, 3rem) 0 var(--sp-5); text-align: center; } .article-head .post-cat { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-bottom: var(--sp-3); } .article-head h1 { font-size: clamp(1.9rem, 5vw, 3rem); margin-bottom: var(--sp-4); } .article-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); justify-content: center; color: var(--text-muted); font-size: .92rem; } .article-meta .dot-sep::before { content: "·"; margin-right: var(--sp-4); } .article-cover { max-width: 940px; margin: 0 auto var(--sp-7); border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 21 / 9; box-shadow: var(--shadow-lg); } .article-cover .post-cover { width: 100%; height: 100%; aspect-ratio: auto; } .article-cover .post-cover svg { width: 16%; } .article-body { max-width: 720px; margin: 0 auto; font-size: 1.075rem; } .article-body h2 { margin-top: var(--sp-7); font-size: 1.55rem; scroll-margin-top: 84px; } .article-body h3 { margin-top: var(--sp-5); font-size: 1.2rem; } .article-body p, .article-body li { color: var(--text); } .article-body ul, .article-body ol { max-width: var(--measure); } .article-body li { margin-bottom: var(--sp-2); } .article-body blockquote { margin: var(--sp-6) 0; padding: var(--sp-2) 0 var(--sp-2) var(--sp-5); border-left: 3px solid var(--brand); color: var(--text); font-size: 1.2rem; font-weight: 550; font-style: normal; } .article-body .lead { font-size: 1.2rem; color: var(--text-muted); } .article-body .key-takeaway { background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--border)); border-radius: var(--radius); padding: var(--sp-5); margin: var(--sp-6) 0; } .article-body .key-takeaway h3 { margin-top: 0; } .article-body .key-takeaway p:last-child, .article-body .key-takeaway ul:last-child { margin-bottom: 0; } /* In-article CTA + related posts + back link */ .article-cta { max-width: 760px; margin: var(--sp-8) auto 0; text-align: center; background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border)); border-radius: var(--radius-lg); padding: var(--sp-7); } .article-cta h2 { font-size: 1.5rem; margin-bottom: var(--sp-3); } .article-cta .cta-row { justify-content: center; margin-top: var(--sp-5); } .related { border-top: 1px solid var(--border); margin-top: var(--sp-8); padding-top: var(--sp-7); } .related h2 { text-align: center; font-size: 1.4rem; } .back-link { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text-muted); text-decoration: none; font-weight: 600; } .back-link:hover { color: var(--brand); } .back-link svg { width: 18px; height: 18px; } /* Blog responsive */ @media (max-width: 900px) { .post-grid { grid-template-columns: 1fr 1fr; } .stat-band { grid-template-columns: 1fr 1fr; } .stat-band .stat:nth-child(-n+2) { border-bottom: 1px solid var(--border); } } @media (max-width: 760px) { .post-grid { grid-template-columns: 1fr; } .post-card.is-featured { flex-direction: column; } .post-card.is-featured .post-cover { width: 100%; min-height: 0; aspect-ratio: 16 / 9; } .post-card.is-featured .post-body { padding: var(--sp-6); } .article-cover { border-radius: var(--radius); aspect-ratio: 16 / 9; } } /* ========================================================================== Guides — buying guides & comparisons (/guides/) ========================================================================== */ /* Transparency: we make one of the apps being compared. Say so, visibly. */ .disclosure { max-width: 760px; margin: 0 auto var(--sp-5); display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4) var(--sp-5); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .92rem; color: var(--text-muted); line-height: 1.55; } .disclosure svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--brand); } .disclosure strong { color: var(--text); } /* The short, quotable answer. Kept near the top of every guide. */ .answer-box { max-width: 760px; margin: 0 auto var(--sp-6); padding: var(--sp-5) var(--sp-6); background: var(--brand-soft); border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: var(--radius-sm); } .answer-box h2 { margin: 0 0 var(--sp-3); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); } .answer-box p { margin: 0 0 var(--sp-3); font-size: 1.06rem; line-height: 1.6; } .answer-box p:last-child { margin-bottom: 0; } /* Table of contents */ .toc { max-width: 760px; margin: 0 auto var(--sp-6); padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); } .toc h2 { margin: 0 0 var(--sp-3); font-size: 1rem; } .toc ol { margin: 0; padding-left: 1.3em; color: var(--text-muted); } .toc li { margin-bottom: var(--sp-2); } .toc li:last-child { margin-bottom: 0; } /* Comparison table — scrolls inside itself, never breaks the page */ .cmp-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--sp-5) 0 var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } .cmp-table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 640px; } .cmp-table caption { text-align: left; padding: var(--sp-4) var(--sp-5) 0; color: var(--text-muted); font-size: .88rem; } .cmp-table th, .cmp-table td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; } .cmp-table thead th { font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; background: var(--surface-2); position: sticky; top: 0; } .cmp-table tbody th { font-weight: 600; color: var(--text); white-space: nowrap; } .cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0; } .cmp-table td.yes { color: var(--good); font-weight: 600; } .cmp-table td.no { color: var(--text-muted); } .cmp-table .col-us { background: var(--brand-soft); } .table-note { font-size: .86rem; color: var(--text-muted); margin: 0 0 var(--sp-6); } /* Individual app entries */ .pick { margin: var(--sp-6) 0; padding: var(--sp-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .pick > h3 { margin-top: 0; } .pick-rank { display: inline-block; margin-bottom: var(--sp-2); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); } .pick-for { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--surface-2); border-radius: var(--radius-sm); font-size: .95rem; } .pick-for strong { color: var(--text); } .pick-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding: 0; list-style: none; } .pick-meta li { font-size: .82rem; color: var(--text-muted); padding: 4px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; } /* Honest two-column strengths / limits */ .pro-con { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin: var(--sp-4) 0 0; } .pro-con h4 { margin: 0 0 var(--sp-3); font-size: .84rem; letter-spacing: .06em; text-transform: uppercase; } .pro-con ul { margin: 0; padding-left: 1.15em; font-size: .95rem; color: var(--text-muted); } .pro-con li { margin-bottom: var(--sp-2); } .pros h4 { color: var(--good); } .cons h4 { color: var(--sun-2); } @media (max-width: 620px) { .pro-con { grid-template-columns: 1fr; gap: var(--sp-4); } } /* Final recommendation */ .verdict { max-width: 760px; margin: var(--sp-7) auto 0; padding: var(--sp-6); border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border-strong); } .verdict h2 { margin-top: 0; } .verdict dl { margin: 0; } .verdict dt { font-weight: 700; margin-top: var(--sp-4); } .verdict dt:first-child { margin-top: 0; } .verdict dd { margin: var(--sp-1) 0 0; color: var(--text-muted); } /* Sources + review date */ .sources { max-width: 760px; margin: var(--sp-7) auto 0; font-size: .9rem; } .sources h2 { font-size: 1.05rem; } .sources ol { padding-left: 1.3em; color: var(--text-muted); } .sources li { margin-bottom: var(--sp-2); word-break: break-word; } .reviewed { max-width: 760px; margin: var(--sp-5) auto 0; padding-top: var(--sp-4); border-top: 1px solid var(--border); font-size: .88rem; color: var(--text-muted); } /* Guides hub */ .guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); margin-top: var(--sp-6); } @media (max-width: 760px) { .guide-grid { grid-template-columns: 1fr; } } .guide-card { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .guide-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); color: var(--text); } .guide-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } .guide-card .g-kicker { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); } .guide-card h3 { margin: 0; font-size: 1.12rem; line-height: 1.3; } .guide-card p { margin: 0; font-size: .94rem; color: var(--text-muted); } @media (prefers-reduced-motion: reduce) { .guide-card, .guide-card:hover { transition: none; transform: none; } } /* ========================================================================== Breadcrumbs + product screenshots ========================================================================== */ .crumbs { max-width: 760px; margin: var(--sp-5) auto 0; } .crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; font-size: .88rem; color: var(--text-muted); } .crumbs li { display: flex; align-items: center; gap: var(--sp-2); } .crumbs li + li::before { content: "/"; color: var(--border-strong); } .crumbs a { color: var(--text-muted); text-decoration: none; } .crumbs a:hover { color: var(--brand); text-decoration: underline; } .crumbs [aria-current="page"] { color: var(--text); } .shots { max-width: 760px; margin: var(--sp-8) auto 0; } .shots-row { display: flex; gap: var(--sp-4); justify-content: center; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--sp-3); } .shots-row img { width: 100%; max-width: 260px; height: auto; flex: 0 0 auto; border-radius: 22px; border: 1px solid var(--border); box-shadow: var(--shadow); background: var(--surface); } .shots figcaption { margin-top: var(--sp-3); text-align: center; font-size: .88rem; color: var(--text-muted); } @media (max-width: 620px) { .shots-row { justify-content: flex-start; } .shots-row img { max-width: 210px; } } /* ========================================================================== TrialBell — real product screenshot filling the hero phone frame (no animated demo; the screenshot does the talking). ========================================================================== */ .device .screen.shot-screen { background: #0D0F14; display: block; } .device .screen.shot-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .hero-art .caption { margin-top: var(--sp-4); text-align: center; font-size: .9rem; color: var(--text-muted); } /* ========================================================================== TrialBell — pre-launch waitlist CTA + explicit pricing ========================================================================== */ .cta-block { max-width: 480px; } .center .cta-block { margin-inline: auto; } .waitlist { display: flex; gap: var(--sp-3); flex-wrap: wrap; } .waitlist input[type="email"] { flex: 1 1 220px; min-width: 0; padding: 0.85rem 1rem; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); } .waitlist input[type="email"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--brand); } .waitlist button { flex: 0 0 auto; padding: 0.85rem 1.4rem; font: inherit; font-weight: 650; color: var(--on-brand); background: var(--brand); border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: background .15s ease, transform .08s ease; } .waitlist button:hover { background: var(--brand-ink); } .waitlist button:active { transform: translateY(1px); } .waitlist button:disabled { opacity: .55; cursor: default; } .waitlist .hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .waitlist-note { margin: var(--sp-3) 0 0; font-size: .88rem; color: var(--text-muted); } .waitlist-note[data-waitlist-status] { font-weight: 600; color: var(--text); } .waitlist-note[data-tone="success"] { color: var(--good); } .waitlist-note[data-tone="error"] { color: #C4443B; } :root[data-theme="dark"] .waitlist-note[data-tone="error"], :root:not([data-theme="light"]) .waitlist-note[data-tone="error"] { color: #F98B82; } .cta-meta { margin: var(--sp-4) 0 0; font-size: .95rem; color: var(--text-muted); } .cta-meta strong { color: var(--text); font-weight: 650; } .center .waitlist { justify-content: center; } .center .cta-meta, .center .waitlist-note { text-align: center; } .plan-price { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; margin: .2rem 0 var(--sp-2); } .plan-price span { font-size: .95rem; font-weight: 600; color: var(--text-muted); letter-spacing: 0; } @media (max-width: 420px) { .waitlist button { flex: 1 1 100%; } }