/* ============================================================================ service.css — the four service rooms (subpages). ---------------------------------------------------------------------------- The scroll page is a walk past four lit rooms. A subpage is going into one of them and staying. Same building, same lamp, same night — one room. The page runs dark -> stone -> dark: a full-bleed threshold in the room you just clicked, a body on warm stone where the reading happens, and the same door at the close. The light/dark seam lives inside the page rather than at the click, which is what makes it read as one place. Per-service identity is the block at the end: swaps the accent, the ornament and the hero. Everything above it is shared. ========================================================================== */ :root { /* the body: warm stone. Bright enough not to read as dirty paper, deep enough that a dark photograph sits on it as one surface rather than as a rectangle pasted onto a light page. */ --stone: #D2C4AE; --stone-raised: #DDD2C0; --stone-ink: #221A14; --stone-soft: #4E4234; --stone-line: color-mix(in oklab, var(--stone-ink) 18%, transparent); --stone-line-2: color-mix(in oklab, var(--stone-ink) 32%, transparent); --stone-accent: #8A4A15; /* the accent's text stop on stone */ /* the rooms: the scroll page's night, unchanged */ --night: #14100C; --night-ink: #F4ECDF; --night-soft: #A79883; --sc-canvas: var(--stone); --sc-surface: var(--stone-raised); --sc-ink: var(--stone-ink); --sc-ink-soft: var(--stone-soft); --sc-accent: #E9962E; --sc-accent-ink: #14100C; --sc-hairline: var(--stone-line); --sc-hairline-strong: var(--stone-line-2); --sc-font-display: "Jost", "Instrument Sans", system-ui, sans-serif; --sc-track-tight: -0.015em; /* Jost at near-neutral tracking; see page.css */ --sc-font-text: "Instrument Sans", system-ui, sans-serif; --sc-font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace; --sc-shadow-color: 30 30% 12%; --sc-r-sm: 4px; --sc-r-md: 8px; --sc-r-lg: 14px; --warm: #FFD9A8; --lamp: #FFB45C; } @property --lit { syntax: ""; inherits: true; initial-value: 0; } @property --o { syntax: ""; inherits: true; initial-value: 0; } /* ---- back and forward ---------------------------------------------------- */ /* A Back press cannot be delayed by the page: the browser reports the traversal as cancelable:false, canIntercept:false, so there is no way to fade out of a document on the way to one the reader has already seen. The one thing that can is the browser's own cross-document transition, which holds the outgoing page and blends it into the incoming one — a fade out and a fade in at once, and no black in between. It is turned on for traversals ONLY. The page script skips it for a link click, where our own fade to the shared ground is the better move and the one case we actually control. Measured: with the skip in place a link click is frame-for-frame what it was, and a Back press stops flashing black. Browsers without cross-document transitions ignore all of this and keep the instant cut they have today. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 300ms; } /* ======================================================= THE ARRIVAL ===== */ /* Same device as the scroll page, shorter. Nothing here changes the page at rest: every rule lives behind .is-entering / .is-leaving, and the veil is a pseudo-element that does not exist unless one of those classes is on . No JS, no class, no veil — a page can never be left behind one. The veil is --night, not --stone. This document's own ground is the light stone, but the room you arrive in is dark and the page you came from faded out on exactly this colour, so a full navigation between two documents reads as one move. It also covers the stone flash that would otherwise show for a frame before the threshold's photograph is up. */ /* land the anchor rather than travelling to it; see page.css */ html.is-entering { scroll-behavior: auto; } html.is-entering::before, html.is-leaving::before { content: ""; position: fixed; inset: 0; z-index: 2147483646; pointer-events: none; background: var(--night); opacity: var(--enter-veil, 1); } /* The copy's own children carry the cues, so the stagger rides the parent and the cue system is left alone. */ html.is-entering .threshold__copy { opacity: var(--enter-copy, 0); } html.is-entering .threshold__hint { opacity: var(--enter-copy, 0); } html.is-entering .panel { opacity: var(--enter-panel, 0); } html { background: var(--stone); } body { font-weight: 400; } .sc-display { font-weight: 560; font-optical-sizing: auto; } .sc-display--xl { letter-spacing: -0.02em; } .sc-body { font-size: var(--sc-t-base); } strong { font-weight: 600; } :focus-visible { outline-color: var(--stone-accent); } /* -------------------------------------------------------------- the panel -- The scroll page's switch panel, one row per service instead of one per room. Dark-surfaced on both grounds so the chrome does not change identity when the page goes from night to stone. */ .panel { position: fixed; top: 1rem; right: 1rem; z-index: var(--sc-z-chrome); display: flex; align-items: stretch; gap: .6rem; padding: .45rem .55rem .45rem .95rem; background: #1F1913; color: var(--night-ink); border: 1px solid color-mix(in oklab, var(--night-ink) 14%, transparent); border-radius: var(--sc-r-md); box-shadow: var(--sc-e2), inset 0 1px 0 rgba(255,255,255,.08); } /* The mark alone, flat: the kit keeps metal for 64px and up. */ .panel__mark { display: flex; align-items: center; text-decoration: none; padding-right: .8rem; margin-right: .15rem; border-right: 1px solid color-mix(in oklab, var(--night-ink) 14%, transparent); } .panel__mark svg { display: block; width: 1.75rem; height: auto; } .panel__switches { list-style: none; margin: 0; padding: 0; display: flex; gap: .15rem; } .switch { display: flex; flex-direction: column; align-items: center; gap: .18rem; padding: .3rem .5rem .28rem; border-radius: var(--sc-r-sm); text-decoration: none; color: var(--night-soft); min-width: 3.4rem; transition: background 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out); } .switch:hover { background: color-mix(in oklab, var(--night-ink) 7%, transparent); color: var(--night-ink); } .switch:active { transform: translateY(1px); } .switch__rocker { position: relative; width: 15px; height: 21px; border-radius: 3px; background: #0E0B08; border: 1px solid color-mix(in oklab, var(--night-ink) 16%, transparent); overflow: hidden; } .switch__rocker i { position: absolute; left: 1px; right: 1px; bottom: 1px; height: 9px; border-radius: 2px; background: #6B5B47; transition: transform 200ms var(--sc-ease-out), background 200ms var(--sc-ease-out); } .switch.is-on .switch__rocker i { transform: translateY(-9px); background: #C9B08A; } .switch__lamp { width: 5px; height: 5px; border-radius: 50%; background: color-mix(in oklab, var(--night-ink) 20%, transparent); transition: background 200ms var(--sc-ease-out), box-shadow 200ms var(--sc-ease-out); } .switch.is-on .switch__lamp { background: var(--sc-accent); box-shadow: 0 1px 5px 1px color-mix(in oklab, var(--sc-accent) 45%, transparent); } .switch.is-current .switch__lamp { background: #FFC85A; } .switch__label { font-family: var(--sc-font-mono); font-size: .55rem; letter-spacing: .09em; text-transform: uppercase; } .switch.is-on .switch__label { color: var(--night-ink); } .switch.is-current .switch__label { color: #F0B65E; } /* --------------------------------------------------------------- the room -- The light system. Same layers as the scroll page; the resting shade sits at .88 rather than .62 because a subpage is read, not walked through, and a room crushed for dramatic range reads as a building with the power off. */ .room { --lit: 0; --lx: 50; --ly: 50; position: relative; } .room__media { position: absolute; inset: 0; overflow: clip; } .room__media > img, .room__media > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; -webkit-touch-callout: none; user-select: none; filter: brightness(.88) saturate(.94); } .room__warm { position: absolute; inset: 0; pointer-events: none; filter: saturate(1.06) brightness(1.04); opacity: var(--lit); -webkit-mask-image: radial-gradient(circle at calc(var(--lx) * 1%) calc(var(--ly) * 1%), #000 0%, #000 calc(var(--lit) * var(--lit) * 92%), transparent calc(var(--lit) * var(--lit) * 92% + 44%)); mask-image: radial-gradient(circle at calc(var(--lx) * 1%) calc(var(--ly) * 1%), #000 0%, #000 calc(var(--lit) * var(--lit) * 92%), transparent calc(var(--lit) * var(--lit) * 92% + 44%)); } .room__warm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; } .room__tint { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 100% at calc(var(--lx) * 1%) calc(var(--ly) * 1%), rgba(255,172,92,.5) 0%, rgba(255,140,70,.17) 42%, transparent 74%); mix-blend-mode: soft-light; opacity: calc(var(--lit) * .62); } .lamp { position: absolute; left: calc(var(--lx) * 1%); top: calc(var(--ly) * 1%); width: 0; height: 0; pointer-events: none; z-index: 2; } .lamp > i { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: block; border-radius: 50%; mix-blend-mode: screen; will-change: transform, opacity; } /* Pulled back from the scroll page's bloom. These rooms are lit at rest and three of the sources are cool screens; the scroll page's warmer, wider bloom goes milky over a white display instead of reading as light. */ .lamp__bloom { width: 108vmin; height: 108vmin; background: radial-gradient(circle, rgba(255,178,96,.22) 0%, rgba(255,150,72,.09) 30%, transparent 62%); opacity: calc(var(--lit) * var(--lit)); transform: scale(calc(.3 + var(--lit) * 1.1)); } .lamp__core { width: 11vmin; height: 11vmin; background: radial-gradient(circle, rgba(255,242,214,.55) 0%, rgba(255,212,144,.3) 24%, transparent 62%); opacity: calc(.08 + var(--lit) * .62); transform: scale(calc(.5 + var(--lit) * 1.2)); } .room__note { position: absolute; z-index: 20; margin: 0; max-width: 22ch; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); line-height: 1.5; letter-spacing: .01em; color: #E4D3B8; opacity: calc(clamp(0, (var(--lit) - .55) * 3, 1) * .9); text-shadow: 0 1px 14px rgba(0,0,0,.85); transition: opacity 200ms var(--sc-ease-out); } .room__note::before { content: ""; display: inline-block; width: 1.4rem; height: 1px; background: currentColor; vertical-align: middle; margin-right: .5rem; opacity: .7; } .lamp-btn { position: absolute; z-index: 21; width: 34px; height: 34px; padding: 0; background: none; border: 0; cursor: pointer; border-radius: 50%; } .lamp-btn::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: color-mix(in oklab, var(--warm) 70%, transparent); box-shadow: 0 0 12px 3px color-mix(in oklab, var(--lamp) 40%, transparent); transition: transform 220ms var(--sc-ease-out), background 220ms var(--sc-ease-out); } .lamp-btn::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--warm) 45%, transparent); animation: lamp-ring 2.6s ease-out infinite; } @keyframes lamp-ring { 0% { transform: scale(.55); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } } .lamp-btn:hover::before, .lamp-btn:focus-visible::before { transform: scale(1.25); } .lamp-btn[aria-pressed="true"]::before { transform: scale(1.45); background: #FFE6BD; } .lamp-btn[aria-pressed="true"]::after { animation: none; opacity: 0; } .is-holding { cursor: grabbing; } .cta { display: inline-block; padding: .85rem 1.5rem; border-radius: var(--sc-r-sm); background: var(--sc-accent); color: var(--sc-accent-ink); font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-sm); letter-spacing: .01em; text-decoration: none; transition: background 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out); } .cta:hover { background: #FFBE5A; } .cta:active { transform: scale(.97); } /* --------------------------------------------------------- 1 · threshold -- The room you clicked, full bleed, at the light level the scroll page left it at. Copy lower left, light upper right, which is why every hero frame was shot with its source right of centre. */ .threshold__stage { background: var(--night); isolation: isolate; overflow: clip; } /* The top hero, and only the top hero. The photographs are shot after dark and two of the four are genuinely dim — measured on the open right-hand side, where there is no scrim to remove, the raw files run from 33 (education) to 85 (integration) of 255. So the light is turned up rather than the overlay turned down: --lit drives .room__warm, a brighter and more saturated copy of the photograph, and .room__tint, the warm radial. Both were running at about a third. The room's floor moves to 0.85 in each document's markup. The global brightness(.88) saturate(.94) comes off here too — but scoped, so the bench bed and the door keep it and are unchanged. */ .threshold .room__media > img, .threshold .room__media > picture > img { filter: brightness(1) saturate(1.04); } /* The caption is a reward for holding the light up, and at a resting 0.85 the shared curve above would leave it plainly readable before anyone touched anything. Re-aimed at the range the hold still has: nothing at rest, most of the way up at full. The bench and the door keep the shared curve. */ .threshold .room__note { opacity: calc(clamp(0, (var(--lit) - .87) * 7.5, 1) * .9); } .threshold__stage .room__media > img, .threshold__stage .room__media > picture > img { will-change: transform; } .threshold__scrim { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(78deg, rgba(20,16,12,.94) 0%, rgba(20,16,12,.74) 30%, rgba(20,16,12,.18) 58%, transparent 76%), linear-gradient(to top, rgba(20,16,12,.86) 0%, rgba(20,16,12,.3) 30%, transparent 58%); } .threshold__copy { position: absolute; z-index: 20; left: var(--sc-gutter); bottom: clamp(3.5rem, 13vh, 9rem); width: min(46rem, 58vw); color: var(--night-ink); } .threshold__kicker { margin: 0 0 var(--sc-4); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: .14em; text-transform: uppercase; color: #F0B65E; } .threshold__copy h1 { margin: 0; max-width: 15ch; font-size: clamp(2.6rem, 1.7rem + 3.6vw, 4.8rem); } .threshold__copy .sc-lede { margin: var(--sc-5) 0 0; max-width: 40ch; color: #EFE3D2; font-size: var(--sc-t-base); } .threshold__copy .cta { margin-top: var(--sc-6); } .backlink { position: absolute; z-index: 22; left: var(--sc-gutter); top: clamp(1.6rem, 5vh, 3rem); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: .1em; text-transform: uppercase; color: #D8C6AC; text-decoration: none; display: inline-flex; align-items: center; gap: .55rem; text-shadow: 0 1px 12px rgba(0,0,0,.8); } .backlink::before { content: ""; width: 1.6rem; height: 1px; background: currentColor; } .backlink:hover { color: #F0B65E; } .threshold .lamp-btn { left: calc(var(--lx) * 1%); top: calc(var(--ly) * 1%); translate: -50% -50%; } .threshold__hint { position: absolute; z-index: 22; left: var(--sc-gutter); bottom: clamp(1.4rem, 5vh, 2.6rem); margin: 0; font-family: var(--sc-font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: #C7B49A; text-shadow: 0 1px 12px rgba(0,0,0,.8); } .threshold__hint::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--sc-accent); margin-right: .6rem; vertical-align: 1px; } .threshold__hint.is-seen { visibility: hidden; } /* -------------------------------------------------------------- 2 · plate -- The page opens. One breath of type on stone, straight out of the dark room. */ .plate { background: var(--stone); padding-block: clamp(4rem, 9vw, 8rem) clamp(3rem, 6vw, 5rem); } .plate__inner { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); } .plate__mark { margin: 0 0 var(--sc-5); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--stone-accent); } .plate h2 { max-width: 17ch; margin: 0; color: var(--stone-ink); } .plate__rule { margin-top: var(--sc-7); } .plate__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--sc-5) var(--sc-8); margin-top: var(--sc-6); } .plate__cols .sc-body { max-width: 46ch; color: var(--stone-soft); font-size: var(--sc-t-lg); line-height: 1.5; letter-spacing: var(--sc-track-snug); } .plate__cols .sc-body strong { color: var(--stone-ink); font-weight: 600; } /* the bed carries a photograph at a third of the frame, not a room you stand in: the lamp is scaled to the picture, not to the viewport */ .bench__bed .lamp__bloom { width: 46vmin; height: 46vmin; background: radial-gradient(circle, rgba(255,178,96,.12) 0%, rgba(255,150,72,.05) 32%, transparent 62%); } .bench__bed .lamp__core { width: 6vmin; height: 6vmin; background: radial-gradient(circle, rgba(255,242,214,.3) 0%, rgba(255,212,144,.15) 26%, transparent 62%); } .bench__bed .room__tint { opacity: calc(var(--lit) * .34); } /* -------------------------------------------------------------- 3 · bench -- The corridor, mirrored: the bed on the right, the offerings on the left, one open at a time. This is where the sub-sub-pages went. --o is written by service.js, 0 closed to 1 open. */ .bench { background: var(--stone); } .bench__stage { background: var(--stone); overflow: clip; } .bench__bed { position: absolute; inset: 0 0 0 auto; width: 56%; z-index: 0; margin: 0; -webkit-mask-image: linear-gradient(to left, #000 0 40%, rgba(0,0,0,.88) 52%, rgba(0,0,0,.45) 64%, rgba(0,0,0,.12) 74%, transparent 84%); mask-image: linear-gradient(to left, #000 0 40%, rgba(0,0,0,.88) 52%, rgba(0,0,0,.45) 64%, rgba(0,0,0,.12) 74%, transparent 84%); } .bench__bed .room__media { inset: -6% 0; } .bench__bed .room__media > img, .bench__bed .room__warm img { object-position: 76% 50%; } .bench__bed .room__media > img { transform: translate3d(0, calc(var(--bed-y, 0) * 1%), 0); will-change: transform; } .bench__wrap { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); left: 0; right: 0; } .bench__rows { width: min(38rem, 52%); } .bench__lead { margin: 0 0 var(--sc-6); } .bench__lead h2 { margin: 0; color: var(--stone-ink); } .bench__lead p { margin: var(--sc-3) 0 0; color: var(--stone-soft); max-width: 34ch; } .bench__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--stone-line-2); } .bench__row { border-bottom: 1px solid var(--stone-line); padding: calc(var(--sc-4) + var(--o) * .6rem) 0 calc(var(--sc-4) + var(--o) * .4rem); } .bench__num { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: .12em; color: color-mix(in oklab, var(--stone-accent) calc(40% + var(--o) * 60%), transparent); display: block; margin-bottom: .35rem; } .bench__title { margin: 0; font-family: var(--sc-font-display); font-weight: calc(500 + var(--o) * 100); letter-spacing: var(--sc-track-snug); line-height: 1.12; font-size: calc(1.32rem + var(--o) * .78rem); color: color-mix(in oklab, var(--stone-ink) calc(58% + var(--o) * 42%), var(--stone)); } .bench__detail { overflow: hidden; height: calc(var(--o) * var(--dh, 0px)); opacity: clamp(0, (var(--o) - .25) * 1.8, 1); } .bench__detail > * { display: flow-root; padding-bottom: var(--sc-3); } .bench__detail p { margin: var(--sc-4) 0 0; color: var(--stone-soft); max-width: 40ch; } .bench__detail ul { margin: var(--sc-4) 0 var(--sc-2); padding: 0; list-style: none; display: grid; gap: .55rem; } .bench__detail li { position: relative; padding-left: 1.5rem; color: var(--stone-soft); font-size: var(--sc-t-sm); line-height: 1.5; max-width: 42ch; } .bench__detail li::before { content: ""; position: absolute; left: 0; top: .62em; width: .7rem; height: 1px; background: var(--stone-accent); } /* ---------------------------------------------------------------- 4 · run -- How it works, once. Three stations on one hairline that fills as you read. The only block on the page with no photograph: silence between the two. */ .run { background: var(--stone); padding-block: clamp(3.5rem, 8vw, 7rem) clamp(4rem, 9vw, 8rem); --run-gap: var(--sc-6); --run-rail: 2px; --run-dot: 10px; --run-indent: 1.75rem; } /* Desktop: a full screen, content centred, the same room above as below. The fill finishes as this section's top meets the screen's (service.js), so the finished line is read with the steps in the middle and none of the door. */ @media (min-width: 861px) { .run { min-height: 100svh; display: grid; align-content: center; padding-block: clamp(4rem, 9vw, 8rem); } } .run__inner { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); } .run__lead { margin: 0 0 var(--sc-8); } .run__lead h2 { margin: 0; color: var(--stone-ink); } .run__lead p { margin: var(--sc-3) 0 0; color: var(--stone-soft); max-width: 40ch; } /* --run-f, the filled fraction of the rail, and --run-h, the head bloom that rides its front, both come from service.js. The gap between the rail and the stations is --run-gap so the dots can be centred on the line by arithmetic rather than by a magic number that has to be re-found whenever either moves. */ .run__track { position: relative; height: var(--run-rail); border-radius: 999px; background: var(--stone-line-2); margin-bottom: var(--run-gap); } .run__track::after { content: ""; position: absolute; inset: 0 auto 0 0; border-radius: inherit; width: calc(var(--run-f, 0) * 100%); background: linear-gradient(to right, var(--sc-accent), #C97A1E); } /* the front of the fill, a soft bloom that arrives with it and is gone by the time the line is full, so the finished state is a clean rule */ .run__track::before { content: ""; position: absolute; top: 50%; left: calc(var(--run-f, 0) * 100%); width: 1.5rem; height: 1.5rem; translate: -50% -50%; border-radius: 50%; opacity: var(--run-h, 0); pointer-events: none; background: radial-gradient(circle, color-mix(in oklab, var(--sc-accent) 62%, transparent) 0%, transparent 68%); } .run__stations { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-6) var(--sc-7); } .run__station { position: relative; } /* the dot sits on .run__station, not inside the cue that reveals the copy: as a child of the cue it rode its 2.4vh rise and sat 21.6px under the line for the whole entrance, and the three cues are staggered, so some dot was always off */ .run__dot { position: absolute; left: 0; width: var(--run-dot); height: var(--run-dot); border-radius: 50%; top: calc(-1 * (var(--run-gap) + var(--run-rail) / 2) - var(--run-dot) / 2); background: var(--stone); border: 1px solid color-mix(in oklab, var(--stone-ink) 30%, transparent); transition: background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease, scale 240ms ease; } .run__station[data-lit] .run__dot { background: var(--sc-accent); border-color: var(--sc-accent); scale: 1.1; box-shadow: 0 0 0 4px color-mix(in oklab, var(--sc-accent) 20%, transparent), 0 0 14px 2px color-mix(in oklab, var(--sc-accent) 38%, transparent); } .run__step { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--stone-accent); margin: 0 0 var(--sc-3); } .run__body h3 { margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); line-height: 1.15; color: var(--stone-ink); } .run__body p { margin: var(--sc-3) 0 0; color: var(--stone-soft); font-size: var(--sc-t-sm); line-height: 1.55; max-width: 34ch; } /* "In detail": the way further in, off the rail, closing the section bottom right. Only the integration room has one; it leads to the agents lab. Small and quiet: night on stone with a thin metal copper edge from the identity kit, a copper disc for the arrow, and a faint warm band that crosses it now and then, the hero's lit-line motif turned right down. */ .run__more { display: flex; justify-content: flex-end; margin-top: var(--sc-7); } .run__detail { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: .65rem; padding: .42rem .42rem .42rem .95rem; border-radius: 999px; text-decoration: none; background: linear-gradient(180deg, #2A221A, #1A140F); color: #EFE3D2; font-family: var(--sc-font-display); font-weight: 500; font-size: .9rem; line-height: 1.2; white-space: nowrap; box-shadow: 0 6px 16px -10px rgba(20, 16, 12, .6); transition: box-shadow 400ms var(--sc-ease-out), color 300ms var(--sc-ease-out); } .run__detail::before { /* the metal copper edge */ content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, #5E250D 0%, #A24A22 16%, #E08A5C 30%, #F2B08A 40%, #C0602F 50%, #7A3314 66%, #B4552A 82%, #E3935F 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .75; transition: opacity 400ms var(--sc-ease-out); } .run__detail::after { /* the warm band */ content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: linear-gradient(105deg, transparent 40%, rgba(255, 214, 160, .14) 50%, transparent 60%) no-repeat; background-size: 280% 100%; background-position: 130% 0; animation: detail-sheen 9s cubic-bezier(.45, 0, .2, 1) 2s infinite; } @keyframes detail-sheen { 0% { background-position: 130% 0; } 22%, 100% { background-position: -30% 0; } } .run__detail-text { position: relative; z-index: 2; } .run__detail-arrow { position: relative; z-index: 2; flex: none; display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: linear-gradient(135deg, #7A3314, #B4552A 55%, #D98A5C); } .run__detail-arrow svg { width: .75rem; height: .75rem; fill: none; stroke: #FFF3E6; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: translate 300ms var(--sc-ease-out); } .run__detail:hover { color: #FFF3E6; box-shadow: 0 8px 20px -10px rgba(122, 51, 20, .55), 0 0 0 4px rgba(180, 85, 42, .10); } .run__detail:hover::before { opacity: 1; } .run__detail:hover .run__detail-arrow svg { translate: 2px 0; } .run__detail:focus-visible { outline: 2px solid #7A3314; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .run__detail::after { animation: none; } .run__detail, .run__detail-arrow svg { transition: none; } } /* --------------------------------------------------------------- 5 · door -- Back to night. The same door every room of this building exits through. */ .door { position: relative; min-height: 100svh; background: var(--night); overflow: clip; display: grid; } .door__bed { position: absolute; inset: 0; z-index: 1; } .door__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(20,16,12,.95) 0%, rgba(20,16,12,.8) 26%, rgba(20,16,12,.32) 48%, transparent 66%), linear-gradient(to top, rgba(20,16,12,.8) 0%, transparent 46%); } .door__inner { position: relative; z-index: 5; width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding: clamp(5rem, 12vh, 9rem) var(--sc-gutter) clamp(1.6rem, 5vh, 3rem); display: grid; grid-template-rows: 1fr auto; color: var(--night-ink); } .door__copy { align-self: end; max-width: 32rem; padding-bottom: clamp(2rem, 8vh, 5rem); } .door__copy h2 { margin: 0; } .door__copy .sc-body { margin-top: var(--sc-4); color: #EFE3D2; } .door__copy .cta { margin-top: var(--sc-6); } .door__mail { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sc-3) var(--sc-4); margin-top: var(--sc-6); } .door__mail a { font-family: var(--sc-font-mono); font-size: var(--sc-t-sm); letter-spacing: .02em; color: var(--night-ink); text-decoration-color: #F0B65E; } .copybtn { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: .06em; padding: .38rem .7rem; border-radius: var(--sc-r-sm); cursor: pointer; background: none; color: var(--night-soft); border: 1px solid color-mix(in oklab, var(--night-ink) 22%, transparent); } .copybtn:hover { background: color-mix(in oklab, var(--night-ink) 8%, transparent); border-color: var(--night-soft); } .copybtn:active { transform: translateY(1px); } .copybtn[data-done="true"] { color: #F0B65E; border-color: #F0B65E; } .door__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3) var(--sc-5); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: .06em; color: var(--night-soft); border-top: 1px solid color-mix(in oklab, var(--night-ink) 14%, transparent); padding-top: var(--sc-4); } .door__foot a { text-decoration: none; color: var(--night-soft); } .door__foot a:hover { color: var(--night-ink); } .door__foot-mark { color: var(--night-ink); margin-right: auto; } .door .lamp-btn { left: calc(var(--lx) * 1%); top: calc(var(--ly) * 1%); translate: -50% -50%; } /* ------------------------------------------------------ per-service accent */ :root[data-room="consulting"] { --sc-accent: #E9962E; --stone-accent: #8A4A15; } :root[data-room="integration"] { --sc-accent: #E4A02A; --stone-accent: #6E5A16; } :root[data-room="build"] { --sc-accent: #E98A2E; --stone-accent: #8A431A; } :root[data-room="education"] { --sc-accent: #E9962E; --stone-accent: #7B4C1E; } /* ------------------------------------------------------------- reduced --- */ @media (prefers-reduced-motion: reduce) { .room, .bench__row, .bench__detail { transition: --lit 260ms linear, height 260ms linear; } .lamp-btn::after { animation: none; opacity: 0; } } /* -------------------------------------------------------------- phones --- */ @media (max-width: 860px) { .panel { top: auto; right: 0; bottom: 0; left: 0; border-radius: 0; border-width: 1px 0 0 0; padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom)) .9rem; gap: .35rem; justify-content: space-between; } .panel__mark { padding-right: .6rem; } .panel__switches { flex: 1; justify-content: space-between; } .switch { min-width: 2.9rem; padding-inline: .3rem; } .switch__label { font-size: .48rem; letter-spacing: .07em; } .threshold__copy { width: calc(100vw - 2 * var(--sc-gutter)); bottom: clamp(6.5rem, 18vh, 10rem); } .threshold__copy h1 { font-size: var(--sc-t-2xl); max-width: 13ch; } .threshold__copy .sc-lede { max-width: 32ch; } .threshold__scrim { background: linear-gradient(to top, rgba(20,16,12,.95) 0%, rgba(20,16,12,.82) 26%, rgba(20,16,12,.35) 52%, transparent 74%); } .threshold__hint { bottom: 4.4rem; } /* the bed becomes a band above the rows, unmasked, so a subject sitting at about three quarters across still reads */ .bench__wrap { position: relative; inset: auto; display: block; padding-block: var(--sc-7) var(--sc-8); } .bench__bed { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 9; margin-bottom: var(--sc-7); border-radius: var(--sc-r-md); overflow: clip; -webkit-mask-image: none; mask-image: none; } .bench__bed .room__media { inset: 0; } .bench__rows { width: 100%; } .bench__title { font-size: calc(1.2rem + var(--o) * .5rem); } /* Stacked, the rail turns with the steps. It used to stay a single horizontal line above them while the dots kept their own column, which left the second and third floating 172px and 346px below any line at all. */ .run__track { display: none; } .run__stations { grid-template-columns: 1fr; gap: var(--sc-7); padding-left: var(--run-indent); } /* --run-top and --run-span are measured in service.js: the spine's ends are the first dot's centre and the foot of the last step. */ .run__stations::before, .run__stations::after { content: ""; position: absolute; left: 0; top: var(--run-top, 0px); width: var(--run-rail); border-radius: 999px; } .run__stations::before { height: var(--run-span, 0px); background: var(--stone-line-2); } .run__stations::after { height: calc(var(--run-f, 0) * var(--run-span, 0px)); background: linear-gradient(to bottom, var(--sc-accent), #C97A1E); } /* on the line horizontally, on the step label's midline vertically */ .run__dot { top: 1.125rem; left: calc(var(--run-rail) / 2 - var(--run-indent) - var(--run-dot) / 2); } .door__inner { padding-bottom: 4.5rem; } .door__scrim { background: linear-gradient(to top, rgba(20,16,12,.97) 0%, rgba(20,16,12,.93) 34%, rgba(20,16,12,.6) 60%, rgba(20,16,12,.15) 82%, transparent 94%); } } /* the threshold's slow push toward the light, driven by --hero-s in service.js */ .threshold .room__media > img, .threshold .room__media > picture > img, .threshold .room__warm img { transform: scale(var(--hero-s, 1)); transform-origin: calc(var(--lx) * 1%) calc(var(--ly) * 1%); } /* the bench, unpinned on phones: every row open, read as a list */ .bench.is-flow .bench__stage { position: static; height: auto; } .bench.is-flow .bench__row { padding-block: var(--sc-5); }