/* ============================================================================ SLAY violet re-skin — OVERLAY on top of site.css (and the guides' inline STYLE). Loaded last; prod port = this file + the link lines. Palette mirrors the Mini App dark theme: graphite-violet, silver wordmark, #7C5CFF actions. ============================================================================ */ :root{ /* site.css tokens */ --bg:#0E0C16;--card:#161226;--card-2:#1C1730;--elev:#2A2344; --line:rgba(190,170,255,.10);--line-2:rgba(190,170,255,.18); --fg:#F4F2FB;--fg-2:#A9A3C2;--fg-3:#736D8F;--ok:#4ADE97; --accent:#7C5CFF;--accent-2:#9F86FF;--accent-soft:rgba(124,92,255,.16); /* guides' inline-STYLE tokens (old ink/gold system) — re-pointed */ --ink:#0E0C16;--ink-1:#151129;--ink-2:#1C1730;--well:#0A0814; --s1:rgba(190,170,255,.05);--s2:rgba(190,170,255,.09); --paper:#F4F2FB;--paper-2:rgba(244,242,251,.66);--paper-3:rgba(244,242,251,.42); --gold:#9F86FF;--gold-lume:#C9BBFF;--green:#4ADE97; } ::selection{background:var(--accent);color:#fff} /* Aurora instead of the plain white glow: violet bloom at the top. */ .stage{background: radial-gradient(90% 52% at 50% -14%,rgba(124,92,255,.22),transparent 60%), radial-gradient(50% 34% at 82% -6%,rgba(59,35,150,.35),transparent 60%), var(--bg)} .stage::before,.stage::after{filter:hue-rotate(0deg);opacity:.5} /* Primary buttons: white slab → violet. */ .btn-p{background:var(--accent);color:#fff;box-shadow:0 10px 26px -10px rgba(124,92,255,.55)} .btn-p:hover{opacity:1;background:#8B6EFF} .btn-p svg{fill:#fff} .btn-g:hover{border-color:var(--accent-2);color:var(--fg)} .mmenu .mlang a.on{color:#fff;background:var(--accent);border-color:var(--accent)} /* Cards: soft violet lift on hover. */ .cc:hover,.pcard:hover{border-color:rgba(124,92,255,.45)} .cc:hover .go{color:var(--accent-2)} .gc:hover{border-color:rgba(124,92,255,.45)} .gc .gtag{color:var(--accent-2)} .gc .rd{color:var(--accent-2)} /* Section numbers / accents that were gold or plain. */ .wc .n,.bn-num{color:var(--accent-2)} .nl a:hover{color:var(--accent-2)} .langmenu a.on{color:var(--fg);background:var(--accent-soft)} /* Product page: price & buy accents (classes from the SSR STYLE block). */ .price .pv,.price{color:var(--fg)} .save,.plans label .save{display:inline-block;background:rgba(124,92,255,.18);color:#B9A6FF;border:0;border-radius:100px;padding:3px 10px;line-height:1.5;font-weight:600} .disc{background:var(--accent-soft);color:var(--accent-2)} .buybar .btn-p,.finalcta .btn-p{background:var(--accent);color:#fff} /* .cta is BOTH the guides' pill-button (a.cta) and the homepage's closing SECTION — colour only the button; the section gets a soft violet glow instead of the heavy solid slab. */ a.cta{background:var(--accent);color:#fff} a.cta .tg{fill:#fff} section.cta{background:radial-gradient(64% 90% at 50% 0%,rgba(124,92,255,.22),transparent 72%)} section.cta .btn-p{background:var(--accent);color:#fff} .sel label:hover{border-color:rgba(124,92,255,.45)} .nav-cta{background:var(--accent);color:#fff} .nav-cta .nub svg{fill:#fff} /* FAQ / details markers. */ details summary::marker{color:var(--accent-2)} details[open] summary{color:var(--fg)} /* Footer links. */ .foot2 a:hover,.foot a:hover{color:var(--accent-2)} /* The silver wordmark needs no filters on this dark ground. */ .logo,.nav-logo{filter:none} /* ── nav: always readable ────────────────────────────────────────────────── site.css gives .nav a background only after .scrolled AND uses unprefixed backdrop-filter — iOS Safari ignores it, so page text bled through the bar. Solid-ish violet-graphite scrim + prefixed blur, in every state. */ /* iOS 26 Liquid Glass samples the fixed element's OWN background-color for the toolbar/status glass; transparency there = "unpredictable" (content mirrored through). One rule to rule them all: a SOLID opaque nav. */ .nav{background:#12101D} .nav.scrolled{background:#12101D} .nav::after{opacity:1} /* guides' floating pill: solid too; the status-bar tint falls back to body. */ .nav-pill{background:#12101D} /* ── iOS 26 Liquid Glass: the chrome/status tint is derived from html/body background-color (theme-color is IGNORED, fixed divs like .stage are not sampled, absolute children of fixed bars are not sampled either). Give the root an explicit solid so the glass tints dark instead of mirroring content. */ html{background-color:#0E0C16;min-height:100%} body{background-color:#0E0C16} /* ── iOS 26 tint sampling, round 3 ──────────────────────────────────────── Safari 26 scans fixed/sticky elements within ~4px of the top edge (≥80% wide) and reads their background-color for the status-bar glass tint. Transparent fixed overlays hijack that scan. Two moves: 1) the film-grain overlay (body::after — fixed, full-screen, z80, bg transparent) sat ABOVE the nav and fed the sampler "transparent" — drop it on iOS entirely; 2) a dedicated top sampling strip (body::before — solid, topmost), the technique from jahir.dev/blog/safari-toolbar, so the sampler always finds an opaque dark pixel row regardless of the rest of the page. */ @supports (-webkit-touch-callout: none) { body::after { display: none !important; } } body::before{ content:""; position:fixed; top:-8px;left:0; width:100%; min-height:12px; z-index:100; background-color:#12101D; margin:0;padding:0; pointer-events:none; }