/* ============================================================================ 11 — LUCID · A memory athlete's biography · Cairns / memoir ============================================================================ No neon. No scanlines. No bracket corners. This template is a paper-quiet memoir — italic Cormorant Garamond against cream stock, dusty rose accent, warm gold for highlights. The 3D is the studio lighting on the figure; the chrome is only what is needed to navigate. ============================================================================ */ :root{ /* Paper & ink */ --paper:#fdf6e9; --paper-warm:#f7eedb; --paper-cool:#f3e9d4; --ink:#0e0a08; --ink-soft:#2c2018; --ink-mute:#6b5847; --ink-faint:#a59281; /* Accents */ --rose:#c98e7a; --rose-deep:#a86c58; --gold:#d4a559; --gold-deep:#b88a3e; --jade:#7ea286; /* Lines */ --rule:rgba(14,10,8,.18); --rule-soft:rgba(14,10,8,.10); --rule-faint:rgba(14,10,8,.06); /* Type stacks */ --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif; --sans:'Inter',system-ui,-apple-system,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; /* Easings */ --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.14,1,.34,1); --ease-paper:cubic-bezier(.5,.05,.2,1); } *{box-sizing:border-box;margin:0;padding:0} html,body{width:100%;height:100%} html{ /* Page background goes on , not . Soft cream paper gradient with a barely-warmer center so the figure has somewhere to stand. */ background: radial-gradient(120% 80% at 50% 60%, #fdf6e9 0%, #f7eedb 55%, #efe2c8 100%); color:var(--ink); font-family:var(--serif); scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } body{ overflow:hidden; font-size:calc(16px*var(--res-scale-text,1)); line-height:1.55; background:transparent; } body.is-locked{overflow:hidden} ::selection{background:var(--rose);color:var(--paper)} button,a{font-family:inherit;color:inherit} button{background:none;border:0;cursor:pointer} a{text-decoration:none;color:inherit} em{font-style:italic;color:var(--rose-deep)} /* ----- WebGL canvas — z-index 0 (NOT -1) so it sits on the html bg ------- */ #fxCanvas{ position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; background:transparent; pointer-events:none; } /* ============================================================================ PAPER GRAIN + PAPER VIGNETTE — only two overlays. Quiet. ============================================================================ */ .paper-grain{ position:fixed;inset:0;z-index:2;pointer-events:none; opacity:.18; mix-blend-mode:multiply; background-image:url("data:image/svg+xml;utf8,"); } .paper-vignette{ position:fixed;inset:0;z-index:1;pointer-events:none; background: radial-gradient(140% 100% at 50% 50%, transparent 55%, rgba(80,52,32,.18) 100%), linear-gradient(180deg, rgba(80,52,32,.06) 0%, transparent 18%, transparent 82%, rgba(80,52,32,.10) 100%); } /* ============================================================================ BRAND (top-left) — italic Cormorant wordmark with a small ringed mark ============================================================================ */ .brand-fixed{ position:fixed;top:32px;left:54px;z-index:50; display:flex;align-items:center;gap:12px; color:var(--ink); } .brand-fixed__mark{ display:inline-flex;align-items:center;justify-content:center; width:24px;height:24px; filter:drop-shadow(0 1px 2px rgba(80,52,32,.15)); } .brand-fixed__name{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:18px; letter-spacing:.005em; color:var(--ink); } .brand-fixed__name i{font-style:normal;color:var(--rose)} /* ============================================================================ SOUND TOGGLE (top-right) — italic serif label, small dot ============================================================================ */ .sound-toggle{ position:fixed;top:34px;right:54px;z-index:50; display:inline-flex;align-items:center;gap:10px; color:var(--ink-mute); transition:color .35s var(--ease); } .sound-toggle:hover{color:var(--rose-deep)} .sound-toggle__label{ font-family:var(--serif);font-style:italic;font-weight:500; font-size:14px;letter-spacing:.01em; } .sound-toggle__dot{ display:inline-block;width:7px;height:7px;border-radius:50%; background:transparent;border:1px solid currentColor; transition:background .35s var(--ease),box-shadow .35s var(--ease); } .sound-toggle.is-on .sound-toggle__dot{ background:var(--rose);border-color:var(--rose); box-shadow:0 0 0 4px rgba(201,142,122,.2); } .sound-toggle.is-on{color:var(--rose-deep)} /* ============================================================================ SCENE INDICATOR (bottom-left) — Roman ordinal + chapter name + thin rule ============================================================================ */ .scene-indicator{ position:fixed;bottom:36px;left:54px;z-index:50; display:flex;align-items:center;gap:14px; color:var(--ink-mute); } .scene-indicator__num{ font-family:var(--serif);font-style:italic;font-weight:500; font-size:18px;color:var(--rose-deep); min-width:24px; } .scene-indicator__label{ font-family:var(--serif);font-style:italic;font-weight:500; font-size:15px;color:var(--ink); min-width:80px; } .scene-indicator__bar{ position:relative;width:140px;height:1px; background:var(--rule-soft);overflow:hidden; } .scene-indicator__fill{ position:absolute;inset:0;width:16.66%; background:linear-gradient(90deg,var(--rose),var(--gold)); transition:width .8s var(--ease-out); transform-origin:left; } /* ============================================================================ SCROLL CUE (bottom-right) — italic, no neon arrow ============================================================================ */ .scroll-cue{ position:fixed;bottom:38px;right:54px;z-index:50; display:flex;align-items:center;gap:14px; font-family:var(--serif);font-style:italic;font-weight:500; font-size:14px;color:var(--ink-mute); transition:opacity .8s var(--ease); } .scroll-cue.is-hidden{opacity:0;pointer-events:none} .cue-line{ display:inline-block;width:42px;height:1px; background:linear-gradient(90deg,var(--rule),transparent); position:relative; animation:cueDraw 2.6s var(--ease) infinite; } @keyframes cueDraw{ 0% {transform:scaleX(.2);opacity:.4;transform-origin:left} 60% {transform:scaleX(1);opacity:1;transform-origin:left} 61% {transform-origin:right} 100% {transform:scaleX(0);opacity:0;transform-origin:right} } /* ============================================================================ DECK + SCENES — vertical scroll, snap, six chapters ============================================================================ */ .deck{ position:relative;z-index:5; height:100svh;overflow-y:scroll; scroll-snap-type:y mandatory; scrollbar-width:none; } .deck::-webkit-scrollbar{display:none} .scene{ scroll-snap-align:start; min-height:100svh; display:flex;align-items:center; padding:clamp(96px,10vh,140px) clamp(28px,5vw,120px); position:relative; } .scene__inner{ width:100%;max-width:1280px;margin:0 auto; position:relative;z-index:1; } /* Scenes that put text on the right, leaving the figure on the left un-shadowed — use a soft cream gradient on the right edge instead of a dark overlay so the paper aesthetic holds. */ .scene--hero::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(90deg, rgba(253,246,233,.0) 0%, rgba(253,246,233,.0) 38%, rgba(253,246,233,.55) 60%, rgba(253,246,233,.85) 100%); } .scene--method::before, .scene--records::before, .scene--book::before, .scene--reach::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(90deg, rgba(253,246,233,.0) 0%, rgba(253,246,233,.35) 30%, rgba(253,246,233,.78) 70%, rgba(253,246,233,.92) 100%); } /* Training scene — figure is centered & tighter, so a soft top-bottom wash */ .scene--training::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:linear-gradient(180deg, rgba(253,246,233,.55) 0%, rgba(253,246,233,.2) 28%, rgba(253,246,233,.2) 72%, rgba(253,246,233,.65) 100%); } .two-col{ display:grid;grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,96px);align-items:center; } .two-col--rev{grid-template-columns:.95fr 1.05fr} .center-col{ display:flex;flex-direction:column;align-items:center;text-align:center; gap:24px;max-width:920px;margin:0 auto; } /* ----- Chapter label ("i. ─── Chapter one") ------------------------------ */ .scene__chapter{ display:inline-flex;align-items:center;gap:14px; font-family:var(--serif);font-style:italic;font-weight:500; font-size:14px;letter-spacing:.02em;color:var(--ink-mute); margin-bottom:clamp(28px,3vw,48px); } .scene__chapter.center{justify-content:center;align-self:center} .scene__chapter .ord{color:var(--rose-deep);font-weight:600;font-style:italic} .scene__chapter .rule{ display:inline-block;width:44px;height:1px; background:linear-gradient(90deg,var(--rule),transparent); } /* ============================================================================ DISPLAY TYPE — italic Cormorant, generous line-height, paper-ink color ============================================================================ */ .display{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(96px,14vw,220px); line-height:.92; letter-spacing:-.015em; color:var(--ink); } .display .dot{font-style:normal;color:var(--rose)} .display em{ font-style:italic;color:var(--rose-deep); /* very subtle gradient sheen on the rose word for premium feel */ background:linear-gradient(180deg,var(--rose-deep) 0%,var(--gold-deep) 110%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .display--md{ font-size:clamp(58px,9vw,140px); line-height:.96;letter-spacing:-.01em; } .display.center{text-align:center;align-self:center} /* The dek (sub-headline under hero display) */ .dek{ margin-top:clamp(28px,3vw,44px); max-width:560px; font-family:var(--serif); font-weight:400; font-size:clamp(17px,1.4vw,22px); line-height:1.55; color:var(--ink-soft); letter-spacing:.005em; } .dek em{font-style:italic;color:var(--rose-deep)} .copy{ margin-top:18px; max-width:540px; font-family:var(--serif); font-weight:400; font-size:clamp(16px,1.2vw,19px); line-height:1.65; color:var(--ink-soft); } .copy.center{margin-left:auto;margin-right:auto;text-align:center} .copy em{font-style:italic;color:var(--rose-deep);font-weight:500} .copy + .copy{margin-top:18px} /* ----- Signature line (under hero dek) ----------------------------------- */ .signature{ margin-top:clamp(36px,4vw,56px); display:flex;align-items:center;gap:16px; font-family:var(--mono); font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--ink-faint);font-style:normal; } .signature__line{ flex:0 0 60px;height:1px; background:linear-gradient(90deg,transparent,var(--rule)); } /* ============================================================================ REVEAL — soft ink-into-paper fade. Used as fallback for elements that aren't converted to per-character GSAP splits (copy, dek, etc.). Display headings get the per-char treatment in module.js. ============================================================================ */ [data-reveal]{ opacity:0; transform:translateY(18px); filter:blur(6px); transition:opacity 1.2s var(--ease-paper),transform 1.2s var(--ease-paper),filter 1.2s var(--ease-paper); transition-delay:var(--rd,0ms); } [data-reveal].is-visible{ opacity:1; transform:translateY(0); filter:blur(0); } /* ----- Per-character split (GSAP letter reveal on display headings) -------- */ /* The .display elements get split at runtime — each is inline-block so we can transform Y/opacity per char without breaking flow. The container stays inline so line-breaks behave normally. */ .display .char, .display--md .char{ display:inline-block; will-change:transform,opacity,filter; /* Initial state set by GSAP via .from(); leave un-styled so SSR is readable. */ } .display .char--space{width:.25em} /* Rendered headings shouldn't blur inherit while split — clear it. */ .display.is-split,.display--md.is-split{ opacity:1!important;transform:none!important;filter:none!important; } /* ============================================================================ SCENE 02 — METHOD aside (excerpt card) ============================================================================ */ .meth-aside{ position:relative; padding-left:clamp(20px,3vw,40px); } .meth-aside__inner{ position:relative; padding:36px 32px; background:linear-gradient(160deg,rgba(255,255,255,.45) 0%,rgba(247,238,219,.25) 100%); border:1px solid var(--rule); border-radius:2px; backdrop-filter:blur(8px); box-shadow: 0 30px 60px -30px rgba(80,52,32,.18), inset 0 1px 0 rgba(255,255,255,.4); } .meth-aside__inner::before{ /* big italic open-quote in dusty rose */ content:"\201C"; position:absolute;top:-18px;left:18px; font-family:var(--serif);font-style:italic;font-weight:500; font-size:96px;line-height:1;color:var(--rose); opacity:.7; } .meth-aside__kicker{ font-family:var(--mono); font-size:10.5px;letter-spacing:.22em;text-transform:uppercase; color:var(--ink-faint); margin-bottom:18px; } .meth-aside__pull{ font-family:var(--serif);font-style:italic;font-weight:500; font-size:clamp(20px,2vw,28px); line-height:1.4;color:var(--ink); letter-spacing:-.005em; } .meth-aside__by{ margin-top:24px; font-family:var(--serif);font-style:italic;font-weight:500; font-size:14px;color:var(--ink-mute); letter-spacing:.005em; } /* ============================================================================ SCENE 03 — RECORDS list (year ── name ── detail) ============================================================================ */ .record-list{ margin-top:clamp(28px,3vw,48px); list-style:none; display:flex;flex-direction:column;gap:0; border-top:1px solid var(--rule-soft); max-width:920px; } .record-list li{ display:grid; grid-template-columns:84px 60px 1fr; align-items:baseline; gap:18px; padding:22px 4px 24px; border-bottom:1px solid var(--rule-soft); transition:background .5s var(--ease),padding-left .5s var(--ease); position:relative; } .record-list li:hover{ background:linear-gradient(90deg,rgba(201,142,122,.08),transparent 70%); padding-left:14px; } .record-list__year{ font-family:var(--mono); font-size:13px;letter-spacing:.14em; color:var(--rose-deep);font-weight:500; } .record-list__line{ display:block;height:1px; background:linear-gradient(90deg,var(--rule),transparent); } .record-list__name{ font-family:var(--serif);font-style:italic;font-weight:500; font-size:clamp(20px,2vw,30px); line-height:1.25; color:var(--ink); letter-spacing:-.005em; } .record-list__name em{font-style:italic;color:var(--rose-deep);font-weight:500} .record-list__detail{ grid-column:3; margin-top:6px; font-family:var(--serif);font-weight:400; font-size:15px;line-height:1.45; color:var(--ink-mute); font-style:normal; } /* ============================================================================ SCENE 04 — TRAINING pull-quote (centered) ============================================================================ */ .pull-quote{ font-family:var(--serif);font-style:italic;font-weight:400; font-size:clamp(28px,3.4vw,52px); line-height:1.34; color:var(--ink); letter-spacing:-.012em; max-width:980px; margin:8px auto 0; text-align:center; position:relative; } .pull-quote::before{ content:"";position:absolute;left:50%;top:-32px;transform:translateX(-50%); width:32px;height:1px;background:var(--rose);opacity:.65; } .pull-quote__by{ margin-top:32px; font-family:var(--serif);font-style:italic;font-weight:500; font-size:15px;color:var(--ink-mute); letter-spacing:.005em; text-align:center; } /* ============================================================================ SCENE 05 — BOOK card (cover + spine + cast shadow) ============================================================================ */ .book-card{ position:relative; aspect-ratio:.72/1; max-width:380px; margin:0 auto; perspective:1400px; transform-style:preserve-3d; } .book-card__cover{ position:relative;z-index:2; width:100%;height:100%; display:flex;flex-direction:column;justify-content:space-between; padding:36px 32px 28px; background: linear-gradient(180deg,#1a1410 0%,#241a14 35%,#1a1410 100%); color:var(--paper); border-radius:2px 6px 6px 2px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.35), 0 60px 120px -30px rgba(80,52,32,.4), inset 0 1px 0 rgba(255,255,255,.06), inset -2px 0 8px rgba(0,0,0,.3); transform:rotateY(-6deg) rotateX(2deg); transition:transform .8s var(--ease),box-shadow .8s var(--ease); overflow:hidden; } .book-card__cover::before{ /* foil-stamp ornament — a thin gold rule frame */ content:"";position:absolute; inset:18px 16px; border:1px solid rgba(212,165,89,.35); border-radius:1px; pointer-events:none; } .book-card__cover::after{ /* subtle paper texture on the cover (ink) */ content:"";position:absolute;inset:0;pointer-events:none; background-image:url("data:image/svg+xml;utf8,"); opacity:.32;mix-blend-mode:overlay; } .book-card:hover .book-card__cover{ transform:rotateY(-2deg) rotateX(1deg); box-shadow: 0 40px 80px -20px rgba(0,0,0,.45), 0 80px 140px -30px rgba(80,52,32,.5), inset 0 1px 0 rgba(255,255,255,.06), inset -2px 0 8px rgba(0,0,0,.3); } .book-card__author{ position:relative;z-index:1; font-family:var(--serif);font-style:italic;font-weight:500; font-size:13px;letter-spacing:.18em;text-transform:uppercase; color:var(--gold); } .book-card__title{ position:relative;z-index:1; font-family:var(--serif);font-style:italic;font-weight:500; font-size:clamp(36px,4vw,52px); line-height:.96; color:var(--paper); letter-spacing:-.015em; margin-top:auto; } .book-card__title em{ font-style:italic;color:var(--gold); background:linear-gradient(180deg,var(--gold),var(--gold-deep)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .book-card__sub{ position:relative;z-index:1; margin-top:14px; font-family:var(--serif);font-style:italic;font-weight:400; font-size:14px;color:rgba(253,246,233,.7); } .book-card__pub{ position:relative;z-index:1; margin-top:24px; font-family:var(--mono); font-size:9.5px;letter-spacing:.28em;text-transform:uppercase; color:rgba(212,165,89,.7); } .book-card__spine{ position:absolute;top:2%;bottom:2%;left:-8px;width:8px;z-index:1; background:linear-gradient(90deg,#0a0604 0%,#1a1410 100%); border-radius:1px 0 0 1px; box-shadow:inset 1px 0 0 rgba(255,255,255,.04); transform:rotateY(-6deg);transform-origin:right center; } .book-card__shadow{ position:absolute;left:-12%;right:-12%;bottom:-22px;height:30px;z-index:0; background:radial-gradient(60% 100% at 50% 0%,rgba(80,52,32,.45) 0%,transparent 70%); filter:blur(8px); } /* ----- Book meta list ---------------------------------------------------- */ .book-meta{ margin-top:28px; list-style:none; display:grid;grid-template-columns:1fr 1fr; gap:14px 32px; border-top:1px solid var(--rule-soft); padding-top:20px; } .book-meta li{ display:flex;align-items:baseline;justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid var(--rule-faint); } .book-meta li span{ font-family:var(--mono); font-size:10.5px;letter-spacing:.22em;text-transform:uppercase; color:var(--ink-faint); } .book-meta li b{ font-family:var(--serif);font-style:italic;font-weight:500; font-size:15px;color:var(--ink); } /* ----- Book CTA ---------------------------------------------------------- */ .book-cta{ margin-top:32px; display:flex;flex-wrap:wrap;gap:14px;align-items:center; } .book-cta__primary{ display:inline-flex;align-items:center;gap:10px; padding:14px 24px; font-family:var(--serif);font-style:italic;font-weight:500; font-size:16px;letter-spacing:.005em;color:var(--paper); background:linear-gradient(180deg,var(--rose) 0%,var(--rose-deep) 100%); border-radius:2px; box-shadow: 0 12px 28px -10px rgba(168,108,88,.55), inset 0 1px 0 rgba(255,255,255,.18); transition:transform .3s var(--ease),box-shadow .3s var(--ease); } .book-cta__primary:hover{ transform:translateY(-2px); box-shadow: 0 18px 40px -10px rgba(168,108,88,.65), inset 0 1px 0 rgba(255,255,255,.22); } .book-cta__ghost{ display:inline-flex;align-items:center;gap:8px; padding:14px 18px; font-family:var(--serif);font-style:italic;font-weight:500; font-size:15px;color:var(--ink-mute); border-bottom:1px solid var(--rule); border-radius:0; transition:color .3s var(--ease),border-color .3s var(--ease); } .book-cta__ghost:hover{color:var(--rose-deep);border-color:var(--rose-deep)} /* ============================================================================ SCENE 06 — REACH buttons + footer ============================================================================ */ .reach-btns{ margin-top:36px; display:flex;flex-wrap:wrap;gap:18px;justify-content:center; } .reach-btn{ display:inline-flex;align-items:center;gap:10px; padding:14px 26px; font-family:var(--serif);font-style:italic;font-weight:500; font-size:16px;color:var(--ink); border:1px solid var(--rule); border-radius:2px; background:rgba(255,255,255,.35); backdrop-filter:blur(6px); transition:all .35s var(--ease); } .reach-btn:hover{ border-color:var(--rose);color:var(--rose-deep); background:rgba(255,255,255,.55); } .reach-btn--primary{ color:var(--paper); background:linear-gradient(180deg,var(--rose) 0%,var(--rose-deep) 100%); border-color:transparent; box-shadow: 0 12px 28px -10px rgba(168,108,88,.55), inset 0 1px 0 rgba(255,255,255,.18); } .reach-btn--primary:hover{ color:var(--paper); background:linear-gradient(180deg,var(--rose-deep) 0%,var(--rose) 100%); transform:translateY(-2px); } .foot{ margin-top:60px; display:flex;align-items:center;gap:18px; font-family:var(--mono); font-size:10.5px;letter-spacing:.22em;text-transform:uppercase; color:var(--ink-faint); } .foot__line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--rule),transparent);min-width:60px} /* ============================================================================ GATE — quiet paper modal, paper background, soft rose CTA ============================================================================ */ .gate{ position:fixed;inset:0;z-index:200; display:flex;align-items:center;justify-content:center; pointer-events:auto; transition:opacity .9s var(--ease),visibility .9s var(--ease); } .gate.is-open{ opacity:0;visibility:hidden;pointer-events:none; } .gate__bg{ position:absolute;inset:0; background: radial-gradient(120% 80% at 50% 50%, #fdf6e9 0%, #f3e9d4 60%, #e8d9b8 100%); } .gate__bg::after{ /* soft paper grain on the gate too */ content:"";position:absolute;inset:0; opacity:.22;mix-blend-mode:multiply; background-image:url("data:image/svg+xml;utf8,"); } .gate__inner{ position:relative;z-index:1; max-width:520px;width:calc(100% - 64px); padding:48px 44px 40px; text-align:center; background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(247,238,219,.35) 100%); border:1px solid var(--rule); border-radius:2px; backdrop-filter:blur(10px); box-shadow: 0 50px 100px -30px rgba(80,52,32,.35), inset 0 1px 0 rgba(255,255,255,.55); } .gate__loading{ display:inline-flex;align-items:center;gap:6px; font-family:var(--mono); font-size:10.5px;letter-spacing:.22em;text-transform:uppercase; color:var(--ink-mute); } .gate__loading .dots{display:inline-flex;align-items:flex-end;gap:2px;margin-left:4px} .gate__loading .dots i{ display:inline-block;width:3px;height:3px;border-radius:50%; background:var(--rose); animation:gateDot 1.4s var(--ease) infinite; } .gate__loading .dots i:nth-child(2){animation-delay:.2s} .gate__loading .dots i:nth-child(3){animation-delay:.4s} @keyframes gateDot{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}} .gate__rule{ display:block;width:48px;height:1px; background:linear-gradient(90deg,transparent,var(--rose),transparent); margin:24px auto 16px; } .gate__title{ font-family:var(--serif);font-style:italic;font-weight:500; font-size:clamp(56px,7vw,84px); line-height:.95;color:var(--ink); letter-spacing:-.015em; } .gate__title i{font-style:normal;color:var(--rose);font-weight:500} .gate__sub{ margin-top:10px; font-family:var(--serif);font-style:italic;font-weight:400; font-size:15px;color:var(--ink-mute); letter-spacing:.005em; } .gate__btns{ margin-top:36px; display:flex;flex-direction:column;gap:10px;align-items:stretch; } .gate__btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:14px 22px; font-family:var(--serif);font-style:italic;font-weight:500; font-size:16px;color:var(--ink); border:1px solid var(--rule); border-radius:2px; background:rgba(255,255,255,.35); transition:all .35s var(--ease); } .gate__btn:not(:disabled):hover{ border-color:var(--rose);color:var(--rose-deep); background:rgba(255,255,255,.6); } .gate__btn--primary{ color:var(--paper); background:linear-gradient(180deg,var(--rose) 0%,var(--rose-deep) 100%); border-color:transparent; box-shadow: 0 12px 28px -10px rgba(168,108,88,.55), inset 0 1px 0 rgba(255,255,255,.18); } .gate__btn--primary:not(:disabled):hover{ color:var(--paper); background:linear-gradient(180deg,var(--rose-deep) 0%,var(--rose) 100%); transform:translateY(-1px); } .gate__btn:disabled{opacity:.42;cursor:not-allowed;filter:saturate(.6)} .gate__small{ margin-top:18px; font-family:var(--serif);font-style:italic;font-weight:400; font-size:13px;color:var(--ink-faint); } /* ============================================================================ RESPONSIVE ============================================================================ */ @media (max-width:1024px){ .two-col,.two-col--rev{grid-template-columns:1fr} .meth-aside{padding-left:0;margin-top:32px} .book-card{margin-top:36px;width:100%;max-width:340px} .scene--hero::before{ background:linear-gradient(180deg, rgba(253,246,233,.0) 0%, rgba(253,246,233,.55) 60%, rgba(253,246,233,.92) 100%); } } @media (max-width:720px){ .brand-fixed{top:22px;left:24px;font-size:16px} .sound-toggle{top:24px;right:24px} .sound-toggle__label{font-size:13px} .scene-indicator{left:24px;bottom:30px;gap:10px} .scene-indicator__bar{width:90px} .scroll-cue{display:none} .scene{padding:clamp(80px,10vh,120px) 24px} .display{font-size:clamp(72px,18vw,120px)} .display--md{font-size:clamp(48px,12vw,84px)} .pull-quote{font-size:clamp(22px,5.4vw,32px)} .book-meta{grid-template-columns:1fr} .reach-btns{flex-direction:column;align-items:center} .foot{flex-direction:column;align-items:center;gap:8px;font-size:9.5px} .foot__line{display:none} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } [data-reveal]{opacity:1;transform:none;filter:none} } /* ============================================================================ ESSAY-MODE CHROME (ESS3) — Lucid as a printed folio ---------------------------------------------------------------------------- Strips the leftover HUD-ish bits (scene indicator with progress bar, scrolling "Turn the page" cue) and replaces them with printed-book typography: · a hairline left margin rule (gutter), running floor-to-ceiling at 80px · a tiny chapter title centered above the viewport, in italic serif · a roman-numeral page number bottom-right (no progress bar, no chrome) · a redesigned brand mark: tiny serif initial + tiny caps subtitle · the sound toggle becomes a text-only "with sound · without" link bottom-left · a frontispiece label above the gate title, "end of folio" decoration before footer ============================================================================ */ /* ----- 1. HIDE the surviving HUD-ish elements --------------------------- */ .essay--lucid .scene-indicator{display:none !important} .essay--lucid .scroll-cue{display:none !important} /* ----- 2. LEFT MARGIN RULE (printed-book gutter) ------------------------ */ .essay-rule{ position:fixed;left:80px;top:0;bottom:0;width:1px;z-index:6; pointer-events:none; background:linear-gradient(180deg, transparent 0%, rgba(14,10,8,.18) 8%, rgba(14,10,8,.18) 92%, transparent 100%); opacity:.6; } /* ----- 3. BRAND — tiny serif initial + tiny caps name ------------------- */ .brand-fixed--essay{ position:fixed;top:36px;left:36px;z-index:50; display:flex;align-items:baseline;gap:10px;color:var(--ink); } .brand-fixed--essay .brand-fixed__initial{ font-family:var(--serif);font-style:italic;font-weight:500; font-size:22px;line-height:1;color:var(--ink); letter-spacing:-.02em; } .brand-fixed--essay .brand-fixed__initial i{ font-style:normal;color:var(--rose); } .brand-fixed--essay .brand-fixed__name{ font-family:var(--serif);font-style:italic;font-weight:500; font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--ink-mute); white-space:nowrap; } /* ----- 4. SOUND TOGGLE → bottom-left text link ------------------------ */ .essay--lucid .sound-toggle{ position:fixed;top:auto;right:auto; bottom:34px;left:36px; padding:0;border:0;background:transparent;box-shadow:none; display:inline-flex;align-items:baseline;gap:6px; color:var(--ink-mute); font-family:var(--serif);font-style:italic;font-weight:500;font-size:13px; letter-spacing:.005em; } .essay--lucid .sound-toggle .sound-toggle__dot{display:none} .essay--lucid .sound-toggle .sound-toggle__label{ font-family:var(--serif);font-style:italic;font-weight:500;font-size:13px; color:var(--ink-mute); border-bottom:1px solid transparent; transition:color .35s var(--ease),border-color .35s var(--ease); } .essay--lucid .sound-toggle::before{ content:"with sound";color:var(--ink-mute); font-family:var(--serif);font-style:italic;font-weight:500;font-size:13px; } .essay--lucid .sound-toggle::after{ content:"\00B7 without";color:var(--ink-faint); font-family:var(--serif);font-style:italic;font-weight:500;font-size:13px; margin-left:2px; } .essay--lucid .sound-toggle .sound-toggle__label{display:none} .essay--lucid .sound-toggle.is-on::before{color:var(--rose-deep);border-bottom:1px solid var(--rose);padding-bottom:1px} .essay--lucid .sound-toggle:not(.is-on)::after{color:var(--ink);border-bottom:1px solid var(--rule);padding-bottom:1px} .essay--lucid .sound-toggle:hover{color:var(--rose-deep)} /* ----- 5. ESSAY MARK — chapter title (top center) + page number (bottom right) ----- */ .essay-mark{ position:absolute;inset:0;z-index:6;pointer-events:none; } .essay-mark__chapter{ position:absolute;top:30px;left:50%;transform:translateX(-50%); font-family:var(--serif);font-style:italic;font-weight:500; font-size:12.5px;letter-spacing:.04em;color:var(--ink-mute); white-space:nowrap; opacity:.86; } .essay-mark__chapter em{ font-style:italic;color:var(--rose-deep);font-weight:500; } .essay-mark__page{ position:absolute;bottom:34px;right:48px; font-family:var(--serif);font-weight:500; font-size:14px;color:var(--ink-mute); letter-spacing:.005em; } .essay-mark__page em{ font-style:italic;color:var(--rose-deep);font-weight:500;font-size:15px; } /* ----- 6. END OF FOLIO decoration (before footer in scene--reach) ------- */ .end-of-folio{ margin-top:clamp(40px,5vw,72px); display:inline-flex;align-items:center;gap:18px;justify-content:center; align-self:center; } .end-of-folio__rule{ display:inline-block;width:48px;height:1px; background:linear-gradient(90deg,transparent,var(--rule),transparent); } .end-of-folio__txt{ font-family:var(--serif);font-style:italic;font-weight:500;font-size:13px; letter-spacing:.04em;color:var(--ink-mute); } .end-of-folio__txt em{font-style:italic;color:var(--rose-deep)} /* ----- 7. FRONTISPIECE label inside gate ------------------------------- */ .gate__frontispiece{ font-family:var(--serif);font-style:italic;font-weight:500; font-size:13px;letter-spacing:.18em;color:var(--ink-mute); text-transform:uppercase; margin-bottom:10px; opacity:.85; } .gate__frontispiece em{font-style:italic;color:var(--rose-deep);text-transform:none;letter-spacing:.04em;font-size:15px} /* ----- 8. RESPONSIVE — keep essay chrome legible on small windows ------ */ @media (max-width:1024px){ .essay-rule{left:32px} .essay-mark__chapter{top:22px;font-size:11.5px} .essay-mark__page{bottom:24px;right:24px;font-size:13px} .essay-mark__page em{font-size:14px} } @media (max-width:720px){ .essay-rule{display:none} .brand-fixed--essay{top:22px;left:22px} .brand-fixed--essay .brand-fixed__name{display:none} .essay--lucid .sound-toggle{bottom:22px;left:22px;font-size:12px} .essay--lucid .sound-toggle::before, .essay--lucid .sound-toggle::after{font-size:12px} .essay-mark__chapter{font-size:10.5px} }