/* ============================================================ CineMatch landing — v3 Real-WhatsApp-styled phone mockups + tighter footer ============================================================ */ /* ---------- Tokens ---------- */ :root { --bg: #0a0a0a; --bg-elev: #141414; --bg-elev-2: #1c1c1c; --fg: #f5f5f3; --fg-muted: #b9b8b3; --fg-faint: #6b6a66; --accent: #d4a574; --accent-soft: #e8c89a; --line: #262626; /* WhatsApp dark-mode reference colors */ --wa-bg: #0b141a; --wa-header: #202c33; --wa-bubble-in: #1f2c33; --wa-bubble-out:#005c4b; --wa-text: #e9edef; --wa-text-mute: #8696a0; --wa-card-bg: #182229; --wa-btn-bg: rgba(255, 255, 255, 0.04); --wa-btn-line: #2a3942; --wa-divider: rgba(134, 150, 160, 0.18); --max: 1140px; --radius: 14px; --radius-lg: 20px; --shadow-strong:0 18px 60px rgba(0, 0, 0, 0.55); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* ---------- Reset-ish ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* ---------- Layout ---------- */ .container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(10, 10, 10, 0.85); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line); } .site-header__row { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; } .brand { display: inline-flex; align-items: center; gap: 12px; font-size: 26px; letter-spacing: 1.5px; /* Cinzel — Roman-engraved serif. Reads as movie-title-card / premium cinematic poster type. Falls back to Inter on load fail. */ font-family: 'Cinzel', 'Inter', serif; font-weight: 600; text-transform: uppercase; } .brand__word { line-height: 1; transform: translateY(2px); } .brand__mark { width: 52px; height: 52px; object-fit: contain; display: block; } .site-nav { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; color: var(--fg-muted); } .site-nav a:not(.btn):hover { color: var(--fg); } /* Mobile action group (bare-glyph WhatsApp + framed hamburger). Hidden on desktop. */ .nav-mobile-actions { display: none; align-items: center; gap: 14px; } /* Bare WhatsApp glyph — no border, no fill, just the gold icon. The icon's distinctive silhouette carries the affordance. */ .nav-wa-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--accent); padding: 4px; transition: color 200ms var(--ease), transform 200ms var(--ease); } .nav-wa-icon:hover { color: var(--accent-soft); transform: translateY(-1px); } .nav-wa-icon svg { width: 38px; height: 38px; fill: currentColor; } /* Hamburger toggle — hidden on desktop, shown on mobile. Framed in a square gold-bordered tile for a premium feel (instead of a bare icon button). The gets .nav-open when the menu is open (toggled by JS); CSS swaps between menu / close icons and slides the drawer down. */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; background: rgba(212, 165, 116, 0.06); border: 1px solid rgba(212, 165, 116, 0.4); padding: 0; cursor: pointer; color: var(--accent); border-radius: 10px; transition: background 200ms var(--ease), border-color 200ms var(--ease); } .nav-toggle:hover { background: rgba(212, 165, 116, 0.12); border-color: var(--accent); } .nav-toggle__icon { width: 26px; height: 26px; display: block; } .nav-toggle__icon--close { display: none; } body.nav-open .nav-toggle__icon--open { display: none; } body.nav-open .nav-toggle__icon--close { display: block; } /* Drawer panel — collapsed by default, slides down on .nav-open. Solid surface so it sits cleanly over the page content. */ .nav-drawer { display: none; flex-direction: column; gap: 16px; padding: 20px 24px 28px; background: var(--bg); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); } .nav-drawer__link { font-size: 17px; font-weight: 600; color: var(--fg); padding: 12px 4px; border-bottom: 1px solid var(--line); } .nav-drawer__link:last-of-type { border-bottom: 0; } .nav-drawer__cta { justify-content: center; margin-top: 4px; } /* Mobile-only floating action button — jumps to the final CTA. Soft styling: small, semi-transparent dark surface with a faint gold outline. Reads as a utility nudge, not a marketing CTA. */ .scroll-fab { display: none; position: fixed; bottom: 16px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(20, 20, 20, 0.7); border: 1px solid rgba(212, 165, 116, 0.3); color: var(--accent); align-items: center; justify-content: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 40; transition: background 200ms var(--ease), border-color 200ms var(--ease); } .scroll-fab:hover { background: rgba(28, 22, 12, 0.85); border-color: var(--accent); } .scroll-fab svg { width: 16px; height: 16px; } @media (max-width: 640px) { /* On mobile, switch from sticky → fixed so iOS Safari reliably pins the navbar to the top. Body gets equivalent top padding so content doesn't hide under the fixed bar. The transform + will-change forces the browser to paint the header on its own compositor layer so iOS doesn't temporarily hide it during scroll-direction transitions. */ .site-header { position: fixed; top: 0; left: 0; right: 0; transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform; } body { padding-top: 76px; } /* Hide the desktop nav (text links + pill CTA); the bare WhatsApp glyph + framed hamburger take over. */ .site-nav { display: none; } .scroll-fab { display: inline-flex; } .nav-mobile-actions { display: inline-flex; gap: 18px; } .nav-toggle { display: inline-flex; } /* Suppress deliberate line breaks meant for desktop hero/headlines; the text flows naturally on small screens. */ .hide-mobile { display: none; } /* Navbar: tighter left edge so the brand block hugs the left visibly more than the right action group hugs the right. */ .site-header .container { padding-left: 8px; padding-right: 18px; } /* Tighter brand gap on mobile so logo + wordmark feel like one unit. */ .brand { gap: 10px; } /* Drawer is rendered but collapsed; opens via .nav-open on body. */ body.nav-open .nav-drawer { display: flex; } /* Logo size tracks desktop closely on mobile too — it's the primary brand identity and shouldn't feel undersized. */ .brand__mark { width: 56px; height: 56px; } /* Cinzel wordmark stays visible but slightly smaller so it fits comfortably without crowding the hamburger. */ .brand { font-size: 22px; letter-spacing: 1.2px; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; border-radius: 999px; padding: 12px 22px; border: 1px solid transparent; transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), background 220ms var(--ease), color 220ms var(--ease); cursor: pointer; white-space: nowrap; font-family: inherit; font-size: 15px; } .btn__wa-icon { width: 18px; height: 18px; flex-shrink: 0; } .btn--primary { background: var(--accent); color: #1a1206; box-shadow: 0 6px 20px rgba(212, 165, 116, 0.28); } .btn--primary:hover { background: var(--accent-soft); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(212, 165, 116, 0.38); } .btn--ghost { background: transparent; color: var(--fg); border-color: var(--fg-faint); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); } .btn--small { padding: 8px 14px; font-size: 13px; } .btn--small .btn__wa-icon { width: 14px; height: 14px; } .btn--lg { padding: 14px 26px; font-size: 16px; } .btn--lg .btn__wa-icon { width: 20px; height: 20px; } .btn--xl { padding: 18px 32px; font-size: 18px; } .btn--xl .btn__wa-icon { width: 22px; height: 22px; } /* ---------- Sections ---------- */ section { padding: 88px 0; } @media (max-width: 720px) { section { padding: 36px 0; } } .section-title { font-size: clamp(28px, 4.4vw, 42px); font-weight: 700; line-height: 1.15; letter-spacing: -0.6px; margin: 0 0 36px; text-align: center; } .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; } .accent { color: var(--accent); } /* ============================================================ Hero ============================================================ */ .hero { padding: 80px 0 72px; position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: -20% -10% auto auto; width: 80%; height: 80%; background: radial-gradient(closest-side, rgba(212, 165, 116, 0.18), transparent 70%); pointer-events: none; } /* Film-reel strip background — faint diagonal gold band with sprocket-hole perforations evoking 35mm film. Sits behind the hero content, low opacity so it doesn't fight the copy. SVG is inlined as data: URI to avoid an extra request. */ .hero::after { content: ""; position: absolute; top: 50%; left: -10%; width: 120%; height: 130px; transform: translateY(-50%) rotate(-8deg); background-image: url("data:image/svg+xml;utf8,"); background-repeat: repeat-x; background-size: 200px 130px; opacity: 0.55; pointer-events: none; z-index: 0; } /* Make sure hero content sits above the film strip */ .hero__inner { z-index: 1; } .hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; grid-template-rows: auto auto; column-gap: 64px; row-gap: 0; align-items: center; position: relative; } .hero__copy { grid-column: 1; grid-row: 1; align-self: end; } .hero__bullets { grid-column: 1; grid-row: 2; align-self: start; margin-top: 13px; } .hero__visual { grid-column: 2; grid-row: 1 / span 2; align-self: center; } .hero__copy { max-width: 580px; } .hero__headline { font-size: clamp(36px, 5.2vw, 56px); font-weight: 800; line-height: 1.05; letter-spacing: -1.2px; margin: 0 0 22px; } .hero__sub { font-size: clamp(16px, 1.8vw, 18px); color: var(--fg-muted); max-width: 520px; margin: 0 0 28px; } .hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; } /* Stacked checkmark bullets — 3 vertical promises under the CTAs. Each line: small gold check + muted body text. On desktop the bullets sit in column 1 row 2 of the hero grid so they align under the copy column; on mobile they reorder via flex below. */ .hero__bullets-anchor { /* (legacy hook, currently unused) */ } .hero__bullets { grid-column: 1; grid-row: 2; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15.5px; font-weight: 500; color: var(--fg-muted); } .hero__bullets li { display: flex; align-items: baseline; gap: 10px; } .hero__check { color: var(--accent); font-weight: 700; flex-shrink: 0; font-size: 14px; } @media (max-width: 920px) { .hero__inner { grid-template-columns: 1fr; gap: 40px; } .hero__visual { order: 2; } } @media (max-width: 720px) { .hero { padding: 32px 0 40px; } /* Drop the secondary "See how it works" CTA on mobile. Primary CTA gets a wider min-width so it carries presence on phone screens without going full-width. Centered horizontally. */ .hero__cta { justify-content: center; } .hero__cta .btn--ghost { display: none; } .hero__cta .btn--primary { min-width: 280px; justify-content: center; } /* Final-CTA section button matches the hero CTA width on mobile. Higher specificity (.start__row prefix) so this wins against the desktop .start__btn rule defined later in source order. */ .start__row .start__btn { min-width: 280px; } /* On mobile only: switch hero from grid to a single-column flex so we can reorder children. Sequence becomes: 1. copy (eyebrow + headline + sub + CTA) 2. phone visual 3. trust bullets Bullets land BELOW the phone instead of immediately under CTAs. */ .hero__inner { display: flex; flex-direction: column; gap: 32px; } .hero__copy { order: 1; } .hero__visual { order: 2; } .hero__bullets { order: 3; margin-top: 0; /* Center-align the bullet block on mobile (each bullet stays left-aligned with its own check, but the block itself is centered in the column for visual symmetry under the phone). */ align-self: center; } /* Mobile: recommendation card poster shrinks dramatically so the message + buttons all fit without the poster dominating the phone's height. Higher specificity (.hero prefix) so this wins against the desktop .wa__body--anim rule defined later in source order. */ .hero .wa__body--anim .wa-card__poster { aspect-ratio: 16 / 9; object-position: center 30%; } } .hero__visual { display: flex; justify-content: center; align-items: center; } /* ============================================================ Phone frame ============================================================ */ .phone { width: 320px; aspect-ratio: 9 / 19; background: #0a0a0a; border: 8px solid #2a2a2a; border-radius: 38px; padding: 6px; box-shadow: var(--shadow-strong), inset 0 0 0 1px #3a3a3a; position: relative; } .phone::before { content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 80px; height: 22px; background: #0a0a0a; border-radius: 12px; z-index: 5; } .phone--small { width: 248px; border-width: 6px; padding: 5px; border-radius: 30px; } .phone--small::before { width: 60px; height: 16px; top: 9px; } .phone__screen { width: 100%; height: 100%; border-radius: 30px; overflow: hidden; display: flex; flex-direction: column; } .phone--small .phone__screen { border-radius: 24px; } @media (max-width: 720px) { /* Hero phone size: 260px wide × 9:19 — sized to match the journey mini-phones (200px) +30% so it reads as the "main" phone of the page while the journey ones are clearly secondary. */ .phone { width: 260px; } .wa__body--anim { justify-content: flex-start; } /* WA header tightens on the smaller hero phone so the CineMatch name doesn't crowd the right-side video/call/more icons. Top padding bumped so the avatar/name clear the phone notch. */ .phone .wa__header { padding: 36px 10px 6px; gap: 6px; } .phone .wa__name { font-size: 12px; } .phone .wa__status { font-size: 10px; } .phone .wa__avatar { width: 26px; height: 26px; font-size: 13px; } .phone .wa__icon { width: 14px; height: 14px; } .phone .wa__back { width: 14px; height: 14px; } /* Cinematic film-strip backdrop behind the phone on mobile. The hero's main ::after strip sits behind the copy area; this second strip lives behind the visual block so the phone gets its own theatrical context. */ .hero__visual { position: relative; } /* Cinematic film-strip backdrop spans the full hero width on mobile. Anchored to the .hero (not .hero__visual) so it isn't clipped by the visual's flex-center container. Sits behind the phone, tilts diagonally, slightly bigger + bolder than desktop's strip so it reads on a small screen. */ .hero__visual::before { content: ""; position: absolute; /* Anchor near the phone's vertical center. */ top: 35%; left: -50vw; right: -50vw; height: 110px; transform: rotate(-7deg); background-image: url("data:image/svg+xml;utf8,"); background-repeat: repeat-x; background-size: 180px 110px; opacity: 0.85; pointer-events: none; z-index: 0; } /* Phone renders above its strip backdrop. */ .hero__visual .phone { position: relative; z-index: 1; } } /* ============================================================ WhatsApp screen mockup ============================================================ */ .wa { background: var(--wa-bg); color: var(--wa-text); font-size: 12.5px; line-height: 1.4; position: relative; } /* Subtle dark wallpaper pattern, like real WhatsApp dark mode */ .wa::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.012) 0, transparent 30%), radial-gradient(circle at 80% 60%, rgba(255, 255, 255, 0.012) 0, transparent 35%); pointer-events: none; } /* Header */ .wa__header { display: flex; align-items: center; gap: 10px; padding: 32px 14px 8px; background: var(--wa-header); position: relative; z-index: 2; } .phone--small .wa__header { padding: 26px 10px 6px; gap: 8px; } .wa__back { width: 18px; height: 18px; fill: var(--wa-text); flex-shrink: 0; } .wa__avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #2a1f15, var(--accent)); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .phone--small .wa__avatar { width: 28px; height: 28px; font-size: 14px; } .wa__title { flex: 1; min-width: 0; } .wa__name { font-size: 14px; font-weight: 600; color: var(--wa-text); } .phone--small .wa__name { font-size: 13px; } .wa__status { font-size: 11px; color: var(--wa-text-mute); } .wa__icon { width: 18px; height: 18px; fill: var(--wa-text); opacity: 0.85; flex-shrink: 0; } .wa__header--small .wa__back, .wa__header--small .wa__icon { display: none; } /* Body */ .wa__body { flex: 1; padding: 10px 8px 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; position: relative; z-index: 1; } /* Bubbles */ .wa__bubble { position: relative; max-width: 88%; padding: 7px 10px 5px; border-radius: 8px; font-size: 12.5px; line-height: 1.4; color: var(--wa-text); box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13); } .phone--small .wa__bubble { font-size: 11.5px; padding: 6px 9px 4px; } .wa__bubble--in { background: var(--wa-bubble-in); align-self: flex-start; border-bottom-left-radius: 0; } .wa__bubble--out { background: var(--wa-bubble-out); align-self: flex-end; border-bottom-right-radius: 0; } /* WhatsApp-style triangle tail — a small wedge sticking out below the bubble corner, pointing down toward where the avatar would be. Built with a CSS-triangle on a ::before; color matches the bubble. */ .wa__bubble--in::before, .wa__bubble--out::before { content: ""; position: absolute; bottom: 0; width: 8px; height: 13px; pointer-events: none; } .wa__bubble--in::before { left: -7px; background: var(--wa-bubble-in); clip-path: polygon(100% 0, 100% 100%, 0 100%); border-bottom-left-radius: 2px; } .wa__bubble--out::before { right: -7px; background: var(--wa-bubble-out); clip-path: polygon(0 0, 100% 100%, 0 100%); border-bottom-right-radius: 2px; } .wa__bubble strong { font-weight: 700; } /* Bubble with attached CTA button — message body on top, divider, then a centered quick-reply button. Same shape as the recommendation card-bubble (one container, one tail), used for the welcome message and any future text-bubble + single quick-reply combos. No overflow:hidden here — that would clip the ::before tail. The inner body + cta divs handle their own clipping via border-radius. */ .wa__bubble--with-cta { padding: 0; width: 78%; max-width: 78%; background: var(--wa-bubble-in); } .wa-bubble__body { padding: 9px 12px 7px; border-radius: 8px 8px 0 0; } .wa-bubble__cta { border-top: 1px solid var(--wa-divider); border-radius: 0 0 8px 0; /* bottom-right rounds; bottom-left flat for tail */ } .wa-bubble__cta-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; font-size: 13px; font-weight: 600; color: #53bdeb; cursor: pointer; } /* Inline list-picker preview (rendered after a list-trigger CTA to visualize what taps are available; real WhatsApp shows this as a modal sheet slide-up). Same dark theme, separator between rows. */ .wa-list { border-top: 1px solid var(--wa-divider); display: flex; flex-direction: column; } .wa-list__row { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-top: 1px solid var(--wa-divider); font-size: 13px; color: var(--wa-text); } .wa-list__row:first-child { border-top: 0; } .wa-list__label { font-weight: 500; } .wa-list__row--done .wa-list__label { color: #53bdeb; font-weight: 600; text-align: center; width: 100%; } /* Card-bubble: a bigger bubble that holds the recommendation card. Zero internal padding so the card-body and buttons share one continuous background — no two-tone strip between them. */ .wa__bubble--card { padding: 0; width: 84%; max-width: 84%; background: var(--wa-card-bg); /* Same shape as a regular incoming bubble: 8px corners, flat bottom- left, plus a triangle tail (handled via ::before below). */ border-radius: 8px; border-bottom-left-radius: 0; /* overflow:hidden would clip the ::before tail, so we don't set it here — child elements (poster, buttons) handle their own clipping via their own border-radius. */ } /* Override the generic incoming-bubble tail color: the card-bubble has a different background (--wa-card-bg), so its tail must match. */ .wa__bubble--card::before { background: var(--wa-card-bg); } .wa__bubble--card .wa-card { border-radius: 0; } /* Image fills edge-to-edge with the bubble. Top corners match the bubble radius so no card-bg sliver peeks through the curve. */ .wa__bubble--card .wa-card__poster { border-radius: 8px 8px 0 0; display: block; margin: 0; } /* Typing indicator in the chat header — accurate to real WhatsApp. Two labels absolutely overlaid in .wa__status; we cross-fade their opacity. Reliable cross-browser (display-as-keyframe is flaky). */ .wa__status { position: relative; min-height: 14px; } .wa__status-online, .wa__status-typing { position: absolute; inset: 0; white-space: nowrap; } .wa__status-online { opacity: 1; } .wa__status-typing { opacity: 0; color: #25d366; /* WhatsApp green for live state */ font-style: italic; } .wa__typing-dots { display: inline-flex; gap: 1.5px; margin-left: 4px; vertical-align: middle; } .wa__typing-dots span { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.4; animation: wa-typing-bounce 1.2s infinite ease-in-out; } .wa__typing-dots span:nth-child(2) { animation-delay: 0.18s; } .wa__typing-dots span:nth-child(3) { animation-delay: 0.36s; } @keyframes wa-typing-bounce { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } } /* Time inside a bubble (right-aligned) */ .wa__time { display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; color: var(--wa-text-mute); float: right; margin: 4px 0 -2px 8px; } .wa__bubble--out .wa__time { color: rgba(255, 255, 255, 0.55); } .wa__check { width: 14px; height: 10px; fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } /* ============================================================ Recommendation card inside chat bubble ============================================================ */ .wa-card { display: flex; flex-direction: column; border-radius: 6px; overflow: hidden; background: var(--wa-card-bg); } .wa-card__poster { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: linear-gradient(135deg, #2a1f15, #0a0a0a); } /* Hero phone — pull content tight to the top so the full card uses the available vertical space. Reduces dead margin under the card. */ .wa__body--anim { padding: 8px 8px 6px; gap: 15px; } /* Hero recommendation card width matches real WhatsApp template rendering (~70% of chat width). Square poster keeps things compact so all 3 quick-reply buttons stay fully inside the phone. */ .wa__body--anim .wa__bubble--card { width: 78%; max-width: 78%; } .wa__body--anim .wa-card__poster { aspect-ratio: 5 / 6; object-position: center 75%; /* Moody dim — cuts the highlights so the poster blends into the dark chat surface instead of fighting it for attention. */ filter: brightness(0.65) contrast(1.08) saturate(0.88); } .wa-card__body { padding: 8px 8px 6px; display: flex; flex-direction: column; gap: 3px; } .wa-card__pre { margin: 0 0 4px; font-size: 11.5px; color: var(--wa-text-mute); line-height: 1.3; } .wa-card__title { margin: 0; font-size: 13px; line-height: 1.3; color: var(--wa-text); } .wa-card__meta { margin: 0; font-size: 11.5px; color: var(--wa-text-mute); line-height: 1.35; } .wa-card__meta--gap { margin-top: 6px; } /* Timestamp sits at the right edge of the availability line — that's where real WhatsApp renders message timestamps. The buttons below are extensions of the same message, not a new bubble. */ .wa-card__meta--gap { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .wa-card__meta--gap .wa__time { float: none; margin: 0; flex-shrink: 0; } .wa-card__step { color: var(--accent); font-weight: 500; } .phone--small .wa-card__title { font-size: 11.5px; } .phone--small .wa-card__meta { font-size: 10px; } .phone--small .wa-card__pre { font-size: 10px; } /* Card buttons — match Twilio quick-reply rendering: stacked, full width, separated by a thin top divider (like real WA template buttons). No margin-top: the first button sits flush against the card body. */ .wa-card__buttons { display: flex; flex-direction: column; } .wa-card__btn { display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; font-size: 12px; font-weight: 500; padding: 9px 8px; background: var(--wa-card-bg); /* match card body — no tint shift */ color: #53bdeb; /* WhatsApp's interactive-link blue */ border-top: 1px solid var(--wa-divider); cursor: pointer; } /* Last button rounds its bottom-right corner to match the card-bubble's shape (bottom-left stays flat — that's the tail anchor). */ .wa-card__buttons .wa-card__btn:last-child { border-bottom-right-radius: 8px; } .wa-card__btn-icon { width: 13px; height: 13px; stroke: #53bdeb; flex-shrink: 0; opacity: 0.95; } .phone--small .wa-card__btn { font-size: 10.5px; padding: 7px 6px; gap: 5px; } .phone--small .wa-card__btn-icon { width: 11px; height: 11px; } /* ============================================================ Pitch (3 bullets) ============================================================ */ .pitch { background: var(--bg-elev-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .pitch__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 1020px) { .pitch__grid { grid-template-columns: repeat(2, 1fr); } } /* On 2-up and 1-up layouts (≤1020px), tiles size to content. */ @media (max-width: 1020px) { .pitch__card { min-height: 0; padding: 22px 20px; } } @media (max-width: 540px) { .pitch__grid { grid-template-columns: 1fr; } } .pitch__card { padding: 28px 26px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: transform 240ms var(--ease), border-color 240ms var(--ease); } .pitch__card:hover { transform: translateY(-3px); border-color: var(--accent); } /* Emoji + title on the same line. Title can wrap to multiple lines below the emoji if needed. */ .pitch__title-row { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; } .pitch__icon { font-size: 22px; line-height: 1; flex-shrink: 0; } .pitch__title { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; margin: 0; line-height: 1.2; white-space: nowrap; } .pitch__card { padding: 28px 22px; min-height: 200px; } .pitch__body { color: var(--fg-muted); margin: 0; font-size: 15px; line-height: 1.6; } .pitch__body em { color: var(--accent); font-style: normal; font-weight: 600; } /* ============================================================ Journey — stepper rail (left) + sticky hero phone (right). On desktop, the phone stays pinned in view as the user scrolls through 8 step descriptions; JS swaps the phone's image as each step crosses the viewport center. On mobile, sticky disabled — phone moves with each step. ============================================================ */ .journey__lede { text-align: center; color: var(--fg-muted); font-size: 16px; max-width: 620px; margin: -18px auto 44px; line-height: 1.6; } .journey__lede { text-align: center; color: var(--fg-muted); font-size: 16px; max-width: 620px; margin: -18px auto 64px; line-height: 1.6; } /* 2-column layout: phone-left (380px column), steps-right (flexible). Shifted slightly toward the right of the container by capping width and using `margin-left: auto`. Steps column is bounded to 540px so long copy doesn't sprawl on wide screens. */ .journey__layout { display: grid; grid-template-columns: 380px minmax(0, 540px); gap: 200px; align-items: start; max-width: 1180px; margin-left: auto; margin-right: auto; padding-left: 40px; } /* Right column — sticky phone wrapper. The wrapper is sticky and centered vertically. Phone height is ~675px @ aspect 9/19 with width 320px. We bias the offset slightly down (-300 instead of -337) so the phone reads as centered in the viewport accounting for the page header above it. */ .journey__phone-wrap { position: sticky; top: calc(50vh - 300px); display: flex; justify-content: center; min-height: 0; } .journey__phone--hero { width: 320px; aspect-ratio: 9 / 19; background: #0a0a0a; border: 7px solid #2a2a2a; border-radius: 36px; padding: 5px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), inset 0 0 0 1px #3a3a3a; position: relative; overflow: hidden; } .journey__phone--hero::before { content: ""; position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 76px; height: 20px; background: #0a0a0a; border-radius: 12px; z-index: 5; } /* Chat body inside the sticky phone — JS clones step templates into here and cross-fades opacity on swap. */ #journey-chat { transition: opacity 220ms var(--ease); } /* Journey card-bubbles — wider posters than the default 16:9 since the journey phone has more vertical room than the hero. 4:5 reads as a movie-poster-leaning header without overflowing the screen. */ #journey-chat .wa__bubble--card { width: 78%; max-width: 78%; } #journey-chat .wa-card__poster { aspect-ratio: 4 / 5; object-position: center 25%; } .journey__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 100px; /* Top padding gives step 1 room to scroll into viewport center before becoming active. Bottom padding keeps the sticky phone in view through step 6 — without it, the phone would release (and start scrolling away) the moment step 6 reaches center. */ padding-top: calc(50vh - 300px); padding-bottom: calc(50vh - 300px); } .journey__step { display: flex; flex-direction: column; gap: 12px; /* Steps fade slightly when not active so the eye is drawn to the currently-tracking step. Active style added by JS. */ opacity: 0.45; transition: opacity 280ms var(--ease); border-left: 2px solid var(--line); padding-left: 28px; margin-left: 4px; } .journey__step.is-active { opacity: 1; border-left-color: var(--accent); } .journey__num { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 2px; color: var(--accent); font-feature-settings: "tnum"; } .journey__num-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--accent); /* Nudge down 1px so the clock's vertical center aligns with the text's x-height (small caps numerals sit lower than the SVG's geometric center). */ position: relative; top: 3px; } .journey__title { font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; letter-spacing: -0.4px; margin: 0; color: var(--fg); line-height: 1.2; } .journey__body { color: var(--fg-muted); font-size: 16px; line-height: 1.6; margin: 0; max-width: 480px; } .journey__body em { color: var(--accent); font-style: normal; font-weight: 600; } /* Closing line — sits directly below step 8 in the right column, tight against it. Both step 8 and CTA scroll freely past the sticky phone (no padding-bottom pinning to keep the phone stuck). */ .journey__cta { grid-column: 2; text-align: left; color: var(--accent); font-weight: 600; font-size: 19px; line-height: 2; margin: -100px 0 0; max-width: 540px; justify-self: start; } /* ----- Mobile / tablet: vertical timeline. Single sticky phone is hidden; each step gets its own inline mini-phone (180px wide) on the LEFT, with `[time]` + title pinned vertically-centered on the RIGHT. Body description is dropped on mobile — the phone IS the description. Continuous gold line runs the full height of the steps list, threading edge-to-edge above and below the phones. */ @media (max-width: 920px) { /* Drop the sticky desktop phone entirely on mobile. */ .journey__phone-wrap { display: none; } /* Layout collapses to a single column. */ .journey__layout { display: block; padding-left: 0; margin: 0; max-width: none; } .journey__steps { list-style: none; margin: 0; /* Generous top + bottom padding so the gold line clearly extends past the first phone (top) and the last phone (bottom). */ padding: 60px 0; display: flex; flex-direction: column; /* Bigger inter-step gap so the gold line is visible BETWEEN phones, not crammed between them. */ gap: 80px; position: relative; } /* Continuous gold line. Extended past the steps-list edges so the line is clearly visible above the first phone and below the last. Solid color (no gradient fade) so it shows at the very top and bottom of its visible range. */ /* Hairline gold thread — 1px element scaled to ~30% visible width for a string-like filament. Soft halo so it still reads on dark. */ .journey__steps::before { content: ""; position: absolute; top: 0; bottom: 0; left: 88px; width: 1px; background: var(--accent); transform: scaleX(0.3); transform-origin: left center; box-shadow: 0 0 2px rgba(212, 165, 116, 0.5), 0 0 6px rgba(212, 165, 116, 0.2); pointer-events: none; z-index: 0; } /* Each step: 2-column row, content vertically centered with the phone. Phone spans column 1 across all rows of the step, so the num/title/body items in column 2 stack vertically beside it instead of wrapping under the phone. */ .journey__step { display: grid; grid-template-columns: 200px 1fr; column-gap: 16px; /* Center text vertically with the phone — num + title block sits at the phone's middle. */ align-items: center; opacity: 1; padding: 0; border-left: 0; margin-left: 0; position: relative; z-index: 1; } /* Phone in column 1; ONE wrapper with all text in column 2. */ .journey__step .journey__phone--mini { grid-column: 1; } .journey__step .journey__step__text { grid-column: 2; } /* Mini-phone on the left. Real phone aspect ratio at 180px wide. */ .journey__phone--mini { width: 200px; /* Shorter aspect than real-phone 9:19 because the per-step chat content is small — keeps the phone compact without huge dead space below. */ aspect-ratio: 9 / 18; background: #0a0a0a; border: 5px solid #2a2a2a; border-radius: 28px; padding: 4px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); position: relative; overflow: hidden; } .journey__phone--mini::before { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 46px; height: 11px; background: #0a0a0a; border-radius: 7px; z-index: 5; } .journey__phone--mini .phone__screen { width: 100%; height: 100%; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; } /* Mini-phone WA header: condensed for the smaller frame. */ .journey__phone--mini .wa__header { padding: 18px 8px 5px; gap: 6px; } .journey__phone--mini .wa__avatar { width: 22px; height: 22px; font-size: 12px; } .journey__phone--mini .wa__name { font-size: 10px; } .journey__phone--mini .wa__status { font-size: 8.5px; min-height: 0; } .journey__phone--mini .wa__status-online { display: inline; opacity: 1; position: static; } .journey__phone--mini .wa__body { padding: 6px 5px; gap: 5px; font-size: 8.5px; line-height: 1.35; } /* Mini-phone bubbles + cards scale to fit the smaller width. */ .journey__phone--mini .wa__bubble { font-size: 8.5px; padding: 5px 7px 4px; } .journey__phone--mini .wa__time { font-size: 6.5px; } .journey__phone--mini .wa-card__title { font-size: 9px; } .journey__phone--mini .wa-card__meta { font-size: 7.5px; } .journey__phone--mini .wa-card__pre { font-size: 7px; } .journey__phone--mini .wa-card__btn { font-size: 7.5px; padding: 5px 5px; gap: 3px; } .journey__phone--mini .wa-card__btn-icon { width: 8px; height: 8px; } .journey__phone--mini .wa-bubble__cta-btn { font-size: 8.5px; padding: 6px 10px; } .journey__phone--mini .wa-list__row { font-size: 8.5px; padding: 6px 8px; } /* Default mini-phone poster: square 1:1. Inception (step 6) reads as a substantial card without going so tall it dominates. */ .journey__phone--mini .wa-card__poster { aspect-ratio: 1 / 1; object-position: center 25%; } /* Step 2 (Parasite onboarding card) gets a taller poster so the full portrait artwork shows with less crop. */ .journey__step[data-tpl="journey-tpl-2"] .journey__phone--mini .wa-card__poster { aspect-ratio: 4 / 5; object-position: center 30%; } /* Hide bubble triangle tails — too small to render cleanly. */ .journey__phone--mini .wa__bubble--in::before, .journey__phone--mini .wa__bubble--out::before { display: none; } /* Force left-align of all chat content inside the mini-phones so the welcome text, list rows, schedule prompts read naturally regardless of any parent text-align inheritance. */ .journey__phone--mini .wa__body, .journey__phone--mini .wa__bubble, .journey__phone--mini .wa-list__row, .journey__phone--mini .wa-bubble__body, .journey__phone--mini .wa-card__body { text-align: left; } /* The body is a flex column — make sure incoming bubbles hug the left edge inside the phone, and the body itself doesn't center-align the bubbles. */ .journey__phone--mini .wa__body { align-items: flex-start; } .journey__phone--mini .wa__bubble--in, .journey__phone--mini .wa__bubble--card, .journey__phone--mini .wa__bubble--with-cta { align-self: flex-start; } /* Outgoing bubbles still hug the right. */ .journey__phone--mini .wa__bubble--out { align-self: flex-end; } /* Inside the bubble: the body content + CTA divider should both span the bubble's full width, no inherited centering offsets. */ .journey__phone--mini .wa-bubble__body, .journey__phone--mini .wa-bubble__cta { width: 100%; } /* Tighten the inner padding of bubbles in mini-phones so text starts flush against the bubble's left edge instead of looking centered inside an oversized 12px gutter. */ .journey__phone--mini .wa__bubble { padding: 4px 5px 3px; } .journey__phone--mini .wa-bubble__body { padding: 5px 6px 4px; } .journey__phone--mini .wa-bubble__cta-btn { padding: 5px 6px; } .journey__phone--mini .wa-list__row { padding: 5px 6px; } .journey__phone--mini .wa-card__body { padding: 5px 6px 4px; gap: 2px; } .journey__phone--mini .wa-card__btn { padding: 4px 6px; } /* When wa-card__buttons sit INSIDE a wa__bubble--with-cta (the schedule template), the buttons inherit wa-card-bg which differs from the bubble background. Match the bubble color so they visually share one continuous surface. */ .journey__phone--mini .wa__bubble--with-cta .wa-card__btn { background: var(--wa-bubble-in); } /* Single text wrapper with the continuous gold accent line on the left. Number + title sit inside, vertically stacked. */ .journey__step .journey__step__text { padding: 4px 0 4px 12px; border-left: 2px solid var(--accent); } .journey__step .journey__num { display: block; font-size: 12px; font-weight: 700; letter-spacing: 1.6px; color: var(--accent); margin: 0 0 6px; text-transform: none; } .journey__step .journey__title { font-size: 18px; line-height: 1.25; margin: 0; } /* Drop the description on mobile — phone shows it visually. */ .journey__step .journey__body { display: none; } /* CTA at the bottom of the timeline. */ .journey__cta { grid-column: auto; margin: 32px 0 0; font-size: 15px; text-align: center; justify-self: center; } } /* ============================================================ FAQ ============================================================ */ .faq__list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq__item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elev); overflow: hidden; transition: border-color 240ms var(--ease); } .faq__item[open] { border-color: var(--accent); } .faq__item summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 600; font-size: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: "+"; font-size: 22px; color: var(--accent); transition: transform 220ms var(--ease); font-weight: 400; line-height: 1; } .faq__item[open] summary::after { transform: rotate(45deg); } .faq__item p { margin: 0; padding: 0 22px 20px; color: var(--fg-muted); font-size: 15px; line-height: 1.6; } /* ============================================================ Final CTA ============================================================ */ .start { text-align: center; background: radial-gradient(circle at 50% 50%, rgba(212, 165, 116, 0.13), transparent 60%), var(--bg); } .start__inner { max-width: 720px; margin: 0 auto; } .start__body { color: var(--fg-muted); margin: 0 0 36px; font-size: 17px; line-height: 1.6; } /* Button + "or" + QR card — paired gold-themed CTA group. Both feel like siblings of the same family: same gold accents, same border-radius family, both with subtle shadows. */ .start__row { display: flex; align-items: center; justify-content: center; gap: 80px; flex-wrap: wrap; } /* Button uses the standard --lg sizing (matches hero CTA), with a small min-width to give it presence next to the QR card. */ .start__btn { min-width: 220px; justify-content: center; } /* QR card — same gold-tinted treatment as the button. Sits as the button's visual sibling: same height-ish, same gold border-radius family, same gold accents. */ .start__qr-card { display: none; flex-direction: column; align-items: center; gap: 10px; padding: 14px 16px; background: rgba(212, 165, 116, 0.05); border: 1px solid rgba(212, 165, 116, 0.25); border-radius: 18px; box-shadow: 0 6px 20px rgba(212, 165, 116, 0.12), 0 6px 20px rgba(0, 0, 0, 0.3); transition: border-color 240ms var(--ease), background 240ms var(--ease); } .start__qr-card:hover { border-color: rgba(212, 165, 116, 0.55); background: rgba(212, 165, 116, 0.08); } @media (min-width: 820px) { .start__qr-card { display: flex; } } .start__qr { width: 116px; height: 116px; padding: 6px; background: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; } .start__qr canvas, .start__qr svg, .start__qr img { display: block; width: 100% !important; height: 100% !important; } .start__qr-caption { font-size: 12px; color: var(--accent); font-weight: 600; margin: 0; letter-spacing: 0.6px; } /* ============================================================ Footer (single row, light) ============================================================ */ .site-footer { border-top: 1px solid var(--line); padding: 36px 0; background: var(--bg); } .site-footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; font-size: 13px; color: var(--fg-faint); text-align: center; } /* Desktop: primary block (Contact Us | © CineMatch) sits inline with the rest; on mobile it becomes its own row. */ .site-footer__primary { display: contents; } .site-footer__sep { color: var(--fg); font-weight: 700; font-size: 18px; line-height: 1; } /* Contact Us is a hyperlink — gold so it reads distinct from the muted copy/tagline spans. Underlines on hover. */ .site-footer__link { color: var(--accent); font-weight: 600; border-bottom: 1px solid transparent; transition: border-color 240ms var(--ease); } .site-footer__link:hover { border-bottom-color: var(--accent); } .site-footer__copy { color: var(--fg-muted); font-weight: 500; } .heart { display: inline-block; font-size: 12px; vertical-align: middle; } @media (max-width: 720px) { /* Mobile footer: Row 1 — Contact Us | © 2026 CineMatch Row 2 — Coded with ❤️ for people… Row 1: `|` is the visual center anchor. Three children laid out so the `|` sits dead-center of the screen and the link/copy bookend it symmetrically. */ .site-footer { padding: 20px 0 56px; } .site-footer__row { flex-direction: column; gap: 8px; font-size: 14px; } /* Equal-width sides so the `|` is the visual midpoint of the screen and each label reserves the same horizontal space, regardless of character count. */ .site-footer__primary { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; width: 100%; max-width: 360px; column-gap: 14px; } .site-footer__primary .site-footer__link { justify-self: end; text-align: right; } .site-footer__primary .site-footer__copy { justify-self: start; text-align: left; } /* Match the link's weight + size to the copy so the two sides of the `|` read as visual peers. The gold/muted color difference stays as the only visual cue that one is interactive. */ .site-footer__primary .site-footer__link { font-weight: 500; font-size: 14px; } .site-footer__primary .site-footer__copy { font-weight: 500; font-size: 14px; } /* The middle `·` (between primary and tagline) is hidden on mobile since they're already separated by the column-row gap. */ .site-footer__sep--mid { display: none; } .site-footer__tagline { margin: 0; font-size: 10px; color: var(--fg-faint); font-weight: 400; } } /* ============================================================ Hero chat animation — triggered by IntersectionObserver (script.js adds .is-anim-active to .hero when it enters view). Timeline (relative to .is-anim-active being added): 0.00s user message fades in 0.40s header status flips: online → typing… 1.60s header status flips back: typing… → online 1.80s recommendation card slides up + fades in (450ms) 2.25s hold forever Until activation, all anim-* elements stay invisible. The typing indicator stays hidden (online label stays). ============================================================ */ .anim-msg { opacity: 0; transform: translateY(6px); } /* Typewriter wrapper — text content is appended char-by-char by JS. No clipping, no caret — just the text growing as if a person is typing it letter-by-letter. */ .anim-typewriter { display: inline; white-space: pre-wrap; } .anim-card { opacity: 0; transform: translateY(14px) scale(0.985); transform-origin: top left; } /* Activated state — INFINITE LOOP, 7-second cycle. Timeline per cycle: 0.0s blank screen (everything reset) 0.3s user bubble fades in 0.5s text starts typing 1.6s typing done; caret blinks then hides 1.9s header flips: online → typing… 2.7s header flips back to online 2.8s card fades in + slides 5.5s card holds (visible window) 6.2s user msg + card fade out 7.0s loop restart */ .hero.is-anim-active .anim-msg { animation: hero-msg-loop 7000ms 0ms infinite var(--ease); } /* anim-typewriter has no CSS animation — JS owns the typing reveal (see armHeroTypewriter in script.js). */ .hero.is-anim-active .anim-card { animation: hero-card-loop 7000ms 0ms infinite var(--ease); } .hero.is-anim-active .wa__status-online { animation: hero-online-loop 7000ms 0ms infinite; } .hero.is-anim-active .wa__status-typing { animation: hero-typing-loop 7000ms 0ms infinite; } /* User message: fade in, hold, fade out (single 7s cycle) */ @keyframes hero-msg-loop { 0%, 3% { opacity: 0; transform: translateY(6px); } 7% { opacity: 1; transform: translateY(0); } 88% { opacity: 1; transform: translateY(0); } 93% { opacity: 0; transform: translateY(0); } 100% { opacity: 0; transform: translateY(6px); } } /* Card: hidden, then slide+fade in, hold, fade out before next cycle */ @keyframes hero-card-loop { 0%, 39% { opacity: 0; transform: translateY(14px) scale(0.985); } 44% { opacity: 1; transform: translateY(0) scale(1); } 88% { opacity: 1; transform: translateY(0) scale(1); } 93% { opacity: 0; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(14px) scale(0.985); } } /* Header status cross-fade. User finishes typing ~22% (1.5s). We pause for ~600ms BEFORE flipping to "typing…" — feels more natural (real WhatsApp doesn't show typing until the bot starts actually composing). Then "typing…" stays until card lands at ~44%. Back to online before next cycle restart. */ @keyframes hero-online-loop { 0%, 30% { opacity: 1; } 33% { opacity: 0; } 42% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 1; } } @keyframes hero-typing-loop { 0%, 30% { opacity: 0; } 33% { opacity: 1; } 42% { opacity: 1; } 45% { opacity: 0; } 100% { opacity: 0; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } /* Snap to final state */ .anim-msg, .anim-card { opacity: 1; transform: none; } .wa__status-typing { display: none !important; } }