/* ============================================================================ Social Paradigm — "Signal from Noise" experience layer. Three tiers share this file: tier 1 full 3D journey (desktop) tier 2 particle hero + fast native sections (mobile) tier 3 html.sp-static — no WebGL at all; this must look like a finished site on its own, because it is what search engines, screen readers and reduced-motion visitors get. The JS sets --v (0..1 visibility) per stage in tiers 1-2. Everything falls back to --v:1, so tier 3 needs no JS to be fully visible. ============================================================================ */ :root{ --x-bg:#08080a; --x-ink:#f4f4f2; --x-dim:#8d8d92; --x-yellow:#FFCA3A; --x-line:rgba(255,255,255,.11); /* height of the mobile CTA bar; other fixed UI measures against it */ --sp-bar-h:calc(3.6rem + env(safe-area-inset-bottom)); /* Sized by HEIGHT first so the card, its counter and the CTA bar all fit one screen; the width follows from 9:16. 84vw is the portrait ceiling. */ --sp-card-h:min(52svh, 149vw); --sp-card:calc(var(--sp-card-h) * 9 / 16); --x-card:rgba(255,255,255,.035); --x-pad:max(clamp(1.25rem, 5vw, 5rem), env(safe-area-inset-left), env(safe-area-inset-right)); } html[data-theme]{ background:var(--x-bg); } html{ overflow-x:hidden; } body.sp-x{ background:var(--x-bg); color:var(--x-ink); max-width:100vw; font-family:"Inter",system-ui,sans-serif; overflow-x:hidden; } body.sp-x ::selection{ background:var(--x-yellow); color:#111; } /* A CTA jump here crosses ~10,000px of morph; smooth-scrolling it drags the whole sequence past at speed. data-tier is set by the bootstrap on this page only. */ html[data-tier]{ scroll-behavior:auto; } /* ---------- the stage: canvas behind, copy in front ---------- */ .sp-x-canvas{ position:fixed; inset:0; width:100%; height:100vh; display:block; z-index:0; pointer-events:none; } html.sp-static .sp-x-canvas{ display:none; } .sp-x-grain{ position:fixed; inset:-4%; z-index:1; pointer-events:none; opacity:.045; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); animation:sp-x-grain 700ms steps(2) infinite; } @keyframes sp-x-grain{ 0%{transform:translate(0,0)} 50%{transform:translate(-2%,1%)} 100%{transform:translate(1%,-2%)} } @media (prefers-reduced-motion: reduce){ .sp-x-grain{ animation:none; opacity:.03; } } .sp-x-main{ position:relative; z-index:2; } /* ---------- stages ---------- */ .sp-x-stage{ /* border-box or min-height:100svh PLUS 26vh of padding makes every stage 126vh tall, so centred content sits ~13vh low and the hero CTA falls below the fold on every laptop (measured: 1366x768, 1440x900 and 1920x1080 all cut it off) */ box-sizing:border-box; min-height:100svh; padding:14vh var(--x-pad) 12vh; display:flex; flex-direction:column; justify-content:center; position:relative; } .sp-x-copy{ width:100%; max-width:1180px; margin:0 auto; } /* --v defaults to 1, so a stalled or failed engine can never hide the copy. The engine writes it from a batched read (see syncOverlay in experience.js). */ .sp-x-stage > *{ opacity:var(--v,1); transform:translateY(calc((1 - var(--v,1)) * 26px)); transition:opacity .18s linear; } html.sp-static .sp-x-stage > *{ opacity:1; transform:none; } /* ---------- type ---------- */ .sp-x-eyebrow{ font-family:"Space Grotesk",sans-serif; font-size:.76rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--x-yellow); margin:0 0 1.1rem; } .sp-x-h1{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:clamp(2.1rem,5.2vw,4.9rem); line-height:1.0; letter-spacing:-.035em; text-wrap:balance; margin:0 0 1.6rem; } .sp-x-h1 span{ display:block; } /* the copy sits over a moving particle field — give the big type its own ground */ html:not(.sp-static) .sp-x-h1, html:not(.sp-static) .sp-x-h, html:not(.sp-static) .sp-x-count{ text-shadow:0 2px 22px rgba(0,0,0,.95), 0 0 44px rgba(0,0,0,.55); } html:not(.sp-static) .sp-x-sub, html:not(.sp-static) .sp-x-eyebrow{ text-shadow:0 1px 18px rgba(0,0,0,.9); } .sp-x-h1 em{ font-style:normal; color:var(--x-yellow); } .sp-x-h{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:clamp(1.9rem,4.4vw,3.6rem); line-height:1.04; letter-spacing:-.028em; margin:0 0 1.2rem; max-width:20ch; } .sp-x-h3{ font-family:"Space Grotesk",sans-serif; font-size:clamp(1.4rem,2.6vw,2.1rem); margin:0 0 .9rem; letter-spacing:-.02em; } .sp-x-sub{ color:var(--x-dim); font-size:clamp(1rem,1.35vw,1.16rem); line-height:1.65; max-width:56ch; margin:0 0 1.1rem; } .sp-x-hint{ color:#6e6e75; font-size:.88rem; margin:1rem 0 0; } /* ---------- buttons ---------- */ .sp-x-btns{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem; } .sp-x-btns--center{ justify-content:center; margin-top:3rem; } .sp-x-btn{ display:inline-flex; align-items:center; gap:.55rem; padding:.95rem 1.6rem; border-radius:100px; text-decoration:none; font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:.96rem; border:1px solid var(--x-line); color:var(--x-ink); background:transparent; transition:background .25s, color .25s, border-color .25s, transform .25s; } .sp-x-btn span{ transition:transform .25s; } .sp-x-btn:hover{ border-color:var(--x-yellow); transform:translateY(-2px); } .sp-x-btn:hover span{ transform:translateX(4px); } .sp-x-btn--solid{ background:var(--x-yellow); color:#111; border-color:var(--x-yellow); } .sp-x-btn--solid:hover{ background:#ffd964; } /* ---------- 0. hero ---------- */ /* The hero starts BELOW a ~4.2rem sticky header, so a full 100svh stage overflows by that much and the generic 14vh/12vh padding pushes the CTAs off a laptop screen. Subtract the header and tighten the padding so the primary CTA is above the fold at 1366x768 — the shortest common laptop viewport. */ .sp-x-stage--hero{ min-height:calc(100svh - 4.2rem); padding-block:6vh 9vh; } .sp-x-copy--hero{ max-width:min(62ch, 900px); } .sp-x-scrollcue{ position:absolute; left:50%; bottom:3.2rem; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.6rem; font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:#5d5d64; } .sp-x-scrollcue span{ width:1px; height:46px; background:linear-gradient(var(--x-yellow),transparent); } /* ---------- 1. face ---------- */ .sp-x-copy--face{ max-width:min(46ch, 46vw); margin-left:0; } .sp-x-sig{ display:flex; flex-direction:column; gap:.15rem; margin-top:2.4rem; font-size:.95rem; } .sp-x-sig strong{ font-family:"Space Grotesk",sans-serif; } .sp-x-sig span{ color:var(--x-dim); font-size:.86rem; } .sp-x-fallback-portrait{ display:none; width:min(320px,60vw); height:auto; border-radius:14px; margin-bottom:1.4rem; box-shadow:0 30px 70px rgba(0,0,0,.6); } html.sp-static .sp-x-fallback-portrait{ display:block; } /* ---------- 2. feed ---------- */ .sp-x-stage--feed{ justify-content:space-between; } /* the 3D corridor is 12 panels long — give the dolly the scroll to cross it */ html.sp-tier-1 .sp-x-stage--feed{ min-height:240svh; } .sp-x-copy--feed{ text-align:center; } .sp-x-copy--feed .sp-x-h, .sp-x-copy--feed .sp-x-sub{ margin-left:auto; margin-right:auto; } .sp-x-reels{ display:flex; gap:1.1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:2.4rem .25rem 1rem; max-width:100%; scrollbar-width:thin; scrollbar-color:var(--x-yellow) #1c1c1f; } .sp-x-reel{ flex:0 0 auto; scroll-snap-align:center; width:272px; height:484px; object-fit:cover; border-radius:16px; background:#000; cursor:pointer; box-shadow:0 20px 50px rgba(0,0,0,.6); transition:transform .3s, box-shadow .3s; } .sp-x-reel:hover{ transform:translateY(-6px) scale(1.02); } /* tier 1 flies through the reels in 3D, so the DOM strip stands down */ .sp-x-reelbar{ display:none; } @media (min-width:901px){ html.sp-tier-1 .sp-x-reels{ display:none; } } /* Tier 1 gets the same counter / dots / SOUND control as the phone carousel, floated over the corridor. It is fixed rather than in flow because the feed stage is 240svh tall — anything in flow scrolls away on the first panel. .is-live is written by updatePanels, so it exists only while reels are on screen and can never sit over the hero or the numbers. */ @media (min-width:901px){ html.sp-tier-1 .sp-x-reelbar{ display:flex; align-items:center; gap:1rem; position:fixed; left:50%; bottom:2.2rem; transform:translate(-50%,1.4rem); z-index:12; margin:0; padding:.55rem .55rem .55rem 1.1rem; border:1px solid var(--x-line); border-radius:999px; background:rgba(12,12,14,.72); backdrop-filter:blur(10px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .4s ease, transform .4s ease, visibility .4s; } html.sp-tier-1 .sp-x-reelbar.is-live{ opacity:1; visibility:visible; transform:translate(-50%,0); pointer-events:auto; } html.sp-tier-1 .sp-x-reelnum{ font-family:"Space Grotesk",sans-serif; font-size:.8rem; letter-spacing:.14em; color:var(--x-dim); font-variant-numeric:tabular-nums; } html.sp-tier-1 .sp-x-reeldots{ display:flex; gap:.34rem; } html.sp-tier-1 .sp-x-reeldots i{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.22); transition:background .25s, transform .25s; } html.sp-tier-1 .sp-x-reeldots i.is-on{ background:var(--x-yellow); transform:scale(1.5); } html.sp-tier-1 .sp-x-reelsound{ font:inherit; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--x-ink); background:rgba(255,255,255,.06); border:1px solid var(--x-line); border-radius:999px; padding:.5rem 1rem; cursor:pointer; transition:background .25s, color .25s, border-color .25s; } html.sp-tier-1 .sp-x-reelsound:hover{ border-color:var(--x-yellow); } html.sp-tier-1 .sp-x-reelsound[aria-pressed="true"]{ background:var(--x-yellow); color:#111; border-color:var(--x-yellow); } } /* ---------- 3. numbers ---------- */ .sp-x-stage--numbers{ justify-content:flex-start; padding-top:15vh; } .sp-x-copy--numbers{ text-align:center; } .sp-x-stats{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(2rem,7vw,7rem); margin:1.5rem 0 2rem; } .sp-x-stat{ display:flex; flex-direction:column; align-items:center; gap:.35rem; } .sp-x-count{ font-family:"Space Grotesk",sans-serif; font-weight:700; letter-spacing:-.04em; font-size:clamp(3.2rem,10vw,7.5rem); line-height:1; color:var(--x-yellow); font-variant-numeric:tabular-nums; } .sp-x-stat-l{ font-family:"Space Grotesk",sans-serif; font-size:1.02rem; } .sp-x-stat-n{ color:var(--x-dim); font-size:.86rem; max-width:30ch; line-height:1.5; } .sp-x-copy--numbers .sp-x-hint{ margin-inline:auto; max-width:52ch; } /* ---------- 4. capabilities ---------- */ .sp-x-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.1rem; margin-top:2.5rem; } /* Five points in an auto-fit grid resolved to four columns, so card 05 sat alone next to three empty cells — a hole big enough to read as a bug. Pin the column count to a divisor-friendly number and let the fifth card run the full width as a horizontal statement, so the last row always closes. */ .sp-x-cards--why{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); } @media (min-width:620px){ .sp-x-cards--why{ grid-template-columns:repeat(2,minmax(0,1fr)); } .sp-x-cards--why > :last-child{ grid-column:1 / -1; } } @media (min-width:1040px){ .sp-x-cards--why{ grid-template-columns:repeat(4,minmax(0,1fr)); } .sp-x-cards--why > :last-child{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); column-gap:clamp(2rem,5vw,4rem); align-items:center; padding-block:clamp(1.6rem,3vw,2.2rem); } .sp-x-cards--why > :last-child .sp-x-card-n{ grid-area:1 / 1; margin-bottom:.5rem; } .sp-x-cards--why > :last-child h3{ grid-area:2 / 1; margin:0; font-size:clamp(1.3rem,2vw,1.75rem); } .sp-x-cards--why > :last-child p{ grid-area:1 / 2 / 3 / 3; font-size:1.02rem; } } .sp-x-card{ background:rgba(16,16,19,.74); border:1px solid var(--x-line); border-radius:18px; padding:1.9rem 1.7rem; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); transition:border-color .3s, background .3s, transform .3s; } .sp-x-card:hover{ border-color:rgba(255,202,58,.5); background:rgba(255,255,255,.06); transform:translateY(-4px); } .sp-x-card-n{ font-family:"Space Grotesk",sans-serif; font-weight:700; color:var(--x-yellow); font-size:.95rem; margin:0 0 .7rem; } .sp-x-card h3{ font-family:"Space Grotesk",sans-serif; font-size:1.22rem; margin:0 0 .5rem; letter-spacing:-.015em; } .sp-x-card p{ color:var(--x-dim); font-size:.95rem; line-height:1.6; margin:0; } .sp-x-wid, .sp-x-why, .sp-x-fit, .sp-x-about, .sp-x-faq, .sp-x-end{ margin-top:clamp(5rem,12vh,9rem); } .sp-x-wid{ max-width:60ch; } /* ---------- 5. audience ---------- */ .sp-x-reviews{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.1rem; margin-top:2.5rem; } .sp-x-review{ margin:0; background:rgba(16,16,19,.74); border:1px solid var(--x-line); border-radius:18px; padding:1.8rem 1.6rem; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); } .sp-x-stars{ color:var(--x-yellow); letter-spacing:.18em; font-size:.86rem; margin:0 0 .9rem; } .sp-x-review blockquote{ margin:0 0 1.2rem; font-size:.97rem; line-height:1.62; color:#dcdcdd; } .sp-x-review figcaption{ display:flex; flex-direction:column; gap:.1rem; } .sp-x-review figcaption strong{ font-family:"Space Grotesk",sans-serif; font-size:.95rem; } .sp-x-review figcaption span{ color:var(--x-dim); font-size:.82rem; } .sp-x-fit-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.1rem; margin-top:2rem; } .sp-x-fit-col{ background:rgba(16,16,19,.74); border:1px solid var(--x-line); border-radius:18px; padding:1.9rem 1.7rem; } .sp-x-fit-head{ font-family:"Space Grotesk",sans-serif; font-size:1.05rem; margin:0 0 1.1rem; } .sp-x-fit-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem; } .sp-x-fit-col li{ color:var(--x-dim); font-size:.95rem; line-height:1.55; padding-left:1.6rem; position:relative; } .sp-x-fit-col li::before{ position:absolute; left:0; top:0; font-weight:700; } .sp-x-fit-col--no li::before{ content:"\00d7"; color:#7a5252; } .sp-x-fit-col--yes li::before{ content:"\2713"; color:var(--x-yellow); } .sp-x-fit-col li strong{ color:var(--x-ink); } .sp-x-bigquote{ margin:3rem auto 0; max-width:26ch; text-align:center; border:0; padding:0; font-family:"Space Grotesk",sans-serif; font-weight:600; letter-spacing:-.02em; font-size:clamp(1.4rem,3.2vw,2.4rem); line-height:1.2; } .sp-x-about{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem,5vw,4rem); align-items:center; } .sp-x-about img{ width:100%; height:auto; border-radius:22px; box-shadow:0 30px 70px rgba(0,0,0,.55); } @media (max-width:820px){ .sp-x-about{ grid-template-columns:1fr; } } /* ---------- 6. signal / form ---------- */ .sp-x-copy--form{ max-width:760px; } .sp-x-form{ display:flex; flex-direction:column; gap:1rem; margin-top:2.4rem; } .sp-x-field{ display:flex; flex-direction:column; gap:.45rem; } .sp-x-field > span{ font-family:"Space Grotesk",sans-serif; font-size:.85rem; color:#b6b6ba; } .sp-x-field input, .sp-x-field textarea{ /* without this the 1rem padding + border push the field past its column */ box-sizing:border-box; width:100%; font:inherit; font-size:1rem; color:var(--x-ink); background:rgba(255,255,255,.045); border:1px solid var(--x-line); border-radius:12px; padding:.9rem 1rem; resize:vertical; transition:border-color .25s, background .25s; } .sp-x-field input::placeholder, .sp-x-field textarea::placeholder{ color:#5a5a60; } .sp-x-field input:focus, .sp-x-field textarea:focus{ outline:none; border-color:var(--x-yellow); background:rgba(255,255,255,.07); } .sp-x-submit{ align-self:flex-start; margin-top:.5rem; cursor:pointer; font-size:1rem; } @media (min-width:620px){ .sp-x-form{ display:grid; grid-template-columns:1fr 1fr; } .sp-x-field--link, .sp-x-field--about, .sp-x-submit, .sp-x-form .sp-x-hint, .sp-x-form-fallback, .sp-x-form-done{ grid-column:1 / -1; } } .sp-x-form-fallback, .sp-x-form-done{ font-size:.92rem; margin:.4rem 0 0; } .sp-x-form-fallback{ color:#ffb4b4; } .sp-x-form-done{ color:var(--x-yellow); } .sp-x-form-fallback a{ color:var(--x-yellow); } .sp-x-faq-i{ border-bottom:1px solid var(--x-line); padding:1.15rem 0; } .sp-x-faq-i summary{ cursor:pointer; list-style:none; font-family:"Space Grotesk",sans-serif; font-size:1.05rem; display:flex; justify-content:space-between; gap:1rem; align-items:center; } .sp-x-faq-i summary::-webkit-details-marker{ display:none; } .sp-x-faq-i summary::after{ content:"+"; color:var(--x-yellow); font-size:1.3rem; line-height:1; transition:transform .25s; } .sp-x-faq-i[open] summary::after{ transform:rotate(45deg); } .sp-x-faq-i p{ color:var(--x-dim); font-size:.96rem; line-height:1.65; margin:.9rem 0 0; max-width:70ch; } .sp-x-end{ text-align:center; } .sp-x-end .sp-x-h, .sp-x-end .sp-x-sub{ margin-inline:auto; } /* ---------- 7. close / wordmark ---------- */ /* The cloud spells SOCIAL PARADIGM across the middle of this stage, so the copy sits in the lower third and leaves it the room. Nothing else is on the screen. */ .sp-x-stage--close{ justify-content:flex-end; padding-bottom:16vh; } .sp-x-copy--close{ max-width:min(56ch, 760px); } .sp-x-stage--close .sp-x-end{ margin-top:0; } /* No --sp-bar-h here: syncRail keeps the sticky CTA bar DOWN on the closing act (it has its own buttons), so reserving its height only widens the gap above. */ @media (max-width:900px){ .sp-x-stage--close{ justify-content:flex-end; padding-bottom:11vh; } } /* ---------- loader ---------- */ .sp-x-loader{ position:fixed; inset:0; z-index:60; background:var(--x-bg); display:grid; place-items:center; transition:opacity .7s ease, visibility .7s; } .sp-x-loader.is-done{ opacity:0; visibility:hidden; pointer-events:none; } html.sp-static .sp-x-loader{ display:none; } .sp-x-loader-inner{ display:flex; flex-direction:column; align-items:center; gap:1.1rem; } .sp-x-loader-word{ font-family:"Space Grotesk",sans-serif; font-size:.74rem; letter-spacing:.42em; color:#5f5f66; } .sp-x-loader-bar{ width:min(260px,54vw); height:1px; background:rgba(255,255,255,.13); overflow:hidden; } .sp-x-loader-bar i{ display:block; height:100%; width:0; background:var(--x-yellow); transition:width .25s ease; } .sp-x-loader-pct{ font-family:"Space Grotesk",sans-serif; font-size:.74rem; color:var(--x-yellow); font-variant-numeric:tabular-nums; } /* ---------- act rail ---------- */ .sp-x-rail{ position:fixed; left:clamp(.9rem,2vw,1.7rem); top:50%; transform:translateY(-50%); z-index:45; display:flex; flex-direction:column; gap:.55rem; } html.sp-static .sp-x-rail{ display:none; } /* no frame loop -> no --p to render */ .sp-x-rail a{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:#6d6d74; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-family:"Space Grotesk",sans-serif; padding:.18rem 0; } .sp-x-rail i{ width:16px; height:1px; background:currentColor; flex:0 0 auto; transition:width .3s cubic-bezier(.21,.7,.25,1), background .3s; } .sp-x-rail span{ opacity:0; transform:translateX(-4px); transition:opacity .3s, transform .3s; } .sp-x-rail a:hover span, .sp-x-rail a.is-on span{ opacity:1; transform:none; } .sp-x-rail a:hover, .sp-x-rail a.is-on{ color:var(--x-yellow); } .sp-x-rail a.is-on i{ width:30px; } /* ---------- cursor (fine pointers only) ---------- */ .sp-x-cursor{ display:none; } @media (hover:hover) and (pointer:fine){ html.sp-tier-1 .sp-x-cursor{ display:block; position:fixed; top:0; left:0; z-index:55; pointer-events:none; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; border:1px solid rgba(255,202,58,.75); transition:width .25s, height .25s, margin .25s, background .25s; will-change:transform; } html.sp-tier-1 .sp-x-cursor.is-hot{ width:52px; height:52px; margin:-26px 0 0 -26px; background:rgba(255,202,58,.14); } } /* ---------- tier 3: give the static page real ground ---------- */ html.sp-static .sp-x-stage:nth-child(even){ background:rgba(255,255,255,.022); } html.sp-static .sp-x-stage{ min-height:0; padding-block:clamp(4rem,11vh,8rem); } html.sp-static .sp-x-scrollcue{ display:none; } html.sp-static .sp-x-copy--face, html.sp-static .sp-x-copy--hero{ max-width:none; } /* ---------- header / footer over the canvas ---------- */ body.sp-x .sp-header{ position:sticky; top:0; z-index:40; background:rgba(8,8,10,.72); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--x-line); } body.sp-x .sp-footer{ position:relative; z-index:2; background:#050506; border-top:1px solid var(--x-line); } body.sp-x .sp-theme-toggle{ display:none; } /* the experience is dark-only */ /* ============================================================ MOBILE PASS (tiers 2 and 3 — phones) ============================================================ */ /* only tier 1 actually flies through the corridor; everyone else swipes */ .sp-x-hint-swipe{ display:none; } html:not(.sp-tier-1) .sp-x-hint-fly{ display:none; } html:not(.sp-tier-1) .sp-x-hint-swipe{ display:inline; } /* body copy sat on the raw particle field and went muddy — same shadow the eyebrow already used, extended to the text people actually have to read */ html:not(.sp-static) .sp-x-sub, html:not(.sp-static) .sp-x-hint{ text-shadow:0 0 10px rgba(0,0,0,.95), 0 1px 3px rgba(0,0,0,.9); } /* ============================================================ MOBILE LAYER ------------------------------------------------------------ 900px is THE mobile breakpoint and it MUST stay in step with the `Math.min(innerWidth, innerHeight) <= 900` test in functions.php. Everything mobile lives here, keyed on the viewport and NOT on .sp-tier-2 — so it also covers tier 3 (reduced motion, no WebGL) and survives a desktop window being dragged narrow after boot. Any other breakpoint on this page must be a min-width content-fit rule and must say why. ============================================================ */ @media (max-width:900px){ .sp-x-copy--hero, .sp-x-copy--face{ max-width:none; } /* 11vh + 9vh + a bar-height reservation on EVERY stage put ~226px of nothing between two text sections, which reads as the page having ended. Only a section that actually ends on a button needs to clear the fixed CTA bar, so that reservation moves onto the trailing button group (stages 0, 2, 4 and 7) and the four text-ending stages get their space back. */ .sp-x-stage{ padding-block:6vh 5vh; } .sp-x-stage .sp-x-btns:last-child{ margin-bottom:var(--sp-bar-h); } /* flex-start plus a 15vh top pad left ~300px dead under the stats on a phone */ .sp-x-stage--numbers{ justify-content:center; padding-top:6vh; } /* ---- type: 12px eyebrows and #8d8d92 body don't survive a phone ---- */ .sp-x-eyebrow{ font-size:.84rem; letter-spacing:.16em; } .sp-x-hint{ font-size:.95rem; color:#8b8b93; } .sp-x-sub{ font-size:1.05rem; color:#adadb4; } .sp-x-faq-i summary{ min-height:44px; padding:.4rem 0; } .sp-x-faq-i summary::after{ font-size:1.5rem; } /* the portrait is centred on mobile (no side copy column to clear), so the copy drops to the lower half rather than sitting on top of his face */ .sp-x-stage--face{ justify-content:flex-end; } /* ---- hero: the empty band was type scale, not layout ---- */ .sp-x-h1{ font-size:clamp(2.5rem, 11vw, 3.6rem); } .sp-x-stage--hero{ padding-top:7vh; } /* justify-content centres the flex ITEM; a label long enough to wrap still set its own lines ragged-left inside it. Centre the text too, and size it to the viewport so the whole sentence stays on one line down to ~340px. */ .sp-x-btns .sp-x-btn{ flex:1 1 100%; justify-content:center; text-align:center; line-height:1.25; font-size:clamp(.78rem, 3.4vw, .95rem); padding:.95rem .9rem; } /* a long label wraps to two lines and the arrow, being its own flex item, strands itself at the far right — it is decorative, so drop it there */ .sp-x-btns .sp-x-btn > span[aria-hidden]{ display:none; } /* out of absolute and into flow: the hero starts under a ~66px sticky header, so bottom:3.2rem was already partly below the fold */ .sp-x-scrollcue{ position:static; transform:none; flex-direction:row; align-items:center; gap:.5rem; margin:1.9rem auto 0; } .sp-x-scrollcue span{ width:34px; height:1px; background:linear-gradient(90deg,var(--x-yellow),transparent); } /* ---- the act rail becomes a progress hairline above the header ---- */ .sp-x-rail{ position:fixed; top:0; left:0; right:0; bottom:auto; transform:none; display:block; height:3px; z-index:41; pointer-events:none; gap:0; background:repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 calc(100% / 7 - 2px), transparent 0 calc(100% / 7)); } .sp-x-rail::after{ content:""; display:block; height:100%; width:100%; background:var(--x-yellow); transform-origin:0 50%; transform:scaleX(var(--p,0)); will-change:transform; } .sp-x-rail a{ display:none; } /* the menu is the navigation; this is an indicator */ /* ---- reels: full-bleed swipe carousel ---- */ /* the copy above the carousel has to leave room for card + counter + CTA bar */ .sp-x-stage--feed{ padding-block:5vh 9vh; } .sp-x-copy--feed .sp-x-h{ font-size:clamp(1.8rem, 8vw, 2.4rem); } .sp-x-copy--feed .sp-x-sub{ margin-bottom:.4rem; } .sp-x-copy--feed .sp-x-hint{ margin-top:.5rem; } .sp-x-reels{ gap:.6rem; margin-inline:calc(var(--x-pad) * -1); /* the side padding is what lets card 1 and card 12 park centred */ padding:1.2rem calc((100vw - var(--sp-card)) / 2) 1.2rem; overscroll-behavior-x:contain; /* no swipe-to-go-back on iOS */ scrollbar-width:none; } .sp-x-reels::-webkit-scrollbar{ display:none; } .sp-x-reel{ /* width and height are both explicit and already 9:16 — a redundant aspect-ratio on a