/* PlaybookMax marketing site — shared styles. Tokens and faces are lifted verbatim from src/index.css so the marketing pages and the app cannot drift apart. One stylesheet across all pages so a brand change is one edit, and so browsers cache it between page views. */ /* Tokens lifted verbatim from src/index.css so the marketing page and the app cannot drift apart. Same faces, same palette, same chalkboard grid. */ :root{ --board:#0e1411; --board-2:#131c17; --panel:#18211b; --panel-2:#1e2a22; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16); --chalk:#edefea; --chalk-dim:#8a968b; --chalk-faint:#5f6a61; --accent:#f2c12c; /* GOLD — the snap, CTAs, the active call. Sparingly. */ --flare:#e8634a; /* FLARE — the defense, alerts, opponents */ --field:#2f5d3b; /* FIELD — the turf, illustrative fills */ --display:"Saira Condensed",ui-sans-serif,system-ui,sans-serif; --sans:"Saira",ui-sans-serif,system-ui,-apple-system,sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace; --hand:"Caveat",ui-serif,cursive; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background-color:var(--board); background-image: radial-gradient(circle at 50% 0%, rgba(242,193,44,.05), transparent 60%), linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px); background-size:100% 100%,46px 46px,46px 46px; color:var(--chalk);font-family:var(--sans);-webkit-font-smoothing:antialiased; /* clip, NOT hidden. `overflow-x:hidden` forces overflow-y to compute to `auto` per spec, which turns into its own scroll container — that breaks keyboard scrolling (End/PageDown), stops scroll events reaching window, and changes what position:sticky resolves against. `clip` crops the same way without creating a scroller. */ overflow-x:clip; } h1,h2,h3{font-family:var(--display);letter-spacing:.02em;margin:0} a{color:inherit} .wrap{max-width:72rem;margin:0 auto;padding:0 20px} @media(min-width:640px){.wrap{padding:0 40px}} /* Shipaton eligibility: this must not read as a launched product before the store release. Keep until the App Store launch. */ .banner{position:fixed;top:0;left:0;right:0;z-index:50;height:32px;display:flex; align-items:center;justify-content:center;background:#2a1512; border-bottom:1px solid rgba(232,99,74,.4);padding:0 12px;text-align:center} .banner span{font-family:var(--mono);font-size:10px;text-transform:uppercase; letter-spacing:.14em;color:#e8634a} @media(min-width:640px){.banner span{font-size:11px}} nav{position:fixed;top:32px;left:0;right:0;z-index:40;height:64px;display:flex; align-items:center;justify-content:space-between;padding:0 20px; background:rgba(14,20,17,.7);backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,.06)} @media(min-width:640px){nav{padding:0 40px}} .lockup{display:flex;align-items:center;gap:10px;text-decoration:none} .tile{width:32px;height:32px;border-radius:9px;background:var(--accent); display:flex;align-items:center;justify-content:center;flex-shrink:0} .word{font-family:var(--display);font-weight:800;text-transform:uppercase; letter-spacing:.01em;font-size:20px;line-height:1} .word i{font-style:normal;color:var(--accent)} .btn{display:inline-block;font-family:var(--sans);font-weight:600; text-decoration:none;border-radius:9px;padding:11px 20px;font-size:15px; background:var(--accent);color:#0e1411;transition:filter .15s ease} .btn:hover{filter:brightness(1.06)} .btn.ghost{background:transparent;color:var(--chalk);border:1px solid var(--line-2)} .btn.ghost:hover{background:var(--panel-2);filter:none} .btn.big{padding:15px 30px;font-size:17px} header.hero{position:relative;min-height:100svh;display:flex;align-items:center; padding-top:96px;padding-bottom:56px;overflow:hidden} .field{position:absolute;inset:0;opacity:.7;pointer-events:none} .field svg{width:100%;height:100%;display:block} .fade{position:absolute;inset:0;background:linear-gradient(to top, var(--board) 0%, rgba(14,20,17,.55) 55%, rgba(14,20,17,.2) 100%)} .hero-inner{position:relative;z-index:10;width:100%} .eyebrow{font-family:var(--mono);color:var(--accent);font-size:12px; letter-spacing:.3em;text-transform:uppercase;margin:0 0 20px} @media(min-width:640px){.eyebrow{font-size:14px}} h1{font-weight:700;text-transform:uppercase;line-height:.93; font-size:clamp(3.2rem,11vw,8.5rem);color:var(--chalk)} h1 .hollow{color:transparent;-webkit-text-stroke:1.5px var(--chalk);paint-order:stroke} h1 .gold{color:var(--accent)} .sub{margin:24px 0 0;max-width:36rem;color:var(--chalk-dim);font-size:17px;line-height:1.65} @media(min-width:640px){.sub{font-size:19px}} .hero-cta{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:16px} .hand{font-family:var(--hand);font-size:26px;color:var(--chalk-dim); transform:rotate(-3deg);display:inline-block} section{padding:88px 0} h2{font-weight:700;text-transform:uppercase;line-height:1; font-size:clamp(2.2rem,6vw,4rem);margin-bottom:14px} h2 .hollow{color:transparent;-webkit-text-stroke:1.5px var(--accent)} .section-lede{color:var(--chalk-dim);max-width:44rem;font-size:16px;line-height:1.7;margin:0 0 40px} .grid{display:grid;grid-template-columns:1fr;gap:20px} @media(min-width:640px){.grid{grid-template-columns:1fr 1fr}} .panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px} .panel .k{font-family:var(--mono);color:var(--accent);font-size:12px;margin-bottom:16px} .panel h3{font-weight:600;text-transform:uppercase;letter-spacing:.03em; font-size:24px;color:var(--chalk);margin-bottom:10px} .panel p{color:var(--chalk-dim);line-height:1.7;font-size:15px;margin:0} .marquee{padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:rgba(19,28,23,.6);overflow:hidden} .marquee-track{display:flex;white-space:nowrap;animation:mq 24s linear infinite;will-change:transform} .marquee-track span{font-family:var(--display);font-weight:700;text-transform:uppercase; font-size:clamp(1.6rem,4vw,2.8rem);padding:0 24px;color:transparent; -webkit-text-stroke:1.5px var(--chalk);opacity:.7} .marquee-track b{color:var(--accent);-webkit-text-stroke:0;padding:0 8px} @keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.marquee-track{animation:none}} .hero-shot{width:100%;height:auto;display:block;border-radius:16px; border:1px solid var(--line);margin-top:8px} .faq{border-top:1px solid var(--line);padding:22px 0} .faq h3{font-weight:600;text-transform:uppercase;letter-spacing:.03em; font-size:19px;color:var(--chalk);margin-bottom:6px} .faq p{color:var(--chalk-dim);margin:0;line-height:1.7;font-size:15px} .final{text-align:center;padding:96px 0} .final h2{margin-bottom:18px} footer{border-top:1px solid var(--line);padding:32px 0 64px;color:var(--chalk-faint);font-size:14px} footer .stencil{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em; font-weight:600;color:var(--chalk-dim)} /* Studio credit. Subordinate to the PlaybookMax mark by design — muted chalk at rest, TMS gold (#ddaa19, NOT our --accent) only on hover, so two golds never compete in the same footer. */ footer .credit{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:13px} footer .credit a{display:inline-flex;align-items:center;gap:9px;color:var(--chalk-faint); text-decoration:none;transition:color .18s ease} footer .credit a svg{flex:none;transition:color .18s ease} footer .credit a b{font-weight:600;color:var(--chalk-dim);transition:color .18s ease} footer .credit a:hover,footer .credit a:hover b{color:#ddaa19} /* ── shared page furniture (nav links, tables, tiers) ───────────────────── */ .navlinks{display:flex;align-items:center;gap:22px} /* :not(.btn) matters — `.navlinks a` is 0-1-1 and would otherwise beat `.btn` (0-1-0), painting the gold CTA's label chalk-dim grey instead of ink. */ .navlinks a:not(.btn){font-family:var(--sans);font-weight:500;font-size:15px;color:var(--chalk-dim); text-decoration:none;transition:color .15s ease} .navlinks a:not(.btn):hover,.navlinks a:not(.btn)[aria-current="page"]{color:var(--chalk)} @media(max-width:640px){.navlinks a.hide-sm{display:none}} .page-head{padding:150px 0 12px} .page-head .eyebrow{margin-bottom:14px} .page-head h1{font-size:clamp(2.6rem,8vw,5rem);line-height:.95} .tiers{display:grid;grid-template-columns:1fr;gap:20px;margin-top:36px} @media(min-width:820px){.tiers{grid-template-columns:1fr 1fr}} .tier{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:32px; display:flex;flex-direction:column} .tier.featured{border-color:rgba(242,193,44,.45)} .tier .name{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em; font-weight:600;font-size:14px;color:var(--accent);margin-bottom:14px} .tier .price{font-family:var(--display);font-weight:700;text-transform:uppercase; font-size:clamp(2rem,5vw,2.8rem);line-height:1;color:var(--chalk)} .tier .price small{display:block;font-family:var(--sans);font-weight:400;font-size:14px; text-transform:none;letter-spacing:0;color:var(--chalk-dim);margin-top:10px;line-height:1.5} .tier ul{list-style:none;padding:0;margin:24px 0 28px} .tier li{position:relative;padding-left:26px;margin-bottom:12px;color:var(--chalk-dim); font-size:15px;line-height:1.6} .tier li::before{content:"";position:absolute;left:0;top:9px;width:12px;height:7px; border-left:2px solid var(--accent);border-bottom:2px solid var(--accent); transform:rotate(-45deg)} .tier li.off{color:var(--chalk-faint)} .tier li.off::before{border-color:var(--chalk-faint);border-left:none;border-bottom:2px solid var(--chalk-faint); transform:none;top:12px;width:11px;height:0} .tier .cta-row{margin-top:auto} .feat{display:grid;grid-template-columns:1fr;gap:14px;align-items:start; border-top:1px solid var(--line);padding:30px 0} @media(min-width:820px){.feat{grid-template-columns:260px 1fr;gap:40px}} .feat h3{font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:22px;color:var(--chalk)} .feat .who{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em; color:var(--accent);margin-top:8px} .feat p{color:var(--chalk-dim);line-height:1.75;font-size:15px;margin:0 0 12px} .feat p:last-child{margin-bottom:0} /* ── motion ───────────────────────────────────────────────────────────────── Everything is VISIBLE by default. The .motion class is added by motion.js only once it knows it can animate, so a JS failure or a reduced-motion preference leaves a fully readable page rather than a blank one. */ .motion [data-reveal]{opacity:0;transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)} .motion [data-reveal].in{opacity:1;transform:none} /* Rescue variant: content the reader already scrolled past appears INSTANTLY. It cannot use the transition — a transition on an element far outside the viewport doesn't tick, so .in alone leaves it stuck at opacity 0 forever. Verified: with transition disabled the same element computes to opacity 1. */ .motion [data-reveal].in-now{opacity:1;transform:none;transition:none} .story{position:relative;height:300vh} .story-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column; align-items:center;justify-content:center;overflow:hidden;padding:96px 20px 20px} .story-field{width:min(92vw,900px);height:auto;display:block} .story-caps{position:relative;width:min(92vw,560px);height:118px;margin-top:8px} .story-cap{position:absolute;inset:0;background:var(--panel);border:1px solid var(--line); border-radius:16px;padding:20px 24px;text-align:center; opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease} .story-cap.on{opacity:1;transform:none} .story-cap h3{font-family:var(--display);font-weight:600;text-transform:uppercase; letter-spacing:.03em;font-size:22px;color:var(--chalk);margin:0 0 6px} .story-cap p{color:var(--chalk-dim);font-size:15px;line-height:1.6;margin:0} /* No sticky scrollytelling without JS — collapse to a plain, readable block. */ html:not(.motion) .story{height:auto} html:not(.motion) .story-sticky{position:static;height:auto} html:not(.motion) .story-caps{height:auto} html:not(.motion) .story-cap{position:static;opacity:1;transform:none;margin-bottom:12px} /* ── brand motifs from the Brand System v1 board ──────────────────────────── The lockup carries a PLAYCALLER descender; sections are numbered in mono the way the board labels itself; the wristband strip and PM patch are lifted from "06 / IN THE PRODUCT". */ .lockup .stack{display:flex;flex-direction:column;justify-content:center;gap:2px} .lockup .role{font-family:var(--mono);font-size:8px;letter-spacing:.34em; text-transform:uppercase;color:var(--chalk-faint);line-height:1} .slab{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase; color:var(--chalk-faint);display:flex;align-items:center;gap:14px;margin-bottom:18px} .slab b{color:var(--accent);font-weight:400} .slab::after{content:"";flex:1;height:1px;background:var(--line)} /* tactical metadata line — "TRIPS RIGHT · 11 PERSONNEL · PASS" */ .meta{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:var(--chalk-dim)} .meta b{color:var(--accent);font-weight:400} /* wristband call strip */ .band{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 16px; background:var(--board-2);border:1px solid var(--line);border-radius:12px} .chip{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em; font-size:15px;padding:7px 12px;border-radius:6px;line-height:1} .chip.gold{background:var(--accent);color:var(--board)} .chip.chalk{background:var(--chalk);color:var(--board)} .chip.flare{background:var(--flare);color:#1a0f0d} .chip.ghost{border:1px solid var(--line-2);color:var(--chalk-dim);font-family:var(--mono); font-weight:400;font-size:11px;letter-spacing:.18em;padding:8px 12px} .pillars{display:grid;grid-template-columns:1fr;gap:16px;margin-top:28px} @media(min-width:700px){.pillars{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.pillars{grid-template-columns:repeat(4,1fr)}} .pillar{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px} .pillar h3{font-family:var(--display);font-weight:700;text-transform:uppercase; font-size:19px;line-height:1.1;color:var(--accent);margin:0 0 10px} .pillar p{color:var(--chalk-dim);font-size:14px;line-height:1.65;margin:0} /* ── ambient motion ───────────────────────────────────────────────────────── Keyframes taken from the design system's Loading Screen (scl-*) so the site moves the way the product does. All CSS — no JS cost, no layout thrash — and all of it stops dead under prefers-reduced-motion at the bottom of this file. */ /* the chalkboard grid drifts, exactly one cell per cycle so it never seams */ @keyframes scl-grid-drift{ 0%{background-position:50% 0,0 0,0 0} 100%{background-position:50% 0,0 46px,46px 0} } body{animation:scl-grid-drift 14s linear infinite} /* the gold tile breathes its glow */ @keyframes scl-tile-pulse{ 0%,100%{box-shadow:0 10px 30px -12px rgba(242,193,44,.45)} 50%{box-shadow:0 12px 40px -8px rgba(242,193,44,.66)} } .tile{animation:scl-tile-pulse 2.4s ease-in-out infinite} /* hero routes chalk themselves on, hold, and reset — the product's own idle */ @keyframes scl-route-draw{ 0%{stroke-dashoffset:var(--len)} 38%{stroke-dashoffset:0} 88%{stroke-dashoffset:0} 100%{stroke-dashoffset:var(--len)} } .field [data-idle]{stroke-dasharray:var(--len);stroke-dashoffset:var(--len); animation:scl-route-draw 7s ease-in-out infinite} .field [data-idle]:nth-of-type(2){animation-delay:1.1s} /* players pop in behind the routes */ @keyframes scl-snap-pop{ 0%{transform:scale(0)}16%{transform:scale(1.12)}26%{transform:scale(1)}100%{transform:scale(1)} } .field [data-pop]{transform-box:fill-box;transform-origin:center; animation:scl-snap-pop 7s ease-in-out infinite} /* wristband chips land one after another, once */ @keyframes scl-chip-in{ 0%{opacity:0;transform:translateY(8px) scale(.96)} 60%{opacity:1;transform:translateY(0) scale(1.04)} 100%{opacity:1;transform:none} } .band .chip{animation:scl-chip-in .5s cubic-bezier(.2,.7,.3,1) backwards} .band .chip:nth-child(1){animation-delay:.35s} .band .chip:nth-child(2){animation-delay:.47s} .band .chip:nth-child(3){animation-delay:.59s} .band .chip:nth-child(4){animation-delay:.71s} /* hero type rises on load, line by line */ @keyframes scl-rise{0%{opacity:0;transform:translateY(22px)}100%{opacity:1;transform:none}} .hero .eyebrow{animation:scl-rise .7s cubic-bezier(.2,.7,.3,1) backwards;animation-delay:.05s} .hero h1{animation:scl-rise .8s cubic-bezier(.2,.7,.3,1) backwards;animation-delay:.15s} .hero .sub{animation:scl-rise .8s cubic-bezier(.2,.7,.3,1) backwards;animation-delay:.3s} .hero .hero-cta{animation:scl-rise .8s cubic-bezier(.2,.7,.3,1) backwards;animation-delay:.42s} /* the CTA catches a light sweep, the way a wet field does under the lights */ @keyframes scl-shimmer{0%{transform:translateX(-140%)}100%{transform:translateX(140%)}} .btn:not(.ghost){position:relative;overflow:hidden} .btn:not(.ghost)::after{content:"";position:absolute;top:0;bottom:0;width:38%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent); animation:scl-shimmer 4.5s ease-in-out infinite;animation-delay:1.6s;pointer-events:none} /* section headings underline themselves as they arrive */ .motion h2{position:relative} .motion [data-reveal] h3{transition:color .3s ease} /* ⚠️ Everything above stops here. An animated grid behind text is exactly what motion-sensitivity settings exist for. */ @media (prefers-reduced-motion: reduce){ body,.tile,.field [data-idle],.field [data-pop],.band .chip, .hero .eyebrow,.hero h1,.hero .sub,.hero .hero-cta,.btn:not(.ghost)::after{ animation:none !important } .field [data-idle]{stroke-dashoffset:0} }