/* ═══════════════════════════════════════════════════════════════════════ ro-youth26 — "still point" The mark holds still. Everything else moves, and smears while it does. One stylesheet, one behaviour file, no build step, no framework. ═══════════════════════════════════════════════════════════════════════ */ :root{ /* Ground: warm near-black, so the concrete-grey photography sits on it instead of fighting a blue-black. */ --bg: #0A0A09; --bg-2: #100F0E; --line: #232120; --line-2: #34312E; --fg: #EFEDE8; /* near-white, never pure */ --fg-2: #A19C93; --fg-3: #8A8478; /* The one accent, sampled off the mark. It lives on things you can press and nowhere else. */ --amber: #F5A21A; --amber-2: #E07C00; /* Amber as a fill and amber as text are not the same colour once the ground turns to paper: #F5A21A on white is unreadable. Fills keep --amber; every run of amber TEXT uses --amber-t, which darkens in light mode. */ --amber-t: var(--amber); --amber-2t: var(--amber-2); /* Rating stars are the one non-pressable place the accent appears: a star row in any other colour stops reading as a rating. Chunky glyphs carry #F5A21A on near-black; on paper they drop to the deeper amber. */ --star: var(--amber); /* Composed against the ground, so they have to move with it. */ --bg-rgb: 10 10 9; /* the ground, for scrims and fades */ --ink-rgb: 239 237 232; /* the ink, for hairlines and hover washes */ --shade: 0 0 0 / .55; /* the vignette behind the mark */ --hero-rgb: 10 10 9; /* the hero is a dark photographic block in BOTH modes — amber on a bright aerial is unreadable */ --hero-foot: var(--bg); /* dark: the block dissolves into the page */ --mark-shadow: 0 14px 40px rgb(0 0 0 / .85); /* On near-black the photographs are held back so the mark leads. On paper that same treatment just reads as faded, so they come back up. */ --city-op: .56; --rail-op: .78; --card-op: .86; --card-sat: .78; --thumb-op: .62; --thumb-filter: grayscale(1) contrast(1.03); --d1: clamp(2.55rem, 7.6vw, 5.5rem); --d2: clamp(1.65rem, 3.1vw, 2.6rem); --gut: clamp(20px, 5vw, 68px); --max: 1220px; --ease: cubic-bezier(.22,.61,.36,1); --rail-h: 152px; } /* Warm paper, not white — it sits with the concrete greys in the photography the same way the near-black does. Dark stays the default identity; the header toggle switches and remembers. To follow the visitor's OS instead, change the inline script in to read prefers-color-scheme. */ :root[data-theme="light"]{ --bg: #F2F0EA; --bg-2: #FBFAF7; --line: #DFDBD2; --line-2: #C9C3B6; --fg: #16140F; --fg-2: #5C574D; --fg-3: #6D6860; --amber-t: #9A5400; --amber-2t: #96520A; --star: #E07C00; --bg-rgb: 242 240 234; --ink-rgb: 22 20 15; --rail-op: 1; --card-op: 1; --card-sat: .92; --thumb-op: .8; --thumb-filter: grayscale(1) contrast(1.02); /* light: the block just ends, rather than fading into paper */ --hero-foot: rgb(10 10 9 / .88); } /* The hero keeps its own ink whatever the page is doing around it. */ :root[data-theme="light"] .hero{ --fg: #F3F1EC; --fg-2: #B6B1A7; --fg-3: #948E84; --line-2: rgb(243 241 236 / .3); --amber-t: var(--amber); --ink-rgb: 243 241 236; color:var(--fg); } /* …and so does the header, for as long as it is sitting over the hero. */ :root[data-theme="light"].at-top .hdr{ --fg: #F3F1EC; --fg-2: #BDB8AE; --fg-3: #9A948A; --line-2: rgb(243 241 236 / .34); --amber-t: var(--amber); --ink-rgb: 243 241 236; color:var(--fg); } :root[data-theme="light"].at-top .hdr-blur::after{ background:linear-gradient(to bottom,rgb(10 10 9 / .5),transparent); } :root{color-scheme:dark} :root[data-theme="light"]{color-scheme:light} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--fg); font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-variation-settings:"wdth" 100; font-size:1rem; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{display:block;max-width:100%;height:auto} /* A class that sets display (e.g. .rv-form's grid) outweighs the UA's [hidden]{display:none}, so hidden quietly stops working. Make it law. */ [hidden]{display:none !important} h1,h2,h3,p,ol,dl,dd,dt,figure{margin:0} ol{list-style:none;padding:0} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} .filters{position:absolute;width:0;height:0;overflow:hidden} :where(a,button,[tabindex]):focus-visible{ outline:2px solid var(--amber-t); outline-offset:3px; border-radius:2px; } .skip{ position:fixed;top:8px;left:8px;z-index:99; transform:translateY(-160%); background:var(--amber);color:#140D00;padding:9px 15px;border-radius:3px; font-weight:600;font-size:.875rem; } .skip:focus{transform:none} .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)} /* ── the technical voice ─────────────────────────────────────────────── */ .sheet,.card-id,.seq-no,.scope-no,.hdr-call,.chip,.figures dd, .brief-facts p,.ftr-brand,.ftr-mid,.ftr-soc{ font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; } .sheet,.card-id,.ftr-brand,.ftr-mid{ font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase; } /* ═══════════════════════════════════════════════════ HEADER ═════════ */ /* react-bits GradualBlur (vendor/reactbits/GradualBlur.*) ships five stacked backdrop-filter layers. Measured here, four of them cost 14ms a frame while scrolling — more than everything else on the page put together. One layer with the same mask ramp gets the same read for a quarter of the work. */ .hdr-blur{ position:fixed;inset:0 0 auto 0;height:118px;z-index:38; pointer-events:none;isolation:isolate; backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px); -webkit-mask-image:linear-gradient(to top,transparent 0%,#000 52%,#000 100%); mask-image:linear-gradient(to top,transparent 0%,#000 52%,#000 100%); } .hdr-blur::after{ content:"";position:absolute;inset:0; background:linear-gradient(to bottom,rgb(var(--bg-rgb) / .5),transparent); } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .hdr-blur{background:linear-gradient(to bottom,var(--bg) 34%,transparent)} } .hdr{ position:fixed;inset:0 0 auto 0;z-index:40;color:var(--fg); display:flex;align-items:center;gap:12px; height:64px;padding-inline:var(--gut); } .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.8125rem;letter-spacing:.11em} .brand img{width:26px;height:37px} .hdr-nav{display:flex;gap:26px;margin-left:auto;margin-right:12px;font-size:.875rem;color:var(--fg-2)} .hdr-nav a{position:relative;padding-block:4px;transition:color .2s} .hdr-nav a::after{ content:"";position:absolute;left:0;right:100%;bottom:0;height:1px; background:var(--amber);transition:right .3s var(--ease); } .hdr-nav a:hover{color:var(--fg)} .hdr-nav a:hover::after{right:0} .hdr-theme{ display:grid;place-items:center; width:34px;height:34px;border-radius:999px; border:1px solid var(--line-2);color:var(--fg-2); margin-left:auto; transition:border-color .22s,color .22s; } .hdr-nav ~ .hdr-theme{margin-left:0} .hdr-theme:hover{border-color:var(--fg-3);color:var(--fg)} .hdr-theme svg{width:16px;height:16px} .hdr-theme .i-sun{display:none} :root[data-theme="light"] .hdr-theme .i-sun{display:block} :root[data-theme="light"] .hdr-theme .i-moon{display:none} .hdr-call{ display:flex;align-items:center;gap:8px; font-size:.75rem;letter-spacing:.06em; border:1px solid var(--line-2);border-radius:999px;padding:7px 15px; transition:border-color .22s,color .22s; } .hdr-call .dot{width:5px;height:5px;border-radius:50%;background:var(--amber)} .hdr-call:hover{border-color:var(--amber-t);color:var(--amber-t)} /* ═══════════════════════════════════════════════════════ HERO ═══════ */ /* One screen: the city, the mark, and a rail of facts along the bottom. The mark is the only centred thing — everything else is anchored to an edge, so the hero reads as a frame rather than as a stack. */ .hero{ position:relative; width:100vw;margin-left:calc(50% - 50vw); height:min(94svh,940px);min-height:520px; display:grid;grid-template-rows:1fr auto; } .city{position:absolute;inset:0;display:block} .city img{ width:100%;height:100%;object-fit:cover;object-position:50% 46%; opacity:var(--city-op);filter:saturate(.5) contrast(1.06); } .hero::after{ content:"";position:absolute;inset:0;pointer-events:none; background: linear-gradient(to bottom, rgb(var(--hero-rgb) / .6) 0%, rgb(var(--hero-rgb) / .06) 24%, rgb(var(--hero-rgb) / .5) 62%, var(--hero-foot) 97%), radial-gradient(56% 44% at 50% 42%, rgb(var(--shade)), transparent 74%); } .hero-mid{position:relative;z-index:2;display:grid;place-items:center;padding-top:64px} .mark{display:block} .mark img{ height:clamp(130px,18vw,260px);width:auto; filter:drop-shadow(var(--mark-shadow)); } .brief{ position:relative;z-index:2; max-width:var(--max);width:100%;margin-inline:auto; padding:20px var(--gut) clamp(24px,3.6vh,38px); display:grid;align-items:center;gap:18px 44px; grid-template-columns:minmax(0,.78fr) minmax(0,1.1fr) auto; } .brief::before{ content:"";position:absolute;left:var(--gut);right:var(--gut);top:0; height:1px;background:var(--line-2); } .brief-say{ font-size:clamp(1.0625rem,1.55vw,1.375rem);line-height:1.18;font-weight:700; font-variation-settings:"wdth" 108;letter-spacing:-.018em;max-width:15ch; } .js .words .w{opacity:0;display:inline-block} .js .words.in .w{animation:rise .55s var(--ease) calc(var(--i,0) * 62ms + 90ms) both} .brief-facts{display:grid;gap:5px} .brief-facts p{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase; color:var(--fg-3);line-height:1.5; } .brief-facts p:first-child{color:var(--fg-2)} .brief-do{display:flex;gap:10px;justify-self:end} .btn{ display:inline-flex;align-items:center; padding:11px 20px;border-radius:3px; font-size:.8125rem;font-weight:600;letter-spacing:.005em;white-space:nowrap; border:1px solid var(--line-2); transition:border-color .22s,background .22s,color .22s; } .btn:hover{border-color:var(--fg-3);background:rgb(var(--ink-rgb) / .07)} .btn--a{background:var(--amber);border-color:var(--amber);color:#140D00} .btn--a:hover{background:var(--amber-2);border-color:var(--amber-2);color:#140D00} /* the strip, its own band under the city -------------------------- */ html:not(.js) .railband{display:none} .railband{ width:100%;height:var(--rail-h); margin-block:clamp(18px,4vh,52px) clamp(20px,4.5vh,58px); /* fade at the ends so the strip dissolves into the ground */ -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent); } .rail-blur{ width:100%;height:100%; overflow:hidden; /* clip first: see js/roy26.js, RAIL */ filter:url(#smear); } .rail-track{ display:flex;gap:14px;height:100%;width:max-content; will-change:transform; } .rail-track figure{ position:relative;flex:0 0 auto;height:100%;aspect-ratio:4/3; border-radius:2px;overflow:hidden; box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb) / .12); } .rail-track img{width:100%;height:100%;object-fit:cover;opacity:var(--rail-op)} /* ═══════════════════════════════════════════════════════ BANDS ═════ */ .band{padding-block:clamp(66px,11.5vh,164px);border-top:1px solid var(--line)} .band--raise{background:var(--bg-2)} .sheet{color:var(--fg-3);margin-bottom:clamp(28px,5vh,58px)} .sheet b{color:var(--amber-t);font-weight:500;margin-right:10px} .head{ display:grid;gap:18px 72px; grid-template-columns:minmax(0,1fr) minmax(0,.78fr); align-items:end; margin-bottom:clamp(38px,6.5vh,84px); } .h2{ font-size:var(--d2);line-height:1.06;font-weight:700; font-variation-settings:"wdth" 108;letter-spacing:-.015em;max-width:19ch; } .say{color:var(--fg-2);font-size:clamp(.9375rem,.4vw + .82rem,1.0625rem);line-height:1.62;max-width:46ch} /* ═══════════════════════════════════════════════════ REVIEWS ══════ */ /* Google-style review cards in this page's voice: hairline boxes on the raised ground, the technical mono for names of things, and the accent only on the stars and the one pressable. */ /* A star row drawn from one custom property: grey glyphs underneath, an amber layer clipped to --s fifths on top. Works static, no JS, and a fractional average just clips inside a glyph the way Google's does. */ .stars{ position:relative;display:inline-block;line-height:1; font-size:.9375rem;letter-spacing:2px;white-space:nowrap; } .stars::before{content:"★★★★★";color:var(--line-2)} .stars::after{ content:"★★★★★";position:absolute;inset:0;overflow:hidden; width:calc(var(--s,5) / 5 * 100%);color:var(--star); } .rev-sum{ display:flex;align-items:center;gap:16px 22px;flex-wrap:wrap; border-top:1px solid var(--line); padding-top:clamp(22px,3vh,34px);margin-bottom:clamp(28px,4.4vh,52px); } .rev-avg{ font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500; font-size:clamp(1.9rem,3vw,2.5rem);line-height:1;letter-spacing:-.02em; } .rev-meta{display:grid;gap:7px} .rev-meta .stars{font-size:.8125rem} .rev-n{color:var(--fg-3);font-size:.8125rem;line-height:1.4} .rev-sum .btn{margin-left:auto} .revs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)} .rev{ display:grid;gap:13px;align-content:start; background:var(--bg-2);border:1px solid var(--line);border-radius:3px; padding:clamp(18px,2vw,26px); } .rev header{display:flex;align-items:center;gap:12px} .rev-ava{ flex:0 0 auto;width:38px;height:38px;border-radius:50%; display:grid;place-items:center; font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.8125rem; color:var(--fg-2);border:1px solid var(--line-2); background:rgb(var(--ink-rgb) / .04); } .rev-who{display:grid;gap:2px;line-height:1.3;min-width:0} .rev-who b{font-size:.9375rem;font-weight:600;letter-spacing:-.01em} .rev-who span{color:var(--fg-3);font-size:.75rem} .rev-row{display:flex;align-items:center;gap:12px} .rev-row time{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase; color:var(--fg-3); } .rev-txt{color:var(--fg-2);font-size:.9375rem;line-height:1.62} @media (max-width:1000px){ .revs{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:680px){ .revs{grid-template-columns:1fr} .rev-sum .btn{flex:1 1 100%;justify-content:center;margin-left:0} } /* ═══════════════════════════════════════════════════ SEQUENCE ═════ */ .seq-track{ display:grid;grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); } .seq-tab{ position:relative;text-align:left; padding:clamp(18px,2.2vh,26px) 18px clamp(20px,2.4vh,28px) 0; display:flex;flex-direction:column;gap:5px; color:var(--fg-3);transition:color .25s; } .seq-tab:hover{color:var(--fg-2)} .seq-tab.is-on{color:var(--fg)} .seq-no{font-size:.6875rem;letter-spacing:.15em} .seq-tab.is-on .seq-no{color:var(--amber-t)} .seq-nm{font-size:.9375rem;font-weight:600;letter-spacing:-.01em} .seq-fill{ position:absolute;left:0;top:-1px;height:1px;width:100%; background:var(--line-2); transform-origin:left; } .seq-tab.is-on .seq-fill{background:var(--amber);animation:fill var(--dwell,3400ms) linear forwards} .seq-tab.is-on .seq-fill.no-anim{animation:none;transform:scaleX(1)} @keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}} .seq-panels{margin-top:clamp(26px,4.4vh,54px)} .seq-panel[hidden]{display:none} .seq-say{color:var(--fg-2);font-size:clamp(.9375rem,.4vw + .82rem,1.0625rem);line-height:1.62;max-width:52ch;margin-bottom:clamp(24px,3.4vh,38px)} .strip{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.2vw,18px)} .strip figure{ border-radius:2px;overflow:hidden; box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb) / .12); opacity:0;filter:blur(16px);transform:translateX(22px); } .seq-panel.is-on .strip figure{ animation:land .58s var(--ease) forwards; animation-delay:calc(var(--i,0) * 52ms); } @keyframes land{to{opacity:1;filter:blur(0);transform:none}} .strip img{width:100%;height:100%;object-fit:cover} /* ══════════════════════════════════════════════════════ SCOPE ═════ */ .scope{border-top:1px solid var(--line)} .scope li{ display:grid; grid-template-columns:56px minmax(0,11rem) minmax(0,1fr) 96px; gap:32px;align-items:center; padding:clamp(22px,2.8vh,36px) 0;border-bottom:1px solid var(--line); transition:background .28s; } .scope li:hover{background:rgb(var(--ink-rgb) / .03)} .scope-no{font-size:.6875rem;letter-spacing:.15em;color:var(--fg-3)} .scope-nm{font-size:1.0625rem;font-weight:600;letter-spacing:-.012em} .scope-sy{color:var(--fg-2);font-size:clamp(.9375rem,.4vw + .82rem,1.0625rem);line-height:1.6} .scope-im{ border-radius:2px;overflow:hidden;line-height:0; box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb) / .12); filter:var(--thumb-filter);opacity:var(--thumb-op); transition:filter .32s,opacity .32s; } .scope li:hover .scope-im{filter:none;opacity:1} .scope-im img{width:100%;height:72px;object-fit:cover} /* ═══════════════════════════════════════════════════════ STANDARD ═══ */ /* react-bits TrueFocus (vendor/reactbits/TrueFocus.*), re-costumed and ported off motion/react. Upstream: green border, a coloured glow, an interval that runs from mount. Here: amber corners with no glow — light behind type is a smudge — the frame moves on a CSS transition, and the cycle only starts once the band is actually scrolled into view. */ .focus{ position:relative; display:flex;flex-wrap:wrap;justify-content:center;align-items:center; gap:.1em .55em; padding:clamp(34px,6.5vh,86px) 0 clamp(30px,5.5vh,70px); user-select:none; } .focus-word{ font-size:clamp(2.3rem,6.4vw,4.6rem);line-height:1;font-weight:700; font-variation-settings:"wdth" 112;letter-spacing:-.02em; color:var(--fg);cursor:default; transition:filter .5s var(--ease),color .5s var(--ease); } .js .focus-word{filter:blur(var(--b,5px));color:var(--fg-2)} .js .focus-word.is-on{--b:0px;color:var(--fg)} .focus-frame{ position:absolute;left:0;top:0;width:0;height:0; pointer-events:none;opacity:0; transition:transform .5s var(--ease),width .5s var(--ease), height .5s var(--ease),opacity .35s var(--ease); } .focus-frame.is-on{opacity:1} .focus-frame i{position:absolute;width:15px;height:15px;border:2px solid var(--amber-t)} .focus-frame i:nth-child(1){top:-11px;left:-11px;border-right:0;border-bottom:0} .focus-frame i:nth-child(2){top:-11px;right:-11px;border-left:0;border-bottom:0} .focus-frame i:nth-child(3){bottom:-11px;left:-11px;border-right:0;border-top:0} .focus-frame i:nth-child(4){bottom:-11px;right:-11px;border-left:0;border-top:0} .notes{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 72px;border-top:1px solid var(--line);padding-top:clamp(26px,3.4vh,42px); } .notes p{color:var(--fg-2);font-size:clamp(.9375rem,.4vw + .82rem,1.0625rem);line-height:1.62;max-width:40ch} .notes b{ display:block;font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase; color:var(--fg-3);font-weight:400;margin-bottom:6px; } /* ═══════════════════════════════════════════════════ REGISTER ═════ */ .filters-row{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(28px,4.2vh,50px)} .chip{ font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase; padding:7px 13px;border-radius:999px; border:1px solid var(--line-2);color:var(--fg-2); transition:border-color .22s,color .22s,background .22s; } .chip b{font-weight:400;color:var(--fg-3);margin-left:6px} .chip:hover{border-color:var(--fg-3);color:var(--fg)} .chip.is-on{border-color:var(--amber-t);color:var(--amber-t)} .chip.is-on b{color:var(--amber-2t)} .reg{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2.2vw,32px) clamp(14px,1.8vw,24px)} .card{transition:opacity .34s var(--ease),filter .34s var(--ease),transform .34s var(--ease)} .card.out{opacity:0;filter:blur(14px);transform:translateY(10px) scale(.985);pointer-events:none} .card.gone{display:none} .card-im{ display:block;border-radius:2px;overflow:hidden;line-height:0;margin-bottom:10px; box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb) / .12); } .card-im img{ width:100%;height:auto;aspect-ratio:4/3;object-fit:cover; opacity:var(--card-op);filter:saturate(var(--card-sat)); /* one colour here, and it is the mark's */ transition:opacity .3s,filter .3s; } .card:hover .card-im img{opacity:1;filter:none} .card-id{display:block;color:var(--amber-2t);margin-bottom:5px;font-size:.6875rem} .card h3{font-size:.875rem;font-weight:600;letter-spacing:-.012em;margin-bottom:3px} .card p{color:var(--fg-3);font-size:.75rem;line-height:1.4} .reg-empty{color:var(--fg-3);font-size:.9375rem;padding-block:28px} .figures{ display:grid;grid-template-columns:repeat(4,1fr);gap:28px 40px; margin-top:clamp(46px,7.5vh,96px); border-top:1px solid var(--line);padding-top:clamp(28px,3.6vh,44px); } .figures dd{font-size:clamp(1.6rem,3vw,2.3rem);line-height:1;letter-spacing:-.02em;margin-bottom:9px} .figures dt{order:2;color:var(--fg-3);font-size:.8125rem;line-height:1.35;max-width:22ch} .figures div{display:flex;flex-direction:column} /* ════════════════════════════════════════════════════ CONTACT ═════ */ .routes{border-top:1px solid var(--line)} .route{ display:flex;align-items:baseline;gap:20px;flex-wrap:wrap; padding:clamp(24px,3.4vh,44px) 0;border-bottom:1px solid var(--line); transition:padding-left .3s var(--ease),color .22s; } .route b{font-size:clamp(1.125rem,2vw,1.5rem);font-weight:700;letter-spacing:-.015em} .route span{color:var(--fg-3);font-size:.875rem;margin-left:auto} .route:hover{padding-left:14px;color:var(--amber-t)} .route:hover span{color:var(--fg-2)} /* ═════════════════════════════════════════════════════ FOOTER ═════ */ .ftr{border-top:1px solid var(--line);padding-block:clamp(28px,3.4vh,44px);color:var(--fg-3)} .ftr-grid{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px 28px} .ftr-brand{display:flex;align-items:center;gap:9px;color:var(--fg-2)} .ftr-brand img{width:22px;height:32px;opacity:.85} .ftr-mid{text-align:center;font-size:.625rem;letter-spacing:.12em} .ftr-soc{display:flex;gap:18px;justify-self:end;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase} .ftr-soc a{transition:color .2s} .ftr-soc a:hover{color:var(--amber-t)} /* ════════════════════════════════════════════ REVEAL GRAMMAR ═════ */ /* Everything on this page arrives the same way it moves: out of focus, into focus. Ported from react-bits BlurText, one-shot per element. */ .js .reveal{opacity:0} .js .reveal.in{animation:rise .6s var(--ease) var(--d,0ms) both} @keyframes rise{ from{opacity:0;filter:blur(11px);transform:translateY(16px)} to {opacity:1;filter:blur(0); transform:none} } /* ═══════════════════════════════════════════════════ RESPONSIVE ═══ */ @media (max-width:1180px){ .reg{grid-template-columns:repeat(4,1fr)} } @media (max-width:1000px){ .reg{grid-template-columns:repeat(3,1fr)} .figures{grid-template-columns:repeat(2,1fr);gap:20px 24px} .head{grid-template-columns:1fr;gap:14px;align-items:start} .h2{max-width:22ch} } @media (max-width:760px){ :root{--rail-h:116px} .hero{height:auto;min-height:min(90svh,760px)} .hero-mid{padding-top:clamp(72px,14vh,124px)} .brief{grid-template-columns:1fr;gap:15px;padding-top:18px} .brief-say{max-width:none;font-size:1.1875rem} .brief-facts p{letter-spacing:.1em} .brief-do{justify-self:stretch;flex-wrap:wrap} .brief-do .btn{flex:1 1 auto;justify-content:center;min-width:0} .notes{grid-template-columns:1fr;gap:16px} .hdr-nav{display:none} .ftr-grid{grid-template-columns:1fr;justify-items:start} .ftr-mid{text-align:left} .ftr-soc{justify-self:start} .hdr-theme{margin-left:auto} .strip{grid-template-columns:repeat(3,1fr);gap:9px} .seq-track{grid-template-columns:repeat(2,1fr)} .seq-tab{padding:14px 14px 16px 0} .seq-fill{width:calc(100% - 8px)} .scope li{ grid-template-columns:38px minmax(0,1fr) 64px; grid-template-areas:"no nm im" "no sy im"; gap:4px 16px;align-items:center; } .scope-no{grid-area:no;align-self:start;padding-top:5px} .scope-nm{grid-area:nm} .scope-sy{grid-area:sy;font-size:.875rem} .scope-im{grid-area:im} .scope-im img{height:48px} .route span{margin-left:0;flex-basis:100%} } @media (max-width:640px){ .reg{grid-template-columns:repeat(2,1fr)} } /* ═════════════════════════════════════════════ REDUCED MOTION ═════ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important; } .js .reveal,.js .words .w{opacity:1;filter:none;transform:none;animation:none} .focus-word{filter:none;color:var(--fg)} .focus-frame{display:none} .strip figure{opacity:1;filter:none;transform:none} .rail-blur{filter:none} .card.out{opacity:1;filter:none;transform:none} } /* ═══════════════════════════════════════════════════ PORTFOLIO ═════ */ /* The record pages and the register index. Same ground, same technical voice, same blur-in; a photographic block at the top like the homepage, then plain bands of text and photographs. */ .rec{ position:relative;width:100vw;margin-left:calc(50% - 50vw); min-height:clamp(430px,64svh,640px); display:grid;align-items:end;padding-top:64px; } .rec-img{position:absolute;inset:0;display:block} .rec-img img{width:100%;height:100%;object-fit:cover;opacity:var(--city-op);filter:saturate(.55) contrast(1.05)} .rec::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to bottom, rgb(var(--hero-rgb) / .68) 0%, rgb(var(--hero-rgb) / .16) 30%, rgb(var(--hero-rgb) / .8) 78%, var(--hero-foot) 99%); } /* the block keeps its own ink in light mode, like the homepage hero */ :root[data-theme="light"] .rec{ --fg:#F3F1EC; --fg-2:#B6B1A7; --fg-3:#948E84; --line-2:rgb(243 241 236 / .3); --amber-t:var(--amber); --ink-rgb:243 241 236; color:var(--fg); } .rec-in{position:relative;z-index:2;padding-block:clamp(28px,5vh,56px)} .rec-back{ display:inline-flex;align-items:center;gap:9px; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase; color:var(--fg-2);margin-bottom:clamp(20px,4vh,40px);transition:color .2s; } .rec-back:hover{color:var(--amber-t)} .rec-meta{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase; color:var(--fg-3);margin-bottom:12px; } .rec-meta b{color:var(--amber-t);font-weight:500;margin-right:10px} .rec-title{ font-size:clamp(2rem,4.6vw,3.5rem);line-height:1.02;font-weight:700; font-variation-settings:"wdth" 110;letter-spacing:-.02em;max-width:18ch; } .rec-say{ margin-top:14px;max-width:50ch;color:var(--fg-2); font-size:clamp(.9375rem,.4vw + .82rem,1.0625rem);line-height:1.6; } .rec-facts{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 32px; margin-top:clamp(24px,4vh,40px);border-top:1px solid var(--line-2); padding-top:clamp(16px,2.4vh,24px); } .rec-facts dt{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.625rem;letter-spacing:.15em;text-transform:uppercase; color:var(--fg-3);margin-bottom:5px; } .rec-facts dd{font-size:.875rem;line-height:1.4;color:var(--fg)} /* the spec sheet: dotted leaders, the way a schedule reads */ .spec{border-top:1px solid var(--line)} .spec>div{ display:grid;grid-template-columns:minmax(0,13rem) minmax(24px,1fr) minmax(0,auto); gap:0 18px;align-items:baseline; padding:clamp(16px,2.2vh,24px) 0;border-bottom:1px solid var(--line); } .spec dt{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3); } .spec i{border-bottom:1px dotted var(--line-2);transform:translateY(-5px)} .spec dd{text-align:right;max-width:62ch;font-size:.9375rem;line-height:1.5} /* the story */ .stories{display:grid;gap:clamp(28px,4.4vh,54px)} .story{display:grid;grid-template-columns:58px minmax(0,1fr);gap:0 22px;align-items:start} .story-no{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.6875rem;letter-spacing:.15em;color:var(--amber-t);padding-top:.45em; } .story h3{ font-size:clamp(1.125rem,1.9vw,1.5rem);font-weight:700;letter-spacing:-.015em; font-variation-settings:"wdth" 106;margin-bottom:12px; } .story p{ color:var(--fg-2);max-width:62ch; font-size:clamp(.9375rem,.4vw + .82rem,1.0625rem);line-height:1.65; } .story p + p{margin-top:12px} /* scope delivered */ .checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;border-top:1px solid var(--line)} .checks li{ display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px; padding:clamp(14px,1.9vh,20px) 0;border-bottom:1px solid var(--line); color:var(--fg-2);font-size:.9375rem;line-height:1.55; } .checks li::before{content:"";width:6px;height:6px;background:var(--amber-t);margin-top:.58em;border-radius:1px} /* site photography */ .gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)} .gal figure{display:grid;gap:9px} .gal picture{ display:block;border-radius:2px;overflow:hidden;line-height:0; box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb) / .12); } .gal img{ width:100%;height:auto;aspect-ratio:4/3;object-fit:cover; opacity:var(--card-op);filter:saturate(var(--card-sat)); transition:opacity .3s,filter .3s; } .gal figure:hover img{opacity:1;filter:none} .gal figcaption{color:var(--fg-3);font-size:.75rem;line-height:1.4} /* register index */ .reg-top{border-top:0;padding-top:clamp(118px,15vh,186px)} .reg--wide{grid-template-columns:repeat(3,minmax(0,1fr))} .reg--wide .card-im{margin-bottom:12px} .card-say{color:var(--fg-3);font-size:.8125rem;line-height:1.5;margin-top:8px;max-width:44ch} .reg .card{align-content:start} @media (max-width:1000px){ .gal{grid-template-columns:repeat(3,minmax(0,1fr))} .reg--wide{grid-template-columns:repeat(2,minmax(0,1fr))} .rec-facts{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:760px){ .rec{min-height:clamp(380px,58svh,520px)} .spec>div{grid-template-columns:1fr;gap:6px} .spec i{display:none} .spec dd{text-align:left} .checks{grid-template-columns:1fr;gap:0} .stories{gap:30px} .story{grid-template-columns:1fr;gap:8px} .story-no{padding-top:0} } @media (max-width:640px){ .gal{grid-template-columns:repeat(2,minmax(0,1fr))} .reg--wide{grid-template-columns:repeat(2,minmax(0,1fr))} .card-say{display:none} } .reg-all{margin-top:clamp(26px,3.6vh,44px)} /* ═══════════════════════════════════════════════ REVIEW PAGE ══════ */ /* review/index.html — the page a client lands on from the link the office sends. One column, letterhead at the top, four inputs, one button. It has to work one-handed on a phone in a site cabin, so: 16px inputs (no iOS zoom), stars big enough for a thumb, and the whole thing under a minute. */ .rv{min-height:100svh;padding:clamp(40px,7vh,84px) var(--gut) clamp(48px,8vh,96px)} .rv-card{width:100%;max-width:600px;margin-inline:auto} .rv-brand{ display:grid;justify-items:center;gap:12px; margin-bottom:clamp(30px,5.5vh,52px);text-align:center; } .rv-brand img{height:74px;width:auto;filter:drop-shadow(0 8px 26px rgb(0 0 0 / .6))} .rv-brand span{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2); } .rv-h1{ font-size:clamp(1.9rem,6vw,2.7rem);line-height:1.05;font-weight:700; font-variation-settings:"wdth" 108;letter-spacing:-.018em; margin-bottom:14px; } .rv-say{color:var(--fg-2);font-size:clamp(.9375rem,.4vw + .82rem,1.0625rem);line-height:1.62;max-width:46ch} .rv-form{display:grid;gap:24px;margin-top:clamp(28px,4.5vh,42px)} .rv-label{ display:block;font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase; color:var(--fg-3);margin-bottom:9px; } .rv-field input,.rv-field textarea{ width:100%;color:var(--fg);font:inherit;font-size:1rem;line-height:1.5; background:rgb(var(--ink-rgb) / .04); border:1px solid var(--line-2);border-radius:3px; padding:13px 14px; transition:border-color .2s,background .2s; } .rv-field input::placeholder,.rv-field textarea::placeholder{color:var(--fg-3);opacity:.8} .rv-field input:focus,.rv-field textarea:focus{ outline:none;border-color:var(--amber-t); background:rgb(var(--ink-rgb) / .06); } .rv-field textarea{resize:vertical;min-height:132px} .rv-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} /* The rating. Radios stay real for the keyboard; the labels draw the stars. DOM runs 5→1 and the row is reversed, so `input:checked ~ label` lights everything to the visual left of the pick. */ .rv-stars{border:0;padding:0;margin:0} .stars-in{display:inline-flex;flex-direction:row-reverse;gap:4px} .stars-in input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .stars-in label{ font-size:2.6rem;line-height:1;padding:2px 5px;cursor:pointer; color:var(--line-2);transition:color .15s;user-select:none; } .stars-in input:checked ~ label, .stars-in input:checked + label{color:var(--star)} .stars-in:hover label{color:var(--line-2)} .stars-in label:hover, .stars-in label:hover ~ label{color:var(--star)} .stars-in input:focus-visible + label{ outline:2px solid var(--amber-t);outline-offset:3px;border-radius:2px; } .rv-stars-say{ display:block;margin-top:8px;min-height:1.3em; color:var(--fg-3);font-size:.8125rem; } .rv-send{width:100%;justify-content:center;padding:15px 20px;font-size:.9375rem} .rv-note{color:var(--fg-3);font-size:.8125rem;line-height:1.65;text-align:center} .rv-note a{ color:var(--fg-2);text-decoration:underline; text-underline-offset:3px;transition:color .2s; } .rv-note a:hover{color:var(--amber-t)} .rv-err{color:var(--amber-t);font-size:.875rem;text-align:center} .rv-done{text-align:center;padding-block:clamp(30px,6vh,54px)} .rv-done .stars{font-size:1.5rem;margin-bottom:20px} .rv-done h2{ font-size:clamp(1.6rem,5vw,2.2rem);font-weight:700; font-variation-settings:"wdth" 108;letter-spacing:-.018em;margin-bottom:12px; } .rv-done>p{color:var(--fg-2);font-size:.9375rem;line-height:1.62;max-width:42ch;margin-inline:auto} .rv-done>p+p{margin-top:16px} .rv-ftr{ margin-top:clamp(36px,7vh,64px);padding-top:22px; border-top:1px solid var(--line);text-align:center; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3); } .rv-ftr a{transition:color .2s} .rv-ftr a:hover{color:var(--amber-t)} @media (max-width:560px){ .rv-two{grid-template-columns:1fr} .stars-in label{font-size:2.3rem;padding:2px 4px} }