/* ODESSIS , the surface. * * The DOM's only job is to BE the scroll: eight full-height sections whose measured * centres are the chapter anchors. Nothing here animates the world; the world reads * scrollY. Type sits ON the render, never in a card floating above it. */ :root{ --night:#07090E; --lapis:#172238; --bone:#D8CFB8; --gold:#A97831; --wine:#542331; --verd:#4E7A63; --ink:#EFE7D4; --serif: "Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif; --sans: ui-sans-serif,-apple-system,"Helvetica Neue",Arial,sans-serif; --gut: clamp(20px, 5vw, 84px); --plate: clamp(300px, 34vw, 470px); } *,*::before,*::after{ box-sizing:border-box; } html{ background:var(--night); scroll-behavior:smooth; overflow-x:hidden; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ margin:0; color:var(--ink); background:var(--night); font-family:var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* THE REVEAL. This fade used to sit on , which was fine when there was nothing to show during the wait - but the boot screen is inside , so a hidden body would have hidden the loader as well. The fade now belongs to the world's own layers, and the boot screen sits above them at its own opacity. */ #world, #foreground, main, .topbar, #rail, #progress{ opacity:0; transition:opacity .9s ease .1s; } body.is-ready #world, body.is-ready #foreground, body.is-ready main, body.is-ready .topbar, body.is-ready #rail, body.is-ready #progress{ opacity:1; } body.is-renderer-fallback #world, body.is-renderer-fallback #foreground, body.is-renderer-fallback #progress{ display:none; } body.is-renderer-fallback{ background: radial-gradient(circle at 78% 16%,rgba(169,120,49,.16),transparent 34rem), linear-gradient(145deg,#111827 0%,var(--night) 58%,#050609 100%); } .render-status{ position:fixed; z-index:8; left:50%; bottom:18px; transform:translateX(-50%); width:min(680px,calc(100vw - 32px)); margin:0; padding:12px 16px; border:1px solid rgba(216,207,184,.24); background:rgba(7,9,14,.92); color:var(--bone); font:600 12px/1.45 var(--sans); text-align:center; box-shadow:0 12px 40px rgba(0,0,0,.34); } .render-status[hidden]{ display:none; } @media (prefers-reduced-motion: reduce){ .render-status{ transition:none; } } /* ── the world sits behind everything, fixed, and never scrolls ────────────── */ #world{ position:fixed; inset:0; width:100%; height:100%; display:block; z-index:0; } /* ── ONE fixed foreground host. Cut-outs re-parent here; they never stack. ─── */ #foreground{ position:fixed; inset:0; z-index:2; pointer-events:none; overflow:hidden; } /* fine static grain over the whole frame , the last 2% of "shot, not rendered" */ #grain{ position:fixed; inset:-50%; z-index:6; pointer-events:none; opacity:0; /* OFF: the post chain already grains once; two layers read as static */ background-image:url("data:image/svg+xml;utf8,"); mix-blend-mode:overlay; } #progress{ position:fixed; left:0; top:0; height:1px; width:100%; z-index:9; background:linear-gradient(90deg,transparent,var(--gold)); transform:scaleX(0); transform-origin:0 50%; transition:transform .18s linear; } /* ── top bar ───────────────────────────────────────────────────────────────── */ .topbar{ position:fixed; top:0; left:0; right:0; z-index:8; display:flex; align-items:center; justify-content:space-between; padding:clamp(14px,2.2vw,26px) var(--gut); mix-blend-mode:normal; } .wordmark{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--serif); font-size:clamp(17px,1.5vw,21px); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); text-decoration:none; } .wordmark i{ width:26px; height:1px; background:var(--gold); display:block; opacity:.85; } .nav{ display:flex; align-items:center; gap:clamp(12px,1.8vw,28px); } .nav a{ color:var(--ink); text-decoration:none; opacity:.62; font-size:12px; letter-spacing:.17em; text-transform:uppercase; transition:opacity .3s, color .3s; } .nav a:hover{ opacity:1; color:#fff; } .nav .cta{ opacity:1; color:var(--night); background:var(--bone); padding:.62em 1.15em; border-radius:1px; } .nav .cta:hover{ background:#fff; color:var(--night); } @media (max-width:760px){ .nav a:not(.cta){ display:none; } /* the CTA was running off the right edge of a 390px viewport */ .topbar{ padding-left:18px; padding-right:18px; gap:12px; } .wordmark{ font-size:15px; letter-spacing:.10em; min-width:0; } .wordmark i{ width:16px; } .nav .cta{ padding:.55em .85em; font-size:11px; letter-spacing:.14em; white-space:nowrap; } } /* ── the chapter rail ──────────────────────────────────────────────────────── */ #rail{ position:fixed; right:var(--gut); top:50%; transform:translateY(-50%); z-index:8; display:flex; flex-direction:column; gap:14px; align-items:flex-end; } #rail .dot{ display:flex; align-items:center; gap:10px; background:none; border:0; padding:2px 0; cursor:pointer; color:var(--ink); font:inherit; } #rail .dot span{ font-size:10px; letter-spacing:.19em; text-transform:uppercase; opacity:0; transform:translateX(6px); transition:opacity .34s, transform .34s; order:-1; white-space:nowrap; } #rail .dot i{ width:15px; height:1px; background:var(--ink); opacity:.34; display:block; transition:width .34s cubic-bezier(.2,.8,.2,1), opacity .34s, background .34s; } #rail .dot:hover span{ opacity:.6; transform:none; } #rail .dot.is-on i{ width:34px; opacity:1; background:var(--gold); } #rail .dot.is-on span{ opacity:1; transform:none; } @media (max-width:760px){ #rail{ display:none; } } /* ── chapters: full-height sections. THESE are the scroll. ─────────────────── */ main{ position:relative; z-index:3; } /* FINAL SCROLL GEOMETRY, AVAILABLE ON FIRST PAINT. These values are scrollWeight * 92vh from the chapter ledger. They used to be written as inline styles only after the whole Three.js city had built. Until then the document was 79vh taller, so a scroll checkpoint sampled during boot described a different physical page from the same checkpoint after readiness. Static CSS makes the browser lay out the final journey before any module runs; main.js now only audits this mirror against the ledger and never changes it. */ .chapter[data-chapter="harbour"] { --chapter-height:105.8vh; } .chapter[data-chapter="propylaea"] { --chapter-height:78.2vh; } .chapter[data-chapter="stoa"] { --chapter-height:119.6vh; } .chapter[data-chapter="theatre"] { --chapter-height:115vh; } .chapter[data-chapter="agora"] { --chapter-height:124.2vh; } .chapter[data-chapter="tholos"] { --chapter-height:110.4vh; } .chapter[data-chapter="odeon"] { --chapter-height:110.4vh; } .chapter[data-chapter="temple"] { --chapter-height:133.4vh; } .chapter{ position:relative; min-height:var(--chapter-height); display:flex; align-items:center; /* The right gutter reserves the chapter rail's own width. Without it a right-aligned plate and the active rail label occupy the same pixels , the Tholos body copy ran straight through "THE ORACLE OF MACHINES". */ padding-left:var(--gut); padding-right:calc(var(--gut) + 165px); pointer-events:none; } /* The summit fills the centre of frame with a god-scale temple, so the copy moves OUT of the architecture and sits in the dark lower third. Centre-aligned type over a pediment is a collision, not a composition. */ .chapter--final{ align-items:flex-end; padding-bottom:9vh; } /* THE CONTRAST CONTRACT. Every gate round, on both viewports, flagged the same thing: the eyebrow and body sit over whatever the world happens to put behind them, and on lit marble they vanish. A judge named the fix exactly , "make it a contrast RULE, not a scrim; R3 passes on three frames only because they happen to be dark there." Legibility must not be luck. A soft elliptical pool bound to the text block itself, so it travels with the copy and never shows an edge. */ .plate{ width:var(--plate); max-width:100%; pointer-events:auto; position:relative; opacity:0; transform:translateY(22px); transition:opacity .85s cubic-bezier(.2,.8,.2,1), transform .85s cubic-bezier(.2,.8,.2,1); } .plate::before{ content:""; position:absolute; z-index:-1; pointer-events:none; inset:-14% -18% -12% -16%; background:radial-gradient(ellipse at 38% 50%, rgba(7,9,14,.88) 0%, rgba(7,9,14,.72) 38%, rgba(7,9,14,.36) 64%, transparent 84%); } .plate--center::before{ background:radial-gradient(ellipse at 50% 50%, rgba(7,9,14,.88) 0%, rgba(7,9,14,.72) 38%, rgba(7,9,14,.36) 64%, transparent 84%); } .chapter.is-active .plate{ opacity:1; transform:none; } .plate--center{ margin:0 auto; text-align:center; } .plate--right{ margin-left:auto; } /* THE SUMMIT: the temple owns the centre axis and the stair's gold nosings converge right through it. Centred type over that is a collision, so the title card sits in the dark left third , negative space, which is where a title card belongs. */ .plate--summit{ margin:0; text-align:left; } .plate--summit::before{ background:radial-gradient(ellipse at 34% 50%, rgba(7,9,14,.94) 0%, rgba(7,9,14,.82) 40%, rgba(7,9,14,.42) 66%, transparent 86%); } .eyebrow{ margin:0 0 1.1rem; font-size:11px; letter-spacing:.30em; text-transform:uppercase; color:#E0B472; /* gold lifted well off lit marble */ text-shadow:0 1px 3px rgba(7,9,14,.95), 0 0 18px rgba(7,9,14,.85); } .title{ margin:0 0 1.05rem; font-family:var(--serif); font-weight:400; font-size:clamp(30px,3.5vw,54px); line-height:1.08; letter-spacing:-.012em; /* the type is IN the frame , it takes the same light the marble does */ text-shadow:0 1px 40px rgba(7,9,14,.85), 0 1px 3px rgba(7,9,14,.6); } h1.title{ font-size:clamp(34px,4.4vw,68px); } .body{ margin:0; font-size:clamp(14px,1.06vw,16.5px); line-height:1.66; color:rgba(239,231,212,.76); max-width:38ch; text-shadow:0 1px 24px rgba(7,9,14,.8); } .plate--center .body{ margin:0 auto; } .list{ list-style:none; margin:1.5rem 0 0; padding:0; display:flex; flex-direction:column; gap:.52rem; } .list li{ font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:rgba(239,231,212,.58); padding-left:1.15rem; position:relative; } .list li::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:1px; background:var(--gold); opacity:.8; } .meta{ margin:1.9rem 0 0; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:rgba(239,231,212,.4); } .button{ display:inline-block; margin:2rem 0 0; padding:.9em 1.9em; border:1px solid rgba(216,207,184,.42); color:var(--ink); text-decoration:none; border-radius:1px; font-size:11.5px; letter-spacing:.21em; text-transform:uppercase; transition:background .35s, color .35s, border-color .35s; } .button:hover{ background:var(--bone); color:var(--night); border-color:var(--bone); } /* ── foreground cut-outs. They live in their section, park invisible, and only render when the host owns them. Retirement is fade + blur over 820ms , matched in main.js, which waits the same 820ms before returning the node home. ──────────────────────────────── */ .fg{ position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .82s cubic-bezier(.2,.8,.2,1), filter .82s cubic-bezier(.2,.8,.2,1), transform .82s cubic-bezier(.2,.8,.2,1); filter:blur(14px); transform:scale(1.06); background-repeat:no-repeat; } #foreground .fg.is-live{ opacity:1; filter:blur(0); transform:none; } /* Each cut-out is drawn in CSS , gradients and masks only, no image files. They are OUT-OF-FOCUS near-lens occluders: they must never be legible. */ .fg--rope{ background: radial-gradient(120% 34% at 50% 104%, rgba(7,9,14,.92) 0%, rgba(7,9,14,0) 62%), linear-gradient(to top, rgba(7,9,14,.55), transparent 26%); } .fg--gate{ background: linear-gradient(to right, rgba(7,9,14,.94) 0%, rgba(7,9,14,.5) 7%, transparent 15%), linear-gradient(to left, rgba(7,9,14,.94) 0%, rgba(7,9,14,.5) 7%, transparent 15%); } .fg--curtain{ background: linear-gradient(to left, rgba(84,35,49,.72) 0%, rgba(84,35,49,.3) 9%, transparent 20%), radial-gradient(60% 100% at 100% 50%, rgba(169,120,49,.14), transparent 60%); } .fg--grass{ background: radial-gradient(130% 26% at 50% 106%, rgba(7,9,14,.9) 0%, rgba(7,9,14,0) 70%); } .fg--awning{ background: linear-gradient(to bottom, rgba(84,35,49,.8) 0%, rgba(84,35,49,.34) 9%, transparent 21%), linear-gradient(to right, rgba(7,9,14,.7) 0%, transparent 12%); } .fg--mist{ background: linear-gradient(to top, rgba(23,34,56,.75) 0%, rgba(23,34,56,.28) 18%, transparent 44%); } .fg--vine{ background: radial-gradient(90% 30% at 20% -6%, rgba(7,9,14,.85), transparent 66%), radial-gradient(70% 24% at 82% -4%, rgba(7,9,14,.7), transparent 62%); } .fg--laurel{ background: radial-gradient(58% 46% at 4% 96%, rgba(7,9,14,.86), transparent 62%), radial-gradient(58% 46% at 96% 96%, rgba(7,9,14,.86), transparent 62%); } .noscript{ position:fixed; inset:0; display:grid; place-items:center; z-index:20; background:var(--night); color:var(--ink); font-family:var(--serif); } @media (max-width:760px){ /* PORTRAIT SCRIM. In a tall frame the copy always sits low, over whatever the world happens to put there , lit ivory column shafts, a lamp glow, an amber cella. Every mobile frame was flagged for type sitting on top of the render. This is the cinematic answer rather than a floating card: a soft gradient the copy is lit against, which the world still reads through. It sits below main (z-index 3), so type stays on top. */ body::after{ content:""; position:fixed; left:0; right:0; bottom:0; height:70vh; background:linear-gradient(to top, rgba(7,9,14,.93) 0%, rgba(7,9,14,.80) 22%, rgba(7,9,14,.46) 48%, rgba(7,9,14,.16) 74%, transparent 100%); z-index:2; pointer-events:none; } /* COPY SLICING , three judges, most frames. The plate was bottom-aligned inside a section up to 129vh tall, so at the chapter's own anchor (section centre == viewport centre) the plate sat ~51vh below centre , past the bottom of a 844px screen. It was never a padding problem; the copy was simply below the fold. Centre it in the section and offset into the lower third, which is inside the viewport by construction whatever the section's dwell weight. */ .chapter{ align-items:center; padding:0 var(--gut); } .plate{ margin-top:30vh; transform:none; } .chapter.is-active .plate{ transform:none; } /* THE LAST CHAPTER ANCHORS TO THE DOCUMENT BOTTOM, not its own centre , so the centring that works for chapters 0-6 puts the summit copy at the top of frame, colliding with the wordmark. At maxScroll the section's bottom IS the viewport bottom, so bottom-align it and the copy lands in the lower two-thirds. */ .chapter--final{ align-items:flex-end; padding-bottom:13vh; } .chapter--final .plate{ margin-top:0; } /* the judges found body copy sliced by the viewport bottom and a list item clipped at 844 , tighten the block so it fits the safe area on the shortest phone */ .title{ font-size:clamp(27px,7.4vw,36px); } h1.title{ font-size:clamp(30px,8.4vw,42px); } .body{ font-size:14px; line-height:1.55; max-width:34ch; } .list{ margin-top:1.1rem; gap:.4rem; } .list li{ font-size:11px; } .meta{ margin-top:1.2rem; } .button{ margin-top:1.4rem; padding:.8em 1.5em; } .plate, .plate--right, .plate--center{ width:100%; margin:0; text-align:left; } .plate--center .body{ margin:0; } } /* ── SOUND TOGGLE ───────────────────────────────────────────────────────────── Sits in the top bar, quiet until hovered. It is the only control on the page, so it must read as a control without competing with the wordmark or Begin. */ .sound { display: inline-flex; align-items: center; gap: .45rem; padding: .34rem .68rem; font: inherit; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(216, 207, 184, .55); background: rgba(7, 9, 14, .34); border: 1px solid rgba(216, 207, 184, .16); border-radius: 2px; cursor: pointer; transition: color .35s ease, border-color .35s ease, background .35s ease; } .sound:hover { color: rgba(216, 207, 184, .92); border-color: rgba(169, 120, 49, .55); } .sound:focus-visible { outline: 2px solid rgba(169, 120, 49, .8); outline-offset: 2px; } .sound__ico { display: inline-flex; } /* off: waves hidden, slash shown. on: the reverse. */ .sound .sound__wave { opacity: 0; transition: opacity .3s ease; } .sound .sound__slash { opacity: .85; transition: opacity .3s ease; } .sound[aria-pressed="true"] { color: rgba(216, 207, 184, .95); border-color: rgba(169, 120, 49, .5); } .sound[aria-pressed="true"] .sound__wave { opacity: 1; } .sound[aria-pressed="true"] .sound__wave--2 { opacity: .55; } .sound[aria-pressed="true"] .sound__slash { opacity: 0; } .sound[data-loading="1"] { opacity: .5; pointer-events: none; } @media (max-width: 720px) { .sound { padding: .3rem .42rem; } .sound__txt { display: none; } /* the icon alone on a phone; the bar is tight */ } /* ═══ THE SURFACE ═══════════════════════════════════════════════════════════ Everything below is the WEBSITE layer sitting on the world: the mark, the drawer, and the intake. The rule it follows is that the world is the argument , so nothing here ever navigates away from it, and nothing here blacks it out. The drawer is glass over the city, not a page on top of it. */ /* ---- the mark ------------------------------------------------------------- The sigil: a ring broken at the top with a line rising through it. Stroke only, no gradients, so it takes colour from the bar and reads at 26px on a phone as well as it does at 34. */ .wordmark{ gap:11px; } .sigil{ flex:none; width:34px; height:34px; overflow:visible; fill:none; stroke:#C89B54; stroke-width:2; stroke-linecap:square; stroke-linejoin:miter; transition:stroke .35s ease; } .wordmark:hover .sigil{ stroke:#E4C079; } .wordmark__txt{ font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.25em; line-height:1; color:var(--ink); } /* ── nav CTA is a BUTTON now (it opens the drawer, it does not navigate) ──── */ .nav .cta{ font:inherit; font-size:12px; letter-spacing:.17em; text-transform:uppercase; border:0; cursor:pointer; line-height:1; opacity:1; color:var(--night); background:var(--bone); padding:.72em 1.15em; border-radius:1px; transition:background .35s, color .35s; } .nav .cta:hover{ background:#fff; } .nav .cta:focus-visible, .wordmark:focus-visible{ outline:2px solid rgba(169,120,49,.85); outline-offset:3px; } /* the summit CTA is a button too , inherit nothing from the UA */ button.button{ font:inherit; background:none; cursor:pointer; } /* ── the music links on chapter 06 ────────────────────────────────────────── */ .links{ list-style:none; margin:1.5rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem .5rem; } .links a{ display:inline-block; padding:.5em 1em; border:1px solid rgba(216,207,184,.28); border-radius:1px; color:rgba(239,231,212,.78); text-decoration:none; font-size:11px; letter-spacing:.17em; text-transform:uppercase; transition:border-color .3s, color .3s, background .3s; } .links a:hover{ border-color:var(--gold); color:#fff; background:rgba(169,120,49,.14); } /* ── the drawer ───────────────────────────────────────────────────────────── */ .drawer{ position:fixed; inset:0; z-index:30; } .drawer[hidden]{ display:none; } .drawer__scrim{ position:absolute; inset:0; background:rgba(5,7,11,.58); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:0; transition:opacity .42s ease; } .drawer__panel{ position:absolute; top:0; right:0; bottom:0; width:min(560px,100%); display:flex; flex-direction:column; background:linear-gradient(180deg, rgba(9,12,19,.94), rgba(7,9,14,.97)); backdrop-filter:blur(22px) saturate(115%); -webkit-backdrop-filter:blur(22px) saturate(115%); border-left:1px solid rgba(216,207,184,.14); box-shadow:-40px 0 90px rgba(0,0,0,.55); transform:translateX(100%); transition:transform .52s cubic-bezier(.2,.85,.2,1); } .drawer.is-open .drawer__scrim{ opacity:1; } .drawer.is-open .drawer__panel{ transform:none; } @media (prefers-reduced-motion: reduce){ .drawer__scrim,.drawer__panel{ transition:none; } } .drawer__bar{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.15rem clamp(22px,4vw,40px); border-bottom:1px solid rgba(216,207,184,.12); } .drawer__eyebrow{ margin:0; font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:rgba(239,231,212,.5); } .drawer__x{ flex:0 0 auto; display:grid; place-items:center; width:34px; height:34px; padding:0; cursor:pointer; background:none; border:1px solid rgba(216,207,184,.2); border-radius:2px; color:rgba(239,231,212,.7); transition:color .3s, border-color .3s; } .drawer__x:hover{ color:#fff; border-color:var(--gold); } .drawer__x:focus-visible{ outline:2px solid rgba(169,120,49,.85); outline-offset:2px; } .drawer__scroll{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding:clamp(24px,4vw,40px) clamp(22px,4vw,40px) 3rem; -webkit-overflow-scrolling:touch; } .drawer__foot{ margin:2.6rem 0 0; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(239,231,212,.32); } /* Consent lives on the surface, never inside the WebGL world. */ .drawer__foot a,.drawer__foot button{color:inherit;font:inherit;text-decoration:underline;text-underline-offset:.18em} .drawer__foot button{appearance:none;border:0;background:none;padding:0;cursor:pointer} .consent-banner{position:fixed;z-index:42;left:max(1rem,env(safe-area-inset-left));right:max(1rem,env(safe-area-inset-right));bottom:max(1rem,env(safe-area-inset-bottom));display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.4rem;align-items:center;max-width:58rem;margin:auto;padding:1.05rem 1.15rem;background:rgba(8,11,17,.96);border:1px solid rgba(201,168,76,.42);box-shadow:0 1.5rem 5rem rgba(0,0,0,.48);color:#EFE7D4;backdrop-filter:blur(18px)} .consent-banner[hidden]{display:none} .consent-banner b{font-family:var(--serif);font-size:1.08rem;font-weight:500;letter-spacing:.02em} .consent-banner p{margin:.25rem 0 .2rem;max-width:62ch;color:rgba(239,231,212,.72);font-size:.76rem;line-height:1.5} .consent-banner a{color:#C9A84C;font-size:.7rem;text-underline-offset:.2em} .consent-banner__actions{display:flex;gap:.55rem} .consent-banner button,.privacy-settings__save{min-height:2.75rem;padding:.65rem .9rem;border:1px solid rgba(216,207,184,.3);background:transparent;color:#EFE7D4;font:600 .68rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer} .consent-banner button.is-primary,.privacy-settings__save{border-color:#C9A84C;background:#C9A84C;color:#090C12} .privacy-settings{width:min(38rem,calc(100vw - 2rem));padding:clamp(1.5rem,5vw,3rem);border:1px solid rgba(201,168,76,.45);background:#0B0F17;color:#EFE7D4;box-shadow:0 2rem 7rem rgba(0,0,0,.68)} .privacy-settings::backdrop{background:rgba(2,4,8,.78);backdrop-filter:blur(6px)} .privacy-settings h2{margin:.3rem 0 .7rem;font:400 clamp(2rem,5vw,3.4rem)/.98 var(--serif)} .privacy-settings > p:not(.eyebrow){color:rgba(239,231,212,.68);line-height:1.55} .privacy-settings__close{position:absolute;top:.65rem;right:.65rem;width:2.75rem;height:2.75rem;border:0;background:none;color:#EFE7D4;font-size:1.65rem;cursor:pointer} .privacy-settings label{display:flex;gap:.85rem;margin:1.5rem 0;padding:1rem;border:1px solid rgba(216,207,184,.2);background:rgba(255,255,255,.025);cursor:pointer} .privacy-settings label input{width:1.25rem;height:1.25rem;flex:0 0 auto;accent-color:#C9A84C} .privacy-settings label span{display:grid;gap:.25rem;font-family:var(--sans)} .privacy-settings label small{color:rgba(239,231,212,.62);line-height:1.45} .privacy-doc{min-height:100svh;background:#07090E;color:#EFE7D4;padding:clamp(1.25rem,5vw,4rem)} .privacy-doc__mark{display:inline-flex;align-items:center;gap:.7rem;color:#E4C079;text-decoration:none;font:600 .82rem/1 var(--sans);letter-spacing:.2em} .privacy-doc__mark .sigil{width:2.3rem;height:2.3rem} .privacy-doc main{width:min(47rem,100%);margin:clamp(4rem,10vh,8rem) auto} .privacy-doc h1{margin:.25em 0 .45em;font:400 clamp(3rem,9vw,6.4rem)/.9 var(--serif);letter-spacing:-.04em} .privacy-doc h2{margin:1.8em 0 .35em;font:400 clamp(1.6rem,4vw,2.5rem)/1 var(--serif)} .privacy-doc p{max-width:67ch;color:rgba(239,231,212,.72);font:400 1rem/1.75 var(--sans)} .privacy-doc a{color:#E4C079;text-underline-offset:.2em} .privacy-doc .eyebrow{color:#C9A84C;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase} @media (max-width:680px){ .consent-banner{grid-template-columns:1fr;gap:.85rem} .consent-banner__actions{display:grid;grid-template-columns:1fr 1fr} .consent-banner button{width:100%} } .dsec{ margin:0 0 2.9rem; } .dsec:last-of-type{ margin-bottom:0; } .dsec__h{ margin:0 0 .7rem; font-family:var(--serif); font-weight:400; font-size:clamp(23px,2.4vw,30px); line-height:1.12; letter-spacing:-.01em; color:var(--ink); } .dsec__p{ margin:0 0 .85rem; font-size:14px; line-height:1.68; color:rgba(239,231,212,.68); max-width:46ch; } .dsec__p em{ font-family:var(--serif); font-style:italic; color:var(--ink); } .cap{ padding:.95rem 0; border-top:1px solid rgba(216,207,184,.1); } .cap:first-of-type{ border-top:0; padding-top:.3rem; } .cap h3{ margin:0 0 .4rem; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:#E0B472; font-weight:400; } .cap p{ margin:0; font-size:13.5px; line-height:1.7; color:rgba(239,231,212,.66); } .dlink{ display:inline-block; margin-top:.5rem; color:var(--ink); text-decoration:none; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; border-bottom:1px solid rgba(169,120,49,.6); padding-bottom:.3em; transition:color .3s, border-color .3s; } .dlink:hover{ color:#fff; border-color:var(--bone); } .dlist{ list-style:none; margin:0; padding:0; } .dlist li + li{ border-top:1px solid rgba(216,207,184,.1); } .dlist a,.dlist button{ display:flex; align-items:center; gap:.9rem; width:100%; padding:.82rem 0; background:none; border:0; cursor:pointer; text-align:left; font:inherit; font-size:12px; letter-spacing:.17em; text-transform:uppercase; color:rgba(239,231,212,.7); text-decoration:none; transition:color .3s, padding-left .3s; } .dlist a:hover,.dlist button:hover{ color:#fff; padding-left:.4rem; } .dlist i{ font-style:normal; color:rgba(169,120,49,.8); font-size:10px; } /* the top bar carries the chapters on a wide screen; the drawer only needs to on a phone, where .nav a:not(.cta) is display:none */ @media (min-width:761px){ .dsec--chapters{ display:none; } } /* ── the intake ───────────────────────────────────────────────────────────── */ .intake{ margin-top:1.5rem; } .field{ margin:0 0 1.35rem; border:0; padding:0; min-width:0; } .field label,.field legend{ display:block; margin:0 0 .5rem; padding:0; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:rgba(239,231,212,.5); } .field .req{ color:rgba(169,120,49,.9); letter-spacing:.18em; } /* Rules, not boxes. A boxed form on a rendered city reads as an intrusion; an underline reads as part of the type. */ .intake input[type=text], .intake input[type=email], .intake select, .intake textarea{ width:100%; display:block; font:inherit; font-size:15px; color:var(--ink); background:rgba(216,207,184,.04); border:0; border-bottom:1px solid rgba(216,207,184,.24); border-radius:0; padding:.62rem .1rem; margin:0; transition:border-color .3s, background .3s; -webkit-appearance:none; appearance:none; } .intake textarea{ resize:vertical; min-height:5.6rem; line-height:1.6; } .intake select{ background-image:linear-gradient(45deg,transparent 50%,rgba(216,207,184,.6) 50%), linear-gradient(135deg,rgba(216,207,184,.6) 50%,transparent 50%); background-position:calc(100% - 13px) 1.25rem, calc(100% - 8px) 1.25rem; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:2rem; cursor:pointer; } .intake select option{ background:#0B0F17; color:var(--ink); } .intake input:focus,.intake select:focus,.intake textarea:focus{ outline:0; border-bottom-color:var(--gold); background:rgba(216,207,184,.07); } .intake input:user-invalid{ border-bottom-color:rgba(180,70,70,.9); } .chips{ display:flex; flex-wrap:wrap; gap:.45rem; } .chip{ margin:0; } .chip input{ position:absolute; opacity:0; width:0; height:0; } .chip span{ display:inline-block; padding:.5em .95em; cursor:pointer; border:1px solid rgba(216,207,184,.24); border-radius:1px; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:rgba(239,231,212,.62); transition:border-color .25s, color .25s, background .25s; } .chip span:hover{ border-color:rgba(216,207,184,.5); color:var(--ink); } .chip input:checked + span{ border-color:var(--gold); color:#0B0F17; background:#C9A84C; } .chip input:focus-visible + span{ outline:2px solid rgba(169,120,49,.9); outline-offset:2px; } /* the honeypot: present to a bot, absent to a person and to a screen reader */ .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .intake__go{ display:inline-block; margin:.5rem 0 0; font:inherit; cursor:pointer; padding:.95em 2.1em; border:0; border-radius:1px; background:var(--bone); color:var(--night); font-size:11.5px; letter-spacing:.21em; text-transform:uppercase; transition:background .3s, opacity .3s; } .intake__go:hover{ background:#fff; } .intake__go:focus-visible{ outline:2px solid rgba(169,120,49,.9); outline-offset:3px; } .intake__go[disabled]{ opacity:.45; cursor:progress; } .intake__note{ margin:.95rem 0 0; font-size:12.5px; line-height:1.6; min-height:1.2em; color:rgba(239,231,212,.62); } .intake__note[data-tone="ok"]{ color:#8FBF9C; } .intake__note[data-tone="err"]{ color:#D98B8B; } .intake__note a{ color:inherit; } /* ── phone ────────────────────────────────────────────────────────────────── */ @media (max-width:760px){ .wordmark{ gap:8px; } .sigil{ width:26px; height:26px; stroke-width:2.4; } .wordmark__txt{ font-size:10px; letter-spacing:.18em; } .nav .cta{ padding:.62em .85em; font-size:11px; letter-spacing:.13em; white-space:nowrap; } .drawer__panel{ width:100%; border-left:0; } .links a{ font-size:10.5px; padding:.45em .8em; } } .intake__direct{ margin:.7rem 0 0; font-size:12.5px; line-height:1.6; color:rgba(239,231,212,.5); } .intake__direct a{ color:rgba(239,231,212,.8); } /* The score toggle is not a chapter link, so it must not sit in the same run of them. A hairline says "a different kind of thing" without spending a word. The founder: "on top there is music and another there is sound ... they would get confused". */ .nav__sep{ width:1px; height:15px; flex:none; background:rgba(216,207,184,.22); margin:0 clamp(2px,.6vw,8px); } @media (max-width:760px){ .nav__sep{ display:none; } } /* ---- the boot screen ------------------------------------------------------ Above everything, including the drawer, because nothing else may be touched until the world exists. It removes itself from the DOM when done: a full-screen fixed canvas left lying around is a compositing layer the render loop would then pay for on every frame, forever. */ #boot{ position:fixed; inset:0; z-index:100; background:var(--night); transition:opacity .55s ease; } #boot.is-gone{ opacity:0; pointer-events:none; } #boot-canvas{ position:absolute; inset:0; display:block; } #boot-label{ /* `top` is written by js/loader.js from the mechanism's real radius. The guessed offset that used to live here disagreed with the canvas and put the type on the outer ring at 400x781. */ position:absolute; left:0; right:0; top:50%; margin:0; text-align:center; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:rgba(239,231,212,.42); } @media (prefers-reduced-motion: reduce){ #boot{ transition:opacity .2s ease; } } /* ═══ THE PANEL, REBUILT ═════════════════════════════════════════════════════ The founder: "everything on the side panel, upper section links, are pretty shit and outdated. We need something killer just like the website we have build using three.js." The diagnosis: it was tasteful, and it was a normal website panel. It had no relationship to the world behind it. Everything below borrows the world's own physics rather than inventing a second visual language: - one light source, upper left, exactly like the moon in the scene - gold that behaves like LAMPLIGHT, pooling on hover, never a flat colour swap - headings CARVED, the way the Stoa's inscriptions are cut, not just set - the panel composes itself on open instead of arriving as a finished slab */ /* a lit edge where the panel meets the city, the same gold rim the geometry has */ .drawer__panel::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:linear-gradient(180deg, rgba(228,192,121,0) 0%, rgba(228,192,121,.55) 18%, rgba(228,192,121,.25) 58%, rgba(228,192,121,0) 100%); pointer-events:none; } /* light falls from the upper left, so the panel is a lit surface not a fill */ .drawer__panel::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 70% at 0% 0%, rgba(216,207,184,.055) 0%, rgba(216,207,184,.018) 38%, transparent 72%); } .drawer__bar, .drawer__scroll, .journey, .journey__label{ position:relative; z-index:1; } /* ---- the journey rail ---------------------------------------------------- */ .journey{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:2px; padding:1.15rem clamp(22px,4vw,40px) .35rem; } .journey__road{ position:absolute; left:clamp(22px,4vw,40px); right:clamp(22px,4vw,40px); top:calc(1.15rem + 11px); height:1px; background:linear-gradient(90deg, rgba(216,207,184,.10), rgba(216,207,184,.26), rgba(216,207,184,.10)); } .journey button{ position:relative; flex:1 1 0; min-width:0; display:grid; place-items:center; gap:0; padding:.1rem 0 .35rem; background:none; border:0; cursor:pointer; font:inherit; color:rgba(239,231,212,.4); transition:color .32s ease; } .journey button i{ font-style:normal; font-size:9px; letter-spacing:.14em; padding-top:14px; /* clears the road */ } /* the station itself: a tick standing ON the road */ .journey button::before{ content:""; position:absolute; top:7px; left:50%; margin-left:-1px; width:2px; height:9px; border-radius:1px; background:rgba(216,207,184,.34); transition:background .32s ease, height .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s ease; } .journey button:hover{ color:rgba(239,231,212,.85); } .journey button:hover::before{ background:rgba(228,192,121,.7); height:12px; } .journey button:focus-visible{ outline:2px solid rgba(169,120,49,.85); outline-offset:2px; border-radius:2px; } /* YOU ARE HERE. A lamp, not a highlight. */ .journey button.is-here{ color:#E4C079; } .journey button.is-here::before{ background:#E4C079; height:15px; top:4px; box-shadow:0 0 10px rgba(228,192,121,.95), 0 0 22px rgba(228,192,121,.45); } .journey__label{ margin:0; padding:0 clamp(22px,4vw,40px) .9rem; font-family:var(--serif); font-size:14px; letter-spacing:.02em; color:rgba(239,231,212,.62); border-bottom:1px solid rgba(216,207,184,.1); padding-bottom:.95rem; } /* ---- the reveal ---------------------------------------------------------- Sections rise in sequence rather than the panel arriving finished. This is the single cheapest thing that separates "a div appeared" from "something was composed", and it is the same easing the camera uses in the world. */ .dsec{ opacity:0; transform:translateY(16px); } .drawer.is-open .dsec{ opacity:1; transform:none; transition:opacity .62s cubic-bezier(.2,.8,.2,1) calc(.16s + var(--i,0) * .075s), transform .62s cubic-bezier(.2,.8,.2,1) calc(.16s + var(--i,0) * .075s); } .journey button, .journey__label{ opacity:0; } .drawer.is-open .journey button{ opacity:1; transition:opacity .4s ease calc(.1s + (var(--n,0) * .035s)), color .32s ease; } .drawer.is-open .journey__label{ opacity:1; transition:opacity .5s ease .42s; } @media (prefers-reduced-motion: reduce){ .dsec, .journey button, .journey__label{ opacity:1; transform:none; transition:none; } } /* ---- carved headings ----------------------------------------------------- Cut into the surface rather than printed on it: a dark line above the stroke and a pale one below is exactly how the inscriptions on the Stoa read under the same upper-left light. */ .dsec__h{ text-shadow:0 -1px 0 rgba(0,0,0,.55), 0 1px 0 rgba(216,207,184,.09); } /* a rule that draws itself out from the heading as the section arrives */ .dsec__h::after{ content:""; display:block; height:1px; margin-top:.72rem; background:linear-gradient(90deg, rgba(228,192,121,.85), rgba(228,192,121,0)); transform:scaleX(0); transform-origin:0 50%; transition:transform .85s cubic-bezier(.2,.8,.2,1) calc(.34s + var(--i,0) * .075s); } .drawer.is-open .dsec__h::after{ transform:scaleX(1); } /* ---- lamplight on everything that responds ------------------------------- */ .dlist a, .dlist button{ position:relative; } .dlist a::before, .dlist button::before{ content:""; position:absolute; left:-12px; right:-12px; top:0; bottom:0; background:radial-gradient(60% 120% at 0% 50%, rgba(228,192,121,.16), transparent 72%); opacity:0; transition:opacity .34s ease; pointer-events:none; } .dlist a:hover::before, .dlist button:hover::before{ opacity:1; } .dlist a:hover, .dlist button:hover{ color:#F3E3BC; } .cap{ transition:border-color .35s ease; } .cap h3{ text-shadow:0 0 14px rgba(228,192,121,.28); } /* ---- the form as carved slots -------------------------------------------- */ .field{ position:relative; } .intake input[type=text], .intake input[type=email], .intake select, .intake textarea{ background:linear-gradient(180deg, rgba(0,0,0,.22), rgba(216,207,184,.035)); box-shadow:inset 0 1px 0 rgba(0,0,0,.35); } /* the focus rule lights from the centre out, like a lamp being lit */ .field::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, rgba(228,192,121,0), #E4C079, rgba(228,192,121,0)); transform:scaleX(0); transition:transform .4s cubic-bezier(.2,.8,.2,1); pointer-events:none; } .field:focus-within::after{ transform:scaleX(1); } .field:focus-within label{ color:rgba(228,192,121,.9); } .field label{ transition:color .3s ease; } .chip span{ box-shadow:inset 0 1px 0 rgba(216,207,184,.06); } .chip input:checked + span{ background-color:#C9A84C; /* base, so a checked chip is never a transparent outline if the gradient is dropped */ background-image:linear-gradient(180deg,#E4C079,#B8923A); box-shadow:0 0 14px rgba(228,192,121,.4), inset 0 1px 0 rgba(255,255,255,.35); } .intake__go{ background:linear-gradient(180deg,#EFE7D4,#CDC2A6); box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 6px 22px rgba(0,0,0,.35); } .intake__go:hover{ background:linear-gradient(180deg,#fff,#E4DAC0); } @media (max-width:760px){ .journey button i{ font-size:8px; } .journey__label{ font-size:13px; } } /* ---- edge safe areas, and a bar that survives pale marble ------------------ All seven traverse judges reported the copy printing through the header. The fade itself is computed in js/surface.js; this is the hook it writes to. filter, not opacity: the plate's own reveal already owns opacity, and these two need to multiply rather than fight. */ .plate{ filter:opacity(var(--edge, 1)); } /* The nav lost all contrast wherever pale geometry passed behind it (flagged on s016, s023, s027, s098). A gradient tied to the bar, not a solid band, so it never reads as a chrome strip laid over the world. */ .topbar::before{ content:""; position:absolute; left:0; right:0; top:0; height:210%; background:linear-gradient(to bottom, rgba(7,9,14,.74) 0%, rgba(7,9,14,.42) 46%, rgba(7,9,14,0) 100%); pointer-events:none; z-index:-1; } .topbar{ isolation:isolate; } /* The copy scrim was being seen as "an opaque black rectangle with crisp square corners" on frames where the plate is tall. A radial gradient still has a rectangular box, and its corners show the moment the falloff does not reach transparent before the edge. Blurring the scrim itself removes the box entirely, at no cost - it is a backdrop, it is supposed to be soft. */ .plate::before{ filter:blur(10px); }