/* ЯСНО · design-system (yas.css) Премиальная тёмно-золотая система для лендинга, VPN и UI Kit. Темы переключаются через , шрифты — через data-font. Бренд (имя/логотип) задаётся через assets/brand.js. */ /* ============ ТОКЕНЫ ШРИФТОВ ============ */ :root{ /* по умолчанию — как в базе платформы */ --f-display:"Unbounded","SF Pro Display",-apple-system,BlinkMacSystemFont,"Inter",sans-serif; --f-body:"Inter","SF Pro Text",-apple-system,sans-serif; --f-mono:"JetBrains Mono",monospace; } [data-font="inter"] {--f-display:"Inter",sans-serif; --f-body:"Inter",sans-serif} [data-font="unbounded"]{--f-display:"Unbounded",sans-serif; --f-body:"Inter",sans-serif} [data-font="grotesk"] {--f-display:"Space Grotesk",sans-serif; --f-body:"Space Grotesk",sans-serif} [data-font="serif"] {--f-display:"Cormorant Garamond",serif; --f-body:"Inter",sans-serif} [data-font="manrope"] {--f-display:"Manrope",sans-serif; --f-body:"Manrope",sans-serif} /* ============ ТЕМЫ (по умолчанию obsidian+gold) ============ */ :root{ --bg0:#05060a; --bg1:#0a0c14; --bg2:#11131e; --text:#f3eede; --text2:#bcb39c; --muted:#7d7765; --gold:#e8c264; --gold2:#f7e3a6; --gold-deep:#b8902f; --accent:#e8c264; --accent2:#b8902f; --green:#46e2a0; --red:#ff6f8a; --blue:#74c4ff; --violet:#c2acff; --glass:rgba(20,21,30,.55); --glass2:rgba(28,30,42,.6); --bd:rgba(232,194,100,.16); --bd2:rgba(255,255,255,.08); --radius:26px; --radius-sm:16px; --radius-xs:11px; --maxw:1180px; --glow:0 0 60px rgba(232,194,100,.18); --sh:0 30px 80px -30px rgba(0,0,0,.8); } /* Тема «Капитал» — изумруд + золото (деньги) */ [data-theme="capital"]{ --bg0:#040a07; --bg1:#07140d; --bg2:#0c1f15; --gold:#5fe3a6; --gold2:#b8f5d8; --gold-deep:#1f9d6b; --accent:#e8c264; --accent2:#1f9d6b; --bd:rgba(95,227,166,.18); --glow:0 0 60px rgba(95,227,166,.18); } /* Тема «Платина» — графит + холодный металл */ [data-theme="platinum"]{ --bg0:#070809; --bg1:#0e1013; --bg2:#171a1f; --text:#eef1f5; --text2:#aab2bd; --muted:#6c757f; --gold:#cfd8e6; --gold2:#ffffff; --gold-deep:#8b97a8; --accent:#9fd0ff; --accent2:#5a7da8; --bd:rgba(207,216,230,.16); --glow:0 0 60px rgba(159,208,255,.14); } /* Тема «Рубин» — бордо + золото, дорого/премиум */ [data-theme="ruby"]{ --bg0:#0a040a; --bg1:#170610; --bg2:#260a18; --gold:#ffb38a; --gold2:#ffd9c2; --gold-deep:#c2455f; --accent:#e8c264; --accent2:#c2455f; --bd:rgba(255,179,138,.18); --glow:0 0 60px rgba(194,69,95,.2); } /* Тема «Космос» — глубокий синий + фиолет */ [data-theme="space"]{ --bg0:#04050f; --bg1:#0a0c1f; --bg2:#12152e; --gold:#9db4ff; --gold2:#d6e0ff; --gold-deep:#5566c2; --accent:#c2acff; --accent2:#5566c2; --bd:rgba(157,180,255,.16); --glow:0 0 60px rgba(157,180,255,.16); } /* Светлая тема — «Бумага» */ [data-theme="light"]{ --bg0:#f6f3ea; --bg1:#fffdf7; --bg2:#ffffff; --text:#16140d; --text2:#534d3d; --muted:#8a8472; --gold:#b8902f; --gold2:#d6ab43; --gold-deep:#8a6c1e; --accent:#b8902f; --accent2:#8a6c1e; --glass:rgba(255,253,247,.72); --glass2:rgba(248,244,234,.8); --bd:rgba(184,144,47,.22); --bd2:rgba(20,20,20,.07); --glow:0 18px 50px -24px rgba(184,144,47,.4); --sh:0 24px 60px -28px rgba(120,95,30,.35); } /* ============ БАЗА ============ */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:var(--f-body); color:var(--text); background:var(--bg0); min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased; letter-spacing:-.011em; line-height:1.55; } .mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums} h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;line-height:1.05;letter-spacing:-.025em;margin:0} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .gold{color:var(--gold)} .grad{background:linear-gradient(120deg,var(--gold2),var(--gold) 40%,var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent} /* фоновая сцена */ .scene{position:fixed;inset:0;z-index:-2;background: radial-gradient(ellipse at 50% -12%,color-mix(in srgb,var(--gold) 14%,transparent),transparent 46%), radial-gradient(ellipse at 50% 0%,var(--bg2),var(--bg1) 50%,var(--bg0) 100%)} .scene .orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;mix-blend-mode:screen} .orb.o1{width:520px;height:520px;left:-120px;top:-80px;background:radial-gradient(circle,var(--gold),transparent 70%)} .orb.o2{width:480px;height:480px;right:-120px;top:30%;background:radial-gradient(circle,var(--accent2),transparent 70%);opacity:.35} .orb.o3{width:600px;height:600px;left:30%;bottom:-200px;background:radial-gradient(circle,var(--gold-deep),transparent 70%);opacity:.3} .grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* ============ NAV ============ */ .nav{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:blur(18px); background:color-mix(in srgb,var(--bg0) 72%,transparent);border-bottom:1px solid var(--bd2);transition:.3s} .nav .wrap{display:flex;align-items:center;gap:28px;height:68px} .brandbox{display:flex;align-items:center;gap:11px;cursor:pointer} .brandbox .mk{width:38px;height:38px;flex:none;display:grid;place-items:center} .brandbox .mk svg{width:38px;height:38px} .brandbox .bt{font-family:var(--f-display);font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1} .brandbox .bt b{color:var(--gold)} .brandbox .bs{font-size:10px;color:var(--text2);letter-spacing:.18em;text-transform:uppercase;margin-top:3px} .nav .links{display:flex;gap:26px;margin-left:8px} .nav .links a{font-size:14px;color:var(--text2);font-weight:500;transition:.2s} .nav .links a:hover{color:var(--text)} .nav .right{margin-left:auto;display:flex;align-items:center;gap:12px} /* ============ КНОПКИ ============ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 24px;border-radius:14px; font-family:var(--f-body);font-weight:700;font-size:14.5px;cursor:pointer;border:1px solid transparent;transition:.22s;white-space:nowrap} .btn-g{background:linear-gradient(135deg,var(--gold2),var(--gold) 45%,var(--gold-deep));color:#1a1405; box-shadow:0 14px 34px -10px color-mix(in srgb,var(--gold) 60%,transparent),inset 0 1px 0 rgba(255,255,255,.4)} .btn-g:hover{transform:translateY(-2px);box-shadow:0 20px 44px -12px color-mix(in srgb,var(--gold) 70%,transparent)} .btn-o{background:var(--glass);border-color:var(--bd);color:var(--text);backdrop-filter:blur(10px)} .btn-o:hover{border-color:var(--gold);color:var(--gold)} .btn-sm{padding:9px 16px;font-size:13px;border-radius:11px} .btn-lg{padding:16px 30px;font-size:16px;border-radius:16px} /* ============ КАРТОЧКИ / СЕКЦИИ ============ */ section{position:relative;padding:96px 0} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--gold);padding:7px 14px;border:1px solid var(--bd);border-radius:50px; background:color-mix(in srgb,var(--gold) 8%,transparent);margin-bottom:20px} .h-sec{font-size:clamp(30px,4.4vw,52px);margin-bottom:16px} .lead{font-size:clamp(16px,1.7vw,19px);color:var(--text2);max-width:660px;line-height:1.6} .center{text-align:center}.center .lead{margin:0 auto} .card{background:var(--glass);border:1px solid var(--bd2);border-radius:var(--radius);padding:30px; backdrop-filter:blur(14px);box-shadow:var(--sh);transition:.3s;position:relative;overflow:hidden} .card:hover{border-color:var(--bd);transform:translateY(-4px)} .card .ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px; background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 22%,transparent),transparent);border:1px solid var(--bd)} .card .ic svg{width:26px;height:26px;stroke:var(--gold)} .card h3{font-size:20px;margin-bottom:9px} .card p{color:var(--text2);font-size:14.5px;margin:0} .grid{display:grid;gap:20px} .g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)} /* HERO */ .hero{padding:150px 0 90px;text-align:center;position:relative} .hero h1{font-size:clamp(40px,7vw,86px);margin-bottom:22px;letter-spacing:-.04em} .hero .lead{margin:0 auto 36px;font-size:clamp(17px,2vw,21px)} .hero .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .kpis{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;margin-top:60px} .kpi .v{font-family:var(--f-display);font-size:clamp(28px,4vw,44px);font-weight:800;color:var(--gold)} .kpi .l{font-size:13px;color:var(--text2);margin-top:4px} /* pricing */ .price{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch} .plan{background:var(--glass);border:1px solid var(--bd2);border-radius:var(--radius);padding:32px;position:relative;transition:.3s} .plan.feat{border-color:var(--gold);box-shadow:var(--glow)} .plan .pn{font-size:14px;color:var(--text2);font-weight:700;letter-spacing:.04em} .plan .pp{font-family:var(--f-display);font-size:42px;font-weight:800;margin:10px 0 4px} .plan .pp small{font-size:15px;color:var(--text2);font-weight:500} .plan ul{list-style:none;padding:0;margin:20px 0 26px;display:grid;gap:11px} .plan li{display:flex;gap:10px;font-size:14px;color:var(--text2)} .plan li svg{width:18px;height:18px;stroke:var(--gold);flex:none;margin-top:1px} .badge{position:absolute;top:-12px;right:24px;background:linear-gradient(135deg,var(--gold2),var(--gold-deep)); color:#1a1405;font-size:11px;font-weight:800;padding:5px 12px;border-radius:50px;letter-spacing:.04em} /* footer */ footer{border-top:1px solid var(--bd2);padding:54px 0 40px;margin-top:40px} .foot{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between} .foot a{color:var(--text2);font-size:14px;display:block;margin:9px 0;transition:.2s} .foot a:hover{color:var(--gold)} .foot h5{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 14px} /* utility */ .reveal{opacity:0;transform:translateY(26px);transition:.7s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} .pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;padding:6px 13px;border-radius:50px; border:1px solid var(--bd);color:var(--text2);background:var(--glass)} .divgold{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.4;margin:0 auto;max-width:var(--maxw)} @media(max-width:900px){ .nav .links{display:none} .g3,.g4,.price{grid-template-columns:1fr} .g2{grid-template-columns:1fr} section{padding:64px 0} .kpis{gap:26px} }