:root{--ground:#ffffff;--ink:#1c1b1f;--ink-muted:#45473f;--accent:#ffd700;--line:#ccc6b7;--frame-inset:clamp(10px,.9vw,18px);--frame-radius:20px;--ff-body:'DM Sans',sans-serif;--ff-heading:'DM Sans',sans-serif;color-scheme:light} *{box-sizing:border-box}html{scroll-behavior:auto;overflow-x:clip;scrollbar-color:#45473f #ffffff}body{margin:0;background:#ffffff;color:var(--ink);font:16px/1.5 var(--ff-body)}::selection{background:var(--accent);color:var(--ink)}a{color:inherit;text-decoration:none;text-underline-offset:.25em}a:hover{text-decoration:underline}button{font:inherit;color:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:6px}img{display:block;max-width:100%}[hidden]{display:none!important}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.world-skip{position:fixed;top:8px;left:20px;z-index:100;transform:translateY(-150%);background:#ffffff;padding:12px}.world-skip:focus{transform:none} .world-header{height:96px;position:absolute;inset:0 0 auto;z-index:15;display:flex;align-items:center;justify-content:space-between;padding:0 4.4vw;gap:24px;transition:opacity .2s,transform .2s}.world-header img{width:177px;height:auto}.world-header nav{display:flex;align-items:center;gap:32px;font-size:14px;font-weight:500}.world-demo{border-bottom:1px solid var(--ink);padding:10px 0;display:flex;align-items:center;gap:24px}.world-demo svg,.world-button svg{flex-shrink:0;transition:transform .2s}.world-demo:hover svg,.world-button:hover svg{transform:translate(2px,-2px)}.world-scrolled .world-header{opacity:0;pointer-events:none;transform:translateY(-20px)} .world-menu-toggle{position:fixed;right:28px;top:24px;z-index:40;display:flex;align-items:center;gap:16px;padding:19px 24px;border:1px solid var(--line);background:#ffffff;border-radius:20px;text-transform:uppercase;font-size:13px;font-weight:600;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .2s,transform .2s,background .2s,visibility .2s}.world-scrolled .world-menu-toggle{opacity:1;visibility:visible;transform:none}.world-menu-toggle:hover{background:var(--accent)}.world-menu{position:fixed;inset:18px;margin:0 0 0 auto;width:min(690px,calc(100vw - 36px));max-width:none;height:calc(100dvh - 36px);max-height:none;border:1px solid var(--line);border-radius:20px;background:var(--ground);padding:32px 42px;color:var(--ink)}.world-menu::backdrop{background:rgb(30 30 26 / .4)}.world-menu-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:55px}.world-menu-top img{width:170px;height:auto}.world-menu-top button{background:none;border:0;padding:10px}.world-menu nav{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.world-menu nav a{font-size:clamp(32px,min(4.6vw,6.8vh),54px);line-height:1.15;letter-spacing:-.03em}.world-menu-bottom{display:flex;flex-wrap:wrap;gap:20px;margin-top:55px;font-size:13px} .world-stage{position:relative;overflow-x:clip}.world-section{position:relative;min-height:100svh;padding:124px 4.4vw 74px;display:grid;grid-template-columns:minmax(320px,39%) 1fr;column-gap:36px;row-gap:32px;align-items:start;background:transparent}.world-copy{position:relative;z-index:3;max-width:590px;align-self:start}.world-eyebrow{display:flex;align-items:center;gap:12px;font-size:12px;line-height:1.4;letter-spacing:.045em;font-weight:600;margin:0 0 20px;text-transform:uppercase}.world-eyebrow svg{width:14px;height:14px;flex-shrink:0}.world-title{font-family:var(--ff-heading);font-weight:500;letter-spacing:-.035em;font-size:clamp(40px,4.1vw,64px);line-height:1.06;margin:0 0 24px;text-wrap:balance}.world-prose{font-size:18px;line-height:1.6;max-width:65ch}.world-prose p{margin:0 0 16px}.world-prose p:last-child{margin-bottom:0}.world-actions{display:flex;align-items:center;gap:24px;margin-top:26px;flex-wrap:wrap}.world-button{background:var(--ink);color:#fffbf2;padding:15px 20px;display:inline-flex;align-items:center;justify-content:space-between;gap:27px;font-size:14px;border-radius:3px;transition:background .2s}.world-button:hover{background:#384b30;text-decoration:none}.world-text-link{font-size:14px;border-bottom:1px solid;padding:6px 0;display:inline-flex;align-items:center;gap:14px} /* 1 October 2026: page.js applyTheme() writes the theme ink (--ink, --ink-muted) on its readers, not on (a change there restyled the whole page on every theme flip): the chapters and the header take their colour from their own ink, at the lowest specificity, so every colour set for them below still applies. Elsewhere it equals 's, as before. */ .world-section,:where(.superstrate-world-page) .world-header{color:var(--ink)} .world-art-track{align-self:stretch;min-width:0;position:relative;min-height:560px}.world-art{position:sticky;top:110px;width:100%;height:min(75svh,760px);min-height:280px;isolation:isolate}.world-still{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.world-live .world-art{cursor:grab}.world-live.is-dragging .world-art{cursor:grabbing}.world-canvas{display:none;width:100vw;height:100dvh;position:fixed;inset:0;pointer-events:none;z-index:1}.world-live .world-canvas{display:block;opacity:0;transition:opacity .4s}.world-live.world-ready .world-canvas{opacity:1}.world-live .world-still{visibility:hidden} /* 29 September 2026 (background loading pass): once the live world is up, the stills leave the layout as well, so the lazy ones are never downloaded while nothing shows them (about 350 KB on a phone scroll). Their art boxes keep their own heights; the stills come back with the fallback (no world-live). */ .world-live.world-ready .world-still{display:none} .world-live:not(.world-ready) .world-section--hero .world-still{visibility:visible} .world-section--discovery, .world-section--boundaries {grid-template-columns:1fr minmax(320px,38%)}.world-section--discovery .world-copy, .world-section--boundaries .world-copy {grid-column:2;grid-row:1}.world-section--discovery .world-art-track, .world-section--boundaries .world-art-track {grid-column:1;grid-row:1}.world-section--commitment .world-copy {padding-top:90px} .world-section--privacy,.world-section--audience,.world-section--ask{grid-template-columns:1fr}.world-section--privacy .world-copy{max-width:none;display:grid;grid-template-columns:1fr 1fr;column-gap:7vw;align-items:start}.world-section--privacy .world-eyebrow{grid-column:1/-1}.world-section--privacy .world-title{font-size:clamp(38px,3.3vw,52px);max-width:670px;margin-bottom:0}.world-section--privacy .world-prose{padding-top:2px}.world-section--privacy .world-copy{grid-row:2}.world-section--privacy .world-art-track{grid-row:1}.world-section--privacy .world-actions{grid-column:2}.world-section--privacy .world-art-track,.world-section--audience .world-art-track,.world-section--ask .world-art-track{min-height:420px}.world-section--privacy .world-art,.world-section--audience .world-art,.world-section--ask .world-art{height:52svh;min-height:320px}.world-section--audience .world-copy,.world-section--ask .world-copy{margin:0 auto;text-align:center;max-width:780px}.world-section--audience .world-eyebrow,.world-section--ask .world-actions{justify-content:center}.world-section--ask .world-copy{grid-row:2}.world-section--ask .world-art-track{grid-row:1}.world-section--ask{padding-bottom:120px} .world-controls{position:fixed;right:22px;bottom:16px;z-index:40}.world-controls button{background:var(--ground);border:1px solid var(--line);border-radius:3px;padding:9px 14px;font-size:12px}.world-controls button:hover{border-color:var(--ink)}.motion-authored-line__inner{vertical-align:top}.split-line{display:block;padding-bottom:.08em;margin-bottom:-.08em}.world-copy [aria-hidden='true']{pointer-events:none}.world-live .world-section{min-height:var(--section-height,120svh)} .world-footer{margin:40px 28px 92px;position:relative;z-index:4;background:#1e1e1a;color:#f6f3ec;border-radius:28px;padding:76px 4.4vw 50px;overflow:hidden}.world-footer-top{display:grid;grid-template-columns:1fr;gap:8vw;align-items:center}.world-footer-top p{font-size:12px;text-transform:uppercase;letter-spacing:.045em}.world-footer h2{font-size:clamp(30px,3.6vw,52px);line-height:1.1;letter-spacing:-.035em;font-weight:500;max-width:18ch;margin:22px 0 26px}.world-footer-call{font-size:clamp(20px,2vw,28px);display:inline-flex;align-items:center;gap:24px;border-bottom:1px solid;padding-bottom:8px}.world-footer-main{display:grid;grid-template-columns:1fr 2.3fr;align-items:end;gap:40px;margin-top:100px}.world-footer-main nav{display:grid;grid-template-columns:1fr;gap:11px;font-size:16px}.world-footer-wordmark{font-size:clamp(72px,12.1vw,200px);font-weight:500;line-height:.85;letter-spacing:-.04em;display:block;text-align:right}.world-footer-bottom{margin-top:70px;padding-top:30px;border-top:1px solid rgb(246 243 236 / .25);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;font-size:13px}.world-footer-bottom>:last-child{justify-self:end}.world-footer-credit{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 22px;text-align:center}.world-footer-credit a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}.world-back-top{display:flex;gap:16px;align-items:center;border:0;background:none;color:inherit}.world-back-top svg{border:1px solid rgb(246 243 236 / .5);border-radius:50%;width:40px;height:40px;padding:10px} @media(min-width:1101px) and (max-height:800px){.world-section{padding-top:104px}.world-title{font-size:42px;margin-bottom:18px}.world-prose{font-size:15px;line-height:1.55}.world-eyebrow{margin-bottom:15px}.world-actions{margin-top:18px}.world-art{top:90px;height:65svh}} @media(max-width:1100px){.world-header{height:78px;padding:0 6vw}.world-header img{width:155px}.world-header nav{gap:20px}.world-section, .world-section--discovery, .world-section--boundaries {padding:104px 6vw 58px;grid-template-columns:1fr;row-gap:28px;align-items:start; /* The stacked section is taller than its content by the morph runway (--section-height = max(vh, content + .32-.48vh), see page.js measure()). With two auto rows and `align-content: normal` the grid STRETCHED that runway into the copy row, so the copy-to-object gap measured 129-274 px instead of the authored 28 px (owner: "not huge"). Start the rows and give the runway to the art track instead, whose sticky .world-art rides it: the gap is exactly row-gap again and --section-height, the runway and the W4 morph ranges are all unchanged. */ align-content:start;grid-template-rows:auto minmax(0,1fr)} /* Art above copy: the second row is the copy, which must stay content-sized. */ .world-section--privacy,.world-section--ask{grid-template-rows:auto auto}.world-copy, .world-section--discovery .world-copy, .world-section--boundaries .world-copy {max-width:none;grid-column:1;grid-row:1;padding-top:0}.world-art-track, .world-section--discovery .world-art-track, .world-section--boundaries .world-art-track {grid-column:1;grid-row:2;min-height:390px}.world-section--privacy .world-copy,.world-section--ask .world-copy{grid-row:2}.world-section--privacy .world-art-track,.world-section--ask .world-art-track{grid-row:1}.world-title{font-size:clamp(34px,4.6vw,48px);max-width:25ch;margin-bottom:20px}.world-prose{max-width:75ch;font-size:16px}.world-prose p{margin-bottom:14px}.world-art,.world-section--privacy .world-art,.world-section--audience .world-art,.world-section--ask .world-art{height:46svh;min-height:300px;top:92px}.world-section--privacy .world-copy{display:block}.world-section--privacy .world-title{margin-bottom:20px}.world-actions{margin-top:20px}.world-eyebrow{margin-bottom:16px}.world-footer-main{grid-template-columns:1fr;margin-top:70px}.world-footer-main nav{grid-template-columns:repeat(3,1fr)}.world-footer-wordmark{font-size:17vw;text-align:left}.world-footer-top{gap:5vw}.world-footer-main nav{font-size:14px}} @media(max-width:600px){.world-header{height:76px;padding:22px 5vw 0;align-items:flex-start}.world-header img{width:132px;margin-top:2px}.world-header nav{gap:6px 15px;flex-wrap:wrap;justify-content:flex-end;font-size:11px;max-width:175px}.world-header nav>a:first-child{display:none}.world-demo{font-size:11px;gap:10px;padding:0 0 3px}.world-demo svg{width:12px;height:12px}.world-menu-toggle{right:14px;top:14px;padding:13px 17px;border-radius:16px;font-size:11px;gap:12px}.world-menu{inset:10px;width:calc(100vw - 20px);height:calc(100dvh - 20px);padding:24px}.world-menu-top{margin-bottom:38px}.world-menu nav a{font-size:38px}.world-menu-bottom{margin-top:38px}.world-section, .world-section--discovery, .world-section--boundaries {padding:96px 5vw 50px;row-gap:28px}.world-title,.world-section--privacy .world-title{font-size:32px;line-height:1.08;letter-spacing:-.03em;margin-bottom:17px}.world-prose{font-size:15px;line-height:1.55}.world-prose p{margin-bottom:14px}.world-eyebrow{font-size:11px;margin-bottom:14px;gap:10px}.world-actions{gap:18px;margin-top:18px}.world-button{font-size:12px;padding:12px 15px;gap:15px}.world-text-link{font-size:12px}.world-art-track,.world-section--privacy .world-art-track,.world-section--audience .world-art-track,.world-section--ask .world-art-track{min-height:310px}.world-art,.world-section--privacy .world-art,.world-section--audience .world-art,.world-section--ask .world-art{height:38svh;min-height:270px;top:90px}.world-controls{right:12px;bottom:10px}.world-controls button{font-size:11px;padding:7px 10px}.world-footer{padding:55px 5vw 80px;border-radius:20px}.world-footer-top{grid-template-columns:1fr;gap:36px}.world-footer h2{font-size:34px;max-width:20ch}.world-footer-main nav{grid-template-columns:1fr 1fr}.world-footer-bottom{grid-template-columns:1fr;justify-items:start;gap:18px;margin-top:36px}.world-footer-bottom>:last-child{justify-self:start}.world-footer-credit{justify-content:flex-start;text-align:left}.world-footer-wordmark{font-size:16.6vw}.world-section--audience .world-copy,.world-section--ask .world-copy{text-align:left}.world-section--audience .world-eyebrow,.world-section--ask .world-actions{justify-content:flex-start}} @media(hover:none){.world-live .world-art{cursor:auto}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}.world-art{position:relative;top:auto}.world-menu-toggle{transition:none}} /* Artwork remains transparent but its controls and Orisa ornaments sit above the fixed world canvas, without lifting an opaque reading panel over it. */ .world-art-track{z-index:2} [data-world-divider]{position:relative;z-index:4} /* Owner refinement: composed pinned chapters, generous object fields. */ body{position:relative} .world-section--hero{padding-top:170px} .world-pinned .world-stage{height:100svh;min-height:100svh} .world-pinned .world-section{position:absolute;inset:0;z-index:3;height:100svh;min-height:0;padding-top:84px;padding-bottom:46px;visibility:visible;overflow:clip;align-items:center} .world-pinned .world-section--hero{padding-top:148px} .world-pinned .world-section .world-copy{align-self:center} .world-pinned .world-art-track{min-height:0;height:100%;align-self:stretch} .world-pinned .world-art{position:relative;top:0;min-height:0;height:100%;width:100%} .world-pinned .world-section--commitment .world-copy {padding-top:0} .world-pinned .world-section--audience{grid-template-rows:auto minmax(0,1fr);gap:26px} .world-pinned .world-section--privacy,.world-pinned .world-section--ask{grid-template-rows:minmax(0,1fr) auto;gap:26px} .world-pinned [data-world-divider]{position:absolute;left:0;right:0;bottom:calc(6px + var(--frame-inset));pointer-events:none;opacity:1} .world-pinned .world-section--privacy .world-title{font-size:clamp(36px,3vw,48px)} .world-pinned .world-section--privacy .world-prose{font-size:17px} .world-pinned .world-section--audience .world-copy{max-width:880px} .world-pinned .world-section--audience .world-title{max-width:none} .world-emphasis{font-weight:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em;box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:background-color .2s,color .2s} strong.world-emphasis{font-weight:650}em.world-emphasis{font-style:italic} .world-emphasis:hover{background:#ffd700;color:#1e1e1a} /* `inherit`, never `auto`: SplitText marks every line wrapper aria-hidden, and an `auto` here re-arms those wrappers as hit targets inside the INACTIVE chapters that showChapter() has set to pointer-events:none. In the pinned stage all ten chapters are stacked in one box, so the #commitment title then sat over the top half of chapter 2's first question card and ate its hover. `inherit` keeps the rule's real job -- undoing the `none` above for the chapter the visitor is actually in -- while respecting a section that is switched off. */ .world-copy [aria-hidden='true']{pointer-events:inherit} .world-eyebrow{width:fit-content;max-width:100%;cursor:default} .world-eyebrow svg{transition:transform .3s ease} .world-eyebrow:hover svg{transform:translate(3px,-3px)} .world-eyebrow:hover .world-eyebrow-label{text-decoration:underline;text-underline-offset:.3em} .world-footer-wordmark{display:block;width:100%;font-size:inherit;line-height:normal;letter-spacing:normal;min-width:0} .world-footer-wordmark img{width:100%;height:auto} .world-back-top{position:absolute;right:30px;bottom:24px;z-index:10;width:48px;height:48px;justify-content:center;background:#ffffff;color:#1e1e1a;border:1px solid var(--line);border-radius:50%;transition:background .2s,transform .2s} .world-back-top:hover{background:#ffd700;transform:translateY(-3px)} .world-back-top svg{border:0;width:24px;height:24px;padding:2px} .world-controls{right:auto;left:18px} .world-atmosphere{position:fixed;inset:0;pointer-events:none;z-index:2;overflow:hidden;opacity:.65} .world-atmosphere i{position:absolute;display:block;border:1px solid rgb(108 138 94 / .18);background:rgb(169 191 152 / .12);width:160px;height:160px;transform:rotate(30deg)} .world-atmosphere i:first-child{right:-112px;top:38%;background:rgb(255 215 0 / .2);border-color:rgb(224 180 0 / .15);width:210px;height:210px;transform:rotate(-20deg)} .world-atmosphere i:nth-child(2){left:-125px;top:69%;width:220px;height:220px;border-radius:50%} .world-atmosphere i:last-child{left:25%;top:-150px;background:rgb(255 224 102 / .18);width:300px;height:170px;transform:rotate(-8deg)} @media(min-width:1101px) and (max-height:850px){.world-pinned .world-section{padding-top:82px;padding-bottom:38px}.world-pinned .world-section--hero{padding-top:118px}.world-pinned .world-title{font-size:44px}.world-pinned .world-prose{font-size:17px;line-height:1.5}.world-pinned .world-actions{margin-top:16px}.world-pinned .world-section--audience .world-prose{font-size:16px}} @media(max-width:1100px){.world-section--hero{padding-top:128px}.world-title{font-size:clamp(36px,4.8vw,52px)}.world-prose{font-size:18px}.world-footer-wordmark{font-size:inherit}.world-footer{margin:28px 20px 88px}} @media(max-width:600px){.world-section--hero{padding-top:122px}.world-title,.world-section--privacy .world-title{font-size:35px}.world-prose{font-size:17px}.world-footer{margin:24px 14px 88px;padding:42px 24px}.world-footer-main{margin-top:44px}.world-footer-wordmark{font-size:inherit}.world-controls{left:12px;right:auto}.world-back-top{right:20px}.world-atmosphere{opacity:.4}} @media(min-width:1101px){.world-section--hero{grid-template-columns:minmax(320px,44%) 1fr}.world-section--hero .world-copy{max-width:650px}.world-section--hero .world-title{font-size:clamp(44px,3.7vw,64px);text-wrap:initial}.world-pinned .world-section--hero .world-copy{align-self:center}} @media(max-width:600px){.world-atmosphere i:first-child{right:-185px}.world-atmosphere i:nth-child(2){left:-200px}} /* Desktop composition: owner review, 17 September. */ .world-title,.world-footer h2{font-weight:700;font-style:normal;text-decoration:none} .world-title span{font:inherit;color:inherit;text-decoration:inherit} .world-eyebrow-label{text-decoration:underline;text-underline-offset:.3em} .world-back-top{position:fixed;right:24px;bottom:24px;z-index:45;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility .2s,background .2s,transform .2s} .world-off-top .world-back-top{opacity:1;visibility:visible;pointer-events:auto} .world-button[data-demo],.world-text-link[data-demo],.world-demo{background:#ffd700;color:#1e1e1a;border:0;border-radius:3px;padding:14px 20px} .world-footer-call{color:#ffd700}.world-button[data-demo]:hover,.world-text-link[data-demo]:hover,.world-demo:hover{background:#ffe56b;text-decoration:none} @media(min-width:1101px){ .world-pinned .world-section{padding:100px 4.4vw 48px;align-items:start;column-gap:64px} .world-pinned .world-section .world-copy{align-self:start;max-width:none} .world-pinned .world-section--hero{padding-top:156px;grid-template-columns:51% minmax(0,1fr);column-gap:36px} .world-pinned .world-section--hero .world-copy{align-self:center} .world-pinned .world-title,.world-pinned .world-section--hero .world-title,.world-pinned .world-section--privacy .world-title{font-size:clamp(46px,3.45vw,68px);line-height:1.08;max-width:none;letter-spacing:-.04em} .world-pinned .world-prose,.world-pinned .world-section--privacy .world-prose,.world-pinned .world-section--audience .world-prose{font-size:clamp(18px,1.22vw,24px);line-height:1.5;max-width:none} .world-pinned .world-prose p{margin-bottom:22px} .world-pinned .world-section--discovery, .world-pinned .world-section--boundaries {grid-template-columns:minmax(0,1fr) 46%} .world-pinned .world-section--commitment{grid-template-columns:46% minmax(0,1fr)} .world-pinned .world-section--discovery .world-art-track,.world-pinned .world-section--boundaries .world-art-track{width:94%;justify-self:start} .world-pinned .world-section--privacy .world-copy{column-gap:5vw} .world-pinned .world-section--audience .world-copy{max-width:1160px;width:100%} .world-section--audience .world-eyebrow{margin-inline:auto} .world-section--audience .world-prose,.world-section--ask .world-prose{margin-inline:auto} .world-pinned .world-section--ask .world-copy{max-width:1140px;width:100%} .world-pinned .world-section--privacy,.world-pinned .world-section--ask{padding-bottom:76px;row-gap:20px} .world-hero-star{top:28px!important;right:2vw!important;width:40px!important} .world-boundary-wheel{bottom:22px!important;left:2vw!important;right:auto!important;width:54px!important} .world-atmosphere{opacity:1} .world-atmosphere i{background:rgb(169 191 152 / .055);border-color:rgb(108 138 94 / .09)} .world-atmosphere i:first-child{right:-320px;top:32%;width:520px;height:520px;background:rgb(255 215 0 / .065);border-color:rgb(224 180 0 / .09)} .world-atmosphere i:nth-child(2){left:-290px;top:61%;width:420px;height:420px} .world-atmosphere i:nth-child(3){left:17%;top:-260px;width:500px;height:280px;transform:rotate(-12deg);background:rgb(255 224 102 / .065)} .world-atmosphere i:nth-child(4){right:-135px;top:-180px;width:340px;height:340px;border-radius:50%;background:transparent;border:32px solid rgb(169 191 152 / .045)} .world-atmosphere i:nth-child(5){left:-170px;top:13%;width:240px;height:310px;border-radius:90px;transform:rotate(24deg)} .world-atmosphere i:last-child{left:59%;top:auto;bottom:-210px;width:360px;height:280px;background:rgb(255 224 102 / .06);transform:rotate(38deg)} } @media(min-width:1101px){ .world-section .world-hero-star{top:112px!important;right:1.3vw!important;width:32px!important} /* A clear central field keeps every drifting decoration off copy and art. */ .world-atmosphere{mask-image:linear-gradient(to right,#000 0 3.5%,transparent 5% 95%,#000 96.5%),linear-gradient(to bottom,#000 0 3%,transparent 10% 93%,#000 99%);mask-composite:add} } /* Owner correction: composed graphic-first transitions and full-width footer. */ /* Owner request (superseding the gold glow): plain ink borders, no shadow. */ .world-menu-toggle,.world-back-top{border-color:var(--ink);box-shadow:none} .world-footer-top{grid-template-columns:minmax(0,1.7fr) minmax(220px,.7fr);align-items:start;gap:8vw} .world-footer-top nav{display:grid;gap:16px;padding-top:44px;font-size:20px;justify-self:end;position:relative;z-index:1} .world-footer-main{display:block;position:relative;margin-top:70px} .world-footer-wordmark{width:100%;text-align:center;position:relative;z-index:1} @media(min-width:1101px){ .world-section .world-boundary-wheel{left:auto!important;right:18px!important;bottom:132px!important;width:46px!important;height:46px!important} .world-pinned .world-section--ask .world-title {font-size:clamp(52px,3.9vw,76px)} .world-pinned .world-section--boundaries .world-title{font-size:clamp(48px,3.65vw,72px)} } /* Consistent phrase treatment; no underline across split-word spaces. */ .world-prose .world-emphasis,.world-prose strong.world-emphasis,.world-prose em.world-emphasis{font-weight:400;font-style:italic;text-decoration:none} .world-prose .world-emphasis:hover{background:#ffd700;color:#1e1e1a} .world-footer .world-noise{opacity:.12} @media(min-width:1101px){ .world-pinned .world-section:not(.world-section--hero){padding-top:76px} .world-pinned .world-section--privacy{grid-template-columns:44% minmax(0,1fr);grid-template-rows:1fr;column-gap:64px} .world-pinned .world-section--privacy .world-copy{display:block;grid-column:1;grid-row:1;align-self:start} .world-pinned .world-section--privacy .world-title{margin-bottom:26px} .world-pinned .world-section--privacy .world-art-track{grid-column:2;grid-row:1;align-self:end;height:76%} .world-pinned .world-section--audience .world-copy{max-width:1460px} .world-pinned .world-section--audience{row-gap:16px} .world-atmosphere{mask-image:none} .world-atmosphere i{opacity:.65} .world-atmosphere i:first-child{right:-360px} .world-atmosphere i:nth-child(2){left:-335px} .world-atmosphere i:nth-child(5){left:-205px} } /* Final desktop section compositions. The art rectangle remains the single frame contract consumed by the WebGL controller. */ @media(min-width:1101px){ .world-pinned .world-section--audience .world-copy {display:contents} .world-pinned .world-section--audience { grid-template-columns:minmax(0,56fr) minmax(360px,40fr); column-gap:4vw;row-gap:10px; } .world-pinned .world-section--audience{grid-template-rows:auto auto minmax(0,1fr)} .world-pinned .world-section--audience .world-eyebrow {grid-column:1/-1;grid-row:1;margin:0} .world-pinned .world-section--audience .world-title{text-align:left} .world-pinned .world-section--audience .world-title {grid-column:1/-1;grid-row:2;max-width:none;margin:0 0 8px} .world-pinned .world-section--audience .world-art-track{grid-column:1;grid-row:3;height:100%;min-height:0;width:100%} .world-pinned .world-section--audience .world-prose{grid-column:2;grid-row:3;align-self:start;max-width:56ch;padding-top:18px;margin:0;text-align:left} .world-pinned .world-section--commitment .world-art-track, .world-pinned .world-section--boundaries .world-art-track{width:100%;height:86%;align-self:start;margin-top:-24px} .world-pinned .world-section--boundaries .world-art-track{justify-self:stretch} .world-pinned .world-section--privacy .world-art-track{width:96%;height:88%;align-self:center;margin:-22px 3% 0 1%} } :root{--ground:#ffffff} /* The pinned stack goes absolute the instant `world-pinned` lands, which is before mount() resolves and therefore before showChapter() has written any per-chapter opacity. Until `world-ready`, show the hero only. This is structural: it holds with the veil script absent, failed or disabled, and it carries no !important, so showChapter()'s inline visibility always wins. */ .world-pinned:not(.world-ready) .world-section:not(.world-section--hero){visibility:hidden} /* Load veil. The inline script at the top of adds `world-veiling` to before anything can paint and releases it after 8 s should page.js never run; page.js creates, fades and removes the .world-veil node and drops the class as it does. The tint is GROUND_TINTS[0] (#ffffff) written literally, not var(--ground), because page.js tint() rewrites --ground every scroll frame. z-index 99 is under the skip link (100) and over all else (46). prefers-reduced-motion needs no rule here: the * transition:none!important above already makes the fade instant, and page.js removes the node at once. */ html.world-veiling body{background:#ffffff} html.world-veiling body::before{content:'';position:fixed;inset:0;z-index:99;pointer-events:none;background:#1e1e1a url("../imgs/superstrate-homepage/logo-reversed.png") no-repeat center/min(160px,44vw) auto} html.world-veiling .world-stage,html.world-veiling .world-header,html.world-veiling .world-footer{visibility:hidden} .world-veil{position:fixed;inset:0;z-index:99;display:grid;place-items:center;background:#1e1e1a;opacity:1;transition:opacity .5s ease;pointer-events:none} .world-veil img{width:min(160px,44vw);height:auto;content:url("../imgs/superstrate-homepage/logo-reversed.png")} .world-veil.is-gone{opacity:0} /* Clarvos framing, Unit B. The page is cream; the chapter ground (--ground, written by page.js) fills an inset rounded panel. Two layers do it without touching any measured geometry: .world-stage::before paints the panel for the fallback/pre-mount states, and a fixed cream ring stamps the rounded inset over the full-bleed WebGL clear colour. The canvas keeps its 100vw box because world.resize(innerWidth,innerHeight) depends on it, and getFrame()/artRect() measure .world-art only, so nothing here moves it. */ .world-stage::before{content:'';position:absolute;inset:0 var(--frame-inset);background:var(--ground);border-radius:0;z-index:0;pointer-events:none} .world-pinned .world-stage::before{inset:var(--frame-inset);border-radius:var(--frame-radius)} /* The panel's colour arrives as --stage-ground, which page.js (setGround) writes on .world-stage each frame of a ground crossing. It is registered non-inherited, so a crossing restyles the stage and this panel, not the stage's 1,955 descendants (--ground written on restyled all 2,133 elements on the page: about 12.7 ms a frame against 0.3; E4, 26 September 2026). Its initial value is the default ground; without @property the fallback is --ground. */ @property --stage-ground{syntax:'';inherits:false;initial-value:#ffffff} .world-stage::before{--stage-ground:inherit;background:var(--stage-ground,var(--ground))} /* The frame ring is ONE rounded shape: the rounded rectangle inside the frame, whose spread shadow paints everything outside it. (A white border plus an 80px spread shadow met along the same rounded outer curve, and on dark chapters their two anti-aliased edges left a grey hairline arc in every corner of the frame.) */ body::after{content:'';position:fixed;inset:var(--frame-inset);z-index:5;pointer-events:none;border-radius:var(--frame-radius);box-shadow:0 0 0 max(100vw,100vh) #ffffff} body:not(.world-pinned)::after{inset:-80px var(--frame-inset);border-radius:0} /* The footer as the pinned stage's last position, after Ask (24 September 2026). Pinned, the footer IS the frame: a fixed panel on the stage's own inset and radius, under the frame ring above (z-index 5), which still traces it. It rests below the screen, transparent and click-through, until page.js (footerTransition) brings it in; it stays focusable there, so Tab into its links brings the stage to it. Out of flow, it makes the pin's end the page's end. Its rows keep their look, with the vertical rhythm eased on short screens: the lockup takes whatever height is left (a size container fits it to the 409:85 image, so the water ripple's canvas still matches the image), and the bottom row stands clear of the Pause pill and back-to-top (bottom 24px; 48px tall when this was set, 40px since block K, so it clears them with room to spare). The flow, the stills and no-JS keep the footer in normal flow. */ body.world-pinned .world-footer{position:fixed;inset:var(--frame-inset);margin:0;border-radius:var(--frame-radius);display:flex;flex-direction:column;padding:clamp(40px,7.4vh,76px) 4.4vw calc(88px - var(--frame-inset));opacity:0;pointer-events:none;transform:translateY(calc(100vh + 40px))} body.world-pinned .world-footer-top{flex:none} body.world-pinned .world-footer-main{flex:1 1 0;min-height:0;margin-top:clamp(24px,4.6vh,70px);container-type:size;display:flex;align-items:center;justify-content:center} body.world-pinned .world-footer-wordmark{flex:none;width:min(100%,calc(100cqh * 409 / 85))} body.world-pinned .world-footer-bottom{flex:none;margin-top:clamp(20px,4.2vh,70px);padding-top:clamp(16px,3vh,30px)} /* Ask is chapter index 6 since Opportunity left on 29 September 2026 (7 after How it works left, 8 after Pricing left): on its nursery, and on the dark footer after it, the cursor dot is white. */ body[data-world-chapter="6"][data-chapter-theme="dark"] #magic-cursor.world-cursor #ball{background-color:#ffffff} .world-atmosphere{display:none} ::selection{background:var(--accent);color:#1c1b1f} .world-controls button{color:var(--ink);background:var(--ground);border-color:color-mix(in srgb,var(--ink) 32%,transparent)} body[data-chapter-theme="dark"] .world-button:not([data-demo]){background:#fffbf2;color:#1c1b1f} body[data-chapter-theme="dark"] .world-button:not([data-demo]):hover{background:#fff;color:#1c1b1f} body[data-chapter-theme="dark"] .world-still{mix-blend-mode:normal} /* Owner ruling: the menu dialog and skip link keep exactly their pre-Clarvos appearance, pinned to their previous resolved ground/ink. Nothing else on the menu, the menu toggle, the footer or the back-to-top button changes. */ .world-menu{background:#f5edd8;color:#1e1e1a} /* Hero experiment, Unit H1 (2026-09-18). The hero becomes one centred column: eyebrow, brand lockup, headline, prose, actions, over the footer's noise field. The art track is hidden (H2 keeps the WebGL object dark for chapter 0 and grows it from the chapter-1 frame). Appended last, so every rule here wins on source order against the equal-specificity hero rules above; where an earlier rule is more specific the selector below matches its shape. */ .world-section--hero{position:relative;overflow:clip} .world-section--hero .world-art-track{display:none} .world-section--hero .world-hero-star{z-index:2} .world-hero-lockup{margin:18px 0 26px;display:flex;justify-content:center} .world-hero-lockup img{height:clamp(76px,5.2vw,100px);width:auto;display:block} /* world-effects.css loads after this file, so .world-noise (0,1,0) would beat a bare .world-noise--hero. The descendant form matches .world-footer .world-noise above and wins on specificity instead. */ .world-section--hero .world-noise--hero{opacity:.12;z-index:1;border-radius:inherit} /* Pinned, the section is inset:0 over the full stage and has no radius, so the noise is aligned to the ground panel (.world-stage::before) instead. */ .world-pinned .world-section--hero .world-noise--hero{inset:var(--frame-inset);border-radius:var(--frame-radius)} @media(min-width:1101px){ .world-pinned .world-section--hero{grid-template-columns:1fr;column-gap:0;align-items:center;padding-top:96px;padding-bottom:48px} .world-pinned .world-section--hero .world-copy{max-width:1100px;margin-inline:auto;text-align:center;align-self:center} .world-pinned .world-section--hero .world-eyebrow{margin-inline:auto} .world-pinned .world-section--hero .world-title{font-size:clamp(40px,3.05vw,60px);line-height:1.08;letter-spacing:-.04em;text-wrap:balance;max-width:22ch;margin:0 auto 18px} .world-pinned .world-section--hero .world-actions{justify-content:center;margin-top:18px} } @media(min-width:1101px) and (max-height:850px){ .world-pinned .world-section--hero{padding-top:80px;padding-bottom:40px} .world-hero-lockup{margin:14px 0 20px} .world-hero-lockup img{height:clamp(64px,4.4vw,84px)} } @media(min-width:601px) and (max-width:1100px){ .world-section--hero .world-copy{text-align:center;margin-inline:auto} .world-section--hero .world-eyebrow{margin-inline:auto} .world-section--hero .world-title{margin-inline:auto;text-wrap:balance} .world-section--hero .world-actions{justify-content:center} } @media(max-width:600px){ .world-hero-lockup{margin:20px 0 26px;justify-content:flex-start} .world-hero-lockup img{height:auto;width:min(100%,280px)} } /* Magic cursor, ported from the template's scss/components/_cursor.scss. The trailing dot is created by world/world-cursor.js, which does not mount on touch/coarse pointers or under reduced motion; the media query below is a belt-and-braces copy of the template's own disable rule. z-index 98 sits under the load veil (99) and over everything else. */ #magic-cursor.world-cursor{position:absolute;top:0;left:0;width:10px;height:10px;pointer-events:none;z-index:98;opacity:0;visibility:hidden} #magic-cursor.world-cursor #ball{position:fixed;top:0;left:0;display:flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;color:transparent;pointer-events:none;mix-blend-mode:difference;background-color:#1c1b1f} @media (hover:none),(pointer:coarse){#magic-cursor.world-cursor,#magic-cursor.world-cursor #ball{display:none!important}} @media (prefers-reduced-motion:reduce){#magic-cursor.world-cursor{display:none!important}} /* Hero left column + hovering cards, Unit H4 (2026-09-18 owner request). The header no longer carries a logo on this page: the hero lockup is the logo, and page.js travels it into the old header slot across the chapter 0 -> 1 morph. The hero copy becomes a 54% left column (lockup, eyebrow, headline, actions) with the two prose paragraphs as floating cards in the right column. Markup order is unchanged (the copy hash still reads eyebrow, then the two paragraphs); .world-copy{display:contents} lets its children place themselves directly in the section grid. Appended last, so these rules win on source order over the Unit H1 block above. */ .world-section--hero .world-hero-lockup{justify-content:flex-start;margin:0 0 28px} .world-section--hero .world-hero-lockup img{height:clamp(110px,7vw,140px)} .world-section--hero .world-eyebrow{font-size:15px;letter-spacing:.05em;margin:0 0 18px} @media(min-width:1101px){ .world-pinned .world-section--hero{grid-template-columns:1fr;column-gap:0;align-items:center;padding:120px 4.4vw 60px} /* The left column is normal stacked flow again: the four items sit in column 1 with only their own margins between them (no row gaps, no min-heights), and the prose spans their rows in column 2. Markup order keeps the eyebrow first, so grid-column/grid-row placement does the two-column work. */ .world-pinned .world-section--hero .world-copy{display:grid;grid-template-columns:54% minmax(0,1fr);column-gap:64px;row-gap:0;align-items:center;text-align:left;max-width:none;align-self:center} .world-pinned .world-section--hero .world-eyebrow{grid-column:1;grid-row:1;margin:0 0 18px;justify-self:start} .world-pinned .world-section--hero .world-hero-lockup{grid-column:1;grid-row:2;margin:0 0 28px} .world-pinned .world-section--hero .world-title{grid-column:1;grid-row:3;text-align:left;font-size:clamp(44px,3.4vw,66px);line-height:1.08;letter-spacing:-.04em;max-width:16ch;margin:0 0 30px} .world-pinned .world-section--hero .world-actions{grid-column:1;grid-row:4;justify-content:flex-start;margin:0} } @media(min-width:1101px) and (max-height:850px){ .world-pinned .world-section--hero{padding:104px 4.4vw 48px} } /* Hero white-noise variant + fixed header logo, Unit H5 (2026-09-18 owner request). The hero panel is the page cream with DARK grain, so every rule that assumed a black panel is scoped to `.world-hero-light` on . To go back to the black hero: remove that body class and restore GROUND_TINTS[0] = '#1e1e1a' / CHAPTER_THEMES[0] = 'dark' in world/palette.js. Nothing else in this file depends on it. */ /* The header logo lives outside
so `.world-scrolled .world-header` cannot hide it: it stays in the old header slot for the whole page. The header's own layout is unchanged apart from pushing the nav right. */ .world-header nav{margin-left:auto} .world-header-logo{position:fixed;left:4.4vw;top:0;height:96px;display:flex;align-items:center;z-index:16;pointer-events:auto} .world-header-logo img{width:177px;height:auto;display:block} /* Cross-fade: the hero lockup leaves as the header logo arrives, both driven by --hero-logo-fade, which page.js writes on its hosts each frame. Stills mode never writes it, so the fade only applies while the world is live. */ .world-live .world-section--hero .world-hero-lockup{opacity:calc(1 - var(--hero-logo-fade,0))} .world-live .world-header-logo{opacity:var(--hero-logo-fade,0)} @media(max-width:1100px){.world-header-logo{left:6vw;height:78px}.world-header-logo img{width:155px}} @media(max-width:600px){.world-header-logo{left:5vw;height:76px;align-items:flex-start;padding-top:24px}.world-header-logo img{width:132px}} /* Unit H7 / H8 (2026-09-18 owner request), appended so they win on source order over H4/H5/H6 above: 1. the prose card hover glow keeps the H7 strength but is yellow again; 2. two headline phrases are gold (W7: the cobalt demo-button rule that was here, overridden by H10 below, is deleted). */ .world-section--hero .world-copy{position:relative;z-index:3} .world-section--hero .world-title .world-gold{color:#ffd64e} /* Unit H9 (2026-09-18 owner request), appended last so it wins on source order: 1. the hero eyebrow is lifted out of the left column and pinned into the fixed header-logo slot, fading out exactly as the header logo fades in; 2. the hero object is drawn again, in the left column ABOVE the lockup and at the lockup's width, so it reads as sitting on top of the logo. Its grey base slab (SLAB_SITE) is hidden at mount in world/world.js; 3. the lockup and headline shrink so the whole hero fits 900px tall. The art track now lives inside .world-copy in the hero markup. */ .world-pinned .world-section--hero .world-eyebrow{ position:fixed;left:4.4vw;top:0;height:96px;display:flex;align-items:center; margin:0;z-index:16;opacity:calc(1 - var(--hero-logo-fade,0)); } @media(min-width:1101px){ .world-pinned .world-section--hero{padding-top:110px} .world-section--hero .world-art-track{display:block} .world-pinned .world-section--hero .world-art-track{ grid-column:1;grid-row:1;width:min(100%,560px);justify-self:start; height:clamp(240px,32vh,320px);min-height:0;position:relative;margin:0 0 8px; } .world-pinned .world-section--hero .world-art{position:relative;top:0;height:100%;width:100%;min-height:0} .world-pinned .world-section--hero .world-hero-lockup{grid-column:1;grid-row:2;margin:0 0 22px} .world-pinned .world-section--hero .world-hero-lockup img{height:clamp(96px,6vw,120px)} .world-pinned .world-section--hero .world-title{grid-column:1;grid-row:3;font-size:clamp(40px,3vw,56px);margin:0 0 26px} .world-pinned .world-section--hero .world-actions{grid-column:1;grid-row:4} } /* Unit H10 (2026-09-18 owner request), appended last so it wins on source order: 1. a wider hero left column and a smaller headline, so the sentence sits on exactly two lines at 1920x900 with the buttons under it; 2. the demo buttons (fixed header + hero) are yellow again, keeping the pill padding, radius and colour transition the H8 cobalt block gave them (W7: that overridden block is deleted and its transition moved here); 3. the cream frame ring gets an 80px outer spread (above) so the black canvas clear colour never shows past the ring's rounded outer corners. Cobalt is retired (DESIGN: the No Cobalt Rule). */ @media(min-width:1101px){ .world-pinned .world-section--hero .world-copy{grid-template-columns:minmax(0,60%) minmax(0,1fr);column-gap:48px} .world-pinned .world-section--hero .world-title{max-width:none;font-size:clamp(44px,3.3vw,64px);text-wrap:balance} } .world-header .world-demo, .world-section--hero .world-actions .world-text-link[data-demo]{ background:#ffd700;border-color:#ffd700;color:#1c1b1f; border-bottom-color:#ffd700;padding:13px 20px;border-radius:3px; transition:background-color .35s ease,border-color .35s ease,color .35s ease; } .world-header .world-demo:hover, .world-header .world-demo:focus-visible, .world-section--hero .world-actions .world-text-link[data-demo]:hover, .world-section--hero .world-actions .world-text-link[data-demo]:focus-visible{ background:#ffe56b;border-color:#ffe56b;color:#1c1b1f; } /* Unit H11 (2026-09-18 owner request), appended last so it wins on source order: the hero eyebrow loses its arrow (removed from the markup) and its label now reads on two lines — "Website conversion." above "Business intelligence." — without touching the copy. The wrap is forced in CSS only: a max-width that is wider than the longer sentence (22 chars) but narrower than the whole 41-char sentence pair, so the only break the browser can take is the space between the two sentences; text-wrap:balance pins that same break even if the font measures wider or narrower than the ch estimate. Hero only — every other chapter's eyebrow (and its arrow) is untouched. */ .world-section--hero .world-eyebrow .world-eyebrow-label{ display:block;white-space:normal;max-width:29ch;text-wrap:balance;line-height:1.35; } /* Owner request, 2026-09-18: the pause-motion control picks up the same corner as the noise panel it sits against. At this button height the browser clamps that radius to a pill, which is the intent. */ .world-controls button{border-radius:var(--frame-radius)} /* Owner request, 2026-09-18: the control should sit in the panel's bottom-left corner with its left and bottom edges tracing the noise edges. Tie it to the frame token rather than a fixed 18/16px, so it holds that relationship at any width instead of drifting as clamp(10px,.9vw,18px) resolves. The pill's end radius (18.8px at this height) and the panel's 20px corner are then near concentric, so the two curves run parallel into the corner. */ .world-controls{left:calc(var(--frame-inset) + 1px);bottom:calc(var(--frame-inset) + 1px);right:auto} @media(max-width:600px){.world-controls{left:calc(var(--frame-inset) + 1px);right:auto}} /* Owner request, 2026-09-19 (H19): in the centred tablet layout (601-1100px, never pinned) the eyebrow and the logo sat left of centre while the headline and prose were centred. Cause: two H4 rules above, written for the desktop left column and never scoped to it: ".world-section--hero .world-hero-lockup {justify-content:flex-start}", and the eyebrow's "margin:0 0 18px", which cancelled the tablet block's margin-inline:auto. The eyebrow shrink-wraps to its label, so it centres by auto margins; the shorthand below must keep them. The lockup PNG carries 15.3% transparent space above the star (about 17px at the 110px it renders at in this range), so -4px leaves a visual gap of about 13px: the eyebrow reads as sitting just above the logo. Phones (<=600) and short desktop windows keep their left-aligned layout. */ @media (min-width:601px) and (max-width:1100px){ .world-section--hero .world-eyebrow{justify-content:center;margin:0 auto -4px} .world-section--hero .world-hero-lockup{justify-content:center} } /* ========================================================================== Unit W4-hero (2026-09-19): the hero and the shared chrome on every viewport. Appended last so it wins on source order. Scoping contract: - every hero rule below is either `body:not(.world-pinned)` (the unpinned flow, the stills fallback and no-JS) or width-limited below 1101px, so the locked pinned hero (1920 class) is never selected; - chrome rules fix ink, overlap and hit areas only; no restyle. Viewport classes (see review/viewport/TYPE-SCALE.md): P phones <=600 wide T tablet 601-1100 wide (owner's H19 centring kept) PL short <=1100 wide and <=500 tall (landscape phones) LU laptop short >=1101 wide and <700 tall (never pinned) DM desktop flow >=1101 wide and >=700 tall when not pinned (reduced motion, stills, no-JS): mirrors the pinned composition. ========================================================================== */ /* --- A. Chrome legibility -------------------------------------------------- The toggle's surface is always cream, so its ink is fixed rather than inherited from the chapter --ink (which is white on dark chapters). The fixed header logo swaps to the reversed lockup on dark grounds; at the pinned hero at rest its opacity is 0, so the locked hero is unaffected. In the flow the fixed header logo never shows: the hero lockup is the logo on the hero, and the Menu toggle takes over once the page scrolls (interior-page pattern). */ .world-menu-toggle{color:#1c1b1f} body[data-chapter-theme="dark"] .world-header-logo img{content:url("../imgs/superstrate-homepage/logo-reversed.png")} body:not(.world-pinned) .world-header-logo{opacity:0;visibility:hidden;pointer-events:none} /* Touch has no hover: a tap must not leave hover states stuck on. */ @media (hover:none){ .world-menu-toggle:hover{background:#ffffff} .world-back-top:hover{background:#ffffff;transform:none} } /* 44px hit areas on touch without moving anything: padding paired with an equal negative margin, or an invisible extension on the pause pill. */ @media (pointer:coarse){ .world-controls button{position:relative} .world-controls button::after{content:'';position:absolute;inset:-6px -2px} .world-footer nav a{padding-block:7px;margin-block:-7px} .world-footer-bottom a,.world-menu-bottom a{display:inline-block;padding-block:12px;margin-block:-12px} .world-header nav a:not(.world-demo){padding:13px 4px;margin:-13px -4px} .world-header .world-demo{min-height:44px} } /* --- B. Phone header, footer and menu ------------------------------------- */ @media (max-width:600px){ .world-header nav a:not(.world-demo){font-size:12px} /* The footer's desktop two-column top row (a later, unconditional rule) squeezed the headline to 0-100px on phones. Stack it; >=601 unchanged. */ .world-footer-top{grid-template-columns:minmax(0,1fr);gap:32px} .world-footer-top nav{justify-self:start;padding-top:0;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:12px;font-size:17px} } @media (max-width:360px){.world-menu nav a{font-size:32px}} @media (max-height:660px) and (min-height:501px){.world-menu-top{margin-bottom:32px}.world-menu-bottom{margin-top:32px}} @media (max-height:500px){ .world-menu{padding:18px 28px} .world-menu-top{margin-bottom:14px} .world-menu-top img{width:140px} .world-menu nav{display:grid;grid-template-columns:1fr 1fr;gap:2px 28px} .world-menu nav a{font-size:26px} .world-menu-bottom{margin-top:14px} } /* --- C. The hero as its own inset noise panel in the flow -------------------- Pinned, the hero is framed by the stage panel. Unpinned (all widths, stills and no-JS too) it becomes a self-contained rounded dark panel with the frame inset on every side. It carries its own ground and ink, so the chapter tint (and the stills' cream theme) never greys it, and z-index 2 keeps the fixed WebGL canvas (z 1) and the tint under it. flow-root stops the top margin collapsing through the stage, so the ground panel below starts level with it. */ body:not(.world-pinned) .world-stage{display:flow-root} body:not(.world-pinned) .world-stage::before{top:var(--frame-inset);border-radius:var(--frame-radius) var(--frame-radius) 0 0} body:not(.world-pinned) .world-section--hero{ margin:var(--frame-inset);border-radius:var(--frame-radius); background:#1e1e1a;color:#fff;--ink:#fff;--ink-muted:rgba(255,255,255,.72); z-index:2;min-height:calc(100svh - 2 * var(--frame-inset)); display:grid;grid-template-columns:minmax(0,1fr);column-gap:0;row-gap:0;align-items:center; } /* The header row only ever sits over the hero (it is absolute at the page top and hides once scrolled), so in the flow it takes the hero's ink too; in stills the chapter theme is cream and would print dark links on the panel. */ body:not(.world-pinned) .world-header{color:#fff;--ink:#fff} body:not(.world-pinned) .world-section--hero .world-art-track{display:none} /* The flow no longer cross-fades the lockup into a header logo. */ body:not(.world-pinned) .world-section--hero .world-hero-lockup{opacity:1} body:not(.world-pinned) .world-section--hero .world-hero-lockup img{width:auto;max-width:100%} body:not(.world-pinned) .world-section--hero .world-copy{max-width:none;width:100%;margin:0;align-self:center;padding:0} body:not(.world-pinned) .world-section--hero .world-title{max-width:none} body:not(.world-pinned) .world-section--hero .world-button:not([data-demo]){background:#fffbf2;color:#1c1b1f} body:not(.world-pinned) .world-section--hero .world-actions{margin:0} /* --- D. Stacked hero, <=1100 wide (P, T, PL) -------------------------------- One reading order everywhere: eyebrow, lockup, headline, actions, then the cards (visual order only; the cards hold no focusables). The first screen is a poster: an invisible zero-width ::before spans the first six rows and is one viewport tall, so the two flexible rows share whatever the group leaves, centring it (optically high, 1 : 1.6) in the first screen, and the cards start at the fold. That keeps the CTAs on the first screen and keeps the fixed Pause pill clear of every card at first paint. */ @media (max-width:1100px){ body:not(.world-pinned) .world-section--hero{--w4-top:78px;padding:var(--w4-top) calc(6vw - var(--frame-inset)) 24px;align-items:start} body:not(.world-pinned) .world-section--hero .world-copy{ display:grid;grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto auto auto auto minmax(0,1.6fr) auto; column-gap:0;row-gap:0;align-items:start;text-align:center; } body:not(.world-pinned) .world-section--hero .world-copy::before{ content:'';grid-column:1;grid-row:1/7;width:0;justify-self:start;pointer-events:none; height:calc(100svh - 2 * var(--frame-inset) - var(--w4-top)); } body:not(.world-pinned) .world-section--hero .world-eyebrow{grid-column:1;grid-row:2;justify-self:center;justify-content:center;margin:0 0 -4px;font-size:14px} body:not(.world-pinned) .world-section--hero .world-hero-lockup{grid-column:1;grid-row:3;justify-content:center;margin:0 0 24px} body:not(.world-pinned) .world-section--hero .world-hero-lockup img{height:clamp(72px,10vw,104px)} body:not(.world-pinned) .world-section--hero .world-title{grid-column:1;grid-row:4;justify-self:center;font-size:clamp(34px,4.6vw,46px);line-height:1.08;letter-spacing:-.035em;max-width:22ch;margin:0 0 26px;text-wrap:balance} body:not(.world-pinned) .world-section--hero .world-actions{grid-column:1;grid-row:5;justify-content:center;gap:16px} body:not(.world-pinned) .world-section--hero .world-actions>a{min-height:48px} /* The star sits inside the panel, under the header row, clear of the nav. */ .world-section--hero .world-hero-star{top:84px;right:calc(6vw - var(--frame-inset));width:32px;height:32px} } /* P: phones. Left-aligned column, ragged right: centred multi-line copy reads poorly at this measure. The lockup keeps its 4.8:1 aspect. */ @media (max-width:600px){ body:not(.world-pinned) .world-section--hero{--w4-top:76px;padding-inline:16px} body:not(.world-pinned) .world-section--hero .world-copy{text-align:left} body:not(.world-pinned) .world-section--hero .world-eyebrow{justify-self:start;justify-content:flex-start;margin:0 0 14px;font-size:13px} body:not(.world-pinned) .world-section--hero .world-hero-lockup{justify-content:flex-start;margin:0 0 20px} body:not(.world-pinned) .world-section--hero .world-hero-lockup img{width:min(64vw,250px);height:auto} body:not(.world-pinned) .world-section--hero .world-title{justify-self:start;font-size:clamp(27px,7.6vw,34px);line-height:1.1;letter-spacing:-.03em;margin:0 0 22px} body:not(.world-pinned) .world-section--hero .world-actions{justify-content:flex-start;gap:12px} body:not(.world-pinned) .world-section--hero .world-actions>a{font-size:14px;padding:13px 18px;gap:18px;min-height:46px} .world-section--hero .world-hero-star{top:88px;right:calc(5vw - var(--frame-inset));width:28px;height:28px} } /* PL: landscape phones and other short stacked screens. The same centred poster, compacted so the whole group fits under the 78px header row. */ @media (max-width:1100px) and (max-height:500px){ body:not(.world-pinned) .world-section--hero{--w4-top:78px} body:not(.world-pinned) .world-section--hero .world-eyebrow{font-size:12px;margin:0 0 6px} body:not(.world-pinned) .world-section--hero .world-eyebrow .world-eyebrow-label{max-width:none} body:not(.world-pinned) .world-section--hero .world-hero-lockup{margin:0 0 12px} body:not(.world-pinned) .world-section--hero .world-hero-lockup img{height:40px;width:auto} body:not(.world-pinned) .world-section--hero .world-title{font-size:24px;line-height:1.1;max-width:26ch;margin:0 0 14px} body:not(.world-pinned) .world-section--hero .world-actions>a{font-size:13px;padding:11px 16px;min-height:44px} } /* --- E. Desktop-width hero in the flow, >=1101 wide (DM, LU) ----------------- The pinned two-column composition, rebuilt for a panel that is inset by the frame: every offset below is the pinned value minus --frame-inset, so the content lands where it does pinned. The eyebrow sits in the header slot as it does pinned, but absolute (it scrolls away with the hero). .world-copy goes static so that absolute anchors on the section; its children keep z 3 over the swarm canvas. */ @media (min-width:1101px){ body:not(.world-pinned) .world-section--hero{padding:calc(110px - var(--frame-inset)) calc(4.4vw - var(--frame-inset)) calc(60px - var(--frame-inset))} body:not(.world-pinned) .world-section--hero .world-copy{position:static;display:grid;grid-template-columns:minmax(0,54%) minmax(0,1fr);column-gap:48px;row-gap:0;align-items:center;text-align:left} body:not(.world-pinned) .world-section--hero .world-copy>*{position:relative;z-index:3} body:not(.world-pinned) .world-section--hero .world-eyebrow{position:absolute;left:calc(4.4vw - var(--frame-inset));top:calc(-1 * var(--frame-inset));height:96px;margin:0;display:flex;align-items:center;justify-self:start} body:not(.world-pinned) .world-section--hero .world-hero-lockup{grid-column:1;grid-row:1;justify-content:flex-start;margin:0 0 28px} body:not(.world-pinned) .world-section--hero .world-hero-lockup img{height:clamp(96px,6vw,120px)} body:not(.world-pinned) .world-section--hero .world-title{grid-column:1;grid-row:2;text-align:left;font-size:clamp(44px,3.4vw,66px);line-height:1.08;letter-spacing:-.04em;max-width:16ch;margin:0 0 30px;text-wrap:balance} body:not(.world-pinned) .world-section--hero .world-actions{grid-column:1;grid-row:3;justify-content:flex-start} /* The star keeps its pinned viewport position (the >=1101 rule above places it with !important against the section, which is inset here). */ body:not(.world-pinned) .world-section--hero .world-hero-star{top:calc(112px - var(--frame-inset))!important;right:calc(1.3vw - var(--frame-inset))!important} } /* The left group as one block beside the cards (hero-swarm.css makes the same fix on the pinned laptops); above 1800 the pinned hero keeps its own row sharing, so the mirror does too. */ @media (min-width:1101px) and (max-width:1800px){ body:not(.world-pinned) .world-section--hero .world-copy{grid-template-rows:minmax(0,1fr) auto auto auto minmax(0,1fr)} body:not(.world-pinned) .world-section--hero .world-hero-lockup{grid-row:2} body:not(.world-pinned) .world-section--hero .world-title{grid-row:3} body:not(.world-pinned) .world-section--hero .world-actions{grid-row:4} } @media (min-width:1101px) and (max-height:850px){ body:not(.world-pinned) .world-section--hero{padding-bottom:calc(48px - var(--frame-inset))} } /* LU: short laptop windows (<700 tall are never pinned). The same composition, compacted so the pair of cards and the left group fit 633-699px, with the CTAs well above the fixed Pause pill. */ @media (min-width:1101px) and (height < 700px){ body:not(.world-pinned) .world-section--hero{padding:calc(96px - var(--frame-inset)) calc(4.4vw - var(--frame-inset)) calc(56px - var(--frame-inset))} body:not(.world-pinned) .world-section--hero .world-copy{column-gap:40px} body:not(.world-pinned) .world-section--hero .world-hero-lockup{margin:0 0 20px} body:not(.world-pinned) .world-section--hero .world-hero-lockup img{height:72px} body:not(.world-pinned) .world-section--hero .world-title{font-size:clamp(36px,3vw,44px);margin:0 0 24px} } /* Very wide screens: the flow mirror of the >=2400 card-column cap in hero-swarm.css (never applies at 1920). */ @media (min-width:2400px){ body:not(.world-pinned) .world-section--hero .world-copy{grid-template-columns:minmax(0,1fr) minmax(0,780px);width:100%} } /* --- F. Load veil phrases (W4). Owner-approved phrases (review/loader/APPROVED-PHRASES.md) loop below the veil logo; a small, thick-stroked spinner sits centred ABOVE the phrase line (owner correction, 2026-09-19: not a large ring behind the words). page.js stacks all nine phrases (first fixed, the rest shuffled) as .world-veil-phrase with --i = their order; the loop is pure CSS, 1.2 s a phrase over a 10.8 s cycle, so it keeps running while the world mount holds the main thread. The whole line is anchored to the logo's centre, not flowed with it, so the logo stays exactly where the pre-module body::before layer painted it (min(160px,44vw) wide; 3272:680 gives .208 of that in height, so its half is .104). Layout, from the logo down: 24px, the 22px spinner (3px stroke, yellow arc on a faint ivory track), 14px, then the phrase slot, two lines tall so the longest phrase (#9, 47 characters) wraps to two balanced lines at 320px and every phrase starts at the same distance under the spinner. Reduced motion: the first phrase only, static, and no spinner (a frozen arc reads as a stuck loader). Decorative: the veil is aria-hidden. */ .world-veil-line{ position:absolute;left:50%;top:calc(50% + min(160px,44vw) * .104 + 24px); transform:translateX(-50%);width:min(86vw,30ch);height:78px;pointer-events:none; } .world-veil-spinner{ position:absolute;left:50%;top:0;width:22px;height:22px;margin-left:-11px;box-sizing:border-box; border-radius:50%;border:3px solid rgb(246 243 236 / .18);border-top-color:#ffd700; animation:world-veil-spin .9s linear infinite; } .world-veil-phrase{ position:absolute;left:0;right:0;top:36px;height:42px; display:grid;justify-items:center;align-items:start; font:500 15px/1.35 var(--ff-body);letter-spacing:.01em;text-align:center;text-wrap:balance; color:rgb(246 243 236 / .88);opacity:0; animation:world-veil-phrase 10.8s linear infinite; /* Shifted by the .25 s fade-in, so phrase 1 is fully shown on its very first frame and takes over from the early veil's static phrase 1 without a flash. */ animation-delay:calc(var(--i,0) * 1.2s - .25s); } .world-veil-spinner + .world-veil-phrase{opacity:1} @keyframes world-veil-spin{to{transform:rotate(1turn)}} /* One phrase per 1.2 s slot of the 10.8 s loop: .25 s in, hold, .25 s out. */ @keyframes world-veil-phrase{0%{opacity:0}2.3%{opacity:1}8.8%{opacity:1}11.1%{opacity:0}100%{opacity:0}} /* Early veil (superstrate.html, follow-up 2026-09-19): the same line, painted from the first frame, before page.js's import graph has loaded. The inline script's html.world-veiling layer (body::before) paints the ground and the logo; this node adds the spinner and a static phrase 1 at exactly the page.js veil's positions (same .world-veil-line box and the same logo , centred on the same viewport). Handover, with no script: once page.js prepends its veil, this node stays on top (later in the DOM, same z) with a transparent ground, its phrase hides the same frame the page.js phrase 1 appears, and its spinner keeps turning while the page.js spinner stays hidden, so the ring never restarts; likewise its logo stays the one on screen. It fades with the veil when world-veiling is dropped (.5 s, as the veil), and is never shown without the class (no JS, after load). */ .world-veil-early{position:fixed;inset:0;z-index:99;display:grid;place-items:center;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s} /* Its logo is the same element as the page.js veil's (an at the same size, centred the same way), laid over the body::before logo: a background image and an rasterise differently at 3x, so the logo that is on screen at the handover is always this one. */ .world-veil-early img{width:min(160px,44vw);height:auto} /* Exactly one logo layer is ever visible (two stacked copies would compound their anti-aliased edges): the early node's. The body::before layer keeps only its ground while the early node exists, and the page.js veil's own logo stays hidden under it, as its spinner does. */ html.world-veiling body:has(> .world-veil-early)::before{background-image:none} .world-veil:has(~ .world-veil-early) img{visibility:hidden} html.world-veiling .world-veil-early{opacity:1;visibility:visible;transition:none} /* The stills fallback removes the page.js veil at once (page.js hideVeil), so the early layer goes at once too rather than fading over the page. */ body[data-world-mode]:not([data-world-mode="live"]) .world-veil-early{transition:none} .world-veil-early .world-veil-phrase{animation:none;opacity:1} .world-veil ~ .world-veil-early .world-veil-phrase{visibility:hidden} .world-veil:has(~ .world-veil-early) .world-veil-spinner{visibility:hidden} @media (prefers-reduced-motion:reduce){ .world-veil-spinner{display:none;animation:none} .world-veil-phrase{animation:none;opacity:0} .world-veil-spinner + .world-veil-phrase{opacity:1} } /* --- G. W4 step 2 (2026-09-19): shared chrome on all three pages ------------ Loaded by the homepage, About and Features alike. Behaviour only: the Menu pill, back-to-top and Pause pill keep their locked look. chrome.js writes the reading-state classes (world-scroll-down / -up, world-near-end, world-in-footer, world-pause-covers); these rules decide what they do. Hidden controls are faded and made click-through, never display:none'd or visibility:hidden'd, so the keyboard and screen readers always reach them, and a focused control is always shown (:focus, so a programmatic or pointer focus shows it too). */ /* Phone header, all three pages: the logo on the left (the hero lockup on the homepage) and the Menu pill on the right, from the top of the page. Every nav item, the demo link and the current-page marker live in the menu. */ @media (max-width:600px){ .world-header nav{display:none} .world-menu-toggle{opacity:1;visibility:visible;transform:none} } /* Phones and short landscape: the fixed controls step aside while reading. The Menu pill leaves while scrolling down and returns on any scroll up, at the top, while the menu is open and whenever it has focus. Back-to-top shows on a scroll up or in the last screen and a half. The Pause pill leaves while scrolling down and, at rest, whenever text sits under it; a scroll up or focus brings it back. */ @media (max-width:600px),(max-height:500px){ .world-controls{transition:opacity .2s,transform .2s} body.world-scroll-down .world-controls:not(:focus-within){opacity:0;transform:translateY(12px);pointer-events:none} } /* The at-rest check also runs up to tablet width (the stacked flow), where the interior pages' copy runs under the bottom-left corner too. */ @media (max-width:1100px),(max-height:500px){ .world-controls{transition:opacity .2s,transform .2s} body.world-pause-covers:not(.world-scroll-up) .world-controls:not(:focus-within){opacity:0;transform:translateY(12px);pointer-events:none} } /* W7 (2026-09-19): the Menu pill and back-to-top read the same way at EVERY width, on every layout except the pinned homepage stage (whose chapter rests leave both corners clear). The Menu pill steps aside while scrolling down, and at rest whenever text sits under it; a scroll up, focus or the open menu brings it back. Back-to-top shows on a scroll up or in the last screen and a half, and steps aside at rest over text. The homepage flow's Pause pill gets the at-rest check at every width too (1366x657 is unpinned). */ body:not(.world-pinned).world-scroll-down .world-menu-toggle:not(:focus):not([aria-expanded="true"]), body:not(.world-pinned).world-menu-covers:not(.world-scroll-up) .world-menu-toggle:not(:focus):not([aria-expanded="true"]){opacity:0;transform:translateY(-12px);pointer-events:none} body:not(.world-pinned).world-off-top:not(.world-scroll-up):not(.world-near-end) .world-back-top:not(:focus), body:not(.world-pinned).world-backtop-covers:not(.world-scroll-up) .world-back-top:not(:focus){opacity:0;transform:translateY(12px);pointer-events:none} body:not(.world-pinned) .world-controls{transition:opacity .2s,transform .2s} body:not(.world-pinned).world-pause-covers:not(.world-scroll-up) .world-controls:not(:focus-within){opacity:0;transform:translateY(12px);pointer-events:none} /* Every layout, pinned included, whatever the scroll direction: back-to-top never sits on the footer's links or copy (its bottom row above all). It fades and turns click-through while it would cover them; focus shows it. */ body.world-backtop-footer .world-back-top:not(:focus){opacity:0;transform:translateY(12px);pointer-events:none} /* The same for the Pause pill over the footer's copy at the end of the pinned homepage (elsewhere the unpinned rule above already covers it); a scroll up or focus brings it back, as everywhere. */ body.world-pause-footer:not(.world-scroll-up) .world-controls:not(:focus-within){opacity:0;transform:translateY(12px);pointer-events:none} body.world-pinned .world-controls{transition:opacity .2s,transform .2s} /* Every size: once the footer reaches the fixed top controls, the fixed header logo and the Menu pill step aside; the footer carries its own lockup and nav (they were printing over its headline and links). */ body.world-in-footer .world-header-logo:not(:focus){opacity:0;pointer-events:none} body.world-in-footer .world-menu-toggle:not(:focus):not([aria-expanded="true"]){opacity:0;transform:translateY(-12px);pointer-events:none} /* Focus rings over dark grounds. The base ring is currentColor, which on the dark panels is the button's own dark label or the dark-ink logo, so the ring vanished. Ivory there; the header demo button takes the accent. The Menu pill, back-to-top and the Pause pill (block K) sit over both cream and dark, so they get a two-tone ring: ink outline plus an ivory halo (focus only; the glow is kept). */ /* 1 October 2026: the dark-theme line names what can take focus. Ending in a bare :focus-visible after body's theme attribute, it made every theme flip restyle the whole page (about 2,270 elements, some 20 ms at 1x). */ .world-header :focus-visible,.world-header-logo:focus-visible,.world-section--hero :focus-visible, .world-interior-hero :focus-visible,.world-footer :focus-visible, body[data-chapter-theme="dark"] .world-section :is(a,button,input,select,textarea,summary,iframe,video,audio,[tabindex],[contenteditable]):focus-visible{outline-color:#ffffff} .world-header .world-demo:focus-visible{outline-color:#ffd700} .world-menu-toggle:focus-visible,.world-back-top:focus-visible,.world-controls button:focus-visible{ outline:2px solid #1c1b1f;outline-offset:3px; box-shadow:0 0 0 7px #ffffff,0 0 0 1px rgb(255 215 0 / .6),0 0 18px rgb(255 215 0 / .55),0 0 38px rgb(255 215 0 / .2); } /* --- H. Industries disclosure (2026-09-24) -------------------------------- One component in three places, all from the shared partials, on every page: --bar the header row, after Features (with the rest of the header nav) --menu the menu dialog, inline, at the menu-link scale; once the page scrolls and the header row hides, this is the way to Industries (the owner removed the separate pill beside the Menu pill) --footer the footer nav, inline Each is [data-world-industries] > .world-industries-toggle (a button with aria-expanded and aria-controls) + .world-industries-list. chrome.js owns the behaviour and sets [hidden] on every list at mount, so these rules only decide looks, plus the no-JS fallback: the popover (--pop) opens on hover or keyboard focus, and the inline lists are simply shown. The popover surface is cream with ink text on every chapter theme, like the Menu pill. */ .world-industries{position:relative} .world-industries-toggle{display:inline-flex;align-items:center;gap:.4em;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;letter-spacing:inherit;line-height:inherit;text-underline-offset:.25em;cursor:pointer} .world-industries-toggle svg{flex-shrink:0;transition:transform .2s} .world-industries-toggle[aria-expanded="true"] svg{transform:rotate(180deg)} .world-industries .world-industries-toggle:hover{text-decoration:underline} .world-industries-list{margin:0;padding:0;list-style:none} .world-industries-list a[href]{display:block} .world-industries--pop .world-industries-list{ display:none;position:absolute;z-index:2;top:calc(100% + 12px);min-width:max-content; padding:6px;border-radius:16px;background:#fffbf2;color:#1c1b1f; font-size:15px;font-weight:500;line-height:1.3;letter-spacing:normal;text-transform:none;text-align:left; } /* A bridge over the gap, so the no-JS hover survives the move to the list. */ .world-industries--pop .world-industries-list::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:14px} .world-industries--pop:focus-within .world-industries-list,.world-industries--pop.is-open .world-industries-list{display:block} @media (hover:hover){.world-industries--pop:hover .world-industries-list{display:block}} .world-industries--pop.is-open .world-industries-list{animation:world-industries-in .18s cubic-bezier(.2,.7,.2,1)} @keyframes world-industries-in{from{opacity:0;transform:translateY(-6px)}} .world-industries--pop .world-industries-list a[href]{margin:0;padding:11px 14px;border-radius:11px;color:#1c1b1f;white-space:nowrap;text-decoration:none;transition:background-color .2s} .world-industries--pop .world-industries-list a[href]:hover{background:#ffd700;text-decoration:none} .world-industries--pop .world-industries-list a[href]:focus-visible{outline:2px solid #1c1b1f;outline-offset:2px} .world-industries--bar .world-industries-list{left:-20px} .world-industries--bar .world-industries-toggle svg{width:14px;height:14px} /* The menu items (here and .world-menu nav a, near the top of this file) also scale with the viewport height (2026-09-24): with Industries open the list is five items plus its item, and at 54px it came within 22px of the dialog's bottom edge at 718px tall. 54px from 794px tall up; 49px at 718, 45px at 657. Phones and short landscape keep their own sizes below. */ .world-industries--menu .world-industries-toggle{font-size:clamp(32px,min(4.6vw,6.8vh),54px);line-height:1.15;letter-spacing:-.03em;gap:.22em} .world-industries--menu .world-industries-toggle svg{width:.62em;height:.62em} .world-industries--menu .world-industries-list{margin:10px 0 4px;padding-left:18px;border-left:1px solid rgb(30 30 26 / .28)} .world-industries--menu .world-industries-list a[href]{padding:5px 0;font-size:clamp(18px,1.5vw,22px);line-height:1.35;letter-spacing:-.01em} .world-industries--footer .world-industries-toggle svg{width:1em;height:1em} .world-industries--footer .world-industries-list{margin-top:12px;padding-left:14px;border-left:1px solid rgb(246 243 236 / .25);font-size:.8em;line-height:1.35} .world-industries--footer .world-industries-list a[href]{color:rgb(246 243 236 / .82)} .world-industries--footer .world-industries-list a[href]:hover{color:#f6f3ec} /* Closed, the footer list keeps its width but no height, so opening it never widens the nav column and slides the links sideways under the pointer. */ .world-industries--footer .world-industries-list[hidden]{display:block!important;visibility:hidden;height:0;margin-top:0;overflow:hidden} html.world-js .world-industries--footer:not(.is-open) .world-industries-list{visibility:hidden;height:0;margin-top:0;overflow:hidden} @media (pointer:coarse){ .world-industries--bar .world-industries-toggle{padding:13px 4px;margin:-13px -4px} .world-industries--footer .world-industries-toggle{padding-block:7px;margin-block:-7px} } @media (max-width:600px){ .world-industries--menu .world-industries-toggle{font-size:38px} /* The phone footer nav is two columns: Industries takes a row of its own. */ .world-industries--footer{grid-column:1/-1} } @media (max-width:360px){.world-industries--menu .world-industries-toggle{font-size:32px}} @media (max-height:500px){.world-industries--menu .world-industries-toggle{font-size:26px}.world-industries--menu .world-industries-list{margin-top:4px}} @media (prefers-reduced-motion:reduce){.world-industries--pop.is-open .world-industries-list{animation:none}} /* The skip link is the first tab stop on every page and sits on its own cream chip, so its label and ring take ink, never the chapter --ink (white on the homepage's dark hero, which made both vanish). */ .world-skip{color:#1c1b1f} .world-skip:focus-visible{outline-color:#1c1b1f} /* Hero headline: the markup breaks after "find" (world-hero-break; the owner's two lines since 26 September 2026) and page.js wraps "and easier to choose." in .world-nobr (live flow), so that second line never splits. */ .world-section--hero .world-title .world-nobr{white-space:nowrap} /* Flow and stills: neither gold phrase ever splits, so where the column is narrow the lines still fall at the owner's breaks. */ body:not(.world-pinned) .world-section--hero .world-title .world-gold{white-space:nowrap} /* Stills, reduced motion and no-JS (no SplitText, no page.js break): the same break after "find" as a pseudo-element, so the copy hash and the DOM are untouched. Skipped where page.js has already inserted its
, and where the markup carries its own break (world-hero-break, as it now always does): with both, "and" would stand alone on a line of its own. */ body:not(.world-live):not(.world-pinned) .world-section--hero .world-title:not(:has(.world-nobr)):not(:has(.world-hero-break)) .world-gold:first-of-type::after{content:'\A';white-space:pre} /* Greedy lines in the flow: balance would even out the lines before the break ("Make your / business easier to find"); greedy keeps "Make your business" whole wherever it fits. */ body:not(.world-pinned) .world-section--hero .world-title{text-wrap:wrap} /* ===== Hero: the headline breaks into its three approved lines ===== */ .world-section--hero .world-title{text-wrap:initial} .world-pinned .world-section--hero .world-title{text-wrap:initial} body:not(.world-pinned) .world-section--hero .world-title{text-wrap:initial} /* Discovery is a ground-level landscape. Copy owns a clean white upper band; the fixed canvas uses the measured lower art row. */ .world-section--discovery .world-copy{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,1fr);column-gap:clamp(48px,7vw,140px);align-items:start} .world-section.world-section--discovery{grid-template-columns:1fr;grid-template-rows:auto minmax(320px,1fr);align-content:start} .world-section.world-section--discovery .world-copy{grid-column:1;grid-row:1;width:100%} .world-section.world-section--discovery .world-art-track{grid-column:1;grid-row:2;width:100%;min-height:420px} .world-section--discovery .world-still{object-fit:cover} .world-section--discovery .world-discovery-heading{min-width:0} .world-section--discovery .world-title{font-size:clamp(46px,3.45vw,68px);line-height:1.08;letter-spacing:-.04em;margin:0;max-width:14ch} .world-section--discovery .world-prose{padding-top:2px;max-width:69ch;font-size:clamp(20px,1.25vw,24px);line-height:1.5} .world-section--discovery .world-title .world-cobalt,.world-section--discovery .world-title .world-cobalt span{color:#2b4df5} .world-pinned .world-section.world-section--discovery{padding:110px 0 0;grid-template-columns:1fr;grid-template-rows:auto minmax(360px,1fr);row-gap:clamp(24px,3vh,38px);align-content:start;background:transparent} .world-pinned .world-section--discovery .world-copy{grid-column:1;grid-row:1;width:100%;padding:0 4.4vw;align-self:start} .world-pinned .world-section--discovery .world-art-track{grid-column:1;grid-row:2;width:100%;height:100%;min-height:0} .world-pinned .world-section--discovery .world-art{position:relative;height:100%;min-height:0;cursor:default} /* Commitment (23 Sept, v3 for owner review): the page is the ship's inner wall with one giant porthole cut into it. The porthole bleeds off the top, right and bottom of the stage, so only its left curve and bolts show and the view fills the right of the chapter. Its view is SVG, animated and made interactive by commitment-porthole.js. No isolation on the section: it trapped the copy under the fixed canvas outside the pinned stage. */ .world-section--commitment{overflow:clip} .world-section--commitment .world-title .world-cobalt{color:#2b4df5} .world-nowrap{white-space:nowrap} .world-section--commitment .world-art-track{z-index:3} .world-section--commitment .world-art{cursor:default;display:flex;align-items:center;justify-content:flex-end} .world-pinned .world-section.world-section--commitment{padding-top:148px} .world-pinned .world-section--commitment .world-copy{max-width:36vw} .world-pinned .world-section--commitment .world-art-track{position:absolute;left:46vw;top:calc(50% - 42.85vw);right:auto;bottom:auto;width:85.7vw;height:auto;aspect-ratio:1;margin:0;align-self:start;justify-self:start} .world-pinned .world-section--commitment .world-art{height:100%} .world-porthole-frame{position:relative;height:100%;max-width:100%;aspect-ratio:1} .world-porthole-space{position:absolute;inset:10.25%;border-radius:50%;background:#1e1e1a;overflow:hidden} /* Darkens the glass as chapter 4 is left through the window (page.js commitmentTransition); invisible at rest. */ .world-porthole-veil{position:absolute;inset:10.25%;border-radius:50%;background:#1e1e1a;opacity:0;pointer-events:none} .world-porthole-space .world-noise{opacity:.17} .world-porthole{position:absolute;inset:0;width:100%;height:100%;overflow:visible} /* Only the times, the ports and open space take the pointer; decoration (glare, craft, paths) never swallows a click meant for a time slot. */ .world-porthole *{pointer-events:none} .world-porthole [data-space]{pointer-events:auto;cursor:crosshair} .world-porthole [data-pick]{cursor:pointer;pointer-events:bounding-box} .world-porthole [data-pick] *{pointer-events:inherit} .world-ph-row rect:first-child,.world-ph-port rect{transition:fill .2s,fill-opacity .2s,stroke .2s,stroke-opacity .2s} .world-ph-row:hover rect:first-child,.world-ph-row.is-hot rect:first-child,.world-ph-row.is-hint rect:first-child{fill:#ffe066;fill-opacity:.5;stroke:#1e1e1a;stroke-opacity:1;stroke-width:1.8} .world-ph-port:hover rect,.world-ph-port.is-hot rect,.world-ph-port.is-hint rect{stroke:#ffd700;stroke-opacity:1;stroke-width:2} .world-section--commitment{--comms-w:clamp(320px,21vw,420px)} .world-comms{position:relative;z-index:4;display:grid;gap:10px;width:var(--comms-w);padding:16px 20px 17px 16px;background:#fffbf2;border:1px solid rgb(30 30 26 / .38);border-radius:14px;box-shadow:0 18px 40px rgb(30 30 26 / .12);font:500 16px/1.45 'DM Sans',sans-serif;color:#45473f} .world-comms::before,.world-comms::after{content:'';position:absolute;top:8px;width:5px;height:5px;border-radius:50%;background:#d2ccbb;box-shadow:inset 0 0 0 1px rgb(30 30 26 / .25)} .world-comms::before{left:8px}.world-comms::after{right:8px} .world-comms-row{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start} .world-comms-who{margin-top:2px} .world-comms-grille{display:flex;gap:4px;padding:4px 0 0 4px} .world-comms-grille i{display:block;width:3px;height:16px;border-radius:2px;background:#d2ccbb;transition:background .2s} .world-comms.is-speaking .world-comms-grille i{background:#6c8a5e} .world-comms.is-locked .world-comms-grille i{background:#2b4df5} .world-comms-lines{display:flex;flex-direction:column;gap:2px;min-height:48px} .world-comms-line{display:block} .world-comms-line--answer{color:#1c1b1f;font-weight:600} .world-comms-line .is-pending{color:transparent} .world-comms-typing{display:none;gap:5px;padding:9px 0 4px} .world-comms-typing.is-on{display:inline-flex} .world-comms-typing i{display:block;width:6px;height:6px;border-radius:50%;background:#6c8a5e;opacity:.35} .world-comms-typing i.is-lit{opacity:1} /* The card's minimise button (world/commitment-porthole.js, owner 24 September). Minimised, the card folds to its question line: the reply row's track closes from 1fr to 0fr, and the question then fades between visitors instead of typing. The question row keeps clear of the button; the answers keep their full width. */ .world-comms.has-min{grid-template-rows:auto 1fr;transition:grid-template-rows .4s cubic-bezier(.16,1,.3,1),row-gap .4s cubic-bezier(.16,1,.3,1)} .world-comms.has-min .world-comms-row:not(.world-comms-row--reply){padding-right:30px} .world-comms.has-min .world-comms-row--reply{min-height:0;overflow:hidden;transition:opacity .25s} .world-comms.is-min{grid-template-rows:auto 0fr;row-gap:0} /* !important: the porthole writes each row's fade as an inline opacity. */ .world-comms.is-min .world-comms-row--reply{opacity:0!important} .world-comms-min{position:absolute;top:15px;right:12px;display:grid;place-items:center;width:26px;height:26px;padding:0;border:1px solid rgb(30 30 26 / .22);border-radius:50%;background:transparent;color:#1e1e1a;cursor:pointer;transition:background-color .15s,border-color .15s} .world-comms-min:hover{background:rgb(30 30 26 / .06);border-color:rgb(30 30 26 / .45)} .world-comms-min:focus-visible{outline:2px solid #2b4df5;outline-offset:2px} .world-comms-min svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round} .world-comms-min-open{opacity:0;transition:opacity .15s} .world-comms.is-min .world-comms-min-open{opacity:1} @media (prefers-reduced-motion:reduce){.world-comms.has-min,.world-comms.has-min .world-comms-row--reply{transition:none}} /* The comms card is mounted across the top of the window's rim, over its bolts. */ .world-pinned .world-section--commitment .world-comms{position:absolute;top:24px;left:calc(46vw - 140px)} /* 1 October 2026 (the viewport pass): Commitment outside the pinned stage (phones, tablets, short and zoomed windows, no-JS, reduced motion). As on the pinned stage the porthole is one great window in the wall that runs off the screen, here off its right edge: the left curve, the bolts and the view as far as the station's far side show (SVG x -400 to +60, 57.5% of the window's width), and the comms card is mounted across the rim at the top left. The window is as large as the width allows (--ph-d) and never taller than the screen, so the whole view is on screen while its sticky row rides the runway. - Portrait, stacked: the card sits on the wall above the window's top-left corner and the window hangs from it (--ph-drop), both held at --ph-top, under the menu button. - Landscape, short and wide windows: the window is centred in the screen's height and the card rides its upper-left rim. --ph-gut is the section's side padding, which the art row runs through to reach the screen's edge. page.js commitmentFlow() plays the entrance (the window settles into the wall) and the exit (the dive through the glass into Boundaries' dark). */ body:not(.world-pinned) .world-section--commitment{--ph-gut:4.4vw;--ph-wvis:calc(100vw - var(--ph-gut) - max(320px,.39*(100vw - 2*var(--ph-gut))) - 36px);--ph-hmax:calc(100svh - 32px);--ph-drop:0px; --ph-d:max(240px,min(var(--ph-wvis)/.575,var(--ph-hmax)));--ph-top:max(16px,(100svh - var(--ph-d))/2)} body:not(.world-pinned) .world-section--commitment .world-art-track{grid-column:2;grid-row:1;min-height:0} body:not(.world-pinned) .world-section--commitment .world-art{position:sticky;top:var(--ph-top);display:block;width:auto;height:auto;min-height:0;margin-right:calc(-1*var(--ph-gut));padding-top:var(--ph-drop)} body:not(.world-pinned) .world-porthole-frame{width:var(--ph-d);height:var(--ph-d);max-width:none;margin-left:max(0px,100% - .575*var(--ph-d))} /* The card's right edge sits on the rim (.18 of the window in from its left) about a fifth of the way down. */ body:not(.world-pinned) .world-section--commitment .world-comms{grid-column:2;grid-row:1;align-self:start;justify-self:start;position:sticky;width:min(var(--comms-w),100%); top:calc(var(--ph-top) + .2*var(--ph-d) - 60px);margin-top:calc(.2*var(--ph-d) - 60px);margin-left:max(0px,max(0px,100% + var(--ph-gut) - .575*var(--ph-d)) + .18*var(--ph-d) - min(var(--comms-w),100%))} @media(max-width:1100px){ body:not(.world-pinned) .world-section--commitment{grid-template-columns:minmax(0,1fr);--ph-gut:6vw;--ph-wvis:calc(100vw - var(--ph-gut))} body:not(.world-pinned) .world-section--commitment .world-art-track,body:not(.world-pinned) .world-section--commitment .world-comms{grid-column:1;grid-row:2} } @media(max-width:600px){body:not(.world-pinned) .world-section--commitment{--ph-gut:5vw}} @media(max-width:1100px) and (orientation:portrait){ body:not(.world-pinned) .world-section--commitment{--ph-drop:72px;--ph-top:80px;--ph-hmax:calc(100svh - 168px)} body:not(.world-pinned) .world-section--commitment .world-comms{top:var(--ph-top);margin-top:0;margin-left:max(0px,100% + var(--ph-gut) - .575*var(--ph-d) - 140px)} } @media(prefers-reduced-motion:reduce){body:not(.world-pinned) .world-section--commitment .world-art,body:not(.world-pinned) .world-section--commitment .world-comms{position:relative;top:auto}} /* A keyboard user who reaches the minimise button sees the card whole, wherever the scroll has left its drop-in. (!important: commitmentFlow() writes the drop-in as inline styles.) */ body:not(.world-pinned) .world-section--commitment .world-comms:focus-within{opacity:1!important;transform:none!important} @media(min-width:1101px) and (max-height:800px){ .world-pinned .world-section.world-section--discovery{padding-top:110px;grid-template-rows:auto minmax(260px,1fr);row-gap:18px} .world-pinned .world-section--discovery .world-title{font-size:clamp(42px,3vw,58px)} .world-pinned .world-section--discovery .world-prose{font-size:18px;line-height:1.5} } @media(max-width:1100px){ .world-section--discovery .world-copy{display:block} .world-section--discovery .world-title{font-size:clamp(34px,4.6vw,48px);max-width:22ch;margin-bottom:20px} .world-section--discovery .world-prose{max-width:75ch;font-size:16px} .world-section--discovery .world-art{cursor:default} .world-section--commitment .world-art-track{min-height:360px} } @media(max-width:600px){ .world-section--discovery .world-title{font-size:32px;line-height:1.08;letter-spacing:-.03em} .world-section--discovery .world-prose{font-size:15px;line-height:1.55} .world-section--commitment .world-art-track{min-height:300px} } /* Chapter 5, Boundaries: the renderer draws the space-time fabric (world/boundaries-fabric.js) full-bleed behind this section, in white lines on noise-black. The grain is the hero's black-panel grain, and the copy sits above it. */ .world-section--boundaries .world-noise--boundaries{opacity:.12} .world-pinned .world-section--boundaries .world-noise--boundaries{inset:var(--frame-inset);border-radius:var(--frame-radius)} .world-pinned .world-section--boundaries .world-copy{position:relative;z-index:1} /* The cursor is the only mark of the pointer's weight on the grid, so it turns white on this dark ground. */ body[data-world-chapter="3"] #magic-cursor.world-cursor #ball{background-color:#ffffff} /* Chapter 5's copy in two halves over the grid (owner, 23 September): the eyebrow in the logo's gold (#ffd700) above the headline's three sentences, large on the left, and the paragraphs large on the right. The copy sits a little above centre so the dip beneath it shows. Pinned desktop stage only; the viewport pass comes at the end of the site. Line height stays above 1 so the line masks keep descenders. */ .world-pinned .world-section.world-section--boundaries{grid-template-columns:minmax(0,1fr)} .world-pinned .world-section--boundaries .world-art-track{grid-column:1;grid-row:1} .world-pinned .world-section--boundaries .world-copy{grid-column:1;grid-row:1;align-self:stretch;max-width:none;padding-top:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:start;align-items:center;column-gap:5vw;row-gap:clamp(22px,3.4vh,36px);padding-top:clamp(60px,12.5vh,130px)} .world-pinned .world-section--boundaries .world-eyebrow{grid-column:1;justify-self:start;margin:0;color:#ffd700} .world-pinned .world-section--boundaries .world-title{grid-column:1;margin:0;font-size:clamp(56px,5.6vw,122px);line-height:1.06} .world-pinned .world-section--boundaries .world-prose{grid-column:2;max-width:none;font-size:clamp(20px,1.5vw,31px);line-height:1.45} /* Chapter 6, Privacy (24 September, back to the AI's-eye wipe at the owner's request). One chat window holds two copies of the same conversation: left of the cobalt handle, as the visitor sees it on the website; right of it, dark, as the AI language model receives it, with the protected details withheld. The details land in the tray under the window. The grain lies behind it on the cream ground. world/privacy-conversation.js plays it; the markup is the first conversation, finished, so no-JS and reduced motion read it whole. The two copies share one layout, so borders match in both. Pinned desktop stage only: the flow shows the window at its authored split until the viewport pass. */ .world-section--privacy .world-title .world-cobalt,.world-section--privacy .world-title .world-cobalt span{color:var(--pv-word,#2b4df5)} .world-section--privacy .world-art,.world-live .world-section--privacy .world-art{cursor:default} .world-pinned .world-section.world-section--privacy{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);column-gap:clamp(48px,4.5vw,96px);align-items:center} .world-pinned .world-section--privacy .world-copy{grid-column:1;grid-row:1;align-self:center;max-width:none;position:relative;z-index:2} .world-pinned .world-section--privacy .world-art-track{grid-column:2;grid-row:1;align-self:center;justify-self:end;width:auto;height:auto;min-height:0;margin:0 clamp(24px,3.5vw,72px) 0 0;position:relative;z-index:1} .world-pinned .world-section--privacy .world-art{height:auto;min-height:0} .world-pinned .world-section--privacy .world-prose{max-width:34em} /* The paper: the site's grain, dark on cream, over the eclipse the renderer draws (world/privacy-eclipse.js). */ .world-section--privacy .world-noise--privacy{filter:invert(1);mix-blend-mode:multiply;opacity:.09} .world-pinned .world-section--privacy .world-noise--privacy,.world-pinned .world-section--privacy .world-noise--privacy-night{inset:var(--frame-inset);border-radius:var(--frame-radius)} /* The eclipse's night (--pv-night, 0..1, set by page.js): the dark grain gives way to a light one, so the texture carries into the dark; the copy crossfades to light ink as night falls, and back. */ .world-section--privacy .world-noise--privacy{opacity:calc(.09 * (1 - var(--pv-night, 0)))} .world-section--privacy .world-noise--privacy-night{opacity:calc(.1 * var(--pv-night, 0))} /* The copy's colours are driven by the eclipse's darkness (page.js paintPrivacyInk), so no CSS transition stacks on them. */ /* At night the cursor dot turns light, and the model's label pill gets an edge against the dark. (The pause pill stays white at night since 26 September, as on every ground: block K.) */ body[data-world-chapter="4"][data-chapter-theme="dark"] #magic-cursor.world-cursor #ball{background-color:#ffffff} body[data-world-chapter="4"][data-chapter-theme="dark"] .world-pv-labels .world-pv-label-ai{box-shadow:inset 0 0 0 1px rgb(246 243 236 / .28)} /* At night the window keeps its edge against the sky, and the handle line gets a light core. */ body[data-world-chapter="4"][data-chapter-theme="dark"] .world-pv-window{border-color:rgb(246 243 236 / .26);box-shadow:0 0 0 1px rgb(246 243 236 / .06),0 24px 60px rgb(0 0 0 / .35)} body[data-world-chapter="4"][data-chapter-theme="dark"] .world-pv-handle::before{left:-1.5px;width:3px;background:linear-gradient(90deg,#2b4df5,#c9d3ff 50%,#2b4df5)} /* The copy's ink follows the eclipse (page.js paintPrivacyInk): dark to light and back, gliding with the darkness. */ .world-pinned .world-section--privacy .world-copy{color:var(--pv-ink,var(--ink))} .world-pv-stage{position:relative;display:grid;gap:12px;width:600px;font:500 14.5px/1.42 'DM Sans',sans-serif;text-align:left;color:#1c1b1f} .world-pv-lock{flex:none} /* The labels caption the window from below (the sun rises behind its top edge), as pills that read on daylight and dusk alike. */ .world-pv-labels{order:2;display:flex;justify-content:space-between;gap:16px;font-size:13.5px;font-weight:600;line-height:1.3;letter-spacing:.01em;text-transform:none;color:#45473f} .world-pv-tray{order:3} .world-pv-labels span{padding:5px 11px 5px 9px;border-radius:999px;background:rgb(255 251 242 / .94);color:#45473f;box-shadow:0 4px 12px rgb(30 30 26 / .1)} .world-pv-labels .world-pv-label-ai{background:#1e1e1a;color:rgb(246 243 236 / .9)} .world-pv-labels span{display:inline-flex;align-items:center;gap:7px} .world-pv-labels span::before{content:'';width:9px;height:9px;border-radius:50%;background:#fffbf2;box-shadow:inset 0 0 0 1px rgb(30 30 26 / .45)} .world-pv-labels .world-pv-label-ai::before{background:#1e1e1a;box-shadow:inset 0 0 0 1.5px rgb(246 243 236 / .7)} /* The window. --pv-split moves both the clip on the model's copy and the handle. */ .world-pv-window{--pv-split:30%;position:relative;height:500px;border-radius:16px;overflow:hidden;border:1px solid rgb(30 30 26 / .4);box-shadow:0 14px 34px rgb(30 30 26 / .14),0 2px 6px rgb(30 30 26 / .08);cursor:ew-resize;touch-action:pan-y;user-select:none;-webkit-user-select:none} .world-pv-window.is-dragging{cursor:grabbing} .world-pv-layer{position:absolute;inset:0;padding:18px} .world-pv-layer--site{background:#fffbf2;color:#1c1b1f} .world-pv-layer--ai{background:#1e1e1a;color:rgb(246 243 236 / .92);clip-path:inset(0 0 0 var(--pv-split))} .world-pv-thread{display:flex;flex-direction:column;gap:10px} .world-pv-msg{position:relative;display:flex;flex-direction:column;align-items:flex-start} .world-pv-msg--v{align-items:flex-end} .world-pv-bubble{display:block;max-width:78%;padding:8px 12px 9px;border:1px solid transparent;border-radius:13px} .world-pv-msg--v .world-pv-bubble{border-bottom-right-radius:4px} .world-pv-msg--a .world-pv-bubble{border-bottom-left-radius:4px} .world-pv-layer--site .world-pv-msg--v .world-pv-bubble{background:#ece6d8} .world-pv-layer--site .world-pv-msg--a .world-pv-bubble{background:#fff;border-color:rgb(30 30 26 / .14)} .world-pv-layer--ai .world-pv-msg--v .world-pv-bubble{background:rgb(246 243 236 / .12)} .world-pv-layer--ai .world-pv-msg--a .world-pv-bubble{border-color:rgb(246 243 236 / .24)} .world-pv-dots{position:absolute;top:0;display:inline-flex;gap:4px;padding:13px 12px;opacity:0} .world-pv-msg--a .world-pv-dots{left:0} .world-pv-msg--v .world-pv-dots{right:0} .world-pv-dots i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.28} .world-pv-dots i.is-lit{opacity:.85} /* The protected form: Superstrate's on-screen fields. In the model's copy the same fields read Withheld. */ .world-pv-form{position:relative;display:grid;gap:6px;width:78%;margin-top:8px;padding:10px 50px 12px 12px;border:1px solid transparent;border-radius:12px} .world-pv-layer--site .world-pv-form{background:#fff;border-color:rgb(30 30 26 / .14)} .world-pv-layer--ai .world-pv-form{border-color:rgb(246 243 236 / .24)} .world-pv-cap{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.7} .world-pv-field{display:grid;grid-template-columns:50px minmax(0,1fr);align-items:center;height:28px;padding:0 10px;border:1px solid transparent;border-radius:7px} .world-pv-layer--site .world-pv-field{background:#f3efe6;border-color:rgb(30 30 26 / .12)} .world-pv-layer--ai .world-pv-field{background:rgb(246 243 236 / .06);border-color:rgb(246 243 236 / .12)} .world-pv-label{font-size:11.5px;opacity:.65} .world-pv-value{display:flex;align-items:center;min-width:0;font-size:13px;font-weight:600;white-space:nowrap} .world-pv-typed{padding:1px 4px;margin-left:-4px;border-radius:4px;transition:background-color .3s} .world-pv-typed.is-marked{background:#ffe066} .world-pv-pending{color:transparent} .world-pv-t.is-typing::after{content:'';display:inline-block;width:1.5px;height:1em;margin-left:1px;vertical-align:-.14em;background:currentColor;animation:world-pv-caret 1s step-end infinite} @keyframes world-pv-caret{50%{opacity:0}} .world-pv-withheld{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 9px 0 7px;border-radius:10px;background:#2b4df5;color:#fff;font-size:13px;font-weight:600;letter-spacing:.02em} .world-pv-send{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%} .world-pv-layer--site .world-pv-send{background:#1e1e1a;color:#fffbf2} .world-pv-layer--ai .world-pv-send{visibility:hidden} .world-pv-note{position:absolute;right:18px;bottom:18px;display:flex;align-items:flex-start;gap:8px;max-width:60%;padding:10px 12px;border:1px solid rgb(43 77 245 / .55);border-radius:10px;background:rgb(43 77 245 / .18);font-size:12.5px;line-height:1.4;color:#fff} .world-pv-note .world-pv-lock{margin-top:3px} .world-pv-handle{position:absolute;top:0;bottom:0;left:var(--pv-split);width:0;z-index:3;pointer-events:none} .world-pv-handle::before{content:'';position:absolute;top:0;bottom:0;left:-1px;width:2px;background:#2b4df5} .world-pv-grip{position:absolute;top:88%;left:0;display:grid;place-items:center;width:44px;height:28px;margin:-14px 0 0 -22px;border-radius:14px;background:#2b4df5;color:#fff;box-shadow:0 6px 16px rgb(30 30 26 / .22)} /* The tray: the system handling the request, where the protected details arrive. */ .world-pv-tray{display:flex;align-items:center;gap:14px;min-height:92px;padding:12px 16px;border:1px solid rgb(30 30 26 / .3);border-radius:14px;background:#fffbf2;box-shadow:0 12px 30px rgb(30 30 26 / .1)} .world-pv-tray-head{display:inline-flex;align-items:center;gap:7px;flex:none;font-size:13px;font-weight:700} .world-pv-tray-head .world-pv-lock{color:#d8674a} .world-pv-items{display:flex;flex-wrap:wrap;gap:6px} .world-pv-item,.world-pv-chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px 0 8px;border-radius:13px;font-size:12.5px;font-weight:600;white-space:nowrap} .world-pv-item{background:#fff1b0;border:1px solid rgb(30 30 26 / .14)} /* the visitor's details keep the butter they flew in with */ .world-pv-item--sum{padding-left:10px;background:#f4cfc0;border-color:rgb(216 103 74 / .55)} .world-pv-chip{position:absolute;left:0;top:0;z-index:5;background:#ffe066;color:#1c1b1f;opacity:0;pointer-events:none;box-shadow:0 8px 18px rgb(30 30 26 / .18)} body:not(.world-pinned) .world-section--privacy .world-art{position:relative;top:auto;height:auto;min-height:0} body:not(.world-pinned) .world-section--privacy .world-art-track{min-height:0} body:not(.world-pinned) .world-pv-stage{margin:0 auto} /* Chapter 10, Ask: the stellar nursery (audience-nebula.js, drawn by the renderer), moved here from chapter 7 in place of Ask's object: the site's last scene. The copy has the whole screen, and is set centred as this chapter's copy always was: one block in the middle of the stage, the headline large and centred, the two paragraphs stacked beneath it, each centred on its own line, and the two actions side by side in one centred row. The block is centred on the whole stage, not on the padded cell: its 28px bottom margin evens out the section's 76px top and 48px bottom padding. The gas quietens behind the whole block, actions included (page.js passes its box), and nothing kindles there. Pinned desktop stage only; the viewport pass comes at the end of the site. */ .world-pinned .world-section--ask{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);row-gap:0;padding-bottom:48px} .world-pinned .world-section--ask .world-copy{grid-column:1;grid-row:1;align-self:center;justify-self:center;display:flex;flex-direction:column;align-items:center;width:min(100%,1140px);max-width:none;margin:0 0 28px;text-align:center;position:relative;z-index:2} .world-pinned .world-section--ask .world-title{max-width:none;margin:0;font-size:clamp(54px,4.6vw,96px);line-height:1;letter-spacing:-.04em;text-wrap:balance} .world-pinned .world-section--ask .world-prose{max-width:none;margin:clamp(28px,4.6vh,52px) 0 0;text-align:center;font-size:clamp(18px,1.22vw,24px);line-height:1.5} .world-pinned .world-section--ask .world-prose p{margin:0;text-wrap:balance} .world-pinned .world-section--ask .world-prose p+p{margin-top:.45em} .world-pinned .world-section--ask .world-actions{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;margin:clamp(28px,4.4vh,44px) 0 0} .world-pinned .world-section--ask .world-art-track{grid-column:1;grid-row:1;align-self:stretch;justify-self:stretch;height:100%;min-height:0;position:relative;z-index:1;pointer-events:none} .world-pinned .world-section--ask .world-art{position:absolute;inset:0;height:auto;min-height:0} /* The two actions on the nebula are the pair the hero opens with: Ask Superstrate in Card Cream, Request a demo in Signal Yellow (its [data-demo] fill), both in ink and one height. Each stands on a soft dark shadow, so bright gas never meets its edge. Hover warms it, as the gas warms under a resting pointer; focus is a white ring on a dark band, clear over any gas. Ink on Card Cream 16.6:1 (hover white 17.1:1); ink on Signal Yellow 11.9:1 (hover 13.3:1). */ .world-pinned .world-section--ask .world-actions>a{min-height:52px;padding:0 22px;border:0;border-radius:3px;font-size:14px;font-weight:500;line-height:1.2;box-shadow:0 14px 34px -12px rgb(6 3 8 / .8);transition:background-color .25s ease,box-shadow .45s cubic-bezier(.16,1,.3,1)} .world-pinned .world-section--ask .world-button:not([data-demo]){gap:22px;background:#fffbf2;color:#1c1b1f} .world-pinned .world-section--ask .world-button:not([data-demo]):hover{background:#ffffff;box-shadow:0 14px 34px -12px rgb(6 3 8 / .8),0 10px 44px -6px rgb(255 206 150 / .5)} .world-pinned .world-section--ask .world-text-link[data-demo]:hover{background:#ffe56b;box-shadow:0 14px 34px -12px rgb(6 3 8 / .8),0 10px 44px -6px rgb(255 215 0 / .55)} .world-pinned .world-section--ask .world-actions>a.world-button:focus-visible,.world-pinned .world-section--ask .world-actions>a.world-text-link:focus-visible{outline:2px solid #ffffff;outline-offset:4px;box-shadow:0 0 0 4px #1c1b1f,0 14px 34px -12px rgb(6 3 8 / .8)} @media (hover:none){ .world-pinned .world-section--ask .world-button:not([data-demo]):hover{background:#fffbf2;box-shadow:0 14px 34px -12px rgb(6 3 8 / .8)} .world-pinned .world-section--ask .world-text-link[data-demo]:hover{background:#ffd700;box-shadow:0 14px 34px -12px rgb(6 3 8 / .8)} } /* Ask's art cell holds only the nebula's still now: nothing to drag. On the nebula the trailing cursor dot turns white (it is a difference blend), as on the other dark full-screen scenes. */ .world-live .world-section--ask .world-art{cursor:auto} /* Feature links (24 September 2026): in each chapter the most important feature mention opens its description on /features in a new tab. At rest the phrase reads exactly as the text around it. The only mark is an underline in the text's own colour that grows from the left on hover, and the same underline on keyboard focus. It is a background, so a wrapped phrase is underlined on every line and paint-only properties animate, never layout. */ .world-feature-link{color:inherit;text-decoration:none;cursor:pointer;background:linear-gradient(currentColor,currentColor) no-repeat 0 94%/0 max(1px,.07em);transition:background-size .45s cubic-bezier(.22,1,.36,1)} .world-feature-link:hover,.world-feature-link:focus-visible{text-decoration:none;background-size:100% max(1px,.07em)} .world-feature-link:focus-visible{outline:none} @media (prefers-reduced-motion:reduce){.world-feature-link{transition:none}} /* Two layers of the pinned stage sat over copy and took the feature links' hover and click: - Commitment's porthole opts its open space and its times and ports into pointer events, which overrides the none its section is given while another chapter is presented. Later in the page, it lay over the right half of the hero, the story and Discovery. It takes the pointer only while Commitment is presented (the hero's swarm canvas had the same fault; page.js turns that one off). - Chapter 5's art cell (z-index 2) covered its copy (z-index 1). The copy now sits above it but lets the pointer through, so the grid still takes a click anywhere, as before; only the feature link takes it, while chapter 5 is presented. */ /* (1 October 2026: a time's or port's parts inherit its pointer-events, so this no longer ends in `[data-pick] *`, which made every chapter change restyle the whole page.) */ body.world-pinned:not([data-world-chapter="2"]) .world-porthole [data-space], body.world-pinned:not([data-world-chapter="2"]) .world-porthole [data-pick]{pointer-events:none} .world-pinned .world-section--boundaries .world-copy{z-index:3;pointer-events:none} body.world-pinned[data-world-chapter="3"] .world-section--boundaries .world-feature-link{pointer-events:auto} /* Chapter 7, Who it's for (25 September 2026, Oli's idea): chapter 6's cream paper and grain, with sunbeams falling from the top onto the centred copy and the light slowly flooding the page (world/audience-rays.js). The type is the site's own; only its alignment changes. The art cell only frames the hidden object07 (the renderer never draws it), so it is placed on the right and takes no pointer. Pinned desktop stage only; the viewport pass comes at the end of the site. */ .world-section--audience .world-noise--audience{filter:invert(1);mix-blend-mode:multiply;opacity:calc(.09 * var(--aud-grain, 1));background:none;overflow:hidden} /* The grain drifts diagonally on a loop as well as flickering (owner, 25 September), slowly, like fog in still air: a layer one grain tile (480 x 360) larger than the frame moves by exactly one tile per loop, by transform only, so the loop is seamless and cheap. */ .world-section--audience .world-noise--audience::before{content:'';position:absolute;inset:-360px 0 0 -480px;background:url("../imgs/superstrate-world/decor/noise.gif") repeat;animation:world-grain-drift 32s linear infinite;will-change:transform} .world-section--audience .world-noise--audience.is-paused{background-image:none} .world-section--audience .world-noise--audience.is-paused::before{background-image:url("../imgs/superstrate-world/decor/noise-still.png");animation-play-state:paused} @keyframes world-grain-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(480px,360px,0)}} @media (prefers-reduced-motion:reduce){.world-section--audience .world-noise--audience::before{animation:none;background-image:url("../imgs/superstrate-world/decor/noise-still.png")}} .world-pinned .world-section--audience .world-noise--audience{inset:var(--frame-inset);border-radius:var(--frame-radius)} .world-section--audience .world-art,.world-live .world-section--audience .world-art{cursor:default} /* Without the renderer (no JS, WebGL failure, reduced motion's stills) the chapter is the cream paper and the centred copy; the old object's still is not shown. */ body:not(.world-live) .world-section--audience .world-art-track{display:none} body:not(.world-live) .world-section--audience .world-copy{text-align:center;margin-inline:auto} @media(min-width:1101px){ .world-pinned .world-section.world-section--audience{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);row-gap:0;align-items:center;justify-items:center} .world-pinned .world-section--audience .world-copy{display:flex;flex-direction:column;align-items:center;grid-column:1;grid-row:1;align-self:center;max-width:min(1040px,100%);position:relative;z-index:2;text-align:center;padding-top:clamp(8px,2vh,24px)} .world-pinned .world-section--audience .world-eyebrow{margin:0 auto} .world-pinned .world-section--audience .world-title{margin:clamp(14px,2vh,20px) auto clamp(22px,3.4vh,34px);text-align:center;text-wrap:balance;max-width:26ch} .world-pinned .world-section--audience .world-prose{max-width:38em;margin:0 auto;padding:0;text-align:center} .world-pinned .world-section--audience .world-art-track{position:absolute;right:4.4vw;bottom:46px;width:44%;height:60%;min-height:0;pointer-events:none} } /* --- I. Chapter rail (owner request, 25 September 2026) ---------------------- chapter-rail.js: one short vertical bar per chapter at the left edge of the pinned stage, vertically centred, like breadcrumbs stood on end. The chapter being presented lights up: full ink, taller, with the Menu pill's yellow chrome halo. Hover or keyboard focus grows a bar and slides its chapter's name out beside it, in the eyebrow's type on the Pause pill's look. Every row is a fixed 28px hit area and nothing in the rail animates layout: a bar is drawn at the active size (2 x 30px) and scaled down to 16px when it is not the chapter presented, so the halo on the active bar is never stretched; only transform, opacity and box-shadow move. The bars' axis sits 16px inside the frame, level with the Pause pill's label, clear of the header logo above and the pill below. Pinned live stage only (the flow, the stills and no-JS never mount it); over the footer it fades and turns click-through, and, like the other fixed chrome, focus brings it back. */ .world-rail{position:fixed;left:calc(var(--frame-inset) + 5px);top:50%;transform:translateY(-50%);z-index:30;color:var(--ink);font-family:var(--ff-body);transition:opacity .2s cubic-bezier(.23,1,.32,1)} body[data-chapter-theme="dark"] .world-rail{color:#ffffff} /* On the dark chapters (the fabric's white grid especially) the resting bars need a little more to stand clear. */ body[data-chapter-theme="dark"] .world-rail-bar{opacity:.5} body:not(.world-pinned) .world-rail,body:not(.world-live) .world-rail,.world-rail.is-hidden:not(:focus-within){opacity:0;pointer-events:none} .world-rail ol{list-style:none;margin:0;padding:0} .world-rail-item{position:relative;display:block;width:24px;height:34px;margin:0;padding:0;border:0;background:none;color:inherit;cursor:pointer} .world-rail-bar{position:absolute;left:11px;top:calc(50% - 11px);width:2px;height:22px;border-radius:1px;background:currentColor;opacity:.3;transform:scale(1,.7273);transition:transform .2s cubic-bezier(.23,1,.32,1),opacity .2s cubic-bezier(.23,1,.32,1),box-shadow .2s cubic-bezier(.23,1,.32,1)} .world-rail-item[aria-current="true"] .world-rail-bar{opacity:1;transform:none;box-shadow:0 0 0 1px rgb(255 215 0 / .6),0 0 18px rgb(255 215 0 / .55),0 0 38px rgb(255 215 0 / .2)} .world-rail-label{position:absolute;left:24px;top:50%;padding:8px 13px;border:1px solid color-mix(in srgb,currentColor 32%,transparent);border-radius:999px;background:var(--ground);font-size:12px;line-height:1.2;font-weight:600;letter-spacing:.045em;text-transform:uppercase;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-6px,-50%);transition:opacity .2s cubic-bezier(.23,1,.32,1),transform .2s cubic-bezier(.23,1,.32,1)} /* Privacy's night keeps its light ground token under a dark sky: the name's pill turns dark there, as the Pause pill does. */ body[data-world-chapter="4"][data-chapter-theme="dark"] .world-rail-label{background:#1e1e1a;border-color:rgb(246 243 236 / .3)} /* Grown on hover and focus: 22px and half as thick again; the active bar to 32px. */ @media (hover:hover){ .world-rail-item:hover .world-rail-bar{opacity:.85;transform:scale(1.5,.8182)} .world-rail-item[aria-current="true"]:hover .world-rail-bar{opacity:1;transform:scale(1.5,1.0909)} .world-rail-item:hover .world-rail-label{opacity:1;transform:translate(0,-50%)} } .world-rail-item:focus-visible{outline:none} .world-rail-item:focus-visible .world-rail-bar{opacity:.85;transform:scale(1.5,.8182)} .world-rail-item[aria-current="true"]:focus-visible .world-rail-bar{opacity:1;transform:scale(1.5,1.0909)} .world-rail-item:focus-visible .world-rail-label{opacity:1;transform:translate(0,-50%);outline:2px solid currentColor;outline-offset:2px} @media (prefers-reduced-motion:reduce){.world-rail,.world-rail-bar,.world-rail-label{transition:none}} /* --- H20. The hero as one composed group (owner request, 26 September 2026) --- The two cards have left the hero: their paragraphs are the story's captions now (the next section, J below), and one sub-headline under the headline carries both. The lockup, the headline, the sub-headline and the two actions stand as one centred column over the swarm; the eyebrow keeps the header slot, and the panel, grain, swarm and star are as they were. Centred, because nothing holds the right half any more and the swarm drifts evenly across the whole panel: a left column would leave it lopsided. Rhythm: the lockup, 24 to the headline, 20 to the sub-headline (the two read as one statement), 32 to the actions. The headline stands on the owner's two lines (round 2, the same day), "Make your business easier to find" / "and easier to choose.": the markup breaks it (world-hero-break), so the group is one line shorter and, still centred, carries the sub-headline and the actions up with it. This block supersedes the hero placements above (H1-H13, W4-hero C-E) and those in hero-swarm.css, which loads after this file and scopes its own under the swarm's body class: every rule here is scoped with #hero, so it wins in each mode without copying those selectors' shapes. */ #hero .world-hero-sub{margin:0;font-weight:400;color:var(--ink-muted);text-wrap:balance} /* Like the cards before it, the sub-headline keeps the pointer and stays selectable over the swarm (hero-swarm.css makes the rest of the copy click-through so the drifting objects can be picked up behind it). */ #hero .world-hero-sub{pointer-events:auto;-webkit-user-select:text;user-select:text} @media (min-width:1101px){ #hero .world-copy{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center;max-width:none;width:100%;margin:0;align-self:center} #hero .world-hero-lockup{justify-content:center;margin:0 0 24px} #hero .world-hero-lockup img{height:clamp(80px,5.6vw,112px)} #hero .world-title{max-width:none;margin:0 0 20px;text-align:center;font-size:clamp(44px,3.4vw,66px);line-height:1.08;letter-spacing:-.04em;text-wrap:initial} #hero .world-hero-sub{max-width:34em;margin:0 0 32px;font-size:clamp(18px,1.3vw,23px);line-height:1.5} #hero .world-actions{justify-content:center;margin:0} /* The eyebrow keeps the header slot (H9, W4-hero E) and its own left-aligned lines. */ #hero .world-eyebrow{text-align:left} /* Pinned, the group is centred in the panel below the header row, a little high of the free field's middle. */ .world-pinned #hero{padding:96px 4.4vw 56px} /* Without the swarm (it failed to mount) the single hero object returns above the lockup, smaller so the group fits. */ body:not(.world-hero-swarm-on) #hero .world-art-track{width:min(100%,420px);height:clamp(120px,18vh,240px);margin:0 0 4px} } /* LU: short laptop windows (<700 tall, never pinned), compacted as W4-hero E compacted the old composition. */ @media (min-width:1101px) and (height < 700px){ #hero .world-hero-lockup{margin:0 0 18px} #hero .world-hero-lockup img{height:64px} #hero .world-title{font-size:clamp(36px,3vw,44px);margin:0 0 14px} #hero .world-hero-sub{font-size:16px;margin:0 0 22px} } /* The stacked poster (<=1100 wide, W4-hero D): the sub-headline takes the old cards' place inside the first screen, in the row between the headline and the actions, so the poster's rows are one more and nothing sits below the fold. */ @media (max-width:1100px){ body:not(.world-pinned) #hero .world-copy{grid-template-rows:minmax(0,1fr) auto auto auto auto auto minmax(0,1.6fr)} body:not(.world-pinned) #hero .world-copy::before{grid-row:1/8} /* The headline's first line, "Make your business easier to find", stands whole wherever the column fits it (the poster's 22ch cap above would always wrap it); where it does not, it wraps before "easier to find" (breakHeroTitle, page.js). */ body:not(.world-pinned) #hero .world-title{max-width:none;margin-bottom:18px} body:not(.world-pinned) #hero .world-hero-sub{grid-column:1;grid-row:5;justify-self:center;max-width:32em;margin:0 0 26px;font-size:17px;line-height:1.55} body:not(.world-pinned) #hero .world-actions{grid-row:6} } @media (max-width:600px){ body:not(.world-pinned) #hero .world-hero-sub{justify-self:start;font-size:16px;margin:0 0 22px} } @media (max-width:1100px) and (max-height:500px){ body:not(.world-pinned) #hero .world-title{margin-bottom:10px} body:not(.world-pinned) #hero .world-hero-sub{max-width:46em;font-size:14px;line-height:1.45;margin:0 0 14px} } /* --- J. The story section's place on the page (26 September 2026) ------------ The homepage's second section, between the hero and Discovery (story.html). world/story.js and world-story*.css own everything inside it; this block only places it. It is no .world-section and no world chapter, and it brings its own opaque ground and ink: since round 2 (the same day) the hero's noise-black and white ink (palette.js STORY_GROUND, the dark theme; world-story.css paints that black with the hero's grain inside it), so neither the chapter ground nor the fixed canvas ever shows through it, and it reads the same whatever the page's theme is at that moment. Pinned, it is one position of the stage, laid on the stage's inset panel as the footer is (the frame ring traces it): page.js (storyTransition) fades it in and out on its two transitions and marks it .is-presented while it is the section on screen; while it is not, nothing inside it takes the pointer. In the flow it is a section of its own after the hero panel, at least a screen tall, above the fixed canvas as the flow hero is, and a formatting context of its own (so no margin inside it collapses through its edge; world-story.css may give it grid or flex instead). */ .world-story-section{position:relative;z-index:2;display:flow-root;min-height:100svh;background:#1e1e1a;color:var(--ink);--ink:#ffffff;--ink-muted:rgba(255,255,255,.72)} .world-pinned .world-story-section{position:absolute;inset:var(--frame-inset);z-index:3;min-height:0;border-radius:var(--frame-radius);overflow:clip} .world-pinned:not(.world-ready) .world-story-section{visibility:hidden} .world-pinned .world-story-section:not(.is-presented){pointer-events:none} .world-pinned .world-story-section:not(.is-presented) *{pointer-events:none!important} /* The handover from the hero keeps ground and grain continuous, dark to dark (round 2). Pinned, the hero's grain (.world-noise--hero) lives inside the hero section, which leaves the stage at once when the transition starts, while the story's panel only comes in over its second half. For that stretch the stage's ground panel carries the grain itself: page.js (storyTransition) sets .world-stage-grain while the story arrives (or, scrolling back, un-arrives), and the story's own opaque panel covers the layer before it is taken off, so the two grains never add up. The layer is the hero grain's twin: the same image on the same box and tile origin (the frame inset) at .12, composited plainly (the hero's screen blend has only its own section's transparent backdrop to act on, so it lands as a plain .12 layer too), and it takes the still frame whenever the hero's grain does (Pause, a hidden tab: world-effects.js). */ .world-pinned .world-stage::after{content:'';position:absolute;inset:var(--frame-inset);z-index:0;border-radius:var(--frame-radius);pointer-events:none;opacity:0;background:url("../imgs/superstrate-world/decor/noise.gif") repeat} .world-pinned .world-stage.world-stage-grain::after{opacity:.12} .world-pinned .world-stage:has(.world-noise--hero.is-paused)::after{background-image:url("../imgs/superstrate-world/decor/noise-still.png")} /* In the flow the story follows the hero's panel directly, black on black: the panel's bottom margin and corners go, so hero and story read as one dark surface with no seam of bare page ground between them (that ground turns white behind the story as Discovery's white comes up, and a seam there would flash white). */ body:not(.world-pinned) .world-section--hero:has(+ .world-story-section){margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0} /* The trailing cursor dot turns white over the story's black, as it does on the other dark chapters. */ body[data-world-chapter="story"] #magic-cursor.world-cursor #ball{background-color:#ffffff} /* --- K. The fixed chrome buttons (owner request, 26 September 2026) ---------- One family on every ground and every page: the Menu pill (top right), back-to-top (bottom right) and the Pause pill (bottom left, .world-controls; the footer partial). - The Pause pill looks exactly like the other two: an opaque white fill, their ink and their border (var(--ink): ink on light grounds, white on dark ones, where the white fill itself carries the edge), a gold fill on hover and their focus ring (block G). It used to paint the chapter's ground, so on the dark chapters (the hero, the story, the Privacy night) it read as the black ground behind a hairline. Its label ("Pause motion", pressed "Resume motion") keeps its type, so the pressed state reads the same way, ink on white. - The Menu pill and back-to-top are about 18% smaller (the owner: "a little too big"): the Menu pill 62 -> 50px tall (padding, type, gap, icon and corner scaled together), back-to-top 48 -> 40px (its arrow 20 -> 16px). Both icons draw a 1.5px line (stroke-width in each SVG's own units), so they come out smaller, not fainter. Each button keeps its anchor: the Menu pill top 24px / right 28px, back-to-top bottom 24px / right 24px. Phones (<=600) keep their own Menu pill from the phone rules near the top of this file (already 50px tall). - The Pause pill is exactly back-to-top's height (--world-chrome-size), so the two bottom corners read as a set. It stays in the frame's corner (inset + 1px, the 2026-09-18 rule); at 40px its --frame-radius end is a full half-circle. Everything laid out clear of this chrome was sized for the bigger buttons and only gains room: the pinned footer's bottom padding, the story (world-story.css), the venue stage's 100px top, the Privacy stage's clearances. chrome.js and venue.js measure the buttons live. */ :root{--world-chrome-size:40px} @media (min-width:601px){ .world-menu-toggle{padding:15px 20px;gap:13px;font-size:11px;border-radius:16px} .world-menu-toggle svg{width:18px;height:18px;stroke-width:2} } .world-back-top{width:var(--world-chrome-size);height:var(--world-chrome-size)} .world-back-top svg{width:20px;height:20px;stroke-width:1.875} .world-controls button{display:inline-flex;align-items:center;height:var(--world-chrome-size);padding-block:0;white-space:nowrap;color:#1c1b1f;background:#ffffff;border:1px solid var(--ink);transition:background .2s} .world-controls button:hover{background:var(--accent)} @media (hover:none){.world-controls button:hover{background:#ffffff}} /* Touch keeps a 44px target on the smaller back-to-top, as the Pause pill has one (block A). */ @media (pointer:coarse){.world-back-top::after{content:'';position:absolute;inset:-2px}} /* --- H21. The hero's horizon and polish (owner request, 29 September 2026) ----------------------------------------- Delight 1: a planet's lit limb along the bottom of the hero panel gives the hero the light source every later section has. A dark dome rises into view on arrival, its rim catches warm gold light and the glow above it breathes slowly. No sun disc (the owner rejected "too much sun"). It sits under the swarm and the grain (both come later in the DOM at the same z-index), so objects drift in front of the planet and the grain covers it like the rest of the panel. Pause and a hidden tab freeze it with the grain; reduced motion shows it risen and still. Polish 1-4: the header-slot tagline stops looking like a link; the lockup steps down so the headline leads; the sub-headline reads brighter on a slightly narrower measure; the two actions become one matched pair, both with the arrow. */ .world-hero-horizon{position:absolute;inset:0;z-index:1;overflow:hidden;border-radius:inherit;pointer-events:none; -webkit-mask-image:linear-gradient(90deg,transparent 4%,#000 30%,#000 70%,transparent 96%);mask-image:linear-gradient(90deg,transparent 4%,#000 30%,#000 70%,transparent 96%)} .world-pinned #hero .world-hero-horizon{inset:var(--frame-inset);border-radius:var(--frame-radius)} .world-hero-horizon-planet,.world-hero-horizon-glow{position:absolute;left:50%;will-change:transform,opacity} /* The planet: a circle three panels wide whose crown shows about 15% of the panel's height at the centre. */ .world-hero-horizon-planet{width:300%;aspect-ratio:1;top:calc(100% - clamp(84px,15%,150px));border-radius:50%; background:radial-gradient(120% 60% at 50% 0%,#2c2a24 0%,#1a1916 6%,#141311 30%); box-shadow:inset 0 1px 0 rgb(255 240 196 / .85),inset 0 3px 6px rgb(255 222 130 / .35),inset 0 26px 60px rgb(255 206 90 / .10), 0 -1px 2px rgb(255 236 170 / .55),0 -8px 26px rgb(255 214 78 / .30),0 -40px 110px rgb(255 190 80 / .16); transform:translate(-50%,0);animation:world-hero-rise 3.2s cubic-bezier(.16,1,.3,1) .35s both} /* The atmosphere above the limb: a warm haze, brightest over the centre, breathing. */ .world-hero-horizon-glow{width:130%;height:62%;bottom:0;transform:translate(-50%,0); background:radial-gradient(50% 58% at 50% 100%,rgb(255 214 78 / .22) 0%,rgb(255 176 72 / .09) 42%,transparent 72%); animation:world-hero-glow-in 3.6s ease .6s both,world-hero-breathe 9s ease-in-out 4.2s infinite alternate} @keyframes world-hero-rise{from{transform:translate(-50%,70px);opacity:0}to{transform:translate(-50%,0);opacity:1}} @keyframes world-hero-glow-in{from{opacity:0;transform:translate(-50%,40px)}to{opacity:1;transform:translate(-50%,0)}} @keyframes world-hero-breathe{from{opacity:1}to{opacity:.62}} #hero:has(.world-noise--hero.is-paused) .world-hero-horizon *{animation-play-state:paused} @media (prefers-reduced-motion:reduce){.world-hero-horizon *{animation:none!important}} /* The copy block sits a little higher so the buttons stay clear of the limb. */ .world-pinned #hero{padding-bottom:clamp(96px,14vh,150px)} /* Polish 1: the header-slot tagline, quiet and tracked, with no underline at rest or on hover. */ #hero .world-eyebrow .world-eyebrow-label,#hero .world-eyebrow:hover .world-eyebrow-label{text-decoration:none} #hero .world-eyebrow{font-size:12px;letter-spacing:.14em;color:rgb(255 255 255 / .66)} /* Polish 2: the lockup about 30% smaller, so the headline is the one thing the eye lands on. */ #hero .world-hero-lockup img{height:clamp(56px,3.9vw,78px)} #hero .world-hero-lockup{margin-bottom:22px} /* Polish 3: the sub-headline brighter and a little narrower. */ #hero .world-hero-sub{color:rgb(255 255 255 / .84);max-width:33em} /* Polish 4: one matched pair. Same height, padding, type, corner and arrow; the arrow nudges on hover on both. */ #hero .world-actions{gap:16px} #hero .world-actions>a.world-button,#hero .world-actions>a.world-text-link[data-demo]{display:inline-flex;align-items:center;justify-content:space-between;gap:22px; min-height:52px;padding:0 20px 0 24px;font-size:15px;font-weight:500;line-height:1;border:0;border-radius:12px;box-sizing:border-box} #hero .world-actions>a.world-text-link[data-demo] svg{flex-shrink:0;transition:transform .2s} #hero .world-actions>a.world-text-link[data-demo]:hover svg{transform:translate(2px,-2px)} /* 29 September 2026 (the full-device pass): touch targets. On a coarse pointer the chapters' text links (12-14px type, about 31px tall) and the comms card's minimise button (26px) take a 44px hit area; nothing drawn moves. */ @media (pointer:coarse){ .world-live .world-section .world-text-link:not([data-demo]){position:relative} .world-live .world-section .world-text-link:not([data-demo])::after{content:'';position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)} .world-comms-min::after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)} } /* --- Demos beside Industries, and a steadier menu (1 October 2026, owner) -------------------------------------------- "Demos" is a second disclosure in the same three places as Industries (header bar, menu dialog, footer), built from the same parts (partials/world-header.html, world-footer.html; chrome.js treats every [data-world-industries] alike). In the menu dialog the items step down a size, and both disclosures open as a small floating card under their button instead of an inline list, so opening one never moves the rest of the menu. */ .world-menu nav{gap:8px} .world-menu nav a,.world-industries--menu .world-industries-toggle{font-size:clamp(26px,min(3.2vw,4.6vh),40px)} .world-industries--menu .world-industries-list{ position:absolute;left:0;top:calc(100% + 8px);z-index:3;min-width:max-content;margin:0;padding:8px;border:0;border-radius:14px; background:#fffbf2;box-shadow:inset 0 0 0 1px rgb(30 30 26 / .1),0 18px 40px -16px rgb(30 30 26 / .38); } .world-industries--menu .world-industries-list a[href]{padding:9px 12px;border-radius:10px;font-size:17px;line-height:1.3;letter-spacing:-.01em;text-decoration:none;transition:background-color .2s} .world-industries--menu .world-industries-list a[href]:hover{background:#ffd700;text-decoration:none} .world-industries--menu.is-open .world-industries-list{animation:world-industries-in .18s cubic-bezier(.2,.7,.2,1)} @media (prefers-reduced-motion:reduce){.world-industries--menu.is-open .world-industries-list{animation:none}} /* Ask Superstrate's "still loading" note (3 October 2026, owner; world/chrome.js). Shown beside the clicked link while Aura has not loaded: one at a time, ink ground and ivory type with a hairline and a soft shadow so it reads on the noise black and on cream alike. Fixed and on top; it moves only itself (a short fade and rise), never an ancestor. data-side is where it sits relative to the link; the arrow points back at the link (--world-ask-tip-ax / -ay). */ .world-ask-tip{position:fixed;left:0;top:0;z-index:2147483000;box-sizing:border-box;max-width:min(260px,calc(100vw - 16px));padding:10px 13px;border:1px solid rgba(246,243,236,.16);border-radius:10px;background:#1c1b1f;color:#f6f3ec;box-shadow:0 12px 30px -12px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.18);font:500 13.5px/1.42 var(--ff-body,'DM Sans',sans-serif);letter-spacing:0;text-align:left;text-transform:none;white-space:normal;pointer-events:none;visibility:hidden;opacity:0;transform:translate3d(var(--world-ask-tip-dx,0),var(--world-ask-tip-dy,4px),0);transition:opacity .16s ease,transform .22s cubic-bezier(.16,1,.3,1),visibility 0s linear .22s;text-wrap:balance} .world-ask-tip.is-on{visibility:visible;opacity:1;transform:none;transition:opacity .16s ease,transform .22s cubic-bezier(.16,1,.3,1),visibility 0s} .world-ask-tip[data-side="bottom"]{--world-ask-tip-dy:-4px} .world-ask-tip[data-side="right"]{--world-ask-tip-dx:-4px;--world-ask-tip-dy:0px} .world-ask-tip[data-side="left"]{--world-ask-tip-dx:4px;--world-ask-tip-dy:0px} .world-ask-tip-arrow{position:absolute;width:10px;height:10px;box-sizing:border-box;background:#1c1b1f;border:1px solid rgba(246,243,236,.16);transform:rotate(45deg)} .world-ask-tip[data-side="top"] .world-ask-tip-arrow{left:calc(var(--world-ask-tip-ax,50%) - 5px);bottom:-6px;border-top-color:transparent;border-left-color:transparent} .world-ask-tip[data-side="bottom"] .world-ask-tip-arrow{left:calc(var(--world-ask-tip-ax,50%) - 5px);top:-6px;border-right-color:transparent;border-bottom-color:transparent} .world-ask-tip[data-side="right"] .world-ask-tip-arrow{top:calc(var(--world-ask-tip-ay,50%) - 5px);left:-6px;border-top-color:transparent;border-right-color:transparent} .world-ask-tip[data-side="left"] .world-ask-tip-arrow{top:calc(var(--world-ask-tip-ay,50%) - 5px);right:-6px;border-bottom-color:transparent;border-left-color:transparent} @media (prefers-reduced-motion:reduce){.world-ask-tip,.world-ask-tip.is-on{transform:none;transition:none}}