/* XPlusePlayer landing page Hand-written rather than pulled from a CSS framework CDN: a utility framework would ship ~50x more bytes than this file for the same result, and Core Web Vitals feed directly into search ranking for a page whose whole job is being found. */ :root { --purple: #7c3aed; --purple-light: #a855f7; --pink: #ec4899; --bg: #0a0912; --bg-alt: #100e1c; --surface: rgba(255, 255, 255, .045); --surface-2: rgba(255, 255, 255, .075); --line: rgba(255, 255, 255, .1); --text: #eceaf6; --muted: #9c95b8; --grad: linear-gradient(115deg, var(--purple-light), var(--pink)); --wrap: 1180px; --radius: 18px; --shadow: 0 24px 60px -20px rgba(0, 0, 0, .8); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.65 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; } /* Belt and braces against sideways scroll. `clip` rather than `hidden` so neither element becomes a scroll container - `overflow-x: hidden` on alone still lets scroll. */ html, body { overflow-x: clip; } @supports not (overflow-x: clip) { html, body { overflow-x: hidden; } } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } h1, h2, h3 { line-height: 1.15; letter-spacing: -.022em; margin: 0 0 .5em; font-weight: 800; } p { margin: 0 0 1em; } .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; } .wrap--narrow { width: min(100% - 40px, 780px); } .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--purple); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0; } .skip:focus { left: 0; } /* ───────────────────────────── buttons ───────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: inherit; font-weight: 700; letter-spacing: -.01em; padding: 13px 24px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } .btn--primary { background: var(--grad); color: #fff; box-shadow: 0 10px 30px -8px rgba(168, 85, 247, .65); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -8px rgba(236, 72, 153, .7); } .btn--primary:active { transform: translateY(0); } .btn--sm { padding: 9px 18px; font-size: 15px; } .btn--lg { padding: 17px 34px; font-size: 18px; } .btn--block { width: 100%; } .btn:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; } /* Locked until the countdown finishes. pointer-events stays on so the click handler can explain why nothing happened, rather than the button feeling broken. */ .is-locked { filter: grayscale(.85) brightness(.65); box-shadow: none; cursor: not-allowed; } .is-locked:hover { transform: none; box-shadow: none; } /* ────────────────────────────── nav ──────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(10, 9, 18, .72); border-bottom: 1px solid transparent; transition: border-color .25s ease, background .25s ease; } .nav.is-stuck { border-bottom-color: var(--line); background: rgba(10, 9, 18, .92); } .nav__inner { display: flex; align-items: center; gap: 28px; height: 72px; } .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 800; font-size: 19px; } .brand__mark { border-radius: 10px; } .nav__links { display: flex; gap: 26px; margin-left: auto; font-size: 15.5px; font-weight: 500; } .nav__links a { color: var(--muted); text-decoration: none; transition: color .18s ease; } .nav__links a:hover { color: var(--text); } @media (max-width: 860px) { .nav__links { display: none; } .nav__inner { gap: 16px; } .btn--sm { margin-left: auto; } } /* ────────────────────────────── hero ─────────────────────────────── */ .hero { position: relative; padding: 84px 0 96px; overflow: hidden; } .hero__glow { position: absolute; inset: -30% -10% auto -10%; height: 720px; pointer-events: none; background: radial-gradient(48% 52% at 78% 22%, rgba(168, 85, 247, .34), transparent 65%), radial-gradient(42% 46% at 14% 72%, rgba(236, 72, 153, .22), transparent 65%); filter: blur(8px); } .hero__inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } .hero h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); margin-bottom: .38em; } .lede { font-size: 1.13rem; color: var(--muted); max-width: 56ch; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #d6cffb; background: var(--surface-2); border: 1px solid var(--line); padding: 7px 15px; border-radius: 999px; margin-bottom: 22px; } .dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 12px #34d399; } .cta { margin-top: 30px; } .cta--center { text-align: center; margin-top: 52px; } .cta__meta { font-size: 14px; color: var(--muted); margin: 14px 0 0; } .cta__meta code { font-size: 11.5px; word-break: break-all; color: #b9b1d8; } .stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .store { display: inline-flex; align-items: center; gap: 11px; padding: 9px 18px 9px 15px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); opacity: .72; cursor: default; } .store span { display: flex; flex-direction: column; line-height: 1.25; font-weight: 700; font-size: 15px; color: #cfc8ea; } .store small { font-size: 10.5px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } /* Phone mock-ups. The frame is CSS so the screenshots stay unretouched. */ .hero__art { position: relative; height: 560px; } .phone { border: 9px solid #17141f; border-radius: 40px; overflow: hidden; background: #17141f; box-shadow: var(--shadow); } .phone img { border-radius: 31px; } .hero__art .phone { position: absolute; width: 268px; } .phone--front { right: 6%; top: 0; z-index: 2; transform: rotate(-3deg); } .phone--back { right: 44%; top: 54px; z-index: 1; transform: rotate(5deg); opacity: .88; } /* Below the breakpoint the phones come out of absolute positioning entirely. Keeping them absolute meant their offsets were measured against a container narrower than they were, which pushed them past the viewport and scrolled the whole page sideways. */ @media (max-width: 980px) { .hero { padding: 56px 0 64px; } .hero__inner { grid-template-columns: 1fr; gap: 44px; } .hero__art { height: auto; display: flex; justify-content: center; align-items: flex-start; } .hero__art .phone { position: static; width: min(44%, 240px); } .phone--back { transform: rotate(5deg); margin-top: 30px; } .phone--front { transform: rotate(-3deg); margin-left: -26px; } } @media (max-width: 700px) { .br-lg { display: none; } /* let the headline wrap naturally on phones */ } /* ──────────────────────────── glance ─────────────────────────────── */ .glance { border-block: 1px solid var(--line); background: var(--bg-alt); } .glance__grid { display: grid; grid-template-columns: repeat(6, 1fr); text-align: center; padding: 26px 0; margin: 0; } .glance__grid > div + div { border-left: 1px solid var(--line); } .glance dt { font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; } .glance dd { margin: 0; font-weight: 800; font-size: 17px; } @media (max-width: 760px) { .glance__grid { grid-template-columns: repeat(3, 1fr); gap: 22px 0; } .glance__grid > div:nth-child(3n+1) { border-left: 0; } } /* ──────────────────────────── sections ──────────────────────────── */ .section { padding: 96px 0; } .section--alt { background: var(--bg-alt); border-block: 1px solid var(--line); } .h2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); } .section__lede { color: var(--muted); font-size: 1.08rem; max-width: 62ch; margin-bottom: 44px; } /* ─────────────────────── screenshot rail ────────────────────────── */ .shots { display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px calc((100vw - min(100% - 40px, var(--wrap))) / 2) 30px; scrollbar-width: thin; scrollbar-color: var(--purple) transparent; } .shots::-webkit-scrollbar { height: 8px; } .shots::-webkit-scrollbar-thumb { background: var(--purple); border-radius: 99px; } .shot { flex: 0 0 auto; width: 244px; margin: 0; scroll-snap-align: center; } .shot figcaption { margin-top: 15px; text-align: center; font-size: 14.5px; color: var(--muted); } .shots:focus-visible { outline: 3px solid var(--pink); outline-offset: 6px; } /* ────────────────────────── feature grid ────────────────────────── */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 20px; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; transition: border-color .2s ease, transform .2s ease, background .2s ease; } .card:hover { border-color: rgba(168, 85, 247, .45); transform: translateY(-3px); background: var(--surface-2); } .card__icon { font-size: 26px; display: block; margin-bottom: 14px; } .card h3 { font-size: 1.12rem; margin-bottom: .45em; } .card p { color: var(--muted); font-size: 15.4px; margin: 0; } /* ────────────────────────── privacy block ───────────────────────── */ .privacy { display: grid; grid-template-columns: 1.15fr .85fr; gap: 52px; align-items: start; } @media (max-width: 900px) { .privacy { grid-template-columns: 1fr; gap: 36px; } } .checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; } .checks li { position: relative; padding-left: 34px; color: var(--muted); } .checks li::before { content: ""; position: absolute; left: 0; top: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--grad) padding-box; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23fff'/%3E%3C/svg%3E") center/16px no-repeat, linear-gradient(#000, #000); -webkit-mask-composite: source-over; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23fff'/%3E%3C/svg%3E") center/16px no-repeat; } .perms { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px; } .perms h3 { font-size: 1.1rem; } .perms dl { margin: 0; } .perms dt { font-weight: 700; margin-top: 18px; font-size: 15.4px; } .perms dd { margin: 4px 0 0; color: var(--muted); font-size: 14.8px; } /* ──────────────────────────── steps ─────────────────────────────── */ .steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: s; } @media (max-width: 820px) { .steps { grid-template-columns: 1fr; } } .steps li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; } .steps__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--grad); font-weight: 800; margin-bottom: 16px; color: #fff; } .steps h3 { font-size: 1.08rem; } .steps p { color: var(--muted); font-size: 15.2px; margin: 0; } /* ───────────────────────────── faq ──────────────────────────────── */ .faq { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); margin-bottom: 12px; overflow: hidden; } .faq summary { cursor: pointer; padding: 19px 54px 19px 22px; font-weight: 700; position: relative; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; translate: 0 -50%; font-size: 24px; font-weight: 400; color: var(--purple-light); transition: rotate .22s ease; } .faq[open] summary::after { content: "−"; rotate: 180deg; } .faq p { margin: 0; padding: 0 22px 20px; color: var(--muted); font-size: 15.6px; } .faq summary:focus-visible { outline: 3px solid var(--pink); outline-offset: -3px; } /* ─────────────────────────── final cta ──────────────────────────── */ .final { padding: 100px 0; text-align: center; position: relative; overflow: hidden; } .final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(52% 66% at 50% 0%, rgba(168, 85, 247, .28), transparent 70%); } .final__inner { position: relative; } .final__icon { border-radius: 22px; margin: 0 auto 24px; box-shadow: var(--shadow); } .final h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); } .final p { color: var(--muted); margin-bottom: 32px; } /* ──────────────────────────── footer ────────────────────────────── */ .foot { border-top: 1px solid var(--line); padding: 32px 0; background: var(--bg-alt); } .foot__inner { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 14.6px; color: var(--muted); } .foot__inner p { margin: 0; } .foot nav { display: flex; gap: 22px; } .foot a { text-decoration: none; } .foot a:hover { color: var(--text); } /* ─────────────────────── download modal ─────────────────────────── */ .modal { border: 0; padding: 0; background: transparent; color: var(--text); max-width: 460px; width: calc(100% - 32px); margin: auto; } .modal::backdrop { background: rgba(6, 5, 12, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .modal[open] .modal__card { animation: pop .28s cubic-bezier(.2, .9, .3, 1.3); } @keyframes pop { from { transform: scale(.93); opacity: 0; } to { transform: scale(1); opacity: 1; } } .modal__card { position: relative; text-align: center; background: linear-gradient(170deg, #191430, #100d1e); border: 1px solid var(--line); border-radius: 24px; padding: 34px 28px 28px; box-shadow: var(--shadow); } .modal__close { position: absolute; top: 12px; right: 14px; width: 38px; height: 38px; background: transparent; border: 0; color: var(--muted); font-size: 28px; line-height: 1; cursor: pointer; border-radius: 50%; } .modal__close:hover { color: var(--text); background: var(--surface-2); } .modal__title { font-size: 1.4rem; margin-bottom: .3em; } .modal__sub { color: var(--muted); font-size: 15px; margin-bottom: 22px; } .modal__meta { font-size: 12.8px; color: var(--muted); margin: 14px 0 0; } .ring { position: relative; width: 120px; height: 120px; margin: 0 auto 22px; } .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .ring circle { fill: none; stroke-width: 8; stroke-linecap: round; } .ring__track { stroke: rgba(255, 255, 255, .09); } .ring__bar { stroke: var(--purple-light); stroke-dasharray: 326.7; /* 2 * PI * r, r = 52 */ stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; } .ring__num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; font-weight: 800; } .ring.is-done .ring__bar { stroke: #34d399; } .adbox { margin: 0 0 22px; border: 1px dashed var(--line); border-radius: 14px; padding: 10px; background: rgba(255, 255, 255, .02); } .adbox__label { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .adbox__inner { min-height: 100px; display: grid; place-items: center; }