/* ═══════════════════════════════════════════ KLOSYT — Aurora Glass Blue→teal base (matched to the app icon) with a bright sky-halo behind the hero and a fixed blue/cyan aurora wash behind content. Pure gradients (no filter:blur, no animation) — GPU-cheap and safe for iOS Safari scroll. Only the nav uses backdrop-filter; stacking many was what broke iOS compositor in PR #62/#63. ═══════════════════════════════════════════ */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ --panel:rgba(255,255,255,.065); --panel-hover:rgba(255,255,255,.11); --border:rgba(255,255,255,.12); --border-hover:rgba(255,255,255,.22); /* Resting elevation for content cards (was hover-only): soft drop + hairline contact + inset top-highlight, so cards read as surfaces over the aurora instead of vanishing. GPU-cheap static box-shadow. */ --shadow-1:0 6px 20px -8px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08); --text-1:#fff; --text-2:rgba(255,255,255,.78); --text-3:rgba(255,255,255,.55); --accent-color:#5ac8fa; --accent-warm:#ffcc00; --radius:20px; --radius-lg:28px; --ease:cubic-bezier(.16,1,.3,1); /* SF Pro Display for marketing-scale titles so the site reads as a first-party extension of the app (which uses San Francisco throughout). `-apple-system` and `BlinkMacSystemFont` resolve to SF on every Apple device; `system-ui` catches Linux/Windows system UIs; generic sans-serif is the final fallback. Display gets heavier weights and tighter tracking applied at the rule level. */ --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI",sans-serif; --font-body:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,sans-serif; color-scheme:dark light; } /* Base painted on : fills Safari's chrome, overscroll zone, and safe-area insets uniformly. A bright blue sky-halo behind the hero sits over a 180deg blue→teal wash that mirrors the app icon's gradient. */ html{ background:#06224f; background: radial-gradient(ellipse 1100px 760px at 50% -10%, #16498f 0%, transparent 60%), linear-gradient(180deg, #06224f 0%, #073a5f 36%, #06485d 64%, #053a48 100%); } @media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} body{ font-family:var(--font-body); -webkit-font-smoothing:antialiased; color:var(--text-1); background:transparent; min-height:100svh; position:relative; overflow-x:hidden; } /* Aurora layer: a blue glow at the top edge and a cyan glow at the bottom edge, echoing the icon's blue→cyan gradient. Pure radial gradients (no filter:blur — the browser rasterizes these once). position:fixed keeps them behind scrolling content without inflating page height, and pointer-events:none keeps them out of hit-testing. */ body::before{ content:''; position:fixed; inset:0; pointer-events:none; background: radial-gradient(ellipse 1400px 800px at 50% -8%, rgba(34,140,255,.30) 0%, transparent 60%), radial-gradient(circle 600px at 16% 30%, rgba(34,140,255,.08) 0%, transparent 70%), radial-gradient(circle 820px at 50% 50%, rgba(90,200,250,.05) 0%, transparent 72%), radial-gradient(ellipse 1400px 800px at 50% 108%, rgba(2,196,212,.30) 0%, transparent 60%), radial-gradient(circle 640px at 84% 72%, rgba(2,196,212,.10) 0%, transparent 65%); z-index:0; } /* Noise overlay — breaks 8-bit gradient banding in the radial washes. Inline SVG data URI, no extra request. Kept pointer-events:none and z-index:0 so it never blocks interaction; very low opacity so it reads as atmospheric texture rather than grain. */ body::after{ content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.06; mix-blend-mode:soft-light; background-image:url("data:image/svg+xml;utf8,"); background-size:160px 160px; } body > *{position:relative;z-index:1} /* ── Skip to content ── */ .skip-link{ position:absolute;top:-100%;left:50%;transform:translateX(-50%); padding:12px 24px;background:var(--text-1);color:#050508; border-radius:100px;font-weight:600;font-size:.9rem; text-decoration:none;z-index:200;transition:top .2s; } .skip-link:focus{top:16px} @media(prefers-color-scheme:light){.skip-link{color:#fff}} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } :focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:2px;border-radius:8px} @media(prefers-color-scheme:light){:focus-visible{outline-color:rgba(0,0,0,.85)}} /* ── Panel utility (was .glass) ── Solid translucent fill + hairline border. No backdrop-filter here: native scroll stays smooth even with many panels. */ .glass{ background:var(--panel); border:1px solid var(--border); } /* Content cards carry resting elevation (their :hover rules lift further). Scoped to content cards only — .glass is shared by .nav-bar/.price-card/ .cta-panel, which each define their own full box-shadow. */ .feature-card,.card,.wn-card{box-shadow:var(--shadow-1)} /* ── Layout ── */ .wrap{ width:100%;max-width:1440px;margin:0 auto; padding-left:max(1.5rem,4vw,env(safe-area-inset-left)); padding-right:max(1.5rem,4vw,env(safe-area-inset-right)); } .section{padding:5rem 0} .tc{text-align:center} /* ── Nav ── The only backdrop-filter element on the page. A single glass layer is cheap on the compositor; the 12-element version in PR #62 was what broke iOS scroll. @supports fallback keeps a solid navy tint for browsers without backdrop-filter. */ .nav-wrap{ position:fixed;top:calc(env(safe-area-inset-top) + 16px);left:0;width:100%; display:flex;justify-content:center;z-index:100; padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); pointer-events:none; } .nav-bar{ pointer-events:auto; width:90%;max-width:720px;height:52px; border-radius:100px; background:rgba(255,255,255,.07); backdrop-filter:blur(40px) saturate(1.6); -webkit-backdrop-filter:blur(40px) saturate(1.6); border:1px solid rgba(255,255,255,.14); box-shadow:0 10px 40px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08); display:flex;justify-content:space-between;align-items:center; padding:0 1.25rem; transition:background .3s var(--ease),border-color .3s var(--ease); overflow:visible; } .nav-bar:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .nav-bar{background:rgba(10,24,56,.92)} .nav-bar:hover{background:rgba(14,32,72,.98)} } .nav-brand{ display:flex;align-items:center;gap:8px; text-decoration:none;color:var(--text-1); font-weight:700;font-size:1.05rem;letter-spacing:-.02em; } .nav-icon{height:28px;width:28px;border-radius:7px} .nav-links{display:flex;align-items:center;gap:.5rem;overflow:visible;flex-shrink:1;min-width:0} .nav-links a{ display:inline-flex;align-items:center;gap:4px; min-height:44px;padding:0 10px; text-decoration:none;color:var(--text-2); font-weight:500;font-size:.9rem; transition:color .2s; } .nav-links a:hover{color:var(--text-1)} .nav-links a svg{flex-shrink:0} /* Always-visible primary CTA in the floating nav. Cyan (in-palette) so it reads primary against the two ghost links without touching the reserved gold. Zero JS. Specificity beats `.nav-links a` so padding/color win. */ .nav-links a.nav-cta{ color:#5ac8fa;font-weight:600; padding:0 16px;margin-left:.15rem;border-radius:100px; background:linear-gradient(135deg,rgba(90,200,250,.22),rgba(0,122,255,.18)); border:1px solid rgba(90,200,250,.4); box-shadow:0 4px 16px rgba(90,200,250,.18); } .nav-links a.nav-cta:hover{ color:#fff;border-color:rgba(90,200,250,.6); background:linear-gradient(135deg,rgba(90,200,250,.3),rgba(0,122,255,.24)); } /* ── Hero ── */ .hero{ display:flex;align-items:center;justify-content:center; text-align:center; padding:calc(112px + env(safe-area-inset-top)) calc(1.5rem + env(safe-area-inset-right)) calc(64px + env(safe-area-inset-bottom)) calc(1.5rem + env(safe-area-inset-left)); } .hero-inner{max-width:680px} .hero-icon{ width:160px;height:160px;border-radius:36px; /* Dual bloom — blue dominant with a cyan halo underneath, matching the app icon's blue→cyan gradient. */ box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 110px rgba(34,140,255,.36), 0 0 180px rgba(2,196,212,.20), 0 0 0 1px rgba(255,255,255,.06); margin-bottom:2rem; } .hero h1{ font-family:var(--font-display); font-size:clamp(2.8rem,7vw,5rem); /* Heavy weight + tight tracking is the Apple.com hero recipe. SF Pro Display has optical sizing baked in at these sizes, so heavy weights render crisply without going shouty. */ font-weight:700;letter-spacing:-.035em;line-height:1.08; margin-bottom:1.25rem; padding-bottom:.1em; text-wrap:balance; font-feature-settings:"kern","liga","ss01"; /* Gradient text wash — cooler at top, warmer at bottom for the gold tie-in. */ background:linear-gradient(170deg,#fff 0%,#dbecff 60%,#9fd9ff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } .hero h1 em{font-style:italic;font-weight:600} @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .hero h1{color:#fff;-webkit-text-fill-color:initial} } .hero-sub{ font-size:clamp(1rem,2.2vw,1.2rem); color:var(--text-2);line-height:1.65; margin-bottom:2.5rem; max-width:44ch;margin-left:auto;margin-right:auto; } .badge-link{display:inline-block;transition:transform .2s,opacity .2s;opacity:.95} .badge-link:hover{opacity:1;transform:translateY(-2px)} .badge-img{height:48px} .hero-devices{margin-top:1.25rem;font-size:.85rem;color:var(--text-3);font-weight:500;letter-spacing:.02em} /* Brand wordmark sitting directly under the hero icon — like the app-label below an iOS home-screen icon, but scaled up for marketing. Sits tight to the icon (negative top margin offsets the icon's 2rem bottom), and leaves room above the tagline H1. */ .hero-wordmark{ font-family:var(--font-display); font-size:clamp(1.5rem,3.4vw,2rem); font-weight:700;letter-spacing:-.02em;line-height:1.1; color:var(--text-1); margin-top:-.75rem;margin-bottom:1.25rem; text-wrap:balance; } /* Hero eyebrow — brand name demoted to a small uppercase label above the benefit H1 (kills the old triple "Klosyt"). Same tracked-caps treatment as the feature group labels, but standalone (no flanking rules) and tight to the icon. */ .hero-eyebrow{ font-family:var(--font-body); font-size:.8rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--text-3); margin:-.25rem 0 1rem; } /* Hero trust strip — a quiet credential line under the App Store badge. Wraps as whole segments on narrow/expanded-locale viewports. */ .hero-trust{ display:flex;flex-wrap:wrap;justify-content:center;gap:0 .5ch; margin:1.5rem auto 0;max-width:46ch; font-size:.85rem;font-weight:500;letter-spacing:.02em;color:var(--text-2); } /* Hero product shot — single column, centered, by default (locale-safe for +30% German/Russian). Reuses the screenshot strip's alpha-tracking drop-shadow; no backdrop-filter, no blur. */ .hero-shot{margin:2.5rem 0 0} .hero-shot img{ width:100%;max-width:300px;height:auto;display:block;margin:0 auto; filter:drop-shadow(0 30px 30px rgba(0,0,0,.4)); } /* Wide desktop: split the hero into copy (left) + device (right) so the product shot lands above the fold. :has() gates it to the hero-shot layout only. Narrow/expanded locales stay single-column above. */ @media(min-width:900px){ .hero-inner:has(.hero-shot){ max-width:1060px; display:grid;grid-template-columns:1fr minmax(260px,340px); align-items:center;gap:3.5rem;text-align:left; } .hero-inner:has(.hero-shot) .hero-copy{text-align:left} .hero-inner:has(.hero-shot) .hero-sub{margin-left:0;margin-right:0;max-width:42ch} .hero-inner:has(.hero-shot) .hero-trust{justify-content:flex-start;margin-left:0;margin-right:0} .hero-inner:has(.hero-shot) .hero-shot{margin-top:0;align-self:center} } @media(prefers-color-scheme:light){ .hero-shot img{filter:drop-shadow(0 24px 36px rgba(20,40,70,.22))} } /* ── Steps (support page Getting Started) ── */ .steps{display:flex;align-items:flex-start;padding:2.5rem;border-radius:var(--radius);gap:0} .step{flex:1;display:flex;gap:1rem;align-items:flex-start;padding:0 1.5rem} .step h3{font-size:1rem;font-weight:700;margin-bottom:.3rem;letter-spacing:-.01em} .step p{font-size:.88rem;color:var(--text-2);line-height:1.5} .step-n{ width:36px;height:36px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; font-weight:700;font-size:.95rem; background:rgba(0,122,255,.18);color:#7fb6ff; border:1px solid rgba(0,122,255,.3); box-shadow:0 0 24px rgba(0,122,255,.18); } .step-div{width:1px;height:56px;flex-shrink:0;align-self:center;background:var(--border)} /* ── Section divider — a centered glint; signature flourish. ── */ .divider,hr.divider{ width:100%;max-width:220px;height:1px; margin:0 auto;border:0; background:linear-gradient(90deg,transparent,rgba(90,200,250,.65),rgba(255,204,0,.5),transparent); opacity:.9; position:relative; } .divider::after{ content:''; position:absolute;left:50%;top:50%; width:7px;height:7px;border-radius:50%; transform:translate(-50%,-50%); background:radial-gradient(circle,#fff 0%,rgba(90,200,250,.9) 55%,rgba(90,200,250,0) 100%); box-shadow:0 0 14px rgba(90,200,250,.7),0 0 28px rgba(255,204,0,.4); } /* ── Section title ── */ .sec-head{ text-align:center; margin:0 auto 3rem; max-width:680px; padding:0 1rem; } .sec-title{ font-family:var(--font-display); font-size:clamp(2rem,4.5vw,3rem); font-weight:700;letter-spacing:-.035em;line-height:1.1; text-wrap:balance; color:var(--text-1); text-align:center; margin:0 auto 2.5rem; padding-bottom:.08em; font-feature-settings:"kern","liga","ss01"; } .sec-title em{font-style:italic;font-weight:600;color:var(--accent-color)} /* Inside .sec-head the eyebrow+title are spaced together — drop the default bottom margin so the pairing is tight. */ .sec-head .sec-title{margin-bottom:0} /* Support page H1 gets the hero-style gradient wash. */ h1.sec-title{ font-size:clamp(2.5rem,6vw,4rem); background:linear-gradient(170deg,#fff 0%,#dbecff 60%,#9fd9ff 100%); -webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent; margin-bottom:1rem; } /* ── Bottom CTA — framed panel, differentiated from hero ── */ .bottom-cta{padding:5rem 0 6rem} .cta-panel{ max-width:640px;margin:0 auto; padding:3.5rem 2.5rem; border-radius:var(--radius-lg); text-align:center; /* Dual background-clip paints a subtle gradient frame: a translucent fill over padding-box, a blue→gold sheen over border-box. */ background: linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,.02)) padding-box, linear-gradient(135deg,rgba(90,200,250,.45),rgba(255,255,255,.06) 35%,rgba(255,255,255,.06) 65%,rgba(212,165,40,.4)) border-box; border:1px solid transparent; box-shadow:0 30px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); } .bottom-cta h2{ font-family:var(--font-display); font-size:clamp(2rem,4.6vw,3rem); font-weight:700;letter-spacing:-.035em;line-height:1.1; margin-bottom:.85rem; padding-bottom:.08em; text-wrap:balance; } .bottom-cta h2 em{font-style:italic;font-weight:600;color:var(--accent-color)} .bottom-cta p{ color:var(--text-2);font-size:1rem;line-height:1.55; margin:0 auto 2rem;max-width:480px; } /* Proof chips — verifiable first-party facts (not a fabricated rating). Flat .lang-row-style pills; cyan glint, never gold (gold stays on the CTA frame around them). Tokens inherit both color schemes for free. */ .proof-row{ display:flex;flex-wrap:wrap;justify-content:center; gap:8px;margin:0 auto 2rem;max-width:520px;padding:0;list-style:none; } .proof-chip{ display:inline-flex;align-items:center;gap:8px; padding:7px 14px;border-radius:100px; background:var(--panel);border:1px solid var(--border); color:var(--text-2);font-size:.78rem;font-weight:600;letter-spacing:.01em; text-wrap:balance; } .proof-chip::before{ content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0; background:var(--accent-color);box-shadow:0 0 8px -1px var(--accent-color); } /* ── Section subhead — one-line intro under a section title (used on the Features H2 so the card wall gets a sentence of context first). ── */ .sec-sub{ margin:.75rem auto 0;max-width:50ch; font-size:1rem;line-height:1.6;color:var(--text-2);text-align:center; } /* ── What's New ribbon (4-up strip under the hero) ── */ .whats-new .sec-head{ display:flex;flex-direction:column;align-items:center;gap:.9rem; } .whats-new-badge{ display:inline-block; padding:.3rem .7rem;border-radius:999px; font-family:var(--font-body); font-size:.72rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase; color:#ffcc00;background:rgba(255,204,0,.12); border:1px solid rgba(255,204,0,.28); } .whats-new-grid{ display:grid;grid-template-columns:repeat(2,1fr); gap:.85rem;max-width:1100px;margin:0 auto; } @media(min-width:900px){ .whats-new-grid{grid-template-columns:repeat(4,1fr)} } .wn-card{ padding:1.3rem 1.15rem;border-radius:var(--radius); display:flex;flex-direction:column;gap:.55rem; /* justify-content:center so a short description (e.g. "Share Tab" at 15 words) doesn't leave empty space below while its row neighbors — which stretch the card to match row height — run twice as long. */ justify-content:center; --card-accent:var(--c, rgba(255,255,255,.22)); transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease); } .wn-card:hover{ background:var(--panel-hover); border-color:var(--border-hover); /* Matches .feature-card:hover translateY(-4px) — consistency when the eye travels between the two card grids stacked directly above and below each other. */ transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.28), 0 0 50px -20px var(--card-accent); } .wn-icon{font-size:1.55rem;line-height:1;color:var(--c)} .wn-card h3{font-size:1rem;font-weight:700;letter-spacing:-.01em} .wn-card p{font-size:.9rem;color:var(--text-2);line-height:1.45} /* ── Feature groups — subheads that split the 14-card wall into 3 themed clusters so the eye gets rest points instead of one uniform grid. ── */ .feat-group-label{ max-width:1280px;margin:3rem auto 1.5rem; display:flex;align-items:center;gap:1rem; font-family:var(--font-body); font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--text-2); } /* Flanking hairlines turn the label into a chapter divider so the 14-card wall reads as three clusters, not one uniform grid. */ .feat-group-label::before,.feat-group-label::after{content:'';flex:1;height:1px} .feat-group-label::before{background:linear-gradient(90deg,transparent,var(--border-hover))} .feat-group-label::after{background:linear-gradient(90deg,var(--border-hover),transparent)} .feat-group-label:first-of-type{margin-top:0} /* ── Features grid ── */ .features-grid{ display:grid;grid-template-columns:repeat(2,1fr); gap:1rem;max-width:960px;margin:0 auto; } @media(min-width:1100px){ .features-grid{grid-template-columns:repeat(4,1fr);max-width:1280px} } .feature-card{ display:flex;gap:1.1rem;align-items:flex-start; padding:1.5rem;border-radius:var(--radius); /* Per-card accent pulled from the inline `--c` the card already sets on its icon span; falls back to neutral if absent. */ --card-accent:var(--c, rgba(255,255,255,.22)); transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease); } .feature-card:hover{ background:var(--panel-hover); border-color:var(--border-hover); transform:translateY(-4px); /* Colored halo matches the icon hue on each card. */ box-shadow:0 20px 50px rgba(0,0,0,.3), 0 0 60px -20px var(--card-accent); } .feature-icon{ width:48px;height:48px;border-radius:14px;flex-shrink:0; display:flex;align-items:center;justify-content:center; font-size:1.3rem; background:var(--bg);color:var(--c); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 8px 20px -8px var(--c); } .feature-icon svg,.pl-ico svg,.card-ico svg{display:block} /* Inline Apple logo in "Real-Time Apple Weather" inherits the parent text color via currentColor so it reads in both light (dark brown on cream) and dark (white on navy) modes. The JS builds the logo with a gradient fallback; this rule overrides the gradient stops to track text color. */ [data-i18n="pricing.weatherData"] svg stop{stop-color:currentColor} .feature-text{min-width:0} .feature-text h3{font-size:1.12rem;font-weight:700;margin-bottom:.4rem;letter-spacing:-.01em;text-wrap:balance} .feature-text p{font-size:.88rem;color:var(--text-2);line-height:1.55} /* Legacy .card (support page FAQ cards) */ .card{ padding:2rem;border-radius:var(--radius); --card-accent:var(--c, rgba(255,255,255,.22)); transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease); } .card:hover{ background:var(--panel-hover); border-color:var(--border-hover); transform:translateY(-4px); box-shadow:0 20px 50px rgba(0,0,0,.3), 0 0 60px -20px var(--card-accent); } .card-ico{ width:48px;height:48px;border-radius:14px; display:flex;align-items:center;justify-content:center; font-size:1.25rem;margin-bottom:1.25rem; background:var(--bg);color:var(--c); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 8px 20px -8px var(--c); } .card h3{font-size:1.05rem;font-weight:700;margin-bottom:.5rem;letter-spacing:-.01em} .card p{font-size:.88rem;color:var(--text-2);line-height:1.55} /* ── Pricing — premium card. Amber/gold halo kept as the page's warm accent, complementary to the blue→cyan hero + background. Softened so the hero stays dominant. ── */ .price-card{ max-width:520px;width:100%;margin:0 auto; border-radius:var(--radius-lg);overflow:hidden; background: linear-gradient(rgba(255,255,255,.06),rgba(255,255,255,.03)) padding-box, linear-gradient(135deg,rgba(255,204,0,.55),rgba(255,149,0,.2) 30%,rgba(255,255,255,.08) 60%,rgba(255,204,0,.4)) border-box; border:1px solid transparent; /* Second shadow acts as a wide amber halo without needing a wrapper. */ box-shadow: 0 30px 80px rgba(0,0,0,.35), 0 0 120px -20px rgba(255,204,0,.18); transition:transform .3s var(--ease),box-shadow .3s var(--ease); } .price-card:hover{ transform:translateY(-3px); box-shadow: 0 40px 100px rgba(0,0,0,.45), 0 0 140px -20px rgba(255,204,0,.3); } .price-head{padding:2.5rem 2rem 2rem;text-align:center;border-bottom:1px solid var(--border)} .price-badge{ display:inline-flex;align-items:center;gap:6px; padding:6px 16px; background:linear-gradient(135deg,rgba(255,204,0,.22),rgba(255,149,0,.18)); border:1px solid rgba(255,204,0,.4); border-radius:100px;font-size:.85rem;font-weight:700; color:#ffd84a;letter-spacing:.04em;margin-bottom:1.25rem; box-shadow:0 4px 16px rgba(255,204,0,.18); } .price-trial{font-size:1rem;font-weight:600;color:var(--text-1);letter-spacing:-.01em} .price-trial-sub{margin-top:.2rem;font-size:.84rem;color:var(--text-3)} .price-list{list-style:none;padding:1.5rem 2rem;display:flex;flex-direction:column;gap:4px} .price-list li{ display:flex;align-items:center;gap:12px; padding:10px 12px;border-radius:12px; transition:background .15s; } .price-list li:hover{background:rgba(255,255,255,.04)} .pl-ico{ width:32px;height:32px;border-radius:8px;flex-shrink:0; display:flex;align-items:center;justify-content:center; font-size:1rem;background:var(--bg);color:var(--c); } .price-list li span:last-child{font-size:.92rem;font-weight:500} .price-foot{padding:1.5rem 2rem 2rem;text-align:center;border-top:1px solid var(--border)} .price-note{ margin-top:.85rem;font-size:.88rem;font-weight:600; color:rgba(72,219,109,.95); letter-spacing:.01em; } .price-fineprint{ margin-top:.55rem;font-size:.76rem;color:var(--text-3); line-height:1.45;letter-spacing:.01em; } /* ── Price card "Coming Soon" variant — replaces the dollar block with a prominent pill while keeping the surrounding glass + gold framing. ── */ .price-coming{ display:inline-flex;align-items:center;justify-content:center; padding:.55rem 1.4rem;margin-bottom:1rem; background:linear-gradient(135deg,rgba(255,204,0,.28),rgba(255,149,0,.22)); border:1px solid rgba(255,204,0,.5);border-radius:100px; font-family:var(--font-display); font-size:1.05rem;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:#ffd84a; box-shadow:0 6px 20px rgba(255,204,0,.18); } /* ── Screens — captionless two-up phone screenshots beneath the What's New cards. Stays inside the .whats-new section so it reads as visual proof of the bullets above it, not a standalone "feature." Side-by- side at every viewport (no media-query stack) so the four-tab nav in the Today screen and the wardrobe grid in the Klosyt screen register together as one story. ── */ .screens-strip{ display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end; gap:1.5rem;max-width:760px;margin:0 auto 3rem; } @media(min-width:720px){ .screens-strip{gap:2.5rem;margin-bottom:3.5rem} } /* flex-basis:300px + wrap centers a single phone and stacks them 1-up on phones (where a 2-up column would render each illegibly small). */ .screen{margin:0;flex:0 1 300px;display:flex;flex-direction:column;align-items:center} .screen img{ width:100%;max-width:300px;height:auto;display:block;margin:0 auto; /* filter:drop-shadow follows the alpha channel, so the shadow tracks the phone silhouette instead of outlining the rectangular PNG box the way box-shadow would. border-radius would also clip against the rectangle so it's intentionally absent — the phone shape already comes from the transparent PNG. */ filter:drop-shadow(0 30px 30px rgba(0,0,0,.4)); } /* ── Languages ── */ .lang-label{ font-size:.78rem;color:var(--text-3);font-weight:700; text-transform:uppercase;letter-spacing:.12em;margin-bottom:1.25rem; } .lang-row{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:680px;margin:0 auto;padding:0;list-style:none} .lang-row li{display:contents} .lang-row a{ display:inline-flex;align-items:center; min-height:44px;padding:0 14px; background:var(--panel);border:1px solid var(--border); border-radius:100px;font-size:.78rem;color:var(--text-2);font-weight:500; text-decoration:none; transition:background .15s,color .15s,border-color .15s,transform .15s; } .lang-row a:hover{background:var(--panel-hover);color:var(--text-1);transform:translateY(-1px);border-color:var(--border-hover)} .lang-row a.active{ background:linear-gradient(135deg,rgba(90,200,250,.22),rgba(0,122,255,.18)); border-color:rgba(90,200,250,.4); color:#fff;font-weight:700; box-shadow:0 4px 16px rgba(90,200,250,.18); } /* ── Legal / Support ── */ .legal-content{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:1.25rem} .legal-card{border-radius:var(--radius);padding:2rem} .legal-card h2,.legal-card h3{font-size:1.15rem;font-weight:700;margin-bottom:.75rem} .legal-card p{color:var(--text-2);line-height:1.7;font-size:.95rem} .legal-card p+p{margin-top:.75rem} .legal-card ul{color:var(--text-2);line-height:1.8;padding-left:1.5rem;margin-top:.5rem;font-size:.95rem} .legal-card a{color:#5ac8fa} .legal-table{width:100%;border-collapse:collapse;font-size:.88rem;color:var(--text-2);margin-top:.75rem} .legal-table th{text-align:left;padding:8px 12px;color:var(--text-1);border-bottom:1px solid var(--border)} .legal-table td{padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.04)} .faq-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem} /* ── Footer ── */ .foot{padding:4rem 0 calc(4rem + env(safe-area-inset-bottom))} .foot-links{display:flex;justify-content:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap} .foot-links a{ display:inline-flex;align-items:center; min-height:44px;padding:0 12px; color:var(--text-2);text-decoration:none; font-size:.9rem;font-weight:500;transition:color .2s; } .foot-links a:hover{color:var(--text-1)} .foot-copy{color:var(--text-3);font-size:.82rem} /* ── Scroll reveal ── */ .fade-up{ opacity:0;transform:translateY(28px); transition:opacity .7s var(--ease),transform .7s var(--ease); transition-delay:calc(var(--i,0) * 70ms); } .fade-up.in{opacity:1;transform:translateY(0)} @media(scripting:none){.fade-up{opacity:1;transform:none;transition:none}} /* ── Micro-interactions — press feedback (none existed) + product imagery joining the hover vocabulary. All transform/box-shadow/drop-shadow; no backdrop-filter, no loops. Reduced-motion neutralizes them below. ── */ .badge-link:active{transform:translateY(0) scale(.97)} .lang-row a:active{transform:scale(.96)} .feature-card:active,.card:active,.wn-card:active{transform:translateY(-2px) scale(.99)} .price-card:active{transform:translateY(-1px) scale(.995)} .screen img{transition:transform .35s var(--ease),filter .35s var(--ease)} .screen img:hover{transform:translateY(-6px) scale(1.015);filter:drop-shadow(0 40px 44px rgba(0,0,0,.5))} .feature-icon{transition:transform .3s var(--ease),box-shadow .3s var(--ease)} .feature-card:hover .feature-icon{transform:scale(1.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 10px 26px -6px var(--c)} .price-list li{transition:background .15s,transform .15s} .price-list li:hover{transform:translateX(3px)} :focus-visible{transition:outline-color .15s,outline-offset .15s} /* ── Support page extras ── */ .glass-btn{ display:inline-flex;align-items:center;justify-content:center; padding:14px 32px;font-size:1rem;font-weight:600; border-radius:100px;text-decoration:none; background:var(--text-1);color:#050508; transition:transform .2s,box-shadow .2s; } .glass-btn:hover{transform:scale(1.02);box-shadow:0 8px 30px rgba(255,255,255,.2)} .troubleshoot-item summary{ cursor:pointer;font-weight:600;font-size:1.05rem; padding:1rem 0;color:var(--text-1);list-style:none; display:flex;align-items:center;gap:.75rem; border-bottom:1px solid var(--border); transition:color .2s; } .troubleshoot-item summary::-webkit-details-marker{display:none} .troubleshoot-item summary::before{content:'▸';font-size:.9rem;color:var(--text-3);transition:transform .2s} .troubleshoot-item[open] summary::before{transform:rotate(90deg)} .troubleshoot-item summary:hover{color:rgba(255,255,255,.9)} .troubleshoot-answer{padding:.75rem 0 1.25rem 1.65rem;color:var(--text-2);font-size:.95rem;line-height:1.6} /* ── Responsive ── */ @media(max-width:768px){ .section{padding:3.5rem 0} .steps{flex-direction:column;padding:2rem;gap:0} .step{padding:1rem 0} .step-div{width:100%;height:1px;align-self:stretch} .features-grid{grid-template-columns:1fr;gap:.85rem} .whats-new-grid{grid-template-columns:1fr;gap:.7rem} .faq-grid-2{grid-template-columns:1fr} .legal-card{padding:1.5rem} .bottom-cta{padding:4rem 0 5rem} .cta-panel{padding:2.5rem 1.75rem} .nav-bar{width:94%;padding:0 1rem;height:48px} .nav-links{gap:.6rem} .nav-links a{font-size:.82rem} } @media(max-width:480px){ .hero h1{font-size:2.4rem} .hero-icon{width:128px;height:128px;border-radius:30px;margin-bottom:1.5rem} .nav-brand span{font-size:.9rem} .nav-icon{height:24px;width:24px} .nav-bar{border-radius:22px;height:48px} .nav-links{gap:.4rem} .nav-links a{padding:0 8px} .wrap{padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right))} .feature-card{padding:1.25rem;gap:.9rem} .feature-icon{width:42px;height:42px} .card{padding:1.5rem} .section{padding:2.5rem 0} .price-card{border-radius:20px} .cta-panel{padding:2rem 1.25rem;border-radius:20px} .divider{max-width:80px} } /* ── Light mode ── */ @media(prefers-color-scheme:light){ :root{ --panel:rgba(255,255,255,.72); --panel-hover:rgba(255,255,255,.92); --border:rgba(60,40,10,.1); --border-hover:rgba(60,40,10,.2); --shadow-1:0 6px 18px -10px rgba(60,40,10,.16),0 1px 2px rgba(60,40,10,.06),inset 0 1px 0 rgba(255,255,255,.6); --text-1:#241a0c; --text-2:rgba(36,26,12,.74); --text-3:rgba(36,26,12,.52); --accent-color:#0068cc; --accent-warm:#b8791a; } /* Cool paper-white base with a blue sky-halo at top and a cyan floor at bottom, mirroring the app icon's blue→cyan gradient. Gold stays the pricing accent (a complementary warm against the cool base). */ html{ background:#eef3fb; background: radial-gradient(ellipse 1200px 780px at 50% -10%, #d8e6fb 0%, transparent 62%), radial-gradient(ellipse 1000px 640px at 50% 108%, #d3f0f3 0%, transparent 66%), #eef3fb; } body::before{ background: radial-gradient(ellipse 1200px 720px at 50% -6%, rgba(24,138,255,.12) 0%, transparent 62%), radial-gradient(circle 820px at 50% 50%, rgba(24,138,255,.045) 0%, transparent 72%), radial-gradient(ellipse 1100px 720px at 50% 106%, rgba(2,190,212,.14) 0%, transparent 62%); } /* Lighter dither over the paper base — soft-light at full .06 reads heavy on white, so dial it back. */ body::after{opacity:.035} .hero h1,h1.sec-title{ background:linear-gradient(170deg,#241a0c 0%,#2e4b82 55%,#1f6fb8 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .sec-title{color:#241a0c} .sec-title em{color:#2e4b82} .hero-icon{ box-shadow: 0 24px 64px rgba(20,40,70,.16), 0 0 110px rgba(24,138,255,.20), 0 0 180px rgba(2,190,212,.16), 0 0 0 1px rgba(20,40,70,.05); } .nav-bar{background:rgba(255,249,235,.6);border:1px solid rgba(60,40,10,.1);box-shadow:0 10px 40px rgba(36,26,12,.1), inset 0 1px 0 rgba(255,255,255,.7)} .nav-bar:hover{background:rgba(255,249,235,.78)} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .nav-bar{background:rgba(243,236,222,.95)} .nav-bar:hover{background:rgba(243,236,222,.98)} } .price-badge{color:#6e3f00;background:linear-gradient(135deg,rgba(255,204,0,.32),rgba(255,149,0,.32));border:1px solid rgba(184,121,26,.45);box-shadow:0 4px 16px rgba(184,121,26,.18)} .price-card{ background: linear-gradient(rgba(255,253,245,.9),rgba(255,249,235,.72)) padding-box, linear-gradient(135deg,rgba(184,121,26,.6),rgba(255,204,0,.3) 30%,rgba(60,40,10,.05) 60%,rgba(184,121,26,.4)) border-box; box-shadow:0 30px 80px rgba(60,40,10,.14), 0 0 120px -20px rgba(184,121,26,.18); } .price-card:hover{box-shadow:0 40px 100px rgba(60,40,10,.2), 0 0 140px -20px rgba(184,121,26,.28)} .cta-panel{ background: linear-gradient(rgba(255,253,245,.72),rgba(255,249,235,.52)) padding-box, linear-gradient(135deg,rgba(0,104,204,.4),rgba(60,40,10,.05) 35%,rgba(60,40,10,.05) 65%,rgba(184,121,26,.4)) border-box; box-shadow:0 30px 80px rgba(60,40,10,.12), inset 0 1px 0 rgba(255,255,255,.6); } .feature-card:hover, .card:hover{ box-shadow:0 16px 40px rgba(60,40,10,.12), 0 0 60px -20px var(--card-accent); } .screen img:hover{filter:drop-shadow(0 40px 44px rgba(20,40,70,.28))} .feature-card:hover .feature-icon{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 8px 22px -6px var(--c); } .divider,hr.divider{background:linear-gradient(90deg,transparent,rgba(0,104,204,.5),rgba(184,121,26,.5),transparent);opacity:.8} .divider::after{ background:radial-gradient(circle,#fff 0%,rgba(0,104,204,.9) 55%,rgba(0,104,204,0) 100%); box-shadow:0 0 14px rgba(0,104,204,.55),0 0 28px rgba(184,121,26,.42); } .bottom-cta h2 em{color:#0068cc} .step-n{background:rgba(0,122,255,.12);color:#007aff;border:1px solid rgba(0,122,255,.25);box-shadow:0 0 24px rgba(0,122,255,.12)} .glass-btn{background:var(--text-1);color:#fff} .glass-btn:hover{box-shadow:0 8px 30px rgba(0,0,0,.12)} .troubleshoot-item summary{border-bottom:1px solid rgba(0,0,0,.08)} .troubleshoot-item summary:hover{color:rgba(0,0,0,.85)} .price-list li:hover{background:rgba(0,0,0,.03)} .lang-row a{background:rgba(255,255,255,.7);border:1px solid rgba(0,0,0,.08)} .lang-row a:hover{background:rgba(255,255,255,.92);color:var(--text-1);border-color:rgba(0,0,0,.16)} .lang-row a.active{ background:linear-gradient(135deg,rgba(0,122,255,.18),rgba(90,200,250,.14)); border-color:rgba(0,122,255,.32); color:#003d8f;font-weight:700; box-shadow:0 4px 16px rgba(0,122,255,.12); } .nav-links a.nav-cta{ color:#003d8f; background:linear-gradient(135deg,rgba(0,122,255,.18),rgba(90,200,250,.14)); border-color:rgba(0,122,255,.32); box-shadow:0 4px 16px rgba(0,122,255,.12); } .nav-links a.nav-cta:hover{color:#002a66;border-color:rgba(0,122,255,.5)} .price-note{color:rgba(0,108,56,.95)} .feature-icon,.card-ico{box-shadow:inset 0 0 0 1px rgba(0,0,0,.06), 0 6px 16px -8px var(--c)} .price-foot,.price-head{border-color:rgba(0,0,0,.08)} } /* ── Reduced motion ── */ @media(prefers-reduced-motion:reduce){ .fade-up{opacity:1;transform:none;transition:none} .feature-card,.card,.price-card,.badge-link,.glass-btn,.nav-bar,.cta-panel, .lang-row a,.wn-card,.screen img,.feature-icon,.price-list li{transition:none} .badge-link:active,.lang-row a:active,.feature-card:active,.card:active, .wn-card:active,.price-card:active{transform:none} }