/* ===================================================================== * Predict Six — marketing site styles * * Palette and typography mirror the iOS app's dark mode + admin panel, * so users who land here then open the App Store feel continuity of * brand. The most-critical above-the-fold hero styles are also inlined * in index.html for fastest first paint — but the base * variables + resets below are canonical for every page (index.html, * terms.html, privacy.html, 404.html), so these need to live in the * shared stylesheet. * ===================================================================== */ /* ---------- Base: variables, reset, body ---------- */ :root { --bg: #0D0D0D; --card: #1F1F1F; --surface-light: #2A2A2A; --border: #2E2E2E; --accent: #D4A84B; --accent-dim: #9A7A32; --text: #F5F5F5; --text-secondary: #9A9A9A; --max-w: 1080px; --pad-x: clamp(20px, 5vw, 40px); --shadow: rgba(0, 0, 0, 0.3); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; } } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } /* ---------- Shared helpers ---------- */ .container-narrow { max-width: 760px; } .section { padding: clamp(72px, 10vw, 120px) 0; /* Keep section heads visible when a sticky nav is overlaying the top of the viewport. Matches the `--section-nav-height` height of `.section-nav` so a hash-link jump lands the section title just below the strip instead of hidden behind it. */ scroll-margin-top: var(--section-nav-height, 56px); } /* ---------- Sticky section-jump nav ---------- */ /* Lives in the DOM immediately after the hero (`
`) and before `#how`. Pins to the top of the viewport via `position: sticky` once the user scrolls past the hero so any section is one tap away from anywhere on the page. */ .section-nav { --section-nav-height: 56px; position: sticky; top: 0; z-index: 50; background: rgba(13, 13, 13, 0.92); /* var(--bg) at 92% — semi-opaque */ backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); border-bottom: 1px solid rgba(255, 255, 255, 0.06); /* `isolation: isolate` contains the edge-fade pseudo-elements' z-index inside this stacking context so they don't bleed onto sticky content above the strip. */ isolation: isolate; } /* Edge-fade gradient overlays — absolute pseudo-elements pinned to the left and right edges of the strip. When the link row fits the viewport (typical case post-curation, 5 items on a 390px iPhone) the fades read as a clean tonal vignette; when it overflows (future label growth, accessibility text-scaling) they signal "more this way" so users know to swipe. Pointer- events: none so the fades never block link clicks. */ .section-nav::before, .section-nav::after { content: ""; position: absolute; top: 0; bottom: 1px; /* leave the bottom border untouched */ width: 32px; pointer-events: none; z-index: 1; } .section-nav::before { left: 0; background: linear-gradient( to right, rgba(13, 13, 13, 0.92), rgba(13, 13, 13, 0) ); } .section-nav::after { right: 0; background: linear-gradient( to left, rgba(13, 13, 13, 0.92), rgba(13, 13, 13, 0) ); } .section-nav-inner { max-width: var(--max-w, 1100px); margin: 0 auto; padding: 0 var(--pad-x); display: flex; align-items: center; /* `safe center` centers when content fits; falls back to flex-start when content overflows so the leftmost link stays reachable from scroll position 0 (instead of being clipped off-screen by a mid-viewport `center` anchor). Behaves correctly on Chrome 93+, Safari 15.4+, Firefox 63+ — all 2+ years deployed. */ justify-content: safe center; gap: clamp(14px, 2.4vw, 28px); height: var(--section-nav-height, 56px); /* Horizontal scroll instead of wrap for the rare overflow case — hidden scrollbar keeps the bar visually clean; users still swipe with momentum. Today's 5-item curation fits 390px+ viewports without overflow. */ overflow-x: auto; scrollbar-width: none; } .section-nav-inner::-webkit-scrollbar { display: none; } .section-nav a { flex-shrink: 0; padding: 6px 0; font-size: 13px; font-weight: 600; letter-spacing: 0.2px; color: var(--text-secondary); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; transition: color 140ms ease, border-color 140ms ease; } .section-nav a:hover, .section-nav a:focus-visible { color: var(--accent); border-bottom-color: var(--accent); outline: none; } @media (max-width: 600px) { .section-nav { --section-nav-height: 48px; } .section-nav-inner { gap: 18px; } .section-nav a { font-size: 12px; } } /* Smooth-scroll the page for hash-link jumps. Respects users who've set "reduce motion" via OS-level accessibility preferences. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } .section-alt { background: #0A0A0A; /* one notch darker than --bg so sections read as rhythm */ } .section-head { text-align: center; margin-bottom: clamp(40px, 6vw, 72px); } .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .section-title { font-size: clamp(28px, 4.5vw, 44px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; } .body { font-size: clamp(16px, 1.6vw, 18px); color: var(--text-secondary); line-height: 1.7; } /* ---------- How it works ---------- */ .steps { list-style: none; display: flex; flex-direction: column; gap: clamp(56px, 8vw, 96px); } .step { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; } .step-copy .step-num { font-family: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, monospace; font-size: 14px; font-weight: 600; letter-spacing: 0.1em; color: var(--accent); display: inline-block; margin-bottom: 12px; } .step-copy h3 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -0.01em; margin-bottom: 14px; } .step-copy p { font-size: 17px; color: var(--text-secondary); line-height: 1.6; max-width: 44ch; } .step-shot img { width: 100%; max-width: 320px; margin: 0 auto; border-radius: 28px; border: 1px solid var(--border); box-shadow: 0 20px 60px rgba(0,0,0,0.5); } /* Placeholder for the community/consensus screenshot we don't have yet. */ .placeholder-box { width: 100%; max-width: 320px; aspect-ratio: 9 / 19.5; /* matches modern iPhone screen ratio */ margin: 0 auto; border: 2px dashed var(--border); border-radius: 28px; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; color: var(--text-secondary); font-size: 13px; } @media (min-width: 760px) { .step { grid-template-columns: 1fr 1fr; gap: 48px; } .step-reverse .step-copy { order: 2; } .step-reverse .step-shot { order: 1; } } /* ---------- Why Predict Six ---------- */ .principles { display: grid; gap: 48px; } .principle h3 { font-size: clamp(20px, 2.4vw, 24px); font-weight: 700; color: var(--accent); margin-bottom: 12px; letter-spacing: -0.01em; } .principle p { font-size: 17px; color: var(--text); line-height: 1.7; max-width: 62ch; } /* ---------- Sample questions ---------- */ .q-grid { display: grid; /* 3 cards: auto-fit keeps 1 per row on mobile, 3 in a row on desktop, 2-up on tablet-size in between. Avoids the 2+1 orphan layout that a fixed 2-col grid would produce with 3 items. */ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .q-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; } /* Sample-question card image — inset within the card's interior padding (not edge-to-edge), with its own rounded corners. The inset gives visual breathing room around the image so it reads as "supporting illustration" rather than "card header banner," which keeps the question text as the focal point. `aspect-ratio: 5 / 3` is shallower than the source images (4:3 / 5:4) so the image sits at a more compact height relative to the rest of the card content, and `object-fit: cover` crops the off-ratio source so all three cards land at identical image heights regardless of source shape. */ .q-image { display: block; width: 100%; aspect-ratio: 5 / 3; object-fit: cover; border-radius: 12px; /* inner-rounded — slightly less than card's 16px */ } .q-cat { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--accent); } .q-icon { width: 18px; height: 18px; flex-shrink: 0; } .q-text { font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--text); } .q-choices { display: flex; gap: 10px; margin-top: 4px; } .q-chip { flex: 1; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; padding: 8px 0; border-radius: 999px; border: 1px solid var(--accent-dim); color: var(--accent); background: rgba(212, 168, 75, 0.05); } /* ---------- The six categories ---------- */ .cat-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 16px; max-width: 720px; margin: 0 auto; } .cat-grid li { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--text); } .cat-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(212, 168, 75, 0.08); border: 1px solid rgba(212, 168, 75, 0.25); color: var(--accent); display: flex; align-items: center; justify-content: center; } .cat-icon svg { width: 28px; height: 28px; } @media (min-width: 760px) { .cat-grid { grid-template-columns: repeat(6, 1fr); gap: 24px 16px; } } /* ---------- It gets better over time ---------- */ .stats-split { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 6vw, 56px); align-items: center; } .stats-copy .eyebrow { text-align: left; } .stats-copy .section-title { text-align: left; margin-bottom: 20px; } .stats-copy .body { max-width: 54ch; } .stats-shot img { width: 100%; max-width: 300px; margin: 0 auto; border-radius: 28px; border: 1px solid var(--border); box-shadow: 0 20px 60px rgba(0,0,0,0.5); } @media (min-width: 860px) { .stats-split { grid-template-columns: 1fr 1fr; } /* Flip image + copy for visual rhythm when stacking multiple stats-split sections. Mirrors the .step-reverse pattern from "How it works". */ .stats-reverse .stats-copy { order: 2; } .stats-reverse .stats-shot { order: 1; } } /* ---------- Footer ---------- */ .footer { background: #080808; border-top: 1px solid var(--border); padding: clamp(56px, 8vw, 88px) 0 32px; } .footer-cta { text-align: center; padding-bottom: clamp(40px, 6vw, 64px); border-bottom: 1px solid var(--border); } .footer-logo { width: 72px; height: 72px; margin: 0 auto 20px; /* Radiating gold glow — matches the hero logo treatment so both 8-balls read as the same brand element against the dark background. */ filter: drop-shadow(0 0 14px rgba(212, 168, 75, 0.55)) drop-shadow(0 0 32px rgba(212, 168, 75, 0.35)) drop-shadow(0 0 60px rgba(212, 168, 75, 0.22)); } .footer-cta h2 { font-size: clamp(24px, 3.6vw, 34px); font-weight: 800; letter-spacing: -0.01em; margin-bottom: 10px; } .footer-cta p { font-size: 15px; color: var(--text-secondary); margin-bottom: 24px; } .footer-meta { padding-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; font-size: 14px; color: var(--text-secondary); } .footer-nav a { transition: color 0.15s; padding: 4px 2px; border-radius: 3px; } .footer-nav a:hover, .footer-nav a:focus { color: var(--text); outline: none; } .footer-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .footer-copy { font-size: 12px; color: var(--text-secondary); } .footer-copy a:hover { color: var(--text); } /* ---------- Accessibility ---------- */ a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ---------- Legal pages (Terms / Privacy) ---------- * * Ports the iOS TermsOfServiceView / PrivacyPolicyView structure: * centered column, one header card, a stack of card sections each * with an icon + title + body/bullets, and a "last updated" stamp. */ .legal-page { max-width: 680px; margin: 0 auto; padding: clamp(32px, 6vw, 64px) var(--pad-x) clamp(48px, 8vw, 80px); } .legal-back { font-size: 14px; color: var(--text-secondary); margin-bottom: 20px; display: inline-block; transition: color 0.15s; } .legal-back:hover { color: var(--text); } .legal-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; margin-bottom: 16px; box-shadow: 0 3px 8px var(--shadow); } .legal-header { text-align: center; padding: 28px 20px; } .legal-header-icon { width: 40px; height: 40px; margin: 0 auto 10px; color: var(--accent); } .legal-header h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 6px; } .legal-header p { font-size: 13px; color: var(--text-secondary); } .legal-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .legal-section-head svg { width: 20px; height: 20px; color: var(--text-secondary); flex-shrink: 0; } .legal-section-head h2 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; } .legal-body { font-size: 14px; color: var(--text-secondary); line-height: 1.65; } .legal-bullets { list-style: none; padding: 0; margin: 0; } /* `display: flex` was the original layout, but flex turns inline children (text runs + ) into separate flex items with the gap property applied between each — bullets containing a mailto: link would render with phantom whitespace around the link. Switch to block-level lis with the bullet dot absolutely positioned so the content flows as normal inline text. */ .legal-bullets li { position: relative; padding: 4px 0 4px 16px; font-size: 14px; color: var(--text-secondary); line-height: 1.6; } .legal-bullets li::before { content: ''; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--text-secondary); opacity: 0.55; } .legal-bullets li a { color: var(--accent); } .legal-bullets li a:hover { text-decoration: underline; } .legal-updated { text-align: center; font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-top: 12px; } .legal-body a { color: var(--accent); } .legal-body a:hover { text-decoration: underline; } /* "Read the full version" banner card. Sits between the summary header and the bullet cards on the privacy page. Mirrors the iOS readFullVersionRow styling — accent-bordered card with icon, label, subtitle, and chevron. */ .legal-cta { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); text-decoration: none; color: inherit; transition: background 120ms ease; } .legal-cta:hover { background: color-mix(in srgb, var(--accent) 6%, var(--card)); } .legal-cta > svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--accent); } .legal-cta-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; } .legal-cta-body strong { font-size: 15px; font-weight: 700; color: var(--text); } .legal-cta-body span { font-size: 12px; font-weight: 500; color: var(--text-secondary); } .legal-cta-chevron { flex: 0 0 auto; width: 14px; height: 14px; color: var(--text-secondary); } /* Anchor heading + intro for the long-form companion section. */ .legal-anchor { margin-top: 32px; margin-bottom: 6px; font-size: 22px; font-weight: 800; color: var(--text); scroll-margin-top: 16px; } .legal-anchor-intro { font-size: 14px; font-weight: 500; color: var(--text-secondary); line-height: 1.5; margin-bottom: 16px; } /* Emphasis variant of legal-card for the "What we don't collect" section — accent-tinted border so the trust signal pops. */ .legal-card-emphasis { border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); } /* Subhead inside an expanded card — used to split What We Collect into "Required" and "Optional" buckets in the long-form view. */ .legal-subhead { margin-top: 14px; margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text); } .legal-subhead:first-of-type { margin-top: 4px; } /* ---------- The Magic of Six (auto-scroll ticker) ---------- */ /* Subtitle below the section title. Used by the Magic-of-Six section today; broadly available to any section that wants a short tagline below its h2. Uses --text-secondary to read as supporting copy rather than a competing headline. */ .section-subtitle { font-size: clamp(15px, 1.5vw, 17px); color: var(--text-secondary); margin-top: 14px; line-height: 1.5; } /* Full-bleed ticker container. Lives outside the section's .container wrapper so it spans edge-to-edge regardless of --max-w. The mask-image creates a soft fade at the left and right edges so chips melt into the background instead of clipping abruptly when they reach the viewport boundary. */ .six-ticker { position: relative; width: 100%; overflow: hidden; margin-top: clamp(28px, 4vw, 48px); -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%); } /* The chip rail itself. width: max-content lets the flexbox grow as wide as the chips need (no wrapping), and the animation slides the whole rail left over time. The translate target is -50% because the chip set is duplicated inside the rail (HTML has two copies). At -50%, the second copy lands exactly where the first copy started — invisible seam, loop restarts seamlessly. Any other value would visibly jump. */ .six-ticker__track { display: flex; gap: 14px; width: max-content; padding: 4px 0; /* room for the chip's outer ring + hover lift */ animation: six-ticker-scroll 60s linear infinite; will-change: transform; } /* Pause on hover so a curious reader can hold their gaze on a chip. */ .six-ticker:hover .six-ticker__track { animation-play-state: paused; } @keyframes six-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Chip styling — echoes .q-chip (rounded pill, gold-dim border, gold accent) but at a roomier size suited to a free-floating ticker rather than a tight 2-column choice row. The 6%-mix background gives a faint warm tint over --card so chips read as "highlighted-on-bg" rather than "matched-to-bg". */ .six-chip { flex-shrink: 0; padding: 12px 22px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 6%, var(--card)); color: var(--text); font-size: clamp(14px, 1.4vw, 16px); font-weight: 500; letter-spacing: 0.005em; white-space: nowrap; /* Slight inner shadow keeps the chip from looking flat against the darker bg of section-alt neighbors. */ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.02); } /* The number-or-six fragment inside each chip — bold gold so the pattern (every chip has a 6 / six in it) reads at a glance even as the rail slides past. */ .six-chip strong { color: var(--accent); font-weight: 800; } /* Reduced-motion fallback. The global rule at the top of this file already neutralizes animation-duration globally, but for the ticker that's not enough — a frozen-mid-scroll rail would clip most chips off-screen. Here we explicitly disable the animation, drop the edge-fade mask, wrap the chips into a centered grid so every chip is reachable, and re-introduce the section's --pad-x so the wrapped layout doesn't collide with the viewport edges. */ @media (prefers-reduced-motion: reduce) { .six-ticker { -webkit-mask-image: none; mask-image: none; } .six-ticker__track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; padding: 0 var(--pad-x); gap: 10px; } } /* ================================================================ The Predict Six Index — marketing-home surfaces ================================================================ Two surfaces sit on the marketing home page (web/index.html): 1. .announce-banner — slim above-the-hero strip ("New: …") 2. #index .section — mid-page section between "How it works" and "Why Predict Six" Both link to /the-index/ (the Cloud-Function-rendered weekly accuracy scorecard). Static copy by design — the Index page is empty until the first Wednesday cron lands, so no hardcoded percentages here. Once the archive is 4+ weeks deep, the section could grow a small Firestore-backed widget showing the latest week's headline (`weekly_index/*` already has public-read rules). ================================================================ */ /* ---------- Announcement banner ---------- */ .announce-banner { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 11px clamp(16px, 4vw, 32px); background: linear-gradient(180deg, rgba(212, 168, 75, 0.10), rgba(212, 168, 75, 0.04)); border-bottom: 1px solid rgba(212, 168, 75, 0.18); color: var(--text); text-decoration: none; font-size: 14px; line-height: 1.4; text-align: center; transition: background 0.15s ease; } .announce-banner:hover, .announce-banner:focus-visible { background: linear-gradient(180deg, rgba(212, 168, 75, 0.16), rgba(212, 168, 75, 0.08)); } .announce-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: #0D0D0D; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; flex-shrink: 0; } .announce-text { color: var(--text-secondary); } .announce-text strong { color: var(--text); font-weight: 700; } .announce-arrow { color: var(--accent); font-weight: 700; flex-shrink: 0; transition: transform 0.15s ease; } .announce-banner:hover .announce-arrow, .announce-banner:focus-visible .announce-arrow { transform: translateX(3px); } /* On narrow screens, drop the trailing arrow + pill+text wrap. */ @media (max-width: 520px) { .announce-banner { flex-wrap: wrap; gap: 8px; padding: 10px 16px; font-size: 13px; } .announce-arrow { display: none; } } /* ---------- Mid-page Index + Blog promo sections ---------- Both the #index and #blog sections use the same centered-promo layout: eyebrow + headline above (via section-head), centered lede paragraph, gold-bordered bullet cards, and a CTA row at the bottom. The classes are aliased pairwise (.index-promo / .blog-promo, etc.) so each section's HTML can use a class name that matches its semantics while the visual styling stays in one place. Pre-2026-05-10 these classes existed only as .index-*; the .blog-* selectors were added when the Blog promo section was placed below the Index promo on the marketing home page. */ .index-promo, .blog-promo { display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 3vw, 28px); text-align: center; } .index-lede, .blog-lede { font-size: clamp(17px, 2vw, 20px); line-height: 1.55; color: var(--text); max-width: 640px; margin: 0 auto; } .index-points, .blog-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; width: 100%; max-width: 620px; text-align: left; } .index-points li, .blog-points li { /* Block layout (vs. flex) so the lead-phrase `` and the body text flow as one inline run instead of competing as sibling flex items. Under the prior flex layout, longer lead phrases (e.g. "The data is still there.") got squeezed down to one word per line because the body text dominated the row's flex distribution. The arrow is absolute-positioned into the left padding so the visual spacing matches what the flex `gap` produced. */ display: block; position: relative; padding: 16px 18px 16px 42px; background: rgba(212, 168, 75, 0.04); border: 1px solid rgba(212, 168, 75, 0.12); border-radius: 12px; font-size: 15px; color: var(--text-secondary); line-height: 1.55; } .index-points li::before, .blog-points li::before { content: "→"; position: absolute; left: 18px; top: 16px; color: var(--accent); font-weight: 800; } .index-points li strong, .blog-points li strong { color: var(--text); font-weight: 700; } .index-cta-row, .blog-cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 8px; } /* Variants of .cta-primary tuned for the centered promo CTA row — slightly tighter padding hooks left available for future tweaks without touching the global CTA. Currently both fall through to the default .cta-primary. */ .index-cta-primary, .blog-cta-primary { /* hooks reserved for future styling */ }