/* ═══════════════════════════════════════════ KABYNYT — Aurora Glass Dark navy base + one static gradient halo at the top and a single fixed 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,.045); --panel-hover:rgba(255,255,255,.085); --border:rgba(255,255,255,.1); --border-hover:rgba(255,255,255,.22); --text-1:#fff; --text-2:rgba(255,255,255,.78); --text-3:rgba(255,255,255,.55); --accent-color:#5be0a8; --accent-warm:#6e48d6; --radius:20px; --radius-lg:28px; --radius-md:12px; --radius-sm:8px; --radius-pill:100px; --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; /* Mono face for label/catalog apparatus and the shared family footer pill. System mono on every Apple device — zero network cost, CSP-clean. */ --font-mono:ui-monospace,"SF Mono","SF Mono Display",Menlo,monospace; /* Standard panel shadow shared with site-klosyt/site-vultyr (Kabynyt was the only sibling missing it). Additive — consumed by later components. */ --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); color-scheme:dark light; } /* Base painted on : fills Safari's chrome, overscroll zone, and safe-area insets uniformly. Layered gradient gives the hero a soft sky halo that fades into flat navy by ~70vh. */ html{ background:#141038; /* Continuous green → green-tinted dark → indigo-tinted dark → deep dark indigo. The middle stops are green- or purple-tinted (never neutral navy), so the gradient cannot read as "blue" anywhere along its length. The bottom now lands on a deep dark indigo (#1f1158) rather than the previous brighter violet — gives the bottom a real "midnight indigo" weight to match the new icon's vivid purple body. */ background: linear-gradient(180deg, #0a2418 0%, #114a2e 14%, #103a26 28%, #181a2e 48%, #1d1448 62%, #261562 82%, #1f1158 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: two soft color washes as pure radial gradients. No filter:blur anywhere — the browser rasterizes these once. position:fixed keeps it behind scrolling content without inflating page height, and pointer-events:none keeps it out of hit-testing. */ body::before{ content:''; position:fixed; inset:0; pointer-events:none; /* Viewport-fixed bloom: bright aurora-green glow at the top edge of the viewport, vivid violet glow at the bottom edge. Stays in view as you scroll, so the green and violet poles are always present rather than only visible at the very top or very bottom of the document. */ background: radial-gradient(ellipse 1500px 800px at 50% -8%, rgba(46,225,140,.42) 0%, transparent 60%), radial-gradient(ellipse 700px 500px at 22% 30%, rgba(91,224,168,.12) 0%, transparent 70%), radial-gradient(ellipse 900px 600px at 78% 70%, rgba(110,72,210,.16) 0%, transparent 65%), radial-gradient(ellipse 1500px 800px at 50% 108%, rgba(80,52,180,.45) 0%, transparent 60%); 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:.04; mix-blend-mode:overlay; 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); } /* ── 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} /* ── 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:128px;height:128px;border-radius:30px; /* Dual bloom — aurora green dominant with an indigo halo underneath so the page's green→indigo palette reads as intentional from the hero down. */ box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 110px rgba(52,199,89,.34), 0 0 180px rgba(110,72,214,.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 — aurora green at mid, indigo at the tail so the title carries the same green→indigo arc as the page canvas. */ background:linear-gradient(170deg,#fff 0%,#b8eed4 55%,#a890ea 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; } .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; } /* ═══════════════════════════════════════════ THE COLLECTION RIVER — hero "Catalog everything" dramatized through abundance: a centered title over a full-bleed wall of glass collection tiles drifting slowly past in alternating directions. CSP-clean (CSS transform marquee, no JS); pauses under prefers-reduced-motion. Each tile is a coloured "cover" + a category, so the wall celebrates breadth rather than reading as a logo cloud. ═══════════════════════════════════════════ */ .river-hero{ flex-direction:column;align-items:stretch;justify-content:center; gap:3.25rem;padding-left:0;padding-right:0;overflow:hidden; } .river-lead{ max-width:720px;text-align:center; display:flex;flex-direction:column;align-items:center;gap:1.15rem; } .river-lead .hero-icon{margin:0;width:88px;height:88px;border-radius:22px} .river-lead .hero-wordmark{margin:0} .river-lead h1{margin:0} .river-lead .hero-sub{margin:0} .river-cta{display:flex;align-items:center;justify-content:center;gap:1.3rem;flex-wrap:wrap;margin-top:.4rem} .river-cta .hero-devices{margin-top:0} .river{ display:flex;flex-direction:column;gap:.85rem;width:100%; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); } .river-row{display:flex;width:max-content;animation:river-drift 72s linear infinite;will-change:transform} .river-row--rev{animation-name:river-drift-rev} .river-row:nth-child(2){animation-duration:90s} .river-row:nth-child(3){animation-duration:62s} .river-set{display:flex;flex-shrink:0} @keyframes river-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes river-drift-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}} .tile{ display:inline-flex;align-items:center;gap:.6rem;flex-shrink:0; margin-right:.85rem;padding:.5rem .95rem .5rem .55rem; border-radius:14px; background:var(--panel);border:1px solid var(--border); box-shadow:var(--shadow-1); font-size:.9rem;font-weight:600;color:var(--text-2); white-space:nowrap;letter-spacing:-.01em; } .tile-ico{width:26px;height:26px;flex-shrink:0;fill:var(--c)} @media(prefers-reduced-motion:reduce){.river-row{animation:none}} @media(max-width:480px){ .river-hero{gap:2.5rem} .tile{font-size:.82rem} .tile-ico{width:22px;height:22px} } /* ── 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(52,199,89,.65),rgba(110,72,214,.6),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(91,224,168,.9) 55%,rgba(91,224,168,0) 100%); box-shadow:0 0 14px rgba(52,199,89,.7),0 0 28px rgba(110,72,214,.32); } /* ── Section title (editorial eyebrow + serif headline) ── */ .sec-head{ text-align:center; margin:0 auto 3rem; max-width:680px; padding:0 1rem; } .sec-eyebrow{ display:inline-flex;align-items:center;gap:10px; font-family:var(--font-body); font-size:.72rem;font-weight:600; letter-spacing:.22em;text-transform:uppercase; color:var(--text-3); margin-bottom:1rem; } .sec-eyebrow::before,.sec-eyebrow::after{ content:'';width:28px;height:1px; background:linear-gradient(90deg,transparent,var(--accent-color),transparent); opacity:.65; } .sec-title{ font-family:var(--font-display); font-size:clamp(2rem,4.5vw,3.2rem); 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%,#cfe2ff 55%,#ffe8a8 100%); -webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent; margin-bottom:1rem; } .sec-kicker{ margin-top:.75rem; color:var(--text-2); font-size:1rem;line-height:1.6; max-width:52ch;margin-left:auto;margin-right:auto; } /* ── 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 mint→indigo sheen over border-box that mirrors the page canvas's green-to-indigo arc. */ background: linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,.02)) padding-box, linear-gradient(135deg,rgba(52,199,89,.45),rgba(255,255,255,.06) 35%,rgba(255,255,255,.06) 65%,rgba(110,72,214,.55)) 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; } /* ── Privacy spotlight — wide framed band that breaks the card-grid rhythm. Shares the CTA's dual background-clip frame (green→indigo arc) so it reads as a deliberate feature moment, distinct from the flat .glass cards. ── */ .spotlight{ display:flex;align-items:center;gap:2rem; max-width:920px;margin:0 auto; padding:2.75rem 2.5rem;border-radius:var(--radius-lg); background: linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,.02)) padding-box, linear-gradient(135deg,rgba(52,199,89,.45),rgba(255,255,255,.06) 50%,rgba(110,72,214,.5)) border-box; border:1px solid transparent; box-shadow:0 30px 80px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06); } .spotlight-icon{ width:72px;height:72px;border-radius:20px;flex-shrink:0; display:flex;align-items:center;justify-content:center; font-size:2rem; background:var(--bg);color:var(--c); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 10px 28px -8px var(--c); } .spotlight-text h2{ font-family:var(--font-display); font-size:clamp(1.5rem,3vw,2.1rem); font-weight:700;letter-spacing:-.03em;line-height:1.14; margin-bottom:.6rem;padding-bottom:.04em; text-wrap:balance; } .spotlight-text h2 em{font-style:italic;font-weight:600;color:var(--accent-color)} .spotlight-text p{color:var(--text-2);font-size:1rem;line-height:1.6;max-width:62ch} .spotlight-text a{color:var(--accent-color);font-weight:600;text-decoration:none;white-space:nowrap} .spotlight-text a:hover{text-decoration:underline} /* ── Section title (layout override — sizing + tracking come from the detailed rule above; this block just re-centers and restates size so cascade order is predictable) ── */ .sec-title{ text-align:center;margin-bottom:3.5rem; font-size:clamp(2rem,4.5vw,3rem); font-weight:700;letter-spacing:-.035em;line-height:1.1; } /* ── 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-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} /* ── 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.05rem;font-weight:700;margin-bottom:.4rem;letter-spacing:-.01em} .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. Halo softened so the hero stays dominant, per-section gold-cyan balance now shared with hero icon bloom. ── */ .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-amt{display:flex;align-items:baseline;justify-content:center;gap:6px;margin-bottom:.5rem} .price-num{ font-family:var(--font-display); font-size:3.8rem;font-weight:700;letter-spacing:-.035em;line-height:1.1; padding-bottom:.04em; font-feature-settings:"kern","liga","lnum","tnum"; background:linear-gradient(180deg,#ffe27a 0%,#ffb000 100%); -webkit-background-clip:text;background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .price-num{color:#ffcc00;-webkit-text-fill-color:initial} } .price-per{font-size:1rem;color:var(--text-2);font-weight:500} .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; } /* ── 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));border-top:1px solid var(--border)} .foot-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem} .foot-brand{ display:inline-flex;align-items:center;gap:10px; text-decoration:none;color:var(--text-1); font-weight:700;font-size:1.1rem;letter-spacing:-.02em; margin-bottom:.25rem; } .foot-icon{width:40px;height:40px;border-radius:10px} .foot-tagline{color:var(--text-2);font-size:.95rem;max-width:42ch;margin-bottom:.5rem} .foot-links{display:flex;justify-content:center;gap:.5rem;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-meta{color:var(--text-3);font-size:.82rem;letter-spacing:.02em;margin-top:.25rem} .foot-copy{color:var(--text-3);font-size:.82rem} /* "Discover" pill — shared footer cross-link to the sibling sites (site-klosyt / site-vultyr). Same component on all three; only the two outbound links differ per site. Mono label + pill shape come from the shared family tokens (--font-mono / --radius-pill). Inherits --panel / --border / --text-* so it reskins for light mode automatically. */ .family-row{ display:inline-flex;align-items:center;gap:10px; margin:.4rem 0 .15rem; padding:9px 18px;border-radius:var(--radius-pill); background:var(--panel);border:1px solid var(--border); font-family:var(--font-mono);font-size:.74rem; color:var(--text-3);letter-spacing:.02em; } .family-row a{color:var(--text-2);text-decoration:none;font-weight:500;transition:color .2s var(--ease)} .family-row a:hover{color:var(--accent-color)} .family-row .sep{opacity:.4} /* ── 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}} /* ── 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} .spotlight{flex-direction:column;text-align:center;padding:2.25rem 1.75rem;gap:1.25rem} .spotlight-text p{margin-left:auto;margin-right:auto} .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:104px;height:104px;border-radius:24px;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} .price-num{font-size:2.8rem} .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); --text-1:#241a0c; --text-2:rgba(36,26,12,.74); --text-3:rgba(36,26,12,.52); --accent-color:#0e7a52; --accent-warm:#4a47b3; } /* Warm paper-white base with mint→indigo aurora gradient. The mint halo at top mirrors dark-mode's aurora green; the indigo wash at the bottom mirrors the dark-mode indigo finish. Pricing card stays gold for the premium-tier contrast moment. */ html{ /* Mirror of dark mode: continuous mint → cream → indigo-tinted → deeper indigo. Bottom stop pushed darker so light mode also reads as "dark indigo at the bottom" instead of pale lavender. */ background: linear-gradient(180deg, #d6f0de 0%, #b8e6c8 16%, #e4ebd8 36%, #f0e6dc 50%, #e0d4ec 64%, #b89eda 84%, #6e54b8 100% ); } body::before{ background: radial-gradient(ellipse 1400px 700px at 50% -8%, rgba(20,160,96,.26) 0%, transparent 60%), radial-gradient(ellipse 700px 500px at 22% 30%, rgba(46,180,118,.08) 0%, transparent 70%), radial-gradient(ellipse 1400px 700px at 50% 108%, rgba(70,42,180,.38) 0%, transparent 60%); } .hero h1,h1.sec-title{ background:linear-gradient(170deg,#102018 0%,#1e6346 55%,#2a217d 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .sec-title{color:#102018} .sec-title em{color:#1e6346} .sec-eyebrow{color:rgba(16,32,24,.58)} .sec-eyebrow::before,.sec-eyebrow::after{background:linear-gradient(90deg,transparent,rgba(14,122,82,.5),transparent)} .hero-icon{ box-shadow: 0 24px 64px rgba(16,32,24,.18), 0 0 110px rgba(14,122,82,.20), 0 0 180px rgba(74,71,179,.18), 0 0 0 1px rgba(16,32,24,.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-num{background:linear-gradient(180deg,#b8791a 0%,#7a4a00 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .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(14,122,82,.4),rgba(16,32,24,.05) 35%,rgba(16,32,24,.05) 65%,rgba(74,71,179,.4)) border-box; box-shadow:0 30px 80px rgba(16,32,24,.12), inset 0 1px 0 rgba(255,255,255,.6); } .spotlight{ background: linear-gradient(rgba(255,253,245,.72),rgba(255,249,235,.52)) padding-box, linear-gradient(135deg,rgba(14,122,82,.4),rgba(16,32,24,.05) 50%,rgba(74,71,179,.4)) border-box; box-shadow:0 30px 80px rgba(16,32,24,.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); } .divider,hr.divider{background:linear-gradient(90deg,transparent,rgba(14,122,82,.5),rgba(74,71,179,.5),transparent);opacity:.8} .divider::after{ background:radial-gradient(circle,#fff 0%,rgba(14,122,82,.9) 55%,rgba(14,122,82,0) 100%); box-shadow:0 0 14px rgba(14,122,82,.55),0 0 28px rgba(74,71,179,.3); } .bottom-cta h2 em{color:#0e7a52} .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)} .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)} } /* ── Category chips (Kabynyt categories section) ── */ .categories{ display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem; max-width:980px;margin:0 auto; } .category-chip{ display:inline-flex;align-items:center; min-height:36px;padding:0 14px; background:var(--panel);border:1px solid var(--border); border-radius:100px; font-size:.86rem;font-weight:500;color:var(--text-2); letter-spacing:-.005em; transition:background .2s,color .2s,border-color .2s,transform .2s; } .category-chip:hover{ background:var(--panel-hover);color:var(--text-1); border-color:var(--border-hover); transform:translateY(-1px); } /* "Coming to the App Store" pill — uses .glass-btn as inert non-link */ span.glass-btn{cursor:default} span.glass-btn:hover{transform:none;box-shadow:none} /* ── Reduced motion ── */ @media(prefers-reduced-motion:reduce){ .fade-up{opacity:1;transform:none;transition:none} .feature-card,.card,.price-card,.glass-btn,.nav-bar,.cta-panel,.category-chip{transition:none} }