/* OllaVPN — Enterprise theme (Light) Design tokens retuned 2026-06-05 to match networkershome.com's GlobalLayout.C6huUVYO.css exactly: same red, same secondary blue/ violet/amber accents, same Lato self-host pattern, same Tailwind- scale radius. Content stays ours; visual system is borrowed. */ :root { /* Surface tokens (2026-06-09): pure-white page bg. Visual depth comes from a faint brand-red grid pattern painted on (NetworkersHome pattern), not from off-white tint. Cards lift via 1px line + shadow. */ /* Premium PQC dark (2026-07): near-black canvas + violet primary. Token NAMES unchanged so the whole site + blog inherit; --red now carries the VIOLET brand accent, red retired to logo/alerts. */ --bg: #0B0B12; /* canvas — near-black */ --bg-2: #14141C; /* surface-1: alt sections */ --grid-line: rgba(124, 92, 255, 0.06); /* faint violet grid */ --grid-size: 32px; --bg-tint: rgba(34, 211, 238, 0.07); /* cyan-tint info card */ --panel: #14141C; /* cards */ --panel-2: #1C1C26; /* raised panel */ --line: rgba(255, 255, 255, 0.09); /* hairline — border-first */ --line-2: rgba(255, 255, 255, 0.14); --text: #ECECF2; /* near-white */ --text-dim: #A8A8B6; --text-mute: #6E6E7C; --surface-dark: #14122A; /* deep indigo band — footer + trust */ --red: #7C5CFF; /* PRIMARY = electric violet (brand accent) */ --red-2: #6D4EE6; /* hover/pressed */ --red-soft: rgba(124, 92, 255, 0.14); --amber: #FBBF24; --amber-2: #F59E0B; --green: #34D399; --blue: #22D3EE; /* quantum cyan */ --violet: #8B5CF6; /* PQC accent */ /* Radius — default bumped to 12px for softer modern cards; 6/8/16 retained. */ --radius: 12px; --radius-sm: 6px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 9999px; /* Card shadow: 2-layer lift (contact + ambient) — buildbetter signature. */ --shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.38); --shadow-card-hover: 0 1px 2px rgba(0,0,0,.45), 0 18px 46px rgba(0,0,0,.55); /* Radial hero glow — violet wash centered behind the H1 */ --gradient-hero: radial-gradient(60% 60% at 50% 0%, rgba(124,92,255,.14), transparent 70%); /* Type system (2026-06-10): Lato for BOTH body + display so every head across the site carries the same chunky personality as the hero H1. Display heads use Lato 700 (Bold, self-hosted at lato-700-latin.woff2). Inter is left available but unused — preload kept for now in case we swap back; can drop in a follow-up if we commit to single-family. */ --sans: "Lato", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --display: "Lato", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; } * { box-sizing: border-box; } html { margin: 0; padding: 0; background: var(--bg); } body { margin: 0; padding: 0; font-family: var(--sans); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-size: 16px; line-height: 1.55; font-feature-settings: "ss01", "cv11"; /* Pure-white page + faint brand-red grid pattern (NetworkersHome shape). Two 1px linear-gradients give a perfectly tiled square grid; sections that set their own solid background will mask it for intentional rhythm. */ background: linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / var(--grid-size) var(--grid-size), var(--bg); } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } /* Layout */ .wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 28px; } /* Type — sized to enterprise norms (Proton ~52, Express ~56) rather than deck-presentation scale. Old upper bound was 88px (ItemUI #1, 2026-05-15). */ /* Display: bright + bold sitewide (2026-06-10). Every h1/h2/h3 across ~125 pages now wears Lato 700 with -0.045em kerning and 1.0 leading — the same energy as the hero H1, scaled down. Hero H1 keeps its own bigger 92px override in index.html for masthead distinction. */ .h-display { font-family: var(--display); font-weight: 700; letter-spacing: -0.045em; line-height: 1.0; font-optical-sizing: auto; } .h1 { font-size: clamp(28px, 3.5vw, 45px); } .h2 { font-size: clamp(20px, 2.4vw, 31px); } .h3 { font-size: clamp(16px, 1.4vw, 20px); font-weight: 700; letter-spacing: -0.03em; } /* Bare h1/h2/h3 elements (no .h-display class) — blog posts, tech pages, anything generated by marketing-gen. Apply the same bold typography so "bright + bold" propagates everywhere, not just elements with classes. */ h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; color: var(--text); } h2 { font-size: clamp(22px, 2.6vw, 32px); } h3 { font-size: clamp(17px, 1.6vw, 22px); letter-spacing: -0.03em; } /* Marketing-gen .article template inlines `.article h2/h3 { font-weight: 600 }` in every blog post + tech page (~110 files), and the inline