/* ═══════════════════════════════════════════ 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); /* One face front to back: SF Pro on display, body, and UI chrome alike, so the page reads as a first-party extension of the app. Display and body share the same stack — headlines lean on weight and tight tracking, not a contrasting serif. CJK/Cyrillic locales cascade to the system sans (PingFang, etc.) for matching first-party feel in every script. */ --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} /* Primary "Get" pill — the nav's App Store CTA, tinted with the accent. The rgba pair is the fallback wherever color-mix is unsupported; the accent variable swap keeps it readable in light mode. Specificity beats `.nav-links a` so padding/color win. */ .nav-links a.nav-cta{ color:var(--accent-color);font-weight:600; padding:0 16px;margin-left:.15rem;border-radius:100px; background:rgba(91,224,168,.16); border:1px solid rgba(91,224,168,.38); background:color-mix(in srgb,var(--accent-color) 16%,transparent); border:1px solid color-mix(in srgb,var(--accent-color) 38%,transparent); box-shadow:0 4px 16px color-mix(in srgb,var(--accent-color) 15%,transparent); } .nav-links a.nav-cta:hover{ color:var(--text-1); background:color-mix(in srgb,var(--accent-color) 26%,transparent); border-color:color-mix(in srgb,var(--accent-color) 55%,transparent); } /* ── 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.9rem,7.2vw,5.4rem); /* SF Pro display recipe: bold with tight negative tracking — the system face is built for this, so big sizes stay dense and optical without a contrasting serif. */ font-weight:700;letter-spacing:-.035em;line-height:1.08; margin-bottom:1.25rem; padding-bottom:.1em; text-wrap:balance; /* 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} /* ═══════════════════════════════════════════ THE COLLECTION SHELF — hero "Catalog everything" dramatized through abundance: a centered title over a full-bleed shelf of cover-shaped collection tiles drifting slowly past in alternating directions. CSP-clean (CSS transform marquee, no JS); pauses under prefers-reduced-motion. Each tile is a 3:4 "cover" tinted in its category's hue with a large glyph and a spine-style label, so the wall reads as a collection of objects rather than a tag cloud. ═══════════════════════════════════════════ */ .river-hero{ flex-direction:column;align-items:stretch;justify-content:center; gap:clamp(3rem,6vh,4.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:96px;height:96px;border-radius:24px} .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:1.1rem;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); /* The mask only paints inside the border box, but the per-cover rotate/translateY nudges below (and the tile shadows) reach past it — without this slack their bottoms get masked to a hard flat cut. The negative margin cancels the layout shift. */ padding:24px 0; margin:-24px 0; } /* Each row holds FOUR identical 12-cover sets, so the -50% travel lands on an exact copy (seamless loop) and half a row — two full sets, ~3000px — always covers the viewport. Durations keep the old pixel speed now that the travel distance roughly doubled. */ .river-row{display:flex;width:max-content;animation:river-drift 150s linear infinite;will-change:transform} .river-row--rev{animation-name:river-drift-rev;animation-duration:180s} .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)}} /* Cover tile: fixed footprint (identical sets keep the loop math exact). The color-mix tint/border pairs degrade to the plain panel declarations right above them wherever color-mix is unsupported. */ .tile{ display:flex;flex-direction:column;align-items:center;justify-content:center; gap:.6rem;flex-shrink:0; width:112px;height:148px; margin-right:.95rem;padding:.65rem .45rem; border-radius:16px; background:var(--panel); border:1px solid var(--border); background:linear-gradient(168deg,color-mix(in srgb,var(--c) 22%,rgba(255,255,255,.04)) 0%,color-mix(in srgb,var(--c) 6%,rgba(255,255,255,.02)) 78%); border:1px solid color-mix(in srgb,var(--c) 34%,var(--border)); box-shadow:var(--shadow-1); font-size:.74rem;font-weight:600;color:var(--text-2); text-align:center;letter-spacing:0; } .tile-label{display:block;line-height:1.25} .tile-ico{width:42px;height:42px;flex-shrink:0;fill:var(--c);color:var(--c)} /* Slight per-cover rotation/lift so the shelf reads organic, not stamped. Static decoration — fine under reduced motion. */ .river-set .tile:nth-child(2n){transform:rotate(1.1deg) translateY(3px)} .river-set .tile:nth-child(3n){transform:rotate(-1deg) translateY(-2px)} .river-set .tile:nth-child(7n+2){transform:rotate(-.4deg) translateY(4px)} /* Let readers stop the drift: hovering anywhere over the shelf freezes both rows so a cover can actually be read. hover:hover keeps touch devices (where a tap would stick the paused state) on the always-drifting path. */ @media(hover:hover){.river:hover .river-row{animation-play-state:paused}} @media(prefers-reduced-motion:reduce){.river-row{animation:none}} @media(max-width:480px){ .river-hero{gap:2.5rem} .river{gap:.8rem} .tile{width:92px;height:124px;font-size:.66rem;border-radius:13px;margin-right:.7rem;gap:.5rem} .tile-ico{width:32px;height:32px} } /* ── 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; } .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 — same mint→lavender arc as the landing hero so every page opens on the brand gradient. */ h1.sec-title{ font-size:clamp(2.5rem,6vw,4rem); background:linear-gradient(170deg,#fff 0%,#b8eed4 55%,#a890ea 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; } /* ── Split head variant — left-aligned eyebrow + title with the kicker as a right-hand column on wide screens. Used once (Features) to break the page's centered-spine rhythm. Width steps mirror .features-grid. ── */ .sec-head--split{ text-align:left;max-width:960px; display:grid;grid-template-columns:minmax(0,1fr); } .sec-head--split .sec-title{text-align:left;margin:0} .sec-head--split .sec-kicker{margin:.6rem 0 0;max-width:52ch} .sec-head--split .sec-eyebrow{margin-bottom:.6rem} .sec-head--split .sec-eyebrow::after{display:none} @media(min-width:1100px){ .sec-head--split{ max-width:1280px; grid-template-columns:minmax(0,1fr) minmax(0,46ch); column-gap:4rem;align-items:end; } .sec-head--split .sec-eyebrow{grid-column:1;grid-row:1} .sec-head--split .sec-title{grid-column:1;grid-row:2} .sec-head--split .sec-kicker{grid-column:2;grid-row:1/3;margin:0 0 .35em;align-self:end} } /* ── 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; } /* Bento: the AI tile — the sell — takes a double-height cell with an embedded phone; barcode and For You stack beside it; iCloud closes the block as a slim full-width band. Small screens keep the simple stack. */ @media(min-width:900px){ .whats-new-grid{grid-template-columns:repeat(12,1fr)} .wn-card--ai{grid-column:1/8;grid-row:1/3} .wn-card--barcode{grid-column:8/13;grid-row:1} .wn-card--foryou{grid-column:8/13;grid-row:2} .wn-card--icloud{ grid-column:1/13; flex-direction:row;justify-content:flex-start;align-items:center; gap:1.25rem;padding:1.15rem 1.5rem; } } .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} /* Small "Kabynyt AI" pill marking the two paywalled highlight cards (AI photo identify, barcode deep-lookup) so the free-vs-paid split reads at a glance. Brand text, not translated. Violet→blue AI gradient like .price-badge, scaled down — matches the gradient stars glyph. */ .plus-tag{ align-self:flex-start; display:inline-flex;align-items:center; padding:2px 9px;border-radius:100px; font-size:.62rem;font-weight:700;letter-spacing:.04em; color:#d8b6ff; background:linear-gradient(135deg,rgba(192,115,255,.22),rgba(90,200,250,.16)); border:1px solid rgba(192,115,255,.4); } .wn-text{display:flex;flex-direction:column;gap:.3rem} /* Cards tint toward their accent hue (--c now lives on the card div, so the hover halo finally sees it too). The plain panel declaration is the fallback wherever color-mix is unsupported. */ .wn-card,.feature-card{ background:var(--panel); background:linear-gradient(150deg,color-mix(in srgb,var(--c,#9aa0a6) 9%,var(--panel)) 0%,var(--panel) 62%); } /* AI tile: text on top, the identify phone rising out of the tile's bottom edge (negative margin past the padding; overflow clips it to the card). */ .wn-card--ai{overflow:hidden;justify-content:flex-start} .wn-visual{ display:block;width:min(78%,330px);height:280px; margin:auto auto -1.3rem; object-fit:cover;object-position:50% 36%; border-radius:22px 22px 0 0; border:1px solid var(--border);border-bottom:0; box-shadow:0 -12px 44px rgba(0,0,0,.28); } @media(max-width:899px){.wn-visual{height:230px}} /* ── Features grid ── */ .features-grid{ display:grid;grid-template-columns:repeat(2,1fr); gap:1rem;max-width:960px;margin:0 auto; } @media(min-width:1100px){ /* 12 feature cards in 4 columns = three full rows; no centering hack needed. */ .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,.12), 0 8px 20px -8px var(--c), 0 0 22px -8px var(--c); } .feature-icon svg,.pl-ico svg,.card-ico svg,.wn-icon svg{display:block} /* Colored glow — each icon's gradient strokes cast a soft halo in their own hue (the `--c` the chip already exposes). Two stacked drop-shadows: a tight bright core plus a wider soft bloom. drop-shadow tracks the stroke alpha, so only the symbol glows, not the chip. Radii kept small — static (no blur animation), GPU-cheap, safe on scroll. color-mix degrades gracefully to no filter where unsupported. */ .feature-icon svg,.card-ico svg,.pl-ico svg,.wn-icon svg,.tile-ico{ filter:drop-shadow(0 0 4px color-mix(in srgb,var(--c) 55%,transparent)) drop-shadow(0 0 9px color-mix(in srgb,var(--c) 30%,transparent)); } .feature-card:hover .feature-icon svg{ filter:drop-shadow(0 0 5px color-mix(in srgb,var(--c) 72%,transparent)) drop-shadow(0 0 13px color-mix(in srgb,var(--c) 42%,transparent)); } /* 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,.12), 0 8px 20px -8px var(--c), 0 0 22px -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} /* ── Screenshots — 3-up App Store marketing shots staged as a gallery. The artwork ships its own dark gradient background; each image gets the site's card frame and a crop: the webp's top quarter carries a baked English headline, so aspect-ratio + bottom object-position trims to the phone and the localized figcaption does the talking. Desktop: center shot leads, flanks sit lower. Mobile: swipeable scroll-snap row. ── */ .screens-row{ display:grid;grid-template-columns:1fr 1.16fr 1fr; gap:1.4rem;max-width:1100px;margin:0 auto; align-items:start; } .screen-fig{margin:0;min-width:0} .screen-shot{ width:100%;height:auto;display:block; /* Crop starts at 19.5% of the artwork: below every baked headline (bottoms 15–18%) and above every phone bezel (tops 23.1–23.9%), so the phones keep visible headroom inside the card. */ aspect-ratio:574/1000;object-fit:cover;object-position:50% 100%; border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:0 30px 80px rgba(0,0,0,.35), 0 0 60px -24px rgba(52,199,89,.35); transition:transform .3s var(--ease),box-shadow .3s var(--ease); } /* Same lift as the card grids above/below so the hover language is uniform. */ .screen-shot:hover{ transform:translateY(-4px); box-shadow:0 40px 100px rgba(0,0,0,.45), 0 0 80px -24px rgba(52,199,89,.5); } .screen-cap{ margin-top:.95rem;text-align:center; font-size:.88rem;font-weight:500;color:var(--text-3); letter-spacing:.01em; } @media(min-width:769px){ /* Flanking shots sit lower so the identify shot — the sell — leads. */ .screen-fig:nth-child(odd){margin-top:2.75rem} /* Depth garnish: flanks drift slightly against the scroll while the center holds still. Scroll-driven, transform-only, and double-gated (@supports + reduced-motion) — static layout everywhere else. */ @supports (animation-timeline: view()){ @media (prefers-reduced-motion:no-preference){ .screen-fig:nth-child(odd){ animation:screen-drift linear both; animation-timeline:view(); animation-range:entry 20% exit 80%; } } } } @keyframes screen-drift{from{transform:translateY(26px)}to{transform:translateY(-22px)}} @media(max-width:768px){ .screens-row{ display:flex;overflow-x:auto; gap:1rem; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; /* Bleed to the viewport edge so the row scrolls full-width while the first/last snap stops still align with .wrap's text column. */ margin:0 calc(-1 * max(1.5rem,4vw)); padding:.5rem max(1.5rem,4vw) 1.5rem; scroll-padding:0 max(1.5rem,4vw); scrollbar-width:none; } .screens-row::-webkit-scrollbar{display:none} /* min-width:0 defeats the flex automatic minimum (the img's width:100% floors the item at container width otherwise), so the 72% basis takes and the next card peeks in from the right edge — the swipe affordance. */ .screen-fig{flex:0 0 min(72%,320px);min-width:0;scroll-snap-align:center} } @media(max-width:480px){ .screens-row{margin:0 -1rem;padding:.5rem 1rem 1.25rem;scroll-padding:0 1rem} } /* ── Pricing — premium card. Halo softened so the hero stays dominant; the frame and halo pick up the violet→cyan Kabynyt AI mark. ── */ .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(192,115,255,.55),rgba(90,200,250,.2) 30%,rgba(255,255,255,.08) 60%,rgba(192,115,255,.4)) border-box; border:1px solid transparent; /* Second shadow acts as a wide violet halo without needing a wrapper. */ box-shadow: 0 30px 80px rgba(0,0,0,.35), 0 0 120px -20px rgba(150,90,220,.2); 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(150,90,220,.32); } .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(192,115,255,.24),rgba(90,200,250,.18)); border:1px solid rgba(192,115,255,.42); border-radius:100px;font-size:.85rem;font-weight:700; color:#d8b6ff;letter-spacing:.04em;margin-bottom:1.25rem; box-shadow:0 4px 16px rgba(150,90,220,.22); } .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,#c89bff 0%,#5ac8fa 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)} /* Official Apple "Download on the App Store" badge (assets/app-store-badge.svg). The art is self-contained (black with a light outline + white glyphs) so it reads on both the dark hero and the light-mode cream — do not recolor it; only a subtle hover lift, matching the klosyt/vultyr treatment. */ .badge-link{display:inline-block;transition:transform .2s,opacity .2s;opacity:.95} .badge-link:hover{opacity:1;transform:translateY(-2px)} .badge-img{height:48px;width:auto} .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} /* Tighten the bar on phones so the wordmark + Kabynyt AI + Support + Get pill all clear it. English and short locales fit here; the longest-"Support" locales (nl, nb, fr, ru) can't also fit the wordmark, so they alone drop it via :lang() below — pure CSS, keyed off the per-locale . */ .nav-brand span{font-size:.9rem} .nav-icon{height:24px;width:24px} .nav-bar{border-radius:22px;height:48px;padding:0 .45rem} .nav-links{gap:.28rem} .nav-links a{padding:0 7px;font-size:.78rem} .nav-links a.nav-cta{padding:0 12px} :lang(nl) .nav-brand span, :lang(nb) .nav-brand span, :lang(fr) .nav-brand span, :lang(ru) .nav-brand span, :lang(it) .nav-brand span, :lang(es) .nav-brand span{display:none} .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,.13); --border-hover:rgba(60,40,10,.24); --text-1:#241a0c; --text-2:rgba(36,26,12,.78); --text-3:rgba(36,26,12,.58); --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)} /* The nav is position:fixed and translucent, so the pill floats over the page's mint→cream→indigo gradient — a transparent tint can't guarantee text contrast. In light mode give the pill an OPAQUE cream-green fill + darkened text so it clears WCAG AA (~5.9:1) at any scroll position. Dark mode keeps the translucent tint (passes ~7:1 on the dark glass). */ .nav-links a.nav-cta{ color:#0a5c3e; background:color-mix(in srgb,var(--accent-color) 16%,#fff7ec); border-color:color-mix(in srgb,var(--accent-color) 42%,#fff7ec); } .nav-links a.nav-cta:hover{ color:#073d26; background:color-mix(in srgb,var(--accent-color) 26%,#fff7ec); border-color:color-mix(in srgb,var(--accent-color) 55%,#fff7ec); } .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:#5b2a8a;background:linear-gradient(135deg,rgba(192,115,255,.30),rgba(90,200,250,.24));border:1px solid rgba(150,90,220,.45);box-shadow:0 4px 16px rgba(150,90,220,.18)} .plus-tag{color:#5b2a8a;background:linear-gradient(135deg,rgba(192,115,255,.28),rgba(90,200,250,.22));border:1px solid rgba(150,90,220,.4)} .price-num{background:linear-gradient(180deg,#7b3fc4 0%,#2f6fb8 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .price-card{ background: linear-gradient(rgba(252,250,255,.9),rgba(248,246,255,.72)) padding-box, linear-gradient(135deg,rgba(150,90,220,.6),rgba(90,200,250,.3) 30%,rgba(40,30,60,.05) 60%,rgba(150,90,220,.4)) border-box; box-shadow:0 30px 80px rgba(40,25,70,.14), 0 0 120px -20px rgba(120,70,200,.2); } .price-card:hover{box-shadow:0 40px 100px rgba(40,25,70,.2), 0 0 140px -20px rgba(120,70,200,.3)} .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); } /* Screenshots carry dark artwork — soften the drop to warm paper tones. */ .screen-shot{box-shadow:0 24px 64px rgba(60,40,10,.22), 0 0 60px -24px rgba(14,122,82,.25)} .screen-shot:hover{box-shadow:0 30px 80px rgba(60,40,10,.3), 0 0 80px -24px rgba(14,122,82,.35)} .wn-visual{box-shadow:0 -12px 44px rgba(60,40,10,.18)} .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), 0 0 16px -9px var(--c)} /* Lighter symbol glow on the cream background — a strong bloom muddies the light theme, so dial it to a single soft shadow. */ .feature-icon svg,.card-ico svg,.pl-ico svg,.wn-icon svg,.tile-ico{ filter:drop-shadow(0 0 3px color-mix(in srgb,var(--c) 38%,transparent)); } .feature-card:hover .feature-icon svg{ filter:drop-shadow(0 0 4px color-mix(in srgb,var(--c) 52%,transparent)); } .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); /* Hue wash cycling below echoes the hero shelf's category colors; the plain declarations above are the no-color-mix fallback. */ background:linear-gradient(140deg,color-mix(in srgb,var(--chip,#9aa0a6) 11%,var(--panel)),var(--panel) 72%); border:1px solid color-mix(in srgb,var(--chip,#9aa0a6) 24%,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:nth-child(8n+1){--chip:#5be0a8} .category-chip:nth-child(8n+2){--chip:#ff9f0a} .category-chip:nth-child(8n+3){--chip:#af52de} .category-chip:nth-child(8n+4){--chip:#5ac8fa} .category-chip:nth-child(8n+5){--chip:#ff453a} .category-chip:nth-child(8n+6){--chip:#30c8c0} .category-chip:nth-child(8n+7){--chip:#ffb300} .category-chip:nth-child(8n+8){--chip:#7b79ff} .category-chip:hover{ background:var(--panel-hover);color:var(--text-1); border-color:var(--border-hover); transform:translateY(-1px); } /* ── Reduced motion ── */ @media(prefers-reduced-motion:reduce){ .fade-up{opacity:1;transform:none;transition:none} .feature-card,.card,.price-card,.glass-btn,.badge-link,.nav-bar,.cta-panel,.category-chip,.screen-shot{transition:none} }