/* ZenVizor marketing site | site.css Built on css/tokens.css. No tokens overridden or added; everything below references var(--*) from tokens.css. Light theme is forced on so the prefers-color-scheme media block in tokens.css cannot flip the site to dark. */ /* ---------------------------------------------------------------------------- 0. Reset + base ---------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: #eef1f7; color: var(--text-primary); font: 400 16px/1.5 var(--font-display); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; } button { font-family: inherit; } ::selection { background: rgba(109, 63, 209, 0.18); } :focus-visible { outline: 2px solid var(--accent-default); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ---------------------------------------------------------------------------- 1. Skip link + container ---------------------------------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 12px; top: 12px; padding: 8px 14px; background: var(--accent-default); color: #fff; font: 600 13px/1 var(--font-display); border-radius: 6px; text-decoration: none; transform: translateY(-200%); transition: transform 0.18s var(--ease-glide); z-index: 100; } .skip-link:focus { transform: translateY(0); } .container { max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } /* ---------------------------------------------------------------------------- 2. Shared header ---------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(238, 241, 247, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(20, 24, 46, 0.07); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; } .site-header__brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text-primary); } .site-header__wordmark { font: 400 21px/1 var(--font-brand); letter-spacing: 0.045em; } .site-header__nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .nav-link { text-decoration: none; color: var(--text-secondary); font: 500 14px/1 var(--font-display); padding: 8px 2px; transition: color 0.2s ease; } .nav-link:hover { color: var(--text-primary); } .nav-link[aria-current="page"] { color: var(--accent-secondary); font-weight: 600; } /* ---------------------------------------------------------------------------- 3. Buttons ---------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 24px; border-radius: 8px; font: 600 15px/1 var(--font-display); text-decoration: none; border: 1px solid transparent; background: transparent; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0) scale(0.99); } .btn--primary { background: linear-gradient(180deg, #7a4ad6, #5e2cc0); border-color: #4d1c9e; color: #fff; box-shadow: 0 1px 2px rgba(24, 27, 39, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.28); } .btn--secondary { padding: 14px 22px; background: linear-gradient(180deg, #ffffff, #f4f6fb); border-color: rgba(20, 24, 46, 0.16); color: #2a2e3b; box-shadow: 0 1px 2px rgba(24, 27, 39, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6); } .btn--tertiary { padding: 14px 14px; background: transparent; color: var(--accent-secondary); } .btn--tertiary-cta { padding: 14px 18px; border: 1px solid rgba(15, 101, 113, 0.28); color: #0f6571; } .btn--support-chip { padding: 9px 16px; border-radius: 999px; background: rgba(109, 63, 209, 0.08); border: 1px solid rgba(109, 63, 209, 0.28); color: var(--accent-secondary); font: 600 13px/1 var(--font-display); gap: 7px; } /* Rounded-rect Support variant for CTA card rows where it sits beside the primary Download and secondary GitHub buttons. Same shape and height as those; only the coloring identifies it as the tertiary action. */ .btn--support-soft { padding: 14px 22px; background: rgba(109, 63, 209, 0.06); border-color: rgba(109, 63, 209, 0.28); color: var(--accent-secondary); } .btn--block { justify-content: center; width: 100%; } @media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active { transform: none; } } /* ---------------------------------------------------------------------------- 4. Underlined link with grow-in rule ---------------------------------------------------------------------------- */ .zv-link { position: relative; text-decoration: none; color: var(--accent-secondary); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; } .zv-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease-glide); } .zv-link:hover::after { transform: scaleX(1); } /* ---------------------------------------------------------------------------- 5. Eyebrows + pill labels ---------------------------------------------------------------------------- */ .eyebrow { font: 600 12px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; } .eyebrow--teal { color: #178391; } .eyebrow--violet { color: var(--accent-secondary); } .eyebrow-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(32, 182, 198, 0.10); border: 1px solid rgba(32, 182, 198, 0.22); font: 600 12px/1 var(--font-display); letter-spacing: 0.04em; color: #178391; } .eyebrow-pill__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--teal-500); box-shadow: 0 0 0 3px rgba(32, 182, 198, 0.18); } .eyebrow-pill--mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0; font-weight: 400; } /* ---------------------------------------------------------------------------- 6. Headings + body type ---------------------------------------------------------------------------- */ .h1 { font: 600 clamp(34px, 5vw, 54px) / 1.08 var(--font-display); letter-spacing: -0.025em; color: var(--text-primary); margin: 0 0 20px; text-wrap: balance; } .h1--essay { font-size: clamp(32px, 4.6vw, 48px); margin-bottom: 32px; } .h2 { font: 600 clamp(28px, 3.4vw, 40px) / 1.12 var(--font-display); letter-spacing: -0.022em; color: var(--text-primary); margin: 0 0 14px; text-wrap: balance; } .h2--small { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.15; } .h2--cta { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.14; margin-bottom: 28px; } .h2--spotlight { font-size: clamp(30px, 4vw, 46px); line-height: 1.1; } .h3 { font: 600 clamp(20px, 2.1vw, 25px) / 1.22 var(--font-display); letter-spacing: -0.018em; color: var(--text-primary); margin: 0 0 14px; text-wrap: balance; } .lead { font: 400 clamp(16px, 1.6vw, 19px) / 1.6 var(--font-display); color: #4a5066; margin: 0 0 32px; max-width: 36em; } .lead--privacy { font-size: clamp(17px, 1.8vw, 21px); line-height: 1.55; max-width: 34em; } .prose { font: 400 16px/1.65 var(--font-display); color: #4a5066; margin: 0; } .prose--lg { font-size: clamp(15px, 1.5vw, 17px); line-height: 1.7; max-width: 42em; } .prose--feature { font-size: 15.5px; line-height: 1.68; max-width: 40em; } .lead--wide { max-width: 54em; } .lead--dl { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.65; max-width: 54em; margin-bottom: 30px; } /* ---------------------------------------------------------------------------- 7. Shared closing CTA band ---------------------------------------------------------------------------- */ .site-cta { background: linear-gradient(180deg, #e4f3f5, #daeef1); border-top: 1px solid rgba(32, 182, 198, 0.18); } .site-cta__inner { padding-top: 72px; padding-bottom: 72px; text-align: center; } .site-cta--lean .site-cta__inner { padding-top: 60px; padding-bottom: 60px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; text-align: left; } .site-cta__headline { font: 600 clamp(26px, 3.2vw, 38px) / 1.14 var(--font-display); letter-spacing: -0.022em; color: #0d2a2e; margin: 0 0 28px; text-wrap: balance; } .site-cta__buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; } /* ---------------------------------------------------------------------------- 8. Shared footer ---------------------------------------------------------------------------- */ .site-footer { background: #e7eaf2; border-top: 1px solid rgba(20, 24, 46, 0.08); } .site-footer__inner { padding-top: 48px; padding-bottom: 48px; } .site-footer__top { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-start; margin-bottom: 32px; } .site-footer__brand-block { max-width: 520px; } .site-footer__brand-line { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .site-footer__wordmark { font: 400 18px/1 var(--font-brand); letter-spacing: 0.045em; color: var(--text-primary); } .site-footer__about { font: 400 13.5px/1.6 var(--font-display); color: var(--text-secondary); margin: 0; } .site-footer__nav { display: flex; flex-direction: column; gap: 11px; } .site-footer__nav .nav-link { padding: 0; } .site-footer__version { font-family: var(--font-mono); font-size: 13px; color: var(--text-tertiary); } .site-footer__legal { border-top: 1px solid rgba(20, 24, 46, 0.08); padding-top: 22px; } .site-footer__legal p { font: 400 12px/1.6 var(--font-display); color: var(--text-tertiary); margin: 0; } /* ---------------------------------------------------------------------------- 9. Severity chips (Alerts) ---------------------------------------------------------------------------- */ .severity-chip { background: #fff; border: 1px solid rgba(20, 24, 46, 0.08); border-left-width: 3px; border-radius: 12px; padding: 20px; box-shadow: 0 1px 2px rgba(24, 27, 39, 0.05); } .severity-chip__head { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; } .severity-chip__dot { width: 8px; height: 8px; border-radius: 999px; } .severity-chip__label { font: 700 10.5px/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; } .severity-chip__body { font: 500 15px/1.5 var(--font-display); color: var(--text-primary); margin: 0; } .severity-chip--critical { border-left-color: #d62b62; } .severity-chip--critical .severity-chip__dot { background: #d62b62; } .severity-chip--critical .severity-chip__label { color: #b81f53; } .severity-chip--warning { border-left-color: var(--status-caution); } .severity-chip--warning .severity-chip__dot { background: var(--status-caution); } .severity-chip--warning .severity-chip__label { color: var(--status-caution-text); } .severity-chip--info { border-left-color: var(--status-neutral); } .severity-chip--info .severity-chip__dot { background: var(--status-neutral); } .severity-chip--info .severity-chip__label { color: #3a4cb0; } /* ---------------------------------------------------------------------------- 10. Icon tile (the tinted-background wrapper that holds an inline SVG icon) ---------------------------------------------------------------------------- */ .ic-tile { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 10px; background: rgba(109, 63, 209, 0.10); color: var(--accent-secondary); margin-bottom: 16px; } .ic-tile--teal { background: rgba(32, 182, 198, 0.12); color: #178391; } .ic-tile--neutral { background: rgba(20, 24, 46, 0.05); color: var(--text-secondary); } .ic-tile--success { background: rgba(6, 182, 163, 0.12); color: #0f8a7e; } .ic-tile--lg { width: 42px; height: 42px; border-radius: 11px; } .ic-tile--xl { width: 48px; height: 48px; border-radius: 12px; } /* ---------------------------------------------------------------------------- 11. Signal motif backdrop (the faint sparkline + node SVGs sit absolutely) ---------------------------------------------------------------------------- */ .section { position: relative; overflow: hidden; } .section-motif { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; pointer-events: none; } .section__inner { position: relative; } /* ---------------------------------------------------------------------------- 12. Mono helper ---------------------------------------------------------------------------- */ .mono { font-family: var(--font-mono); } /* ---------------------------------------------------------------------------- 13. Card primitives reused across pages ---------------------------------------------------------------------------- */ .card { background: #fff; border: 1px solid rgba(20, 24, 46, 0.08); border-radius: 14px; box-shadow: 0 1px 2px rgba(24, 27, 39, 0.05); } .card--padded { padding: 26px; } .card--padded-lg { padding: 36px; } .card--padded-xl { padding: 40px; } .card-hover { transition: transform 0.2s var(--ease-glide), box-shadow 0.2s ease; } .card-hover:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(24, 27, 39, 0.10); } @media (prefers-reduced-motion: reduce) { .card-hover:hover { transform: none; } } /* ---------------------------------------------------------------------------- 14. Inline-SVG icon helper. Icons are written directly into the markup with fill="currentColor" so the parent's CSS `color` tints them. The vendored img/icons/*.svg files remain as the canonical source-of-truth; the inline copies in the HTML mirror them. */ .ic-svg { display: inline-block; flex-shrink: 0; vertical-align: middle; } /* ---------------------------------------------------------------------------- 15. Page: Home. Hero (split layout + Per-App card) ---------------------------------------------------------------------------- */ .hero { padding-top: 72px; padding-bottom: 84px; display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 56px; align-items: center; } .hero__copy { min-width: 0; } .hero__art { min-width: 0; display: flex; justify-content: center; } .hero__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; } .hero__donate { font: 400 13.5px/1.5 var(--font-display); color: var(--text-tertiary); margin: 0 0 14px; } .hero__eyebrow { margin-bottom: 22px; } /* ---------------------------------------------------------------------------- 16. Page: Home. Visibility band ---------------------------------------------------------------------------- */ .visibility-band { background: #fff; border-top: 1px solid rgba(20, 24, 46, 0.06); border-bottom: 1px solid rgba(20, 24, 46, 0.06); } .visibility-band__inner { padding-top: 80px; padding-bottom: 80px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; align-items: start; } .visibility-band__head { margin: 0; } .visibility-band__heading { margin-bottom: 28px; } .visibility-band__chips { display: flex; flex-direction: column; gap: 14px; } .visibility-chip { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 12px; background: #f7f8fc; border: 1px solid rgba(20, 24, 46, 0.06); } .visibility-chip__icon { width: 24px; height: 24px; color: var(--accent-secondary); } .visibility-chip__icon--neutral { color: var(--text-tertiary); } .visibility-chip__label { font: 600 15px/1.3 var(--font-display); color: var(--text-primary); margin-bottom: 3px; } .visibility-chip__caption { font: 400 14px/1.5 var(--font-display); color: var(--text-secondary); } .visibility-chip__inline-mono { font-family: var(--font-mono); font-size: 12.5px; color: #178391; } /* ---------------------------------------------------------------------------- 16.5. Page: Home. Dashboard showcase (contrasting band) ---------------------------------------------------------------------------- */ .showcase-band { background: linear-gradient(180deg, #efedf8, #eae7f4); border-top: 1px solid rgba(20, 24, 46, 0.06); border-bottom: 1px solid rgba(20, 24, 46, 0.06); } .showcase-band__inner { padding-top: 84px; padding-bottom: 84px; display: flex; flex-direction: column; gap: 14px; } .showcase-band__caption { margin: 0; font: 400 14px/1.55 var(--font-display); color: var(--text-tertiary); text-align: center; } /* ---------------------------------------------------------------------------- 17. Page: Home. Feature rows ---------------------------------------------------------------------------- */ .features { padding-top: 84px; padding-bottom: 84px; display: flex; flex-direction: column; gap: 80px; } .feat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 36px 56px; } .feat-row__media { flex: 1 1 400px; min-width: 0; } .feat-row__body { flex: 1 1 360px; min-width: 0; } @media (min-width: 880px) { .feat-row--reverse { flex-direction: row-reverse; } } .feat-row__body .prose { margin: 0; } .screenshot-frame { border-radius: 12px; overflow: hidden; border: 1px solid rgba(20, 24, 46, 0.10); box-shadow: 0 14px 34px rgba(24, 27, 39, 0.12); } .screenshot-frame__bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #f0f2f8; border-bottom: 1px solid rgba(20, 24, 46, 0.07); } .screenshot-frame__dots { display: flex; gap: 7px; } .screenshot-frame__dot { width: 9px; height: 9px; border-radius: 999px; background: var(--steel-300); } .screenshot-frame__dot--quiet { background: var(--steel-200); } .screenshot-frame__title { margin-left: 8px; font: 600 11px/1 var(--font-display); color: var(--text-tertiary); } .screenshot-frame__body { aspect-ratio: 1200 / 720; background: repeating-linear-gradient(135deg, #e7eaf2 0 13px, #eef1f7 13px 26px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: var(--text-tertiary); text-align: center; padding: 0 24px; } .screenshot-frame__label { font: 600 13px/1.3 var(--font-display); letter-spacing: 0.04em; } .screenshot-frame__dims { font-family: var(--font-mono); font-size: 11px; color: #aeb4c4; } .screenshot-frame--4-3 .screenshot-frame__body { aspect-ratio: 4 / 3; } .screenshot-frame__body:has(img) { padding: 0; aspect-ratio: auto; background: none; } .screenshot-frame__body img { display: block; width: 100%; height: auto; } .screenshot-frame--inset .screenshot-frame__body img { clip-path: inset(1px); } /* ---------------------------------------------------------------------------- 18. Page: Home. svchost spotlight (dark band) ---------------------------------------------------------------------------- */ .spotlight { position: relative; background: #10131c; overflow: hidden; } .spotlight__inner { padding-top: 92px; padding-bottom: 92px; } .spotlight__head { text-align: center; max-width: 760px; margin: 0 auto 52px; } .spotlight__eyebrow { font: 600 12px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-400); margin-bottom: 18px; } .spotlight__heading { color: #f5f6fb; margin: 0 0 18px; text-wrap: balance; } .spotlight__sub { font: 400 clamp(15px, 1.5vw, 18px) / 1.6 var(--font-display); color: #a7adc0; margin: 0; } .spotlight__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; } .spotlight-card { flex: 1 1 300px; border-radius: 14px; padding: 24px; } .spotlight-card--before { background: #1a1e2a; border: 1px solid rgba(255, 255, 255, 0.08); max-width: 420px; } .spotlight-card--after { background: #1f2333; border: 1px solid rgba(130, 84, 230, 0.22); max-width: 460px; } .spotlight-card__label { font: 600 10px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 18px; } .spotlight-card--before .spotlight-card__label { color: var(--text-tertiary); } .spotlight-card--after .spotlight-card__label { color: var(--violet-400); } .spotlight-card__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: var(--font-mono); font-size: 16px; } .spotlight-card__name { color: #e7e9f2; } .spotlight-card__bytes { color: #a7adc0; } .spotlight-card--after .spotlight-card__name { color: #f5f6fb; } .spotlight-card--after .spotlight-card__bytes { color: #cdd2e2; } .spotlight-card__caption { margin-top: 16px; font: 400 13px/1.5 var(--font-display); color: var(--text-tertiary); } .spotlight-card__services { margin-top: 16px; padding-left: 14px; border-left: 2px solid var(--violet-500); font-family: var(--font-mono); font-size: 14.5px; line-height: 1.6; color: var(--teal-400); } .spotlight__arrow { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 999px; background: rgba(130, 84, 230, 0.18); border: 1px solid rgba(130, 84, 230, 0.40); display: flex; align-items: center; justify-content: center; color: var(--violet-300); font-size: 20px; } .spotlight__honesty { text-align: center; max-width: 600px; margin: 36px auto 0; font: 400 13px/1.6 var(--font-display); color: var(--text-tertiary); } /* CSS-only one-shot reveal: replaces the IntersectionObserver from the export. Default: visible (so reduced-motion + no-JS browsers see resolved state). With motion allowed: starts hidden, animates in once on load. */ @media (prefers-reduced-motion: no-preference) { .sv-reveal { opacity: 0; transform: translateY(12px); animation: svReveal 600ms var(--ease-glide) forwards; } .sv-reveal[data-delay="1"] { animation-delay: 60ms; } .sv-reveal[data-delay="2"] { animation-delay: 120ms; } .sv-reveal[data-delay="3"] { animation-delay: 200ms; } .sv-reveal[data-delay="4"] { animation-delay: 280ms; } .spotlight-card--after.sv-reveal { animation-name: svRevealAfter; animation-duration: 720ms; } } @keyframes svReveal { to { opacity: 1; transform: none; } } @keyframes svRevealAfter { to { opacity: 1; transform: none; box-shadow: 0 0 0 1px rgba(109, 63, 209, 0.14), 0 18px 44px rgba(109, 63, 209, 0.18); border-color: rgba(109, 63, 209, 0.32); } } /* ---------------------------------------------------------------------------- 19. Page: Home. Alerts row ---------------------------------------------------------------------------- */ .alerts { padding-top: 84px; padding-bottom: 84px; } .alerts__head { max-width: 640px; margin: 0 0 40px; } .alerts__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; } /* ---------------------------------------------------------------------------- 20. Page: Home. Trust band ---------------------------------------------------------------------------- */ .trust-band { background: linear-gradient(180deg, #efedf8, #eae7f4); border-top: 1px solid rgba(20, 24, 46, 0.06); border-bottom: 1px solid rgba(20, 24, 46, 0.06); } .trust-band__inner { padding-top: 84px; padding-bottom: 84px; } .trust-band__head { max-width: 680px; margin: 0 0 44px; } .trust-band__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin-bottom: 32px; } .trust-card__title { font: 600 17px/1.4 var(--font-display); color: var(--text-primary); margin: 0; } .trust-band__links { display: flex; flex-wrap: wrap; gap: 24px; } /* ---------------------------------------------------------------------------- 21. Page: Home. Teaser cards (Privacy + AI) ---------------------------------------------------------------------------- */ .teasers { padding-top: 84px; padding-bottom: 84px; } .teasers__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .teaser-card .h2 { font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; } .teaser-card__body { font: 400 15px/1.65 var(--font-display); color: var(--text-secondary); margin: 0 0 22px; } /* ---------------------------------------------------------------------------- 22. Page: Download ---------------------------------------------------------------------------- */ .dl-hero { padding-top: 64px; padding-bottom: 48px; } .dl-hero__chips { display: flex; flex-wrap: wrap; gap: 10px; } .spec-chip { display: inline-flex; align-items: center; padding: 7px 13px; border-radius: 999px; background: #fff; border: 1px solid rgba(20, 24, 46, 0.10); font: 500 13px/1 var(--font-display); color: var(--text-secondary); } .spec-chip--mono { font-family: var(--font-mono); font-size: 13px; font-weight: 400; } .dl-options { padding-top: 24px; padding-bottom: 80px; } .dl-options__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; align-items: stretch; } .opt-card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(20, 24, 46, 0.08); border-radius: 14px; padding: 26px; box-shadow: 0 1px 2px rgba(24, 27, 39, 0.05); } .opt-card--featured { border-color: rgba(109, 63, 209, 0.28); box-shadow: 0 1px 2px rgba(24, 27, 39, 0.05), 0 0 0 3px rgba(109, 63, 209, 0.06); } .opt-card__title { font: 600 18px/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 10px; } .opt-card__body { font: 400 14.5px/1.6 var(--font-display); color: #4a5066; margin: 0 0 22px; flex: 1; } .dl-band { background: #fff; border-top: 1px solid rgba(20, 24, 46, 0.06); border-bottom: 1px solid rgba(20, 24, 46, 0.06); } .dl-band__inner { padding-top: 80px; padding-bottom: 80px; } .dl-band__head { max-width: 640px; margin: 0 0 40px; } .dl-band__h2 { font: 600 clamp(28px, 3.4vw, 38px) / 1.14 var(--font-display); letter-spacing: -0.022em; color: var(--text-primary); margin: 0; text-wrap: balance; } .install-layout { display: flex; flex-wrap: wrap; gap: 40px 48px; align-items: flex-start; } .install-layout__media { flex: 1 1 360px; min-width: 0; } .install-layout__steps { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 16px; } .step-card { display: flex; gap: 16px; align-items: flex-start; background: #f7f8fc; border: 1px solid rgba(20, 24, 46, 0.06); border-radius: 12px; padding: 20px; } .step-card__num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 999px; background: rgba(109, 63, 209, 0.10); color: var(--accent-secondary); font: 600 15px/30px var(--font-display); text-align: center; } .step-card__body { font: 400 14.5px/1.6 var(--font-display); color: #4a5066; margin: 0; } .install-layout__caption { font: 400 13px/1.5 var(--font-display); color: var(--text-tertiary); margin: 14px 2px 0; } .verify { padding-top: 80px; padding-bottom: 80px; } .verify__head { max-width: 760px; } .verify__head .dl-band__h2 { margin-bottom: 18px; } .verify__lead { font: 400 16px/1.65 var(--font-display); color: #4a5066; margin: 0 0 28px; } .verify__close { font: 400 15px/1.65 var(--font-display); color: #4a5066; margin: 24px 0 0; } .code-card { background: #1a1e2a; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; overflow: hidden; box-shadow: 0 12px 30px rgba(24, 27, 39, 0.14); max-width: 760px; } .code-card__bar { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; background: #232838; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .code-card__dots { display: inline-flex; align-items: center; gap: 8px; } .code-card__dot { width: 8px; height: 8px; border-radius: 999px; } .code-card__dot--r { background: #e5594f; } .code-card__dot--y { background: var(--amber-500); } .code-card__dot--g { background: var(--emerald-500); } .code-card__lang { margin-left: 6px; font: 600 11px/1 var(--font-display); letter-spacing: 0.04em; color: var(--text-tertiary); } .code-card__copy { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: #cdd2e2; font: 600 12px/1 var(--font-display); cursor: pointer; } .code-card__copy:hover { background: rgba(255, 255, 255, 0.12); } .code-card__body { padding: 18px; } .code-card__line { display: block; font-family: var(--font-mono); font-size: 14px; line-height: 1.6; color: var(--violet-400); word-break: break-all; margin: 0; } .code-card__prompt { color: var(--text-tertiary); } .code-card__hash { padding: 0 18px 18px; } .code-card__hash-line { font-family: var(--font-mono); font-size: 13px; line-height: 1.6; color: #5f667c; border-top: 1px dashed rgba(255, 255, 255, 0.10); padding-top: 14px; word-break: break-all; } .requirements .dl-band__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px 56px; align-items: start; } .req-card { background: #f7f8fc; border: 1px solid rgba(20, 24, 46, 0.06); border-radius: 14px; padding: 10px 22px; } .req-row { display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid rgba(20, 24, 46, 0.06); } .req-row:last-child { border-bottom: none; } .req-row__icon { width: 22px; height: 22px; color: #0f8a7e; margin-top: 1px; } .req-row__text { font: 400 15px/1.6 var(--font-display); color: #3a4154; margin: 0; } .permissions { padding-top: 80px; padding-bottom: 80px; } .permissions__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; align-items: center; } .permissions__copy { max-width: 42em; } .permissions__copy .dl-band__h2 { margin-bottom: 18px; } .permissions__copy .prose { font-size: 15.5px; line-height: 1.7; } .admin-diagram { background: #f7f8fc; border: 1px solid rgba(20, 24, 46, 0.06); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 14px; align-items: stretch; } .admin-diagram__box { background: #fff; border: 1px solid rgba(20, 24, 46, 0.10); border-radius: 12px; padding: 18px; box-shadow: 0 1px 2px rgba(24, 27, 39, 0.05); } .admin-diagram__box--accent { border-color: rgba(109, 63, 209, 0.24); } .admin-diagram__row { display: flex; align-items: center; gap: 11px; } .admin-diagram__icon-tile { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 9px; background: rgba(109, 63, 209, 0.10); color: var(--accent-secondary); flex-shrink: 0; } .admin-diagram__icon-tile--neutral { background: rgba(20, 24, 46, 0.05); color: var(--text-secondary); } .admin-diagram__label { font: 600 14.5px/1.3 var(--font-display); color: var(--text-primary); } .admin-diagram__sub { font: 400 12.5px/1.4 var(--font-display); color: var(--text-tertiary); margin-top: 2px; } .admin-diagram__connector { display: flex; align-items: center; gap: 10px; padding: 2px 6px; } .admin-diagram__connector-icon { width: 18px; height: 18px; color: #178391; } .admin-diagram__connector-label { font-family: var(--font-mono); font-size: 12px; color: #178391; } .admin-diagram__connector-rule { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, rgba(32, 182, 198, 0.5) 0 5px, transparent 5px 10px); } .dl-details { background: linear-gradient(180deg, #efedf8, #eae7f4); border-top: 1px solid rgba(20, 24, 46, 0.06); border-bottom: 1px solid rgba(20, 24, 46, 0.06); } .dl-details__inner { padding-top: 80px; padding-bottom: 80px; } .dl-details__head { font: 600 12px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-secondary); margin-bottom: 32px; } .dl-details__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .detail-card { padding: 32px; } .detail-card__title { font: 600 21px/1.25 var(--font-display); letter-spacing: -0.018em; color: var(--text-primary); margin: 0 0 12px; } .detail-card__body { font: 400 14.5px/1.65 var(--font-display); color: #4a5066; margin: 0 0 20px; } .detail-card__body:last-child { margin-bottom: 0; } /* ---------------------------------------------------------------------------- 23. Page: FAQ. Rail + accordion + DoH illustration ---------------------------------------------------------------------------- */ .faq-hero { padding-top: 64px; padding-bottom: 40px; } .faq-hero__intro { font: 400 clamp(16px, 1.6vw, 19px) / 1.6 var(--font-display); color: #4a5066; margin: 0; max-width: 40em; } .faq-hero .h1 { margin-bottom: 16px; } .faq-section { padding-top: 24px; padding-bottom: 88px; } .faq-wrap { display: flex; gap: 48px; align-items: flex-start; } .faq-rail { flex: 0 0 210px; position: sticky; top: 90px; } .faq-main { flex: 1 1 0; min-width: 0; } .rail-link { display: block; text-decoration: none; font: 500 14px/1.3 var(--font-display); color: var(--text-secondary); padding: 9px 0 9px 16px; border-left: 2px solid rgba(20, 24, 46, 0.10); transition: color 0.2s ease, border-color 0.2s ease; } .rail-link:hover { color: var(--accent-secondary); border-left-color: var(--accent-default); } .faq-group-label { font: 700 12px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-secondary); padding-bottom: 14px; border-bottom: 1px solid rgba(20, 24, 46, 0.10); margin: 0 0 18px; scroll-margin-top: 96px; } .faq-group-label--spaced { margin-top: 44px; } .faq-item { background: #fff; border: 1px solid rgba(20, 24, 46, 0.08); border-radius: 12px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(24, 27, 39, 0.04); } .faq-item__summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 22px; font: 600 16.5px/1.4 var(--font-display); color: var(--text-primary); } .faq-item__summary::-webkit-details-marker { display: none; } .faq-item__summary:hover { color: var(--accent-secondary); } .faq-item__chev { flex-shrink: 0; margin-top: 3px; transition: transform 0.25s var(--ease-glide); } .faq-item[open] .faq-item__chev { transform: rotate(180deg); } .faq-item[open] .faq-item__chev path { stroke: var(--accent-secondary); } .faq-body { padding: 0 22px 22px; font: 400 15px/1.7 var(--font-display); color: #4a5066; } .faq-body a { color: var(--accent-secondary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .faq-item--featured { border-color: rgba(109, 63, 209, 0.28); box-shadow: 0 0 0 3px rgba(109, 63, 209, 0.05), 0 1px 2px rgba(24, 27, 39, 0.04); } .faq-summary__stack { display: flex; flex-direction: column; gap: 9px; } .faq-tag { display: inline-flex; align-items: center; align-self: flex-start; font: 700 10px/1 var(--font-display); letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent-secondary); background: rgba(109, 63, 209, 0.10); padding: 4px 9px; border-radius: 999px; } .faq-id { font-family: var(--font-mono); font-size: 0.92em; color: #178391; } .faq-cmd { font-family: var(--font-mono); font-size: 0.88em; color: #2a2e3b; background: rgba(20, 24, 46, 0.055); padding: 2px 6px; border-radius: 5px; word-break: break-word; } /* DoH illustration inside the encrypted-DNS featured answer */ .doh { margin-top: 20px; max-width: 440px; background: #fff; border: 1px solid rgba(20, 24, 46, 0.10); border-radius: 12px; overflow: hidden; } .doh__row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; } .doh__row + .doh__row { border-top: 1px solid rgba(20, 24, 46, 0.07); } .doh__app { font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); min-width: 74px; } .doh__arrow { color: var(--text-tertiary); } .doh__hostname { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 13px; color: #178391; } .doh__hostname::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--status-connected); } .doh__ip { font-family: var(--font-mono); font-size: 13px; color: var(--text-tertiary); } .doh__caption { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); margin: 7px 0 0; padding-left: 88px; } .doh__row--ech { flex-direction: column; align-items: stretch; padding-bottom: 16px; } .doh__row--ech .doh__cells { display: flex; align-items: center; gap: 14px; } @media (max-width: 820px) { .faq-wrap { flex-direction: column; gap: 28px; } .faq-rail { position: static; flex: 0 0 auto; width: 100%; display: flex; flex-wrap: wrap; gap: 8px; } .rail-link { border-left: none; padding: 8px 14px; border: 1px solid rgba(20, 24, 46, 0.10); border-radius: 999px; } .rail-link:hover { border-color: var(--accent-default); } .doh__caption { padding-left: 0; } } /* ---------------------------------------------------------------------------- 24. Page: Privacy ---------------------------------------------------------------------------- */ .pv-hero { padding-top: 64px; padding-bottom: 40px; } .pv-hero .h1 { margin-bottom: 18px; } .pv-local { background: #fff; border-top: 1px solid rgba(20, 24, 46, 0.06); border-bottom: 1px solid rgba(20, 24, 46, 0.06); } .pv-local__inner { padding-top: 80px; padding-bottom: 80px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 56px; align-items: center; } .pv-local__copy .h2 { margin-bottom: 20px; } .pv-local__copy .prose { font-size: 15.5px; line-height: 1.7; max-width: 40em; } .pv-quiet { padding-top: 80px; padding-bottom: 0; } .pv-quiet__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; align-items: center; } .pv-quiet__copy .h2 { margin-bottom: 20px; } .pv-quiet__copy .prose { font-size: 15.5px; line-height: 1.7; max-width: 40em; } .zero-card { position: relative; background: linear-gradient(176deg, #2c303b 0%, #20242e 52%, #14171f 100%); border: 1px solid rgba(130, 84, 230, 0.22); border-radius: 18px; padding: 48px 36px; text-align: center; box-shadow: 0 18px 44px rgba(24, 27, 39, 0.30), 0 0 0 1px rgba(130, 84, 230, 0.10); overflow: hidden; } .zero-card__motif { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.4; pointer-events: none; } .zero-card__inner { position: relative; } .zero-card__number { font-family: var(--font-brand); font-size: clamp(110px, 17vw, 168px); line-height: 0.9; color: var(--violet-300); letter-spacing: 0.02em; text-shadow: 0 0 40px rgba(130, 84, 230, 0.55); } .zero-card__label { font: 400 15px/1.55 var(--font-display); color: #a7adc0; margin: 20px auto 0; max-width: 22em; } .pv-noai { padding-top: 0; padding-bottom: 80px; margin-top: -20px; } .noai-card { display: flex; flex-wrap: wrap; gap: 24px 36px; align-items: flex-start; } .noai-card__icon { flex: 0 0 auto; display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 12px; background: rgba(109, 63, 209, 0.10); color: var(--accent-secondary); } .noai-card__body { flex: 1 1 320px; min-width: 0; } .noai-card__body .h2 { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; margin: 0 0 14px; } .noai-card__body .prose { font-size: 15.5px; line-height: 1.7; max-width: 48em; } .pv-verify { background: linear-gradient(180deg, #efedf8, #eae7f4); border-top: 1px solid rgba(20, 24, 46, 0.06); border-bottom: 1px solid rgba(20, 24, 46, 0.06); } .pv-verify__inner { padding-top: 80px; padding-bottom: 80px; } .pv-verify__head { max-width: 680px; margin: 0 0 36px; } .pv-verify__head .h2 { margin-bottom: 16px; } .pv-verify__list { display: flex; flex-direction: column; gap: 12px; max-width: 880px; } .vrow { display: flex; align-items: flex-start; gap: 16px; background: #fff; border: 1px solid rgba(20, 24, 46, 0.08); border-radius: 12px; padding: 20px 22px; text-decoration: none; color: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .vrow:hover { border-color: rgba(109, 63, 209, 0.32); box-shadow: 0 6px 18px rgba(24, 27, 39, 0.07); transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { .vrow:hover { transform: none; } } .vrow__icon { width: 22px; height: 22px; color: var(--teal-500); margin-top: 1px; flex-shrink: 0; } .vrow__text { flex: 1; font: 400 15px/1.6 var(--font-display); color: #3a4154; } .vrow__ext { flex-shrink: 0; margin-top: 1px; color: #aeb4c4; transition: color 0.2s ease; } .vrow:hover .vrow__ext { color: var(--accent-secondary); } .pv-verify__footer { margin: 32px 0 0; max-width: 680px; } .pv-verify__close { font: 400 16px/1.65 var(--font-display); color: #4a5066; margin: 0 0 14px; } .pv-verify__hint { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1.4 var(--font-display); color: #178391; background: rgba(32, 182, 198, 0.10); border: 1px solid rgba(32, 182, 198, 0.24); padding: 7px 14px; border-radius: 999px; margin: 0; } /* Local-only diagram */ .local-diagram { width: 100%; max-width: 380px; margin: 0 auto; } .local-diagram__pc { position: relative; border: 1.5px solid rgba(109, 63, 209, 0.30); border-radius: 16px; background: linear-gradient(180deg, #fbfcff, #f5f6fb); padding: 30px 22px 24px; box-shadow: 0 8px 24px rgba(24, 27, 39, 0.06); } .local-diagram__tag { position: absolute; top: -12px; left: 20px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; background: var(--accent-secondary); color: #fff; font: 700 10.5px/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; } .local-diagram__node { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid rgba(20, 24, 46, 0.10); border-radius: 10px; padding: 13px 15px; } .local-diagram__node--accent { border-color: rgba(109, 63, 209, 0.24); } .local-diagram__node-icon { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 8px; background: rgba(32, 182, 198, 0.12); color: #178391; flex-shrink: 0; } .local-diagram__node-icon--accent { background: rgba(109, 63, 209, 0.10); color: var(--accent-secondary); } .local-diagram__node-icon--neutral { background: rgba(20, 24, 46, 0.05); color: var(--text-secondary); } .local-diagram__node-label { font: 600 14px/1.2 var(--font-display); color: var(--text-primary); } .local-diagram__plain-connector { display: flex; justify-content: center; padding: 2px 0; } .local-diagram__plain-connector::before { content: ""; width: 0; height: 22px; border-left: 2px solid rgba(20, 24, 46, 0.18); } .local-diagram__channel { display: flex; flex-direction: column; align-items: center; padding: 2px 0; } .local-diagram__channel-stem { width: 0; height: 10px; border-left: 2px solid rgba(32, 182, 198, 0.55); } .local-diagram__channel-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(32, 182, 198, 0.10); border: 1px solid rgba(32, 182, 198, 0.22); } .local-diagram__channel-pill-icon { width: 13px; height: 13px; color: #178391; } .local-diagram__channel-pill-text { font-family: var(--font-mono); font-size: 11px; color: #178391; } .local-diagram__blocked { display: flex; flex-direction: column; align-items: center; padding: 6px 0; } .local-diagram__blocked-stem { width: 0; height: 14px; border-left: 2px dashed rgba(20, 24, 46, 0.22); } .local-diagram__blocked-pill { display: inline-flex; align-items: center; gap: 9px; } .local-diagram__blocked-mark { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 999px; background: #fff; border: 1px solid rgba(20, 24, 46, 0.16); } .local-diagram__blocked-label { font: 600 12px/1 var(--font-display); letter-spacing: 0.02em; color: var(--text-secondary); } .local-diagram__internet { display: flex; justify-content: center; margin-bottom: 0; } .local-diagram__internet-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: #f0f2f8; border: 1px solid rgba(20, 24, 46, 0.10); } .local-diagram__internet-icon { width: 17px; height: 17px; color: var(--text-tertiary); } .local-diagram__internet-label { font: 600 13px/1 var(--font-display); color: var(--text-secondary); } /* ---------------------------------------------------------------------------- 25. Page: AI disclosure (essay) ---------------------------------------------------------------------------- */ .ai-essay { position: relative; overflow: hidden; } .ai-essay__motif { position: absolute; top: 0; left: 0; width: 100%; height: 420px; opacity: 0.4; pointer-events: none; } .ai-essay__inner { position: relative; max-width: 740px; margin: 0 auto; padding: 80px 24px 96px; } .ai-essay__inner .h1 { margin-bottom: 32px; } .ai-para { font: 400 clamp(17px, 1.6vw, 18.5px) / 1.78 var(--font-display); color: #3a4154; margin: 0 0 28px; } .ai-para--close { font: 400 clamp(18px, 1.7vw, 20px) / 1.72 var(--font-display); color: var(--text-primary); margin: 40px 0; } .ai-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 40px; } .ai-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid rgba(20, 24, 46, 0.12); color: #3a4154; font: 600 13.5px/1 var(--font-display); text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .ai-chip:hover { border-color: rgba(109, 63, 209, 0.34); color: var(--accent-secondary); background: #fff; } .ai-chip--mono { font-family: var(--font-mono); font-size: 13px; font-weight: 600; } .ai-chip__ext { color: #aeb4c4; transition: color 0.2s ease; } .ai-chip:hover .ai-chip__ext { color: var(--accent-secondary); } .ai-source-link { font-size: 16px; } /* ---------------------------------------------------------------------------- 26. Page: 404 ---------------------------------------------------------------------------- */ .notfound { padding-top: 96px; padding-bottom: 96px; text-align: center; max-width: 540px; margin: 0 auto; } .notfound__code { display: inline-block; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--text-tertiary); padding: 5px 12px; border-radius: 999px; background: rgba(20, 24, 46, 0.05); margin-bottom: 24px; } .notfound .h1 { margin-bottom: 20px; } .notfound__sub { font: 400 16px/1.6 var(--font-display); color: var(--text-secondary); margin: 0 0 32px; } .notfound__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }