/* ========================================================================== LobbyVPN — global chrome (header + footer) ========================================================================== */ /* ========================================================================== Header — lvpn_site_header ========================================================================== */ /* * Sticky positioning is applied to the CHROME WRAPPER, not to

itself. * * A sticky box can only travel inside its own containing block. The header sits * inside `.elementor-widget-container`, which is exactly as tall as the header, * so `position: sticky` on

had nowhere to go and scrolled away. The * wrapper `.lvpn-chrome--header` is a direct child of and spans the page. * * The `:has()` rule lets the widget's "Sticky Header" switcher turn it off. * Browsers without `:has()` keep the sticky default, which is what almost * everyone wants anyway. */ .lvpn-chrome--header { position: sticky; top: 0; z-index: 50; } .lvpn-chrome--header:has(.lvpn-header--static) { position: static; } .lvpn-header { position: relative; z-index: 50; background-color: var(--lvpn-black); transition: box-shadow 0.25s ease, border-color 0.25s ease; } /* Standalone (Elementor canvas, or a header used outside the chrome wrapper). */ .lvpn-chrome--header .lvpn-header { position: static; } /* Applied by frontend.js once the page has scrolled past the top. */ .lvpn-header.is-stuck { border-bottom: 1px solid rgba(98, 255, 140, 0.25); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.9); } .lvpn-header--shrink .lvpn-header__row, .lvpn-header--shrink .lvpn-header__brand img { transition: height 0.25s ease, width 0.25s ease; } .lvpn-header--shrink.is-stuck .lvpn-header__row { height: 54px; } .lvpn-header--shrink.is-stuck .lvpn-header__brand img { width: 156px; } @media (prefers-reduced-motion: reduce) { .lvpn-header, .lvpn-header--shrink .lvpn-header__row, .lvpn-header--shrink .lvpn-header__brand img { transition: none; } } .lvpn-header__bar { margin-inline: auto; padding-inline: 8px; } .lvpn-header__row { display: flex; align-items: center; justify-content: space-between; height: 64px; } .lvpn-header__brand { display: flex; align-items: center; flex: 0 0 auto; } .lvpn-header__brand a { display: block; line-height: 0; } /* Matches the source: the logo is taller than the bar and overhangs it. */ .lvpn-header__brand img { display: block; width: 192px; height: auto; } .lvpn-header__nav { display: none; } .lvpn-header__menu { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; } .lvpn-header__menu li { margin: 0; } .lvpn-header__menu a { position: relative; display: block; padding: 8px 12px; color: #fff; font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; transition: color 0.2s ease; } .lvpn-header__menu a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background-color: #fff; transform: scaleX(0); transition: transform 0.3s ease-out; } /* The source underlines on hover only — WordPress marks the "#features" and "#pricing" custom links as current-menu-item on the front page, which would leave them permanently underlined. */ .lvpn-header__menu a:hover::after, .lvpn-header__menu a:focus-visible::after { transform: scaleX(1); } .lvpn-header__actions { display: none; align-items: center; gap: 16px; } .lvpn-header__toggle { display: inline-flex; align-items: center; justify-content: center; padding: 8px; background: transparent; border: 0; color: #fff; cursor: pointer; border-radius: var(--lvpn-radius-md); transition: background-color 0.2s ease; } /* Both states declared — see the note in blog.css about Hello Elementor's `button:focus, button:hover` pink. */ .lvpn-header__toggle:hover, .lvpn-header__toggle:focus { background-color: var(--lvpn-gray-800); } .lvpn-header__toggle svg { width: 24px; height: 24px; stroke: currentColor; fill: none; } .lvpn-header__toggle .lvpn-header__icon-close, .lvpn-header__toggle[aria-expanded='true'] .lvpn-header__icon-open { display: none; } .lvpn-header__toggle[aria-expanded='true'] .lvpn-header__icon-close { display: block; } .lvpn-header__drawer { padding: 8px 8px 12px; background-color: var(--lvpn-black); border-top: 1px solid var(--lvpn-gray-700); } .lvpn-header__drawer[hidden] { display: none; } .lvpn-header__mobile-menu { list-style: none; margin: 0; padding: 0; } .lvpn-header__mobile-menu a { position: relative; display: block; padding: 8px 12px; color: #fff; font-size: 16px; line-height: 24px; font-weight: 600; text-decoration: none; } .lvpn-header__mobile-menu a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background-color: #fff; transform: scaleX(0); transition: transform 0.3s ease-out; } .lvpn-header__mobile-menu a:hover::after, .lvpn-header__mobile-menu a:focus-visible::after { transform: scaleX(1); } .lvpn-header__mobile-actions { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; padding-bottom: 8px; } .lvpn-header__mobile-actions .lvpn-btn { width: 100%; } @media (min-width: 640px) { .lvpn-header__bar { padding-inline: 24px; } } @media (min-width: 768px) { .lvpn-header__actions { display: flex; } } @media (min-width: 1024px) { .lvpn-header__bar { padding-inline: 32px; } .lvpn-header__brand img { width: 224px; } .lvpn-header--shrink.is-stuck .lvpn-header__brand img { width: 180px; } .lvpn-header__nav { display: flex; align-items: center; } .lvpn-header__toggle, .lvpn-header__drawer { display: none !important; } } /* ========================================================================== Footer — lvpn_site_footer ========================================================================== */ .lvpn-footer { background-color: var(--lvpn-black); color: #fff; border-top: 1px solid var(--lvpn-green-faq); } .lvpn-footer__inner { padding-block: 48px; } .lvpn-footer__grid { display: grid; grid-template-columns: 1fr; gap: 32px; place-items: center; } .lvpn-footer__brand { display: flex; flex-direction: column; align-items: center; text-align: center; } .lvpn-footer__logo { margin-bottom: 24px; } .lvpn-footer__logo img { display: block; height: 80px; width: auto; margin-bottom: 16px; } .lvpn-footer__desc { max-width: 448px; margin-bottom: 24px; color: #fff; font-size: 14px; line-height: 1.625; font-weight: 600; } .lvpn-footer__newsletter { width: 100%; max-width: 448px; margin-bottom: 24px; } .lvpn-footer__heading { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; color: var(--lvpn-green); font-size: 18px; line-height: 28px; font-weight: 700; } .lvpn-footer__heading svg { width: 20px; height: 20px; stroke: currentColor; fill: none; flex: 0 0 auto; } .lvpn-footer__newsletter-text { margin-bottom: 16px; color: var(--lvpn-gray-400); font-size: 14px; line-height: 20px; } .lvpn-newsletter { display: flex; gap: 8px; } .lvpn-newsletter__input { flex: 1 1 auto; min-width: 0; padding: 8px 16px; background-color: var(--lvpn-gray-900); border: 1px solid var(--lvpn-gray-700); border-radius: var(--lvpn-radius); color: #fff; font-family: var(--lvpn-font); font-size: 16px; line-height: 24px; transition: border-color 0.2s ease; } .lvpn-newsletter__input::placeholder { color: var(--lvpn-gray-500); } .lvpn-newsletter__input:focus { outline: none; border-color: var(--lvpn-green); } .lvpn-newsletter__submit { flex: 0 0 auto; } .lvpn-newsletter__submit[disabled] { opacity: 0.5; cursor: not-allowed; } /* Collapsed until it has something to say, so the empty state matches the source layout exactly. */ .lvpn-newsletter__message:empty { display: none; } .lvpn-newsletter__message { margin-top: 10px; font-size: 14px; line-height: 20px; font-weight: 600; } .lvpn-newsletter__message--ok { color: var(--lvpn-green); } .lvpn-newsletter__message--error { color: #ff8080; } /* The source hovers the footer's lime buttons to the soft green, not to the darker lime the header uses. */ .lvpn-footer .lvpn-btn--lime:hover, .lvpn-footer .lvpn-btn--lime:focus { background-color: var(--lvpn-green-soft); color: #000; } .lvpn-footer__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } /* * Below the four-column desktop layout the grid collapses to one centred column * and the brand block centres with it. `justify-self: center` sized each link * column to its widest item and left the text inside left-aligned, so the two * lists landed on different left edges and both sat right of the brand block. * Stretch the box and centre the text; the desktop rules below restore the * left-aligned columns. */ .lvpn-footer__col { align-self: start; justify-self: stretch; text-align: center; } .lvpn-footer__col-title { margin-bottom: 16px; color: var(--lvpn-green); font-size: 18px; line-height: 28px; font-weight: 700; } .lvpn-footer__links { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; } .lvpn-footer__links a { color: #fff; font-weight: 700; text-decoration: none; transition: color 0.2s ease; } .lvpn-footer__links a:hover, .lvpn-footer__links a:focus { color: var(--lvpn-green); } .lvpn-footer__social { display: flex; justify-content: center; gap: 12px; margin-top: 24px; list-style: none; padding: 0; } .lvpn-footer__social a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--lvpn-radius-full); background-color: var(--lvpn-gray-800); color: #fff; transition: background-color 0.2s ease, color 0.2s ease; } .lvpn-footer__social a:hover, .lvpn-footer__social a:focus { background-color: var(--lvpn-green); color: #000; } .lvpn-footer__social svg { width: 16px; height: 16px; fill: currentColor; } .lvpn-footer__bottom { border-top: 1px solid var(--lvpn-gray-800); } .lvpn-footer__bottom-inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; } .lvpn-footer__copyright { color: #fff; font-size: 14px; line-height: 20px; font-weight: 700; } @media (min-width: 640px) { .lvpn-footer__bottom-inner { flex-direction: row; } } /* Two link columns side by side once there is room for them, so the footer is not one very long scroll on tablets. */ @media (min-width: 600px) and (max-width: 1023px) { .lvpn-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .lvpn-footer__brand { grid-column: span 2; } } @media (min-width: 1024px) { .lvpn-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lvpn-footer__col { justify-self: center; text-align: left; } .lvpn-footer__social { justify-content: flex-start; } .lvpn-footer__brand { grid-column: span 2 / span 2; align-items: flex-start; text-align: left; } .lvpn-footer__heading { justify-content: flex-start; } .lvpn-footer__ctas { justify-content: flex-start; } } /* ========================================================================== Elementor compatibility — see the note at the end of sections.css. ========================================================================== */ .lvpn-header .lvpn-header__brand img { width: 192px; height: auto; } .lvpn-footer .lvpn-footer__logo img { height: 80px; width: auto; } @media (min-width: 1024px) { .lvpn-header .lvpn-header__brand img { width: 224px; } }