/* ============================================================ PRISM — homepage scroll story Loaded only by index.html, after style.css. Everything lives under .story-root or .story so nothing can leak into the pages that share style.css. All six sections use ONE drawing system: the same grid weight, stroke widths, label treatment and frame — only --sec-rgb changes per act. ============================================================ */ /* ── display face ──────────────────────────────────────────── Playfair Display, self-hosted (fonts/), latin only — the unicode-range means a translated page never downloads it and simply keeps the sans stack. Headlines only; body copy stays in the UI sans, which is far more readable at 16px. */ @font-face{font-family:"Playfair Display";font-style:normal;font-weight:600; font-display:swap;src:url(fonts/playfair-display-latin-600-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Playfair Display";font-style:normal;font-weight:700; font-display:swap;src:url(fonts/playfair-display-latin-700-normal.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Playfair Display";font-style:italic;font-weight:600; font-display:swap;src:url(fonts/playfair-display-latin-600-italic.woff2) format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} :root{--display:"Playfair Display","Iowan Old Style","Palatino Linotype",Palatino,Georgia,ui-serif,serif} /* every section heading on this page speaks in the display face, so the story and the product sections below it read as one document. Scoped by the fact that story.css is loaded by index.html alone. */ h2{font-family:var(--display);font-weight:600;letter-spacing:-.018em;line-height:1.12} /* ── the lede ──────────────────────────────────────────────── One screen that says what the product is before the story starts arguing for it: mark, claim, proof, two ways in. It is NOT a .story section — it has no colour wash and no rail station, so the rail still stays hidden until the story proper begins. */ .lede{position:relative;z-index:2;min-height:100vh;min-height:100svh; display:grid;align-items:center; padding:clamp(104px,13vh,150px) 0 clamp(96px,12vh,140px); text-align:center;overflow:hidden;overflow:clip} .lede::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(72% 46% at 50% 4%,rgba(34,211,238,.11),transparent 70%)} .lede .wrap{max-width:1180px} .lede-title{font-family:var(--display);font-weight:600; font-size:clamp(35px,5.4vw,70px);line-height:1.08;letter-spacing:-.02em; color:#f5f7fa;margin:0 auto;max-width:16ch;text-wrap:balance} /* background-clip:text paints only inside the inline box, and an italic serif overhangs it: the 4 leans past its own left edge and the top of its diagonal was being clipped away. The padding widens the painted box and the matching negative margin keeps the line length unchanged. Vertical padding on an inline box costs no layout at all. */ .lede-title em{font-style:italic;font-weight:600; padding:.06em .14em;margin-inline:-.14em; background:linear-gradient(100deg,var(--bull),var(--cyan)); -webkit-background-clip:text;background-clip:text;color:transparent} .lede-sub{margin:22px auto 0;max-width:60ch; font-size:clamp(15px,1.35vw,18px);line-height:1.66;color:var(--muted)} .lede-ctas{margin-top:clamp(28px,3.4vh,38px)} /* rating — verified buyer reviews via CoinPayments */ .lede-rating{margin:22px auto 0;display:inline-flex;align-items:center;gap:9px; font-size:13.5px;color:var(--muted)} .lede-rating b{color:var(--text);font-weight:700} .lede-rating .sep{color:var(--faint)} .lede-rating .stars{display:inline-flex;gap:3px} .lede-rating .stars svg{width:14px;height:14px;fill:var(--gold);display:block} .lede-rating .verified{display:inline-flex;align-items:center;gap:5px; margin-left:2px;padding:4px 10px 4px 8px;border-radius:999px; font-size:11.5px;font-weight:700;letter-spacing:.04em; color:var(--bull);background:rgba(0,229,176,.1);border:1px solid rgba(0,229,176,.3)} .lede-rating .verified svg{width:13px;height:13px;fill:currentColor;display:block} .lede-note{margin:14px 0 0;font-size:12.5px;color:var(--faint)} @media(max-width:560px){ .lede{padding-top:92px} .lede-ctas .btn{width:100%} } .story-root{position:relative} /* ── atmosphere ────────────────────────────────────────────── A fixed wash + vignette behind everything. JS retunes --acc-rgb as each act becomes current, so the colour of the page drifts from one section into the next instead of changing at a hard edge. */ .story-air,.story-vig{position:sticky;top:0;height:100vh;margin-bottom:-100vh; z-index:0;pointer-events:none} .story-air{ background:radial-gradient(78% 52% at 50% 40%,rgba(var(--acc-rgb,34,211,238),.085),transparent 72%); transition:background 1.1s cubic-bezier(.4,0,.2,1)} .story-vig{background:radial-gradient(125% 88% at 50% 50%,transparent 52%,rgba(2,5,12,.62))} /* ── act ───────────────────────────────────────────────────── Consistent full-viewport height across every section. */ .story{position:relative;z-index:2; min-height:100vh;min-height:100svh; display:grid;align-items:center; padding:112px 0 92px; overflow:hidden;overflow:clip; --sec-rgb:34,211,238;--bg-rgb:7,11,20} .story[data-acc="gold"]{--sec-rgb:251,191,36} .story[data-acc="sepia"]{--sec-rgb:201,180,135} .story[data-acc="bull"]{--sec-rgb:0,229,176} /* ── the colour of the room ────────────────────────────────── Each act paints its own wash, faded in and out by --cw (JS, from how centred the act is). Because the acts are stacked and each wash is transparent at its own top and bottom edge, the page cross-dissolves from one colour to the next at the seam instead of cutting. Deliberately deep and desaturated: these sit behind white type all day. */ .story[data-bg="red"] {--bg-rgb:46,10,18} .story[data-bg="orange"]{--bg-rgb:48,24,7} .story[data-bg="blue"] {--bg-rgb:10,32,48} .story[data-bg="black"] {--bg-rgb:5,8,14} .story::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg, rgba(var(--bg-rgb),0) 0, rgba(var(--bg-rgb),.95) 26%, rgba(var(--bg-rgb),.95) 74%, rgba(var(--bg-rgb),0) 100%); opacity:var(--cw,0);will-change:opacity} .story__grid{width:100%;max-width:1180px;margin:0 auto;padding:0 28px; display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr); gap:clamp(30px,4.6vw,72px);align-items:center} /* ── copy ───────────────────────────────────────────────────── */ .story__copy{opacity:var(--c,1); transform:translate3d(0,calc(var(--p,0) * 34px),0); will-change:opacity,transform} .story__idx{display:flex;align-items:center;gap:12px; font:700 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.26em;color:var(--faint);text-transform:uppercase} .story__idx b{color:rgb(var(--sec-rgb));font-weight:700} .story__idx i{flex:1;max-width:70px;height:1px;background:linear-gradient(90deg,rgb(var(--sec-rgb)),transparent);opacity:.55} .story__title{font-family:var(--display); font-size:clamp(31px,4.8vw,62px);font-weight:600;line-height:1.1; letter-spacing:-.012em;color:#f5f7fa;margin:20px 0 20px;text-wrap:balance} .story__body{color:var(--muted);font-size:clamp(15px,1.2vw,17.5px);line-height:1.74;max-width:47ch} /* the emphasis inside the copy picks up the display italic — it is the one place the "written" voice touches the body text */ .story__body em{font-family:var(--display);font-style:italic;font-weight:600; color:var(--text);font-size:1.06em} /* ── visual frame ───────────────────────────────────────────── */ .story__vis{opacity:var(--cv,1); transform:translate3d(0,calc(var(--p,0) * -44px),0); will-change:opacity,transform} .vis-frame{position:relative;border:1px solid var(--line);border-radius:18px; background:linear-gradient(180deg,rgba(255,255,255,.022),transparent 40%),#070c17; padding:clamp(12px,1.5vw,20px); box-shadow:0 44px 96px -44px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.05)} .vis-frame::after{content:"";position:absolute;inset:-1px;border-radius:18px;pointer-events:none; background:linear-gradient(180deg,rgba(var(--sec-rgb),.16),transparent 55%); -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000); -webkit-mask-composite:xor;mask-composite:exclude;padding:1px} .vis-svg{width:100%;height:auto;display:block} /* ── the shared drawing system ──────────────────────────────── */ .s-grid{stroke:rgba(148,163,184,.085);stroke-width:1} .s-line{fill:none;stroke:rgb(var(--sec-rgb));stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round} .s-fill{fill:rgb(var(--sec-rgb));opacity:.06} .s-note{fill:var(--faint);font-size:11px;letter-spacing:.16em;text-transform:uppercase} .s-tag{fill:var(--faint);font-size:11px;font-weight:700;letter-spacing:.16em} .s-tag-gold{fill:rgba(251,191,36,.9)} /* draw-in: pathLength="1" removes any need to measure */ .s-draw{stroke-dasharray:1;stroke-dashoffset:1; transition:stroke-dashoffset 2s cubic-bezier(.25,.6,.25,1) .12s} .story.in .s-draw{stroke-dashoffset:0} /* 01 · cycles */ .s-halv line{stroke:rgba(251,191,36,.34);stroke-width:1;stroke-dasharray:3 5} .s-halv text{fill:rgba(251,191,36,.62);font-size:9.5px;font-weight:700;letter-spacing:.14em} .s-halv{opacity:0;transition:opacity .8s ease calc(.55s + var(--i) * .13s)} .story.in .s-halv{opacity:1} .s-peak,.s-low{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4); transition:opacity .5s ease,transform .5s cubic-bezier(.3,1.5,.5,1)} .s-peak{fill:var(--bear)} .s-low{fill:var(--bull)} .story.in .s-peak,.story.in .s-low{opacity:1;transform:scale(1); transition-delay:calc(1.15s + var(--i) * .16s)} /* 02 · monetary — four series, one indexed axis, each line named where it ends. Colour is decoration here, not information: the labels carry the identity, so the chart still reads in greyscale or with any colour vision. */ .s-axis{stroke:rgba(148,163,184,.28);stroke-width:1} .s-l-m2,.s-l-spx,.s-l-gold,.s-l-debt{fill:none;stroke-linecap:round;stroke-linejoin:round} .s-l-m2 {stroke:var(--cyan);stroke-width:2.6} .s-l-spx {stroke:var(--bull);stroke-width:2.1} .s-l-gold{stroke:var(--gold);stroke-width:2.1} .s-l-debt{stroke:rgba(148,163,184,.72);stroke-width:1.9} .s-key{font-size:11.5px;font-weight:700;letter-spacing:.15em} .s-l-m2-t {fill:var(--cyan)} .s-l-spx-t {fill:var(--bull)} .s-l-gold-t{fill:var(--gold)} .s-l-debt-t{fill:rgba(148,163,184,.85)} .s-l-m2-d {fill:var(--cyan)} .s-l-spx-d {fill:var(--bull)} .s-l-gold-d{fill:var(--gold)} .s-l-debt-d{fill:rgba(148,163,184,.85)} /* each label arrives just as its own line finishes drawing */ .s-key-g{opacity:0;transform:translateX(-10px); transition:opacity .55s ease,transform .7s cubic-bezier(.22,.7,.3,1)} .story.in .s-key-g{opacity:1;transform:none; transition-delay:calc(1.5s + var(--i) * .16s)} /* 03 · 1978 — the one act that steps out of the palette */ .s-paper line{stroke:rgba(201,180,135,.09);stroke-width:1} .s-paper-bold line{stroke:rgba(201,180,135,.3);stroke-width:1.4} .s-era{fill:rgba(201,180,135,.075);font-size:190px;font-weight:800;letter-spacing:-.03em} .s-band line{stroke:rgba(201,180,135,.28);stroke-width:1;stroke-dasharray:2 4} .s-band text{fill:rgba(201,180,135,.5);font-size:10px;font-weight:700} .s-rsi{fill:none;stroke:rgba(214,196,152,.92);stroke-width:1.8;stroke-linejoin:round} .s-note-sepia{fill:rgba(201,180,135,.45)} .story[data-acc="sepia"] .vis-frame{background:linear-gradient(180deg,rgba(201,180,135,.03),transparent 45%),#080a10} /* ── the portrait ──────────────────────────────────────────── A print laid half over the chart's bottom-left corner, with its label set beside it rather than beneath: the photo is what crosses the frame's border, and running 11px type across a 1px rule looked like a mistake. Graded warm-monochrome in the asset itself, so nothing here has to filter it at runtime. */ .vis-portrait{position:absolute;z-index:3;margin:0; left:clamp(-30px,-2.4vw,-16px);bottom:clamp(12px,1.4vw,22px); display:flex;align-items:flex-end;gap:13px; opacity:0;transform:translate3d(-14px,10px,0) rotate(-2.5deg); transition:opacity .8s ease .5s,transform 1s cubic-bezier(.22,.7,.3,1) .5s} .story.in .vis-portrait{opacity:1;transform:translate3d(0,0,0) rotate(-2.5deg)} .vis-portrait img{flex:none;width:clamp(96px,12.4vw,158px);height:auto;display:block; border-radius:3px;border:1px solid rgba(201,180,135,.28); box-shadow:0 26px 52px -18px rgba(0,0,0,.95),0 0 0 5px rgba(9,11,16,.9)} .vis-portrait figcaption{display:flex;flex-direction:column;gap:4px; padding-bottom:9px;white-space:nowrap} .vis-portrait b{font-size:11.5px;font-weight:700;line-height:1.2; color:rgba(214,196,152,.94)} .vis-portrait span{font-size:9.5px;font-weight:700;letter-spacing:.17em; text-transform:uppercase;color:rgba(201,180,135,.5)} @media(max-width:980px){ /* stacked layout: no copy column to the left to overlap into, so the whole thing tucks inside the frame */ .vis-portrait{left:8px;bottom:8px;gap:11px; transform:none!important;rotate:-2.5deg} .vis-portrait img{width:clamp(84px,17vw,116px)} } @media(max-width:520px){.vis-portrait figcaption{display:none}} /* 05 · the gap — three inputs arriving at a port that was never wired */ .s-stream line{stroke:rgba(148,163,184,.38);stroke-width:1.6;stroke-dasharray:5 6} .s-stream text{fill:rgba(148,163,184,.58);font-size:10.5px;font-weight:700;letter-spacing:.2em} .s-stream{opacity:0;transform:translateX(-26px); transition:opacity .7s ease,transform .9s cubic-bezier(.22,.7,.3,1)} .story.in .s-stream{opacity:1;transform:none;transition-delay:calc(.2s + var(--i) * .16s)} .s-port{fill:none;stroke:rgba(148,163,184,.5);stroke-width:1.6;opacity:0; transition:opacity .5s ease} .story.in .s-port{opacity:1;transition-delay:calc(.78s + var(--i) * .16s)} .s-engine rect{fill:rgba(201,180,135,.018);stroke:rgba(201,180,135,.24);stroke-width:1.2} .s-engine text{fill:rgba(201,180,135,.5);font-size:10.5px;font-weight:700;letter-spacing:.2em} /* ── chapter cards — the page's spine ──────────────────────── Two full screens of pure type that name where the reader is: The Problem, then The Solution. The Technical Paper and The Price carry the same eyebrow further down, integrated into their own sections rather than taking a screen each. */ .story--chapter .story__grid{grid-template-columns:1fr;justify-items:center;text-align:center; max-width:1000px} /* no numbered eyebrow on a chapter card — the title is the whole point, and the rail on the left already says where the reader is */ .story--chapter .story__idx{display:none} .story--chapter .story__title{font-size:clamp(52px,9.4vw,132px);line-height:1.02; letter-spacing:-.028em;margin:0 0 28px} .story--chapter .story__body{margin:0 auto;max-width:52ch;font-size:clamp(16px,1.35vw,19px)} /* the chapter headings that live inside a content section further down */ .ch-eyebrow{display:none} h2.ch-title{font-family:var(--display);font-weight:600;letter-spacing:-.02em; font-size:clamp(36px,5.4vw,66px);line-height:1.06} /* the turn card opens on the actual mark, lit from behind. The halo breathes on a long, uneven cycle — closer to a candle than a pulse, and slow enough that you feel it rather than watch it. */ .turn-mark{position:relative;display:block; width:clamp(78px,8.4vw,124px);margin:0 auto 32px; opacity:0;transform:scale(.74); transition:opacity 1s ease .1s,transform 1.15s cubic-bezier(.22,.7,.3,1) .1s} .story--turn.in .turn-mark{opacity:1;transform:scale(1)} .turn-mark img{position:relative;z-index:1;width:100%;height:auto;display:block; filter:drop-shadow(0 0 22px rgba(34,211,238,.55)) drop-shadow(0 0 64px rgba(0,229,176,.32))} .turn-mark::before{content:"";position:absolute;left:50%;top:52%; width:330%;height:330%;transform:translate(-50%,-50%); border-radius:50%;pointer-events:none;z-index:0;opacity:0; background:radial-gradient(circle,rgba(34,211,238,.32),rgba(0,229,176,.13) 40%,transparent 68%); transition:opacity 1.4s ease .5s} .story--turn.in .turn-mark::before{opacity:.9;animation:candle 7.5s ease-in-out 1.6s infinite} @keyframes candle{ 0%{opacity:.86;transform:translate(-50%,-50%) scale(1)} 31%{opacity:1; transform:translate(-50%,-50%) scale(1.07)} 47%{opacity:.82;transform:translate(-50%,-50%) scale(1.01)} 68%{opacity:.97;transform:translate(-50%,-50%) scale(1.05)} 100%{opacity:.86;transform:translate(-50%,-50%) scale(1)}} /* the lights coming on after five desaturated acts. ::after, not ::before — ::before is the act's colour wash. */ .story--turn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(56% 46% at 50% 46%,rgba(34,211,238,.15),transparent 70%); opacity:0;transition:opacity 1.5s ease} .story--turn.in::after{opacity:1} /* 05 · complexity → clarity (crossfade driven by --t) */ .s-clutter *{fill:none;stroke:rgba(148,163,184,.4);stroke-width:1} .s-clutter circle{fill:rgba(148,163,184,.4);stroke:none} .s-clutter{opacity:calc(.85 - var(--t,0) * .8);transition:opacity .25s linear} .s-clear{opacity:var(--t,0);transition:opacity .25s linear} /* signal markers, drawn like the indicator draws them: solid triangles with a soft bloom. fill:currentColor lets the same drop-shadow rule glow in whichever of the two colours the marker is. */ .s-mark path{fill:currentColor;stroke:none; filter:drop-shadow(0 0 7px currentColor)} .s-mark-up{color:var(--bull)} .s-mark-dn{color:var(--bear)} .s-mark{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.45); transition:opacity .4s ease,transform .5s cubic-bezier(.3,1.55,.5,1)} .story.in .s-mark{opacity:1;transform:scale(1); transition-delay:calc(1.05s + var(--i) * .1s)} /* 06 · regimes */ .s-zone rect{fill:rgba(148,163,184,.032);stroke:rgba(148,163,184,.1);stroke-width:1} .s-zone text{fill:var(--faint);font-size:10px;font-weight:700;letter-spacing:.2em} .s-zone-hot rect{fill:rgba(var(--sec-rgb),.06);stroke:rgba(var(--sec-rgb),.22)} .s-zone-hot text{fill:rgb(var(--sec-rgb));opacity:.85} .s-band-fill{fill:rgb(var(--sec-rgb));opacity:0; transition:opacity 1.1s ease .8s} .story.in .s-band-fill{opacity:.1} /* ── section rail ───────────────────────────────────────────── */ /* NOTE: style.css styles the bare `nav` element as the fixed header bar. This is also a