/* ───────────────────────────────────────────────────────────── Qualia VPN — marketing site OLED-dark, strictly MONOCHROME. Emphasis comes from white→grey→ graphite gradients and depth, never from hue. Mirrors the qualia_client / Mini App palette. Green (--success) is reserved for functional live states only and never appears on the landing. ───────────────────────────────────────────────────────────── */ :root{ --bg:#000000; --bg-2:#08080A; --card:#101012; --card-2:#161619; --inset:#1F1F23; --hairline:rgba(255,255,255,.08); --hairline-2:rgba(255,255,255,.14); --ink:#F4F5F8; --ink-2:#9BA0AA; --ink-3:#5C606B; /* Monochrome expressive pair — every "accent" is a white→grey→graphite sheen, never a hue. This IS the brand: pure monochrome. */ --hi:#FFFFFF; /* gradient high (light) */ --hi-2:#8C9098; /* gradient mid (metallic grey) */ --hi-3:#3A3B40; /* gradient low (graphite) */ /* Functional signal only — reserved for live states (checkout "active ✓"). Never decorative, never on the static landing. */ --success:#6BBD7E; --r:20px; --r-lg:28px; --maxw:1120px; --ease:cubic-bezier(.22,.61,.36,1); --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",system-ui,Roboto,sans-serif; } *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;} html{ scroll-behavior:smooth;-webkit-text-size-adjust:100%; scroll-padding-top:76px; scrollbar-color:#232327 transparent; } body{ background:var(--bg); color:var(--ink); font-family:var(--font); line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; /* `clip`, not `hidden`: `overflow-x:hidden` computes overflow-y to `auto`, turning into the scroll container — which breaks the sticky nav (window.scrollY stays 0, so its .scrolled backdrop never shows). `clip` still clips horizontal overflow but keeps the viewport as the scroller. */ overflow-x:clip; } a{color:inherit;text-decoration:none;} img,svg{display:block;} ::selection{background:var(--ink);color:#0A0A0C;} :focus-visible{outline:2px solid rgba(244,245,248,.7);outline-offset:3px;border-radius:6px;} ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:#232327;border-radius:999px;border:2px solid #000;} ::-webkit-scrollbar-thumb:hover{background:#3A3B40;} h1,.section-title{text-wrap:balance;} .hero-sub,.section-sub,.pay-note{text-wrap:pretty;} /* ─── ambient aurora ──────────────────────────────────────── */ .aurora{ position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(58vw 52vh at 80% -10%, rgba(255,255,255,.07), transparent 60%), radial-gradient(46vw 46vh at 6% 6%, rgba(255,255,255,.045), transparent 62%), radial-gradient(84vw 60vh at 50% 120%, rgba(255,255,255,.045), transparent 60%); } .aurora::after{ content:"";position:absolute;inset:0; background:radial-gradient(circle at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%); } /* film grain — gives the flat black a physical texture, still pure mono */ body::after{ content:"";position:fixed;inset:0;z-index:2000;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:180px 180px;opacity:.045; } /* ─── shared star ─────────────────────────────────────────── */ /* small sizes reference #qstar-plain (no facet rays — they smear at icon scale); only the hero star uses the faceted #qstar */ .star{fill:var(--ink);} .star-facets polygon{opacity:.55;} .star-sm{width:26px;height:26px;} .star-hero{width:100%;height:100%;} /* ─── nav ─────────────────────────────────────────────────── */ /* The nav spans the FULL width (its backdrop reaches both edges); the content lives in a centred max-width .nav-inner so the logo/links keep their positions. */ .nav{ position:sticky;top:0;z-index:100; padding:16px 0; transition:padding .3s var(--ease); } .nav::before{ content:"";position:absolute;inset:0;z-index:-1; background:rgba(5,5,7,.55); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); border-bottom:1px solid transparent; opacity:0;transition:opacity .3s var(--ease),border-color .3s var(--ease); } .nav-inner{ max-width:var(--maxw);margin:0 auto; display:flex;align-items:center;gap:24px; padding:0 clamp(18px,4vw,34px); } .nav.scrolled::before{opacity:1;border-bottom-color:var(--hairline);} .nav.scrolled{padding-top:11px;padding-bottom:11px;} .nav-brand{ display:flex;align-items:center;gap:10px; font-size:17px;font-weight:650;letter-spacing:.2px; } .nav-brand .thin{color:var(--ink-2);font-weight:400;} .nav-links{display:flex;gap:28px;margin-left:auto;} .nav-links a{ font-size:14.5px;color:var(--ink-2);font-weight:500; transition:color .2s var(--ease);position:relative; } .nav-links a::after{ content:"";position:absolute;left:0;bottom:-6px;height:1.5px;width:0; background:var(--ink);transition:width .25s var(--ease); } .nav-links a:hover{color:var(--ink);} .nav-links a:hover::after{width:100%;} .nav-links a.active{color:var(--ink);} .nav-links a.active::after{width:100%;} /* ─── layout scaffolding ──────────────────────────────────── */ .section{ max-width:var(--maxw);margin:0 auto; padding:clamp(72px,11vw,140px) clamp(18px,4vw,34px) 0; } .eyebrow{ font-size:12px;font-weight:650;letter-spacing:2.4px;text-transform:uppercase; color:var(--ink-2);margin-bottom:16px; } .section-title{ font-size:clamp(30px,5vw,50px);font-weight:700;letter-spacing:-.02em; line-height:1.08;max-width:16ch; } .section-sub{ margin-top:18px;font-size:clamp(15px,1.6vw,18px);color:var(--ink-2); max-width:52ch;line-height:1.6; } .muted{color:var(--ink-3);} /* ─── hero ────────────────────────────────────────────────── */ .hero{ max-width:var(--maxw);margin:0 auto; padding:clamp(56px,9vw,110px) clamp(18px,4vw,34px) 0; display:flex;flex-direction:column;align-items:center;text-align:center; } .star-hero-wrap{ width:clamp(96px,15vw,150px);height:clamp(96px,15vw,150px); margin-bottom:34px;position:relative; } .star-hero-wrap::before{ content:"";position:absolute;inset:-26%; background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%); filter:blur(18px);z-index:-1; } .star-hero-wrap .star{ fill:var(--ink); filter:drop-shadow(0 5px 18px rgba(255,255,255,.09)); } .hero h1{ font-size:clamp(40px,7.5vw,82px);font-weight:750;letter-spacing:-.035em; line-height:1.02; background:linear-gradient(180deg,#FFFFFF 30%,#B9BDC7 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero h1 .muted{ -webkit-text-fill-color:transparent; background:linear-gradient(96deg,var(--hi-2),var(--ink-3)); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero-sub{ margin-top:26px;font-size:clamp(16px,2vw,20px);color:var(--ink-2); max-width:46ch;line-height:1.6; } .hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:38px;} .chips{ list-style:none;display:flex;flex-wrap:wrap;gap:10px;justify-content:center; margin-top:44px; } .chips li{ font-size:13px;color:var(--ink-2);font-weight:500; padding:8px 15px;border-radius:999px; background:var(--card);border:1px solid var(--hairline); } .chips li::before{ content:"";display:inline-block;width:6px;height:6px;border-radius:50%; background:var(--ink-2);margin-right:8px;vertical-align:1px; box-shadow:0 0 8px rgba(255,255,255,.3); } /* ─── buttons ─────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:14px 26px;border-radius:14px; font-size:15px;font-weight:650;letter-spacing:.1px; border:1px solid transparent;cursor:pointer; transition:transform .12s var(--ease),background .2s var(--ease), border-color .2s var(--ease),box-shadow .25s var(--ease),opacity .2s; } .btn:active{transform:translateY(1px) scale(.99);} .btn.primary{ background:linear-gradient(180deg,#FFFFFF 0%,#DCDFE6 100%);color:#0A0A0C; box-shadow:0 10px 30px rgba(244,245,248,.16),inset 0 -1px 0 rgba(0,0,0,.1); } .btn.primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(244,245,248,.24);} .btn.ghost{ background:var(--card);color:var(--ink);border-color:var(--hairline-2); } .btn.ghost:hover{background:var(--card-2);border-color:var(--ink-3);transform:translateY(-2px);} .btn.download{ width:100%;background:var(--inset);color:var(--ink);border-color:var(--hairline-2); } .btn.download:hover{background:#26262b;border-color:var(--ink-3);} /* store buttons (Play / App Store) */ .btn.store{ width:100%;flex-direction:column;align-items:flex-start;gap:1px; padding:11px 20px; background:linear-gradient(180deg,#FFFFFF 0%,#DCDFE6 100%);color:#0A0A0C; } .btn.store:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(244,245,248,.2);} .store-k{font-size:11px;font-weight:500;opacity:.7;letter-spacing:.3px;} .store-b{font-size:17px;font-weight:750;letter-spacing:-.01em;} /* ─── grids ───────────────────────────────────────────────── */ .grid{display:grid;gap:18px;margin-top:44px;} .grid-4{grid-template-columns:repeat(4,1fr);} .grid-3{grid-template-columns:repeat(3,1fr);} .grid-2{grid-template-columns:repeat(2,1fr);} /* ─── card spotlight (pointer-tracked, set via --mx/--my in JS) ── Only on the CLICKABLE cards (downloads + pricing). The feature/benefit cards are static info — no spotlight, no hover reaction. */ .dcard,.pcard{--mx:50%;--my:50%;} .dcard::after,.pcard::after{ content:"";position:absolute;inset:0;border-radius:inherit; opacity:0;transition:opacity .35s var(--ease);pointer-events:none; background:radial-gradient(300px circle at var(--mx) var(--my),rgba(255,255,255,.055),transparent 65%); } .dcard:hover::after,.pcard:hover::after{opacity:1;} /* ─── feature cards ───────────────────────────────────────── */ /* Benefit cards are static info — no hover animation, no highlight. */ .feature{ background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-lg); padding:26px 24px; } .ficon{ width:46px;height:46px;border-radius:13px; display:flex;align-items:center;justify-content:center; background:linear-gradient(160deg,#2A2B30,#141418); border:1px solid var(--hairline-2);color:var(--ink); margin-bottom:18px; box-shadow:0 1px 0 rgba(255,255,255,.05) inset; } .ficon svg{width:24px;height:24px;} .feature h3{font-size:17.5px;font-weight:650;letter-spacing:-.01em;} .feature p{margin-top:9px;font-size:14px;color:var(--ink-2);line-height:1.55;} /* ─── download cards ──────────────────────────────────────── */ .dcard{ background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-lg); padding:22px;display:flex;flex-direction:column;gap:20px; position:relative; transition:transform .3s var(--ease),border-color .3s var(--ease); } .dcard:hover{transform:translateY(-4px);border-color:var(--hairline-2);background:var(--card-2);} .dcard .btn{margin-top:auto;} .dtop{display:flex;align-items:center;gap:15px;} .dglyph{ width:52px;height:52px;border-radius:15px;flex:none; display:flex;align-items:center;justify-content:center; background:linear-gradient(160deg,#1B1B20,#111114); border:1px solid var(--hairline);color:var(--ink); } .dglyph svg{width:28px;height:28px;} .dname{font-size:17px;font-weight:650;letter-spacing:-.01em;} .dsub{font-size:13px;color:var(--ink-2);margin-top:2px;} /* ─── pricing ─────────────────────────────────────────────── */ .pcard{ background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-lg); padding:30px 26px;display:flex;flex-direction:column;position:relative; transition:transform .3s var(--ease),border-color .3s var(--ease); } .pcard:hover{transform:translateY(-5px);border-color:var(--hairline-2);} /* clickable cards highlight on hover; all pricing cards lift the SAME amount (the .best card keeps its gradient border, hence :not(.best)) */ .pcard:not(.best):hover{background:var(--card-2);} .pcard.best{ border-color:transparent; background: linear-gradient(var(--card-2),var(--card-2)) padding-box, linear-gradient(160deg,rgba(255,255,255,.65),rgba(255,255,255,.06)) border-box; box-shadow:0 28px 64px rgba(0,0,0,.55),0 0 44px rgba(255,255,255,.05); } .pbadge{ align-self:flex-start;font-size:11.5px;font-weight:650;letter-spacing:.4px; padding:6px 12px;border-radius:999px;margin-bottom:16px; background:linear-gradient(100deg,var(--hi),var(--hi-2));color:#0A0A0C; } .pbadge.subtle{background:var(--inset);color:var(--ink-2);} .pname{font-size:15px;font-weight:600;color:var(--ink-2);letter-spacing:.2px;} .pprice{ font-size:clamp(38px,5vw,46px);font-weight:750;letter-spacing:-.03em; margin-top:8px;line-height:1;font-variant-numeric:tabular-nums; background:linear-gradient(180deg,#FFFFFF 25%,#AEB2BC 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .pprice span{ font-size:.5em;font-weight:600;color:var(--ink-2); -webkit-text-fill-color:var(--ink-2); } .pper{font-size:13.5px;color:var(--ink-3);margin-top:8px;} .plist{list-style:none;margin:22px 0 26px;display:flex;flex-direction:column;gap:12px;flex:1;} .plist li{ font-size:14.5px;color:var(--ink);padding-left:30px;position:relative; line-height:20px;min-height:20px; } .plist li::before{ content:"";position:absolute;left:0;top:0;width:20px;height:20px; background:no-repeat center/20px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9.25' fill='%23ffffff' fill-opacity='0.07' stroke='%23ffffff' stroke-opacity='0.18' stroke-width='1'/%3E%3Cpath d='M6.2 10.3l2.5 2.5 5.1-5.3' fill='none' stroke='%23F4F5F8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .pcard.best .plist li::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9.25' fill='%23ffffff' fill-opacity='0.14' stroke='%23ffffff' stroke-opacity='0.26' stroke-width='1'/%3E%3Cpath d='M6.2 10.3l2.5 2.5 5.1-5.3' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .pbuy{width:100%;} .pay-chips{margin-top:34px;} .pay-chips li{display:inline-flex;align-items:center;gap:8px;} .pay-chips li::before{content:none;} .pay-chips svg{width:16px;height:16px;opacity:.8;flex:none;} .pay-note{ margin-top:14px;text-align:center;font-size:13.5px;color:var(--ink-3); } /* ─── checkout page ───────────────────────────────────────── */ .checkout{ max-width:660px;margin:0 auto; padding:clamp(44px,7vw,84px) clamp(18px,4vw,34px) 0; } .co-block{margin-top:38px;} .co-label{ font-size:12px;font-weight:650;letter-spacing:1.8px;text-transform:uppercase; color:var(--ink-2);margin-bottom:14px; } .plan-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;} .seg{ font:inherit;color:var(--ink);cursor:pointer; display:flex;flex-direction:column;align-items:center;gap:3px; background:var(--card);border:1px solid var(--hairline);border-radius:16px; padding:14px 10px;position:relative; transition:border-color .2s var(--ease),background .2s var(--ease); } .seg:hover{border-color:var(--hairline-2);} .seg.active{border-color:rgba(255,255,255,.75);background:var(--card-2);} .seg-name{font-size:14px;font-weight:600;letter-spacing:-.01em;} .seg-price{font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums;} .seg-off{ position:absolute;top:-9px;right:10px; font-size:10.5px;font-weight:650;letter-spacing:.3px; padding:2px 8px;border-radius:999px; background:linear-gradient(100deg,var(--hi),var(--hi-2));color:#0A0A0C; } .pm-list{display:flex;flex-direction:column;gap:10px;} .pm{ font:inherit;color:var(--ink);cursor:pointer;width:100%;text-align:left; display:flex;align-items:center;gap:14px; background:var(--card);border:1px solid var(--hairline);border-radius:16px; padding:13px 16px; transition:border-color .2s var(--ease),background .2s var(--ease); } .pm:hover:not(:disabled){border-color:var(--hairline-2);} .pm.active{border-color:rgba(255,255,255,.75);background:var(--card-2);} .pm:disabled{cursor:default;opacity:.45;} .pm-ic{ width:40px;height:40px;border-radius:12px;flex:none; display:flex;align-items:center;justify-content:center; background:linear-gradient(160deg,#1B1B20,#111114); border:1px solid var(--hairline);color:var(--ink); } .pm-ic svg{width:20px;height:20px;} .pm-meta{display:flex;flex-direction:column;gap:1px;min-width:0;} .pm-name{font-size:15px;font-weight:600;letter-spacing:-.01em;} .pm-sub{font-size:12.5px;color:var(--ink-2);} .pm-soon{ margin-left:auto;flex:none; font-size:11px;font-weight:650;letter-spacing:.4px; padding:4px 10px;border-radius:999px; background:var(--inset);color:var(--ink-2); } .pm-check{margin-left:auto;flex:none;width:20px;height:20px;opacity:0;transition:opacity .2s var(--ease);} .pm.active .pm-check{opacity:1;} .co-summary{ margin-top:38px; background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-lg); padding:22px 22px 24px; } .sum-row{ display:flex;justify-content:space-between;gap:16px; font-size:14px;color:var(--ink-2);padding:7px 0; } .sum-row span:last-child{color:var(--ink);font-weight:550;} .sum-row.total{border-top:1px solid var(--hairline);margin-top:8px;padding-top:15px;font-size:15px;align-items:baseline;} .sum-row.total span:last-child{ font-size:21px;font-weight:750;letter-spacing:-.02em;font-variant-numeric:tabular-nums; } .co-pay{width:100%;margin-top:16px;} .co-note{ margin-top:14px;text-align:center;font-size:12.5px;line-height:1.6; color:var(--ink-3);transition:color .3s var(--ease); } .co-note.flash{color:var(--ink);} /* ─── footer ──────────────────────────────────────────────── */ .footer{ margin-top:clamp(80px,12vw,150px); border-top:1px solid var(--hairline); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='117.5 117.5 765 765'%3E%3Cpolygon fill='%23FFFFFF' fill-opacity='0.045' points='875 500 626.6 447.56 738.65 261.35 552.44 373.4 500 125 447.56 373.4 261.35 261.35 373.4 447.56 125 500 373.4 552.44 261.35 738.65 447.56 626.6 500 875 552.44 626.6 738.65 738.65 626.6 552.44 875 500'/%3E%3C/svg%3E") no-repeat right -130px bottom -170px / 460px auto, var(--bg-2); } .footer-inner{ max-width:var(--maxw);margin:0 auto; padding:40px clamp(18px,4vw,34px) 22px; display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; } .footer-links{display:flex;gap:26px;flex-wrap:wrap;} .footer-links a{font-size:14px;color:var(--ink-2);transition:color .2s var(--ease);} .footer-links a:hover{color:var(--ink);} .footer-legal{ max-width:var(--maxw);margin:0 auto; padding:0 clamp(18px,4vw,34px) 40px; font-size:12.5px;color:var(--ink-3); } /* ─── reveal on scroll (progressive: hidden only when JS is on) ── */ .reveal{transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease);} .js .reveal{opacity:0;transform:translateY(22px);filter:blur(6px);} .js .reveal.in{opacity:1;transform:none;filter:none;} .reveal.d1{transition-delay:.06s;} .reveal.d2{transition-delay:.12s;} .reveal.d3{transition-delay:.18s;} .reveal.d4{transition-delay:.24s;} /* ─── responsive ──────────────────────────────────────────── */ @media (max-width:920px){ .grid-4{grid-template-columns:repeat(2,1fr);} /* Single column: keep the plans in natural order (1 → 6 → 12). */ .grid-3{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto;} } @media (max-width:640px){ /* compact nav: the star alone is the brand, links stay reachable */ .nav-brand > span{display:none;} .nav{gap:16px;} .nav-links{gap:18px;} .nav-links a{font-size:13.5px;} .grid-4,.grid-2{grid-template-columns:1fr;} .hero-cta{width:100%;flex-direction:column;} .hero-cta .btn{width:100%;} } @media (prefers-reduced-motion:reduce){ *{animation:none !important;} .reveal{opacity:1;transform:none;filter:none;transition:none;} html{scroll-behavior:auto;} } /* ═══════════════════════════════════════════════════════════════ Backend wiring states (site.js / checkout) — «Скоро» gating and the post-payment result panel. Appended below the design system; monochrome throughout, green (--success) only for the live "subscription active" state. ═══════════════════════════════════════════════════════════════ */ /* «Скоро» — a control the operator hasn't published yet. Kept legible: a slightly lighter card + a muted (not near-invisible) button. */ .btn.is-soon{ cursor:default;pointer-events:none; background:var(--inset);color:var(--ink-2);border-color:var(--hairline-2); box-shadow:none;transform:none; } .btn.store.is-soon{align-items:center;justify-content:center;} .dcard.soon{opacity:.75;} .dcard.soon:hover{transform:none;border-color:var(--hairline);}