/* ==========================================================================
Starby — Production stylesheet
Consolidates: design tokens, cosmic background, shared site chrome,
mascot mark, tiles, landing-page hero + gameplay pillars, and legal-page
container styles. Static, framework-free, mobile-first.
========================================================================== */
/* ==========================================================================
Brand typography — SELF-HOSTED
--------------------------------------------------------------------------
This was an @import from fonts.googleapis.com. It was the site's last
third-party subresource: it sent every visitor's IP to Google on every page
load, cost two extra round-trips before any text could paint, and could not
coexist with a Content-Security-Policy of style-src 'self'; font-src 'self'.
The font files are the exact ones Google was serving (Archivo Black v23,
DM Sans v17), now in /assets/fonts. Archivo Black and DM Sans are both under
the SIL Open Font License, which permits self-hosting.
The per-weight declarations below mirror what Google emitted rather than
collapsing DM Sans into a single variable `font-weight: 400 700` rule. DM
Sans ships as one variable file that all four weights point at, and keeping
the original structure means the browser resolves weights exactly as it did
before this change — no rendering difference to review.
unicode-range is preserved verbatim, so a page with no Latin-Extended
characters still never downloads the latin-ext file.
========================================================================== */
/* Archivo Black 400 — latin-ext */
@font-face {
font-family: 'Archivo Black';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/archivo-black-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo Black 400 — latin */
@font-face {
font-family: 'Archivo Black';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/archivo-black-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans 400 — latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans 400 — latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/dm-sans-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans 500 — latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans 500 — latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/dm-sans-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans 600 — latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans 600 — latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/dm-sans-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans 700 — latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans 700 — latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/dm-sans-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
/* -------- Brand: Starby purple -------- */
--brand-50: #f5f3ff;
--brand-100: #ede9fe;
--brand-200: #ddd6fe;
--brand-300: #c4b5fd;
--brand-400: #a78bfa;
--brand-500: #8b5cf6;
--brand-600: #7c3aed;
--brand-700: #6d28d9;
--brand-800: #5b21b6;
--brand-900: #4c1d95;
/* -------- Cosmic background stack -------- */
--bg-void: #030308;
--bg-0: #080812;
--bg-1: #0a0a16;
--bg-2: #12121e;
/* -------- Text -------- */
--fg-1: #f8fafc;
--fg-2: #e2e8f0;
--fg-3: #94a3b8;
--fg-4: #64748b;
--fg-5: #475569;
/* -------- AA-safe secondary text --------
--fg-4 is deliberately NOT changed: it is used widely for non-text and
decorative purposes, and moving it would shift the whole hierarchy. These
two tokens are scoped to the small secondary text that has to clear WCAG AA
4.5:1, and there are two of them because the two places that text appears
sit on very different backgrounds.
Both values were measured at the glyph body against real painted pixels
(tests/browser/measure-painted-background.mjs), not against a composited
stack of background-color values — the hero sits on a gradient that no
computed-style calculation can see.
--fg-secondary-aa on the footer's near-black (#05050b)
--fg-4 measured 4.27:1 — fails
this value measures 4.86:1 — passes
--fg-secondary-aa-glow on the hero's brand glow, which peaks at #382051
around 600-700px wide
--fg-4 measured 2.96:1 — fails badly
this value measures 5.03:1 — passes
The glow value is necessarily brighter. Nothing dimmer clears 4.5:1 over a
background that light, and the strapline is real content, not decoration.
It still reads as secondary: primary copy is --fg-1/--fg-2, which are far
brighter again. */
--fg-secondary-aa: #6e7d94;
--fg-secondary-aa-glow: #8c9cb2;
/* -------- Borders / strokes -------- */
--stroke-1: rgba(139, 92, 246, 0.18);
--stroke-2: rgba(139, 92, 246, 0.32);
/* -------- Accents -------- */
--accent-coin: #f59e0b;
--accent-promo: #22c55e;
--accent-danger: #ef4444;
/* -------- Type families -------- */
--font-display: 'Archivo Black', -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* -------- Radii -------- */
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-full: 9999px;
/* -------- Motion -------- */
--ease-soft: cubic-bezier(0.45, 0.05, 0.55, 0.95);
--ease-pop: cubic-bezier(0.19, 1.00, 0.22, 1.00);
--dur-fast: 180ms;
--dur-med: 320ms;
/* -------- Shadow primitives -------- */
--shadow-card:
0 6px 20px rgba(0, 0, 0, 0.40),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
/* ==========================================================================
Reset + base
========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Horizontal overflow safety net (site-wide) — prevents mobile Safari
sideways drag from any absolutely-positioned decorative element that
may push past the viewport edge. Vertical scroll is preserved. */
html, body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
body {
position: relative;
overscroll-behavior-x: none;
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
section { scroll-margin-top: 88px; }
body {
font-family: var(--font-body);
color: var(--fg-2);
background: var(--bg-0);
background-image: radial-gradient(ellipse 100% 70% at 50% 0%, rgba(139, 92, 246, 0.15) 0%, transparent 50%);
min-height: 100vh;
overflow-x: hidden;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 3px; border-radius: 4px; }
noscript { display: none !important; }
/* ==========================================================================
Cosmic page background (landing only)
========================================================================== */
.cosmos {
position: fixed; inset: 0;
background: var(--bg-void);
z-index: -1;
overflow: hidden;
pointer-events: none;
}
.cosmos::before {
content: '';
position: absolute;
top: -10%; left: 50%;
width: 1400px; height: 1000px;
transform: translateX(-50%);
background: radial-gradient(closest-side, rgba(139, 92, 246, 0.32) 0%, rgba(139, 92, 246, 0.10) 38%, transparent 72%);
filter: blur(20px);
}
.cosmos::after {
content: '';
position: absolute;
bottom: 12%; right: -8%;
width: 700px; height: 700px;
background: radial-gradient(closest-side, rgba(236, 72, 153, 0.10) 0%, transparent 70%);
filter: blur(40px);
}
.stars {
position: absolute; inset: 0;
background-image:
radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.7), transparent 60%),
radial-gradient(1px 1px at 78% 22%, rgba(255,255,255,0.55), transparent 60%),
radial-gradient(1px 1px at 23% 64%, rgba(196,181,253,0.55), transparent 60%),
radial-gradient(1.5px 1.5px at 88% 68%, rgba(255,255,255,0.8), transparent 60%),
radial-gradient(1px 1px at 47% 8%, rgba(255,255,255,0.4), transparent 60%),
radial-gradient(1px 1px at 6% 42%, rgba(255,255,255,0.5), transparent 60%),
radial-gradient(1px 1px at 62% 86%, rgba(255,255,255,0.45), transparent 60%),
radial-gradient(1px 1px at 34% 38%, rgba(167,139,250,0.5), transparent 60%),
radial-gradient(1px 1px at 92% 12%, rgba(255,255,255,0.4), transparent 60%),
radial-gradient(1px 1px at 14% 88%, rgba(255,255,255,0.5), transparent 60%),
radial-gradient(1px 1px at 70% 48%, rgba(255,255,255,0.4), transparent 60%);
opacity: 0.85;
animation: stars-twinkle 8s ease-in-out infinite;
}
@keyframes stars-twinkle {
0%, 100% { opacity: 0.85; }
50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
.stars,
.hero-glow,
.hero-glow::after,
.float-tile,
.glow-mascot .rays,
.glow-mascot .sparkle { animation: none !important; }
.modal-overlay,
.modal-dialog { animation: none !important; }
}
/* ==========================================================================
Layout primitives
========================================================================== */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 880px; margin: 0 auto; padding: 0 24px; }
/* Desktop value bounded to 108px (10% under the previous flat 120px); the
clamp lets it ease down slightly on the tablet/small-desktop band instead
of snapping at one breakpoint. Mobile keeps its own explicit override. */
section { padding: clamp(96px, 8vw, 108px) 0; position: relative; }
@media (max-width: 720px) { section { padding: 80px 0; } }
.eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--brand-400);
padding: 6px 12px;
border: 1px solid var(--stroke-2);
border-radius: var(--radius-full);
background: rgba(139, 92, 246, 0.08);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.section-title {
font-family: var(--font-display);
font-weight: 400;
color: var(--fg-1);
font-size: clamp(32px, 4.6vw, 52px);
letter-spacing: -0.015em;
line-height: 1.06;
text-wrap: balance;
}
.section-body {
color: var(--fg-3);
font-size: 18px;
max-width: 56ch;
text-wrap: pretty;
}
.section-head {
display: flex; flex-direction: column; align-items: flex-start;
gap: 20px; margin-bottom: 64px; /* was 72px — ~11% tighter, desktop only */
}
.section-head.center { align-items: center; text-align: center; }
.section-head.center .section-body { margin: 0 auto; }
/* ==========================================================================
Shared site header (baked into every page)
========================================================================== */
.sb-topbar {
position: sticky; top: 0; z-index: 50;
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
background: linear-gradient(180deg, rgba(6,6,15,0.82) 0%, rgba(6,6,15,0.55) 100%);
border-bottom: 1px solid var(--stroke-1);
}
.sb-topbar-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
display: flex; align-items: center; justify-content: space-between;
height: 64px;
}
.sb-brand {
display: inline-flex; align-items: center; gap: 12px;
text-decoration: none;
}
.sb-brand:hover { text-decoration: none; }
.sb-mark {
width: 30px; height: 30px;
position: relative;
flex: 0 0 auto;
}
.sb-wordmark {
font-family: var(--font-display);
font-size: 22px;
letter-spacing: 0.20em;
text-transform: uppercase;
background: linear-gradient(180deg, #d8b4fe 0%, #a855f7 55%, #7c3aed 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.30));
line-height: 1;
}
.sb-nav {
display: flex; gap: 2px; align-items: center;
}
.sb-nav a {
padding: 8px 14px;
font-size: 14px;
color: var(--fg-3);
font-weight: 500;
border-radius: var(--radius-sm);
transition: color var(--dur-fast) var(--ease-soft),
background var(--dur-fast) var(--ease-soft);
}
.sb-nav a:hover { color: var(--fg-1); background: rgba(139, 92, 246, 0.10); }
.sb-nav a[aria-current="page"] { color: var(--brand-300); }
.sb-nav-cta {
margin-left: 10px;
display: inline-flex; align-items: center; gap: 6px;
height: 38px;
padding: 0 16px;
font-size: 13px; font-weight: 700;
letter-spacing: 0.02em;
color: #fff !important;
background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
border-radius: var(--radius-full);
box-shadow: 0 4px 14px rgba(139, 92, 246, 0.40), inset 0 1px 0 rgba(255,255,255,0.20);
transition: transform var(--dur-fast) var(--ease-pop),
box-shadow var(--dur-fast) var(--ease-soft);
}
.sb-nav-cta:hover {
transform: translateY(-1px);
box-shadow: 0 6px 22px rgba(139, 92, 246, 0.55), inset 0 1px 0 rgba(255,255,255,0.28);
text-decoration: none;
}
.sb-nav-cta svg { width: 14px; height: 14px; }
/* Compact header on narrow screens */
@media (max-width: 768px) {
/* Hide Support and Legal from top nav — both still available in footer */
.sb-nav > a:not(.sb-nav-cta) { display: none; }
.sb-topbar-inner { height: 60px; padding: 0 16px; }
.sb-wordmark { font-size: 19px; letter-spacing: 0.18em; }
.sb-nav-cta { height: 36px; padding: 0 14px; font-size: 12px; margin-left: 0; }
}
@media (max-width: 540px) {
.sb-topbar-inner { height: 56px; padding: 0 14px; }
}
@media (max-width: 380px) {
.sb-wordmark { font-size: 17px; letter-spacing: 0.16em; }
.sb-nav-cta { height: 34px; padding: 0 12px; font-size: 12px; }
}
/* ==========================================================================
Starby mascot — EXACT CSS COPIED FROM Expressions.html (.mood-excited)
Source canvas: 440 x 380 px. We render into a fixed scaling box and use
a CSS variable --sb-scale to size it. At --sb-scale: 0.0682 the mascot
fits a 30px header logo. At 0.14 it fits 60px, at 0.16 it fits ~70px.
All inner rules below are byte-for-byte from the source file, scoped to
the .sb-starby container so they don't collide with anything else.
========================================================================== */
.sb-starby {
--sb-scale: 0.0682; /* default = 30px (440 * 0.0682 ≈ 30) */
width: calc(440px * var(--sb-scale));
height: calc(380px * var(--sb-scale));
position: relative;
display: inline-block;
vertical-align: middle;
overflow: visible;
}
.sb-starby .glowby {
width: 440px;
height: 380px;
position: absolute;
top: 0; left: 0;
transform: scale(var(--sb-scale));
transform-origin: 0 0;
}
/* === BASE rules (verbatim from Expressions.html) === */
.sb-starby .brain {
position: absolute;
left: 20px;
bottom: 0;
width: 390px;
height: 320px;
border-radius: 200px 200px 170px 170px;
background: linear-gradient(145deg, #cfa0fa 0%, #b67df4 25%, #9a57eb 50%, #7f45db 76%, #7540d2 100%);
box-shadow:
0 0 46px rgba(192,132,252,.48),
0 0 90px rgba(124,58,237,.22),
inset 0 -48px 96px rgba(76,29,149,.24),
inset 0 22px 56px rgba(255,255,255,.16);
}
.sb-starby .brain::before {
content: "";
position: absolute;
left: 34px;
top: 64px;
width: 332px;
height: 136px;
border-radius: 50%;
border: 10px solid rgba(216,180,254,.32);
border-bottom: none;
}
.sb-starby .face {
position: absolute;
left: 50%;
bottom: 12px;
transform: translateX(-50%);
width: 286px;
height: 185px;
background: linear-gradient(180deg,#faf9fc 0%,#f0edf4 100%);
border-radius: 143px 143px 126px 126px;
box-shadow: 0 0 28px rgba(255,255,255,.10);
isolation: isolate;
}
.sb-starby .eyes {
position: absolute;
top: 42px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 76px;
}
.sb-starby .eye {
width: 50px;
height: 50px;
position: relative;
border-radius: 50%;
overflow: hidden;
background: radial-gradient(circle at 30% 28%, #7d3aea 0%, #4c1d95 78%);
box-shadow: 0 0 14px rgba(76,29,149,.22);
}
.sb-starby .eye::after {
content: "";
position: absolute;
top: 8px;
right: 8px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
}
.sb-starby .mouth {
position: absolute;
left: 50%;
bottom: 42px;
transform: translateX(-50%);
width: 84px;
height: 42px;
border: 11px solid #4c1d95;
border-top: none;
border-radius: 0 0 48px 48px;
background: transparent;
}
.sb-starby .mouth::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 8px;
width: 0;
height: 0;
opacity: 0;
background: #ec4899;
border-radius: 0 0 18px 18px;
}
.sb-starby .cheek {
position: absolute;
top: 102px;
width: 28px;
height: 14px;
border-radius: 999px;
opacity: 0;
background: radial-gradient(circle, rgba(236,72,153,.28), rgba(236,72,153,0));
}
.sb-starby .cheek-left { left: 58px; }
.sb-starby .cheek-right { right: 58px; }
/* === EXCITED mood overrides (verbatim from Expressions.html .mood-excited) === */
.sb-starby .mood-excited .eyes { top: 38px; gap: 72px; }
.sb-starby .mood-excited .eye { width: 56px; height: 56px; }
.sb-starby .mood-excited .eye::after { width: 18px; height: 18px; }
.sb-starby .mood-excited .mouth {
bottom: 30px; width: 80px; height: 50px;
border: none; background: #4c1d95;
border-radius: 10px 10px 50px 50px;
}
.sb-starby .mood-excited .mouth::after { width: 40px; height: 14px; opacity: 1; }
.sb-starby .mood-excited .cheek { opacity: .62; }
/* ==========================================================================
Number tiles — reused in hero floats and gameplay cards
========================================================================== */
.tile {
--tile-bg-a: #c4b5fd;
--tile-bg-b: #8b5cf6;
--tile-fg: #1e1b4b;
--tile-glow: rgba(139, 92, 246, 0.45);
position: relative;
display: inline-flex; align-items: center; justify-content: center;
aspect-ratio: 1;
border-radius: 12px;
background: linear-gradient(155deg, var(--tile-bg-a) 0%, var(--tile-bg-b) 100%);
color: var(--tile-fg);
font-family: var(--font-display);
font-size: 0.95em;
box-shadow:
0 6px 18px var(--tile-glow),
inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
inset 0 -2px 4px rgba(0, 0, 0, 0.18);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
letter-spacing: -0.01em;
/* Belt-and-braces against any inherited backing layer: no pseudo backings. */
}
.tile::before, .tile::after { content: none !important; }
.tile.t-2 { --tile-bg-a:#f5f3ff; --tile-bg-b:#ddd6fe; --tile-fg:#4c1d95; --tile-glow:rgba(167,139,250,0.30); }
.tile.t-4 { --tile-bg-a:#ede9fe; --tile-bg-b:#c4b5fd; --tile-fg:#4c1d95; --tile-glow:rgba(167,139,250,0.32); }
.tile.t-8 { --tile-bg-a:#ddd6fe; --tile-bg-b:#a78bfa; --tile-fg:#312e81; --tile-glow:rgba(167,139,250,0.40); }
.tile.t-16 { --tile-bg-a:#c4b5fd; --tile-bg-b:#8b5cf6; --tile-fg:#fff; --tile-glow:rgba(139,92,246,0.50); }
.tile.t-32 { --tile-bg-a:#a78bfa; --tile-bg-b:#7c3aed; --tile-fg:#fff; --tile-glow:rgba(124,58,237,0.55); }
.tile.t-64 { --tile-bg-a:#818cf8; --tile-bg-b:#4f46e5; --tile-fg:#fff; --tile-glow:rgba(99,102,241,0.55); }
.tile.t-128 { --tile-bg-a:#f9a8d4; --tile-bg-b:#9d174d; --tile-fg:#fff; --tile-glow:rgba(236,72,153,0.55); }
.tile.t-256 { --tile-bg-a:#86efac; --tile-bg-b:#16a34a; --tile-fg:#052e16; --tile-glow:rgba(34,197,94,0.55); }
.tile.t-512 { --tile-bg-a:#f0abfc; --tile-bg-b:#a21caf; --tile-fg:#fff; --tile-glow:rgba(217,70,239,0.55); }
.tile.t-1024 { --tile-bg-a:#fde68a; --tile-bg-b:#d97706; --tile-fg:#3b1d05; --tile-glow:rgba(245,158,11,0.65); }
.tile.t-2048 {
--tile-bg-a:#ffe047; --tile-bg-b:#d97706; --tile-fg:#3b1d05; --tile-glow:rgba(251,191,36,0.85);
background: linear-gradient(155deg, #ffe047 0%, #d97706 100%);
box-shadow:
0 8px 30px rgba(251, 191, 36, 0.65),
0 0 32px rgba(251, 191, 36, 0.35),
inset 0 1.5px 0 rgba(255, 255, 255, 0.75),
inset 0 -2px 4px rgba(120, 53, 15, 0.60);
}
/* ==========================================================================
HERO (index)
========================================================================== */
.hero { padding: 82px 0 104px; }
.hero-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 72px;
align-items: center;
}
@media (max-width: 940px) {
.hero-grid { grid-template-columns: 1fr; gap: 56px; }
.hero { padding: 56px 0 80px; }
}
/* Mobile-specific spacing: clear sticky header, breathe between pills and phone */
@media (max-width: 768px) {
.hero { padding: 40px 0 72px; }
.hero-grid { gap: 44px; }
}
@media (max-width: 540px) {
.hero { padding: 32px 0 64px; }
.hero-grid { gap: 36px; }
}
.hero-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
margin-bottom: 24px;
}
.hero-eyebrow .pip {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent-promo);
box-shadow: 0 0 8px var(--accent-promo);
}
.hero-title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(44px, 7.5vw, 84px);
line-height: 0.96;
letter-spacing: -0.02em;
color: var(--fg-1);
margin-bottom: 18px;
text-wrap: balance;
}
.hero-title .gradient {
background: linear-gradient(180deg, #ede9fe 0%, #c4b5fd 40%, #a855f7 80%, #7c3aed 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 0 24px rgba(168, 85, 247, 0.35));
}
.hero-sub {
font-family: var(--font-body);
font-size: clamp(20px, 2.2vw, 26px);
color: var(--fg-2);
font-weight: 500;
letter-spacing: -0.005em;
margin-bottom: 22px;
max-width: 36ch;
}
.hero-body {
font-size: 18px;
color: var(--fg-3);
max-width: 56ch;
text-wrap: pretty;
margin-bottom: 34px;
}
.hero-ctas {
display: flex; align-items: center; gap: 14px;
flex-wrap: wrap;
margin-bottom: 20px;
}
/* App Store button — custom, premium */
.btn-app {
display: inline-flex; align-items: center; gap: 12px;
height: 56px;
padding: 0 22px 0 18px;
background: #000;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 14px;
transition: transform var(--dur-fast) var(--ease-pop),
box-shadow var(--dur-med) var(--ease-soft),
border-color var(--dur-fast) var(--ease-soft);
box-shadow:
0 8px 30px rgba(139, 92, 246, 0.18),
0 2px 0 rgba(255, 255, 255, 0.04) inset;
}
.btn-app:hover {
transform: translateY(-2px);
border-color: rgba(168, 85, 247, 0.55);
box-shadow:
0 12px 36px rgba(139, 92, 246, 0.32),
0 0 24px rgba(139, 92, 246, 0.20),
0 2px 0 rgba(255, 255, 255, 0.06) inset;
text-decoration: none;
}
.btn-app .apple { width: 26px; height: 26px; color: #fff; flex: 0 0 auto; }
.btn-app .labels {
display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1;
}
.btn-app .small { font-size: 11px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.78); }
.btn-app .big { font-size: 18px; font-weight: 600; letter-spacing: -0.005em; }
.btn-ghost {
display: inline-flex; align-items: center; gap: 8px;
height: 56px;
padding: 0 22px;
background: rgba(255, 255, 255, 0.04);
color: var(--fg-1);
border: 1px solid var(--stroke-2);
border-radius: 14px;
font-weight: 600;
font-size: 15px;
transition: background var(--dur-fast) var(--ease-soft),
border-color var(--dur-fast) var(--ease-soft),
transform var(--dur-fast) var(--ease-pop);
}
.btn-ghost:hover {
background: rgba(139, 92, 246, 0.10);
border-color: rgba(168, 85, 247, 0.55);
transform: translateY(-2px);
text-decoration: none;
}
.btn-ghost svg { width: 14px; height: 14px; opacity: 0.7; }
.hero-trust {
font-size: 13px;
/* Sits over the hero's brand glow — see --fg-secondary-aa-glow. */
color: var(--fg-secondary-aa-glow);
margin-top: 10px;
max-width: 52ch;
line-height: 1.6;
}
/* The separators are inside the strapline and on the same glow, so they take the
same AA-safe value. Nothing dimmer clears 4.5:1 there — at --fg-5 they
measured 2.45:1. */
.hero-trust .dot { color: var(--fg-secondary-aa-glow); margin: 0 6px; }
/* HERO VISUAL — phone with Starby branding (no fake gameboard) */
.hero-visual {
position: relative;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 940px) { .hero-visual { height: 540px; } }
/* Mobile: clip the 720px hero-glow halo and negatively-positioned floating
tiles that would otherwise push past the viewport edge and cause
horizontal scroll. Desktop preserves the full glow halo for premium feel. */
@media (max-width: 768px) {
.hero-visual {
height: auto;
min-height: 560px;
padding: 32px 0;
overflow: hidden;
}
}
@media (max-width: 540px) { .hero-visual { min-height: 520px; padding: 24px 0; } }
@media (max-width: 380px) { .hero-visual { min-height: 480px; padding: 20px 0; } }
.hero-glow {
position: absolute;
width: 720px; height: 720px;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
background:
radial-gradient(closest-side, rgba(168, 85, 247, 0.55) 0%, rgba(139, 92, 246, 0.20) 40%, transparent 72%);
filter: blur(24px);
pointer-events: none;
animation: glow-pulse 5s var(--ease-soft) infinite;
}
/* Second layer: cooler cyan/blue rim, makes the center feel like a spotlit product shot */
.hero-glow::after {
content: '';
position: absolute;
inset: -8%;
background:
radial-gradient(closest-side, rgba(34, 211, 238, 0.18) 0%, transparent 65%);
filter: blur(32px);
animation: glow-pulse-cyan 7s var(--ease-soft) infinite;
}
@keyframes glow-pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.90; }
50% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
}
@keyframes glow-pulse-cyan {
0%, 100% { transform: scale(0.95); opacity: 0.5; }
50% { transform: scale(1.05); opacity: 0.85; }
}
/* iPhone-style mockup */
.phone {
position: relative;
width: 290px; height: 580px;
border-radius: 44px;
background: linear-gradient(160deg, #1a1a26 0%, #0c0c16 100%);
padding: 9px;
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.55),
0 0 0 1.5px rgba(168, 85, 247, 0.35),
0 0 60px rgba(139, 92, 246, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
z-index: 2;
}
/* Fluid phone for mobile — stays in proportion, doesn't dominate first viewport */
@media (max-width: 768px) {
.phone {
width: min(80vw, 320px);
height: calc(min(80vw, 320px) * 2);
border-radius: 40px;
}
}
@media (max-width: 540px) {
.phone {
width: min(78vw, 300px);
height: calc(min(78vw, 300px) * 2);
}
}
@media (max-width: 380px) {
.phone {
width: min(82vw, 280px);
height: calc(min(82vw, 280px) * 2);
}
}
.phone::before {
content: '';
position: absolute;
top: 16px; left: 50%;
transform: translateX(-50%);
width: 88px; height: 22px;
background: #000;
border-radius: 12px;
z-index: 3;
}
.phone-screen {
position: relative;
width: 100%; height: 100%;
border-radius: 36px;
overflow: hidden;
background:
radial-gradient(ellipse 120% 70% at 50% 0%, rgba(139, 92, 246, 0.32), transparent 60%),
radial-gradient(ellipse 100% 60% at 50% 100%, rgba(124, 58, 237, 0.22), transparent 60%),
#06060f;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 56px 20px 32px;
text-align: center;
}
.phone-stars {
position: absolute; inset: 0;
pointer-events: none;
background-image:
radial-gradient(1px 1px at 20% 20%, rgba(255,255,255,0.6), transparent 60%),
radial-gradient(1px 1px at 70% 30%, rgba(255,255,255,0.4), transparent 60%),
radial-gradient(1px 1px at 40% 60%, rgba(196,181,253,0.5), transparent 60%),
radial-gradient(1px 1px at 85% 75%, rgba(255,255,255,0.4), transparent 60%),
radial-gradient(1px 1px at 15% 85%, rgba(255,255,255,0.3), transparent 60%);
}
.phone-mark {
position: relative;
z-index: 2;
font-family: var(--font-display);
font-size: 32px;
letter-spacing: 0.30em;
text-transform: uppercase;
background: linear-gradient(180deg, #ede9fe 0%, #c4b5fd 40%, #a855f7 80%, #7c3aed 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 0 18px rgba(168, 85, 247, 0.55));
padding-left: 0.30em;
margin-bottom: 6px;
}
.phone-tagline {
position: relative;
z-index: 2;
font-size: 11px;
letter-spacing: 0.32em;
color: var(--brand-300);
text-transform: uppercase;
font-weight: 700;
margin-bottom: 34px;
text-shadow: 0 0 12px rgba(168, 85, 247, 0.40);
}
/* Merge ladder on phone — visual only, no game state */
.phone-ladder {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 24px;
}
.phone-ladder .tile { width: 30px; height: 30px; font-size: 11px; border-radius: 8px; }
.phone-ladder .tile.big { width: 38px; height: 38px; font-size: 12px; }
.phone-ladder .arrow {
color: var(--brand-300);
opacity: 0.6;
width: 12px; height: 12px;
flex: 0 0 auto;
}
/* Starby mascot as the emotional focal point inside the phone screen.
Sized via --sb-scale so the existing scoped mascot CSS does the heavy lifting. */
.phone-mascot {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
/* Pulled up to sit higher in the phone, with extra breathing room below */
margin: -4px 0 14px;
}
.phone-mascot-fig {
--sb-scale: 0.38; /* ~144px tall mascot — focal point, ~12% larger than before */
/* Soft purple halo to anchor the mascot visually */
filter: drop-shadow(0 10px 32px rgba(139, 92, 246, 0.50));
}
/* Small 2048 tile as a milestone cue, NOT the focal point. Label removed. */
.phone-milestone {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 10px;
}
.phone-milestone > .tile {
width: 48px;
height: 48px;
font-size: 13px;
border-radius: 11px;
}
/* Compact phone variant for mobile */
@media (max-width: 540px) {
.phone-mascot-fig { --sb-scale: 0.34; }
.phone-milestone > .tile { width: 42px; height: 42px; font-size: 12px; }
}
.phone-foot {
margin-top: 28px;
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--fg-4);
font-weight: 700;
}
.phone-foot .accent { color: var(--brand-300); }
/* Floating accent tiles around the phone */
.float-tile {
position: absolute;
z-index: 1;
animation: float-y 4.2s var(--ease-soft) infinite;
}
.float-tile.delay-1 { animation-delay: 0.4s; }
.float-tile.delay-2 { animation-delay: 0.9s; }
.float-tile.delay-3 { animation-delay: 1.3s; }
.float-tile.delay-4 { animation-delay: 0.7s; }
@keyframes float-y {
0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
50% { transform: translateY(-10px) rotate(var(--rot, 0deg)); }
}
.float-tile.f1 { top: 6%; left: 4%; --rot: -8deg; width: 76px; height: 76px; font-size: 22px; }
.float-tile.f2 { top: 24%; right: 0%; --rot: 6deg; width: 62px; height: 62px; font-size: 20px; }
.float-tile.f3 { bottom: 26%; left: -2%; --rot: 4deg; width: 56px; height: 56px; font-size: 18px; }
/* Reinforce in-game 128 tile treatment on the floating instance.
Belt-and-braces against any stale cached CSS. Magenta/pink/purple family. */
.float-tile.f3.t-128 {
--tile-bg-a: #f9a8d4;
--tile-bg-b: #9d174d;
--tile-fg: #fff;
--tile-glow: rgba(236, 72, 153, 0.55);
background: linear-gradient(155deg, #f9a8d4 0%, #9d174d 100%);
color: #fff;
box-shadow:
0 6px 18px rgba(236, 72, 153, 0.55),
inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
inset 0 -2px 4px rgba(0, 0, 0, 0.18);
}
.float-tile.f4 { bottom: 8%; right: 4%; --rot: -5deg; width: 70px; height: 70px; font-size: 16px; }
.float-tile.f5 { top: 50%; left: -4%; --rot: 10deg; width: 48px; height: 48px; font-size: 14px; }
/* Mobile float-tile sizing — 10-20% smaller, repositioned to avoid awkward clipping */
@media (max-width: 768px) {
.float-tile.f1 { width: 64px; height: 64px; font-size: 19px; top: 4%; left: 2%; }
.float-tile.f2 { width: 52px; height: 52px; font-size: 17px; top: 18%; right: -2%; }
.float-tile.f3 { width: 48px; height: 48px; font-size: 15px; bottom: 22%; left: -3%; }
.float-tile.f4 { width: 56px; height: 56px; font-size: 13px; bottom: 10%; right: -2%; }
.float-tile.f5 { width: 40px; height: 40px; font-size: 12px; top: 48%; left: -3%; }
}
@media (max-width: 540px) {
/* Drop the most-prone-to-clipping tiles on the smallest screens for clean look */
.float-tile.f1 { display: none; }
.float-tile.f5 { display: none; }
.float-tile.f2 { width: 48px; height: 48px; font-size: 16px; top: 14%; right: -4%; }
.float-tile.f3 { width: 44px; height: 44px; font-size: 14px; bottom: 24%; left: -4%; }
.float-tile.f4 { width: 52px; height: 52px; font-size: 12px; bottom: 8%; right: -4%; }
}
/* ==========================================================================
GAMEPLAY PILLARS — Drop. Merge. Beyond.
========================================================================== */
.pillars-grid {
display: grid; gap: 28px;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 860px) {
.pillars-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}
.pillar-card {
position: relative;
padding: 28px;
background: linear-gradient(160deg, rgba(20, 15, 35, 0.95) 0%, rgba(10, 8, 20, 0.98) 100%);
border: 1px solid var(--stroke-1);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
transition: transform var(--dur-med) var(--ease-pop),
border-color var(--dur-fast) var(--ease-soft),
box-shadow var(--dur-med) var(--ease-soft);
}
.pillar-card:hover {
transform: translateY(-4px);
border-color: rgba(168, 85, 247, 0.5);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(139, 92, 246, 0.12);
}
.pillar-card::after {
content: '';
position: absolute; inset: -1px;
border-radius: var(--radius-lg);
background: radial-gradient(280px 200px at 20% 0%, rgba(139, 92, 246, 0.10), transparent 70%);
pointer-events: none;
}
.pillar-visual {
height: 140px;
margin-bottom: 24px;
display: flex; align-items: center; justify-content: center;
position: relative;
}
.pillar-label {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--brand-400);
margin-bottom: 8px;
}
.pillar-title {
font-family: var(--font-display);
font-size: 28px;
color: var(--fg-1);
line-height: 1;
margin-bottom: 12px;
font-weight: 400;
}
.pillar-body {
color: var(--fg-3);
font-size: 15px;
line-height: 1.55;
}
/* Drop visual: 3 stacked tiles forming a column */
.drop-stack {
position: relative; width: 68px; height: 140px;
}
.drop-stack .tile { position: absolute; left: 0; right: 0; }
.drop-stack .tile.s1 { top: 4px; width: 44px; height: 44px; left: 12px; opacity: 0.55; font-size: 16px; animation: drop-floater 2.6s ease-in-out infinite; }
.drop-stack .tile.s2 { top: 38px; width: 54px; height: 54px; left: 7px; opacity: 0.95; font-size: 18px; }
.drop-stack .tile.s3 { top: 72px; width: 68px; height: 68px; left: 0; font-size: 20px; }
@keyframes drop-floater {
0%, 100% { transform: translateY(-3px); }
50% { transform: translateY(0); }
}
/* Merge visual: two tiles colliding into one */
.merge-row {
display: flex; align-items: center; gap: 10px;
}
.merge-row .tile { width: 56px; height: 56px; font-size: 19px; }
.merge-row .plus { color: var(--fg-4); font-size: 14px; font-family: var(--font-display); }
.merge-row .arrow { color: var(--brand-400); width: 16px; }
/* Glow visual: glowing 2048 tile with rotating rays */
.glow-tile {
position: relative;
}
.glow-tile .tile {
position: relative; z-index: 2;
width: 80px; height: 80px; font-size: 22px;
}
.glow-tile .rays {
position: absolute; inset: -24px;
background: conic-gradient(from 0deg,
transparent 0deg, rgba(251, 191, 36, 0.45) 30deg, transparent 60deg,
transparent 120deg, rgba(251, 191, 36, 0.30) 150deg, transparent 180deg,
transparent 240deg, rgba(251, 191, 36, 0.40) 270deg, transparent 300deg);
-webkit-mask: radial-gradient(closest-side, transparent 30%, #000 32%, transparent 90%);
mask: radial-gradient(closest-side, transparent 30%, #000 32%, transparent 90%);
animation: spin-slow 14s linear infinite;
z-index: 1;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
/* ==========================================================================
Site footer (baked into every page)
========================================================================== */
.sb-footer {
border-top: 1px solid var(--stroke-1);
background: rgba(0, 0, 0, 0.40);
padding: 48px 0 28px; /* top was 56px — ~14% tighter */
margin-top: 70px; /* was 80px — ~12.5% tighter */
font-family: var(--font-body);
color: var(--fg-3);
}
.sb-footer-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.sb-footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
gap: 40px;
}
@media (max-width: 860px) { .sb-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 540px) { .sb-footer-grid { grid-template-columns: 1fr; gap: 28px; } }
.sb-foot-wordmark {
font-family: var(--font-display);
font-size: 22px;
letter-spacing: 0.20em;
text-transform: uppercase;
background: linear-gradient(180deg, #c4b5fd 0%, #a855f7 60%, #7c3aed 100%);
-webkit-background-clip: text; background-clip: text; color: transparent;
margin-bottom: 14px;
line-height: 1;
}
.sb-foot-brand p {
/* --fg-4 measured 4.27:1 on the footer's near-black — see --fg-secondary-aa. */
color: var(--fg-secondary-aa);
font-size: 14px;
max-width: 38ch;
line-height: 1.6;
}
/* h2 on every page except legal.html, which uses h3 here to avoid duplicating
its own main-content Support
— see the comment in legal.html. */
.sb-foot-col h2,
.sb-foot-col h3 {
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--fg-3);
font-weight: 700;
margin: 0 0 14px;
}
.sb-foot-col a {
display: block;
color: var(--fg-3);
font-size: 14px;
padding: 4px 0;
transition: color var(--dur-fast) var(--ease-soft);
}
.sb-foot-col a:hover { color: var(--brand-300); }
.sb-foot-bottom {
margin-top: 32px; padding-top: 20px;
border-top: 1px solid var(--stroke-1);
/* --fg-4 measured 4.27:1 on the footer's near-black — see --fg-secondary-aa. */
color: var(--fg-secondary-aa); font-size: 13px;
}
.sb-foot-bottom p { line-height: 1.7; margin: 0; }
.sb-foot-compliance {
margin-top: 16px;
/* fg-5 on the footer's near-black background measured ~2.7:1 — fails WCAG
AA for text this size. fg-3 clears 4.5:1 with room to spare while still
reading as quieter than the section body copy (18px) around it. */
color: var(--fg-3);
font-size: 13px; /* was 11.5px — +1.5px */
line-height: 1.6;
max-width: 72ch; /* was 92ch — shorter line length on wide viewports */
}
/* ==========================================================================
LEGAL pages — .container card and inner typography
Preserves the existing visual language of the legal pages.
========================================================================== */
body.sb-legal {
padding: 0;
}
body.sb-legal .container {
max-width: 800px;
margin: 40px auto 0;
background: linear-gradient(160deg, rgba(20, 15, 35, 0.95) 0%, rgba(10, 8, 20, 0.98) 100%);
padding: 40px;
border-radius: var(--radius-lg);
border: 1px solid rgba(139, 92, 246, 0.20);
box-shadow: 0 0 60px rgba(139, 92, 246, 0.10), 0 20px 40px rgba(0, 0, 0, 0.4);
}
body.sb-legal .container h1 {
font-family: var(--font-display);
color: #fff;
margin-bottom: 10px;
font-size: 1.8rem;
text-align: center;
line-height: 1.2;
font-weight: 400;
}
body.sb-legal .container .subtitle {
color: var(--fg-4);
margin-bottom: 30px;
font-size: 0.95rem;
text-align: center;
}
body.sb-legal .container .last-updated {
color: var(--fg-3); /* was fg-4 — modest contrast lift, same reasoning as .sb-foot-compliance */
margin-bottom: 30px;
font-size: 0.9375rem; /* was 0.85rem (13.6px) -> 15px, +1.4px */
text-align: center;
}
/* Smallest meaningful disclosure text inside legal-page bodies (statutory
timeframes, verification notes) — was inline `style="font-size:0.85rem;
color:#64748b"` repeated three times in support.html. Same size/contrast
correction as .last-updated, as a reusable class instead of inline styles. */
body.sb-legal .container .fine-print {
font-size: 0.9375rem;
color: var(--fg-3);
line-height: 1.6;
max-width: 68ch;
}
body.sb-legal .container h2 {
color: #a855f7;
margin-top: 35px;
margin-bottom: 15px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(139, 92, 246, 0.30);
font-size: 1.2rem;
font-weight: 600;
font-family: var(--font-body);
}
body.sb-legal .container h3 {
color: var(--brand-300);
margin-top: 20px;
margin-bottom: 10px;
font-size: 1rem;
font-weight: 600;
font-family: var(--font-body);
}
body.sb-legal .container p {
margin-bottom: 15px;
color: var(--fg-3);
line-height: 1.7;
}
body.sb-legal .container ul,
body.sb-legal .container ol {
margin-bottom: 15px;
padding-left: 25px;
color: var(--fg-3);
line-height: 1.7;
}
body.sb-legal .container li { margin-bottom: 8px; }
body.sb-legal .container a {
color: #a855f7;
text-decoration: none;
}
body.sb-legal .container a:hover { text-decoration: underline; }
body.sb-legal .container strong { color: var(--fg-2); }
body.sb-legal .container .contact-box {
background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(168, 85, 247, 0.10) 100%);
border: 1px solid rgba(139, 92, 246, 0.30);
padding: 25px;
margin: 25px 0;
border-radius: var(--radius-md);
text-align: center;
}
body.sb-legal .container .contact-box p { margin-bottom: 10px; }
body.sb-legal .container .contact-email {
font-size: 1.2rem;
font-weight: 600;
color: #a855f7;
}
body.sb-legal .container .faq-item {
background: rgba(139, 92, 246, 0.05);
border: 1px solid rgba(139, 92, 246, 0.10);
border-radius: 12px;
padding: 20px;
margin-bottom: 15px;
}
body.sb-legal .container .faq-item h3 { margin-top: 0; color: var(--fg-2); }
body.sb-legal .container .faq-item p { margin-bottom: 0; }
body.sb-legal .container .tip-box {
background: rgba(34, 197, 94, 0.10);
border-left: 3px solid #22c55e;
padding: 15px 20px;
margin: 20px 0;
border-radius: 0 12px 12px 0;
}
body.sb-legal .container .tip-box p { color: #86efac; margin-bottom: 0; }
body.sb-legal .container .warning-box {
background: rgba(251, 191, 36, 0.10);
border-left: 3px solid #fbbf24;
padding: 15px 20px;
margin: 20px 0;
border-radius: 0 12px 12px 0;
}
body.sb-legal .container .warning-box p { color: #fcd34d; margin-bottom: 0; }
body.sb-legal .container .highlight-box {
background: rgba(139, 92, 246, 0.10);
border-left: 3px solid #8b5cf6;
padding: 15px 20px;
margin: 20px 0;
border-radius: 0 12px 12px 0;
}
body.sb-legal .container .highlight-box p { margin-bottom: 0; }
body.sb-legal .container .info-box {
background: rgba(139, 92, 246, 0.10);
border: 1px solid rgba(139, 92, 246, 0.20);
border-radius: 12px;
padding: 20px;
margin: 20px 0;
}
body.sb-legal .container .info-box p { margin-bottom: 8px; }
body.sb-legal .container .info-box p:last-child { margin-bottom: 0; }
body.sb-legal .container table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 0.9rem;
}
body.sb-legal .container th,
body.sb-legal .container td {
border: 1px solid rgba(139, 92, 246, 0.20);
padding: 12px;
text-align: left;
vertical-align: top;
}
body.sb-legal .container th {
background: rgba(139, 92, 246, 0.15);
color: var(--brand-300);
font-weight: 600;
}
body.sb-legal .container td { color: var(--fg-3); }
/* Mobile tweaks for legal pages */
@media (max-width: 600px) {
body.sb-legal .container {
padding: 24px 20px;
margin: 24px 16px 0;
}
body.sb-legal .container h1 { font-size: 1.5rem; }
body.sb-legal .container h2 { font-size: 1.1rem; }
body.sb-legal .container th,
body.sb-legal .container td { padding: 10px; font-size: 0.85rem; }
}
/* Legal hub list (legal.html) */
.legal-hub-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin: 24px 0;
}
@media (max-width: 540px) { .legal-hub-grid { grid-template-columns: 1fr; } }
.legal-hub-card {
display: block;
padding: 20px 22px;
background: rgba(139, 92, 246, 0.05);
border: 1px solid rgba(139, 92, 246, 0.18);
border-radius: 14px;
transition: border-color var(--dur-fast) var(--ease-soft),
background var(--dur-fast) var(--ease-soft),
transform var(--dur-fast) var(--ease-pop);
}
.legal-hub-card:hover {
border-color: rgba(168, 85, 247, 0.55);
background: rgba(139, 92, 246, 0.10);
transform: translateY(-2px);
text-decoration: none !important;
}
.legal-hub-card .t {
display: block;
font-family: var(--font-body);
font-size: 15px;
font-weight: 700;
color: var(--fg-1);
margin-bottom: 4px;
letter-spacing: 0.01em;
}
.legal-hub-card .d {
font-size: 13px;
color: var(--fg-3);
line-height: 1.5;
}
/* ==========================================================================
v2: Gameplay-proof pills (below hero CTAs)
========================================================================== */
.proof-strip {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 24px;
max-width: 580px;
}
.proof-pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px;
border-radius: var(--radius-full);
background: rgba(139, 92, 246, 0.08);
border: 1px solid var(--stroke-2);
font-size: 13px;
font-weight: 600;
color: var(--fg-2);
letter-spacing: 0.005em;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 0 14px rgba(139, 92, 246, 0.10), inset 0 1px 0 rgba(255,255,255,0.04);
transition: border-color var(--dur-fast) var(--ease-soft),
background var(--dur-fast) var(--ease-soft);
}
.proof-pill:hover {
border-color: rgba(168, 85, 247, 0.55);
background: rgba(139, 92, 246, 0.14);
}
.proof-pill .dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--brand-400);
box-shadow: 0 0 6px var(--brand-400);
flex: 0 0 auto;
}
/* Official store artwork is unmodified; interaction lives on this wrapper. */
.hero-stores {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.store-badge-link {
display: inline-flex;
align-items: center;
min-height: 48px;
padding: 3px;
border: 1px solid transparent;
border-radius: 11px;
transition: transform var(--dur-fast) var(--ease-pop),
border-color var(--dur-fast) var(--ease-soft),
box-shadow var(--dur-fast) var(--ease-soft);
}
.store-badge-link:hover {
transform: translateY(-2px);
border-color: rgba(196, 181, 253, .34);
box-shadow: 0 10px 26px rgba(124, 58, 237, .24);
text-decoration: none;
}
.store-badge-link:focus-visible {
outline-offset: 2px;
}
.store-badge {
display: block;
width: auto;
height: 52px;
max-width: none;
}
@media (max-width: 540px) {
.hero-stores { gap: 8px; }
.store-badge { height: clamp(42px, 12vw, 48px); }
}
/* ==========================================================================
Android coming-soon dialog
========================================================================== */
.modal-overlay {
position: fixed; inset: 0; z-index: 100;
display: flex; align-items: center; justify-content: center;
padding: 24px;
background: rgba(3, 3, 8, 0.72);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
animation: sb-fade-in var(--dur-med) var(--ease-soft);
}
.modal-overlay[hidden] { display: none; }
.modal-dialog {
position: relative;
width: 100%; max-width: 440px;
max-height: calc(100vh - 48px);
overflow-y: auto;
background: linear-gradient(160deg, rgba(20, 15, 35, 0.98) 0%, rgba(10, 8, 20, 0.99) 100%);
border: 1px solid var(--stroke-2);
border-radius: var(--radius-lg);
box-shadow: 0 0 60px rgba(139, 92, 246, 0.14), 0 20px 50px rgba(0, 0, 0, 0.5);
padding: 32px;
animation: sb-pop-in var(--dur-med) var(--ease-pop);
}
.modal-dialog:focus { outline: none; } /* focus is visibly on the close button / link inside, not the panel */
.modal-close {
position: absolute; top: 12px; right: 12px;
width: 44px; height: 44px; /* >=44px accessible tap target */
display: flex; align-items: center; justify-content: center;
border-radius: var(--radius-full);
color: var(--fg-3);
transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.modal-close:hover { background: rgba(139, 92, 246, 0.14); color: var(--fg-1); }
.modal-close svg { width: 18px; height: 18px; }
@media (max-width: 540px) {
.modal-dialog { padding: 28px 20px; max-height: calc(100vh - 32px); }
.modal-overlay { padding: 16px; }
}
.modal-eyebrow { margin-bottom: 18px; }
#androidSoonTitle {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(24px, 4vw, 30px);
color: var(--fg-1);
margin-bottom: 6px;
}
.modal-sub {
font-weight: 600;
color: var(--brand-300);
margin-bottom: 16px;
font-size: 15px;
}
.modal-dialog p:not(.modal-sub) {
color: var(--fg-3);
font-size: 15px;
line-height: 1.6;
margin-bottom: 14px;
}
.modal-store-link { margin-top: 8px; height: 48px; padding: 0 20px; }
@keyframes sb-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sb-pop-in {
from { opacity: 0; transform: translateY(12px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Scroll lock while the dialog is open. body's own padding-right is set
inline by JS (measured against the actual scrollbar width) so content
never jumps sideways when the scrollbar disappears. */
body.modal-open { overflow: hidden; }
/* ==========================================================================
v2: Pillar cards — premium SVG visual cues
========================================================================== */
.pillar-glyph {
position: relative;
width: 64px; height: 64px;
margin-bottom: 18px;
display: flex; align-items: center; justify-content: center;
}
.pillar-glyph svg { width: 100%; height: 100%; display: block; }
.pillar-glyph::before {
content: '';
position: absolute;
inset: -20%;
background: radial-gradient(closest-side, rgba(168, 85, 247, 0.25) 0%, transparent 70%);
filter: blur(8px);
z-index: -1;
}
/* ==========================================================================
Beyond pillar visual — dominant golden 2048 tile + the official
excited Starby (the .sb-starby DOM block) peeking from beside the tile.
========================================================================== */
.glow-composition {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
min-height: 140px;
}
.glow-composition .glow-burst {
position: absolute;
inset: 0;
background:
radial-gradient(closest-side at 40% 50%, rgba(251, 191, 36, 0.32) 0%, transparent 65%),
radial-gradient(closest-side at 65% 55%, rgba(168, 85, 247, 0.28) 0%, transparent 70%);
filter: blur(8px);
z-index: 0;
pointer-events: none;
}
.glow-composition .tile {
position: relative;
z-index: 2;
width: 96px;
height: 96px;
font-size: 26px;
}
.glow-composition .sb-starby {
position: absolute;
z-index: 3;
right: 24%;
bottom: 8%;
--sb-scale: 0.155; /* 440 * 0.155 ≈ 68px wide */
filter: drop-shadow(0 4px 14px rgba(124, 58, 237, 0.55));
}
.glow-composition .sparkle {
position: absolute;
color: #fcd34d;
text-shadow: 0 0 12px rgba(251, 191, 36, 0.85);
animation: sparkle-pulse 2.4s ease-in-out infinite;
z-index: 4;
font-weight: 700;
pointer-events: none;
}
.glow-composition .sparkle.s1 { top: 8%; left: 16%; font-size: 14px; }
.glow-composition .sparkle.s2 { top: 14%; right: 12%; font-size: 11px; animation-delay: 0.7s; }
.glow-composition .sparkle.s3 { bottom: 14%; left: 22%; font-size: 12px; animation-delay: 1.3s; }
@keyframes sparkle-pulse {
0%, 100% { opacity: 0.55; transform: scale(0.9); }
50% { opacity: 1; transform: scale(1.1); }
}
@media (max-width: 540px) {
.glow-composition .tile { width: 84px; height: 84px; font-size: 22px; }
.glow-composition .sb-starby { --sb-scale: 0.125; right: 20%; bottom: 6%; }
}
/* ==========================================================================
Hero asteroid belt — premium dark sci-fi background decoration.
4 asteroids: 1 main (right edge, large, behind phone area), 1 secondary
(upper-right, lower contrast), 2 tiny specks (outer corners only).
All position:absolute, never affect flow. Behind all hero content.
========================================================================== */
.hero { position: relative; overflow: hidden; }
.hero .wrap { position: relative; z-index: 2; }
.hero-belt {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.hero-asteroid {
position: absolute;
background-image: url("../images/starby-asteroid.webp");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
pointer-events: none;
/* Premium dark indigo / violet rock material:
base saturate + contrast adjustment; purple rim shadow + faint cyan edge */
filter:
saturate(1.05)
contrast(1.08)
brightness(0.85)
drop-shadow(0 0 14px rgba(139, 92, 246, 0.28))
drop-shadow(0 0 2px rgba(103, 232, 249, 0.18));
}
/* Main asteroid — large, partially offscreen right edge, behind phone area.
Premium dark anchor for the asteroid-belt feel. */
.hero-asteroid--main {
width: clamp(220px, 22vw, 320px);
height: clamp(220px, 22vw, 320px);
top: clamp(120px, 16vw, 200px);
right: clamp(-140px, -8vw, -90px);
opacity: 0.46;
transform: rotate(-14deg);
}
/* Upper subtle asteroid — sits around/behind the phone column.
Pushed further toward right edge and dimmed so it never competes
with the phone mockup or drifts into hero-copy text territory. */
.hero-asteroid--upper {
width: clamp(56px, 6vw, 92px);
height: clamp(56px, 6vw, 92px);
top: clamp(28px, 5vw, 64px);
right: clamp(8%, 10vw, 14%);
opacity: 0.18;
transform: rotate(34deg);
filter:
saturate(0.92)
contrast(0.98)
brightness(0.72)
drop-shadow(0 0 8px rgba(139, 92, 246, 0.14));
}
/* Tiny distant specks — outer edges only, very subtle */
.hero-asteroid--speck {
width: clamp(24px, 2.6vw, 42px);
height: clamp(24px, 2.6vw, 42px);
opacity: 0.18;
filter:
saturate(0.9)
contrast(0.95)
brightness(0.7);
}
/* Lower-left distant speck — far outer left edge, well below hero copy */
.hero-asteroid--speck-left {
bottom: clamp(40px, 6vw, 80px);
left: clamp(-6px, 1vw, 16px);
transform: rotate(18deg);
}
/* Far lower-right speck — pushed to the corner so it never sits under
the CTA buttons or hero-copy column */
.hero-asteroid--speck-bottom {
bottom: clamp(8px, 2vw, 32px);
right: clamp(3%, 4vw, 7%);
transform: rotate(-26deg);
opacity: 0.14;
}
/* Mobile: keep main asteroid as deliberate edge cue, drop secondary specks
so the small viewport stays clean and premium. Nothing overlaps phone,
header, or buttons. */
@media (max-width: 760px) {
.hero-asteroid--main {
width: clamp(160px, 38vw, 220px);
height: clamp(160px, 38vw, 220px);
top: auto;
bottom: -10%;
right: -22%;
opacity: 0.32;
}
.hero-asteroid--upper { display: none; }
.hero-asteroid--speck-left { display: none; }
.hero-asteroid--speck-bottom { display: none; }
}
/* ===== FAQ ===== */
#faq {
padding-top: 0;
}
#faq .wrap-narrow { max-width: 760px; }
#faq .faq-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 36px;
}
#faq .faq-item {
border: 1px solid rgba(168, 85, 247, 0.18);
border-radius: 18px;
padding: 4px 22px;
background: rgba(255, 255, 255, 0.045);
transition: border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}
#faq .faq-item:hover { border-color: rgba(168, 85, 247, 0.35); }
#faq .faq-item[open] {
border-color: var(--brand-400);
background: rgba(168, 85, 247, 0.07);
}
#faq .faq-item summary {
cursor: pointer;
list-style: none;
padding: 18px 0;
font-family: var(--font-display);
font-size: 1rem;
font-weight: 700;
color: var(--fg-1);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
#faq .faq-item summary::-webkit-details-marker { display: none; }
#faq .faq-item summary::marker { content: ""; }
#faq .faq-item summary::after {
content: "+";
flex-shrink: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: var(--brand-300);
font-size: 1.5rem;
font-weight: 400;
line-height: 1;
transition: color var(--dur-fast) var(--ease-soft);
}
#faq .faq-item[open] summary::after { content: "\2212"; }
#faq .faq-item p {
margin: 0 0 18px;
color: var(--fg-2);
font-family: var(--font-body);
font-size: 0.95rem;
line-height: 1.65;
}
/* ==========================================================================
In-app browser mode
--------------------------------------------------------------------------
The native app appends ?inApp=1 (or ?app=1) when it opens a legal/support
page inside its in-app browser; /assets/js/inapp.js sets .in-app-browser on
. Hiding the public topbar stops the app's own chrome being
duplicated. Moved here from a repeated inline