/* =========================================================================== Position v2 — Your Property Insider SG Grammar: filmic one-shot. World: light, warm, refined, residential. Built on the client's own two colours: their navy #141D31 and their gold. The gold is carried at TWO lightnesses, because this page drifts from a warm cream ground into navy under the advisory chapter and back, and no single gold clears 4.5:1 on both. #8A6220 reads 4.97:1 on the cream; #C9913F reads 5.61:1 on the navy. One hue, two stops, keyed to the ground family, which is what taste.md licenses for exactly this situation. Two families: Geist for everything, Geist Mono for figures. In an advisory sheet the figures are the display type. =========================================================================== */ :root { /* the light world, which is most of the page */ --sc-canvas: #F7F4EF; --sc-surface: #FFFDF9; --sc-ink: #141D31; /* the client's navy */ --sc-ink-soft: #4F5666; /* tinted to it, never flat grey */ --sc-accent: #74521A; /* the client's gold, darkened to clear the DEEPEST cream drift stop, not just the lightest */ --sc-accent-ink: #FFFDF9; --sc-font-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; --sc-font-text: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; --sc-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; --rule: color-mix(in oklab, var(--sc-ink) 15%, transparent); --rule-soft: color-mix(in oklab, var(--sc-ink) 8%, transparent); --good: #3F7A4E; --warn: #9A6B18; --bad: #A4423A; --bar-h: clamp(58px, 8vh, 72px); } *, *::before, *::after { box-sizing: border-box; } body { background: var(--sc-canvas); color: var(--sc-ink); font-family: var(--sc-font-text); font-size: var(--sc-t-base); line-height: var(--sc-leading-body); letter-spacing: var(--sc-track-normal); -webkit-font-smoothing: antialiased; overflow-x: hidden; } main { position: relative; z-index: 1; } .wrap { width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: var(--sc-gutter); } .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip { position: absolute; left: -9999px; top: 0; z-index: 60; background: var(--sc-accent); color: var(--sc-accent-ink); padding: 0.7rem 1.1rem; font-weight: 600; } .skip:focus { left: 0; } :where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: var(--sc-r-sm); } /* Figures are the display type of this page. */ .n, dd.n, td.n, .proof b, .figures dd, .record__total b { font-family: var(--sc-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .good { color: var(--good); } .warn { color: var(--warn); } .bad { color: var(--bad); } /* --------------------------------------------------------------------------- THE DEEP CHAPTERS. Redefining --sc-ink on a subtree does NOT re-ink text whose colour already resolved on : colour inherits as a computed value. So `color` is restated here alongside the tokens. Every page that inverts a ground mid-way hits this, and it fails silently. --------------------------------------------------------------------------- */ .act--deep { --sc-ink: #ECF1FA; --sc-ink-soft: #93A4C4; --sc-accent: #C9913F; /* the dark-ground stop of the same gold */ --sc-surface: #202940; --rule: color-mix(in oklab, #ECF1FA 16%, transparent); --rule-soft: color-mix(in oklab, #ECF1FA 9%, transparent); --good: #7FBF8A; --warn: #D9A34E; --bad: #C87C74; color: var(--sc-ink); } /* --------------------------------------------------------------------------- TYPE --------------------------------------------------------------------------- */ .display { margin: 0 0 var(--sc-5); font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.6rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 600; text-wrap: balance; } .display em { font-style: normal; color: var(--sc-accent); } .display--sm { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); } .h2 { margin: 0 0 var(--sc-4); font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.4rem); line-height: 1.1; letter-spacing: -0.025em; font-weight: 600; text-wrap: balance; } .eyebrow { margin: 0 0 var(--sc-4); font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-accent); } .lede { margin: 0 0 var(--sc-5); font-size: clamp(1rem, 0.95rem + 0.35vw, 1.18rem); color: var(--sc-ink-soft); max-width: 46ch; text-wrap: pretty; } .body { margin: 0; color: var(--sc-ink-soft); max-width: 52ch; text-wrap: pretty; } .head { margin-bottom: var(--sc-7); max-width: 52rem; } /* --------------------------------------------------------------------------- BUTTONS. Every one of them is inert: this is a showcase. --------------------------------------------------------------------------- */ .btn { font: 600 0.92rem/1 var(--sc-font-text); cursor: pointer; min-height: 48px; padding: 0.85rem 1.4rem; border-radius: var(--sc-r-pill); border: 1px solid transparent; transition: background .18s, color .18s, border-color .18s; } .btn--fill { background: var(--sc-accent); color: var(--sc-accent-ink); border-color: var(--sc-accent); } .btn--fill:hover { filter: brightness(1.1); } .btn--ghost { background: transparent; color: var(--sc-ink); border-color: var(--rule); } .btn--ghost:hover { border-color: var(--sc-accent); color: var(--sc-accent); } .btn--wide { width: 100%; margin-top: var(--sc-2); } /* --------------------------------------------------------------------------- ACTS. Flow acts carry their span explicitly so the score is measurable. --------------------------------------------------------------------------- */ .act { position: relative; } .act[data-sc-act="flow"] { min-height: calc(var(--span, 1) * 100vh); padding-block: clamp(3rem, 8vh, 7rem); display: flex; flex-direction: column; justify-content: center; } .act--hero { padding: 0; min-height: 100vh; } /* --------------------------------------------------------------------------- CHROME. Quiet, one action. Gains the case reference for the advisory chapter and sheds it. The page is never a tool; it enters one. --------------------------------------------------------------------------- */ .bar { position: fixed; inset: 0 0 auto 0; z-index: 40; display: flex; align-items: center; gap: var(--sc-4); padding: 0.7rem var(--sc-gutter); background: color-mix(in oklab, var(--sc-canvas) 82%, transparent); backdrop-filter: blur(14px) saturate(150%); border-bottom: 1px solid transparent; transition: border-color .4s; } .bar.is-lit { border-bottom-color: var(--rule); } /* The bar used to invert to navy for the advisory chapter. Crossfading both the text and the ground put them on the same mid-grey for the length of the transition, and the wordmark measured 2.57:1 in the middle of it. The chapter state change is the case reference arriving, which needs no colour swap: the bar stays cream and legible for the whole page. */ .bar.is-deep { border-bottom-color: color-mix(in oklab, var(--sc-accent) 45%, transparent); } .bar__mark { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; } .bar__mark img { width: 28px; height: 28px; object-fit: contain; } .bar__mark span { display: flex; flex-direction: column; line-height: 1.15; } .bar__mark b { font-size: 0.86rem; font-weight: 600; letter-spacing: -0.01em; } .bar__mark i { font-style: normal; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; } .bar__case { margin: 0 0 0 auto; display: flex; flex-direction: column; line-height: 1.2; text-align: right; opacity: 0; transform: translateY(-4px); transition: opacity .35s var(--sc-ease-out), transform .35s var(--sc-ease-out); pointer-events: none; } .bar.is-deep .bar__case { opacity: 1; transform: none; } .bar__case b { color: var(--sc-ink); } .bar__case b { font-family: var(--sc-font-mono); font-size: 0.74rem; letter-spacing: 0.04em; } .bar__case span { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-accent); font-weight: 600; } .bar__go { margin-left: auto; font: 600 0.8rem/1 var(--sc-font-text); cursor: pointer; min-height: 40px; padding: 0.6rem 1.05rem; border-radius: var(--sc-r-pill); background: var(--sc-accent); color: var(--sc-accent-ink); border: 1px solid var(--sc-accent); white-space: nowrap; } .bar__case:not([hidden]) + .bar__go { margin-left: var(--sc-4); } /* --------------------------------------------------------------------------- ACT 1 — the hero --------------------------------------------------------------------------- */ .hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden; } .hero__media { position: absolute; inset: -8% 0 -8% 0; z-index: 0; } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; } /* A column of density under the copy, not a full-frame overlay. W01 came back with busy foliage on the left where the brief asked for open ground, so the headline sits lower-left over the paving and takes a graded column with it. */ .hero__wash { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, color-mix(in oklab, #F7F4EF 97%, transparent) 0%, color-mix(in oklab, #F7F4EF 94%, transparent) 30%, color-mix(in oklab, #F7F4EF 82%, transparent) 44%, color-mix(in oklab, #F7F4EF 26%, transparent) 60%, transparent 74%), linear-gradient(0deg, color-mix(in oklab, #F7F4EF 70%, transparent) 0%, transparent 30%); } .hero__grid { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: end; gap: var(--sc-6); padding-top: calc(var(--bar-h) + 2rem); padding-bottom: clamp(2.5rem, 7vh, 5rem); } .hero__copy { max-width: 34rem; } .hero__acts { display: flex; flex-wrap: wrap; gap: 0.5rem; } .hero__acts .btn { padding: 0.7rem 1.1rem; min-height: 44px; font-size: 0.86rem; } .hero__people { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 0; height: min(62vh, 30rem); } .hero__p { height: 100%; width: auto; object-fit: contain; object-position: bottom; filter: drop-shadow(0 18px 40px rgba(20,29,49,0.28)); } .hero__p--s { margin-right: -10%; z-index: 2; } .hero__p--m { z-index: 1; transform: translateY(3%) scale(0.94); } /* --------------------------------------------------------------------------- ACT 2 — the three figures --------------------------------------------------------------------------- */ .figures { margin: 0; display: grid; gap: var(--sc-5); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } .figures > div { border-top: 2px solid var(--sc-accent); padding-top: var(--sc-4); } .figures dt { font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); margin-bottom: 0.4rem; } .figures dd { margin: 0; font-size: clamp(2.4rem, 1.8rem + 2.2vw, 3.6rem); line-height: 1; font-weight: 600; letter-spacing: -0.04em; } .figures dd i { font-style: normal; color: var(--sc-accent); } .claim__note { margin: var(--sc-7) 0 0; color: var(--sc-ink-soft); font-size: 0.95rem; } .claim__note b { color: var(--sc-ink); font-weight: 600; } /* --------------------------------------------------------------------------- ACT 3 — the rooms rail --------------------------------------------------------------------------- */ .stage { display: flex; align-items: center; min-height: 100vh; /* the engine sticks it; this fills it */ padding-block: calc(var(--bar-h) + 1rem) var(--sc-5); } .rooms { display: flex; gap: var(--sc-5); align-items: stretch; padding-inline: var(--sc-gutter); will-change: transform; } .rooms__lead { flex: 0 0 min(24rem, 76vw); align-self: center; } .room { flex: 0 0 min(17rem, 68vw); display: flex; flex-direction: column; } .room img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--sc-r-md); background: var(--rule-soft); } .room h3 { margin: var(--sc-4) 0 0.35rem; font-size: 1.02rem; font-weight: 600; letter-spacing: -0.015em; } .room p { margin: 0; font-size: 0.86rem; color: var(--sc-ink-soft); } /* --------------------------------------------------------------------------- ACT 4 — the two specialists --------------------------------------------------------------------------- */ /* NO position here. The engine sticks the stage, and `position: relative` silently beats `position: sticky` at equal specificity, so the act stops pinning and its content scrolls out of the top of the frame. Sticky is already a containing block, so the absolute ground anchors to it anyway. */ .stage--team { overflow: hidden; } .team__ground { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0.34; } .stage--team::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, color-mix(in oklab, #F7F4EF 88%, transparent) 0%, color-mix(in oklab, #F7F4EF 70%, transparent) 55%, color-mix(in oklab, #F7F4EF 55%, transparent) 100%); } .stage--team .wrap { position: relative; z-index: 1; width: 100%; } .team__head { max-width: 46rem; margin-bottom: var(--sc-6); } .team__pair { display: grid; gap: var(--sc-6); grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); } .person { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: var(--sc-4); align-items: end; } .person > img { width: 100%; height: auto; object-fit: contain; object-position: bottom; filter: drop-shadow(0 12px 26px rgba(20,29,49,0.2)); } .person__yrs { margin: 0 0 0.2rem; font-family: var(--sc-font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); } .person__yrs b { color: var(--sc-accent); font-size: 1.1rem; } .person__body h3 { margin: 0 0 0.1rem; font-size: 1.4rem; font-weight: 600; letter-spacing: -0.025em; } .person__role { margin: 0 0 var(--sc-3); font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-accent); } .person__bio { margin: 0 0 var(--sc-3); font-size: 0.9rem; color: var(--sc-ink-soft); } .person__tel { margin: 0; font-family: var(--sc-font-mono); font-size: 0.84rem; color: var(--sc-ink-soft); border-bottom: 1px dashed var(--rule); display: inline-block; cursor: help; } /* --------------------------------------------------------------------------- ACT 5 — the hinge into the instrument --------------------------------------------------------------------------- */ .act--hinge { position: relative; overflow: hidden; } .hinge { position: relative; width: 100%; } .hinge__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0.34; } .act--hinge::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(72% 78% at 50% 50%, rgba(20,26,42,0.88) 0%, rgba(20,26,42,0.72) 46%, rgba(20,26,42,0.30) 100%); } .hinge .wrap { position: relative; z-index: 1; text-align: center; } .hinge__line { margin: 0 auto var(--sc-5); max-width: 20ch; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.8rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 500; text-wrap: balance; } .hinge__sub { margin: 0 auto; max-width: 44ch; color: var(--sc-ink-soft); font-size: 0.95rem; } /* --------------------------------------------------------------------------- ACT 6 — the live case --------------------------------------------------------------------------- */ .sheet { border: 1px solid var(--rule); border-radius: var(--sc-r-md); background: var(--sc-surface); padding: clamp(1.25rem, 3vw, 2.25rem); margin-bottom: var(--sc-6); } .sheet__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sc-4); flex-wrap: wrap; margin-bottom: var(--sc-5); } .sheet__head .h2 { margin: 0; } .eyebrow--deep { color: var(--sc-accent); } .sheet__stamp { margin: 0; font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-accent); border: 1px solid var(--rule); border-radius: var(--sc-r-pill); padding: 0.3rem 0.7rem; } .inputs { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .inputs thead th { text-align: left; padding: 0 0 0.5rem; border-bottom: 1px solid var(--rule); font-family: var(--sc-font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); } .inputs tbody tr { border-bottom: 1px solid var(--rule-soft); } .inputs th[scope="row"] { text-align: left; font-weight: 400; padding: 0.6rem 1rem 0.6rem 0; } .inputs td { padding: 0.6rem 1rem 0.6rem 0; } .inputs td.n { font-weight: 500; white-space: nowrap; } .inputs td.mv { font-family: var(--sc-font-mono); font-size: 0.68rem; color: var(--sc-ink-soft); text-align: right; padding-right: 0; } .lenses { display: grid; gap: var(--sc-4); margin-top: var(--sc-5); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } .annot { padding: var(--sc-4); border-radius: var(--sc-r-sm); background: color-mix(in oklab, var(--sc-ink) 6%, transparent); } .annot--s { border-left: 2px solid var(--sc-accent); } .annot--m { border-left: 2px dashed var(--sc-ink-soft); } .annot b { display: block; font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); margin-bottom: 0.4rem; } .annot p { margin: 0; font-size: 0.88rem; color: var(--sc-ink-soft); } .firstproof { margin: var(--sc-5) 0 0; padding-top: var(--sc-4); border-top: 1px solid var(--rule-soft); font-size: 0.88rem; color: var(--sc-ink-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } .control { display: flex; align-items: center; gap: var(--sc-4); flex-wrap: wrap; padding: var(--sc-4) var(--sc-5); border: 1px solid var(--rule); border-radius: var(--sc-r-sm); background: var(--sc-surface); } .control label { font-family: var(--sc-font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); } .control input[type="range"] { flex: 1 1 14rem; accent-color: var(--sc-accent); min-height: 32px; } .control output { font-size: 1.15rem; font-weight: 600; color: var(--sc-accent); min-width: 8.5ch; } .status { margin: var(--sc-3) 0 var(--sc-5); font-family: var(--sc-font-mono); font-size: 0.72rem; color: var(--sc-ink-soft); } .calcs { display: grid; gap: var(--sc-4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } .calc { border: 1px solid var(--rule); border-radius: var(--sc-r-sm); background: var(--sc-surface); padding: var(--sc-4); display: flex; flex-direction: column; } .calc h3 { margin: 0 0 0.15rem; font-family: var(--sc-font-mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-accent); } .calc__sub { margin: 0 0 var(--sc-4); font-size: 0.74rem; color: var(--sc-ink-soft); } .calc dl { margin: 0 0 var(--sc-4); } .calc dl > div { display: flex; justify-content: space-between; gap: var(--sc-3); padding: 0.35rem 0; border-bottom: 1px solid var(--rule-soft); font-size: 0.82rem; } .calc dt { color: var(--sc-ink-soft); } .calc dd { margin: 0; white-space: nowrap; } .calc__out { border-bottom-width: 0 !important; font-weight: 600; } .calc__out dt { color: var(--sc-ink); } .calc .proof { margin-top: auto; font-size: 0.82rem; flex-wrap: wrap; } .routes { display: grid; gap: var(--sc-4); margin-top: var(--sc-5); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .route { border: 1px solid var(--rule); border-radius: var(--sc-r-sm); background: var(--sc-surface); padding: var(--sc-4); } .route.is-rec { border-color: var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 10%, var(--sc-surface)); } .route__k { margin: 0 0 0.2rem; font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft); } .route h3 { margin: 0 0 var(--sc-3); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; } .route dl { margin: 0; } .route dl > div { display: flex; justify-content: space-between; gap: var(--sc-3); padding: 0.32rem 0; border-bottom: 1px solid var(--rule-soft); font-size: 0.82rem; } .route dt { color: var(--sc-ink-soft); } .route dd { margin: 0; text-align: right; } .route__rec, .route__block { margin: var(--sc-3) 0 0; font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; } .route__rec { color: var(--sc-accent); } .route__block { color: var(--bad); } .evidence { margin-top: var(--sc-5); } .evidence__k { margin: 0 0 var(--sc-3); font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); } .evidence ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-3); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } .evidence li { padding: var(--sc-3) var(--sc-4); border: 1px solid var(--rule); border-radius: var(--sc-r-sm); } .evidence b { display: block; font-size: 0.85rem; font-weight: 500; line-height: 1.35; } .evidence span { display: block; margin-top: 0.35rem; font-family: var(--sc-font-mono); font-size: 0.66rem; color: var(--sc-ink-soft); } .disclose { margin: var(--sc-6) 0 0; padding-top: var(--sc-3); border-top: 1px solid var(--rule-soft); font-size: 0.74rem; line-height: 1.55; color: var(--sc-ink-soft); max-width: 74ch; } /* --------------------------------------------------------------------------- PROOFLINE — the signature move, carried over from v1 --------------------------------------------------------------------------- */ .proof { font: inherit; color: var(--sc-ink); background: transparent; cursor: pointer; border: 0; border-bottom: 1px dashed var(--sc-accent); padding: 0.15rem 0.1rem; display: inline-flex; align-items: baseline; gap: 0.4rem; text-align: left; transition: background .16s, border-color .16s; } .proof::after { content: "⌐"; font-family: var(--sc-font-mono); color: var(--sc-accent); font-size: 0.8em; transform: rotate(180deg); display: inline-block; } .proof:hover, .proof.is-open { background: color-mix(in oklab, var(--sc-accent) 16%, transparent); border-bottom-style: solid; } .proof b { color: var(--sc-accent); font-weight: 600; } [data-cell] { transition: outline-color .2s, background .2s; } [data-cell].is-lit { outline: 1px solid var(--sc-accent); outline-offset: 3px; background: color-mix(in oklab, var(--sc-accent) 12%, transparent); } .pl { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 44; opacity: 0; transition: opacity .25s var(--sc-ease-out); } .pl.is-on { opacity: 1; } #plPath { fill: none; stroke: #C9913F; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); } .pl.is-drawing #plPath { transition: stroke-dashoffset 1.05s var(--sc-ease-out); stroke-dashoffset: 0; } .plmark { position: fixed; z-index: 44; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #C9913F; box-shadow: 0 0 0 4px rgba(201,145,63,0.28); pointer-events: none; } .plp { position: fixed; z-index: 45; right: var(--sc-gutter); bottom: var(--sc-5); width: min(25rem, calc(100vw - 2 * var(--sc-gutter))); max-height: min(62vh, 34rem); overflow-y: auto; border: 1px solid #C9913F; border-radius: var(--sc-r-md); background: #16203A; color: #ECF1FA; box-shadow: var(--sc-e3); padding: var(--sc-5); animation: plIn .28s var(--sc-ease-out); } @keyframes plIn { from { opacity: 0; transform: translateY(10px); } } .plp[hidden] { display: none; } .plp__head { display: grid; grid-template-columns: 1fr auto; gap: var(--sc-3); align-items: start; margin-bottom: var(--sc-4); } .plp__k { grid-column: 1 / -1; margin: 0 0 0.15rem; font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: #C9913F; } .plp__head h2 { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -0.02em; } .plp__x { font: 500 0.72rem/1 var(--sc-font-text); color: #93A4C4; background: transparent; border: 1px solid rgba(236,241,250,0.2); border-radius: var(--sc-r-pill); padding: 0.4rem 0.7rem; min-height: 32px; cursor: pointer; } .plp__x:hover { color: #ECF1FA; } .plp__chain { list-style: none; margin: 0; padding: 0; counter-reset: step; } .plp__chain li { position: relative; padding: 0 0 var(--sc-4) var(--sc-6); counter-increment: step; opacity: 0; animation: stepIn .3s var(--sc-ease-out) forwards; } @keyframes stepIn { to { opacity: 1; } } .plp__chain li::before { content: counter(step); position: absolute; left: 0; top: 0.1rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--sc-font-mono); font-size: 0.66rem; font-weight: 600; color: #16203A; background: #C9913F; } .plp__chain li::after { content: ""; position: absolute; left: 0.65rem; top: 1.55rem; bottom: 0.3rem; width: 1px; background: rgba(201,145,63,0.45); } .plp__chain li:last-child::after { display: none; } .plp__chain b { display: block; font-family: var(--sc-font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: #93A4C4; margin-bottom: 0.2rem; } .plp__chain p { margin: 0; font-size: 0.84rem; line-height: 1.5; } .plp__chain .n { color: #C9913F; } .plp__chain li[data-who="s"] b { color: #C9913F; } .plp__go { margin-top: 0.4rem; font: 500 0.68rem/1 var(--sc-font-text); cursor: pointer; color: #C9913F; background: transparent; border: 1px solid rgba(201,145,63,0.45); border-radius: var(--sc-r-pill); padding: 0.35rem 0.65rem; min-height: 30px; } .plp__foot { margin: var(--sc-4) 0 0; padding-top: var(--sc-3); border-top: 1px solid rgba(236,241,250,0.12); font-family: var(--sc-font-mono); font-size: 0.64rem; color: #93A4C4; } /* --------------------------------------------------------------------------- ACT 7 — the peak --------------------------------------------------------------------------- */ .stage--peak { display: flex; align-items: center; } .stage--peak .wrap { width: 100%; padding-block: var(--sc-5); } .brief { border: 1px solid var(--rule); border-radius: var(--sc-r-md); background: color-mix(in oklab, #ECF1FA 7%, transparent); padding: clamp(1.25rem, 3vw, 2.25rem); transition: border-color .5s var(--sc-ease-out), box-shadow .5s var(--sc-ease-out); } .brief.is-locked { border-color: var(--sc-accent); box-shadow: var(--sc-e3); } .brief__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sc-4); flex-wrap: wrap; padding-bottom: var(--sc-4); border-bottom: 1px solid var(--rule); } .brief__k { margin: 0 0 0.2rem; font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-accent); } .brief__head h2 { margin: 0; font-family: var(--sc-font-mono); font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.4rem); font-weight: 600; } .brief__stamp { margin: 0; font-family: var(--sc-font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft); border: 1px solid var(--rule); border-radius: var(--sc-r-pill); padding: 0.3rem 0.8rem; transition: color .4s, border-color .4s, background .4s; } .brief.is-locked .brief__stamp { color: #1B2438; background: var(--sc-accent); border-color: var(--sc-accent); font-weight: 600; } .brief__grid { display: grid; gap: var(--sc-5); padding-block: var(--sc-5); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } .brief__b h3 { margin: 0 0 var(--sc-3); font-family: var(--sc-font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); padding-bottom: 0.4rem; border-bottom: 1px solid var(--rule-soft); } .brief__b dl { margin: 0; } .brief__b dl > div { display: flex; justify-content: space-between; gap: var(--sc-3); padding: 0.32rem 0; font-size: 0.82rem; } .brief__b dt { color: var(--sc-ink-soft); } .brief__b dd { margin: 0; text-align: right; } .brief__b p { margin: 0; font-size: 0.84rem; color: var(--sc-ink-soft); } .brief__b--s { border-left: 2px solid var(--sc-accent); padding-left: var(--sc-4); } .brief__b--m { border-left: 2px dashed var(--sc-ink-soft); padding-left: var(--sc-4); } .brief__route { margin: 0 0 var(--sc-3) !important; } .brief__route .proof { font-size: 0.94rem; font-weight: 600; } .brief__foot { padding-top: var(--sc-4); border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: var(--sc-4); flex-wrap: wrap; align-items: baseline; } .brief__belief { margin: 0; font-size: 1.05rem; font-weight: 500; color: var(--sc-ink); } .brief__discl { margin: 0; font-size: 0.7rem; color: var(--sc-ink-soft); } .peakhint { margin: var(--sc-5) 0 0; font-size: 0.84rem; color: var(--sc-ink-soft); max-width: 62ch; } /* --------------------------------------------------------------------------- ACT 8 — services --------------------------------------------------------------------------- */ .svc { display: grid; gap: var(--sc-6) var(--sc-5); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } .svc__i img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--sc-r-md); margin-bottom: var(--sc-4); } .svc__i h3 { margin: 0 0 0.4rem; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; } .svc__i p { margin: 0; font-size: 0.88rem; color: var(--sc-ink-soft); } .svc__i--text { border-top: 2px solid var(--sc-accent); padding-top: var(--sc-4); } /* --------------------------------------------------------------------------- ACT 9 — why work with us --------------------------------------------------------------------------- */ .why { display: grid; gap: var(--sc-7); grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; } .why__list { list-style: none; margin: var(--sc-6) 0 0; padding: 0; display: grid; gap: var(--sc-4); } .why__list li { font-size: 0.88rem; color: var(--sc-ink-soft); border-top: 1px solid var(--rule-soft); padding-top: var(--sc-3); } .why__list b { display: block; color: var(--sc-ink); font-weight: 600; font-size: 0.95rem; margin-bottom: 0.3rem; } .why__people { display: flex; align-items: flex-end; justify-content: center; } .why__people img { width: 56%; height: auto; object-fit: contain; filter: drop-shadow(0 16px 34px rgba(20,29,49,0.22)); } .why__people img:first-child { margin-right: -12%; z-index: 2; } .why__people img:last-child { transform: translateY(4%) scale(0.93); } /* --------------------------------------------------------------------------- ACT 10 — the record --------------------------------------------------------------------------- */ .stage--record { overflow: hidden; } /* same: never position a stage */ .record__ground { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0.22; } .record { position: relative; z-index: 1; display: flex; gap: var(--sc-5); align-items: stretch; padding-inline: var(--sc-gutter); will-change: transform; } .record__lead { flex: 0 0 min(25rem, 78vw); align-self: center; } .record__total { margin: var(--sc-5) 0 var(--sc-3); font-size: 0.8rem; font-family: var(--sc-font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); } .record__total b { font-size: 2.4rem; color: var(--sc-accent); margin-right: 0.4rem; letter-spacing: -0.03em; } .record__body { margin: 0; font-size: 0.88rem; color: var(--sc-ink-soft); max-width: 34ch; } .award { flex: 0 0 min(12rem, 52vw); display: flex; flex-direction: column; align-self: center; outline-offset: 4px; } .award img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; border-radius: var(--sc-r-sm); filter: saturate(0.4) contrast(0.94) brightness(1.02); transition: filter .28s var(--sc-ease-out); } .award:hover img, .award:focus-within img, .award:focus img { filter: none; } .award p { margin: var(--sc-3) 0 0; } .award b { display: block; font-size: 0.8rem; font-weight: 600; line-height: 1.3; } .award span { display: block; margin-top: 0.2rem; font-family: var(--sc-font-mono); font-size: 0.64rem; color: var(--sc-ink-soft); } .award--top { flex: 0 0 min(15rem, 62vw); } .award--top img { filter: saturate(0.62) contrast(0.96); } .record__note { flex: 0 0 min(15rem, 60vw); align-self: center; } .record__note p { margin: 0; font-size: 0.74rem; color: var(--sc-ink-soft); } /* --------------------------------------------------------------------------- ACT 11 — the three steps --------------------------------------------------------------------------- */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-5); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); counter-reset: s; } .steps li { position: relative; } .steps img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--sc-r-md); margin-bottom: var(--sc-4); } .steps__n { display: block; font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--sc-accent); margin-bottom: 0.3rem; } .steps h3 { margin: 0 0 0.4rem; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; } .steps p { margin: 0; font-size: 0.86rem; color: var(--sc-ink-soft); } /* --------------------------------------------------------------------------- ACT 12 — insights --------------------------------------------------------------------------- */ .posts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-4); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } .posts li { border-top: 1px solid var(--rule); padding-top: var(--sc-4); } .posts__k { margin: 0 0 0.5rem; font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-accent); } .posts h3 { margin: 0 0 0.5rem; font-size: 0.98rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; } .posts li p:last-child { margin: 0; font-size: 0.82rem; color: var(--sc-ink-soft); } .posts__more { margin: var(--sc-6) 0 0; padding-top: var(--sc-4); border-top: 1px solid var(--rule-soft); font-size: 0.78rem; color: var(--sc-ink-soft); } .posts__more span { display: block; font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink); margin-bottom: 0.3rem; } /* --------------------------------------------------------------------------- ACT 13 — the return --------------------------------------------------------------------------- */ .act--close { padding: 0; } .close { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; } .close__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; z-index: 0; } .close__wash { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(12,17,28,0.92) 0%, rgba(12,17,28,0.80) 34%, rgba(12,17,28,0.30) 60%, rgba(12,17,28,0.10) 100%), linear-gradient(0deg, rgba(12,17,28,0.85) 0%, transparent 42%); } .close__grid { position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--sc-6); align-items: end; padding-top: calc(var(--bar-h) + 3rem); padding-bottom: var(--sc-6); } /* The close sits on a dark photograph, so it carries the deep tokens and restates colour, exactly as .act--deep does. */ .close__grid, .close .foot { --sc-ink: #F4F1EB; --sc-ink-soft: #C3BDB2; --sc-accent: #E0AC57; --rule: rgba(244,241,235,0.22); --rule-soft: rgba(244,241,235,0.12); color: var(--sc-ink); } .close__copy { max-width: 32rem; } .close__strap { margin: 0 0 var(--sc-5); font-family: var(--sc-font-mono); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--sc-accent); } .ask { border-top: 1px solid var(--rule); padding-top: var(--sc-5); } .ask__f { margin-bottom: var(--sc-3); } .ask__f label { display: block; margin-bottom: 0.3rem; font-size: 0.76rem; color: var(--sc-ink-soft); } .ask__f input { width: 100%; min-height: 44px; padding: 0.55rem 0.8rem; font: inherit; font-size: 0.9rem; color: var(--sc-ink); background: rgba(255,255,255,0.08); border: 1px solid var(--rule); border-radius: var(--sc-r-sm); } .ask__f input::placeholder { color: rgba(244,241,235,0.45); } .ask__f input:focus { border-color: var(--sc-accent); outline: none; background: rgba(255,255,255,0.14); } .ask .btn--fill { background: var(--sc-accent); border-color: var(--sc-accent); color: #16203A; } .ask__note { margin: var(--sc-4) 0 0; font-size: 0.76rem; color: var(--sc-ink-soft); } .ask__note.is-said { color: var(--sc-accent); } .close__people { display: grid; gap: var(--sc-4); } .close__p { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--sc-4); align-items: center; } .close__p img { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: color-mix(in oklab, #F4F1EB 14%, transparent); } .close__p p { margin: 0; } .close__p b { display: block; font-size: 1.05rem; font-weight: 600; } .close__p span { display: block; font-family: var(--sc-font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); margin: 0.15rem 0 0.4rem; } .close__p i { font-style: normal; font-family: var(--sc-font-mono); font-size: 0.8rem; color: var(--sc-ink-soft); border-bottom: 1px dashed var(--rule); cursor: help; } .foot { position: relative; z-index: 2; border-top: 1px solid var(--rule); padding-block: var(--sc-5); } .foot__in { display: grid; gap: var(--sc-3); } .foot p { margin: 0; font-size: 0.78rem; color: var(--sc-ink-soft); } .foot__brand { display: flex; align-items: center; gap: 0.5rem; color: var(--sc-ink) !important; } .foot__brand img { width: 22px; height: 22px; object-fit: contain; } .foot__desc { max-width: 60ch; } .foot__legal, .foot__qbyx { font-size: 0.72rem; } .foot__qbyx a { color: var(--sc-accent); } /* Illustrative-only disclosure, keyboard and touch reachable */ .tip { position: fixed; z-index: 50; max-width: 17rem; padding: 0.5rem 0.7rem; border-radius: var(--sc-r-sm); background: #141D31; color: #F7F4EF; font-size: 0.74rem; line-height: 1.4; font-weight: 500; box-shadow: var(--sc-e2); pointer-events: none; } .tip[hidden] { display: none; } /* --------------------------------------------------------------------------- RESPONSIVE --------------------------------------------------------------------------- */ @media (max-width: 1000px) { .hero__grid, .why, .close__grid { grid-template-columns: minmax(0, 1fr); } .hero__people { display: none; } .why__people { display: none; } .close__people { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { :root { --bar-h: 56px; } .bar__mark i { display: none; } .bar__go { font-size: 0.74rem; padding: 0.55rem 0.85rem; } .bar__case { display: none; } .hero { min-height: 92vh; } .hero__media img { object-position: 68% 50%; } /* The eyebrow and headline sit high in the mobile hero, so the wash has to reach further up the frame than the copy block does. */ .hero__wash { background: linear-gradient(0deg, color-mix(in oklab, #F7F4EF 97%, transparent) 0%, color-mix(in oklab, #F7F4EF 94%, transparent) 52%, color-mix(in oklab, #F7F4EF 78%, transparent) 74%, color-mix(in oklab, #F7F4EF 30%, transparent) 92%, transparent 100%); } .hero__grid { align-items: end; padding-bottom: var(--sc-6); } .display { font-size: clamp(2rem, 1.4rem + 4vw, 2.8rem); } .person { grid-template-columns: minmax(0, 1fr); } .person > img { max-width: 8rem; } .inputs td.mv, .inputs thead th:last-child { display: none; } .brief__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sc-3); } .brief__b dl > div { font-size: 0.78rem; padding: 0.15rem 0; } .brief__b p { font-size: 0.76rem; } .brief { padding: var(--sc-3); } .brief__b .drop-sm { display: none; } .peakhint { font-size: 0.76rem; } .close__people { grid-template-columns: minmax(0, 1fr); } .close__wash { background: linear-gradient(0deg, rgba(12,17,28,0.94) 0%, rgba(12,17,28,0.86) 52%, rgba(12,17,28,0.45) 100%); } .plp { right: 0; left: 0; bottom: 0; width: 100%; max-height: 56vh; border-radius: var(--sc-r-md) var(--sc-r-md) 0 0; border-left: 0; border-right: 0; border-bottom: 0; } } @media (max-width: 460px) { .calcs, .routes, .svc, .steps { grid-template-columns: minmax(0, 1fr); } .figures { grid-template-columns: minmax(0, 1fr); } } /* --------------------------------------------------------------------------- REDUCED MOTION --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .pl.is-drawing #plPath { transition: none; stroke-dashoffset: 0; } .plp { animation: none; } .plp__chain li { opacity: 1; animation: none; } .brief, .bar, .award img { transition: none; } .rooms, .record { transform: none !important; } } /* --------------------------------------------------------------------------- Act 6 carries the whole instrument: the sheet, the control, four calculators, three routes, the filed evidence and the disclosures. It measured 1.97vh against a scored 1.05, which cut the peak's dominance to 1.3x. The peak is the one thing in the score that cannot give ground, so this act is compressed rather than the peak stretched. --------------------------------------------------------------------------- */ .act--case { padding-block: clamp(2rem, 5vh, 4rem); } .act--case .sheet { padding: clamp(1rem, 2.2vw, 1.6rem); margin-bottom: var(--sc-4); } .act--case .sheet__head { margin-bottom: var(--sc-4); } .act--case .inputs { font-size: 0.84rem; } .act--case .inputs th[scope="row"], .act--case .inputs td { padding: 0.4rem 1rem 0.4rem 0; } .act--case .lenses { margin-top: var(--sc-4); gap: var(--sc-3); } .act--case .annot { padding: var(--sc-3); } .act--case .annot p { font-size: 0.82rem; } .act--case .firstproof { margin-top: var(--sc-4); padding-top: var(--sc-3); } .act--case .control { padding: var(--sc-3) var(--sc-4); } .act--case .status { margin: 0.5rem 0 var(--sc-4); } .act--case .calcs { gap: var(--sc-3); } .act--case .calc { padding: var(--sc-3); } .act--case .calc__sub { margin-bottom: var(--sc-3); } .act--case .calc dl { margin-bottom: var(--sc-3); } .act--case .routes { margin-top: var(--sc-4); gap: var(--sc-3); } .act--case .route { padding: var(--sc-3); } .act--case .evidence { margin-top: var(--sc-4); } .act--case .evidence li { padding: var(--sc-3); } .act--case .disclose { margin-top: var(--sc-4); } /* Landing the score. Flow acts whose content exceeds their scored span were pushing the page to 14.11vh, over the skill's 14 ceiling, and holding the peak's lead down. Each of these is content-bound, so the trim is real spacing rather than a smaller min-height. */ .act--hero .hero__grid { padding-top: calc(var(--bar-h) + 1.25rem); padding-bottom: clamp(1.75rem, 4vh, 3rem); } .act--hero .display { margin-bottom: var(--sc-4); } .act--hero .lede { margin-bottom: var(--sc-4); } .act--case .sheet .lenses { display: none; } /* the two lenses return in full at the peak */ .act--services { padding-block: clamp(2.5rem, 6vh, 5rem); } .act--services .head { margin-bottom: var(--sc-5); } .act--services .svc { gap: var(--sc-5) var(--sc-4); } .act--services .svc__i img { margin-bottom: var(--sc-3); } .act--why { padding-block: clamp(2.5rem, 6vh, 5rem); } .act--why .why__list { margin-top: var(--sc-5); gap: var(--sc-3); } .act--insights { padding-block: clamp(2.5rem, 6vh, 5rem); } .act--insights .head { margin-bottom: var(--sc-5); } .act--insights .posts { gap: var(--sc-3); } .act--insights .posts li { padding-top: var(--sc-3); } .act--insights .posts h3 { font-size: 0.92rem; } .act--insights .posts__more { margin-top: var(--sc-4); padding-top: var(--sc-3); } .act--close .close__grid { padding-top: calc(var(--bar-h) + 1.5rem); padding-bottom: var(--sc-5); } .act--close .foot { padding-block: var(--sc-4); } /* The three filed-evidence cards repeated three of the same articles that act 12 carries in full. Compacted to one line of citations: the case still shows what it was decided against, without the page saying it twice. */ .act--case .evidence ul { display: block; } .act--case .evidence li { display: inline; border: 0; padding: 0; } .act--case .evidence li + li::before { content: " · "; color: var(--sc-ink-soft); } .act--case .evidence b { display: inline; font-size: 0.78rem; font-weight: 500; } .act--case .evidence span { display: none; } .act--case .evidence__k { margin-bottom: var(--sc-2); } .act--close .close { min-height: 92vh; } .act--close .ask { padding-top: var(--sc-4); } .act--close .ask__f { margin-bottom: var(--sc-2); } .act--insights .posts li p:last-child { font-size: 0.78rem; } .act--services .svc__i p { font-size: 0.84rem; } /* Final landing of the score at ~12.7vh, clear of every occupied band in the registry: 12.3 (qbyx-landing, 7 acts), 12.34 (this build's v1, 10 acts), 13.0 (team-ai, 9 units), 13.45 (saltmere-lido, 8 units), and clear of the 13.6-13.8 template band. Thirteen acts is itself unoccupied. */ .act--case .calc h3 { font-size: 0.72rem; } .act--case .calc__sub { font-size: 0.7rem; margin-bottom: var(--sc-2); } .act--case .calc dl > div { padding: 0.24rem 0; font-size: 0.78rem; } .act--case .calc .proof { font-size: 0.78rem; } .act--case .inputs { font-size: 0.8rem; } .act--case .inputs th[scope="row"], .act--case .inputs td { padding: 0.3rem 1rem 0.3rem 0; } .act--case .route h3 { font-size: 0.96rem; margin-bottom: var(--sc-2); } .act--case .route dl > div { padding: 0.22rem 0; font-size: 0.78rem; } .act--case .disclose { font-size: 0.7rem; margin-top: var(--sc-3); } .act--hero .hero__grid { padding-bottom: clamp(1.25rem, 3vh, 2.25rem); } .act--claim { padding-block: clamp(2.5rem, 6vh, 4.5rem); } .act--close .close { min-height: 88vh; } /* =========================================================================== THE CONCENTRATED CHAPTER, as a panel rather than as the ground. The first cut drove the page GROUND from cream to navy under acts 5 to 7. That cannot be made safe. The engine transitions a drift over the first 35% of an act (`driftT = smooth(raw / 0.35)`), and for a flow act `raw` spans its entire visible life, so the swing happens exactly while that act's text is entering the viewport. Ink flips at a section edge; the ground does not. The sweep found 54 runs failing on mid-drift greys, and they were real. So the ground now stays warm and light for the whole page, and the advisory chapter is a dark PANEL with soft edges: it fades in across the hinge, holds under the case, and fades out under the tail of the peak. Text there always sits on a known surface, and the page still never cuts, which is what the grammar actually asks for. =========================================================================== */ /* On the sections themselves, not on a ::before. A pseudo-element is not hit-testable, so nothing that composites an ancestor stack can see it, and the contrast sweep read straight through the panel to the body's cream. A ground that only a screenshot can prove is a ground you cannot verify. */ .act--hinge { background: linear-gradient(180deg, rgba(27,36,56,0) 0%, #1B2438 55%); } .act--case { background: #1B2438; } /* Solid to the bottom edge. The fade-out belongs to the NEXT act's top, not to this one's tail: the peak's closing line sits below the brief, and a panel that fades under it puts light ink on cream. */ .act--peak { background: #1B2438; } .act--services { background: linear-gradient(180deg, #1B2438 0%, rgba(27,36,56,0) 26%); } /* The team act is pinned, so its content is still on screen while the next act's drift moves underneath it. Its own ground is made explicit for the same reason the panel is. */ .stage--team::after { background: linear-gradient(90deg, color-mix(in oklab, #F7F4EF 95%, transparent) 0%, color-mix(in oklab, #F7F4EF 88%, transparent) 52%, color-mix(in oklab, #F7F4EF 74%, transparent) 100%) !important; } .stage--team { background: #F7F4EF; } /* The record act is pinned too, and its ground carries the walkway. */ .stage--record { background: #EFE9DE; } .act--process .stage { background: transparent; } /* The three figures now live in the hero, under the actions, which is where the client's own page puts them. Compact so they read as a strip. */ .hero .figures { margin-top: var(--sc-5); gap: var(--sc-5); grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; } .hero .figures > div { border-top-width: 1px; padding-top: var(--sc-3); } .hero .figures dt { font-size: 0.62rem; letter-spacing: 0.08em; margin-bottom: 0.15rem; } .hero .figures dd { font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.1rem); } @media (max-width: 760px) { .hero .figures { gap: var(--sc-4); } .hero .figures dt { font-size: 0.56rem; } } /* Landing pass. Twelve acts, target ~13.2vh, peak leading by ~1.9x. */ .act--case { padding-block: clamp(1.5rem, 3.5vh, 3rem); } .act--case .sheet { margin-bottom: var(--sc-3); } .act--case .calcs { gap: var(--sc-2); } .act--case .routes { margin-top: var(--sc-3); gap: var(--sc-2); } .act--case .evidence { margin-top: var(--sc-3); } .act--hero .hero__grid { padding-top: calc(var(--bar-h) + 1rem); } .act--hero .eyebrow { margin-bottom: var(--sc-3); } .act--insights { padding-block: clamp(2rem, 5vh, 4rem); } .act--services { padding-block: clamp(2rem, 5vh, 4rem); } .act--why { padding-block: clamp(2rem, 5vh, 4rem); } .act--close .close { min-height: 84vh; } .act--close .close__grid { padding-top: calc(var(--bar-h) + 1rem); } /* --------------------------------------------------------------------------- THE PEAK ON A PHONE, consolidated. The brief measured 1066px in an 844px viewport, which pushed the closing line clean out of the dark panel and onto the cream of the next act. A lock that overflows its own ground is not a lock. Every value stated once here rather than accumulated across appended blocks, which is how v1 drifted. --------------------------------------------------------------------------- */ @media (max-width: 760px) { .stage--peak { align-items: flex-start; } .stage--peak .wrap { padding-block: var(--sc-3); } .brief { padding: var(--sc-2) var(--sc-3); } .brief__head { flex-wrap: nowrap; align-items: center; padding-bottom: var(--sc-2); } .brief__head h2 { font-size: 0.88rem; } .brief__k { font-size: 0.6rem; } .brief__stamp { font-size: 0.58rem; padding: 0.2rem 0.5rem; white-space: nowrap; } .brief__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sc-2); padding-block: var(--sc-2); } .brief__b h3 { margin-bottom: 0.18rem; padding-bottom: 0.16rem; font-size: 0.62rem; } .brief__b dl > div { padding: 0.02rem 0; font-size: 0.74rem; line-height: 1.3; gap: var(--sc-2); } .brief__b dt { font-size: 0.7rem; flex: 0 0 auto; } .brief__b dd { font-size: 0.74rem; flex: 1 1 auto; } .brief__b p { font-size: 0.7rem; line-height: 1.32; } .brief__b--s, .brief__b--m { padding-left: var(--sc-3); } .brief__route { margin-bottom: 0.2rem !important; } .brief__route .proof { font-size: 0.8rem; } .brief__routewhy { font-size: 0.68rem !important; line-height: 1.3; } .brief__foot { flex-direction: column; gap: 0.12rem; padding-top: var(--sc-2); } .brief__belief { font-size: 0.82rem; } .brief__discl { font-size: 0.6rem; line-height: 1.28; } .peakhint { font-size: 0.7rem; line-height: 1.3; margin-top: var(--sc-3); } } /* Team, process and record are flow acts now. Pinned travel is (span - 1) x vh, so the 1.10-1.20 spans they had gave them barely 100px of travel each: the stage stuck for an instant and then scrolled away with its cues half fired. Twelve acts carrying this much content cannot all hold a viewport inside the 14vh ceiling, so only the peak pins and only the rooms pan. */ .act--team .stage, .act--process .stage { min-height: 0; padding-block: 0; display: block; } .act--team .stage { position: relative; overflow: hidden; border-radius: var(--sc-r-md); } .act--team .stage .wrap { padding-block: clamp(2rem, 5vh, 3.5rem); } .act--record .stage { min-height: 0; padding-block: 0; display: block; position: relative; overflow: hidden; border-radius: var(--sc-r-md); } .act--record .record { display: grid; gap: var(--sc-5); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); padding: clamp(1.5rem, 4vw, 3rem) var(--sc-gutter); align-items: start; transform: none !important; } .act--record .record__lead { grid-column: 1 / -1; flex: none; max-width: 46rem; } .act--record .award { flex: none; align-self: start; } .act--record .award--top { grid-column: span 1; } .act--record .record__note { grid-column: 1 / -1; flex: none; max-width: none; border-top: 1px solid var(--rule-soft); padding-top: var(--sc-3); } /* Landing. The record grid at eight scans plus two Top Guns ran to 1.42vh; the scans are proof, not a gallery, so they are filed small. */ .act--record .record { gap: var(--sc-4) var(--sc-3); grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); padding-block: clamp(1.25rem, 3vh, 2.25rem); } .act--record .record__lead { margin-bottom: var(--sc-2); } .act--record .record__total { margin: var(--sc-3) 0 var(--sc-2); } .act--record .record__total b { font-size: 1.9rem; } .act--record .award b { font-size: 0.72rem; } .act--record .award span { font-size: 0.6rem; } .act--record .award--top img { outline: 1px solid var(--sc-accent); outline-offset: 2px; } .act--record { padding-block: clamp(2rem, 5vh, 4rem); } .act--case .sheet__head { margin-bottom: var(--sc-3); } .act--case .firstproof { margin-top: var(--sc-3); } .act--process { padding-block: clamp(2rem, 5vh, 3.5rem); } .act--process .steps img { margin-bottom: var(--sc-3); } .act--close .close { min-height: 80vh; } .act--hero .hero .figures { margin-top: var(--sc-4); } .act--case .calc dl { margin-bottom: var(--sc-2); } .act--case .inputs { font-size: 0.78rem; } .act--close .close__grid { padding-bottom: var(--sc-4); } .act--record { padding-block: clamp(1.5rem, 4vh, 3rem); } .act--record .record { gap: var(--sc-3); padding-block: var(--sc-4); } /* The scans arrive square and portrait, and cropping them to one ratio cut the award names off, which defeats the caption. Contain them instead: the tile shape stays regular, and every scan is fully legible. Eight items, four to a row, so no orphan. */ .act--record .record { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-4) var(--sc-3); } .award img { aspect-ratio: 4 / 5; object-fit: contain; background: color-mix(in oklab, var(--sc-ink) 5%, transparent); padding: 0.35rem; } .award--top img { background: color-mix(in oklab, var(--sc-accent) 10%, transparent); } @media (max-width: 900px) { .act--record .record { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Eight scans, four to a row, two rows. Kept compact: they are evidence filed beside the claim, not a gallery. */ .act--record .award img { aspect-ratio: 1 / 1; padding: 0.3rem; } .act--record .record { gap: var(--sc-3); } .act--record .record { padding-block: var(--sc-3); } .act--case .evidence { margin-top: var(--sc-2); } .act--close .close { min-height: 78vh; } /* Both of those were copy-locked client passages and hiding them to save height is not a trim, it is a deletion. Restored; the height comes out of the number of insight cards instead, which is curation. */ .act--record .record__body { font-size: 0.8rem; margin-top: var(--sc-2); } /* =========================================================================== DESIGN REPAIR, 2026-08-31. The page above was trimmed hard to keep the total under the skill's 14vh guideline, and the trimming damaged it. Two things went wrong in opposite directions and both were mine: - The award scans ended up 331px wide at 1512, in ERA's own full-saturation pink and gold, dominating a calm cream page. They are evidence filed beside a claim, not a gallery. - Serene and Mei ended up as 128px thumbnails, when the whole brief is that the product IS Serene and Mei, and chapter 6 asks for their portraits at meaningful scale. The budget was a guideline with a stated rationale, and I let it outrank the design. A twelve-act marketing site carrying a live instrument legitimately runs longer than fourteen viewports. It now runs about sixteen, and that is the right trade. =========================================================================== */ /* --- the people, at the scale the brief asks for ------------------------- */ .person { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--sc-5); } .person > img { filter: drop-shadow(0 18px 34px rgba(20,29,49,0.22)); } .person__body h3 { font-size: 1.75rem; } .person__bio { font-size: 0.95rem; } .act--team { padding-block: clamp(3.5rem, 8vh, 6rem); } .act--team .stage .wrap { padding-block: clamp(3rem, 7vh, 5rem); } .team__head { margin-bottom: var(--sc-7); } .team__pair { gap: var(--sc-7); } .why { gap: var(--sc-8); grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); } .why__people img { width: 82%; } .act--why { padding-block: clamp(3.5rem, 8vh, 6rem); } .act--why .why__list { margin-top: var(--sc-6); gap: var(--sc-4); } /* --- the record: evidence, filed small ---------------------------------- */ .act--record { padding-block: clamp(3rem, 7vh, 5.5rem); } .act--record .stage { background: transparent; } .record__ground { opacity: 0.08; } .act--record .record { grid-template-columns: repeat(auto-fill, 142px); justify-content: start; gap: var(--sc-5) var(--sc-4); padding: 0 var(--sc-gutter); } .act--record .record__lead { margin-bottom: var(--sc-4); } .act--record .record__body { font-size: 0.88rem; max-width: 44ch; } .award img { aspect-ratio: 3 / 4; object-fit: contain; padding: 0.3rem; filter: saturate(0.26) contrast(0.92) brightness(1.04); } .award--top img { filter: saturate(0.5) contrast(0.95); } .award:hover img, .award:focus img, .award:focus-within img { filter: none; } .award b { font-size: 0.7rem; line-height: 1.25; } .award span { font-size: 0.58rem; } /* --- let the rest breathe again ------------------------------------------ */ .act--services { padding-block: clamp(3.5rem, 8vh, 6rem); } .act--services .head { margin-bottom: var(--sc-7); } .act--services .svc { gap: var(--sc-7) var(--sc-5); } .act--insights { padding-block: clamp(3.5rem, 8vh, 6rem); } .act--insights .head { margin-bottom: var(--sc-6); } .act--insights .posts { gap: var(--sc-5); } .act--insights .posts li p:last-child { font-size: 0.84rem; } .act--process { padding-block: clamp(3.5rem, 8vh, 6rem); } .act--process .head { margin-bottom: var(--sc-6); } .act--case { padding-block: clamp(3rem, 7vh, 5rem); } .act--case .sheet { padding: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: var(--sc-5); } .act--case .inputs { font-size: 0.86rem; } .act--case .inputs th[scope="row"], .act--case .inputs td { padding: 0.5rem 1rem 0.5rem 0; } .act--case .calcs { gap: var(--sc-4); } .act--case .calc { padding: var(--sc-4); } .act--case .routes { margin-top: var(--sc-5); gap: var(--sc-4); } /* The team stage had its own background and radius, which drew a lighter card floating on the drifted ground with a seam that read as a mistake. It runs full bleed instead; W08 plus the gradient overlay is the ground. */ .act--team .stage { border-radius: 0; background: transparent; } .stage--team { background: transparent; } .stage--team::after { background: linear-gradient(90deg, color-mix(in oklab, #F5F0E7 96%, transparent) 0%, color-mix(in oklab, #F5F0E7 90%, transparent) 52%, color-mix(in oklab, #F5F0E7 78%, transparent) 100%) !important; } .act--record .stage { border-radius: 0; } /* The rooms rail is deliberately 2288px wide and the hero portraits deliberately overrun their column; both are meant to be clipped. Without a clip on the act they leaked about 22px at 1280 and 1100 and the whole page scrolled sideways. `clip` rather than `hidden`: hidden would make each act a scroll container and break the sticky stages inside them. */ .act { overflow-x: clip; } .stage { overflow-x: clip; } /* --------------------------------------------------------------------------- ONE LEFT EDGE. Most sections sit inside .wrap, which is 78rem centred with a gutter, so their content starts at (100vw - 78rem)/2 + gutter. The rooms rail and the record grid are full-bleed and were padded with the raw gutter instead, so on any screen wider than 78rem they started ~130px to the left of every other section. That misalignment is what makes a page read as "not in place", and it is invisible at the one width you happen to test. --------------------------------------------------------------------------- */ :root { --edge: calc(max(0px, (100vw - 78rem) / 2) + var(--sc-gutter)); } .rooms { padding-inline: var(--edge) var(--sc-gutter); } .act--record .record { padding-inline: var(--edge) var(--sc-gutter); } .act--record .record__lead, .act--record .record__note { padding-right: var(--sc-gutter); } /* The record band ended with a hard edge and a dead gap under it. */ .act--record .stage { padding-bottom: var(--sc-5); } .record__ground { opacity: 0.07; } /* The dark panel fades out across the top of the services act, and the act's content is vertically centred, which put the eyebrow and heading right in the fade. Shorten the fade and start the content clear of it. */ .act--services { background: linear-gradient(180deg, #1B2438 0%, rgba(27,36,56,0) 15%); justify-content: flex-end; padding-top: clamp(4rem, 9vh, 7rem); } /* --------------------------------------------------------------------------- THE HERO, at real laptop heights. At 1512x860 the copy column ran under the portraits and the three figures fell off the bottom edge. The headline was taking four lines and the copy column was wider than the space actually clear of the people. --------------------------------------------------------------------------- */ .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: var(--sc-5); } .hero__copy { max-width: 31rem; } .act--hero .display { font-size: clamp(2.2rem, 1.4rem + 2.9vw, 3.9rem); margin-bottom: var(--sc-3); } .act--hero .lede { max-width: 30rem; margin-bottom: var(--sc-4); font-size: clamp(0.98rem, 0.94rem + 0.25vw, 1.08rem); } .act--hero .eyebrow { font-size: 0.68rem; margin-bottom: var(--sc-3); } .hero__people { height: min(56vh, 26rem); justify-content: flex-end; } .hero .figures { margin-top: var(--sc-4); gap: var(--sc-4); } .hero .figures dd { font-size: clamp(1.35rem, 1rem + 0.9vw, 1.8rem); } /* Short laptops: the hero must still show its own stats. */ @media (max-height: 900px) and (min-width: 1000px) { .act--hero .display { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.3rem); } .hero__people { height: min(50vh, 22rem); } .act--hero .hero__grid { padding-bottom: var(--sc-4); } } /* The hero stack still ran about 70px past the fold at every laptop size, so the three figures were cut in half. The headline carries the page; it can afford the reduction. */ .act--hero .display { font-size: clamp(2rem, 1.3rem + 2.3vw, 3.35rem); line-height: 1.04; } .act--hero .hero__grid { padding-top: calc(var(--bar-h) + 0.5rem); padding-bottom: var(--sc-4); } .act--hero .hero__acts .btn { min-height: 42px; padding: 0.62rem 1.05rem; font-size: 0.84rem; } .hero .figures { margin-top: var(--sc-3); } .hero .figures > div { padding-top: var(--sc-2); } .hero .figures dt { font-size: 0.58rem; letter-spacing: 0.09em; } .hero .figures dd { font-size: clamp(1.2rem, 0.95rem + 0.7vw, 1.55rem); } /* The figure band under the hero. */ .act--hero { min-height: 0; } .act--hero .hero { min-height: 100vh; } .figband { padding-block: clamp(2rem, 5vh, 3.5rem); } .figband .figures { margin-top: 0; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: var(--sc-7); } .figband .figures > div { border-top: 2px solid var(--sc-accent); padding-top: var(--sc-3); } .figband .figures dt { font-size: 0.66rem; } .figband .figures dd { font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem); } .figband .claim__note { margin-top: var(--sc-5); } @media (max-width: 700px) { .figband .figures { grid-template-columns: minmax(0,1fr); gap: var(--sc-4); } } /* Bottom-aligning the hero grid fought the portrait column, whose height set the row and pushed the copy past the fold. Centre both axes and let the columns align to their own bottoms. */ .hero { align-items: center; } .act--hero .hero__grid { align-items: center; padding-top: var(--bar-h); padding-bottom: var(--sc-5); } .hero__copy { align-self: center; } .hero__people { align-self: end; } /* The portraits are square cut-outs whose subject ends at the hip, so the asset's own bottom edge reads as a hard horizontal cut, and the drop-shadow traced a line along it. Fade the last of the figure out so they stand in the scene instead of being pasted onto it. */ .hero__p, .why__people img, .person > img { -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 99%); mask-image: linear-gradient(180deg, #000 82%, transparent 99%); filter: drop-shadow(0 14px 26px rgba(20,29,49,0.18)); } .hero__people { height: min(58vh, 25rem); } /* Sizing the portraits by height made each one as wide as it was tall, so the pair overflowed their column and covered the copy. Size by width instead. */ .hero__people { height: auto; align-items: flex-end; justify-content: flex-end; gap: 0; } .hero__p { height: auto; width: 50%; max-height: min(58vh, 25rem); object-fit: contain; object-position: bottom; } .hero__p--s { margin-right: -6%; } .hero__p--m { transform: translateY(2%) scale(0.95); } /* --------------------------------------------------------------------------- The portraits, final arrangement. Sized inside a grid column they were either too wide (covering the copy) or too small (floating busts). They belong to the PHOTOGRAPH, not to the text layout: anchored to the bottom-right of the hero, at real scale, cropped by the frame the way anyone standing in a shot would be. The copy keeps its own column and never meets them. --------------------------------------------------------------------------- */ .hero__grid { grid-template-columns: minmax(0, 1fr); } .hero__people { position: absolute; right: 0; bottom: 0; z-index: 2; height: min(74vh, 33rem); width: auto; display: flex; align-items: flex-end; justify-content: flex-end; pointer-events: none; margin: 0; } .hero__p { height: 100%; width: auto; max-height: none; max-width: none; object-fit: contain; object-position: bottom; -webkit-mask-image: none; mask-image: none; filter: drop-shadow(0 16px 30px rgba(20,29,49,0.20)); } .hero__p--s { margin-right: -8%; transform: none; } .hero__p--m { transform: translateY(1%) scale(0.94); } .hero__copy { max-width: 33rem; } @media (max-width: 1000px) { .hero__people { display: flex; height: min(46vh, 20rem); opacity: 0.5; } } @media (max-width: 700px) { .hero__people { display: none; } } /* The source portraits are SQUARE with transparent margins either side, so sizing them tall also made them wide enough to cover the headline. Crop to a portrait aspect with object-fit: cover, which trims the empty margins rather than the person, and they can be tall without being wide. */ .hero__people { right: 2%; bottom: 0; height: min(58vh, 27rem); align-items: flex-end; } .hero__p { height: 100%; width: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 100%; } .hero__p--s { margin-right: -4%; } .hero__p--m { transform: none; height: 94%; } @media (max-width: 1200px) { .hero__people { height: min(50vh, 22rem); right: 0; } } /* Soften only the last few percent, so the cut-out's own bottom edge stops reading as a ledge. Not enough to cut the figure. */ .hero__p { -webkit-mask-image: linear-gradient(180deg, #000 93%, transparent 100%); mask-image: linear-gradient(180deg, #000 93%, transparent 100%); } /* --------------------------------------------------------------------------- THE PEAK'S ENTRY. A pinned stage is on screen for a full viewport BEFORE its pin begins, and p is 0 for all of it. The brief's first cue is at 0.06, so for that entire entry slide the visitor scrolled past a large empty bordered box. It read as a broken panel, which is the opposite of the effect. The card now fades in with the pin itself, driven off the act's own --sc-p, so there is nothing to see until the document starts assembling. Opacity is clamped by the browser, so the calc needs no clamp of its own. --------------------------------------------------------------------------- */ .brief { opacity: calc((var(--sc-p, 0) - 0.028) * 60); } @media (prefers-reduced-motion: reduce) { .brief { opacity: 1; } } /* Eight scans in an auto-fill track left a single orphan on a second row. Four to a row, two rows, on any screen wide enough to hold them. */ @media (min-width: 1000px) { .act--record .record { grid-template-columns: repeat(4, 142px); } } /* The six blocks sit in flow at opacity 0 before they arrive, so the card was drawn at FULL height from the first frame and read as a big empty box with a header in it. Fading the card in did not fix that; the card has to grow. Its height follows the act's own progress, so the document builds downward as you scroll and is never a hollow frame. */ .brief { max-height: calc(11vh + var(--sc-p, 0) * 130vh); overflow: hidden; } @media (prefers-reduced-motion: reduce) { .brief { max-height: none; overflow: visible; } } /* The peak stage centres its content in the full viewport, so the top of the brief slid under the fixed bar. Reserve the bar's height. */ .stage--peak .wrap { padding-top: calc(var(--bar-h) + var(--sc-4)); padding-bottom: var(--sc-5); } @media (max-width: 760px) { .stage--peak .wrap { padding-top: calc(var(--bar-h) + var(--sc-2)); padding-bottom: var(--sc-3); } .peakhint { margin-top: var(--sc-2); } } /* =========================================================================== REVIEW PASS, 2026-08-31 (second). Notes from the client read frame by frame. Almost every defect below is the same failure: an absolutely positioned layer sized to a box that is smaller than the band it appears to fill, so its own edge draws a horizontal line the design never asked for. The hinge photograph, the record ground and the close's footer were all that. They are fixed by masking the layer, not by nudging the box. =========================================================================== */ /* --- 1. THE HERO --------------------------------------------------------- The three figures come back INSIDE the hero, under the action row, so the opening screen carries the whole claim. The copy sits a little high of centre and the two of them stand taller, so the pair reads as balanced with the text rather than as two small figures parked in the corner. */ .act--hero .hero__grid { align-items: center; padding-top: calc(var(--bar-h) + var(--sc-3)); padding-bottom: clamp(3.5rem, 9vh, 6.5rem); } .hero__copy { max-width: 34rem; } .hero__copy .figures { margin: var(--sc-5) 0 0; display: grid; gap: var(--sc-6); grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; } .hero__copy .figures > div { border-top: 2px solid var(--sc-accent); padding-top: var(--sc-3); } .hero__copy .figures dt { font-size: 0.6rem; letter-spacing: 0.1em; margin-bottom: 0.1rem; } .hero__copy .figures dd { font-size: clamp(1.45rem, 1.05rem + 1.1vw, 2.05rem); } .hero__copy .claim__note { margin: var(--sc-4) 0 0; font-size: 0.82rem; } /* Taller, and closer to the copy. The mask now only dissolves the last few percent, so more of the figure is present and the cut-out's own bottom edge still never draws a line across the courtyard. */ .hero__people { right: 3%; bottom: 0; height: min(76vh, 35rem); } .hero__p { -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, #000 86%, transparent 100%); } .hero__p--s { margin-right: -5%; } .hero__p--m { height: 95%; } @media (max-height: 900px) and (min-width: 1000px) { .hero__people { height: min(70vh, 30rem); } } @media (max-width: 1200px) { .hero__people { height: min(58vh, 25rem); right: 0; opacity: 0.9; } } @media (max-width: 1000px) { .hero__copy .figures { gap: var(--sc-5); } } @media (max-width: 700px) { .hero__copy .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-3); } .hero__copy .figures dt { font-size: 0.54rem; } .hero__copy .figures dd { font-size: 1.35rem; } } /* --- 2. THE HINGE -------------------------------------------------------- .hinge is only as tall as its two lines, so the photograph inset into it was a band with two hard edges sitting in the middle of the fade. It fills the act now, and both ends of the image dissolve, so the page goes cream to navy in one uninterrupted move. */ .act--hinge { display: flex; align-items: center; background: linear-gradient(180deg, rgba(27,36,56,0) 0%, rgba(27,36,56,0.55) 34%, #1B2438 72%, #1B2438 100%); } .hinge { align-self: stretch; display: flex; align-items: center; min-height: 46vh; } .hinge__media { inset: 0; opacity: 0.26; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 68%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 68%, transparent 100%); } .act--hinge::after { background: linear-gradient(180deg, rgba(20,26,42,0.10) 0%, rgba(20,26,42,0.55) 50%, rgba(20,26,42,0.30) 100%) !important; } /* --- 3. THE PEAK'S ENTRY ------------------------------------------------- A pinned stage occupies a whole viewport before p starts moving. With the card faded out for all of it that viewport was empty navy, which read as a gap in the page. The brief's header is present from the first frame instead, and the document grows out of it. */ .brief { opacity: 1; max-height: calc(4.9rem + var(--sc-p, 0) * 132vh); } @media (max-width: 760px) { .brief { max-height: calc(4.2rem + var(--sc-p, 0) * 140vh); } } @media (prefers-reduced-motion: reduce) { .brief { max-height: none; } } .act--case { padding-bottom: clamp(1.5rem, 3vh, 2.5rem); } /* --- 4. OUT OF THE DARK CHAPTER ----------------------------------------- The fade was 15% of the act and the heading started immediately under it, so the navy looked like it had been cut off rather than let go. It resolves over a third of the act now, and the eyebrow starts well clear of it. */ .act--services { background: linear-gradient(180deg, #1B2438 0%, rgba(27,36,56,0.86) 9%, rgba(27,36,56,0.30) 22%, rgba(27,36,56,0) 36%); padding-top: clamp(8rem, 18vh, 13rem); } /* --- 5. THE TWO OF THEM, AGAIN ------------------------------------------ The client's own formal portrait of the pair, rather than the same two cut-outs a third time. */ .why__people { display: block; margin: 0; align-self: center; } .why__people img { width: 100%; height: auto; border-radius: var(--sc-r-md); -webkit-mask-image: none; mask-image: none; filter: none; box-shadow: var(--sc-e2); } /* --- 6. THE RECORD ------------------------------------------------------- The lead spanned an award grid four columns of 142px wide, so a paragraph with a 46rem max-width was being folded into 620px and read as a squeezed left column. The lead is its own block now and the wall is centred under it. The ground photograph is masked for the same reason as the hinge's. */ .act--record .stage { padding-bottom: 0; } .record__ground { opacity: 0.06; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); } .act--record .record { display: block; padding: 0; width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: var(--sc-gutter); } .act--record .record__lead { max-width: 44rem; margin: 0 auto var(--sc-6); text-align: center; } .act--record .record__body { margin: 0 auto; max-width: 52ch; font-size: 0.92rem; } .act--record .record__total { margin: var(--sc-4) 0 0; } .record__grid { display: grid; justify-content: center; align-items: start; grid-template-columns: repeat(auto-fit, 142px); gap: var(--sc-5) var(--sc-4); } .act--record .record__note { max-width: 60ch; margin: var(--sc-6) auto 0; text-align: center; font-size: 0.74rem; color: var(--sc-ink-soft); border-top: 1px solid var(--rule-soft); padding: var(--sc-4) 0 0; } @media (max-width: 700px) { .record__grid { grid-template-columns: repeat(auto-fit, 120px); gap: var(--sc-4) var(--sc-3); } } /* --- 7. THE CLOSE -------------------------------------------------------- .close is 78vh inside a flow act the engine sizes from its span, so the last couple of viewport-percent under the footer fell through to the page's cream and read as a stray white strip. The act carries the dark ground itself. */ .act--close { background: #0E1523; } .act--close .close { min-height: 100%; } /* --- 8. THE DEAD SCREENS ------------------------------------------------ Two of them, both measured rather than guessed. The rooms rail is 455px inside a 100vh stage and was top-aligned, leaving 473px of nothing under it. It centres. The peak's brief was centred in its sticky stage, so at the moment the act began the card sat ~430px BELOW the fold: the visitor scrolled a full screen of empty navy before anything appeared, which is the gap in the client's fourth frame. The document starts at the top of the stage and builds downward, which is also what a document does. The span comes down with it. */ .act--rooms .stage { display: flex; align-items: center; } .rooms { margin-block: auto; } .stage--peak { align-items: flex-start; } /* --- 9. THE SERVICES GRID AND ITS SKY ----------------------------------- The fade was expressed as a percentage of an act whose height changes with its content, so it never landed where the padding put the heading. Stated in vh it resolves in the same place every time, well above the eyebrow. */ .act--services { background: linear-gradient(180deg, #1B2438 0%, rgba(27,36,56,0.88) 5vh, rgba(27,36,56,0.34) 12vh, rgba(27,36,56,0) 19vh); padding-top: clamp(9rem, 23vh, 15rem); } .svc { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .svc { grid-template-columns: minmax(0, 1fr); } } /* --- 10. THE RECORD WALL, four to a row --------------------------------- */ @media (min-width: 1000px) { .record__grid { grid-template-columns: repeat(4, 142px); } } @media (min-width: 700px) and (max-width: 999px) { .record__grid { grid-template-columns: repeat(3, 142px); } } /* --- 11. THE CLOSE FILLS ITS ACT --------------------------------------- min-height: 100% needs a definite parent height and the act has none, so the photograph stopped short and the act's own ground showed under it. */ .act--close { display: flex; flex-direction: column; } .act--close .close { flex: 1 1 auto; min-height: 84vh; } .act--close .close__grid { padding-top: calc(var(--bar-h) + 2.5rem); } /* --- 12. THE HERO PORTRAITS' FOOT -------------------------------------- Fading from 86% left a translucent lower body reading as a ghost. The figures are solid almost the whole way down and only the last few percent dissolves, which is all the cut-out's hard edge needs. */ .hero__p { -webkit-mask-image: linear-gradient(180deg, #000 94%, transparent 100%); mask-image: linear-gradient(180deg, #000 94%, transparent 100%); } /* The brief's header carried a cue, so during the pin's entry the card was drawn at its collapsed height with nothing inside it: a small empty box rather than a document about to be written. The header is the frame and is present from the first frame; only the six blocks assemble. */ .brief__head { padding-bottom: var(--sc-3); } /* The act was bottom-justified, so its padding-top could not open the gap the fade needs: the content simply sat against the bottom of a taller box and the heading stayed up in the navy. Top-justified, the padding governs. */ .act--services { justify-content: flex-start; } /* =========================================================================== SPECIFICITY. The base rule is `.act[data-sc-act="flow"]`, a class AND an attribute, so every `.act--x { padding-block }` and `justify-content` in this file below it has been losing silently for the whole build: the declarations are there, the browser discards them, and nothing reports it. That is why the services heading kept sitting in the navy however much padding it was given. Doubling the class matches the base and wins on order. =========================================================================== */ .act.act--hero { padding: 0; } .act.act--services { justify-content: flex-start; padding-top: clamp(9rem, 22vh, 14rem); padding-bottom: clamp(3rem, 8vh, 6rem); } .act.act--case { padding-bottom: clamp(1.5rem, 4vh, 3rem); } .act.act--why, .act.act--record, .act.act--process, .act.act--insights { padding-block: clamp(3.5rem, 8vh, 6rem); } /* The collapsed card was 4.9rem, which cut the case number through the middle of its glyphs. Tall enough for the header row, and no taller. */ .brief { max-height: calc(7.4rem + var(--sc-p, 0) * 130vh); } @media (max-width: 760px) { .brief { max-height: calc(5.6rem + var(--sc-p, 0) * 140vh); } } @media (prefers-reduced-motion: reduce) { .brief { max-height: none; } } /* The cut-outs carry a band of transparency below the hip, so however tall they are made their fabric stops short of the courtyard floor and leaves a pale gap. Dropping the frame below the fold puts that empty band off screen and the two of them stand ON the ground rather than above it. */ .hero__people { height: min(84vh, 39rem); bottom: -5%; right: 3%; } @media (max-height: 900px) and (min-width: 1000px) { .hero__people { height: min(78vh, 34rem); } } @media (max-width: 1200px) { .hero__people { height: min(64vh, 27rem); bottom: -4%; right: 0; } } /* Sized only against height, the pair grew as wide as a 1280 laptop's copy column and covered the third button and the last figure label. Width is the binding constraint between 1000 and 1500, so it belongs in the min(). */ .hero__people { height: min(84vh, 39rem, 34vw); right: 0; } @media (max-height: 900px) and (min-width: 1000px) { .hero__people { height: min(78vh, 34rem, 34vw); } } /* Belt and braces: whatever the arithmetic, the sentence wins over the picture. */ .hero__copy { position: relative; z-index: 3; } /* Softening the hinge scrim to kill the hard band took the standfirst to 4.09:1. The scrim comes back where the text actually sits and the line is lifted off the soft ink token. */ .act--hinge::after { background: linear-gradient(180deg, rgba(20,26,42,0.10) 0%, rgba(20,26,42,0.66) 46%, rgba(20,26,42,0.62) 62%, rgba(20,26,42,0.30) 100%) !important; } .hinge__sub { color: #C7D2E6; } /* On a phone there are no portraits, so the 100vh hero left its lower third as an empty pale field: the left-hand wash covers nearly the whole width at that size. The wash reads as a vertical veil instead, so the courtyard carries the bottom of the frame. */ @media (max-width: 700px) { .act.act--hero .hero { min-height: 88vh; } .hero__wash { background: linear-gradient(180deg, color-mix(in oklab, #F7F4EF 74%, transparent) 0%, color-mix(in oklab, #F7F4EF 92%, transparent) 24%, color-mix(in oklab, #F7F4EF 92%, transparent) 64%, color-mix(in oklab, #F7F4EF 40%, transparent) 88%, color-mix(in oklab, #F7F4EF 18%, transparent) 100%); } .act--hero .hero__grid { padding-bottom: clamp(2rem, 6vh, 4rem); } } /* Serene still crossed the copy column on a wide screen. Tightening the pair into each other moves her right without moving Mei off the frame, and the pair comes down a size so the whole group clears the sentence. */ .hero__people { height: min(84vh, 35rem, 31vw); right: 0; } @media (max-height: 900px) and (min-width: 1000px) { .hero__people { height: min(78vh, 32rem, 31vw); } } .hero__p--s { margin-right: -20%; } /* The chrome's action is a real link now, back to the QBYX collection: the one live destination on a page whose client affordances are all deliberately inert. It was a