/* Process page: six-phase scroll-cinematic delivery reel. Loaded after style.css. Defaults to light (see inline theme script in ); the header theme toggle works normally on this page, all colors below are theme-aware custom properties inherited from style.css. */ /* ---------- Intro paragraph under the hero ---------- */ .process-intro{padding-block:0 clamp(1rem,3vw,2rem)} .process-intro p{max-width:74ch;color:var(--ink-2);font-family:var(--desc);font-weight:500;font-size:var(--t-0);line-height:1.7} /* ---------- Six-phase delivery reel ---------- */ .delivery-reel{position:relative;border-top:1px solid var(--line)} .reel-shell{display:grid;grid-template-columns:64px 1fr;gap:clamp(1rem,3vw,2.5rem);align-items:start} .reel-rail{ position:sticky;top:50%;transform:translateY(-50%); display:flex;flex-direction:column;align-items:center;justify-content:space-between; gap:clamp(1.2rem,2.6vw,1.9rem);height:min(58vh,460px); /* translateY(-50%) applies unconditionally, even before this sticks. Without this margin, the rail's normal-flow (top-aligned) position gets dragged up by half its own height and overlaps the heading above the section. This margin pre-offsets that so the rail sits flush with the section top until scrolling triggers the actual sticky/centered behavior. */ margin-top:calc(min(58vh,460px) / 2); /* Establish a stacking context so z-index on children resolves within the rail, not the page root. Prevents the will-change:transform compositing layer on .reel-rail-fill from bleeding above the dot buttons. */ isolation:isolate; } .reel-rail-line{position:absolute;left:50%;top:20px;bottom:20px;width:2px;transform:translateX(-50%);background:var(--line-2);border-radius:2px;z-index:0} .reel-rail-fill{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:top;transform:scaleY(0);background:linear-gradient(180deg,var(--teal),var(--peri));border-radius:2px;will-change:transform} .reel-dot{position:relative;z-index:2} .reel-dot button{ all:unset;box-sizing:border-box;cursor:pointer;display:grid;place-items:center; width:38px;height:38px;border-radius:50%; background:var(--paper);border:1.5px solid var(--line-3);color:var(--ink-4); transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease); } .reel-dot-num{font-family:var(--serif);font-weight:700;font-size:.98rem;line-height:1} /* visited: this phase has already been scrolled past */ .reel-dot.is-visited button{border-color:var(--teal);color:var(--teal);background:var(--teal-soft)} /* active: the phase currently pinned in view */ .reel-dot.is-active button{ background:var(--teal);border-color:var(--teal);color:var(--on-accent,#fff); transform:scale(1.2);box-shadow:0 0 0 5px var(--teal-soft),0 8px 20px -6px var(--teal-glow); } .reel-rail-count{position:absolute;bottom:-2.4rem;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--ink-3);white-space:nowrap} .reel-track{display:flex;flex-direction:column} /* Each .reel-card is a tall scroll "slot": 100dvh of pure hold (card fully readable, static) followed by 100dvh of crossfade into the next phase. The visible content lives in the sticky .reel-card-pin child; the recede tween in process.js animates .reel-card-inner (a plain, non-sticky grandchild), not .reel-card-pin itself. Animating transform on the same element that carries position:sticky fights the browser's own per-frame sticky recalculation and produces a hard visual "cut" right at the stick/unstick boundary, which is what this split avoids. */ .reel-card{ position:relative;min-height:200dvh;border-top:1px solid var(--line); } .reel-card:first-child{border-top:none} .reel-card-pin{ position:relative;min-height:100dvh;display:flex;align-items:center; padding-block:clamp(3rem,6vw,4.5rem);background:var(--paper);overflow:hidden; } .reel-card-inner{ position:relative;z-index:1;width:100%;display:grid; grid-template-columns:minmax(230px,340px) 1fr;gap:clamp(1.8rem,4vw,3.5rem); will-change:transform,opacity; } .reel-card-inner::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.75; } .reel-card[data-phase="0"] .reel-card-inner::before{background:radial-gradient(46% 60% at 88% 8%,var(--teal-soft),transparent 62%)} .reel-card[data-phase="1"] .reel-card-inner::before{background:radial-gradient(50% 65% at 6% 92%,var(--peri-soft),transparent 60%)} .reel-card[data-phase="2"] .reel-card-inner::before{background:radial-gradient(55% 60% at 92% 90%,var(--teal-soft),transparent 58%)} .reel-card[data-phase="3"] .reel-card-inner::before{background:radial-gradient(48% 55% at 4% 6%,var(--peri-soft),transparent 60%)} .reel-card[data-phase="4"] .reel-card-inner::before{background:radial-gradient(52% 62% at 90% 10%,var(--teal-soft),transparent 60%)} .reel-card[data-phase="5"] .reel-card-inner::before{background:radial-gradient(58% 65% at 10% 88%,var(--peri-soft),transparent 58%)} .reel-head-col{display:flex;flex-direction:column;gap:1.1rem} .reel-num{font-family:var(--serif);font-size:clamp(3.6rem,7vw,6.2rem);line-height:1.1;color:transparent;-webkit-text-stroke:1.5px var(--line-3);font-weight:700} .reel-phase{font-family:var(--mono);font-weight:600;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);line-height:1.5} .reel-meta{display:block;font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.05em;color:var(--ink-3);margin-top:.35rem;line-height:1.6;max-width:30ch} .reel-head-col h3{font-family:var(--serif);font-size:var(--t-2);letter-spacing:-.015em;font-weight:700;color:var(--ink);margin-top:.4rem} .reel-body-col{display:flex;flex-direction:column;gap:1.1rem} .reel-hook{font-family:var(--desc);font-weight:700;font-size:var(--t-1);color:var(--ink);line-height:1.45;max-width:44ch} .reel-desc{font-family:var(--desc);font-weight:500;font-size:.98rem;color:var(--ink-2);line-height:1.65;max-width:58ch} .reel-points{columns:2;column-gap:2.2rem;margin:0;padding:0;list-style:none} .reel-points li{break-inside:avoid;padding-left:1.1rem;position:relative;font-family:var(--desc);font-weight:600;font-size:.88rem;line-height:1.55;color:var(--ink-2);margin-bottom:.65rem} .reel-points li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1.5px;background:var(--teal)} .reel-note{font-family:var(--serif);font-weight:600;font-style:italic;font-size:.98rem;color:var(--ink);border-left:2px solid var(--teal);padding-left:1rem;margin-top:.3rem;max-width:52ch} /* Sticky-stack pin (desktop, motion-enabled) */ @media (min-width:901px) and (hover:hover){ .reel-card-pin{position:sticky;top:0} } /* Mobile / touch / reduced-motion fallback: plain stacked cards, no pin, no rail */ @media (max-width:900px), (hover:none){ .reel-shell{grid-template-columns:1fr} .reel-rail{display:none} .reel-card{min-height:auto} .reel-card-pin{min-height:auto;padding-block:clamp(2.4rem,8vw,3rem)} .reel-card-inner{grid-template-columns:1fr;gap:1.4rem} .reel-num{font-size:2.6rem;font-weight:800} .reel-points{columns:1} .reel-phase{font-weight:700} .reel-meta{font-weight:600} .reel-hook{font-weight:800} .reel-desc{font-weight:600} } @media (prefers-reduced-motion: reduce){ .reel-card{min-height:auto !important} .reel-card-pin{position:static !important;min-height:auto} .reel-rail{display:none} } /* ---------- Font-weight pass: the site's base h1/h2 use a very light editorial weight (360) tuned for high-contrast dark hero panels; on this page's light-by-default background that reads too thin, so give the process page's own headings more presence. ---------- */ body[data-page="process"] h1{font-weight:650} body[data-page="process"] h2{font-weight:650} body[data-page="process"] .lead{font-weight:650} /* ---------- Comparison table ---------- */ .compare-wrap table{margin-top:1.6rem} .compare-wrap th{color:var(--ink);font-family:var(--serif);font-weight:600} .compare-wrap td:first-child{color:var(--ink);font-weight:600} .compare-wrap td:last-child{color:var(--teal)}