@charset "utf-8"; /* ========================================================================== Super Unlimited — Homepage (WPO-2435 light/dark redesign) ========================================================================== */ /* -- Fonts ---------------------------------------------------------------- */ @font-face { font-family: 'poppinsregular'; src: url('../fonts/poppins-regular-webfont.woff2') format('woff2'), url('../fonts/poppins-regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'poppinssemibold'; src: url('../fonts/poppins-semibold-webfont.woff2') format('woff2'), url('../fonts/poppins-semibold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'poppinsbold'; src: url('../fonts/Poppins-Bold.woff2') format('woff2'), url('../fonts/Poppins-Bold.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } /* -- Design tokens --------------------------------------------------------- Light is the default palette on :root; the dark palette overrides the same custom properties under [data-theme="dark"]. An inline script in sets data-theme before first paint (see home.html). Every section below reads only these variables for color, so re-theming never touches component rules. -------------------------------------------------------------------------- */ :root { color-scheme: light; --hp-bg: #ffffff; --hp-text: #020202; --hp-text-muted: rgba(2, 2, 2, 0.7); --hp-accent: #2e96ef; --hp-accent-rgb: 46, 150, 239; --hp-accent-bright: #2e96ef; --hp-border-rgb: 214, 228, 255; --hp-border: #d6e4ff; --hp-card-bg: #ffffff; --hp-card-shadow: 0 4px 32px rgba(58, 154, 255, 0.12); --hp-feature-card-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 16%, rgba(214, 228, 255, 0.24) 34%, rgba(255, 255, 255, 0.8) 50%); --hp-feature-card-shadow: 0 4px 22px rgba(214, 228, 255, 0.55); --hp-leader-shadow: 0 8px 16px rgba(214, 228, 255, 0.7); --hp-leader-photo-bg: rgba(214, 228, 255, 0.2); --hp-header-bg: rgba(255, 255, 255, 0.8); --hp-cta-text: #020202; --hp-cta-orange: #ffb703; --hp-cta-tan: #b5a387; } :root[data-theme="dark"] { color-scheme: dark; --hp-bg: #020202; --hp-text: #ffffff; --hp-text-muted: rgba(255, 255, 255, 0.75); --hp-border-rgb: 58, 154, 255; --hp-border: #3a9aff; --hp-accent-bright: #3a9aff; --hp-card-bg: #020202; --hp-card-shadow: none; --hp-feature-card-bg: linear-gradient(221deg, rgba(58, 154, 255, 0.072) 3%, rgba(58, 154, 255, 0.08) 95%), #020202; --hp-feature-card-shadow: none; --hp-leader-shadow: none; --hp-leader-photo-bg: #eff6f7; --hp-header-bg: rgba(2, 2, 2, 0.75); } /* -- Reset & base ----------------------------------------------------------- */ .hp-root, .hp-root *, .hp-root *::before, .hp-root *::after { box-sizing: border-box; } .hp-root { background: var(--hp-bg); color: var(--hp-text); font-family: 'poppinsregular', Arial, sans-serif; font-size: 18px; line-height: 1.6; overflow-x: hidden; transition: background-color 0.25s ease, color 0.25s ease; } .hp-root img { max-width: 100%; height: auto; display: block; background-color: transparent; forced-color-adjust: none; } .hp-root a { cursor: pointer; } .hp-root :focus-visible { outline: 2px solid var(--hp-accent); outline-offset: 3px; } .hp-container { max-width: 1440px; margin: 0 auto; padding: 0 150px; } .hp-section { position: relative; padding: 80px 0; } /* Theme-swapped assets: markup includes both a light and dark image/element, CSS shows the one matching the active theme (per project convention — no JS src-swapping). */ .hp-root .hp-theme-light { display: block; } .hp-root .hp-theme-dark { display: none; } html[data-theme="dark"] .hp-root .hp-theme-light { display: none; } html[data-theme="dark"] .hp-root .hp-theme-dark { display: block; } /* -- Header / Nav ------------------------------------------------------------ */ .hp-header { position: sticky; top: 0; z-index: 1000; width: 100%; padding: 42px 0; background: var(--hp-bg); border-bottom: 1px solid transparent; transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .hp-header.sticky { padding: 20px 0; border-bottom-color: var(--hp-border); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); } :root[data-theme="dark"] .hp-header.sticky { border-bottom-color: transparent; } /* Keeps in-page anchor targets (nav links, footer links) from landing underneath the sticky header. */ #what-we-do, #vpn, #esim, #2nd-line, #leadership, #contact { scroll-margin-top: 110px; } .hp-header__inner { max-width: 1440px; margin: 0 auto; padding: 0 100px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .hp-logo, .hp-logo:visited { display: flex; align-items: center; gap: 15px; text-decoration: none; color: var(--hp-text); } .hp-logo:hover, .hp-logo:focus { text-decoration: none; color: var(--hp-text); } .hp-header .hp-logo:focus, .hp-header .hp-logo:focus-visible, .hp-header .hp-logo:active { outline: none; box-shadow: none; } .hp-logo__mark { flex: 0 0 auto; width: 36px; height: 36px; background-image: url('../images/logo.png'); background-repeat: no-repeat; background-position: left center; background-size: auto 100%; } .hp-logo__wordmark { font-family: 'poppinsbold'; font-size: 22px; letter-spacing: 0.2px; color: var(--hp-text); white-space: nowrap; } .hp-nav { display: flex; align-items: center; gap: 40px; } .hp-nav__list { display: flex; align-items: center; gap: 32px; margin: 0; padding: 0; list-style: none; } .hp-nav__list a, .hp-nav__list a:visited { font-family: 'poppinsregular'; font-weight: 500; font-size: 16px; line-height: 24px; color: var(--hp-text); text-decoration: none; white-space: nowrap; } .hp-nav__list a:hover, .hp-nav__list a:focus { color: var(--hp-accent); } .hp-nav__list a:focus, .hp-nav__list a:focus-visible, .hp-nav__list a:active { outline: none; box-shadow: none; } .hp-nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 30px; height: 30px; padding: 0; border: none; background: transparent; cursor: pointer; } .hp-nav-toggle .hp-bar { display: block; width: 100%; height: 2px; background: var(--hp-text); border-radius: 2px; } @media (max-width: 1024px) { .hp-header__inner { padding: 0 40px; } .hp-nav-toggle { display: flex; } .hp-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 24px; padding: 24px 40px 32px; background: var(--hp-bg); border-bottom: 1px solid var(--hp-border); display: none; } .hp-nav.in { display: flex; } .hp-nav__list { flex-direction: column; align-items: flex-start; gap: 16px; } } @media (max-width: 767px) { .hp-header { padding: 24px 0; } .hp-header__inner { padding: 0 20px; } .hp-logo__wordmark { font-size: 18px; } } /* -- Hero -------------------------------------------------------------------- */ .hp-hero { padding: 80px 0 100px; } .hp-hero__content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; } .hp-hero__title { margin: 0; max-width: 1140px; font-family: 'poppinsbold'; font-size: 80px; line-height: 100px; text-transform: capitalize; color: var(--hp-text); } .hp-hero__subcopy { margin: 0; max-width: 769px; font-family: 'poppinsregular'; font-weight: 500; font-size: 26px; line-height: 1.5; color: var(--hp-text); } [data-theme="dark"] .hp-hero__subcopy { color: var(--hp-accent-bright); } .hp-hero__investors { margin-top: 46px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 40px 60px; } .hp-hero__investors-label { font-family: 'poppinsregular'; font-weight: 500; font-size: 24px; color: var(--hp-text); } .hp-hero__investors img { height: 40px; width: auto; } @media (max-width: 1024px) { .hp-hero__title { font-size: 56px; line-height: 1.15; } .hp-hero__subcopy { font-size: 22px; } } @media (max-width: 767px) { .hp-hero { padding: 48px 0 64px; } .hp-hero__title { font-size: 36px; } .hp-hero__subcopy { font-size: 18px; } .hp-hero__investors { gap: 20px 32px; } .hp-hero__investors-label { font-size: 18px; width: 100%; } } /* -- Stats --------------------------------------------------------------- */ .hp-stats { padding: 0 0 80px; } .hp-stats__grid { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; } .hp-stat-card { flex: 1 1 0; min-width: 0; max-width: 330px; padding: 40px 30px; border-radius: 20px; border: 1.5px solid var(--hp-border); background: var(--hp-card-bg); box-shadow: var(--hp-card-shadow); display: flex; flex-direction: column; align-items: center; gap: 24px; } .hp-stat-card__icon-wrap { width: 150px; height: 150px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .hp-stat-card__icon { width: auto; max-width: 100%; max-height: 100%; } .hp-stat-card p { margin: 0; text-align: center; font-family: 'poppinsregular'; font-size: 22px; line-height: 1.4; color: var(--hp-text); } .hp-stat-card strong { font-family: 'poppinsbold'; font-weight: normal; } @media (max-width: 767px) { .hp-stats__grid { gap: 24px; } .hp-stat-card { flex-basis: 100%; max-width: 420px; padding: 30px 24px; } .hp-stat-card__icon-wrap { width: 110px; height: 110px; } .hp-stat-card p { font-size: 18px; } } /* -- Privacy banner + feature cards --------------------------------------- */ .hp-privacy__intro { max-width: 900px; margin: 0 auto 50px; display: flex; flex-direction: column; gap: 30px; text-align: center; } .hp-privacy__intro h2 { margin: 0; font-family: 'poppinsbold'; font-size: 50px; line-height: 1.2; text-transform: capitalize; color: var(--hp-text); } .hp-privacy__intro p { margin: 0; font-family: 'poppinsregular'; font-size: 18px; line-height: 1.6; color: var(--hp-text); } .hp-privacy__intro strong { font-family: 'poppinsbold'; font-weight: normal; } .hp-feature-grid { max-width: 1140px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; } .hp-feature-card { flex: 1 1 0; min-width: 0; max-width: 270px; padding: 30px 20px; border-radius: 10px; border: 1.5px solid var(--hp-border); background: var(--hp-feature-card-bg); box-shadow: var(--hp-feature-card-shadow); display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .hp-feature-card__icon { width: 110px; height: 110px; } .hp-feature-card h3 { margin: 0; font-family: 'poppinsbold'; font-size: 16px; color: var(--hp-text); } .hp-feature-card p { margin: 0; font-family: 'poppinsregular'; font-size: 14px; line-height: 1.5; color: var(--hp-text); } @media (max-width: 1024px) { .hp-privacy__intro h2 { font-size: 38px; } .hp-feature-grid { justify-content: center; } } @media (max-width: 767px) { .hp-privacy__intro h2 { font-size: 30px; } .hp-privacy__intro p { font-size: 16px; } .hp-feature-card { flex-basis: 100%; max-width: 420px; } } /* -- Product sections (VPN / eSIM / 2nd Line+) ---------------------------- */ .hp-product__inner { display: flex; align-items: center; gap: 0; flex-wrap: wrap; } .hp-product__media { flex: 1 1 0; min-width: 0; max-width: 570px; } .hp-product__media img { max-width: 100%; } /* Figma aligns each product image to the outer edge of its column (away from the copy), not centered — the gap sits entirely next to the text. */ .hp-product__media:first-child img { margin: 0 auto 0 0; } .hp-product__media:last-child img { margin: 0 0 0 auto; } .hp-product__copy { flex: 1 1 0; min-width: 0; max-width: 570px; display: flex; flex-direction: column; gap: 30px; } .hp-product__copy h2 { margin: 0; font-family: 'poppinsbold'; font-size: 36px; line-height: 1.2; color: var(--hp-text); } .hp-product__copy h3 { margin: 0; font-family: 'poppinsbold'; font-size: 26px; line-height: 1.3; color: var(--hp-text); } .hp-product__copy p { margin: 0; font-family: 'poppinsregular'; font-size: 18px; line-height: 1.6; color: var(--hp-text); } .hp-product__copy strong { font-family: 'poppinsbold'; font-weight: normal; } .hp-product__copy ul { margin: 0; padding-left: 27px; list-style: disc; } .hp-product__copy li { font-family: 'poppinsregular'; font-size: 18px; line-height: 36px; color: var(--hp-text); } .hp-product__tagline { font-family: 'poppinsbold'; } .hp-cta { display: inline-block; align-self: flex-start; padding: 20px 40px; border-radius: 8px; font-family: 'poppinssemibold'; font-size: 18px; color: var(--hp-cta-text); text-decoration: none; transition: opacity 0.2s ease, transform 0.2s ease; } .hp-cta:hover, .hp-cta:focus { color: var(--hp-cta-text); opacity: 0.85; text-decoration: none; } .hp-cta--blue { background: var(--hp-accent); } .hp-cta--orange { background: var(--hp-cta-orange); } .hp-cta--tan { background: var(--hp-cta-tan); } @media (max-width: 1024px) { .hp-product__inner { flex-direction: column; align-items: stretch; text-align: left; gap: 40px; } .hp-product__media { order: -1; flex-basis: auto; } .hp-product__media img, .hp-product__media:first-child img, .hp-product__media:last-child img { max-width: 420px; margin: 0 auto; } .hp-product__copy { max-width: none; } .hp-product__copy h2 { font-size: 30px; } } @media (max-width: 767px) { .hp-product { padding: 56px 0; } .hp-product__inner { gap: 32px; } .hp-product__media img, .hp-product__media:first-child img, .hp-product__media:last-child img { max-width: 320px; margin: 0 auto; } .hp-product__copy h2 { font-size: 26px; } .hp-product__copy h3 { font-size: 22px; } .hp-cta { align-self: stretch; text-align: center; } } /* -- Leaders --------------------------------------------------------------- */ .hp-leaders__heading { margin: 0 0 40px; font-family: 'poppinsbold'; font-size: 50px; text-align: center; color: var(--hp-text); } .hp-leaders__grid { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .hp-leader-card { background: var(--hp-card-bg); border: 1px solid var(--hp-border); border-radius: 20px; box-shadow: var(--hp-leader-shadow); overflow: hidden; display: flex; flex-direction: column; } .hp-leader-card__photo-wrap { background: var(--hp-leader-photo-bg); display: flex; justify-content: center; } .hp-leader-card__photo { width: 100%; aspect-ratio: 37 / 20; object-fit: cover; object-position: center; border-radius: 20px 20px 0 0; } .hp-leader-card__body { padding: 30px; display: flex; flex-direction: column; gap: 20px; } .hp-leader-card__intro { display: flex; flex-direction: column; gap: 2px; } .hp-leader-card__name { margin: 0; font-family: 'poppinsbold'; font-size: 20px; color: var(--hp-text); } .hp-leader-card__title { display: block; font-family: 'poppinsregular'; font-size: 20px; color: var(--hp-text); } .hp-leader-card__bio { margin: 0; font-family: 'poppinsregular'; font-size: 18px; line-height: 1.6; color: var(--hp-text-muted); } .hp-leader-card__more { align-self: flex-start; font-family: 'poppinsregular'; font-size: 18px; color: var(--hp-accent); text-decoration: none; } .hp-leader-card__more:hover, .hp-leader-card__more:focus { text-decoration: underline; } @media (max-width: 1024px) { .hp-leaders__grid { grid-template-columns: 1fr; max-width: 555px; } } @media (max-width: 767px) { .hp-leaders__heading { font-size: 34px; } } /* -- Leader bio modals ------------------------------------------------------ */ .hp-modal .modal-dialog { width: 615px; max-width: calc(100vw - 32px); margin: 60px auto; } .hp-modal .modal-content { position: relative; border: 1px solid rgba(var(--hp-border-rgb), 0.3); border-radius: 20px; overflow: hidden; background: var(--hp-card-bg); color: var(--hp-text); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3); } .hp-modal__photo-wrap { background: var(--hp-leader-photo-bg); } .hp-modal__photo { display: block; width: 100%; aspect-ratio: 37 / 20; object-fit: cover; object-position: center; } .hp-modal__body { display: flex; flex-direction: column; gap: 30px; padding: 30px; } .hp-modal__intro { display: flex; flex-direction: column; gap: 6px; } .hp-modal__name { margin: 0; font-family: 'poppinsbold'; font-size: 32px; line-height: 1.2; color: var(--hp-text); } .hp-modal__role { font-family: 'poppinsregular'; font-size: 24px; color: var(--hp-text); } .hp-modal__bio { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; scrollbar-width: thin; scrollbar-color: rgba(var(--hp-border-rgb), 0.6) transparent; } .hp-modal__bio::-webkit-scrollbar { width: 4px; } .hp-modal__bio::-webkit-scrollbar-thumb { background: rgba(var(--hp-border-rgb), 0.6); border-radius: 100px; } .hp-modal__bio p { margin: 0; font-family: 'poppinsregular'; font-size: 18px; line-height: 1.6; color: var(--hp-text); } .hp-modal__close { position: absolute; top: 20px; right: 20px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: none; border-radius: 50%; background: transparent; color: #020202; font-size: 28px; line-height: 1; opacity: 1; } @media (max-width: 767px) { .hp-modal .modal-dialog { margin: 24px 16px; } .hp-modal__body { padding: 24px; gap: 24px; } .hp-modal__name { font-size: 26px; } .hp-modal__role { font-size: 20px; } .hp-modal__bio { max-height: 220px; } } /* -- Footer ------------------------------------------------------------------ */ .hp-footer { padding: 50px 0 0; background: var(--hp-bg); } .hp-footer__inner { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 40px; } .hp-footer__brand { display: flex; align-items: center; gap: 15px; } .hp-footer__brand-mark { flex: 0 0 auto; width: 36px; height: 36px; background-image: url('../images/logo.png'); background-repeat: no-repeat; background-position: left center; background-size: auto 100%; } .hp-footer__brand-word { font-family: 'poppinsbold'; font-size: 22px; color: var(--hp-text); } .hp-footer__cols { display: flex; gap: 80px; flex-wrap: wrap; } .hp-footer__links { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 20px; } .hp-footer__links a { font-family: 'poppinsregular'; font-weight: 500; font-size: 16px; color: var(--hp-text); text-decoration: none; } .hp-footer__links a:hover, .hp-footer__links a:focus { color: var(--hp-accent); } .hp-footer__address { font-family: 'poppinsregular'; font-weight: 500; font-size: 16px; font-style: normal; line-height: 1.6; color: var(--hp-text); } .hp-footer__bottom { margin-top: 50px; padding: 20px 0; } .hp-footer__bottom p { margin: 0; font-family: 'poppinsregular'; font-weight: 500; font-size: 16px; color: var(--hp-text-muted); } @media (max-width: 767px) { .hp-footer__inner { flex-direction: column; gap: 32px; } .hp-footer__cols { gap: 40px; } } /* -- Shared container responsive padding ------------------------------------ */ @media (max-width: 1300px) { .hp-container { padding: 0 80px; } } @media (max-width: 1024px) { .hp-container { padding: 0 40px; } .hp-section { padding: 56px 0; } } @media (max-width: 767px) { .hp-container { padding: 0 20px; } .hp-section { padding: 48px 0; } }