/* ========================================================================== LobbyVPN — base layer Design tokens, webfont, layout primitives and shared components. Values transcribed from the Next.js/Tailwind source; see DECISIONS.md D-005. ========================================================================== */ /* -------------------------------------------------------------------------- Webfont -------------------------------------------------------------------------- */ @font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('../fonts/orbitron-latin-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* -------------------------------------------------------------------------- Tokens -------------------------------------------------------------------------- */ :root { /* Brand greens */ --lvpn-green: #4aff50; --lvpn-green-soft: #69ff80; --lvpn-green-mint: #71ff7a; --lvpn-green-pale: #7dff81; --lvpn-green-lime: #8ce20d; --lvpn-green-outline: #86ff59; --lvpn-green-dot: #88ff90; --lvpn-green-check: #89ff89; --lvpn-green-card: #96ff91; --lvpn-green-card-2: #6dff77; --lvpn-green-review: #62ff8c; --lvpn-green-faq: #84ffbc; --lvpn-green-steps: #77ff90; --lvpn-green-step-dot: #71ff69; --lvpn-green-star: #47ff3d; --lvpn-green-cta: #4cff73; --lvpn-green-cta-hover: #5ce070; --lvpn-green-lime-hover: #7bc00a; /* Accent cyans / blues */ --lvpn-cyan: #36d3ff; --lvpn-cyan-border: #69ffff; --lvpn-cyan-hover: #0099cc; --lvpn-teal: #18a7c0; /* Greys */ --lvpn-black: #000; --lvpn-surface-1: #121212; --lvpn-surface-2: #1a1a1a; --lvpn-surface-3: #222; --lvpn-surface-4: #262626; --lvpn-surface-5: #333; --lvpn-border-dim: #3b3b3b; --lvpn-border-mid: #454545; --lvpn-text-muted: #949494; --lvpn-text-soft: #c0c0c0; --lvpn-text-quiet: #cecece; --lvpn-text-plan: #bdbdbd; --lvpn-text-answer: #c4c4c4; --lvpn-text-meta: #737373; --lvpn-plan-border: #777; --lvpn-plan-green: #7bff7f; --lvpn-plan-btn-border: #727272; /* Tailwind v4 palette values used verbatim by the source */ --lvpn-green-400: #05df72; --lvpn-gray-300: #d1d5dc; --lvpn-gray-400: #99a1af; --lvpn-gray-500: #6a7282; --lvpn-gray-600: #4a5565; --lvpn-gray-700: #364153; --lvpn-gray-800: #1e2939; --lvpn-gray-900: #101828; --lvpn-red-500: #fb2c36; /* Radii — the source overrides Tailwind's scale with --radius: 0.625rem */ --lvpn-radius: 4px; --lvpn-radius-md: 8px; --lvpn-radius-lg: 10px; --lvpn-radius-xl: 14px; --lvpn-radius-2xl: 16px; --lvpn-radius-full: 9999px; /* Frosted-glass surfaces (contact cards). A translucent fill plus a blur — see the note in pages.css about needing something behind it to blur. */ --lvpn-glass-bg: rgba(255, 255, 255, 0.045); --lvpn-glass-bg-strong: rgba(255, 255, 255, 0.07); --lvpn-glass-border: rgba(255, 255, 255, 0.12); --lvpn-glass-blur: blur(16px) saturate(150%); /* Layout */ --lvpn-container: 100%; --lvpn-font: 'Orbitron', ui-sans-serif, system-ui, sans-serif; } /* -------------------------------------------------------------------------- Element resets that Hello Elementor does not cover -------------------------------------------------------------------------- */ html { scroll-behavior: smooth; /* The sticky header is 64px tall — keep anchor targets clear of it. */ scroll-padding-top: 80px; /* * Horizontal-overflow guard. * * This MUST live on , not on : `overflow-x: hidden` on body * forces `overflow-y: auto`, which turns body into a scroll container and * silently kills `position: sticky` for everything inside it — the header * included. `clip` is preferred because it clips without creating a scroll * container at all; `hidden` is the fallback for older browsers. */ overflow-x: hidden; overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body.lvpn-site { font-family: var(--lvpn-font); background-color: var(--lvpn-black); /* * Elementor Kit 17 still carries a leftover * `linear-gradient(#060303 0%, #F2295B 100%)` body background from the * pre-Kadence design. A background-colour alone does not cover a background * image, so it bled through as a maroon wash on every short page. */ background-image: none; color: #fff; } :where(body.lvpn-site) :where(img) { max-width: 100%; height: auto; } /* * These resets are wrapped in :where() so they carry ZERO specificity. A plain * `body.lvpn-site p { margin: 0 }` would out-rank every single-class section * rule below and silently eat their margins. */ :where(body.lvpn-site) :where(h1, h2, h3, h4, h5, h6) { font-family: var(--lvpn-font); margin: 0; } :where(body.lvpn-site) :where(p, figure, blockquote) { margin: 0; } :where(body.lvpn-site) :where(ul.lvpn-list-reset, ol.lvpn-list-reset) { list-style: none; margin: 0; padding: 0; } /* Elementor wraps every widget; our sections manage their own spacing. */ [class*='elementor-widget-lvpn-'] > .elementor-widget-container { margin: 0; padding: 0; } /* -------------------------------------------------------------------------- Accessibility helpers -------------------------------------------------------------------------- */ .lvpn-skip-link { position: absolute; top: -100px; left: 8px; z-index: 999; padding: 10px 18px; background: var(--lvpn-green); color: #000; font-weight: 700; border-radius: var(--lvpn-radius); text-decoration: none; transition: top 0.2s ease; } .lvpn-skip-link:focus { top: 8px; } .lvpn-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } body.lvpn-site a:focus-visible, body.lvpn-site button:focus-visible, body.lvpn-site input:focus-visible, body.lvpn-site summary:focus-visible { outline: 2px solid var(--lvpn-green); outline-offset: 2px; } /* -------------------------------------------------------------------------- Layout primitives Mirrors Tailwind's `container mx-auto`: fluid, with a max-width step at each breakpoint and no horizontal padding of its own. -------------------------------------------------------------------------- */ .lvpn-container { width: 100%; margin-inline: auto; } @media (min-width: 640px) { .lvpn-container { max-width: 640px; } } @media (min-width: 768px) { .lvpn-container { max-width: 768px; } } @media (min-width: 1024px) { .lvpn-container { max-width: 1024px; } } @media (min-width: 1280px) { .lvpn-container { max-width: 1280px; } } @media (min-width: 1536px) { .lvpn-container { max-width: 1536px; } } /* Padding variants used by individual sections. */ .lvpn-container--px4 { padding-inline: 16px; } .lvpn-container--responsive { padding-inline: 16px; } @media (min-width: 640px) { .lvpn-container--responsive { padding-inline: 24px; } } @media (min-width: 1024px) { .lvpn-container--responsive { padding-inline: 32px; } } /* -------------------------------------------------------------------------- Typography helpers -------------------------------------------------------------------------- */ .lvpn-gradient-text { --lvpn-from: #67ff79; --lvpn-to: #18a7c0; /* The fallback gradient matters: with `color: transparent` and no background-image the text would be invisible. */ background-image: linear-gradient(to right, var(--lvpn-from), var(--lvpn-to)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; /* Keeps descenders from being clipped in Safari. */ padding-bottom: 0.02em; } .lvpn-balance { text-wrap: balance; } .lvpn-pretty { text-wrap: pretty; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .lvpn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--lvpn-font); font-weight: 700; line-height: 1; text-align: center; text-decoration: none; border: 0; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.3s ease, box-shadow 0.3s ease; } .lvpn-btn:focus { text-decoration: none; } /* Sizes */ .lvpn-btn--sm { height: 36px; padding: 8px 16px; font-size: 14px; line-height: 20px; border-radius: 0; } .lvpn-btn--md { height: 36px; padding: 8px 24px; font-size: 14px; line-height: 20px; border-radius: var(--lvpn-radius); } .lvpn-btn--lg { padding: 16px 48px; font-size: 20px; line-height: 28px; border-radius: var(--lvpn-radius); } .lvpn-btn--pill { padding: 16px 32px; font-size: 20px; line-height: 32px; border-radius: var(--lvpn-radius-full); } @media (min-width: 768px) { .lvpn-btn--pill { font-size: 24px; } } /* Variants */ .lvpn-btn--lime { background-color: var(--lvpn-green-lime); color: #000; } .lvpn-btn--lime:hover, .lvpn-btn--lime:focus { background-color: var(--lvpn-green-lime-hover); color: #000; } .lvpn-btn--green { background-color: var(--lvpn-green); color: #000; } .lvpn-btn--green:hover, .lvpn-btn--green:focus { background-color: var(--lvpn-green-lime-hover); color: #000; } .lvpn-btn--outline { background-color: transparent; color: #fff; border: 2px solid var(--lvpn-green-outline); } .lvpn-btn--outline:hover, .lvpn-btn--outline:focus { background-color: rgba(134, 255, 89, 0.1); color: #fff; } .lvpn-btn--outline-dark { background-color: var(--lvpn-black); color: #fff; border: 2px solid var(--lvpn-green-outline); } .lvpn-btn--outline-dark:hover, .lvpn-btn--outline-dark:focus { background-color: var(--lvpn-gray-900); color: #fff; } .lvpn-btn--ghost { background-color: var(--lvpn-black); color: #fff; border: 1px solid var(--lvpn-gray-600); } .lvpn-btn--ghost:hover, .lvpn-btn--ghost:focus { background-color: var(--lvpn-surface-5); color: #fff; } .lvpn-btn--glow { background-color: var(--lvpn-green-soft); color: #000; box-shadow: 0 0 0 8px rgba(140, 255, 165, 0.27); } .lvpn-btn--glow:hover, .lvpn-btn--glow:focus { background-color: var(--lvpn-green-cta-hover); color: #000; transform: scale(1.05); } /* -------------------------------------------------------------------------- Scrollbar treatment carried over from globals.css -------------------------------------------------------------------------- */ .lvpn-scroll { scrollbar-width: thin; scrollbar-color: #4b5563 #1f2937; } .lvpn-scroll::-webkit-scrollbar { width: 8px; } .lvpn-scroll::-webkit-scrollbar-track { background: #1f2937; border-radius: 10px; margin: 4px 0; box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } .lvpn-scroll::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #4b5563 0%, #6b7280 100%); border-radius: 10px; border: 2px solid #1f2937; transition: all 0.3s ease; } .lvpn-scroll::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #6b7280 0%, #9ca3af 100%); border: 2px solid #111827; }