/* ====================================================================== WHITE VPN — design system Dark · premium · glassmorphism · bold grotesk · monochrome + 1 accent Three switchable directions via [data-direction] on ====================================================================== */ /* General Sans + JetBrains Mono load online; offline they fall back to system-ui / ui-monospace. */ @import url('https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&f[]=jetbrains-mono@400,500&display=swap'); /* Clash Display inlined with absolute URLs so it embeds in standalone/offline builds. */ @font-face { font-family: 'Clash Display'; src: url("fonts/ClashDisplay-Medium.woff2") format('woff2'); font-weight: 500; font-display: swap; font-style: normal; } @font-face { font-family: 'Clash Display'; src: url("fonts/ClashDisplay-Semibold.woff2") format('woff2'); font-weight: 600; font-display: swap; font-style: normal; } @font-face { font-family: 'Clash Display'; src: url("fonts/ClashDisplay-Bold.woff2") format('woff2'); font-weight: 700; font-display: swap; font-style: normal; } /* ---------------------------------------------------------------------- TOKENS ---------------------------------------------------------------------- */ :root { /* type */ --font-display: 'Clash Display', 'General Sans', system-ui, sans-serif; --font-body: 'General Sans', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* neutral ramp — cool-toned dark */ --bg-0: oklch(0.145 0.008 265); --bg-1: oklch(0.175 0.009 265); --ink: oklch(0.98 0.004 265); --ink-soft: oklch(0.78 0.008 265); --ink-mute: oklch(0.62 0.01 265); --ink-faint: oklch(0.46 0.012 265); /* glass */ --glass-bg: rgba(255, 255, 255, 0.045); --glass-bg-strong: rgba(255, 255, 255, 0.07); --glass-brd: rgba(255, 255, 255, 0.10); --glass-brd-strong: rgba(255, 255, 255, 0.16); --glass-blur: 22px; /* accent (overridden per direction) */ --accent: oklch(0.72 0.16 240); --accent-2: oklch(0.80 0.13 205); --accent-rgb: 90, 160, 255; --on-accent: oklch(0.16 0.02 260); /* aurora field colors */ --aura-1: oklch(0.62 0.19 250 / 0.55); --aura-2: oklch(0.70 0.15 205 / 0.40); --aura-3: oklch(0.55 0.16 290 / 0.30); /* geometry */ --r-xs: 10px; --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-xl: 38px; --r-pill: 999px; /* shadow */ --sh-glass: 0 1px 0 0 rgba(255,255,255,0.08) inset, 0 0 0 1px rgba(0,0,0,0.20), 0 24px 60px -24px rgba(0,0,0,0.7); --sh-lift: 0 30px 80px -30px rgba(0,0,0,0.85); /* layout */ --maxw: 1200px; --gutter: clamp(20px, 5vw, 60px); --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ====================================================================== THEMES (data-direction on ) Old site shipped 8 themes — 4 are built below, 4 slots are reserved. TO ADD A THEME: 1. Copy a block below, rename [data-direction=""], tweak the tokens. Required tokens: --accent --accent-2 --accent-rgb --on-accent --aura-1/2/3 (background glows) --bg-0 --bg-1. --accent-rgb must be the plain R,G,B of --accent (used in shadows/glows). --on-accent = text/icon color that sits ON a solid --accent fill. 2. Register it in assets/tweaks.jsx → THEMES (id + swatch). See the commented TEMPLATE after the MONO block. ====================================================================== */ /* DIRECTION 1 — AURORA (electric blue / cyan) */ /* DIRECTION 2 — PULSE (acid lime / chartreuse) */ /* DIRECTION 3 — IRIS (violet / indigo) */ /* DIRECTION 4 — MONO (old-site colors: near-black + crisp white accent) */ /* ----- TEMPLATE: copy, uncomment, rename , then register in tweaks.jsx ----- -------------------------------------------------------------------------------- */ /* ===== 8 ТЕМ — те же оттенки, что в приложении WhiteApp ===== */ [data-direction="mocha"]{ /* Кофе — по умолчанию */ --accent:#cda063; --accent-2:#a8814a; --accent-rgb:205,160,99; --on-accent:#1c140c; --bg-0:#16110c; --bg-1:#211a13; --ink:#f1e9dd; --ink-soft:#bdae9b; --ink-mute:#897a67; --ink-faint:#5f5547; --glass-bg:rgba(255,255,255,0.05); --glass-bg-strong:rgba(255,255,255,0.085); --glass-brd:rgba(255,255,255,0.10); --glass-brd-strong:rgba(255,255,255,0.16); --aura-1:rgba(205,160,99,0.30); --aura-2:rgba(205,160,99,0.18); --aura-3:rgba(168,129,74,0.14); } [data-direction="black"]{ /* Чёрная */ --accent:#ffffff; --accent-2:#c7c7cc; --accent-rgb:255,255,255; --on-accent:#000000; --bg-0:#0a0a0a; --bg-1:#161616; --ink:#ffffff; --ink-soft:#a0a0a5; --ink-mute:#6e6e73; --ink-faint:#48484c; --glass-bg:rgba(255,255,255,0.05); --glass-bg-strong:rgba(255,255,255,0.085); --glass-brd:rgba(255,255,255,0.10); --glass-brd-strong:rgba(255,255,255,0.16); --aura-1:rgba(255,255,255,0.13); --aura-2:rgba(160,160,170,0.10); --aura-3:rgba(120,130,150,0.08); } [data-direction="midnight"]{ /* Полночь — тёмно-синяя */ --accent:#4da6e0; --accent-2:#3a7bb0; --accent-rgb:77,166,224; --on-accent:#04101c; --bg-0:#08111e; --bg-1:#0d1827; --ink:#eaf1f8; --ink-soft:#a9bcd0; --ink-mute:#6e8197; --ink-faint:#46586c; --glass-bg:rgba(255,255,255,0.05); --glass-bg-strong:rgba(255,255,255,0.085); --glass-brd:rgba(255,255,255,0.10); --glass-brd-strong:rgba(255,255,255,0.16); --aura-1:rgba(77,166,224,0.32); --aura-2:rgba(58,123,176,0.20); --aura-3:rgba(77,166,224,0.12); } [data-direction="forest"]{ /* Лес — тёмно-зелёная */ --accent:#5bbe7e; --accent-2:#469963; --accent-rgb:91,190,126; --on-accent:#06120a; --bg-0:#0a140d; --bg-1:#101e15; --ink:#e9f4ec; --ink-soft:#aac6b2; --ink-mute:#6e8a77; --ink-faint:#48604f; --glass-bg:rgba(255,255,255,0.05); --glass-bg-strong:rgba(255,255,255,0.085); --glass-brd:rgba(255,255,255,0.10); --glass-brd-strong:rgba(255,255,255,0.16); --aura-1:rgba(91,190,126,0.30); --aura-2:rgba(70,153,99,0.18); --aura-3:rgba(91,190,126,0.12); } [data-direction="white"]{ /* Белая — светлая */ --accent:#1c1c1e; --accent-2:#48484a; --accent-rgb:28,28,30; --on-accent:#ffffff; --bg-0:#f2f2f5; --bg-1:#ffffff; --ink:#1c1c1e; --ink-soft:#48484a; --ink-mute:#8a8a8e; --ink-faint:#b4b4b9; --glass-bg:rgba(255,255,255,0.60); --glass-bg-strong:rgba(255,255,255,0.82); --glass-brd:rgba(0,0,0,0.08); --glass-brd-strong:rgba(0,0,0,0.12); --aura-1:rgba(28,28,30,0.05); --aura-2:rgba(120,120,130,0.06); --aura-3:rgba(90,90,100,0.05); } [data-direction="beige"]{ /* Латте — светлая бежевая */ --accent:#6f4e37; --accent-2:#8a6a4f; --accent-rgb:111,78,55; --on-accent:#ffffff; --bg-0:#fbf6ef; --bg-1:#ffffff; --ink:#3b2f2a; --ink-soft:#7a6a5a; --ink-mute:#a89a88; --ink-faint:#c8bba9; --glass-bg:rgba(255,255,255,0.55); --glass-bg-strong:rgba(255,255,255,0.80); --glass-brd:rgba(60,40,25,0.10); --glass-brd-strong:rgba(60,40,25,0.14); --aura-1:rgba(111,78,55,0.12); --aura-2:rgba(138,106,79,0.10); --aura-3:rgba(180,150,110,0.10); } [data-direction="sky"]{ /* Небо — светлая голубая */ --accent:#2e7bd6; --accent-2:#5a98dd; --accent-rgb:46,123,214; --on-accent:#ffffff; --bg-0:#f2f7fc; --bg-1:#ffffff; --ink:#14233a; --ink-soft:#4a5e78; --ink-mute:#8a9bb0; --ink-faint:#aebccc; --glass-bg:rgba(255,255,255,0.55); --glass-bg-strong:rgba(255,255,255,0.82); --glass-brd:rgba(20,40,70,0.08); --glass-brd-strong:rgba(20,40,70,0.12); --aura-1:rgba(46,123,214,0.14); --aura-2:rgba(90,152,221,0.12); --aura-3:rgba(46,123,214,0.08); } [data-direction="rose"]{ /* Сакура — светлая розовая */ --accent:#d6588a; --accent-2:#e07fa6; --accent-rgb:214,88,138; --on-accent:#ffffff; --bg-0:#fdf4f6; --bg-1:#ffffff; --ink:#3a1f2a; --ink-soft:#785a64; --ink-mute:#b09aa0; --ink-faint:#ccb8be; --glass-bg:rgba(255,255,255,0.55); --glass-bg-strong:rgba(255,255,255,0.82); --glass-brd:rgba(80,30,50,0.08); --glass-brd-strong:rgba(80,30,50,0.12); --aura-1:rgba(214,88,138,0.14); --aura-2:rgba(224,127,166,0.12); --aura-3:rgba(214,88,138,0.08); } /* на светлых темах цветные пятна должны затемнять, а не светлить */ [data-direction="white"] .aurora__blob, [data-direction="beige"] .aurora__blob, [data-direction="sky"] .aurora__blob, [data-direction="rose"] .aurora__blob { mix-blend-mode: multiply; opacity: 0.65; } /* font tweak hooks */ [data-font="grotesk"] { --font-display: 'Clash Display','General Sans',sans-serif; } [data-font="neue"] { --font-display: 'General Sans', system-ui, sans-serif; } /* motion off */ [data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } /* ---------------------------------------------------------------------- RESET / BASE ---------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: dark; } [data-direction="white"], [data-direction="beige"], [data-direction="sky"], [data-direction="rose"] { color-scheme: light; } body { font-family: var(--font-body); background: var(--bg-0); color: var(--ink); line-height: 1.5; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; font-feature-settings: "ss01", "cv01"; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } img, svg { display: block; max-width: 100%; } ::selection { background: var(--accent); color: var(--on-accent); } /* scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); background-clip: padding-box; } /* ---------------------------------------------------------------------- LAYOUT ---------------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { position: relative; padding-block: clamp(80px, 11vw, 160px); } .eyebrow { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 9px; } .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px 1px var(--accent); } /* ---------------------------------------------------------------------- TYPE ---------------------------------------------------------------------- */ .display { font-family: var(--font-display); font-weight: 600; line-height: 0.96; letter-spacing: -0.025em; text-wrap: balance; } h1.display { font-size: clamp(40px, 7vw, 94px); } h2.display { font-size: clamp(34px, 5.4vw, 72px); font-weight: 600; } h3.display { font-size: clamp(24px, 2.8vw, 38px); font-weight: 600; line-height: 1.04; } .lead { font-size: clamp(17px, 1.55vw, 21px); color: var(--ink-soft); line-height: 1.55; max-width: 56ch; text-wrap: pretty; } .muted { color: var(--ink-mute); } .accent-text { color: var(--accent); } .grad-text { background: linear-gradient(100deg, var(--ink) 30%, var(--accent) 75%, var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------------------------------------------------------------------- GLASS ---------------------------------------------------------------------- */ .glass { position: relative; background: var(--glass-bg); border: 1px solid var(--glass-brd); border-radius: var(--r-lg); backdrop-filter: blur(var(--glass-blur)) saturate(1.4); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4); box-shadow: var(--sh-glass); } .glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(160deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 35%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.7; } .glass-strong { background: var(--glass-bg-strong); border-color: var(--glass-brd-strong); } /* ---------------------------------------------------------------------- BUTTONS ---------------------------------------------------------------------- */ .btn { --pad-y: 15px; --pad-x: 26px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: var(--pad-y) var(--pad-x); border-radius: var(--r-pill); font-family: var(--font-body); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s, border-color .25s, color .25s; will-change: transform; } .btn:active { transform: translateY(1px) scale(0.99); } .btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 12px 30px -10px rgba(var(--accent-rgb), 0.6); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset, 0 20px 44px -12px rgba(var(--accent-rgb), 0.75); } .btn-primary::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 45%); opacity: 0.5; pointer-events: none; } .btn-glass { background: var(--glass-bg-strong); border: 1px solid var(--glass-brd-strong); color: var(--ink); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .btn-glass:hover { transform: translateY(-2px); background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.24); } .btn-ghost { color: var(--ink-soft); padding-inline: 14px; } .btn-ghost:hover { color: var(--ink); } .btn-lg { --pad-y: 18px; --pad-x: 34px; font-size: 17px; } .btn-sm { --pad-y: 10px; --pad-x: 18px; font-size: 14px; } .btn-block { display: flex; width: 100%; } /* chip */ .chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill); background: var(--glass-bg); border: 1px solid var(--glass-brd); font-size: 13.5px; font-weight: 500; color: var(--ink-soft); white-space: nowrap; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px 1px var(--accent); } /* ---------------------------------------------------------------------- AURORA BACKGROUND ---------------------------------------------------------------------- */ .aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background: var(--bg-0); } .aurora__blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.9; mix-blend-mode: screen; } .aurora__blob.b1 { width: 60vw; height: 60vw; left: -10vw; top: -18vw; background: radial-gradient(circle at 50% 50%, var(--aura-1), transparent 70%); animation: drift1 26s var(--ease) infinite alternate; } .aurora__blob.b2 { width: 50vw; height: 50vw; right: -12vw; top: 6vh; background: radial-gradient(circle at 50% 50%, var(--aura-2), transparent 70%); animation: drift2 32s var(--ease) infinite alternate; } .aurora__blob.b3 { width: 46vw; height: 46vw; left: 22vw; bottom: -22vw; background: radial-gradient(circle at 50% 50%, var(--aura-3), transparent 70%); animation: drift3 38s var(--ease) infinite alternate; } .aurora__grain { position: absolute; inset: 0; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .aurora__vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% -10%, transparent 40%, var(--bg-0) 92%); } @keyframes drift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(10vw, 8vh) scale(1.15); } } @keyframes drift2 { from { transform: translate(0,0) scale(1.05); } to { transform: translate(-8vw, 10vh) scale(0.92); } } @keyframes drift3 { from { transform: translate(0,0) scale(0.95); } to { transform: translate(6vw, -8vh) scale(1.2); } } /* ---------------------------------------------------------------------- SCROLL REVEAL Animates transform only — content is ALWAYS visible (opacity:1), so it can never get stuck hidden if the animation stays pending (some embed/capture contexts never paint to start CSS animations). Real browsers play the slide. ---------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(28px) scale(0.985); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } [data-motion="off"] .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } /* ---------------------------------------------------------------------- GRID HELPERS ---------------------------------------------------------------------- */ .grid { display: grid; gap: 20px; } .flex { display: flex; } .center { align-items: center; } .between { justify-content: space-between; } .gap-sm { gap: 10px; } .gap-md { gap: 18px; } .gap-lg { gap: 28px; } .wrap-f { flex-wrap: wrap; } /* ====================================================================== +4 ТЕМЫ (до 8, как на старом сайте) — добавлено при переносе дизайна ====================================================================== */ /* МОБИЛА: производительность. backdrop-filter/blur и mix-blend на телефоне дико тяжёлые (перерисовка каждого стекла при скролле) -> убираем, стекло заменяем плотной полупрозрачной подложкой. Визуально почти то же. */ @media (max-width: 820px) { .aurora__blob { animation: none !important; filter: blur(55px); mix-blend-mode: normal; opacity: 0.5; } .glass, .glass-strong, .btn-glass, .chip, .site-header, .site-header.is-scrolled, .mobile-menu, .modal__panel { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .glass::before { display: none; } .glass { background: color-mix(in srgb, var(--bg-1) 92%, transparent); } .glass-strong, .modal__panel { background: color-mix(in srgb, var(--bg-1) 96%, transparent); } .btn-glass, .chip { background: color-mix(in srgb, var(--bg-1) 90%, transparent); } .site-header.is-scrolled { background: color-mix(in srgb, var(--bg-0) 88%, transparent); } } /* МОБИЛА: reveal без сдвига — только плавная прозрачность, иначе элементы "прыгают" при попадании в зону видимости во время скролла */ @media (max-width: 820px) { /* reveal: только прозрачность на мобиле */ .reveal { transform: none !important; transition: opacity 0.5s ease !important; } .reveal.in { transform: none !important; } }