/* ╔══════════════════════════════════════════════════════════════
║ moviemates.social — marketing site
║ Brand: #17B8C2 cyan + #00C896 green on a #0C0E12 dark base
║ Type: Outfit (display) + Inter (body) + JetBrains Mono (mono)
╚══════════════════════════════════════════════════════════════ */
:root {
/* Brand palette — pulled from the live app's design tokens */
--brand-cyan: #17B8C2;
--brand-green: #00C896;
--brand-warm: #FFAA00;
--brand-warn: #FF7043;
--brand-purple: #7E57C2;
/* Surface ladder (dark mode by default — matches the app's Midnight skin) */
--bg: #0C0E12;
--bg-elevated: #131720;
--bg-card: #181D27;
--bg-card-2: #1F2530;
--border: rgba(255, 255, 255, 0.08);
--border-strong: rgba(255, 255, 255, 0.16);
/* Ink */
--ink: #F2F4F8;
--ink-mid: #B4BAC4;
--ink-soft: #7A828F;
/* Motion */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
/* Spacing scale (4px base) */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 24px;
--sp-6: 32px;
--sp-7: 48px;
--sp-8: 64px;
--sp-9: 96px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: 'Inter', system-ui, -apple-system, sans-serif;
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--sp-5);
}
/* Reveal-on-scroll baseline (JS toggles .is-revealed) */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.is-revealed { opacity: 1; transform: translateY(0); }
/* ╔══════════════════════════════════════════════════════════════
║ BRAND MARK + WORDMARK (shared)
╚══════════════════════════════════════════════════════════════ */
.brand-wordmark {
font-family: 'Outfit', sans-serif;
font-weight: 900;
font-size: 20px;
letter-spacing: -0.01em;
/* Wordmark is a 2-tone domain-style lockup: `moviemates` + `.social`.
The website rebranded from "moviemates.social" (title-case product
name) to `moviemates.social` (the domain itself as the brand mark,
bsky.social / x.com pattern). `wm-light` carries the lowercase
"moviemates" lead in ink colour; `wm-accent-2` carries the green
".social" suffix. The lockup reads as one continuous string — no
gap between the two spans — so the brand reads exactly like the
URL users type to reach the site. `wm-accent` (the old cyan
middle-word colour) is kept in the CSS so any historical mentions
in copy can still use it, but the canonical wordmark no longer
consumes it. */
}
.wm-light { color: var(--ink); }
.wm-accent { color: var(--brand-cyan); }
.wm-accent-2 {
color: var(--brand-green);
}
/* ╔══════════════════════════════════════════════════════════════
║ NAV — glassmorphic, sticky
╚══════════════════════════════════════════════════════════════ */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px max(20px, 4vw);
background: rgba(12, 14, 18, 0.6);
backdrop-filter: saturate(150%) blur(16px);
-webkit-backdrop-filter: saturate(150%) blur(16px);
border-bottom: 1px solid var(--border);
transition: background .3s var(--ease-out), border-color .3s var(--ease-out);
}
.nav.is-scrolled {
background: rgba(12, 14, 18, 0.92);
}
.nav-brand {
display: flex;
align-items: center;
gap: 10px;
transition: transform .15s var(--ease-out);
}
.nav-brand:hover { transform: translateY(-1px); }
.brand-mark svg { display: block; }
.nav-links {
display: flex;
gap: 28px;
margin-left: auto;
margin-right: 24px;
}
.nav-links a {
color: var(--ink-mid);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.02em;
transition: color .15s var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-cta {
background: var(--brand-cyan);
color: #001416;
padding: 9px 16px;
border-radius: 999px;
font-weight: 700;
font-size: 13.5px;
letter-spacing: 0.01em;
transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out);
box-shadow: 0 0 0 0 rgba(23, 184, 194, 0.0);
}
.nav-cta:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(23, 184, 194, 0.35);
}
.nav-burger {
display: none;
flex-direction: column;
gap: 4px;
background: transparent;
border: 0;
cursor: pointer;
padding: 8px;
}
.nav-burger span {
width: 22px;
height: 2px;
background: var(--ink);
border-radius: 999px;
transition: transform .2s var(--ease-out), opacity .2s var(--ease-out);
}
@media (max-width: 760px) {
.nav-links { display: none; }
.nav-burger { display: flex; }
.nav.is-menu-open + .nav-mobile { display: flex; }
}
/* ╔══════════════════════════════════════════════════════════════
║ HERO
╚══════════════════════════════════════════════════════════════ */
.hero {
position: relative;
padding-top: 140px;
padding-bottom: 80px;
overflow: hidden;
min-height: 100vh;
display: flex;
align-items: center;
}
.hero-bg {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.hero-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.55;
animation: hero-orb-float 18s ease-in-out infinite;
}
.hero-orb-1 {
width: 540px; height: 540px;
background: radial-gradient(circle, var(--brand-cyan) 0%, transparent 70%);
top: -120px; left: -120px;
}
.hero-orb-2 {
width: 460px; height: 460px;
background: radial-gradient(circle, var(--brand-green) 0%, transparent 70%);
bottom: -100px; right: -80px;
animation-delay: -6s;
}
.hero-orb-3 {
width: 380px; height: 380px;
background: radial-gradient(circle, var(--brand-purple) 0%, transparent 70%);
top: 40%; left: 50%;
transform: translate(-50%, -50%);
opacity: 0.35;
animation-delay: -12s;
}
@keyframes hero-orb-float {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(40px, -30px) scale(1.05); }
}
.hero-grain {
position: absolute;
inset: 0;
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0);
background-size: 32px 32px;
opacity: 0.6;
}
.hero-inner {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--sp-5);
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: var(--sp-8);
align-items: center;
}
@media (max-width: 960px) {
.hero-inner {
grid-template-columns: 1fr;
gap: var(--sp-7);
}
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: var(--sp-5);
}
.eyebrow span {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.22em;
color: var(--brand-cyan);
}
.eyebrow-rule {
display: inline-block;
width: 28px;
height: 2px;
background: var(--brand-cyan);
border-radius: 999px;
}
.hero-headline {
font-family: 'Outfit', sans-serif;
font-weight: 900;
font-size: clamp(40px, 6vw, 76px);
line-height: 1.02;
letter-spacing: -0.025em;
margin: 0 0 var(--sp-5);
color: var(--ink);
}
.hero-gradient {
background: linear-gradient(135deg, var(--brand-cyan), var(--brand-green));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-block;
}
.hero-sub {
font-size: clamp(16px, 1.6vw, 19px);
color: var(--ink-mid);
max-width: 540px;
margin: 0 0 var(--sp-6);
line-height: 1.6;
}
.hero-ctas {
display: flex;
gap: var(--sp-3);
margin-bottom: var(--sp-6);
flex-wrap: wrap;
}
.btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, var(--brand-cyan), var(--brand-green));
color: #001416;
padding: 16px 26px;
border-radius: 999px;
font-family: 'Outfit', sans-serif;
font-weight: 800;
font-size: 15.5px;
letter-spacing: 0.005em;
transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
box-shadow: 0 4px 20px rgba(23, 184, 194, 0.25), 0 0 0 1px rgba(23, 184, 194, 0.3);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(23, 184, 194, 0.4), 0 0 0 1px rgba(23, 184, 194, 0.5);
}
.btn-primary-xl {
padding: 20px 34px;
font-size: 17px;
}
.btn-secondary {
display: inline-flex;
align-items: center;
background: transparent;
color: var(--ink);
padding: 16px 22px;
border-radius: 999px;
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 15px;
border: 1px solid var(--border-strong);
transition: background .15s var(--ease-out), border-color .15s var(--ease-out);
}
.btn-secondary:hover {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.3);
}
.hero-trust {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
font-size: 12.5px;
color: var(--ink-soft);
}
.hero-trust .dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--brand-green);
box-shadow: 0 0 8px var(--brand-green);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.hero-trust .sep { color: var(--ink-soft); opacity: 0.5; }
/* ── Hero video + phone mockup ───────────────────────────────── */
.hero-visual {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
/* v2: video takes over the hero visual when assets/demo.mp4 loads.
Default state is "no video" — JS in app.js flips .has-video on
the parent when the video successfully starts playing, which
reveals the video and hides the phone fallback. */
.hero-video {
display: none;
width: 280px;
border-radius: 42px;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 30px 60px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
background: #0c0e12;
animation: phone-float 6s ease-in-out infinite;
}
.hero-visual.has-video .hero-video { display: block; }
.hero-visual.has-video .hero-phone-fallback { display: none; }
.hero-visual.has-video .phone-glow {
/* Keep the soft cyan halo behind the video too */
display: block;
}
/* ─── HERO SLIDESHOW ───────────────────────────────────────────────
Sits in the same slot as .hero-video (same parent, same .has-video
reveal hook). Cycles through the 5 app screenshots with crossfade
+ ken-burns zoom on the active slide + a brand-color "sweep" line
that races across the screen on each transition.
JS in app.js manages the active slide and the cycle timer. CSS
does the actual motion — zoom is a continuous 5s linear
animation while a slide is `.active`, fade is a 1.2s transition
on opacity. Sweep is a separate pseudo-element that travels
left-to-right on every slide change.
Display:none default — same pattern as the original hero-video.
`.has-video` flips display:block on the slideshow AND
display:none on the phone fallback. So the phone mockup serves
as the loading state until the first screenshot loads, and as
the fallback if screenshots are missing entirely.
Sizing matches the .phone fallback exactly (280×580) so there\'s
no layout shift when JS swaps from phone to slideshow.
─────────────────────────────────────────────────────────────────── */
.hero-slideshow {
display: none;
position: relative;
width: 280px;
height: 580px;
border-radius: 42px;
border: 1px solid rgba(255, 255, 255, 0.08);
overflow: hidden;
box-shadow:
0 30px 60px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
0 0 80px rgba(23, 184, 194, 0.18);
background: #0c0e12;
animation: phone-float 6s ease-in-out infinite;
}
.hero-visual.has-video .hero-slideshow { display: block; }
.hero-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1.2s ease;
border-radius: 42px;
background: #0c0e12;
/* Slight scale buffer so the ken-burns zoom never reveals an
edge of the underlying phone surround */
transform: scale(1.02);
}
.hero-slide.active {
opacity: 1;
z-index: 2;
animation: heroSlideKenBurns 5s linear forwards;
}
@keyframes heroSlideKenBurns {
from { transform: scale(1.02); }
to { transform: scale(1.10); }
}
/* Brand-color sweep — a thin gradient line that races horizontally
across the slide on every transition. Animated by adding the
`.sweeping` class via JS on each slide change. */
.hero-slide-sweep {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
opacity: 0;
background: linear-gradient(
100deg,
transparent 0%,
transparent 40%,
rgba(23, 184, 194, 0.0) 45%,
rgba(23, 184, 194, 0.45) 50%,
rgba(0, 200, 150, 0.45) 52%,
rgba(0, 200, 150, 0.0) 57%,
transparent 60%,
transparent 100%
);
transform: translateX(-100%);
}
.hero-slideshow.sweeping .hero-slide-sweep {
animation: heroSlideSweep 1.1s ease-out forwards;
}
@keyframes heroSlideSweep {
0% { transform: translateX(-100%); opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { transform: translateX(100%); opacity: 0; }
}
/* Reduced-motion users: drop the ken-burns + sweep, keep the
crossfade (it\'s subtle enough to be acceptable). */
@media (prefers-reduced-motion: reduce) {
.hero-slide.active { animation: none; transform: scale(1); }
.hero-slideshow.sweeping .hero-slide-sweep { animation: none; opacity: 0; }
.hero-slideshow { animation: none; }
}
.phone {
position: relative;
width: 280px;
height: 580px;
background: linear-gradient(145deg, #1a1f2a, #0f1218);
border-radius: 42px;
border: 1px solid rgba(255,255,255,0.08);
box-shadow:
0 30px 60px rgba(0,0,0,0.5),
0 0 0 1px rgba(255,255,255,0.04) inset,
0 -1px 0 rgba(0,0,0,0.4) inset;
padding: 12px;
animation: phone-float 6s ease-in-out infinite;
}
@keyframes phone-float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-12px) rotate(0.5deg); }
}
.phone-notch {
position: absolute;
top: 12px; left: 50%;
transform: translateX(-50%);
width: 96px;
height: 22px;
background: #0a0c10;
border-radius: 0 0 12px 12px;
z-index: 2;
}
.phone-screen {
width: 100%;
height: 100%;
background: #0c0e12;
border-radius: 32px;
overflow: hidden;
position: relative;
padding: 30px 14px 14px;
}
.phone-glow {
position: absolute;
inset: -40px;
background: radial-gradient(circle at 50% 50%, rgba(23,184,194,0.3) 0%, transparent 60%);
z-index: -1;
filter: blur(40px);
pointer-events: none;
}
/* Inside-phone placeholder content */
.phone-screen-fallback {
padding-top: 12px;
}
.ps-top {
display: flex;
justify-content: space-around;
margin-bottom: 12px;
padding: 10px;
background: rgba(255,255,255,0.03);
border-radius: 12px;
}
.ps-stat-num {
font-family: 'Outfit', sans-serif;
font-weight: 900;
font-size: 18px;
color: var(--ink);
}
.ps-stat-lbl {
font-size: 9px;
color: var(--ink-soft);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.ps-card {
display: flex;
background: rgba(23,184,194,0.10);
border: 1px solid rgba(23,184,194,0.25);
border-radius: 12px;
padding: 10px;
gap: 10px;
margin-bottom: 10px;
}
.ps-card-poster {
width: 48px; height: 64px;
background: linear-gradient(135deg, #f5a623, #d35400);
border-radius: 6px;
flex-shrink: 0;
}
.ps-card-body { flex: 1; min-width: 0; }
.ps-card-eyebrow {
font-size: 8px;
letter-spacing: 0.15em;
color: var(--brand-cyan);
font-weight: 800;
margin-bottom: 2px;
}
.ps-card-title {
font-family: 'Outfit', sans-serif;
font-weight: 800;
font-size: 14px;
color: var(--ink);
margin-bottom: 2px;
}
.ps-card-meta {
font-size: 10px;
color: var(--ink-soft);
margin-bottom: 4px;
}
.ps-card-cta {
font-size: 10px;
color: var(--brand-cyan);
font-weight: 700;
}
.ps-row {
display: flex;
align-items: center;
padding: 8px;
background: rgba(255,255,255,0.02);
border-radius: 10px;
margin-bottom: 6px;
gap: 8px;
}
.ps-row-avatar {
width: 28px; height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand-cyan), var(--brand-purple));
flex-shrink: 0;
}
.ps-row-avatar-2 {
background: linear-gradient(135deg, var(--brand-warm), var(--brand-warn));
}
.ps-row-text { flex: 1; min-width: 0; }
.ps-row-title {
font-size: 11px;
color: var(--ink);
font-weight: 700;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ps-row-sub {
font-size: 9.5px;
color: var(--ink-soft);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ps-row-chip {
background: linear-gradient(135deg, #00C896, #17B8C2);
color: #001416;
padding: 4px 8px;
border-radius: 6px;
font-weight: 900;
font-size: 10px;
font-family: 'Outfit', sans-serif;
}
.hero-scroll {
position: absolute;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
width: 28px;
height: 44px;
border: 2px solid var(--ink-soft);
border-radius: 999px;
opacity: 0.5;
transition: opacity .2s;
}
.hero-scroll:hover { opacity: 1; }
.hero-scroll span {
display: block;
width: 3px;
height: 7px;
background: var(--ink-mid);
border-radius: 999px;
margin: 8px auto 0;
animation: scroll-dot 1.6s ease-in-out infinite;
}
@keyframes scroll-dot {
0% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(14px); opacity: 0; }
}
/* ╔══════════════════════════════════════════════════════════════
║ SECTION HEADS (shared)
╚══════════════════════════════════════════════════════════════ */
.section-head {
text-align: center;
max-width: 720px;
margin: 0 auto var(--sp-8);
}
.section-eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.25em;
color: var(--brand-cyan);
margin-bottom: var(--sp-3);
}
.section-head h2 {
font-family: 'Outfit', sans-serif;
font-weight: 900;
font-size: clamp(32px, 4.5vw, 52px);
line-height: 1.05;
letter-spacing: -0.022em;
margin: 0 0 var(--sp-3);
color: var(--ink);
}
.section-head p {
font-size: 17px;
color: var(--ink-mid);
margin: 0;
}
/* ╔══════════════════════════════════════════════════════════════
║ VIBE SECTION
╚══════════════════════════════════════════════════════════════ */
.vibe {
padding: var(--sp-9) 0;
position: relative;
}
.vibe-pull {
max-width: 820px;
margin: 0 auto var(--sp-9);
text-align: center;
position: relative;
}
.vibe-quote-mark {
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
font-family: 'Outfit', sans-serif;
font-size: 140px;
font-weight: 900;
line-height: 1;
color: var(--brand-cyan);
opacity: 0.18;
}
.vibe-pull p {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: clamp(22px, 3vw, 34px);
line-height: 1.3;
letter-spacing: -0.015em;
color: var(--ink);
margin: 0 0 var(--sp-3);
}
.vibe-pull em {
font-style: italic;
color: var(--brand-cyan);
}
.vibe-pull-by {
font-size: 13px;
color: var(--ink-soft);
font-family: 'Inter', sans-serif;
font-weight: 500 !important;
}
.vibe-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-5);
}
@media (max-width: 800px) {
.vibe-grid { grid-template-columns: 1fr; }
}
.vibe-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 18px;
padding: var(--sp-6);
transition: transform .25s var(--ease-out), border-color .25s var(--ease-out);
}
.vibe-card:hover {
transform: translateY(-4px);
border-color: var(--border-strong);
}
.vibe-card-icon {
width: 46px;
height: 46px;
border-radius: 12px;
background: color-mix(in srgb, var(--c) 18%, transparent);
color: var(--c);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--sp-4);
}
.vibe-card-icon svg { width: 22px; height: 22px; }
.vibe-card h3 {
font-family: 'Outfit', sans-serif;
font-weight: 800;
font-size: 19px;
margin: 0 0 var(--sp-2);
color: var(--ink);
}
.vibe-card p {
color: var(--ink-mid);
font-size: 14.5px;
margin: 0;
line-height: 1.55;
}
/* ╔══════════════════════════════════════════════════════════════
║ BUILT FOR — four persona cards
╚══════════════════════════════════════════════════════════════ */
.builtfor {
padding: var(--sp-9) 0;
}
.builtfor-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-4);
}
@media (max-width: 720px) {
.builtfor-grid { grid-template-columns: 1fr; }
}
.bf-card {
position: relative;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 20px;
padding: var(--sp-6);
overflow: hidden;
transition: transform 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.bf-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--c, var(--brand-cyan));
opacity: 0.6;
}
.bf-card:hover {
transform: translateY(-4px);
border-color: var(--border-strong);
}
.bf-card:hover::before { opacity: 1; }
.bf-card:nth-child(1) { --c: #FFAA00; }
.bf-card:nth-child(2) { --c: #17B8C2; }
.bf-card:nth-child(3) { --c: #FF7043; }
.bf-card:nth-child(4) { --c: #7E57C2; }
.bf-icon {
width: 50px;
height: 50px;
border-radius: 14px;
background: color-mix(in srgb, var(--c) 18%, transparent);
color: var(--c);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--sp-4);
}
.bf-icon svg { width: 24px; height: 24px; }
.bf-card h3 {
font-family: 'Outfit', sans-serif;
font-weight: 800;
font-size: 22px;
letter-spacing: -0.015em;
margin: 0 0 var(--sp-3);
color: var(--ink);
}
.bf-card p {
color: var(--ink-mid);
font-size: 14.5px;
line-height: 1.6;
margin: 0 0 var(--sp-4);
}
.bf-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.bf-tags span {
font-size: 11px;
font-weight: 700;
padding: 4px 10px;
border-radius: 999px;
background: color-mix(in srgb, var(--c) 10%, transparent);
color: var(--c);
border: 1px solid color-mix(in srgb, var(--c) 25%, transparent);
}
/* ╔══════════════════════════════════════════════════════════════
║ LIVE VERSION PILL (in hero eyebrow)
╚══════════════════════════════════════════════════════════════ */
.live-version {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 8px;
background: rgba(0, 200, 150, 0.10);
border: 1px solid rgba(0, 200, 150, 0.3);
border-radius: 999px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.05em;
color: var(--brand-green);
margin-left: 6px;
}
.live-version[hidden] { display: none; }
.lv-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--brand-green);
box-shadow: 0 0 6px var(--brand-green);
animation: pulse 2s ease-in-out infinite;
}
/* ╔══════════════════════════════════════════════════════════════
║ FEATURE GRID
╚══════════════════════════════════════════════════════════════ */
.features {
padding: var(--sp-9) 0;
background: linear-gradient(180deg, transparent, rgba(255,255,255,0.015), transparent);
}
.feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-4);
}
@media (max-width: 1000px) {
.feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.feature-grid { grid-template-columns: 1fr; }
}
.feature {
position: relative;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 22px;
padding: var(--sp-6);
overflow: hidden;
transition: transform .3s var(--ease-out), border-color .3s var(--ease-out);
display: flex;
flex-direction: column;
}
.feature:hover {
transform: translateY(-6px);
border-color: var(--border-strong);
}
.feature-large {
grid-column: span 2;
}
@media (max-width: 1000px) {
.feature-large { grid-column: span 2; }
}
@media (max-width: 640px) {
.feature-large { grid-column: span 1; }
}
.feature-tag {
--tag: var(--brand-cyan);
display: inline-block;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.18em;
color: var(--tag);
background: color-mix(in srgb, var(--tag) 14%, transparent);
padding: 5px 9px;
border-radius: 6px;
align-self: flex-start;
margin-bottom: var(--sp-3);
}
.feature h3 {
font-family: 'Outfit', sans-serif;
font-weight: 800;
font-size: 22px;
margin: 0 0 var(--sp-3);
line-height: 1.2;
letter-spacing: -0.015em;
}
.feature p {
color: var(--ink-mid);
font-size: 14.5px;
margin: 0 0 var(--sp-5);
line-height: 1.55;
}
.feature-art {
margin-top: auto;
padding-top: var(--sp-3);
}
/* ─── Feature art: Rate bars ─── */
.feature-art-rate { display: flex; flex-direction: column; gap: 6px; }
.rate-bar {
display: grid;
grid-template-columns: 110px 1fr 40px;
gap: 10px;
align-items: center;
}
.rate-bar span {
font-size: 11px;
color: var(--ink-mid);
font-weight: 600;
}
.rate-bar .bar {
height: 6px;
background: rgba(255,255,255,0.06);
border-radius: 999px;
overflow: hidden;
}
.rate-bar .bar i {
display: block;
height: 100%;
width: var(--w);
background: linear-gradient(90deg, var(--brand-cyan), var(--brand-green));
border-radius: 999px;
transform-origin: left;
animation: bar-fill 1.2s var(--ease-out) backwards;
}
.rate-bar:nth-child(2) .bar i { animation-delay: 0.1s; }
.rate-bar:nth-child(3) .bar i { animation-delay: 0.2s; }
.rate-bar:nth-child(4) .bar i { animation-delay: 0.3s; }
@keyframes bar-fill {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.rate-bar b {
font-family: 'Outfit', sans-serif;
font-size: 13px;
font-weight: 800;
color: var(--ink);
text-align: right;
}
.rate-total {
margin-top: var(--sp-3);
padding-top: var(--sp-3);
border-top: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.15em;
color: var(--ink-soft);
}
.rate-total b {
font-family: 'Outfit', sans-serif;
font-size: 28px;
font-weight: 900;
background: linear-gradient(135deg, var(--brand-cyan), var(--brand-green));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ─── Feature art: Crew ─── */
.feature-art-crew {
display: flex;
align-items: center;
gap: var(--sp-4);
}
.avatar-stack {
display: flex;
}
.av {
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Outfit', sans-serif;
font-weight: 800;
font-size: 14px;
color: white;
border: 2px solid var(--bg-card);
margin-left: -10px;
}
.av:first-child { margin-left: 0; }
.av-a { background: linear-gradient(135deg, #17B8C2, #00C896); }
.av-b { background: linear-gradient(135deg, #FF7043, #FFAA00); }
.av-c { background: linear-gradient(135deg, #7E57C2, #B388FF); }
.av-d { background: linear-gradient(135deg, #00BCD4, #4DD0E1); }
.av-more {
background: var(--bg-card-2);
color: var(--ink-mid);
font-size: 11px;
font-weight: 700;
}
.crew-chip {
background: rgba(0,200,150,0.12);
color: var(--brand-green);
padding: 8px 14px;
border-radius: 999px;
font-size: 13px;
border: 1px solid rgba(0,200,150,0.3);
}
.crew-chip b {
font-family: 'Outfit', sans-serif;
font-weight: 900;
font-size: 15px;
}
/* ─── Feature art: Squad Nudges ────────────────────────────────────
Stacked "nudge" cards. The primary card has the brand-pink tint
matching the SQUAD NUDGES tag chip; the secondary card sits at
70% opacity to imply "and a few more in the queue" without
filling out a third row. Avatar circles use brand gradients so
even the mocked-up senders feel on-palette. */
.feature-art-nudges {
display: flex;
flex-direction: column;
gap: 8px;
}
.nudge-card {
display: flex;
align-items: center;
gap: 10px;
background: linear-gradient(
135deg,
rgba(236, 64, 122, 0.16),
rgba(236, 64, 122, 0.06)
);
border: 1px solid rgba(236, 64, 122, 0.45);
border-radius: 12px;
padding: 10px 12px;
transition: transform .2s var(--ease-out);
}
.nudge-card:hover { transform: translateY(-1px); }
.nudge-card-secondary {
opacity: 0.72;
background: rgba(255, 255, 255, 0.03);
border-color: var(--border);
}
.nudge-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #EC407A, #FF7043);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Outfit', sans-serif;
font-weight: 900;
font-size: 13.5px;
color: white;
flex-shrink: 0;
border: 2px solid var(--bg);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.nudge-avatar-2 {
background: linear-gradient(135deg, var(--brand-cyan), var(--brand-green));
}
.nudge-text {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
flex: 1;
}
.nudge-text b {
font-family: 'Outfit', sans-serif;
font-weight: 800;
font-size: 13px;
color: var(--ink);
}
.nudge-text i {
font-style: normal;
font-size: 11px;
color: var(--ink-mid);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nudge-cta {
font-family: 'Outfit', sans-serif;
font-weight: 800;
font-size: 11.5px;
color: #EC407A;
white-space: nowrap;
letter-spacing: 0.01em;
}
/* ─── Feature art: Squad Poll mini-phone ───────────────────────────
The Squad Polls feature card used to show a CSS-only diagrammatic
illustration of three vote rows. That mock is still alive below
under `.poll-option` / `.poll-row-text` / `.poll-vote-*` — kept
as dead-code revert path — but the active rendering now uses a
real screenshot framed in a mini-phone (180×380), so the SQUAD
POLLS feature card and the screens-showcase 11th card share a
consistent visual vocabulary.
Sized small enough that the card text + heading stay the visual
anchor and the screenshot reads as supporting evidence rather
than overwhelming the row. */
.feature-art-poll {
display: flex;
justify-content: center;
align-items: center;
padding: 4px 0;
}
.poll-phone-mini {
position: relative;
width: 180px;
height: 380px;
background: linear-gradient(145deg, #1a1f2a, #0f1218);
border-radius: 28px;
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 4px;
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
transition: transform .25s var(--ease-out);
}
.feature:hover .poll-phone-mini {
transform: translateY(-3px);
}
.poll-phone-mini-notch {
position: absolute;
top: 4px;
left: 50%;
transform: translateX(-50%);
width: 56px;
height: 14px;
background: #0a0c10;
border-radius: 0 0 10px 10px;
z-index: 2;
}
.poll-phone-mini-screen {
width: 100%;
height: 100%;
background: #0c0e12;
border-radius: 22px;
overflow: hidden;
position: relative;
}
.poll-phone-mini-screen img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
border-radius: 22px;
display: block;
}
/* ─── Feature art: Squad Poll ballot (DEAD CODE) ───────────────────
Pre-screenshot CSS mock — kept in case we ever want to revert to
the diagrammatic illustration. Selectors below don\'t currently
match any DOM in the live page; the SQUAD POLLS card uses the
.poll-phone-mini block above instead. */
.feature-art-poll-legacy {
display: flex;
flex-direction: column;
gap: 8px;
}
.poll-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border);
border-radius: 12px;
padding: 10px 12px;
transition: transform .2s var(--ease-out), background .2s var(--ease-out);
}
.poll-option-winning {
background: linear-gradient(
135deg,
rgba(0, 200, 150, 0.22),
rgba(0, 200, 150, 0.08)
);
border-color: rgba(0, 200, 150, 0.55);
box-shadow: 0 0 18px rgba(0, 200, 150, 0.18);
}
.poll-option:hover { transform: translateY(-1px); }
.poll-row-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.poll-row-text b {
font-family: 'Outfit', sans-serif;
font-weight: 800;
font-size: 13.5px;
color: var(--ink);
letter-spacing: 0.005em;
}
.poll-row-text i {
font-style: normal;
font-size: 11.5px;
color: var(--ink-mid);
}
.poll-votes {
display: flex;
align-items: center;
gap: 8px;
}
.poll-vote-dots {
display: flex;
}
.poll-vote-dot {
width: 18px;
height: 18px;
border-radius: 50%;
background: linear-gradient(135deg, var(--brand-cyan), var(--brand-green));
border: 2px solid var(--bg);
margin-left: -6px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.poll-vote-dot:first-child { margin-left: 0; }
.poll-vote-count {
font-family: 'Outfit', sans-serif;
font-weight: 900;
font-size: 14px;
color: var(--ink);
min-width: 12px;
text-align: right;
}
/* ─── Feature art: Ticket stub ─── */
.feature-art-ticket {
display: flex;
justify-content: center;
}
.ticket-stub {
background: linear-gradient(135deg, #1d2330, #131720);
border: 1px solid var(--border);
border-radius: 14px;
padding: 14px 16px;
width: 100%;
max-width: 280px;
}
.ts-top {
font-size: 9px;
letter-spacing: 0.22em;
color: var(--brand-warn);
font-weight: 800;
margin-bottom: 4px;
}
.ts-title {
font-family: 'Outfit', sans-serif;
font-weight: 900;
font-size: 17px;
color: var(--ink);
margin-bottom: var(--sp-3);
}
.ts-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 14px;
margin-bottom: var(--sp-3);
}
.ts-grid div span {
display: block;
font-size: 8.5px;
letter-spacing: 0.18em;
color: var(--ink-soft);
font-weight: 800;
}
.ts-grid div b {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 13px;
color: var(--ink);
}
.ts-barcode {
padding: 8px 10px;
background: white;
color: black;
font-family: 'JetBrains Mono', monospace;
font-weight: 700;
letter-spacing: 1px;
font-size: 13px;
text-align: center;
border-radius: 4px;
margin-top: 8px;
}
/* ─── Feature art: Discover-new-films (conversational chat) ────────
v2.0.196 — the static CSS-mocked 2-message chat + 3-poster grid
that lived here was replaced with a real screen-recording of the
v2.0.194 conversational WhatToWatchChatScreen running on a phone.
Wrapper just centres the .search-phone-mini (reused from the
SEARCH card) so both video-demo feature cards share one visual
vocabulary. All the old .wtw-chat-*, .wtw-picks, .wtw-card,
.wtw-poster, .wtw-title, .wtw-why classes were retired with the
markup that used them — kept this header as the archaeological
note in case anyone goes looking for them in git history. */
.feature-art-wtw {
display: flex;
justify-content: center;
align-items: center;
padding: 4px 0;
}
/* ─── Feature art: Cinemas ─── */
.feature-art-cinemas {
position: relative;
min-height: 120px;
}
.cin-pin {
width: 28px;
height: 28px;
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
position: absolute;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 12px;
color: white;
}
.cin-visited {
background: var(--brand-green);
top: 8px; left: 24%;
box-shadow: 0 4px 16px rgba(0,200,150,0.4);
}
.cin-visited::before {
content: '✓';
transform: rotate(45deg);
}
.cin-near {
background: rgba(255,255,255,0.18);
top: 32px; left: 60%;
}
.cin-pin-2 { top: 16px; left: 78%; }
.cin-pin-3 { top: 50px; left: 8%; }
.cin-leader {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
padding: 10px 12px;
background: rgba(255,255,255,0.04);
border-radius: 10px;
font-size: 11px;
}
.cin-leader span { color: var(--ink-mid); letter-spacing: 0.1em; font-weight: 700; }
.cin-leader b {
font-family: 'Outfit', sans-serif;
font-weight: 700;
color: var(--brand-green);
font-size: 11px;
}
/* ─── Feature art: Wrapped ─── */
.feature-art-wrapped {
display: flex;
justify-content: center;
}
.wrapped-card {
background: linear-gradient(135deg, #FFAA00, #FF7043);
padding: 18px 20px;
border-radius: 16px;
text-align: center;
width: 100%;
max-width: 240px;
color: #20140a;
}
.wr-eyebrow {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.22em;
opacity: 0.7;
}
.wr-num {
font-family: 'Outfit', sans-serif;
font-weight: 900;
font-size: 56px;
line-height: 1;
margin: 4px 0;
}
.wr-lbl {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.18em;
margin-bottom: 14px;
}
.wr-bot {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding-top: 10px;
border-top: 1.5px solid rgba(0,0,0,0.15);
}
.wr-bot div span {
display: block;
font-size: 8.5px;
font-weight: 800;
letter-spacing: 0.18em;
opacity: 0.7;
}
.wr-bot div b {
font-family: 'Outfit', sans-serif;
font-weight: 800;
font-size: 14px;
}
/* ─── Feature art: Find a session (v2.0.203) ───────────────────────
A chat bubble ("tonight after 8, IMAX only") above a mock of the
in-app ASAP card. The card tag is cyan but the ASAP card itself
uses the app's purple accent (#7E57C2) to match the real
_AsapCard in movie_detail_screen.dart. */
.feature-art-sessions {
display: flex;
flex-direction: column;
gap: 12px;
}
.sess-chat { display: flex; justify-content: flex-end; }
.sess-bubble {
background: rgba(23, 184, 194, 0.14);
border: 1px solid rgba(23, 184, 194, 0.4);
color: var(--ink);
font-size: 13px;
font-weight: 600;
padding: 9px 13px;
border-radius: 14px 14px 4px 14px;
max-width: 82%;
}
.sess-asap {
background: linear-gradient(135deg,
rgba(126, 87, 194, 0.16), rgba(126, 87, 194, 0.05));
border: 1.4px solid rgba(126, 87, 194, 0.5);
border-radius: 14px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.sess-asap-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.sess-asap-badge {
background: #7E57C2;
color: #fff;
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.6px;
padding: 3px 8px;
border-radius: 999px;
white-space: nowrap;
}
.sess-asap-in {
font-size: 11.5px;
font-weight: 700;
color: #B39DDB;
white-space: nowrap;
}
.sess-asap-venue {
font-family: 'Outfit', sans-serif;
font-size: 15px;
font-weight: 800;
color: var(--ink);
}
.sess-asap-time {
font-size: 13px;
font-weight: 700;
color: var(--ink-mid);
margin-top: -4px;
}
.sess-asap-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sess-chip {
background: rgba(126, 87, 194, 0.18);
border: 1px solid rgba(126, 87, 194, 0.45);
color: var(--ink);
font-size: 11px;
font-weight: 700;
padding: 4px 9px;
border-radius: 999px;
}
.sess-asap-book {
background: #7E57C2;
color: #fff;
text-align: center;
font-size: 13px;
font-weight: 800;
padding: 10px;
border-radius: 10px;
margin-top: 2px;
}
/* ─── Feature art: Insights ─── */
.feature-art-insights { display: flex; flex-direction: column; gap: 8px; }
.ins-bar {
display: grid;
grid-template-columns: 70px 1fr;
gap: 10px;
align-items: center;
}
.ins-bar span {
font-size: 11px;
color: var(--ink-mid);
font-weight: 600;
}
.ins-bar .bar {
height: 8px;
background: rgba(255,255,255,0.05);
border-radius: 999px;
overflow: hidden;
}
.ins-bar .bar i {
display: block;
height: 100%;
width: var(--w);
background: var(--c);
border-radius: 999px;
/* v3 marketing pass — bars now animate on scroll-into-view
instead of on initial page paint. scaleX 0→1 with a 1.1s
ease so each row sweeps in dramatically. transform-origin
left so the fill grows from the label outward. */
transform: scaleX(0);
transform-origin: left center;
transition: transform 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Once the parent .reveal is in view, fill the bars. */
.reveal.is-revealed .feature-art-insights .ins-bar .bar i {
transform: scaleX(1);
}
/* Stagger the 5 bars so they sweep in sequentially — feels like
the chart is "drawing itself" rather than every bar arriving
at once. */
.reveal.is-revealed .feature-art-insights .ins-bar:nth-child(1) .bar i { transition-delay: 0.10s; }
.reveal.is-revealed .feature-art-insights .ins-bar:nth-child(2) .bar i { transition-delay: 0.25s; }
.reveal.is-revealed .feature-art-insights .ins-bar:nth-child(3) .bar i { transition-delay: 0.40s; }
.reveal.is-revealed .feature-art-insights .ins-bar:nth-child(4) .bar i { transition-delay: 0.55s; }
.reveal.is-revealed .feature-art-insights .ins-bar:nth-child(5) .bar i { transition-delay: 0.70s; }
@media (prefers-reduced-motion: reduce) {
.feature-art-insights .ins-bar .bar i {
transform: scaleX(1);
transition: none;
}
}
/* ─── Feature art: Shared Lists ─── */
.feature-art-lists {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
}
.list-pill {
background: rgba(38,198,218,0.12);
color: #4DD0E1;
padding: 8px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
border: 1px solid rgba(38,198,218,0.3);
}
.list-pill-2 { background: rgba(126,87,194,0.12); color: #B388FF; border-color: rgba(126,87,194,0.3); }
.list-pill-3 { background: rgba(255,170,0,0.12); color: var(--brand-warm); border-color: rgba(255,170,0,0.3); }
.list-meta {
margin-top: 4px;
font-size: 11px;
color: var(--ink-soft);
letter-spacing: 0.05em;
}
/* ╔══════════════════════════════════════════════════════════════
║ SCREENSHOTS SHOWCASE — horizontal strip of phone mockups
╚══════════════════════════════════════════════════════════════ */
.screenshots-section {
padding: var(--sp-9) 0;
position: relative;
}
.screenshots-strip {
display: flex;
gap: var(--sp-5);
padding: var(--sp-4) var(--sp-5) var(--sp-5);
/* Horizontal-scroll on narrow viewports so the strip stays
readable on mobile without crushing the phones. */
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--ink-soft) transparent;
/* Negative margin balances the .container padding so the strip can
edge-extend on small screens for a polished feel. */
margin: 0 calc(var(--sp-5) * -1);
}
.screenshots-strip::-webkit-scrollbar { height: 6px; }
.screenshots-strip::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: 999px;
}
.ss-card {
flex: 0 0 auto;
scroll-snap-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-4);
margin: 0;
width: 220px;
}
.ss-phone {
position: relative;
width: 220px;
height: 460px;
background: linear-gradient(145deg, #1a1f2a, #0f1218);
border-radius: 34px;
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 9px;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.ss-card:hover .ss-phone {
transform: translateY(-6px) scale(1.02);
box-shadow:
0 28px 50px rgba(0, 0, 0, 0.5),
0 0 0 1px var(--brand-cyan);
}
.ss-notch {
position: absolute;
top: 9px;
left: 50%;
transform: translateX(-50%);
width: 70px;
height: 16px;
background: #0a0c10;
border-radius: 0 0 10px 10px;
z-index: 2;
}
.ss-screen {
width: 100%;
height: 100%;
background: #0c0e12;
border-radius: 26px;
overflow: hidden;
position: relative;
padding: 24px 10px 10px;
}
/* When a real screenshot drops in as an ![]()
, fill the screen. */
.ss-screen img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 26px;
}
/* Real screenshot images overlay the CSS placeholder behind them.
Each `.ss-screen` contains BOTH a `![]()
`
AND a `.ss-fake` placeholder div. The img is positioned absolutely
on top — if the screenshot file exists, the img loads and visually
covers the placeholder. If the file is missing, the inline
`onerror="this.remove()"` removes the img from the DOM and the
CSS placeholder underneath becomes visible. So the section never
shows a broken image icon — it falls back gracefully. */
.ss-screen-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 26px;
z-index: 2;
background: #0c0e12;
}
.ss-card figcaption {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 12.5px;
color: var(--ink-mid);
text-align: center;
max-width: 220px;
line-height: 1.35;
}
/* ── Wallet section — centered 3-up row of real wallet screenshots.
Reuses the .ss-card / .ss-phone mockup; wraps on narrow screens
instead of horizontal-scrolling (only three cards). ── */
.wallet-section {
padding: var(--sp-9) 0;
position: relative;
overflow: hidden;
}
.wallet-section::before {
content: '';
position: absolute;
top: 18%;
left: 50%;
transform: translateX(-50%);
width: min(760px, 82%);
height: 62%;
background: radial-gradient(
circle at center,
rgba(23, 184, 194, 0.16) 0%,
rgba(0, 200, 150, 0.08) 38%,
transparent 70%
);
pointer-events: none;
z-index: 0;
}
.wallet-section .container {
position: relative;
z-index: 1;
}
.wallet-strip {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: var(--sp-6) var(--sp-7);
margin-top: var(--sp-7);
}
.wallet-strip .ss-card figcaption b {
color: var(--brand-cyan);
font-weight: 800;
}
/* ── Cinema Deals — crawlable weekly cheap-day list in the copy column. ── */
.deals-list {
list-style: none;
margin: var(--sp-5) 0 var(--sp-3);
padding: 0;
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.deals-list li {
display: flex;
flex-direction: column;
gap: 2px;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 14px;
}
.deals-list li strong {
font-family: 'Outfit', sans-serif;
font-weight: 800;
font-size: 15px;
color: var(--ink);
}
.deals-list li span {
font-size: 13.5px;
color: var(--ink-mid);
}
.deals-list li b {
color: var(--brand-cyan);
font-weight: 700;
}
.deals-note {
font-size: 13px !important;
color: var(--ink-mid) !important;
font-style: italic;
opacity: 0.85;
}
/* ── Placeholder fake-content for each screen ─────────────────
Updated v2 to mirror the actual app's UX language: each tab has
its own accent (Home cyan, Discover pink, My Films gold), the
rainbow gradient rule under every title, the floating bottom-nav
chip language, and the section eyebrows with their coloured dot
indicators. */
/* Shared bits */
.ss-fake { display: flex; flex-direction: column; gap: 6px; height: 100%; }
.ss-fake-tab-title {
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'Outfit', sans-serif;
font-weight: 900;
font-size: 18px;
color: var(--ink);
margin-top: 4px;
letter-spacing: -0.02em;
}
.ss-fake-tab-title em {
font-size: 14px;
font-style: normal;
opacity: 0.7;
}
.ss-fake-tab-title.ss-tab-pink { color: var(--ink); }
.ss-fake-tab-title.ss-tab-gold { color: var(--ink); }
.ss-fake-tab-rule {
height: 2px;
background: linear-gradient(90deg, var(--brand-green), var(--brand-cyan), var(--brand-purple));
border-radius: 999px;
margin: 2px 0 6px;
width: 65%;
opacity: 0.9;
}
.ss-rule-pink { background: linear-gradient(90deg, #EC4899, #F59E0B, #06B6D4); }
.ss-rule-gold { background: linear-gradient(90deg, #F59E0B, #06B6D4, #8B5CF6); }
.ss-fake-search {
font-size: 9px;
color: var(--ink-soft);
background: rgba(255, 255, 255, 0.05);
padding: 7px 10px;
border-radius: 999px;
}
.ss-fake-subhead {
display: flex;
align-items: center;
gap: 8px;
font-family: 'Outfit', sans-serif;
font-weight: 800;
font-size: 14px;
color: var(--ink);
margin-top: 4px;
}
.ss-fake-subhead em {
font-style: normal;
font-size: 16px;
color: var(--ink-mid);
}
.ss-fake-subhead span { flex: 1; }
/* ─── Home ─────────────────────────────────────────────────── */
.ss-fake-featured {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 8px;
background:
linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.7)),
linear-gradient(135deg, #FFAA00 0%, #C73B3B 50%, #5B1F1F 100%);
overflow: hidden;
padding: 6px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.ss-fake-featured-chip {
align-self: flex-start;
background: var(--brand-cyan);
color: #001416;
padding: 2px 7px;
border-radius: 4px;
font-size: 7.5px;
font-weight: 900;
letter-spacing: 0.12em;
}
.ss-fake-featured-info { display: flex; flex-direction: column; }
.ss-fake-featured-info span {
font-family: 'Outfit', sans-serif;
font-weight: 900;
font-size: 12px;
color: white;
line-height: 1.1;
}
.ss-fake-featured-info i {
font-size: 8px;
font-style: normal;
color: rgba(255, 255, 255, 0.85);
margin-top: 2px;
line-height: 1.3;
}
.ss-fake-month {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 9.5px;
color: var(--ink);
font-weight: 600;
}
.ss-fake-month em {
color: var(--brand-cyan);
font-style: normal;
font-weight: 700;
}
.ss-fake-howwas {
background: linear-gradient(135deg, #2a1a1a, #1a1a1a);
border-radius: 8px;
padding: 8px;
display: flex;
flex-direction: column;
gap: 2px;
}
.ss-fake-howwas small {
font-size: 7px;
font-weight: 800;
letter-spacing: 0.16em;
color: var(--brand-green);
}
.ss-fake-howwas strong {
font-family: 'Outfit', sans-serif;
font-weight: 900;
font-size: 11px;
color: white;
line-height: 1.15;
}
.ss-fake-howwas span {
font-size: 8px;
background: var(--brand-green);
color: #001416;
padding: 3px 7px;
border-radius: 999px;
font-weight: 800;
align-self: flex-start;
margin-top: 3px;
}
.ss-fake-coming-eyebrow {
font-size: 8px;
font-weight: 800;
letter-spacing: 0.16em;
color: var(--brand-cyan);
margin-top: 2px;
}
.ss-fake-poster-strip {
display: flex;
gap: 4px;
}
.ssp {
flex: 1;
aspect-ratio: 2 / 3;
border-radius: 4px;
}
.ssp1 { background: linear-gradient(135deg, #c9a87c, #8b6f47); }
.ssp2 { background: linear-gradient(135deg, #4a3580, #1a0e3a); }
.ssp3 { background: linear-gradient(135deg, #f5a623, #d35400); }
.ssp4 { background: linear-gradient(135deg, #6b5b2a, #2c2510); }
/* ─── Discover ─────────────────────────────────────────────── */
.ss-fake-chips {
display: flex;
gap: 4px;
overflow: hidden;
}
.ss-fake-chips span {
font-size: 8.5px;
padding: 4px 8px;
background: rgba(255, 255, 255, 0.05);
border-radius: 999px;
color: var(--ink-mid);
font-weight: 600;
white-space: nowrap;
}
.ss-fake-chips .active {
background: var(--brand-green);
color: #001416;
}
.ss-fake-section-head {
font-family: 'Outfit', sans-serif;
font-weight: 800;
font-size: 11px;
color: var(--ink);
margin-top: 3px;
display: flex;
align-items: center;
gap: 4px;
}
.ss-fake-section-head.ss-spark { color: #EC4899; }
.ss-fake-recent {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
font-size: 9.5px;
color: var(--ink);
border-bottom: 1px solid var(--border);
}
.ss-fake-recent em {
color: var(--ink-soft);
font-style: normal;
font-size: 11px;
}
.ss-fake-discover-posters {
display: flex;
gap: 8px;
margin-top: 2px;
}
.ssp-tall {
flex: 1;
aspect-ratio: 2 / 3;
border-radius: 6px;
}
.ssp-tall-1 { background: linear-gradient(135deg, #6b6b6b 0%, #2a2a2a 50%, #0f0f0f 100%); }
.ssp-tall-2 { background: linear-gradient(180deg, #5C9CDB 0%, #2A4A6B 60%, #1A2A3A 100%); }
/* ─── My Films ─────────────────────────────────────────────── */
.ss-fake-tabs {
display: flex;
gap: 4px;
margin-bottom: 4px;
}
.ss-fake-tabs span {
flex: 1;
text-align: center;
font-size: 8px;
padding: 5px 4px;
background: rgba(255, 255, 255, 0.04);
border-radius: 8px;
color: var(--ink-mid);
font-weight: 600;
}
.ss-fake-tabs span.active {
background: rgba(23, 184, 194, 0.15);
color: var(--brand-cyan);
border: 1px solid rgba(23, 184, 194, 0.4);
}
.ss-fake-tabs span b {
background: rgba(23, 184, 194, 0.3);
padding: 1px 4px;
border-radius: 999px;
font-size: 7.5px;
margin-left: 2px;
}
.ss-fake-film {
display: flex;
gap: 7px;
padding: 6px;
background: rgba(255, 255, 255, 0.03);
border-radius: 7px;
align-items: center;
}
.ss-fake-film > div:not(.ssp-mini) {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.ss-fake-film b {
font-size: 9px;
color: var(--ink);
font-weight: 700;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.ss-fake-film i {
font-size: 7.5px;
color: var(--ink-soft);
font-style: normal;
}
.ss-fake-film em {
font-size: 7.5px;
color: var(--brand-cyan);
font-style: normal;
font-weight: 600;
}
.ssp-mini {
width: 24px;
height: 32px;
border-radius: 3px;
flex-shrink: 0;
}
.ssp-mini-1 { background: linear-gradient(135deg, #FFC700, #C49000); }
.ssp-mini-2 { background: linear-gradient(135deg, #6a5acd, #2c1a5a); }
.ssp-mini-3 { background: linear-gradient(135deg, #d35400, #2a0a0a); }
.ssp-mini-4 { background: linear-gradient(135deg, #c0392b, #4a0e0e); }
.ssp-mini-bk { background: linear-gradient(135deg, #4a5a3e, #1a2218); }
.ssp-mini-pb { background: linear-gradient(135deg, #FFC700, #C49000); }
.ssp-mini-hk { background: linear-gradient(135deg, #5a5a3e, #2a2818); }
/* ─── Coming to Screens ────────────────────────────────────── */
.ss-fake-day-head {
font-size: 8px;
font-weight: 800;
letter-spacing: 0.16em;
color: var(--ink-soft);
margin: 3px 0 2px;
}
.ss-film-wide i.ss-desc {
font-size: 7px;
color: var(--ink-soft);
line-height: 1.3;
margin-top: 1px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ─── Cinema Experiences ───────────────────────────────────── */
.ss-fake-tickets { position: relative; padding-bottom: 30px; }
.ss-fake-tickets-hero {
display: flex;
align-items: center;
gap: 6px;
margin-top: 4px;
}
.ss-fake-tickets-hero span {
font-size: 22px;
color: var(--brand-cyan);
}
.ss-fake-tickets-hero strong {
font-family: 'Outfit', sans-serif;
font-weight: 900;
font-size: 18px;
color: var(--ink);
letter-spacing: -0.02em;
}
.ss-fake-tickets-sub {
font-size: 8px;
color: var(--ink-mid);
line-height: 1.45;
}
.ss-fake-step {
display: flex;
gap: 7px;
padding: 7px;
background: rgba(23, 184, 194, 0.06);
border: 1px solid rgba(23, 184, 194, 0.25);
border-radius: 7px;
align-items: flex-start;
}
.ss-fake-step.ss-step-amber {
background: rgba(255, 170, 0, 0.06);
border-color: rgba(255, 170, 0, 0.3);
}
.ss-fake-step > span {
font-size: 12px;
color: var(--brand-cyan);
flex-shrink: 0;
width: 22px;
}
.ss-step-amber > span { color: var(--brand-warm); }
.ss-fake-step > div { flex: 1; min-width: 0; }
.ss-fake-step b {
display: block;
font-family: 'Outfit', sans-serif;
font-weight: 800;
font-size: 9px;
color: var(--ink);
margin-bottom: 1px;
}
.ss-fake-step i {
font-size: 7.5px;
color: var(--ink-mid);
font-style: normal;
line-height: 1.35;
display: block;
}
.ss-fake-fab {
position: absolute;
bottom: 4px;
right: 4px;
background: var(--brand-cyan);
color: #001416;
padding: 6px 10px;
border-radius: 999px;
font-size: 9px;
font-weight: 800;
box-shadow: 0 4px 12px rgba(23, 184, 194, 0.4);
}
/* ╔══════════════════════════════════════════════════════════════
║ STATS — animated counters
╚══════════════════════════════════════════════════════════════ */
.stats {
padding: var(--sp-8) 0;
position: relative;
}
.stat-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-4);
}
@media (max-width: 800px) {
.stat-row { grid-template-columns: repeat(2, 1fr); }
}
.stat {
text-align: center;
padding: var(--sp-6) var(--sp-4);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 18px;
}
.stat-num {
font-family: 'Outfit', sans-serif;
font-weight: 900;
font-size: clamp(40px, 5vw, 56px);
line-height: 1;
background: linear-gradient(135deg, var(--brand-cyan), var(--brand-green));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: var(--sp-2);
}
.stat-lbl {
font-size: 13px;
color: var(--ink-mid);
letter-spacing: 0.02em;
}
/* ╔══════════════════════════════════════════════════════════════
║ HOW IT WORKS
╚══════════════════════════════════════════════════════════════ */
.how {
padding: var(--sp-9) 0;
}
.how-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-4);
margin-bottom: var(--sp-7);
}
@media (max-width: 900px) {
.how-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
.how-grid { grid-template-columns: 1fr; }
}
.how-step {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 18px;
padding: var(--sp-6);
position: relative;
transition: transform .25s var(--ease-out), border-color .25s var(--ease-out);
}
.how-step:hover {
transform: translateY(-4px);
border-color: var(--brand-cyan);
}
.how-num {
font-family: 'Outfit', sans-serif;
font-weight: 900;
font-size: 38px;
line-height: 1;
background: linear-gradient(135deg, var(--brand-cyan), var(--brand-green));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: var(--sp-4);
letter-spacing: -0.02em;
}
.how-step h3 {
font-family: 'Outfit', sans-serif;
font-weight: 800;
font-size: 19px;
margin: 0 0 var(--sp-2);
color: var(--ink);
}
.how-step p {
font-size: 14px;
color: var(--ink-mid);
margin: 0;
line-height: 1.55;
}
.how-cta {
display: flex;
justify-content: center;
}
/* ╔══════════════════════════════════════════════════════════════
║ QUOTES
╚══════════════════════════════════════════════════════════════ */
.quotes {
padding: var(--sp-9) 0;
background: linear-gradient(180deg, transparent, rgba(255,255,255,0.015), transparent);
}
.quote-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-4);
}
@media (max-width: 880px) {
.quote-grid { grid-template-columns: 1fr; }
}
.quote-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 18px;
padding: var(--sp-6);
position: relative;
}
.quote-card::before {
content: '"';
position: absolute;
top: -6px;
left: 18px;
font-family: 'Outfit', sans-serif;
font-size: 90px;
font-weight: 900;
line-height: 1;
color: var(--brand-cyan);
opacity: 0.18;
}
.quote-card p {
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 17px;
line-height: 1.5;
color: var(--ink);
margin: 0 0 var(--sp-4);
position: relative;
}
.quote-card footer {
font-size: 13px;
color: var(--ink-soft);
font-style: italic;
}
/* ╔══════════════════════════════════════════════════════════════
║ FAQ
╚══════════════════════════════════════════════════════════════ */
.faq {
padding: var(--sp-9) 0;
}
.faq-list {
max-width: 760px;
margin: 0 auto;
}
.faq-item {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 14px;
padding: 18px 22px;
margin-bottom: 10px;
transition: border-color .2s var(--ease-out);
}
.faq-item[open] { border-color: var(--brand-cyan); }
.faq-item summary {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 16.5px;
color: var(--ink);
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
outline: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '+';
font-size: 22px;
color: var(--brand-cyan);
font-weight: 300;
transition: transform .25s var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
margin: 14px 0 0;
color: var(--ink-mid);
font-size: 14.5px;
line-height: 1.6;
}
/* ╔══════════════════════════════════════════════════════════════
║ MADE BY KIM — maker section
╚══════════════════════════════════════════════════════════════ */
.madeby {
padding: var(--sp-9) 0;
}
.madeby-card {
position: relative;
background: var(--bg-card);
border: 1px solid var(--border-strong);
border-radius: 28px;
padding: var(--sp-8);
overflow: hidden;
}
.madeby-bg {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 18% 30%, rgba(255, 77, 136, 0.10) 0%, transparent 40%),
radial-gradient(circle at 82% 70%, rgba(23, 184, 194, 0.10) 0%, transparent 40%);
pointer-events: none;
}
.madeby-grid {
position: relative;
display: grid;
grid-template-columns: 220px 1fr;
gap: var(--sp-7);
align-items: center;
}
@media (max-width: 760px) {
.madeby-grid {
grid-template-columns: 1fr;
gap: var(--sp-5);
text-align: center;
}
}
.madeby-portrait {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-3);
}
.madeby-portrait img {
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
border: 4px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.madeby-portrait-fallback {
width: 200px;
height: 200px;
border-radius: 50%;
/* Brand-consistent halo: cyan + green radial blooms over a dark
card base. The pink that used to sit at 30%/30% is NOT a brand
colour — swapped for brand-green so the portrait circle reads
as part of the moviemates.social palette (same two-tone the
wordmark + the brand mark itself use). */
background:
radial-gradient(circle at 30% 30%, rgba(23, 184, 194, 0.42), transparent 62%),
radial-gradient(circle at 70% 70%, rgba(0, 200, 150, 0.40), transparent 62%),
linear-gradient(135deg, var(--bg-card-2), var(--bg-elevated));
border: 4px solid rgba(255, 255, 255, 0.08);
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.35),
0 0 32px rgba(23, 184, 194, 0.12);
display: flex;
align-items: center;
justify-content: center;
}
.madeby-portrait-mark img,
.madeby-portrait-mark svg {
/* Bigger than the previous 48 px so the brand mark feels like a
deliberate brand logo treatment, not a tiny chip floating in
the centre of a big circle. ~50% of the 200 px portrait
diameter is the visual sweet spot for a centred logo lockup. */
width: 104px;
height: 104px;
display: block;
/* Subtle drop-shadow gives the mark a tiny bit of lift off the
halo behind it — same kind of treatment as the .ss-card phone
mockups, keeps everything in the same design vocabulary. */
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}
.madeby-location {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--ink-mid);
background: rgba(255, 255, 255, 0.03);
padding: 5px 12px;
border-radius: 999px;
border: 1px solid var(--border);
}
.madeby-location .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--brand-green);
box-shadow: 0 0 8px var(--brand-green);
animation: pulse 2s ease-in-out infinite;
}
.madeby-copy {
display: flex;
flex-direction: column;
}
.madeby-copy .section-eyebrow {
text-align: left;
margin-bottom: var(--sp-3);
}
@media (max-width: 760px) {
.madeby-copy .section-eyebrow { text-align: center; }
}
.madeby-copy h2 {
font-family: 'Outfit', sans-serif;
font-weight: 900;
font-size: clamp(28px, 4vw, 40px);
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0 0 var(--sp-4);
color: var(--ink);
}
.madeby-lede {
font-size: 16px;
line-height: 1.6;
color: var(--ink);
margin: 0 0 var(--sp-3);
}
.madeby-copy p {
font-size: 14.5px;
line-height: 1.6;
color: var(--ink-mid);
margin: 0 0 var(--sp-3);
}
.madeby-copy a {
color: var(--brand-cyan);
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(23, 184, 194, 0.4);
text-underline-offset: 3px;
transition: text-decoration-color 0.2s var(--ease-out);
}
.madeby-copy a:hover {
text-decoration-color: var(--brand-cyan);
}
.madeby-signature {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: var(--sp-4);
padding-top: var(--sp-4);
border-top: 1px solid var(--border);
}
.madeby-signature-name {
font-family: 'Outfit', sans-serif;
font-weight: 800;
font-size: 18px;
background: linear-gradient(135deg, var(--brand-cyan), var(--brand-green));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.madeby-signature-role {
font-size: 12px;
color: var(--ink-soft);
letter-spacing: 0.02em;
}
/* ╔══════════════════════════════════════════════════════════════
║ FINAL CTA
╚══════════════════════════════════════════════════════════════ */
.final-cta {
padding: var(--sp-9) 0;
}
.final-card {
position: relative;
background: var(--bg-card);
border: 1px solid var(--border-strong);
border-radius: 28px;
padding: var(--sp-9) var(--sp-6);
text-align: center;
overflow: hidden;
}
.final-bg {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 40%, rgba(23,184,194,0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 60%, rgba(0,200,150,0.13) 0%, transparent 50%);
pointer-events: none;
}
.final-card h2 {
font-family: 'Outfit', sans-serif;
font-weight: 900;
font-size: clamp(28px, 4.5vw, 48px);
line-height: 1.1;
letter-spacing: -0.025em;
margin: 0 0 var(--sp-3);
position: relative;
z-index: 1;
}
.final-card p {
font-size: 17px;
color: var(--ink-mid);
margin: 0 auto var(--sp-6);
max-width: 540px;
position: relative;
z-index: 1;
}
.final-card .btn-primary {
position: relative;
z-index: 1;
}
.final-cta-action {
display: flex;
justify-content: center;
margin: var(--sp-5) 0 var(--sp-2);
position: relative;
z-index: 1;
}
.final-fineprint {
margin-top: var(--sp-4) !important;
font-size: 12px !important;
color: var(--ink-soft) !important;
letter-spacing: 0.04em;
}
/* ╔══════════════════════════════════════════════════════════════
║ FOOTER
╚══════════════════════════════════════════════════════════════ */
.footer {
padding: var(--sp-8) 0 var(--sp-6);
background: rgba(0,0,0,0.4);
border-top: 1px solid var(--border);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: var(--sp-6);
margin-bottom: var(--sp-7);
}
@media (max-width: 900px) {
.footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 600px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
.footer-grid { grid-template-columns: 1fr; }
}
.footer-brand .brand-wordmark { font-size: 22px; }
.footer-brand p {
font-size: 14px;
color: var(--ink-mid);
margin: var(--sp-3) 0 0;
max-width: 320px;
}
.footer-made {
font-size: 12.5px !important;
color: var(--ink-soft) !important;
margin-top: var(--sp-3) !important;
}
.footer-made .heart {
color: #FF4D88;
animation: heart-beat 1.4s ease-in-out infinite;
display: inline-block;
}
@keyframes heart-beat {
0%, 50%, 100% { transform: scale(1); }
20%, 60% { transform: scale(1.18); }
}
.footer-col h4 {
font-family: 'Outfit', sans-serif;
font-weight: 800;
font-size: 12px;
letter-spacing: 0.18em;
color: var(--ink-soft);
margin: 0 0 var(--sp-3);
text-transform: uppercase;
}
.footer-col a {
display: block;
font-size: 14px;
color: var(--ink-mid);
padding: 4px 0;
transition: color .15s var(--ease-out);
}
.footer-col a:hover { color: var(--ink); }
.footer-bottom {
display: flex;
justify-content: center;
gap: 8px;
padding-top: var(--sp-5);
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--ink-soft);
}
.footer-dot { opacity: 0.5; }
/* ╔══════════════════════════════════════════════════════════════
║ REDUCED MOTION
╚══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.reveal { opacity: 1; transform: none; }
}
/* ╔══════════════════════════════════════════════════════════════
║ MOBILE POLISH — proportional CTAs, refined spacing, edge fades
║
║ Lives at the end of the cascade so these rules win on phones
║ without us having to thread responsive sizing into every
║ component block above. Scales:
║ • Button padding + font on tablet + phone widths so the
║ primary CTA stops feeling like a billboard and sits
║ proportionally to the rest of the page
║ • Hero CTAs stack full-width-ish on narrow phones with the
║ primary capped at 360px (touch-friendly without spanning
║ ridiculously wide on landscape)
║ • Final-card padding tightens so the "Start Using" surface
║ doesn\'t consume half the phone viewport
║ • Nav CTA gets a compact form on phones so it sits naturally
║ next to the burger without overlapping
║ • Screenshots strip gets a soft mask-image fade on both edges
║ so users see "more this way" instead of a hard cut
║ • Hero vertical padding tightens + drops the 100vh minimum
║ so the headline doesn\'t sit in the centre of the phone
╚══════════════════════════════════════════════════════════════ */
/* ── Tablet (≤ 800px) — first sizing reduction ─────────────────── */
@media (max-width: 800px) {
.btn-primary {
padding: 14px 22px;
font-size: 14.5px;
}
.btn-primary-xl {
padding: 16px 26px;
font-size: 15.5px;
}
.btn-secondary {
padding: 14px 20px;
font-size: 14.5px;
}
}
/* ── Phone (≤ 560px) — buttons stack full-width-ish, hero tightens
so the CTAs feel like part of the layout, not pasted on top. ── */
@media (max-width: 560px) {
.hero-ctas {
flex-direction: column;
align-items: stretch;
gap: 12px;
width: 100%;
max-width: 360px;
}
.btn-primary,
.btn-secondary,
.btn-primary-xl {
width: 100%;
max-width: 360px;
justify-content: center;
}
.btn-primary {
padding: 14px 22px;
font-size: 14.5px;
}
.btn-primary-xl {
padding: 15px 24px;
font-size: 15px;
letter-spacing: 0.005em;
}
.btn-secondary {
padding: 13px 20px;
font-size: 14px;
}
/* Nav header CTA — go compact so it nests cleanly next to the burger
instead of taking a chunky 9px×16px capsule on a 412px viewport. */
.nav-cta {
padding: 7px 12px;
font-size: 12.5px;
letter-spacing: 0;
}
/* Hero spacing — drop the 100vh minimum (kills "scroll to see more"
affordance on phones) and tighten vertical padding. */
.hero {
padding-top: 96px;
padding-bottom: 48px;
min-height: auto;
}
.hero-trust {
justify-content: center;
text-align: center;
}
.hero-trust .sep { display: none; }
.hero-trust span {
flex-basis: 100%;
text-align: center;
}
.hero-trust .dot { display: none; }
/* Eyebrow above the headline — centred on mobile so it doesn\'t look
orphaned on the left when the hero stacks vertically. */
.eyebrow {
justify-content: center;
}
.hero-copy {
text-align: center;
}
.hero-sub {
margin-left: auto;
margin-right: auto;
}
}
/* ── Final CTA card — proportional padding on phones so the card
doesn\'t take the entire phone viewport. ─────────────────────── */
@media (max-width: 640px) {
.final-cta {
padding: var(--sp-7) 0;
}
.final-card {
padding: var(--sp-7) var(--sp-5);
border-radius: 22px;
}
.final-card p {
font-size: 15.5px;
}
.final-fineprint {
font-size: 11.5px !important;
letter-spacing: 0.05em;
}
}
/* ── Screenshots strip edge-fade — visual affordance that more cards
exist past the right edge on narrow viewports. Soft 4% mask at
both ends so the leftmost / rightmost cards fade naturally
rather than getting clipped by a hard edge. ─────────────────── */
@media (max-width: 1100px) {
.screenshots-strip {
-webkit-mask-image: linear-gradient(
90deg,
transparent 0%,
#000 4%,
#000 96%,
transparent 100%
);
mask-image: linear-gradient(
90deg,
transparent 0%,
#000 4%,
#000 96%,
transparent 100%
);
}
}
/* ── Section eyebrow + heading typography on phones ─────────────── */
@media (max-width: 560px) {
.section-eyebrow {
font-size: 11px;
letter-spacing: 0.16em;
}
/* Section heads centre-align so they feel intentional on a narrow
viewport instead of left-leaning into empty space. */
.section-head {
text-align: center;
}
.section-head p {
margin-left: auto;
margin-right: auto;
}
}
/* ── Hero phone visual — slightly smaller on phones so it shares
space with the copy more gracefully. ─────────────────────────── */
@media (max-width: 560px) {
.phone, .hero-slideshow {
width: 240px;
height: 500px;
}
}
/* ── Footer — tighter columns on phones so the four-col grid
becomes a clean two-col instead of a sad single-col stack. ──── */
@media (max-width: 640px) {
.footer-grid {
grid-template-columns: 1fr 1fr !important;
gap: var(--sp-6);
}
.footer-brand {
grid-column: 1 / -1;
text-align: center;
}
.footer-brand p { max-width: none; margin-inline: auto; }
}
/* ╔══════════════════════════════════════════════════════════════
║ HERO LIVE-VERSION PILL — refinement
║
║ The pill JS-populates from moviematessocial.web.app/version.json.
║ Now reads "● v2.0.77 · LIVE" instead of just "● v2.0.77" so
║ the social signal — "this app is actively shipping, not a
║ dead landing page" — is more legible at a glance.
╚══════════════════════════════════════════════════════════════ */
.lv-sep {
opacity: 0.45;
font-weight: 600;
padding: 0 1px;
}
.lv-status {
font-weight: 900;
letter-spacing: 0.08em;
}
/* ╔══════════════════════════════════════════════════════════════
║ SECTION DIVIDERS — subtle editorial separators
║
║ A hair-thin centred gradient line at the top of every section
║ that follows another section. Visible enough to read as a
║ designed break, subtle enough to never compete with the
║ content. ::before pseudo-element avoids touching the markup.
║ Skips the first section (hero already opens the page) and
║ any explicit no-divider opt-outs.
╚══════════════════════════════════════════════════════════════ */
section { position: relative; }
section + section::before,
section + footer::before,
header + section::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(70%, 720px);
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.10) 50%,
transparent 100%
);
pointer-events: none;
}
/* Don\'t draw a divider above the hero or above sections that
already have their own visual top (e.g. the final-cta which
has a glowing card). */
.hero::before,
.final-cta::before { display: none; }
/* ╔══════════════════════════════════════════════════════════════
║ SCROLL-PROGRESS DOTS — screens-strip indicator
║
║ Sits under the horizontal screenshots strip. Shows 10 dots
║ — one per app screen. The currently-centred card gets the
║ green-filled .active dot via IntersectionObserver in app.js.
║ Click a dot → JS scrolls the strip to that card.
║
║ Hidden by default; JS adds .ss-dots-ready once the observer
║ has wired up. (Prevents Flash Of Inactive Dots if JS is slow
║ to fire.)
║
║ On phones the dots become a tighter bar with a brand-tinted
║ active state so they read as part of the page rather than a
║ separate UI widget.
╚══════════════════════════════════════════════════════════════ */
.ss-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin-top: var(--sp-5);
padding: 0 var(--sp-5);
flex-wrap: wrap;
}
.ss-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
border: 0;
padding: 0;
cursor: pointer;
transition:
background .25s var(--ease-out),
transform .25s var(--ease-out),
width .25s var(--ease-out);
position: relative;
}
.ss-dot::after {
/* Larger invisible hit-target so the dots are easy to tap on
mobile (44×44 minimum recommended) without blowing up the
visible dot size. */
content: '';
position: absolute;
inset: -10px;
}
.ss-dot:hover {
background: rgba(255, 255, 255, 0.35);
transform: scale(1.15);
}
.ss-dot.active {
background: var(--brand-green);
width: 24px;
border-radius: 999px;
box-shadow: 0 0 12px rgba(0, 200, 150, 0.45);
}
@media (max-width: 560px) {
.ss-dots { gap: 8px; margin-top: var(--sp-4); }
.ss-dot { width: 7px; height: 7px; }
.ss-dot.active { width: 20px; }
}
/* ╔══════════════════════════════════════════════════════════════
║ STICKY CTA — single persistent conversion path
║
║ Pinned to the bottom-centre of EVERY viewport (mobile,
║ tablet, desktop). Class kept as `.mobile-sticky-cta` for
║ legacy / JS-binding reasons — it's no longer mobile-only.
║
║ Hidden by default; JS in app.js slides it up after the user
║ scrolls past the hero trust signal (~ first 600 px), then
║ stays visible for the rest of the page.
║
║ STYLING — Material 3 filled-button anatomy with brand flair:
║ • Container : iridescent brand gradient (cyan ↔
║ green ↔ cyan), 200% wide, animated
║ background-position so the gradient
║ slides back and forth — a soft
║ 'holographic' hue shift
║ • Label : labelLarge equivalent (14 px Outfit
║ 800), on-container dark ink
║ • Shape : full-rounded pill (999px)
║ • Elevation : M3 level 3 — small ambient + bigger
║ spread shadow + multi-colour brand
║ glow (cyan + green)
║ • Shimmer : ::before pseudo-element sweeps a
║ translucent diagonal highlight across
║ the surface every 4 s (the 'flare' /
║ attention-pull)
║ • State layers : hover lifts + intensifies the glow,
║ focus-visible draws a 3 px brand
║ outline ring, :active scales 0.96 +
║ dampens the shimmer
║ • Safe-area inset : iOS home-indicator respected via
║ env(safe-area-inset-bottom)
║ • Reduced motion : kills the iridescent + shimmer
║ animations, keeps the still gradient
╚══════════════════════════════════════════════════════════════ */
.mobile-sticky-cta {
position: fixed;
left: 50%;
/* iOS home-indicator safe-area handled via `bottom` only — the
previous rule duplicated env(safe-area-inset-bottom) on BOTH
padding-bottom AND margin-bottom, which on PWAs read as a chunky
bottom-padded button visually offset from the text baseline.
Single source of truth here keeps the pill symmetric. */
bottom: calc(18px + env(safe-area-inset-bottom, 0px));
transform: translate(-50%, 130%);
z-index: 100;
display: inline-flex;
align-items: center;
gap: 10px;
/* Wider + less vertical — pill now reads as a horizontal action
bar rather than a chunky chip. 11px vertical sits the text
baseline visually centred; line-height:1 stops the Outfit
font's intrinsic line-height from adding ghost vertical space
below the text. */
padding: 11px 42px;
line-height: 1;
/* Iridescent surface: 200%-wide multi-stop gradient so the
`iridescentShift` animation can slide it left + right for the
holographic hue-shift effect. Three-stop palette (cyan, green,
cyan) keeps it brand-pure — no off-palette purple or pink
fakery. */
background: linear-gradient(
135deg,
var(--brand-cyan) 0%,
var(--brand-green) 35%,
var(--brand-cyan) 65%,
var(--brand-green) 100%
);
background-size: 220% 220%;
background-position: 0% 50%;
animation: iridescentShift 7s ease-in-out infinite;
color: #001416;
font-family: 'Outfit', sans-serif;
font-weight: 800;
font-size: 14px;
letter-spacing: 0.02em;
border-radius: 999px;
text-decoration: none;
/* M3 level-3 elevation, layered with brand glow. Order matters:
ambient shadow first (small, sharp), then bigger softer
shadow for depth, then two coloured brand halos (cyan + green)
for the 'this is alive' signal, then a 1-px inset rim that
reads as a glass edge under the label. */
box-shadow:
0 1px 3px 1px rgba(0, 0, 0, 0.15),
0 4px 14px rgba(0, 0, 0, 0.40),
0 0 22px rgba(23, 184, 194, 0.38),
0 0 36px rgba(0, 200, 150, 0.22),
0 0 0 1px rgba(255, 255, 255, 0.12) inset;
/* Clip the shimmer ::before so it doesn't bleed past the pill
edge. isolate gives the pseudo-element its own stacking
context so z-index ordering is predictable. */
overflow: hidden;
isolation: isolate;
transition:
transform .35s cubic-bezier(0.16, 1, 0.3, 1),
opacity .25s ease,
box-shadow .25s ease;
opacity: 0;
}
/* Shimmer sweep — a soft white diagonal highlight that travels
left-to-right across the pill surface every 4 s. Pauses (sits
off-screen at the right edge) for 60 % of the cycle before
resetting, so the eye sees it as an occasional 'flash' rather
than constant motion. */
.mobile-sticky-cta::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
115deg,
rgba(255, 255, 255, 0) 38%,
rgba(255, 255, 255, 0.55) 50%,
rgba(255, 255, 255, 0) 62%
);
transform: translateX(-120%);
pointer-events: none;
z-index: 1;
border-radius: inherit;
animation: shimmerSweep 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* Keep label + arrow above the shimmer overlay. */
.msc-label,
.msc-arrow {
position: relative;
z-index: 2;
}
@keyframes iridescentShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes shimmerSweep {
0% { transform: translateX(-120%); }
40% { transform: translateX(120%); }
100% { transform: translateX(120%); }
}
.mobile-sticky-cta[hidden] { display: none; }
.mobile-sticky-cta.is-revealed {
transform: translate(-50%, 0);
opacity: 1;
}
/* M3 hover state layer — small lift + intensified brand glow.
The iridescent + shimmer animations continue running underneath. */
.mobile-sticky-cta:hover {
box-shadow:
0 2px 6px 2px rgba(0, 0, 0, 0.16),
0 8px 22px rgba(0, 0, 0, 0.48),
0 0 30px rgba(23, 184, 194, 0.50),
0 0 50px rgba(0, 200, 150, 0.32),
0 0 0 1px rgba(255, 255, 255, 0.16) inset;
}
/* M3 focus-visible — 3 px outline ring offset by 2 px, in brand
green. Keyboard-only; doesn\'t fire on mouse click. */
.mobile-sticky-cta:focus-visible {
outline: 3px solid var(--brand-green);
outline-offset: 3px;
}
/* M3 pressed state — slight scale-down. */
.mobile-sticky-cta:active {
transform: translate(-50%, 0) scale(0.96);
}
/* Subtle arrow nudge on hover — read as 'go this way'. */
.msc-arrow {
transition: transform .25s var(--ease-out);
}
.mobile-sticky-cta:hover .msc-arrow {
transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
.mobile-sticky-cta {
animation: none;
background-position: 50% 50%;
transition: opacity .15s linear;
}
.mobile-sticky-cta::before {
animation: none;
opacity: 0;
}
}
/* ╔══════════════════════════════════════════════════════════════
║ LETTERBOXD IMPORT — feature-card art
║
║ Three-step horizontal flow: CSV file → arrow → moviemates
║ star icon. Reads as a literal "your stuff goes from there to
║ here" visual. Letterboxd-orange tag (#FF8000) on the chip
║ signals "we play nice with where you came from" — not a
║ competitive jab.
╚══════════════════════════════════════════════════════════════ */
.feature-art-import {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 8px;
background: rgba(255, 128, 0, 0.06);
border: 1px solid rgba(255, 128, 0, 0.20);
border-radius: 12px;
}
.import-csv {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
}
.import-csv-icon {
font-family: 'Outfit', sans-serif;
font-weight: 900;
font-size: 11px;
letter-spacing: 0.05em;
color: #FF8000;
background: rgba(255, 128, 0, 0.14);
border: 1px solid rgba(255, 128, 0, 0.45);
border-radius: 6px;
padding: 7px 8px;
flex-shrink: 0;
}
.import-csv-meta {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.import-csv-meta b {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 12px;
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.import-csv-meta i {
font-style: normal;
font-size: 10.5px;
color: var(--ink-mid);
}
.import-arrow {
font-family: 'Outfit', sans-serif;
font-weight: 900;
font-size: 18px;
color: var(--ink-soft);
flex-shrink: 0;
}
.import-target {
display: flex;
align-items: center;
gap: 6px;
background: rgba(23, 184, 194, 0.10);
border: 1px solid rgba(23, 184, 194, 0.32);
border-radius: 8px;
padding: 6px 8px;
flex-shrink: 0;
}
.import-target-label {
font-family: 'Outfit', sans-serif;
font-weight: 800;
font-size: 11px;
color: var(--brand-cyan);
letter-spacing: 0.005em;
white-space: nowrap;
}
/* ╔══════════════════════════════════════════════════════════════
║ TICKETS · FOUR PATHS — deep-dive sub-section
║
║ Sits between the Features grid and the Screens showcase.
║ Four numbered path cards (Snap · Paste · Drag · Share) that
║ mirror the social-campaign deep-dive on ticket scanning
║ (Instagram posts 11-14). Same section-head pattern as the
║ rest of the site for visual continuity.
╚══════════════════════════════════════════════════════════════ */
.ticket-paths-section {
padding: var(--sp-9) 0 var(--sp-8);
position: relative;
}
.ticket-paths-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-4);
margin-top: var(--sp-6);
}
@media (max-width: 960px) {
.ticket-paths-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 560px) {
.ticket-paths-grid {
grid-template-columns: 1fr;
gap: var(--sp-3);
}
}
.ticket-path {
background: var(--bg-card);
border: 1px solid var(--border-strong);
border-radius: 18px;
padding: var(--sp-5) var(--sp-4);
display: flex;
flex-direction: column;
gap: var(--sp-2);
transition: transform .25s var(--ease-out), border-color .25s var(--ease-out);
position: relative;
}
.ticket-path:hover {
transform: translateY(-3px);
border-color: rgba(255, 112, 67, 0.4);
}
.ticket-path-icon {
width: 44px;
height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
margin-bottom: var(--sp-2);
}
.ticket-path-icon svg {
width: 22px;
height: 22px;
}
.ticket-path-icon-1 {
background: linear-gradient(135deg, #17B8C2, #00C896);
box-shadow: 0 0 18px rgba(23, 184, 194, 0.25);
}
.ticket-path-icon-2 {
background: linear-gradient(135deg, #FF7043, #FFAA00);
box-shadow: 0 0 18px rgba(255, 112, 67, 0.25);
}
.ticket-path-icon-3 {
background: linear-gradient(135deg, #7E57C2, #5C9DFF);
box-shadow: 0 0 18px rgba(126, 87, 194, 0.25);
}
.ticket-path-icon-4 {
background: linear-gradient(135deg, #EC407A, #FF7043);
box-shadow: 0 0 18px rgba(236, 64, 122, 0.25);
}
.ticket-path-step {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--ink-soft);
}
.ticket-path h3 {
font-family: 'Outfit', sans-serif;
font-weight: 800;
font-size: 17px;
letter-spacing: -0.005em;
margin: 0;
color: var(--ink);
}
.ticket-path p {
font-size: 13.5px;
color: var(--ink-mid);
margin: 0;
line-height: 1.5;
}
/* ╔══════════════════════════════════════════════════════════════
║ SEARCH feature card — mini-phone with autoplay-muted demo
║ video inside + bulleted feature list above
║
║ The card uses .feature-large because the video is a 9:16
║ portrait demo that benefits from a wider feature-art slot.
║ Video sits inside a 180×320 phone shell at the right of the
║ card — same visual vocabulary as the SQUAD POLLS mini-phone
║ + the screens-showcase phones. Bullet list above gives the
║ feature its concrete scope (films / mates / destinations /
║ smart picks) without bloating the body paragraph.
╚══════════════════════════════════════════════════════════════ */
.search-bullets {
list-style: none;
margin: var(--sp-3) 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.search-bullets li {
font-size: 13.5px;
color: var(--ink-mid);
padding-left: 18px;
position: relative;
line-height: 1.5;
}
.search-bullets li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
width: 6px;
height: 6px;
border-radius: 50%;
background: linear-gradient(135deg, #00BCD4, #00C896);
box-shadow: 0 0 6px rgba(0, 188, 212, 0.6);
}
.search-bullets li b {
color: var(--ink);
font-family: 'Outfit', sans-serif;
font-weight: 800;
margin-right: 4px;
}
.feature-art-search {
display: flex;
justify-content: center;
align-items: center;
padding: 4px 0;
}
.search-phone-mini {
position: relative;
width: 180px;
height: 320px;
background: linear-gradient(145deg, #1a1f2a, #0f1218);
border-radius: 26px;
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 4px;
box-shadow:
0 12px 30px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
0 0 28px rgba(0, 188, 212, 0.18);
transition: transform .25s var(--ease-out);
}
.feature:hover .search-phone-mini {
transform: translateY(-3px);
}
.search-phone-mini-notch {
position: absolute;
top: 4px;
left: 50%;
transform: translateX(-50%);
width: 56px;
height: 14px;
background: #0a0c10;
border-radius: 0 0 10px 10px;
z-index: 2;
}
.search-phone-mini-screen {
width: 100%;
height: 100%;
background: #0c0e12;
border-radius: 22px;
overflow: hidden;
position: relative;
}
.search-phone-mini-video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
border-radius: 22px;
}
/* ╔══════════════════════════════════════════════════════════════
║ PHONE INTERLUDES — break up text-dense stretches
║
║ Two-column bands inserted between Vibe / Built-For / Features
║ to break the text concentration. Each carries a single phone
║ mockup with a real app screenshot + a punchy headline-and-sub
║ pulled from the social campaign voice.
║
║ Layout: 1fr 1fr grid at desktop. Alternating phone-left /
║ phone-right pattern across interludes (grid-reverse class on
║ the even ones) so the visual rhythm zigzags down the page
║ rather than always landing the phone on the same side.
║
║ Mobile (≤ 760px): collapses to single column with the phone
║ on top so the visual lands before the copy on a small screen.
╚══════════════════════════════════════════════════════════════ */
.phone-interlude {
padding: var(--sp-9) 0;
position: relative;
overflow: hidden;
}
.phone-interlude-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-8);
align-items: center;
}
.phone-interlude-grid-reverse .phone-interlude-visual { order: 2; }
.phone-interlude-grid-reverse .phone-interlude-copy { order: 1; }
@media (max-width: 760px) {
.phone-interlude { padding: var(--sp-7) 0; }
.phone-interlude-grid,
.phone-interlude-grid-reverse {
grid-template-columns: 1fr;
gap: var(--sp-5);
text-align: center;
}
.phone-interlude-grid-reverse .phone-interlude-visual,
.phone-interlude-grid-reverse .phone-interlude-copy {
order: initial;
}
}
/* Visual column ─ phone mockup centred in its grid cell, with a
soft radial brand glow behind it. */
.phone-interlude-visual {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 580px;
}
@media (max-width: 760px) {
.phone-interlude-visual { min-height: 0; }
}
.phone-interlude-glow {
position: absolute;
width: 480px;
height: 480px;
border-radius: 50%;
background: radial-gradient(
circle at center,
rgba(23, 184, 194, 0.22) 0%,
rgba(0, 200, 150, 0.10) 35%,
transparent 70%
);
filter: blur(40px);
z-index: 0;
pointer-events: none;
}
.phone-interlude-glow-2 {
background: radial-gradient(
circle at center,
rgba(255, 179, 0, 0.20) 0%,
rgba(255, 112, 67, 0.10) 35%,
transparent 70%
);
}
/* Interlude 3 — Discover. Pink/magenta to match the in-app
Discover tab accent. */
.phone-interlude-glow-3 {
background: radial-gradient(
circle at center,
rgba(236, 64, 122, 0.20) 0%,
rgba(126, 87, 194, 0.10) 35%,
transparent 70%
);
}
/* Interlude 4 — Tickets. Cyan-green brand tint (the ticket
keepsake card pulls the moviemates.social primary colours). */
.phone-interlude-glow-4 {
background: radial-gradient(
circle at center,
rgba(23, 184, 194, 0.22) 0%,
rgba(0, 200, 150, 0.12) 35%,
transparent 70%
);
}
/* Interlude 5 — Insights. Purple/blue to evoke charts +
analytics, matches the INSIGHTS feature card tag colour. */
.phone-interlude-glow-5 {
background: radial-gradient(
circle at center,
rgba(126, 87, 194, 0.22) 0%,
rgba(92, 157, 255, 0.10) 35%,
transparent 70%
);
}
/* Phone mockup itself — same dimensions as the hero phone fallback
(280×580) so the visual carries proportional weight to a "hero
moment" without being so big it feels like another hero. */
.phone-interlude-phone {
position: relative;
z-index: 1;
width: 280px;
height: 580px;
background: linear-gradient(145deg, #1a1f2a, #0f1218);
border-radius: 42px;
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 6px;
box-shadow:
0 30px 60px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.04) inset;
animation: phone-float 6s ease-in-out infinite;
}
@media (max-width: 560px) {
.phone-interlude-phone {
width: 240px;
height: 500px;
}
.phone-interlude-glow {
width: 380px;
height: 380px;
}
}
.phone-interlude-notch {
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
width: 96px;
height: 22px;
background: #0a0c10;
border-radius: 0 0 14px 14px;
z-index: 2;
}
.phone-interlude-screen {
width: 100%;
height: 100%;
background: #0c0e12;
border-radius: 36px;
overflow: hidden;
position: relative;
}
.phone-interlude-screen img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
border-radius: 36px;
display: block;
}
/* Copy column — section eyebrow + h2 + p, same typography rhythm
as a normal section-head so it reads consistently with the rest
of the page. */
.phone-interlude-copy {
display: flex;
flex-direction: column;
gap: var(--sp-3);
max-width: 480px;
}
.phone-interlude-grid-reverse .phone-interlude-copy {
margin-left: auto;
}
@media (max-width: 760px) {
.phone-interlude-copy,
.phone-interlude-grid-reverse .phone-interlude-copy {
max-width: 540px;
margin: 0 auto;
align-items: center;
}
}
.phone-interlude-copy h2 {
font-family: 'Outfit', sans-serif;
font-weight: 900;
font-size: clamp(28px, 4vw, 44px);
line-height: 1.05;
letter-spacing: -0.022em;
margin: 0;
color: var(--ink);
}
.phone-interlude-copy p {
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.6;
color: var(--ink-mid);
margin: 0;
}
/* ╔══════════════════════════════════════════════════════════════
║ HERO SOCIAL — above-the-fold Instagram chip
║
║ Sits in the hero column directly below the trust signal so
║ visitors discover the IG channel without scrolling. Slightly
║ lighter / smaller than the footer chip — the hero already has
║ enough visual weight (headline + sub + trust signal + demo
║ video on the right) and this should read as a quiet invite,
║ not another major action.
╚══════════════════════════════════════════════════════════════ */
.hero-social {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: var(--sp-4);
padding: 7px 14px 7px 11px;
background: linear-gradient(
135deg,
rgba(236, 64, 122, 0.10),
rgba(255, 112, 67, 0.06)
);
border: 1px solid rgba(236, 64, 122, 0.28);
border-radius: 999px;
text-decoration: none;
color: var(--ink);
font-size: 12.5px;
letter-spacing: 0.005em;
transition:
transform .2s var(--ease-out),
background .2s var(--ease-out),
border-color .2s var(--ease-out);
}
.hero-social:hover {
transform: translateY(-1px);
background: linear-gradient(
135deg,
rgba(236, 64, 122, 0.18),
rgba(255, 112, 67, 0.10)
);
border-color: rgba(236, 64, 122, 0.55);
}
.hero-social-icon {
width: 16px;
height: 16px;
color: #EC407A;
flex-shrink: 0;
}
.hero-social b {
font-family: 'Outfit', sans-serif;
font-weight: 800;
color: var(--ink);
margin: 0 2px;
}
.hero-social > span:not(.hero-social-arrow) {
color: var(--ink-mid);
}
.hero-social-arrow {
color: #EC407A;
font-weight: 700;
margin-left: 2px;
transition: transform .2s var(--ease-out);
font-size: 13px;
}
.hero-social:hover .hero-social-arrow {
transform: translateX(3px);
}
@media (max-width: 560px) {
.hero-social {
font-size: 12px;
padding: 6px 12px 6px 10px;
/* Centre-align in the centred mobile hero */
align-self: center;
}
}
/* ── Final-CTA secondary follow moment — converts scrolled-through
visitors into Instagram followers without competing with the
primary "Open the app" action. Sits below a hairline divider in
the final card. ── */
.final-follow {
margin-top: var(--sp-5);
padding-top: var(--sp-4);
border-top: 1px solid rgba(255, 255, 255, 0.10);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-3);
position: relative;
z-index: 1;
}
.final-follow-label {
font-size: 14px;
line-height: 1.45;
color: var(--ink-mid);
max-width: 30rem;
}
.final-social {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 10px 20px;
border-radius: 999px;
background: linear-gradient(
135deg,
rgba(236, 64, 122, 0.16),
rgba(255, 112, 67, 0.10)
);
border: 1px solid rgba(236, 64, 122, 0.42);
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 15px;
color: var(--ink);
transition: transform .2s var(--ease-out),
background .2s var(--ease-out),
border-color .2s var(--ease-out);
}
.final-social:hover {
transform: translateY(-1px);
background: linear-gradient(
135deg,
rgba(236, 64, 122, 0.26),
rgba(255, 112, 67, 0.14)
);
border-color: rgba(236, 64, 122, 0.65);
}
.final-social-icon {
width: 18px;
height: 18px;
color: #EC407A;
flex-shrink: 0;
}
.final-social b {
font-weight: 800;
}
/* ╔══════════════════════════════════════════════════════════════
║ FOOTER SOCIAL — @moviemates.social on Instagram
║
║ Subtle chip-style link in the footer-brand block. Reads as
║ brand-pink-tinted to evoke Instagram's gradient without
║ ripping their logo colours wholesale. Hover lifts the row
║ slightly + intensifies the tint.
╚══════════════════════════════════════════════════════════════ */
.footer-social {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: var(--sp-3);
padding: 8px 14px 8px 10px;
background: linear-gradient(
135deg,
rgba(236, 64, 122, 0.10),
rgba(255, 112, 67, 0.06)
);
border: 1px solid rgba(236, 64, 122, 0.30);
border-radius: 999px;
text-decoration: none;
color: var(--ink);
font-size: 13px;
transition:
transform .2s var(--ease-out),
background .2s var(--ease-out),
border-color .2s var(--ease-out);
}
.footer-social:hover {
transform: translateY(-1px);
background: linear-gradient(
135deg,
rgba(236, 64, 122, 0.18),
rgba(255, 112, 67, 0.10)
);
border-color: rgba(236, 64, 122, 0.55);
}
.footer-social-icon {
width: 18px;
height: 18px;
color: #EC407A;
flex-shrink: 0;
}
.footer-social b {
font-family: 'Outfit', sans-serif;
font-weight: 800;
color: var(--ink);
margin-right: 2px;
}
.footer-social span {
color: var(--ink-mid);
}