/* Thīna · In Stride — css/site.css Tokens, type, layout primitives, the phone (html.m) and reduced-motion (html.reduced) rules, the cursor dot, the nav, the no-WebGL fallback (html.nogl). Section-specific rules live under their own comment. */ /* ---------- tokens (only the brief's colours) ---------- */ :root{ --sand:#EFE6D6; --sand2:#E6D9C3; --cream:#F6F0E4; --esp:#3B2A1C; --esp2:#2A1D12; --umber:#5A4330; --brass:#9C7740; --brassl:#C9A46A; --muted:#665240; --band:#C9B799; --chk-ground:#3B2A1C; --chk-edge:#BB9862; --chk-mid:#917D62; --garment:#D2BF9C; --ink:var(--esp); --ink-70:rgba(59,42,28,.7); --ink-55:rgba(59,42,28,.55); --serif:'Bodoni Moda',Didot,'Bodoni 72',serif; --sans:'Jost','Helvetica Neue',Arial,sans-serif; --arabic:"Noto Naskh Arabic","Segoe UI","Geeza Pro",serif; --gutter:48px; --tile:22px; --u:min(100vw / 1600, 100vh / 900); /* the hero's layout unit (1 px at 1600x900) */ } /* ---------- base ---------- */ *,*::before,*::after{box-sizing:border-box} html{background:var(--sand);-webkit-text-size-adjust:100%;overflow-x:hidden} /* on phones a wider-than-viewport layout would zoom the layout viewport out */ html,body{margin:0;min-height:100%} body{font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.5;color:var(--ink);background:var(--sand); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; user-select:none;-webkit-user-select:none;touch-action:pan-y pinch-zoom;overflow-x:hidden} /* the cloth is not text (press and hold parts it); the words on it are, and can be selected, copied, read aloud or translated */ [data-ink]:not([data-ink="box"]),.ft-link,.ns{user-select:text;-webkit-user-select:text} html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto !important} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain} .lenis.lenis-stopped{overflow:hidden} a{color:inherit;text-decoration:none} a:focus-visible,button:focus-visible,input:focus-visible{outline:1.5px solid var(--esp);outline-offset:4px} .sec:focus{outline:none} /* a section the nav moved the focus to (tabindex -1): no ring on the whole section */ img{display:block;max-width:100%} p,h1,h2,h3{margin:0} input,button,textarea,select{font:inherit;color:inherit} /* the cursor: the system one by default (touch, reduced motion, no WebGL); html.cur (site.js) hides it for the custom dot, and over links, buttons and fields (body.sys, set by the engine) the system cursor returns */ a,button,label,select{cursor:pointer} input,textarea{cursor:text} html.cur body,html.cur a,html.cur button,html.cur label,html.cur select,html.cur input,html.cur textarea{cursor:none} html.cur body.sys{cursor:auto} html.cur body.sys a,html.cur body.sys button,html.cur body.sys label,html.cur body.sys select{cursor:pointer} html.cur body.sys input,html.cur body.sys textarea{cursor:text} .sr{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} /* ---------- the canvas and the content layer ---------- */ canvas#cloth{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none} .content{position:relative;z-index:1} /* ---------- type scale ---------- */ .t-display{font-family:var(--serif);font-weight:400;font-size:128px;font-variation-settings:'opsz' 96;letter-spacing:-.01em;line-height:1} .t-h2{font-family:var(--serif);font-weight:400;font-size:56px;font-variation-settings:'opsz' 56;letter-spacing:-.005em;line-height:1.08} /* its true optical size: one texture for every heading */ .t-h3{font-family:var(--serif);font-weight:400;font-size:32px;font-variation-settings:'opsz' 48;line-height:1.15} .t-body{font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.55} .t-line{font-family:var(--sans);font-weight:300;font-size:16px;letter-spacing:.04em;line-height:1;color:var(--ink-70)} .t-small,.small{font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.18em;text-transform:uppercase;line-height:1;color:var(--ink-70)} /* espresso 70 %: 4.7:1 on sand (AA at 11–12 px) */ .t-num{font-family:var(--sans);font-weight:400;font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:.04em} .t-arabic{font-family:var(--arabic);font-size:15px;direction:rtl;unicode-bidi:isolate} /* ---------- layout primitives ---------- */ .sec{position:relative;width:100%} .sec-full{min-height:100vh;min-height:100svh} .wrap{position:relative;width:100%;max-width:1504px;margin:0 auto;padding:0 var(--gutter)} .ink{color:var(--ink)} /* text is ink laid on the cloth; [data-ink] marks the blocks the stride must not cut */ [data-ink]{position:relative} #footer{z-index:1} /* the hem is the page's footer landmark, outside
, above the canvas like the content */ /* ---------- the nav (fixed, the hero's top-right three words) ---------- */ .nav{position:fixed;top:0;right:calc(48 * var(--u));z-index:5;white-space:nowrap;margin:0;font-size:max(11px, calc(12 * var(--u))); /* scales with the hero's corner labels, as in the pitch, never below 11 px */ transition:opacity .5s ease} html.nav-off .nav{opacity:0;pointer-events:none} /* past the hero, reading down: the nav steps aside (site.js); its links inherit: nothing under the empty corner answers the pointer */ html.nav-off .nav:focus-within{opacity:1;pointer-events:auto} /* tabbing into it brings it back */ html.reduced .nav{transition:none} .nav a{color:inherit;margin-left:calc(40 * var(--u));transition:color .2s ease} .nav a:hover{color:var(--ink)} .nav a:first-child{margin-left:0} .nav a:last-child{margin-right:-.18em} .nav a:focus-visible{outline:1.5px solid var(--esp);outline-offset:4px} /* ---------- the cursor: a 6 px espresso dot with a 1 px cream ring; over the check it turns cream with an espresso ring ---------- */ .dot{position:fixed;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--esp); box-shadow:0 0 0 1px var(--cream);pointer-events:none;opacity:0;will-change:transform;z-index:9} .dot.on{opacity:1} .dot.in{background:var(--cream);box-shadow:0 0 0 1px var(--esp)} body.sys .dot{opacity:0} html.touch body{cursor:auto} html.touch .dot{display:none} /* ---------- the hero (the pitched frame, laid out in 1600x900 design units scaled by --u) ---------- */ #hero{height:100vh;height:100svh;overflow:hidden} .hero-stage{position:absolute;left:50%;top:50%;width:calc(1600 * var(--u));height:calc(900 * var(--u));transform:translate(-50%,-50%); font-size:var(--u);pointer-events:none} .hero-stage > *{position:absolute;margin:0;white-space:nowrap} .hero-stage .mark{left:763.3em;top:44em;width:73.4em;height:38.54em;overflow:visible} .hero-stage .mark path{fill:none;stroke:var(--esp);stroke-width:2.02;stroke-linecap:round} .hero-stage .word{left:714em;top:108.8em;width:172em;height:33.57em;overflow:visible} .hero-stage .word path{fill:var(--esp)} .hero-stage .small{font-size:max(11px, 12em)} /* the corner labels: 12 px at 1600 x 900, never below the site's 11 px floor */ .hero-stage .line,.hero-stage .lab-l,.hero-stage .lab-r{will-change:opacity} /* they fade as the hero leaves (hero.js, desktop) */ .hero-stage h1{left:0;width:100%;text-align:center;font-family:var(--serif);font-weight:400;font-size:128em; font-variation-settings:'opsz' 96;letter-spacing:-.01em;line-height:1;color:var(--esp)} .hero-stage .line{left:0;width:100%;text-align:center;font-weight:300;font-size:max(15px, 16em);letter-spacing:.04em;line-height:1;color:var(--ink-70)} /* never below 15 px (the corner labels have their floor too) */ @media (max-width:1599px),(max-height:899px){ .hero-stage .line{font-weight:350} } /* under 16 px Jost 300 never reaches its ink: a touch more weight */ .hero-stage .lab-l{left:max(calc(48 * var(--u)), calc(env(safe-area-inset-left) + 12px));top:0} .hero-stage .lab-r{right:max(calc(48 * var(--u)), calc(env(safe-area-inset-right) + 12px));top:0} .hero-stage .lab-r span{margin-right:-.18em} /* ---------- the phone (html.m, below 600 css px): the hero's phone design is the reference ---------- */ html.m{--u:1px;--gutter:36px} /* the edge seams ignore exclusions; fully open (a hard flick) they reach x 3–38 and W-31 to W-6 at mid-height, so ink keeps to the 36 px gutter */ html.m .nav{right:24px;font-size:11px} html.m .nav a{margin-left:0;display:inline-block;padding:16px 12px;margin:-16px calc(-12px - .18em) -16px 0} /* a 44 px target, the word where it was */ html.m .nav a:not(:last-child){display:none} html.m .hero-stage{left:0;top:0;width:100%;height:100%;transform:none;font-size:1px} html.m .hero-stage > .mark{left:calc(50% - 24px);top:40px;width:48px;height:25.2px} html.m .hero-stage > .word{left:calc(50% - 56px);top:84.4px;width:112px;height:21.86px} html.m .hero-stage > h1{font-size:68px;line-height:1.1;white-space:normal;padding:0 46px} html.m .hero-stage > .line{font-size:15px} html.m .hero-stage > .small{font-size:11px} html.m .hero-stage > .lab-l,html.m .hero-stage > .lab-r{left:0;right:auto;width:100%;text-align:center} html.m .hero-stage .lab-r span{margin-right:0} html.m .t-display{font-size:68px;line-height:1.1} html.m .t-h2{font-size:40px;font-variation-settings:'opsz' 40} /* the heading's true optical size at 40 px: its hairlines hold at 1x */ html.m .t-h3{font-size:26px} html.m .t-body{font-size:16px} /* ---------- reduced motion: the cloth never moves; the system cursor; native scroll ---------- */ html.reduced .dot{display:none} html.reduced *{scroll-behavior:auto !important} @media (prefers-reduced-motion:reduce){ .dot{display:none} } /* ---------- forced colours (Windows High Contrast): no canvas (site.js treats it as no WebGL); the text sits on the system background ---------- */ @media (forced-colors:active){ canvas#cloth,.dot{display:none} .fb,.name-fb,.ck-fb,.fr-fbx,.wl-fb,.set-fb{forced-color-adjust:auto} } /* ---------- no JavaScript: the copy, plainly (index.html's