/* ========================================================================= PvPAssist — Landing (scoped) Every selector below lives under `.pvp-landing`, which only the marketing home view puts on . Nothing here can reach /account, /admin or the auth screens, and no bare element/Bootstrap selector is overridden. Loaded after css/pvpassist.css, so the shared shell (.pvp-btn, .pvp-container, auth/account) stays exactly as it is — this file never edits those classes. ========================================================================= */ .pvp-landing { /* --- Surfaces: near-black navy, cool, low-chroma ------------------ */ --l-bg: #060d16; --l-bg-alt: #08121e; --l-bg-strip: #091524; --l-panel: #0c1826; --l-panel-2: #0e1d2e; --l-panel-3: #102338; /* --- Lines: always blue-tinted, never neutral grey ---------------- */ --l-line: rgba(96, 148, 208, 0.16); --l-line-2: rgba(96, 148, 208, 0.30); --l-line-3: rgba(96, 168, 232, 0.50); /* --- Accents ------------------------------------------------------ */ --l-blue: #1f8cff; --l-blue-deep: #0f6be0; --l-cyan: #3fb0ff; --l-cyan-soft: #7ecbff; --l-green: #2fcf8b; /* --- Type --------------------------------------------------------- */ --l-fg: #ffffff; --l-fg-2: #aebfd2; --l-fg-3: #7a8da4; --l-font: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Inter", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; /* --- Geometry ----------------------------------------------------- */ --l-container: 1480px; --l-gutter: 20px; --l-radius: 10px; --l-radius-lg: 14px; --l-glow: 0 0 0 1px rgba(63, 176, 255, 0.28), 0 24px 70px rgba(4, 12, 24, 0.85), 0 0 90px rgba(31, 140, 255, 0.16); background: var(--l-bg); color: var(--l-fg); font-family: var(--l-font); /* NOTE: deliberately no body-level `overflow-x: hidden`. The two things that bleed past the container — the hero stage and the characters screenshot — are each clipped by their own section, so clamping the body would buy nothing and would turn the body into a scroll container (overflow-x:hidden forces overflow-y to compute as auto), which is what breaks fixed positioning and scroll capture. */ } @media (min-width: 768px) { .pvp-landing { --l-gutter: 40px; } } @media (min-width: 1200px) { .pvp-landing { --l-gutter: 44px; } } @media (min-width: 1600px) { .pvp-landing { --l-gutter: 72px; } } /* ========================================================================= Primitives ========================================================================= */ .pvpl-container { width: 100%; max-width: calc(var(--l-container) + (var(--l-gutter) * 2)); margin-inline: auto; padding-inline: var(--l-gutter); } .pvpl-section { position: relative; padding-block: clamp(3.5rem, 5.2vw, 6.25rem); } .pvpl-section--alt { background: var(--l-bg-alt); } .pvpl-section--tight { padding-block: clamp(2.5rem, 3.4vw, 3.75rem); } .pvpl-rule { border: 0; border-top: 1px solid var(--l-line); margin: 0; } /* Section label: "01 / CONTROL" — number cyan, the rest muted. */ .pvpl-label { display: inline-flex; align-items: baseline; gap: 0.45em; margin: 0 0 0.9rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--l-fg-3); } .pvpl-label b { color: var(--l-cyan); font-weight: 700; } /* Label + headline sharing one baseline (FEATURES / FAQ in the reference). */ .pvpl-label--inline { margin: 0; } .pvpl-headrow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.6rem 1.15rem; margin-bottom: clamp(1.5rem, 2.2vw, 2.25rem); } .pvpl-h1, .pvpl-h2, .pvpl-h3 { margin: 0; font-weight: 800; text-transform: uppercase; letter-spacing: -0.015em; line-height: 1.03; text-wrap: balance; } .pvpl-h1 { font-size: clamp(2.35rem, 4vw, 4.15rem); line-height: 0.99; } .pvpl-h2 { font-size: clamp(1.7rem, 2.6vw, 2.75rem); } .pvpl-h3 { font-size: clamp(1.4rem, 2vw, 2.05rem); } .pvpl-accent { color: var(--l-cyan); } .pvpl-lead { margin: 1.15rem 0 0; max-width: 34em; color: var(--l-fg-2); font-size: clamp(0.98rem, 1.02vw, 1.09rem); line-height: 1.72; } .pvpl-copy { margin: 0.9rem 0 0; max-width: 36em; color: var(--l-fg-2); font-size: 0.96rem; line-height: 1.7; } .pvpl-muted { color: var(--l-fg-3); } /* --- Buttons: landing-local, so the shared .pvp-btn stays untouched ---- */ .pvpl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; border: 1px solid transparent; border-radius: var(--l-radius); padding: 0.92rem 1.6rem; font-family: inherit; font-size: 0.97rem; font-weight: 700; line-height: 1.15; text-decoration: none; cursor: pointer; transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .pvpl-btn--primary { background: var(--l-blue); color: #ffffff; box-shadow: 0 10px 34px rgba(31, 140, 255, 0.34); } .pvpl-btn--primary:hover, .pvpl-btn--primary:focus-visible { background: #35a0ff; color: #ffffff; box-shadow: 0 14px 42px rgba(31, 140, 255, 0.46); } .pvpl-btn--ghost { border-color: var(--l-line-2); background: rgba(10, 22, 38, 0.55); color: var(--l-fg); } .pvpl-btn--ghost:hover, .pvpl-btn--ghost:focus-visible { border-color: var(--l-line-3); background: rgba(16, 35, 56, 0.85); color: var(--l-fg); } .pvpl-btn--sm { padding: 0.62rem 1.15rem; font-size: 0.88rem; } .pvpl-btn__arrow { transition: transform 0.18s ease; } .pvpl-btn:hover .pvpl-btn__arrow { transform: translateX(3px); } .pvp-landing a:focus-visible, .pvp-landing button:focus-visible, .pvp-landing summary:focus-visible { outline: 2px solid var(--l-cyan); outline-offset: 3px; } /* --- Checklist with cyan ticks ---------------------------------------- */ .pvpl-checks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.7rem; } .pvpl-checks li { display: grid; grid-template-columns: 1.25rem 1fr; align-items: start; gap: 0.7rem; color: var(--l-fg); font-size: 0.94rem; line-height: 1.45; } .pvpl-checks svg { width: 1.25rem; height: 1.25rem; margin-top: 0.05rem; color: var(--l-cyan); flex: none; } /* --- Product screenshot frame ----------------------------------------- */ .pvpl-shot { position: relative; display: block; border: 1px solid var(--l-line-3); border-radius: var(--l-radius-lg); background: var(--l-panel); overflow: hidden; box-shadow: var(--l-glow); } .pvpl-shot img { display: block; width: 100%; height: auto; } /* ========================================================================= Navbar ========================================================================= */ .pvpl-nav { position: fixed; inset: 0 0 auto; z-index: 1040; border-bottom: 1px solid transparent; transition: background-color 0.25s ease, border-color 0.25s ease, backdrop-filter 0.25s ease; } .pvpl-nav.is-stuck, .pvpl-nav.is-open { background: rgba(6, 13, 22, 0.88); border-bottom-color: var(--l-line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .pvpl-nav__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 76px; } .pvpl-nav__brand { display: inline-flex; align-items: center; flex: none; } /* Sized by height with width:auto, so the wordmark's aspect ratio is fixed by the mechanism and cannot drift. The bar's own min-height is unchanged — at 76px there is room for the larger mark without it crowding the links. */ .pvpl-nav__brand img { display: block; height: 34px; width: auto; } .pvpl-nav__links { display: none; flex: 1 1 auto; justify-content: center; align-items: center; gap: clamp(1rem, 2.4vw, 2.6rem); list-style: none; margin: 0; padding: 0; } .pvpl-nav__links a { color: var(--l-fg-2); font-size: 0.94rem; font-weight: 600; text-decoration: none; padding-block: 0.35rem; transition: color 0.16s ease; } .pvpl-nav__links a:hover, .pvpl-nav__links a:focus-visible { color: var(--l-fg); } .pvpl-nav__actions { display: none; align-items: center; gap: 0.7rem; flex: none; } .pvpl-nav__toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--l-line-2); border-radius: var(--l-radius); background: rgba(10, 22, 38, 0.7); color: var(--l-fg); cursor: pointer; } .pvpl-nav__toggle svg { width: 20px; height: 20px; } .pvpl-nav__toggle .pvpl-ico-close, .pvpl-nav__toggle[aria-expanded="true"] .pvpl-ico-open { display: none; } .pvpl-nav__toggle[aria-expanded="true"] .pvpl-ico-close { display: block; } .pvpl-nav__panel { display: none; padding: 0.5rem 0 1.4rem; border-top: 1px solid var(--l-line); } .pvpl-nav__panel.is-open { display: block; } .pvpl-nav__panel ul { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; } .pvpl-nav__panel a:not(.pvpl-btn) { display: block; padding: 0.85rem 0.15rem; border-bottom: 1px solid var(--l-line); color: var(--l-fg-2); font-size: 1rem; font-weight: 600; text-decoration: none; } .pvpl-nav__panel-actions { display: grid; gap: 0.6rem; } @media (min-width: 992px) { .pvpl-nav__links, .pvpl-nav__actions { display: flex; } .pvpl-nav__toggle, .pvpl-nav__panel { display: none !important; } .pvpl-nav__brand img { height: 37px; } } /* ========================================================================= Hero ========================================================================= */ .pvpl-hero { position: relative; isolation: isolate; padding-top: clamp(6.5rem, 9vw, 9rem); padding-bottom: clamp(2.75rem, 4vw, 4.25rem); overflow: hidden; } .pvpl-hero__art, .pvpl-hero__art img { position: absolute; inset: 0; width: 100%; height: 100%; } .pvpl-hero__art { z-index: -2; pointer-events: none; } .pvpl-hero__art img { object-fit: cover; /* Framed between the knight and the castle. The plate is already free of baked text (see artwork/cropped/), so this value is purely about composition, not about hiding anything. */ object-position: 30% 46%; opacity: 0.9; } /* Left scrim for headline legibility + bottom fade into the value strip. */ .pvpl-hero__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 13, 22, 0.95) 0%, rgba(6, 13, 22, 0.74) 24%, rgba(6, 13, 22, 0.28) 52%, rgba(6, 13, 22, 0.5) 100%), linear-gradient(180deg, rgba(6, 13, 22, 0.9) 0%, rgba(6, 13, 22, 0.05) 24%, rgba(6, 13, 22, 0.12) 62%, var(--l-bg) 100%); } .pvpl-hero__glow { position: absolute; z-index: -1; top: 12%; right: -6%; width: 58%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(31, 140, 255, 0.22), transparent 68%); pointer-events: none; } .pvpl-hero__grid { display: grid; gap: clamp(2.5rem, 4vw, 3.5rem); align-items: center; } .pvpl-hero__eyebrow { margin: 0 0 1.15rem; color: var(--l-fg-2); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; } .pvpl-hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: clamp(1.75rem, 2.6vw, 2.5rem); } .pvpl-hero__caps { display: flex; flex-wrap: wrap; gap: 0.9rem clamp(1.25rem, 2.6vw, 2.6rem); margin: clamp(1.75rem, 2.6vw, 2.5rem) 0 0; padding: 0; list-style: none; } .pvpl-hero__caps li { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--l-fg-2); font-size: 0.88rem; font-weight: 500; } .pvpl-hero__caps svg { width: 1.05rem; height: 1.05rem; color: var(--l-cyan); flex: none; } /* The stage is sized BY the screenshot, never the other way round: no large empty frame with a small picture inside it. */ .pvpl-hero__stage { position: relative; justify-self: center; width: 100%; max-width: 620px; } .pvpl-hero__stage .pvpl-shot { border-color: rgba(96, 176, 240, 0.45); } @media (min-width: 992px) { .pvpl-hero__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .pvpl-hero__stage { justify-self: end; width: auto; max-width: none; /* Reaches toward the viewport edge like the reference, without ever letting the copy column touch the browser chrome. Measured against the VIEWPORT: past the container's max-width a gutter-relative offset stops tracking the page and leaves a growing dead margin on wide screens. */ margin-right: calc( (min(var(--l-container), 100vw - (var(--l-gutter) * 2)) - 100vw) / 2 + 3vw ); transform: perspective(2000px) rotateY(-6deg) rotateX(1.2deg); transform-origin: right center; } /* Large, but never upscaled past the capture's own 820px and never so tall that the value strip is pushed a full screen down at 1080. */ .pvpl-hero__stage .pvpl-shot { width: min(46vw, 780px); } } /* ========================================================================= Value strip ========================================================================= */ .pvpl-strip { position: relative; background: var(--l-bg-strip); border-block: 1px solid var(--l-line); } .pvpl-strip__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 0; padding-block: clamp(1.75rem, 2.4vw, 2.35rem); } .pvpl-strip__item { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1rem; padding-inline: clamp(0.75rem, 1.6vw, 1.75rem); } .pvpl-strip__item + .pvpl-strip__item { border-left: 1px solid var(--l-line); } .pvpl-strip__item:nth-child(odd) { border-left: 0; padding-left: 0; } .pvpl-strip__icon { width: 2.6rem; height: 2.6rem; color: var(--l-cyan); flex: none; } .pvpl-strip__title { margin: 0; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .pvpl-strip__sub { margin: 0.3rem 0 0; color: var(--l-fg-2); font-size: 0.85rem; line-height: 1.45; } @media (min-width: 992px) { .pvpl-strip__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pvpl-strip__item:nth-child(odd) { border-left: 1px solid var(--l-line); padding-left: clamp(0.75rem, 1.6vw, 1.75rem); } .pvpl-strip__item:first-child { border-left: 0; padding-left: 0; } } /* ========================================================================= 01 / CONTROL — one cinematic composition, not two cards ========================================================================= */ .pvpl-control { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(22rem, 30vw, 30rem); display: flex; align-items: center; } .pvpl-control__art { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .pvpl-control__art img { width: 100%; height: 100%; object-fit: cover; /* Biased upward so the helm and shoulders carry the band rather than the sword hilt. The plate is pre-cropped, so the full width may show. */ object-position: 50% 34%; opacity: 0.95; } .pvpl-control__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--l-bg) 0%, rgba(6, 13, 22, 0.94) 30%, rgba(6, 13, 22, 0.35) 55%, rgba(6, 13, 22, 0.8) 84%, var(--l-bg) 100%), linear-gradient(180deg, var(--l-bg) 0%, transparent 18%, transparent 76%, var(--l-bg) 100%); } .pvpl-control__grid { display: grid; gap: clamp(2rem, 4vw, 3rem); width: 100%; } .pvpl-control__ghost { margin: 0; font-size: clamp(1.35rem, 1.95vw, 2rem); font-weight: 700; line-height: 1.22; letter-spacing: -0.01em; text-transform: uppercase; color: var(--l-fg-3); } .pvpl-control__ghost span { color: var(--l-cyan); } .pvpl-control__ghost::after { content: ""; display: block; width: 5.25rem; height: 2px; margin-top: 1.4rem; background: var(--l-cyan); } @media (min-width: 992px) { .pvpl-control__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr) minmax(0, 0.55fr); align-items: center; } .pvpl-control__spacer { display: block; } .pvpl-control__ghost { text-align: left; } } /* ========================================================================= 02 / ATTACK + 03 / VITALS — editorial split, no outer cards ========================================================================= */ .pvpl-split { display: grid; gap: clamp(2.75rem, 4vw, 3.5rem); } .pvpl-split__half { position: relative; display: grid; gap: clamp(1.5rem, 2.4vw, 2.25rem); align-content: start; } @media (min-width: 768px) { .pvpl-split__half { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); align-items: center; } /* Attack and Vitals are two different window shapes (roughly 1:1 and 1.45:1). Left to their natural aspects they render at noticeably different heights beside each other, which breaks the symmetry the split depends on. A shared 4:3 frame anchored top-left equalises them while keeping the part of each window that identifies it. Scoped to the breakpoint where the copy and the shot actually sit side by side. Below it the halves stack, so there is no symmetry left to equalise and the fixed frame has only one effect: a bordered box whose height does not come from the picture. An image that has not decoded yet then leaves a large empty dark stage on the page. Under 768px the screenshot sizes its own wrapper from its width/height attributes instead. */ .pvpl-split .pvpl-shot { aspect-ratio: 4 / 3; } .pvpl-split .pvpl-shot img { height: 100%; object-fit: cover; object-position: top left; } } @media (min-width: 1200px) { .pvpl-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 4vw, 4rem); } /* The thin tactical divider between the two halves. */ .pvpl-split__half + .pvpl-split__half::before { content: ""; position: absolute; top: -0.5rem; bottom: -0.5rem; left: calc(clamp(2.5rem, 4vw, 4rem) / -2); width: 1px; background: linear-gradient(180deg, transparent, var(--l-line-3) 22%, var(--l-line-3) 78%, transparent); } } /* ========================================================================= 05 / FEATURES ========================================================================= */ .pvpl-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; } .pvpl-feature { border: 1px solid var(--l-line); border-radius: var(--l-radius-lg); background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 45%), var(--l-panel); padding: 1.1rem 1.15rem 1.25rem; transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease; } .pvpl-feature:hover { border-color: var(--l-line-3); transform: translateY(-2px); } .pvpl-feature__top { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.85rem; } .pvpl-feature__top svg { width: 1.35rem; height: 1.35rem; color: var(--l-cyan); flex: none; } .pvpl-feature__num { color: var(--l-fg-3); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; } .pvpl-feature h3 { margin: 0 0 0.45rem; font-size: 1.02rem; font-weight: 700; letter-spacing: -0.005em; } .pvpl-feature p { margin: 0; color: var(--l-fg-2); font-size: 0.88rem; line-height: 1.55; } @media (min-width: 768px) { .pvpl-features { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1200px) { .pvpl-features { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* ========================================================================= 06 / HOW IT WORKS — one horizontal sequence, not three big cards ========================================================================= */ .pvpl-how { display: grid; gap: clamp(1.75rem, 2.6vw, 2.5rem); align-items: start; } .pvpl-steps { display: grid; gap: clamp(1.5rem, 2.4vw, 2.25rem); list-style: none; margin: 0; padding: 0; } .pvpl-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; } .pvpl-step__badge { position: relative; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--l-line-3); border-radius: var(--l-radius); background: rgba(16, 35, 56, 0.7); color: var(--l-cyan); font-size: 0.9rem; font-weight: 700; flex: none; } .pvpl-step h3 { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 700; } .pvpl-step p { margin: 0; color: var(--l-fg-2); font-size: 0.9rem; line-height: 1.6; } @media (min-width: 768px) { .pvpl-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1200px) { .pvpl-how { grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr); align-items: center; } } /* ========================================================================= 07 / UPDATES ========================================================================= */ .pvpl-updates { display: grid; gap: clamp(1.75rem, 2.6vw, 2.5rem); align-items: center; } .pvpl-release { display: grid; gap: 1.25rem; border: 1px solid var(--l-line-2); border-radius: var(--l-radius-lg); background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent 50%), var(--l-panel-2); padding: clamp(1.25rem, 2vw, 1.75rem); align-items: center; } .pvpl-release__ver { display: flex; align-items: center; flex-wrap: wrap; gap: 0.7rem; margin: 0; font-size: clamp(1.15rem, 1.5vw, 1.4rem); font-weight: 800; letter-spacing: -0.01em; } .pvpl-release__badge { border: 1px solid rgba(47, 207, 139, 0.45); border-radius: 999px; background: rgba(47, 207, 139, 0.14); color: var(--l-green); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; padding: 0.28rem 0.65rem; text-transform: none; } .pvpl-release__date { margin: 0.55rem 0 0; color: var(--l-fg-3); font-size: 0.86rem; } .pvpl-release__notes { margin: 0.55rem 0 0; color: var(--l-fg-2); font-size: 0.9rem; line-height: 1.6; max-width: 44em; } .pvpl-link { color: var(--l-cyan); text-decoration: underline; text-underline-offset: 2px; } .pvpl-release__empty { border: 1px dashed var(--l-line-2); border-radius: var(--l-radius-lg); background: var(--l-panel); padding: clamp(1.25rem, 2vw, 1.75rem); color: var(--l-fg-2); font-size: 0.93rem; line-height: 1.6; } @media (min-width: 768px) { .pvpl-release { grid-template-columns: minmax(0, 1fr) auto; } } @media (min-width: 1200px) { .pvpl-updates { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); } } /* ========================================================================= 08 / FAQ — native

, so it works with JS off and with a keyboard ========================================================================= */ .pvpl-faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; align-items: start; } .pvpl-faq__item { border: 1px solid var(--l-line-2); border-radius: var(--l-radius); background: var(--l-panel); overflow: hidden; } .pvpl-faq__item[open] { border-color: var(--l-line-3); } .pvpl-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.05rem; color: var(--l-fg); font-size: 0.93rem; font-weight: 600; line-height: 1.4; cursor: pointer; list-style: none; } .pvpl-faq__item summary::-webkit-details-marker { display: none; } .pvpl-faq__item summary svg { width: 1.05rem; height: 1.05rem; color: var(--l-cyan); flex: none; transition: transform 0.2s ease; } .pvpl-faq__item[open] summary svg { transform: rotate(180deg); } .pvpl-faq__item p { margin: 0; padding: 0 1.05rem 1.05rem; color: var(--l-fg-2); font-size: 0.91rem; line-height: 1.65; } @media (min-width: 768px) { .pvpl-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .pvpl-faq { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ========================================================================= Final CTA ========================================================================= */ .pvpl-final { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3.5rem, 6vw, 6rem); text-align: center; } /* The closing section carries no plate any more; the atmosphere is a single soft glow behind the type, which costs nothing to load and never competes with the line it sits behind. */ .pvpl-final::before { content: ""; position: absolute; inset: -40% -20% auto -20%; height: 150%; z-index: -1; pointer-events: none; background: radial-gradient(46% 52% at 50% 46%, rgba(31, 140, 255, 0.16), transparent 70%), radial-gradient(34% 40% at 50% 92%, rgba(63, 176, 255, 0.08), transparent 74%); } .pvpl-final__title span { color: var(--l-fg-3); } .pvpl-final__sub { margin: 1rem auto 0; max-width: 40rem; color: var(--l-fg-2); font-size: clamp(0.98rem, 1.05vw, 1.1rem); line-height: 1.65; } .pvpl-final__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin-top: clamp(1.75rem, 2.6vw, 2.25rem); } /* ========================================================================= Footer ========================================================================= */ .pvpl-footer { border-top: 1px solid var(--l-line); background: #050b13; padding-block: clamp(2.25rem, 3.2vw, 3rem); } .pvpl-footer__grid { display: grid; gap: 1.75rem; align-items: start; } .pvpl-footer__brand img { display: block; height: 30px; width: auto; } .pvpl-footer__tag { margin: 0.55rem 0 0; color: var(--l-fg-3); font-size: 0.78rem; letter-spacing: 0.06em; } .pvpl-footer__links { display: flex; flex-wrap: wrap; gap: 0.75rem clamp(1.1rem, 2.2vw, 2.1rem); list-style: none; margin: 0; padding: 0; } .pvpl-footer__links a { color: var(--l-fg-2); font-size: 0.9rem; font-weight: 600; text-decoration: none; } .pvpl-footer__links a:hover { color: var(--l-fg); } .pvpl-footer__note { margin: 1.1rem 0 0; color: var(--l-fg-3); font-size: 0.82rem; line-height: 1.6; max-width: 46em; } .pvpl-footer__mail { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--l-fg-2); font-size: 0.9rem; text-decoration: none; } .pvpl-footer__mail svg { width: 1.05rem; height: 1.05rem; color: var(--l-cyan); } .pvpl-footer__mail:hover { color: var(--l-fg); } .pvpl-footer__rights { margin: 0.65rem 0 0; color: var(--l-fg-3); font-size: 0.8rem; } /* ========================================================================= Legal documents ========================================================================= */ .pvpl-legal { padding: 7.25rem 0 3.5rem; } .pvpl-legal__article { max-width: 56rem; margin-inline: auto; color: var(--l-fg-2); font-size: 1.05rem; line-height: 1.75; } .pvpl-legal__article h1, .pvpl-legal__article h2, .pvpl-legal__article h3 { color: var(--l-fg); font-weight: 700; line-height: 1.28; } .pvpl-legal__article h1 { margin: 0 0 0.85rem; font-size: clamp(1.7rem, 2.4vw, 2.2rem); } .pvpl-legal__article h2 { margin: 2rem 0 0.7rem; font-size: 1.28rem; } .pvpl-legal__article h3 { margin: 1.45rem 0 0.5rem; font-size: 1.08rem; } .pvpl-legal__article p, .pvpl-legal__article ul, .pvpl-legal__article ol { margin: 0 0 1rem; } .pvpl-legal__article ul, .pvpl-legal__article ol { padding-left: 1.25rem; } .pvpl-legal__article li + li { margin-top: 0.35rem; } .pvpl-legal__article strong { color: var(--l-fg); font-weight: 650; } .pvpl-legal__article a { color: var(--l-cyan-soft); text-decoration: underline; text-underline-offset: 0.15em; } .pvpl-legal__article a:hover, .pvpl-legal__article a:focus-visible { color: var(--l-fg); } .pvpl-legal__article a:focus-visible, .pvpl-footer__links a:focus-visible { outline: 2px solid var(--l-cyan); outline-offset: 3px; } .pvpl-legal__article hr { margin: 1.75rem 0; border: 0; border-top: 1px solid var(--l-line); } @media (min-width: 992px) { .pvpl-footer__grid { grid-template-columns: auto minmax(0, 1fr) auto; gap: 2.5rem; } .pvpl-footer__center { text-align: center; } .pvpl-footer__links { justify-content: center; } .pvpl-footer__note { margin-inline: auto; } .pvpl-footer__right { text-align: right; } } /* ========================================================================= Reveal-on-scroll Hidden state is applied ONLY once JS has marked the document, so a failed or blocked script can never leave the page blank. ========================================================================= */ .pvpl-js .pvpl-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s ease; will-change: opacity, transform; } .pvpl-js .pvpl-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .pvp-landing *, .pvp-landing *::before, .pvp-landing *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Layout must be identical with motion off — reveal targets simply start in their final state. */ .pvpl-js .pvpl-reveal, .pvpl-js .pvpl-reveal.is-in { opacity: 1; transform: none; } .pvpl-hero__stage { transform: none !important; } .pvpl-btn:hover .pvpl-btn__arrow, .pvpl-feature:hover { transform: none; } } /* ========================================================================= 06 / PRICING Built from the same tokens as every other section — panel surface, blue hairline, the shared button classes — so it reads as part of the page rather than a block borrowed from somewhere else. ========================================================================= */ .pvpl-pricing__head { max-width: 44rem; } .pvpl-pricing__head .pvpl-copy { margin-top: 0.9rem; } .pvpl-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: clamp(2rem, 3.2vw, 3rem); } .pvpl-plan { display: flex; flex-direction: column; padding: clamp(1.5rem, 2.2vw, 2rem); border: 1px solid var(--l-line); border-radius: var(--l-radius-lg); background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 45%), var(--l-panel); } /* The monthly plan is the one most people end up on, so it gets the accent — not a "most popular" badge the page has no numbers to back up. */ .pvpl-plan--featured { border-color: var(--l-line-3); background: linear-gradient(180deg, rgba(31, 140, 255, 0.10), transparent 52%), var(--l-panel-2); } .pvpl-plan__name { margin: 0; color: var(--l-fg-2); font-size: 0.98rem; font-weight: 600; letter-spacing: 0.01em; } .pvpl-plan__price { margin: 0.65rem 0 0; color: var(--l-fg); font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; } .pvpl-plan__note { margin: 0.5rem 0 0; color: var(--l-fg-3); font-size: 0.92rem; line-height: 1.55; min-height: 2.9em; } .pvpl-plan__cta { margin-top: 1.35rem; width: 100%; justify-content: center; } .pvpl-pricing__note { margin: clamp(1.25rem, 2vw, 1.75rem) 0 0; color: var(--l-fg-3); font-size: 0.9rem; text-align: center; } @media (max-width: 900px) { .pvpl-plans { grid-template-columns: minmax(0, 1fr); } .pvpl-plan__note { min-height: 0; } } /* ========================================================================= 02 / SHOWCASE — layered product wall One stage, seven absolutely-positioned layers. No grid, no flex row: each layer gets left/top/width as a percentage of the stage, and the stage keeps a fixed ratio, so the whole composition scales as a single picture. Nothing clips a capture. A layer carries a width only; its height comes from the file's own aspect ratio via height:auto, and the stage never hides overflow. Depth is scale, position, z-order, shadow and a few degrees of rotation — never blur, never a mask. ========================================================================= */ .pvpl-showcase__head { max-width: 44rem; margin-bottom: clamp(1rem, 1.8vw, 1.75rem); } .pvpl-showcase__head .pvpl-copy { margin-top: 0.75rem; } .pvpl-wall { position: relative; width: 100%; aspect-ratio: 1000 / 420; perspective: 2400px; perspective-origin: 50% 42%; } /* Barely-there light behind the hero screen, so the wall sits on something. */ .pvpl-wall__glow { position: absolute; inset: 6% 4% -8%; z-index: 0; pointer-events: none; background: radial-gradient(48% 54% at 50% 56%, rgba(31, 140, 255, 0.17), transparent 72%), radial-gradient(70% 60% at 50% 72%, rgba(8, 18, 30, 0.9), transparent 78%); } .pvpl-layer { position: absolute; left: var(--l-x); top: var(--l-y); width: var(--l-w); margin: 0; border: 1px solid var(--l-line-2); border-radius: 10px; background: var(--l-panel); transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; } /* The capture itself: full width of its layer, height from its own ratio. */ .pvpl-layer img { display: block; width: 100%; height: auto; border-radius: inherit; } /* --- Depth tiers ------------------------------------------------------- */ .pvpl-layer--back { z-index: 1; opacity: 0.9; box-shadow: 0 12px 30px rgba(3, 9, 18, 0.55); } .pvpl-layer--mid { z-index: 3; opacity: 0.97; box-shadow: 0 20px 44px rgba(3, 9, 18, 0.66); } .pvpl-layer--front { z-index: 6; border-color: var(--l-line-3); box-shadow: 0 34px 78px rgba(2, 7, 16, 0.8), 0 0 70px rgba(31, 140, 255, 0.16); } /* --- Per-layer attitude ------------------------------------------------ */ .pvpl-layer--account { transform: rotateY(7deg) rotateZ(-0.6deg); } .pvpl-layer--subscription { z-index: 2; transform: rotateY(0.5deg); } .pvpl-layer--devices { transform: rotateY(-7deg) rotateZ(0.6deg); } .pvpl-layer--profiles { transform: rotateY(8deg) rotateZ(-1deg); } .pvpl-layer--support { transform: rotateY(-8deg) rotateZ(1deg); } .pvpl-layer--recovery { z-index: 4; transform: rotateY(-7deg) rotateZ(1deg); } .pvpl-layer--attack { transform: none; } @media (hover: hover) { .pvpl-layer:hover { z-index: 9; border-color: var(--l-line-3); box-shadow: 0 38px 84px rgba(2, 7, 16, 0.82), 0 0 60px rgba(31, 140, 255, 0.2); } .pvpl-layer--attack:hover { transform: translateY(-8px) scale(1.02); } .pvpl-layer--account:hover { transform: translateY(-8px) scale(1.02) rotateY(7deg) rotateZ(-0.6deg); } .pvpl-layer--subscription:hover { transform: translateY(-8px) scale(1.02) rotateY(0.5deg); } .pvpl-layer--devices:hover { transform: translateY(-8px) scale(1.02) rotateY(-7deg) rotateZ(0.6deg); } .pvpl-layer--profiles:hover { transform: translateY(-8px) scale(1.02) rotateY(8deg) rotateZ(-1deg); } .pvpl-layer--support:hover { transform: translateY(-8px) scale(1.02) rotateY(-8deg) rotateZ(1deg); } .pvpl-layer--recovery:hover { transform: translateY(-8px) scale(1.02) rotateY(-7deg) rotateZ(1deg); } } /* Back layers arrive first, Attack last, so the wall builds from behind. */ .pvp-landing.pvpl-js .pvpl-wall .pvpl-layer { opacity: 0; transform: translateY(15px); } .pvp-landing.pvpl-js .pvpl-wall.is-visible .pvpl-layer { animation: pvpl-layer-in 0.62s cubic-bezier(0.22, 0.75, 0.3, 1) forwards; animation-delay: calc(var(--l-i) * 70ms); } @keyframes pvpl-layer-in { to { opacity: 1; transform: none; } } /* Rotated layers animate to their own resting transform, not to none. */ .pvp-landing.pvpl-js .pvpl-wall.is-visible .pvpl-layer--account { animation-name: pvpl-in-account; } .pvp-landing.pvpl-js .pvpl-wall.is-visible .pvpl-layer--subscription { animation-name: pvpl-in-subscription; } .pvp-landing.pvpl-js .pvpl-wall.is-visible .pvpl-layer--devices { animation-name: pvpl-in-devices; } .pvp-landing.pvpl-js .pvpl-wall.is-visible .pvpl-layer--profiles { animation-name: pvpl-in-profiles; } .pvp-landing.pvpl-js .pvpl-wall.is-visible .pvpl-layer--support { animation-name: pvpl-in-support; } .pvp-landing.pvpl-js .pvpl-wall.is-visible .pvpl-layer--recovery { animation-name: pvpl-in-recovery; } @keyframes pvpl-in-account { to { opacity: 0.9; transform: rotateY(7deg) rotateZ(-0.6deg); } } @keyframes pvpl-in-subscription { to { opacity: 0.9; transform: rotateY(0.5deg); } } @keyframes pvpl-in-devices { to { opacity: 0.9; transform: rotateY(-7deg) rotateZ(0.6deg); } } @keyframes pvpl-in-profiles { to { opacity: 0.97; transform: rotateY(8deg) rotateZ(-1deg); } } @keyframes pvpl-in-support { to { opacity: 0.97; transform: rotateY(-8deg) rotateZ(1deg); } } @keyframes pvpl-in-recovery { to { opacity: 0.97; transform: rotateY(-7deg) rotateZ(1deg); } } /* --- Tablet: same wall, flatter and a little taller -------------------- */ @media (max-width: 1180px) { .pvpl-wall { aspect-ratio: 1000 / 470; perspective: 3200px; } .pvpl-layer--account { transform: rotateY(4deg); } .pvpl-layer--devices { transform: rotateY(-4deg); } .pvpl-layer--profiles { transform: rotateY(4deg); } .pvpl-layer--support { transform: rotateY(-4deg); } .pvpl-layer--recovery { transform: rotateY(-4deg); } } /* * Phone: the wall would only shrink every screen past reading size, so it * becomes a snap strip instead. Same seven files, each one whole. */ @media (max-width: 860px) { .pvpl-wall { aspect-ratio: auto; perspective: none; display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-block: 0.25rem 0.9rem; margin-inline: calc(var(--l-gutter) * -1); padding-inline: var(--l-gutter); -webkit-overflow-scrolling: touch; } .pvpl-wall__glow { display: none; } .pvpl-layer { position: static; width: auto; align-self: center; scroll-snap-align: center; opacity: 1; transform: none; box-shadow: 0 16px 36px rgba(3, 9, 18, 0.6); } /* Attack leads the strip; the rest keep the wall's back-to-front order. */ .pvpl-layer--attack { order: -1; } .pvp-landing.pvpl-js .pvpl-wall .pvpl-layer, .pvp-landing.pvpl-js .pvpl-wall.is-visible .pvpl-layer { opacity: 1; transform: none; animation: none; } } @media (prefers-reduced-motion: reduce) { .pvp-landing.pvpl-js .pvpl-wall .pvpl-layer { opacity: 1; transform: none; animation: none; } .pvp-landing.pvpl-js .pvpl-wall .pvpl-layer--account { opacity: 0.9; transform: rotateY(7deg) rotateZ(-0.6deg); } .pvp-landing.pvpl-js .pvpl-wall .pvpl-layer--subscription { opacity: 0.9; transform: rotateY(0.5deg); } .pvp-landing.pvpl-js .pvpl-wall .pvpl-layer--devices { opacity: 0.9; transform: rotateY(-7deg) rotateZ(0.6deg); } .pvp-landing.pvpl-js .pvpl-wall .pvpl-layer--profiles { opacity: 0.97; transform: rotateY(8deg) rotateZ(-1deg); } .pvp-landing.pvpl-js .pvpl-wall .pvpl-layer--support { opacity: 0.97; transform: rotateY(-8deg) rotateZ(1deg); } .pvp-landing.pvpl-js .pvpl-wall .pvpl-layer--recovery { opacity: 0.97; transform: rotateY(-7deg) rotateZ(1deg); } }