/* ===================================================================== VashVPN — Enterprise theme (scoped to ) Distinct premium look: obsidian + champagne-gold, serif display. Overrides design tokens so injected nav/footer recolour automatically. ===================================================================== */ body.b2b { /* re-map brand tokens to gold — recolours buttons, gradients, accents */ --violet: #cda35c; --cyan: #ecd7a6; --pink: #b8884a; --grad: linear-gradient(120deg, #f7e7c2 0%, #e7c98f 24%, #cda35c 62%, #a87f3c 100%); --grad-soft: linear-gradient(120deg, rgba(205,163,92,.16), rgba(236,215,166,.07)); --glow-violet: 0 0 60px -16px rgba(205,163,92,.5); --glow-cyan: 0 0 60px -16px rgba(236,215,166,.4); --bg: #09090b; --bg-2: #0c0b0e; --surface: rgba(236,215,166,.028); --surface-2: rgba(236,215,166,.05); --line: rgba(236,215,166,.10); --line-strong: rgba(236,215,166,.18); background: #09090b; } /* warm ambient backdrop */ body.b2b .bg-aura { background: radial-gradient(120vw 70vh at 50% -10%, transparent, rgba(9,9,11,.34) 70%), linear-gradient(180deg, rgba(9,9,11,.34), rgba(9,9,11,.66)); } /* recolour the living aurora to champagne/amber on the enterprise page */ body.b2b .aurora { opacity: .58; filter: blur(82px) saturate(130%); } body.b2b .aurora .b1 { background: radial-gradient(circle, #cda35c 0%, transparent 62%); } body.b2b .aurora .b2 { background: radial-gradient(circle, #e7c98f 0%, transparent 62%); } body.b2b .aurora .b3 { background: radial-gradient(circle, #a87f3c 0%, transparent 64%); } body.b2b .aurora .b4 { background: radial-gradient(circle, #7a5b2c 0%, transparent 62%); } /* gold cursor on enterprise */ body.b2b .cursor-dot { background: #e7c98f; box-shadow: 0 0 14px 2px #e7c98f; } body.b2b .cursor-ring { border-color: rgba(205,163,92,.85); box-shadow: 0 0 30px -4px rgba(205,163,92,.7), inset 0 0 16px -6px rgba(205,163,92,.6); } body.b2b .cursor-ring.hot { border-color: rgba(236,215,166,.95); background: radial-gradient(circle, rgba(236,215,166,.12), transparent 70%); } body.b2b .bg-grid { background-image: linear-gradient(rgba(236,215,166,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(236,215,166,.035) 1px, transparent 1px); } /* ---------- Premium serif display ---------- */ body.b2b .page-hero h1, body.b2b .section-head h2, body.b2b .cta-banner h2, body.b2b .b2b-card h3, body.b2b .step h3 { font-family: "Playfair Display", "Times New Roman", Georgia, serif; text-transform: none; letter-spacing: 0; font-weight: 600; } body.b2b .page-hero h1 { line-height: 1.04; font-weight: 600; } body.b2b .section-head h2 { font-size: clamp(30px, 4.6vw, 54px); } body.b2b .cta-banner h2 { line-height: 1.05; } /* refined eyebrow + spacing */ body.b2b .eyebrow { letter-spacing: .26em; color: #e7c98f; border-color: rgba(236,215,166,.22); } body.b2b .eyebrow .dot { background: #e7c98f; box-shadow: 0 0 10px #e7c98f; } body.b2b .crumbs a:hover { color: #e7c98f; } /* gradient text → gold (already via --grad), nudge weight */ body.b2b .gradient-text { font-weight: 600; } /* ---------- Cards: warm hairline, deeper material ---------- */ body.b2b .b2b-card, body.b2b .spec, body.b2b .step { border-color: rgba(236,215,166,.14); background: linear-gradient(180deg, rgba(236,215,166,.05), rgba(255,255,255,.01)); } body.b2b .b2b-card { padding: 36px; } body.b2b .b2b-card:hover { border-color: rgba(236,215,166,.42); box-shadow: 0 36px 80px -34px rgba(0,0,0,.85); } body.b2b .b2b-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(236,215,166,.7), transparent); opacity: 0; transition: opacity .5s var(--ease); } body.b2b .b2b-card:hover::after { opacity: 1; } body.b2b .b2b-card .ico, body.b2b .spec { /* keep */ } body.b2b .b2b-card .ico { color: #e7c98f; border-color: rgba(236,215,166,.25); } /* ---------- Buttons: gold with deep ink text ---------- */ body.b2b .btn-primary { color: #1c1408; box-shadow: 0 18px 54px -20px rgba(205,163,92,.6); } body.b2b .btn-primary:hover { box-shadow: 0 24px 70px -20px rgba(205,163,92,.78); } /* ---------- Specs: serif-free gold numerals stay in Benzin for contrast ---------- */ body.b2b .spec .k { letter-spacing: .01em; } /* ---------- Code block accents ---------- */ body.b2b .codeblock { border-color: rgba(236,215,166,.2); } body.b2b .codeblock pre .tok-key { color: #e7c98f; } body.b2b .codeblock pre .tok-str { color: #d9c08a; } body.b2b .codeblock pre { color: #e8ddc4; } body.b2b .copy-btn:hover { color: #f3e7c6; border-color: rgba(236,215,166,.5); } /* ---------- CTA banner: gold wash ---------- */ body.b2b .cta-banner { border-color: rgba(236,215,166,.22); background: radial-gradient(60% 120% at 50% 0%, rgba(205,163,92,.26), transparent 70%), radial-gradient(60% 120% at 50% 100%, rgba(236,215,166,.14), transparent 70%), rgba(236,215,166,.02); } /* nav primary button + brand accent recolour via tokens automatically. Make the wordmark accent gold on this page too. */ body.b2b .brand b span { color: #cda35c; } body.b2b .brand:hover b span { color: #e7c98f; } /* a touch more breathing room = premium pacing */ body.b2b .section-pad { padding: clamp(72px, 12vw, 150px) 0; } /* gold rotating border on the enterprise CTA */ body.b2b .cta-banner::before { background: conic-gradient(from var(--gb), rgba(205,163,92,0) 0deg, #cda35c 70deg, #e7c98f 160deg, #a87f3c 240deg, rgba(205,163,92,0) 360deg); }