/* Neon Premium — matches index.html and the app's jp_neon_premium_* palette. These values are
kept identical to index.html's :root on purpose: the info pages and the portal are one site,
and a near-miss navy reads worse than an obvious difference. */
:root {
--primary: #00E7FF;
--secondary: #F24BFF;
--primary-soft: rgba(0, 231, 255, 0.16);
--primary-border: rgba(0, 231, 255, 0.38);
--bg: #030720;
--surface: rgba(0, 231, 255, 0.05);
--surface-strong: rgba(7, 16, 58, 0.92);
--border: rgba(16, 223, 255, 0.22);
--text: #F9FBFF;
--text-dim: #9DA9E0;
--warning: #FFD95A;
--gradient: linear-gradient(135deg, #00DFFF 0%, #4A5EFF 50%, #D642FF 100%);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Paint the navy on as well. Between page loads the browser paints the canvas before
body styles apply, and with no html background that canvas is white — which is the flash you
see when moving between pages. color-scheme:dark also stops the scrollbar flashing light. */
html {
background-color: #030720;
color-scheme: dark;
/* Reserve the scrollbar gutter permanently. Without this the browser paints the first frame
before it knows the page will scroll: no scrollbar means a ~14px wider viewport, so the
centred column (margin:0 auto) starts ~7px right, then snaps left the instant the scrollbar
appears. That's the split-second jump on every navigation — including reloading the same
page. overflow-y:scroll is the fallback for browsers without scrollbar-gutter. */
overflow-y: scroll;
scrollbar-gutter: stable;
}
body {
min-height: 100vh;
font-family: 'Manrope', sans-serif;
color: var(--text);
/* Cyan bloom left, magenta right, over the app's navy — same as index.html's body.
Deliberately NOT background-attachment:fixed: it forces a repaint of the whole gradient
on scroll and made page transitions flicker. */
background:
radial-gradient(circle at 16% 12%, rgba(0, 231, 255, 0.14), transparent 30%),
radial-gradient(circle at 86% 20%, rgba(242, 75, 255, 0.12), transparent 28%),
linear-gradient(180deg, #061032 0%, #030720 100%);
line-height: 1.6;
}
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
background-size: 58px 58px;
mask-image: linear-gradient(120deg, rgba(0,0,0,0.9), transparent 76%);
}
a {
color: inherit;
}
.page-shell {
position: relative;
width: min(1180px, calc(100% - 36px));
margin: 0 auto;
padding: 34px 0 46px;
}
.topbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
margin-bottom: 34px;
}
/* Icon + wordmark lockup, identical to .brand-lockup / .brand-icon in index.html. Explicit
width/height on the img so the header can't reflow while the PNG loads. */
/* flex-start, not center — see index.html: centering measures against the wordmark plus the
subtitle underneath, dropping the icon ~25px below the "iOPlayer" line. Both are 52px tall, so
a shared top edge lines them up. */
.brand {
display: flex;
align-items: flex-start;
gap: 14px;
text-decoration: none;
}
.brand-icon {
width: 52px;
height: 52px;
border-radius: 14px;
flex: 0 0 auto;
box-shadow: 0 10px 24px rgba(0, 231, 255, 0.18);
}
.brand-text {
display: block;
}
.brand-mark {
display: block;
font-size: clamp(2rem, 4vw, 3.4rem);
font-weight: 900;
letter-spacing: -0.08em;
line-height: 0.95;
background: var(--gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.brand-subtitle {
display: block;
margin-top: 7px;
color: var(--text-dim);
font-size: 0.86rem;
font-weight: 800;
}
.nav-pills {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 10px;
}
.nav-pills a,
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 44px;
border: 1px solid var(--border);
border-radius: 999px;
padding: 11px 15px;
color: var(--text);
background: rgba(255,255,255,0.045);
text-decoration: none;
font: inherit;
font-size: 0.84rem;
font-weight: 900;
/* background-color, not background: the shorthand also animates background-image, and the
Activate/Manage pills carry gradients that can't be interpolated — the browser repaints
them abruptly mid-transition, which flickers. transform stays for the :active press only. */
transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.1s ease;
}
/* Activate + Manage travel as a pair - identical to index.html's .nav-actions. Ungrouped, the
flex row could leave Activate on line 1 and push Manage to line 2, and where that break landed
depended on the page's brand width, so the bar differed page to page. */
.nav-actions {
display: inline-flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
}
.nav-pills a.activate-device-link {
border-color: rgba(0, 231, 255, 0.62);
background: var(--gradient);
box-shadow: 0 14px 34px rgba(0, 231, 255, 0.24);
}
.nav-pills a.manage-device-link {
border-color: rgba(0, 231, 255, 0.48);
background: rgba(0, 231, 255, 0.1);
}
.nav-pills a.activate-device-link:hover,
.nav-pills a.activate-device-link:focus-visible {
border-color: rgba(255, 255, 255, 0.28);
/* Brighter cyan→magenta, mirroring the app's focused-card state. */
background: linear-gradient(135deg, #35F6D8 0%, #00E7FF 45%, #FF64F6 100%);
}
.nav-pills a[aria-current="page"] {
border-color: rgba(0, 231, 255, 0.78);
color: #fff;
background: rgba(0, 231, 255, 0.2);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 24px rgba(0, 231, 255, 0.16);
}
.nav-pills a[aria-current="page"]::before {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--primary);
box-shadow: 0 0 12px rgba(0, 231, 255, 0.75);
content: "";
}
/* Hover: quiet cyan lift, matching index.html's .site-nav. The 3px white outline used to fire on
hover too, flashing a ring around every button the pointer crossed — that's the flicker. It now
belongs to :focus-visible alone, so keyboard focus stays clearly visible. */
/* No translateY lift — see index.html: each button nudging up 1px and back made the nav twitch
as the pointer crossed it, buttons briefly sitting at different heights. Colour is enough. */
.nav-pills a:hover,
.btn:hover {
border-color: var(--primary-border);
background: rgba(0, 231, 255, 0.13);
box-shadow: 0 18px 34px rgba(0,0,0,0.22);
}
.nav-pills a:focus-visible,
.btn:focus-visible {
border-color: var(--primary-border);
background: rgba(0, 231, 255, 0.13);
outline: 3px solid rgba(255, 255, 255, 0.92);
outline-offset: 3px;
}
.nav-pills a:active,
.btn:active {
transform: translateY(0) scale(0.98);
}
.btn-primary {
border-color: rgba(0, 231, 255, 0.58);
background: var(--gradient);
box-shadow: 0 18px 42px rgba(0, 231, 255, 0.28);
}
.hero {
overflow: hidden;
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
gap: 24px;
align-items: stretch;
border: 1px solid rgba(255,255,255,0.11);
border-radius: 34px;
padding: clamp(26px, 5vw, 54px);
background:
radial-gradient(circle at 20% 18%, rgba(0, 231, 255, 0.22), transparent 34%),
linear-gradient(135deg, rgba(6, 15, 54, 0.98), rgba(3, 6, 22, 0.98));
box-shadow: 0 38px 96px rgba(0, 0, 0, 0.45);
}
.hero::after {
content: '';
position: absolute;
width: 360px;
height: 360px;
right: -150px;
bottom: -150px;
border: 48px solid rgba(0, 231, 255, 0.13);
border-radius: 50%;
}
.hero > * {
position: relative;
z-index: 1;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 18px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 999px;
padding: 8px 12px;
color: #ffd4d8;
background: rgba(255,255,255,0.06);
font-size: 0.72rem;
font-weight: 900;
letter-spacing: 0.14em;
text-transform: uppercase;
}
h1 {
max-width: 780px;
font-size: clamp(2.55rem, 6vw, 5.35rem);
line-height: 0.94;
letter-spacing: -0.075em;
font-weight: 900;
}
.hero-copy {
max-width: 700px;
margin-top: 20px;
color: #c7c9d1;
font-size: clamp(1rem, 1.55vw, 1.16rem);
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 26px;
}
/* Was #050c2c (neutral grey) under a white wash — the old near-black theme showing through. A
white overlay on navy goes grey, so this panel never joined the theme. Navy base, cyan wash. */
.hero-card {
border: 1px solid rgba(16, 223, 255, 0.18);
border-radius: 28px;
padding: 22px;
background:
linear-gradient(180deg, rgba(0, 231, 255, 0.07), rgba(242, 75, 255, 0.03)),
#07103A;
box-shadow: inset 0 1px 0 rgba(0, 231, 255, 0.12), 0 24px 54px rgba(0,0,0,0.26);
}
.hero-card h2 {
font-size: clamp(1.6rem, 3vw, 2.35rem);
line-height: 1;
letter-spacing: -0.05em;
}
.hero-card p {
margin-top: 12px;
color: var(--text-dim);
}
.screenshot-showcase {
position: relative;
overflow: hidden;
margin-top: 18px;
border: 1px solid rgba(255,255,255,0.11);
border-radius: 32px;
padding: clamp(20px, 3vw, 32px);
background:
radial-gradient(circle at 20% 10%, rgba(0, 231, 255, 0.18), transparent 32%),
linear-gradient(140deg, rgba(6, 14, 52, 0.94), rgba(2, 5, 17, 0.98));
box-shadow: 0 32px 80px rgba(0,0,0,0.34);
}
.screenshot-showcase::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
background-size: 48px 48px;
opacity: 0.22;
}
.screenshot-showcase > * {
position: relative;
z-index: 1;
}
.showcase-copy {
max-width: 760px;
margin-bottom: 18px;
}
.showcase-copy h2 {
font-size: clamp(1.9rem, 3.4vw, 3rem);
line-height: 1;
letter-spacing: -0.055em;
}
.showcase-copy p {
margin-top: 10px;
color: var(--text-dim);
}
.screenshot-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr 0.8fr;
gap: 14px;
}
.screenshot-card {
position: relative;
overflow: hidden;
min-height: 220px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 24px;
background: rgba(255,255,255,0.045);
box-shadow: 0 22px 54px rgba(0,0,0,0.28);
}
.screenshot-card.wide {
grid-row: span 2;
min-height: 456px;
}
.screenshot-card img {
display: block;
width: 100%;
height: 100%;
min-height: inherit;
object-fit: contain;
background: #030720;
transition: transform 0.35s ease, filter 0.35s ease;
}
.screenshot-card:hover img {
transform: scale(1.04);
filter: saturate(1.08) contrast(1.04);
}
.screenshot-card figcaption {
position: absolute;
left: 14px;
right: 14px;
bottom: 14px;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 18px;
padding: 12px 14px;
background: rgba(1, 3, 12, 0.8);
backdrop-filter: blur(12px);
}
.screenshot-card strong {
display: block;
color: #fff;
font-size: 0.95rem;
font-weight: 900;
}
.screenshot-card span {
display: block;
margin-top: 3px;
color: var(--text-dim);
font-size: 0.82rem;
font-weight: 700;
}
.content-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-top: 24px;
}
.terms-index {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-top: 24px;
border: 1px solid var(--border);
border-radius: 24px;
padding: 20px;
background: rgba(255,255,255,0.035);
}
.terms-index a {
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 10px 12px;
color: var(--text-dim);
background: rgba(255,255,255,0.025);
text-decoration: none;
font-size: 0.82rem;
font-weight: 800;
}
/* Same split as the nav: hover tints, only keyboard focus draws the white ring. */
.terms-index a:hover {
border-color: var(--primary-border);
color: #fff;
background: var(--primary-soft);
}
.terms-index a:focus-visible {
border-color: var(--primary-border);
color: #fff;
background: var(--primary-soft);
outline: 2px solid #fff;
outline-offset: 2px;
}
.content-grid.legal-document {
grid-template-columns: 1fr;
}
.legal-document .content-card {
scroll-margin-top: 20px;
padding: clamp(22px, 4vw, 34px);
}
.legal-document .content-card h2 {
margin-bottom: 14px;
font-size: clamp(1.18rem, 2.5vw, 1.45rem);
}
.legal-document .content-card p + p,
.legal-document .content-card p + ul,
.legal-document .content-card ul + p {
margin-top: 12px;
}
.legal-document .content-card strong {
color: #fff;
}
.content-card,
.notice-card,
.download-card {
border: 1px solid var(--border);
border-radius: 24px;
padding: 22px;
background:
linear-gradient(180deg, rgba(255,255,255,0.064), rgba(255,255,255,0.026));
}
.content-card i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin-bottom: 15px;
border-radius: 14px;
color: #ff858b;
background: rgba(0, 231, 255, 0.14);
}
.content-card h2,
.content-card h3,
.notice-card h2,
.download-card h2 {
margin-bottom: 9px;
font-size: 1.1rem;
line-height: 1.18;
}
.content-card p,
.content-card li,
.notice-card p,
.notice-card li,
.download-card p {
color: var(--text-dim);
font-size: 0.95rem;
}
.content-card ul,
.notice-card ul {
display: grid;
gap: 8px;
margin-top: 10px;
padding-left: 20px;
}
.step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin-bottom: 14px;
border-radius: 50%;
background: var(--gradient);
font-family: 'JetBrains Mono', monospace;
font-weight: 900;
}
.download-card {
border-color: var(--primary-border);
background:
radial-gradient(circle at top left, rgba(0, 231, 255, 0.18), transparent 36%),
rgba(0, 231, 255, 0.045);
}
.download-meta {
display: grid;
gap: 10px;
margin-top: 16px;
}
.download-meta-row {
display: flex;
justify-content: space-between;
gap: 14px;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 12px 14px;
background: rgba(255,255,255,0.045);
color: var(--text-dim);
font-size: 0.9rem;
}
.download-meta-row strong {
color: #fff;
text-align: right;
}
.notice-card {
margin-top: 16px;
border-color: rgba(255, 209, 102, 0.22);
color: var(--warning);
background: rgba(255, 209, 102, 0.06);
}
.notice-card p,
.notice-card li {
color: #ffe4a6;
}
.page-footer {
margin-top: 30px;
color: var(--text-dim);
text-align: center;
font-size: 0.86rem;
}
@media (max-width: 900px) {
.topbar,
.hero,
.content-grid,
.screenshot-grid {
grid-template-columns: 1fr;
display: grid;
}
.screenshot-card.wide {
min-height: 280px;
}
.topbar {
justify-items: start;
}
.nav-pills {
justify-content: flex-start;
}
.terms-index {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.page-shell {
width: min(100% - 24px, 1180px);
padding-top: 20px;
}
.hero,
.content-card,
.notice-card,
.download-card {
border-radius: 22px;
}
.download-meta-row {
flex-direction: column;
gap: 4px;
}
.download-meta-row strong {
text-align: left;
word-break: break-word;
}
.terms-index {
grid-template-columns: 1fr;
padding: 14px;
}
}