/* ============================================================================ CAPSEAD — capsead.com The production translation of the locked V3 design reference (CAPSEAD-web-exploration/2026-09-17/convergence-v3.html + DESIGN-LOCK.md). The Living Record: Record -> Context -> Awareness -> Reading. Tokens are the product's own, lifted verbatim from DESIGN.md front-matter. Every size below 16px lands on the ratified ladder: 11 / 12 / 13 / 14. Motion rule: the HTML is the FINAL state. Nothing here hides content unless site.js has put `motion` on (it never does under reduced motion), so the page reads completely without JavaScript and with motion turned off. ========================================================================== */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/inter-latin-var.v1.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* metric-matched fallback, so the swap to Inter does not move the layout */ @font-face { font-family: 'Inter Fallback'; src: local('Arial'); ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%; } :root { color-scheme: dark; --ground: #08080E; --ground-inset: #0A0A12; --ground-occluding: #0C0C15; --wash: rgba(255, 255, 255, 0.028); --wash-hover: rgba(255, 255, 255, 0.045); --wash-selected: rgba(255, 255, 255, 0.062); --line: rgba(255, 255, 255, 0.075); --line-inner: rgba(255, 255, 255, 0.045); --line-strong: rgba(255, 255, 255, 0.15); --ink: #ECEAE6; --ink-secondary: #A8A49E; --ink-faint: #8E8B85; --teal: #18D0D7; --teal-tint: rgba(24, 208, 215, 0.12); --teal-line: rgba(24, 208, 215, 0.28); --teal-focus: rgba(24, 208, 215, 0.55); --gold: #C4922A; --gold-dim: rgba(196, 146, 42, 0.12); --gold-line: rgba(196, 146, 42, 0.28); --steel: #5A87B8; --steel-dim: rgba(90, 135, 184, 0.12); --sage: #6AAD82; --amber: #C47B2A; /* the CAPSEAD Score spectrum — only where CAPSEAD reads the record */ --score-navy: #2A5A96; --score-blue: #1E7AD8; --score-cyan: #1BB0DC; --score-teal: #22D3C6; --r-spine: 2px; --r-chip: 4px; --r-control: 6px; --r-panel: 8px; --r-modal: 14px; --r-pill: 999px; --t-micro-size: 11px; --t-meta-size: 12px; --t-body-size: 13px; --t-row-size: 14px; --t-section-size: 16px; --t-title-size: 19px; --font: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --ease-lock: cubic-bezier(0, 0, 0.6, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-settle: cubic-bezier(0.22, 1.02, 0.36, 1); --page-max: 1240px; --gut: 40px; --nav-h: 72px; } @media (max-width: 760px) { :root { --gut: 20px; } } *, *::before, *::after { box-sizing: border-box; } html { background: var(--ground); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 76px; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } [hidden] { display: none !important; } /* a Replay control keeps its place before it first appears, so nothing below it moves */ .replay[hidden] { display: inline-flex !important; visibility: hidden; } img, svg { display: block; } main:focus { outline: none; } a { color: inherit; } button { font: inherit; color: inherit; } p { margin: 0; } h1, h2, h3 { margin: 0; font-weight: inherit; } ul, ol { margin: 0; padding: 0; list-style: none; } .num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } .micro { font-size: var(--t-micro-size); font-weight: 700; line-height: 1.2; letter-spacing: 0.09em; text-transform: uppercase; } .t-meta { font-size: var(--t-meta-size); line-height: 1.45; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } :focus-visible { outline: 2px solid var(--teal-focus); outline-offset: 3px; border-radius: var(--r-chip); } ::selection { background: rgba(24, 208, 215, 0.28); color: var(--ink); } .wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gut); } #dock-sentinel { position: absolute; top: 18px; left: 0; width: 1px; height: 1px; pointer-events: none; } .skip { position: fixed; left: 16px; top: 12px; z-index: 100; padding: 12px 18px; border-radius: var(--r-pill); background: var(--ink); color: var(--ground); font-size: var(--t-row-size); font-weight: 600; text-decoration: none; transform: translateY(-160%); transition: transform .2s var(--ease-out); } .skip:focus { transform: none; } /* the same glyph for a kind of saved thing, everywhere on the page */ .g { display: inline-block; flex: 0 0 auto; border-radius: 1px; vertical-align: middle; } .g-contact { width: 2px; height: 13px; background: var(--teal); } .g-commit { width: 4px; height: 10px; background: var(--gold); } .g-note { width: 2px; height: 6px; background: var(--ink-faint); } .g-memory { width: 5px; height: 5px; background: var(--steel); } .g-done { width: 2px; height: 11px; background: var(--sage); } .g-late { width: 4px; height: 10px; background: var(--amber); } .g-score { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--score-cyan); } /* ===================== NAVIGATION ======================================= */ /* Integrated into the arrival; gains material presence once the page moves. */ .nav-rail { position: fixed; top: 0; left: 0; right: 0; z-index: 70; background: rgba(8, 8, 14, 0); border-bottom: 1px solid transparent; transition: background-color .5s var(--ease-lock), border-color .5s var(--ease-lock), -webkit-backdrop-filter .5s var(--ease-lock), backdrop-filter .5s var(--ease-lock); } .docked .nav-rail { background: rgba(8, 8, 14, .74); border-bottom-color: var(--line); -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%); } .nav { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gut); height: var(--nav-h); display: flex; align-items: center; gap: 30px; transition: height .5s var(--ease-lock); } .docked .nav { height: 58px; } .nav-mark { display: flex; align-items: center; margin-right: auto; border-radius: var(--r-control); } .nav-mark img { height: 30px; width: auto; transition: height .5s var(--ease-lock); } .docked .nav-mark img { height: 26px; } .nav-links { display: flex; gap: 2px; position: relative; } .nav-links a { position: relative; z-index: 1; font-size: var(--t-row-size); font-weight: 500; color: var(--ink-secondary); text-decoration: none; padding: 8px 14px; border-radius: var(--r-control); transition: color .22s var(--ease-out); } .nav-links a:hover, .nav-links a[aria-current] { color: var(--ink); } .nav-links a[aria-current]::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 1px; background: var(--line-strong); } .nav-ink { position: absolute; top: 0; left: 0; height: 100%; width: 0; border-radius: var(--r-control); background: var(--wash-hover); opacity: 0; pointer-events: none; z-index: 0; transition: transform .36s var(--ease-out), width .36s var(--ease-out), opacity .22s var(--ease-out); } .nav-signin { font-size: var(--t-row-size); font-weight: 500; color: var(--ink-secondary); text-decoration: none; padding: 8px 6px; margin-right: -12px; white-space: nowrap; border-radius: var(--r-control); transition: color .22s var(--ease-out); } .nav-signin:hover { color: var(--ink); } .nav-cta { font-size: var(--t-row-size); font-weight: 600; color: var(--ground); background: var(--teal); border: 1px solid transparent; padding: 0 17px; height: 38px; display: inline-flex; align-items: center; border-radius: var(--r-pill); text-decoration: none; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24); transition: transform .2s var(--ease-out), box-shadow .3s var(--ease-out), background-color .2s var(--ease-out); } .nav-cta:focus-visible, .btn-primary:focus-visible { outline-color: var(--ink); } @media (max-width: 860px) { .nav { height: 62px; gap: 6px; } .docked .nav { height: 56px; } .nav-mark { min-width: 44px; min-height: 44px; margin-left: -10px; justify-content: center; } .nav-mark img, .docked .nav-mark img { height: 24px; } .nav-links a { padding: 0 10px; min-height: 44px; display: inline-flex; align-items: center; font-size: var(--t-body-size); } .nav-links a[aria-current]::after { left: 10px; right: 10px; bottom: 9px; } .nav-signin { margin-right: 0; padding: 0 10px; min-height: 44px; display: inline-flex; align-items: center; } .nav-cta { padding: 0 16px; height: 44px; } } /* phone: the mark, Sign in and Request access — the page itself is the navigation */ @media (max-width: 600px) { .nav-links { display: none; } .nav-signin { margin-left: auto; } } /* ===================== SHARED ========================================== */ .btn-primary { background: var(--teal); color: var(--ground); font-weight: 600; font-size: var(--t-row-size); height: 48px; padding: 0 26px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 10px; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24); transition: transform .2s var(--ease-out), box-shadow .3s var(--ease-out), background-color .2s var(--ease-out); } .btn-ghost { color: var(--ink-secondary); font-size: var(--t-row-size); font-weight: 500; height: 48px; padding: 0 22px; border: 1px solid var(--line); border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 9px; text-decoration: none; background: transparent; cursor: pointer; white-space: nowrap; transition: border-color .24s var(--ease-out), color .24s var(--ease-out), background-color .24s var(--ease-out), transform .2s var(--ease-out); } .btn-ghost svg, .btn-primary svg { width: 14px; height: 14px; flex: 0 0 auto; } .btn-ghost svg { transition: transform .24s var(--ease-out); } .note { font-size: var(--t-body-size); line-height: 1.64; color: var(--ink-faint); max-width: 74ch; border-left: 1px solid var(--line); padding-left: 15px; } .note b { color: var(--ink-secondary); font-weight: 600; } .note .lead { display: block; font-size: 17px; font-weight: 300; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 8px; } .replay { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); background: transparent; border: 1px solid var(--line); border-radius: var(--r-pill); min-height: 34px; padding: 0 15px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: color .22s var(--ease-out), border-color .22s var(--ease-out); } .replay svg { width: 11px; height: 11px; } @media (max-width: 860px) { .replay { min-height: 44px; padding: 0 18px; } } /* everything settles once: 6px, 500ms, the product's own curve */ .rv { transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); } .motion .rv:not(.in) { opacity: 0; transform: translateY(6px); } .rv[data-d="1"] { transition-delay: .07s; } .rv[data-d="2"] { transition-delay: .14s; } .rv[data-d="3"] { transition-delay: .21s; } /* ===================== CHAPTERS ========================================= */ /* The arrival's own grammar carried down the page: a caption that names the object (with the glyph of what it is made of, and a rule running to the edge like the record's own rows), then the statement in the page's one headline voice, with the explanation set beside it — not a kicker, an H2, a lede and a row of cards. */ .chap { position: relative; padding: 148px 0 0; } .chap:last-of-type { padding-bottom: 0; } #gather { padding-top: 112px; } #score { padding-top: 188px; } @media (max-width: 760px) { #gather { padding-top: 80px; } #score { padding-top: 116px; } } @media (max-width: 760px) { .chap { padding-top: 96px; } } .chap-cap { display: flex; align-items: center; gap: 12px; color: var(--ink-faint); } .chap-cap::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line); min-width: 24px; } .chap-cap b { color: var(--ink-secondary); font-weight: 600; } .chap-cap .sep { color: var(--line-strong); } @media (max-width: 760px) { .chap-cap { flex-wrap: wrap; row-gap: 6px; } .chap-cap::after { display: none; } } .chap-head { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 22px 72px; align-items: end; margin-top: 30px; } .chap-h { font-size: clamp(30px, 3.6vw, 46px); font-weight: 200; line-height: 1.08; letter-spacing: -0.034em; color: var(--ink); text-wrap: balance; max-width: 20ch; } #score .chap-h { font-size: clamp(36px, 5vw, 66px); max-width: 16ch; } .chap-say { font-size: 15px; line-height: 1.64; color: var(--ink-secondary); font-weight: 300; max-width: 48ch; text-wrap: pretty; padding-bottom: 6px; } .chap-say b { color: var(--ink); font-weight: 500; } @media (max-width: 900px) { .chap-head { grid-template-columns: 1fr; gap: 18px; margin-top: 22px; } .chap-say { font-size: 15px; padding-bottom: 0; } } /* ===================== 1 · ARRIVAL ====================================== */ /* The arrival is THE CAPSEAD LENS, and it is large enough to own its own files: /assets/css/lens.css and /assets/js/lens.js, loaded by index.html after these. Everything it needs from here it takes by reuse — the tokens, .wrap, .btn-primary, .btn-ghost, .replay, .sr-only and the .k-* signal kinds. Nothing in this section. */ /* ===================== 1b · WHAT CAPSEAD IS ============================== */ /* One short chapter between the arrival and the first reading, read in one pass: the category, the idea, why it holds, and what it means for the owner. Hierarchy does all the work, so no caption, card, rule or rail: the category a small crisp label, just saying what kind of product this is the idea the dominant line, in full ink. "working memory" is set one step heavier than its line (as the arrival sets CAPSEAD in its own) and is the only phrase on Home, besides the arrival's CAPSEAD, that carries the Mark Spectrum (Brand System §6): it names what CAPSEAD is, never the sentence around it the evidence comfortably readable, and plainly subordinate the payoff a second headline in full ink, well clear of the evidence, because it is the point: the conclusion the evidence leads to, and the moment's second stop for the eye A squint should find the idea and the payoff first. The headline forms out of fragments of its own letterforms (site.js) but the HTML is the final state: without the script, and under reduced motion, it simply is. */ .wm { position: relative; padding: 212px 0 136px; text-align: center; } .wm-cat { font-size: var(--t-meta-size); font-weight: 600; line-height: 1.2; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-secondary); } .wm-h { margin: 22px auto 0; max-width: 18em; font-size: clamp(32px, 3.6vw, 52px); font-weight: 300; line-height: 1.1; letter-spacing: -0.032em; color: var(--ink); text-wrap: balance; } .wm-word { font-weight: 400; white-space: nowrap; background-image: linear-gradient(97deg, #7FE2FD 0%, #0579EE 33%, #029E9B 70%, #02AC84 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .wm-word { color: var(--teal); -webkit-text-fill-color: currentColor; } } .wm-say { margin: 30px auto 0; max-width: 60ch; font-size: 18px; line-height: 1.62; font-weight: 400; color: var(--ink-secondary); text-wrap: pretty; } .wm-pay { position: relative; isolation: isolate; margin: 84px auto 0; font-size: clamp(28px, 2.95vw, 42px); line-height: 1.12; font-weight: 300; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; } .wm-pay > span { display: block; text-wrap: balance; } /* while the payoff resolves, a faint local lift of light behind it — only then; site.js removes it the moment the line is clear, so nothing of it remains */ .wm-lift { position: absolute; left: 50%; top: 50%; z-index: -1; width: 124%; height: 260%; pointer-events: none; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(236, 234, 230, .05), rgba(236, 234, 230, 0)); } /* while the definition waits to be read (site.js), the words it forms are not there yet */ .wm-armed .wm-h, .wm-armed .wm-say, .wm-armed .wm-pay { opacity: 0; } .wm-grain { position: absolute; left: 0; top: 0; pointer-events: none; } @media (max-width: 760px) { .wm { padding: 150px 0 106px; } /* a phone's headline is only two lines against a three-line payoff, so it takes a little more weight to stay first */ .wm-h { margin-top: 18px; font-size: 34px; font-weight: 350; } .wm-word { font-weight: 450; } .wm-say { margin-top: 24px; font-size: 16px; max-width: 34ch; } /* a phone composes the conclusion in its own lines */ .wm-pay { margin-top: 58px; font-size: 29px; line-height: 1.14; } .wm-pay > span { display: inline; } } @media (max-width: 360px) { .wm-h { font-size: 29px; } .wm-pay { font-size: 26px; } } /* ===================== HOME SCENES ======================================= */ /* Home is a small number of composed moments, each a contained object in open space, drawing the visitor closer: the record, one reading, the product, one relationship, then the Score opening around them. */ .scene { position: relative; padding: 128px 0 0; } @media (max-width: 760px) { .scene { padding-top: 88px; } } .scene-head { text-align: center; max-width: 760px; margin: 0 auto; } .scene-cap { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-faint); } .scene-cap b { color: var(--ink-secondary); font-weight: 600; } .scene-h { font-size: clamp(30px, 3.7vw, 48px); font-weight: 200; line-height: 1.08; letter-spacing: -0.034em; color: var(--ink); margin-top: 18px; text-wrap: balance; } .scene-say { margin: 18px auto 0; max-width: 54ch; font-size: 15px; line-height: 1.64; color: var(--ink-secondary); font-weight: 300; text-wrap: pretty; } .scene-say b { color: var(--ink); font-weight: 500; } .scene-foot { display: flex; justify-content: center; margin-top: 30px; } .more { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 4px; font-size: var(--t-row-size); font-weight: 500; color: var(--ink-secondary); text-decoration: none; border-radius: var(--r-control); transition: color .22s var(--ease-out); } .more svg { width: 14px; height: 14px; transition: transform .24s var(--ease-out); } .more.teal svg { color: var(--teal); } /* things draw closer as they enter: a native scroll-driven approach, compositor-only; browsers without scroll timelines, and reduced motion, see the settled state */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { /* settled by a fixed travel, not a share of the element's height: a tall panel is at full contrast before its first line reaches the upper half of the screen */ .approach { animation: approach linear both; animation-timeline: view(); animation-range: cover 40px cover 460px; } @keyframes approach { from { opacity: .25; transform: translateY(36px) scale(.94); } } /* each surface on Home arrives from a little further than the one before it: the reading, then Command, then the Score's own opening — presence grows as CAPSEAD does more */ .pcomp.approach { animation-name: approachNear; } @keyframes approachNear { from { opacity: .25; transform: translateY(52px) scale(.9); } } /* phones: no scale, so every control is full size wherever the reader stops */ @media (max-width: 760px) { .approach, .pcomp.approach { animation-name: approachP; } } @keyframes approachP { from { opacity: .25; transform: translateY(28px); } } } } /* one reading, on its own */ .reading.solo { max-width: 640px; margin: 52px auto 0; } /* the product, curated: Command in front of us, a Quick View laid over its edge */ .pcomp { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 360px; max-width: 1120px; margin: 60px auto 0; align-items: start; } .pcomp .p-back { grid-column: 1; grid-row: 1; margin-right: -44px; } .pcomp .p-back .cmd { padding-right: 66px; padding-bottom: 26px; } /* Home's Quick View is a held fragment of the drawer, so its height is the scene's, not its content's. Now that its sections are operable the fade belongs to the READING, not to the whole panel: the box is a column, the section area takes what is left and fades at its own foot, and the surface keeps a crisp edge with its way out of the panel — "Open full profile" — in view and reachable. */ .pcomp .p-front { grid-column: 2; grid-row: 1; margin-top: 118px; position: relative; z-index: 2; background: var(--ground-occluding); max-height: 520px; display: flex; flex-direction: column; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .02); } .pcomp .p-front .qv { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .pcomp .p-front .qv-body { flex: 1 1 auto; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent); mask-image: linear-gradient(180deg, #000 68%, transparent); } .pcomp .p-front .qv-foot { flex: 0 0 auto; } @media (min-width: 761px) { .pcomp .cmd-row { grid-template-columns: 58px 168px minmax(0, 1fr) auto; } } @media (max-width: 1080px) { .pcomp { grid-template-columns: minmax(0, 1fr); max-width: 760px; } .pcomp .p-back { margin-right: 0; } .pcomp .p-back .cmd { padding-right: 22px; padding-bottom: 60px; } .pcomp .p-front { grid-column: 1; grid-row: 2; margin: -44px 0 0 auto; width: min(calc(100% - 20px), 400px); } } @media (max-width: 760px) { .pcomp .p-back .cmd { padding-right: 16px; } } /* the reading mark again, brighter: here CAPSEAD has read the whole business, not one customer */ .pcomp .p-back { position: relative; } .pcomp .p-back::before { content: ''; position: absolute; left: 28px; right: 28px; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--score-blue) 25%, var(--score-cyan) 55%, var(--score-teal) 80%, transparent); opacity: .8; } /* one relationship, contained */ .aw-stage.compact { max-width: 820px; margin: 52px auto 0; } .aw-stage.compact .axis { height: 146px; } @media (max-width: 760px) { .aw-stage.compact .axis-v { height: 300px; } .pcomp .p-front { display: none; } /* the Quick View gets its own room on /product */ .pcomp .p-back .cmd { padding-bottom: 18px; } } /* ===================== THE SCORE SCENE ================================= */ /* The climax of Home. The settled state below is the whole story — the dial, and the lens that explains it: the commitments kept, the one remembered miss, the line behind it, and the recorded days, shown as evidence and never as arithmetic — and it is what reduced motion, short screens and browsers without scroll timelines are given. Where scroll timelines exist and motion is welcome, the visitor goes INTO the Score instead: see the passage. */ .score-scene { position: relative; padding: 128px 0 0; } .ss-stage { position: relative; } .ss-inner { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gut); width: 100%; } .ss-head { position: relative; text-align: center; max-width: 820px; margin: 0 auto; } .ss-h { position: relative; font-size: clamp(30px, 3.7vw, 48px); font-weight: 200; line-height: 1.08; letter-spacing: -0.034em; margin-top: 16px; text-wrap: balance; } .ss-h .t1, .ss-h .t2 { display: block; } .ss-h .t2 { color: var(--ink-secondary); } .ss-body { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 56px; align-items: center; margin-top: 48px; } .ss-dialwrap { position: relative; display: flex; flex-direction: column; align-items: center; } .ss-dialwrap::before { content: ''; position: absolute; inset: -22% -18%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(27, 176, 220, .085), rgba(30, 122, 216, .03) 58%, transparent 76%); } .ss-dial { position: relative; width: min(100%, 300px); aspect-ratio: 1; } .ss-ring, .ss-turn { position: absolute; inset: 0; } .ss-energy, .ss-quick { display: none; } .ss-dial .dial-core { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .ss-dial .dial-n { font-size: clamp(64px, 7vw, 88px); } .ss-trend { margin-top: 16px; font-size: var(--t-body-size); color: var(--ink-secondary); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 6px; } .ss-trend svg { width: 12px; height: 12px; } .ss-open { margin-top: 10px; font-size: var(--t-meta-size); font-weight: 500; color: var(--gold); text-decoration: none; display: none; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px; border-radius: var(--r-control); } .ss-open svg { width: 12px; height: 12px; transition: transform .24s var(--ease-out); } .ss-open:hover { color: #d9a63a; } .ss-open:focus-visible { animation: none; } .ss-lens:focus-visible { outline-offset: 4px; border-radius: var(--r-modal); } .ss-lens { position: relative; border: 1px solid var(--line-strong); border-radius: var(--r-modal); background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 50%), var(--ground-occluding); padding: 22px 24px 18px; box-shadow: 0 50px 110px -50px rgba(0, 0, 0, .95); } .ss-lens::before { content: ''; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--score-blue) 30%, var(--score-cyan) 60%, transparent); opacity: .6; } .ss-k { color: var(--ink-faint); padding-bottom: 10px; border-bottom: 1px solid var(--line-inner); } .ss-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line-inner); } .ss-v { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; } .ss-v.dn { color: var(--amber); } /* the evidence, in the record's own marks: a commitment kept on or before its date is gold */ .ss-mk, .ss-fade { display: flex; justify-content: flex-end; align-items: center; gap: 3px; height: 1.3em; } .ss-mk i { flex: 0 0 auto; width: 3px; height: 12px; border-radius: 1px; background: var(--gold); } /* the remembered miss: its late mark, and the run of its memory easing off after it */ .ss-fade { gap: 0; } .ss-fade i { flex: 0 0 auto; width: 3px; height: 12px; border-radius: 1px; background: var(--amber); } .ss-fade b { flex: 0 0 auto; width: 30px; height: 2px; border-radius: 0 1px 1px 0; background: linear-gradient(90deg, rgba(196, 123, 42, .75), rgba(196, 123, 42, 0)); } .ss-l { font-size: var(--t-body-size); color: var(--ink); } .ss-l span { display: block; font-size: var(--t-meta-size); color: var(--ink-faint); margin-top: 2px; } .ss-l .ss-br { display: inline; margin: 0; font-size: inherit; color: inherit; } .ss-total { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 12px 0 4px; border-top: 1px solid var(--line-strong); margin-top: -1px; } .ss-total .ss-v { font-size: 20px; color: var(--teal); } .ss-total .ss-l { font-size: var(--t-row-size); font-weight: 500; } .ss-drivers { margin-top: 16px; } .ss-driver { display: flex; gap: 12px; padding-top: 10px; } .ss-driver p { font-size: var(--t-body-size); line-height: 1.55; color: var(--ink-secondary); } .ss-driver .rspine { background: var(--amber); } /* ---- HOW IT MOVED: five readings over the record that moved them --------------------- Two registers. Above, the reading — each of the five numbers standing at its own level (--t is its height in a field that runs from 68 to 96). Below, a flat record line, and under it the dated entry that produced the movement. Between them one stem: lit over --a to --b, the distance that reading actually travelled, then a hairline down to the entry that moved it. Nothing is plotted and nothing is counted: five numbers are placed, and how far each moved is shown by where it stands. The five readings are fixed truths, so their levels are authored here rather than computed — publicWebsiteTruth checks the printed numbers against the shipped evaluator's series. */ .ss-hist { margin-top: 14px; padding-top: 9px; border-top: 1px solid var(--line-inner); container-type: inline-size; container-name: hx; } .hx-h { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 20px; flex-wrap: wrap; } .hx-h .ss-k { border: 0; padding: 0; } .hx { list-style: none; } .hx-s { --t: 0; --a: 0; --b: 0; --stem: var(--ink-faint); } .hx-s.s1 { --t: .786; --a: .786; --b: .786; } .hx-s.s2 { --t: .500; --a: .500; --b: .786; } .hx-s.s3 { --t: .143; --a: .143; --b: .500; } .hx-s.s4 { --t: .536; --a: .143; --b: .536; } .hx-s.s5 { --t: .571; --a: .536; --b: .571; } .hx-s.dn { --stem: var(--amber); } .hx-s.up { --stem: var(--score-teal); } .hx-n { font-weight: 200; letter-spacing: -0.035em; line-height: 1; color: var(--ink); display: block; } .hx-d { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); } .hx-e b { font-weight: 500; color: var(--ink); } .hx-e > span:last-child { display: block; color: var(--ink-faint); } .hx-stem { position: absolute; border-radius: 1.5px; background: var(--stem); } /* today's reading is the one the visitor came for: it keeps the teal the total wears */ .hx-s.now .hx-n { color: var(--score-teal); } .ss-foot { margin-top: 8px; font-size: var(--t-meta-size); color: var(--ink-faint); } /* narrow — and the default, so a browser without container queries still composes it: the two registers turned on their side. One spine descends through the five readings and recovers, and each reading carries, beside it, the record entry that moved it — so a narrow room loses the field's levels but never the chronology or what is attached to what. */ .hx-h { gap: 4px 10px; } .hx { margin-top: 7px; } .hx-s { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 13px; padding-bottom: 5px; } .hx-s:last-child { padding-bottom: 0; } .hx-f { grid-column: 1; position: relative; padding-left: 17px; min-width: 3.3em; } .hx-stem { left: 0; top: 1px; bottom: -5px; width: 3px; } .hx-s.s1 .hx-stem { left: 1px; width: 1px; background: color-mix(in srgb, var(--ink-faint) 34%, transparent); } .hx-s:last-child .hx-stem { bottom: 6px; } .hx-n { font-size: 22px; } .hx-s.now .hx-n { font-size: 28px; } .hx-e { grid-column: 2; font-size: var(--t-meta-size); line-height: 1.34; } /* the date leads its own entry rather than taking a line of its own */ .hx-e .hx-d::after { content: '\00b7'; letter-spacing: 0; padding: 0 .42em 0 .34em; } .hx-e b { font-size: var(--t-body-size); } /* room enough for the composition itself: the reading field over the record */ @container hx (min-width: 840px) { /* everything the stacked composition set for a narrow room, undone */ .ss-hist { padding-top: 12px; } .hx-h { gap: 6px 20px; } .hx-s { display: block; padding-bottom: 0; } .hx-e { grid-column: auto; } .hx-e .hx-d::after { content: none; } .hx-stem { top: auto; } .hx-s.s1 .hx-stem { left: 0; } .hx { --field: 118px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: clamp(10px, 1.4vw, 22px); margin-top: 22px; /* the record is one flat line under the whole field — not five */ background: linear-gradient(var(--line-inner), var(--line-inner)) 0 var(--field) / 100% 1px no-repeat; } /* the reading field: the numbers stand in it at their own levels */ .hx-f { display: block; position: relative; height: var(--field); padding-left: 0; min-width: 0; } .hx-r { position: absolute; left: 12px; right: 0; bottom: calc(var(--t) * var(--field)); } .hx-n { font-size: clamp(28px, 2.7vw, 38px); } .hx-s.now .hx-n { font-size: clamp(34px, 3.4vw, 46px); } /* the movement is the lit length between the two levels — not a line through the whole field. Under it a hairline ties the reading it produced down to the record entry that produced it. */ .hx-stem { left: 0; width: 3px; bottom: calc(var(--a) * var(--field)); height: calc((var(--b) - var(--a)) * var(--field)); box-shadow: 0 0 12px -3px var(--stem); } /* a fall travels down from the level it left; a recovery climbs up to the one it reached */ .hx-s.dn .hx-stem { transform-origin: 50% 0; } .hx-s.up .hx-stem { transform-origin: 50% 100%; } .hx-s:last-child .hx-stem { bottom: calc(var(--a) * var(--field)); } /* the opening reading moved from nothing, so its stem has no length at all — only the tie */ .hx-s.s1 .hx-e::before { background: color-mix(in srgb, var(--ink-faint) 44%, transparent); } /* each dated entry hangs below the record line, marked at the foot of its own stem in the colour of the movement it caused */ .hx-e { position: relative; display: block; padding: 12px 0 0 12px; font-size: var(--t-meta-size); line-height: 1.45; } .hx-e::before { content: ''; position: absolute; left: 0; top: -1px; width: 14px; height: 2px; border-radius: 1px; background: var(--stem); } /* a mark is a moment; a run is a stretch of days the record stayed in that condition */ .hx-s.dur .hx-e::before { width: 64%; } /* the hairline that holds the reading to the entry which moved it */ .hx-e::after { content: ''; position: absolute; left: 1px; bottom: 100%; width: 1px; height: calc(var(--a) * var(--field)); background: color-mix(in srgb, var(--ink-faint) 38%, transparent); } .hx-e b { display: block; font-size: var(--t-body-size); } .hx-e .hx-d { display: block; margin-bottom: 4px; } } .ss-after { text-align: center; padding-top: 44px; } .ss-after p { font-size: 15px; color: var(--ink-secondary); font-weight: 300; max-width: 60ch; margin: 0 auto 14px; } .ss-after p b { color: var(--ink); font-weight: 500; } @media (max-width: 900px) { .ss-body { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 36px; } .ss-dial { width: min(64vw, 240px); } } @media (max-width: 760px) { .score-scene { padding-top: 88px; } } /* ===================== THE SCORE PASSAGE =============================== */ /* Where scroll timelines exist and motion is welcome, the visitor goes INTO the Score. One timeline, --score, is the pinned travel (inset 0); every keyframe below is a share of it, so the passage is the visitor's own scroll: it moves when they move and rests when they stop. Three depths move at three rates — the ring nearest, the 84 inside it, the record behind the 84 — and that parallax is the depth. 0– 5 REST 84 in the page; the ring on its slow drift 5–24 APPROACH the ring quickens (its light turns faster, even at rest) and grows; the page steps back 24–50 ENTER the ring grows past the screen's long edge; its dark interior becomes the room 50–62 CROSS the ring passes beyond the edges and stays as the corners of the room 54–71 OPEN the 84 settles into place and opens: what was kept, what is remembered, and the 84, each named — the Pulse is the page 71–91 EVIDENCE the number steps up; the line behind the remembered miss and the recorded days rise beneath it 91–100 HOLD The screen-specific numbers (how far the ring grows, where the 84 lands, where its parts come from) are measured by site.js and set as custom properties; the fallbacks below stand in until it does. Content is laid out in the SMALL viewport (100svh), so a phone's toolbars never cover it; the ring and its room fill the LARGE one, so nothing ends in a hard edge when the toolbars slide away. */ @keyframes ssRing { 0%, 5% { transform: translateY(0) scale(1); animation-timing-function: cubic-bezier(.5, 0, .9, .5); } 24% { transform: translateY(0) scale(var(--z-near, 1.7)); animation-timing-function: cubic-bezier(.45, 0, .85, .6); } 50% { transform: translateY(var(--rdy, 0px)) scale(var(--z-cross, 4)); animation-timing-function: cubic-bezier(.2, .6, .3, 1); } 62%, 100% { transform: translateY(var(--rdy, 0px)) scale(var(--z-end, 5)); } } @keyframes ssSpin { 0% { transform: rotate(0deg); } 5% { transform: rotate(8deg); animation-timing-function: cubic-bezier(.5, 0, .9, .6); } 24% { transform: rotate(150deg); } 50% { transform: rotate(420deg); animation-timing-function: cubic-bezier(.2, .7, .4, 1); } 64%, 100% { transform: rotate(490deg); } } /* the ring's own light: the slow bezel at rest and as the frame; the quick one while the visitor approaches */ @keyframes ssSlow { 0%, 5% { opacity: .92; } 20% { opacity: .2; } 40% { opacity: .2; } 54% { opacity: .95; } 70%, 100% { opacity: .62; } } @keyframes ssQuick { 0%, 5% { opacity: 0; } 20% { opacity: .95; } 40% { opacity: .95; } 54%, 100% { opacity: 0; } } @keyframes quickSpin { to { transform: rotate(360deg); } } @keyframes ssEnergy { 0%, 5% { opacity: .18; } 24% { opacity: 1; } 42% { opacity: .75; } 62%, 100% { opacity: .34; } } @keyframes ssBeat { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.07); opacity: 1; } } @keyframes ssIdxOut { 0%, 6% { opacity: 1; } 18%, 100% { opacity: 0; } } @keyframes ssRecede { 0%, 5% { opacity: 1; transform: none; } 18%, 100% { opacity: 0; transform: translateY(-20px) scale(.96); } } /* the jump link fades, but stays reachable: a keyboard landing on it snaps the page back to it */ @keyframes ssQuiet { 0%, 4% { opacity: 1; } 11%, 100% { opacity: 0; pointer-events: none; } } @keyframes ssFade { 0%, 4% { opacity: 1; } 11%, 100% { opacity: 0; } } @keyframes ssVeil { 0%, 5% { opacity: 0; } 30%, 100% { opacity: 1; } } @keyframes ssCap { 0%, 6% { opacity: 1; } 18%, 100% { opacity: 0; } } /* the 84 is further in than the ring: it grows more slowly, then settles where it belongs in its own anatomy */ @keyframes ssNum { 0%, 5% { transform: translate(0, 0) scale(1); opacity: 1; } 24% { transform: translate(0, 0) scale(1.07); } 54% { transform: translate(0, 0) scale(1.13); animation-timing-function: cubic-bezier(.3, 0, .2, 1); } 64% { transform: translate(var(--nx, 0px), var(--ny, 0px)) scale(var(--nk, 1)); opacity: 1; } 65%, 100% { transform: translate(var(--nx, 0px), var(--ny, 0px)) scale(var(--nk, 1)); opacity: 0; } } @keyframes ssLand { 0%, 63.5% { opacity: 0; } 65%, 100% { opacity: 1; } } /* its parts come out of it */ @keyframes ssUnfold1 { 0%, 58% { opacity: 0; transform: translate(var(--u1x, 0px), var(--u1y, 0px)) scale(.9); animation-timing-function: cubic-bezier(.2, .7, .3, 1); } 69%, 100% { opacity: 1; transform: none; } } @keyframes ssUnfold2 { 0%, 60% { opacity: 0; transform: translate(var(--u2x, 0px), var(--u2y, 0px)) scale(.9); animation-timing-function: cubic-bezier(.2, .7, .3, 1); } 69%, 100% { opacity: 1; transform: none; } } @keyframes ssName { 0%, 64% { opacity: 0; transform: translateY(8px); } 71%, 100% { opacity: 1; transform: none; } } @keyframes ssKey { 0%, 60% { opacity: 0; transform: translateY(var(--sum-dy, 0px)); } 66%, 71% { opacity: 1; transform: translateY(var(--sum-dy, 0px)); animation-timing-function: cubic-bezier(.4, 0, .2, 1); } 80%, 100% { opacity: 1; transform: translateY(0); } } /* first the anatomy is the page, centred; then it steps up and the record that moves it rises beneath */ @keyframes ssSum { 0%, 71% { transform: translateY(var(--sum-dy, 0px)); animation-timing-function: cubic-bezier(.4, 0, .2, 1); } 80%, 100% { transform: translateY(0); } } /* the record that moves it rises only once the anatomy has stepped clear of the space it needs */ @keyframes ssRise1 { 0%, 77% { opacity: 0; transform: translateY(34px); animation-timing-function: cubic-bezier(.2, .7, .3, 1); } 86%, 100% { opacity: 1; transform: none; } } @keyframes ssRise2 { 0%, 79% { opacity: 0; transform: translateY(40px); animation-timing-function: cubic-bezier(.2, .7, .3, 1); } 88%, 100% { opacity: 1; transform: none; } } @keyframes ssHistIn { 0%, 74% { opacity: 0; transform: translateY(26px); animation-timing-function: cubic-bezier(.2, .7, .3, 1); } 81%, 100% { opacity: 1; transform: none; } } /* each step plays cause before effect: the record entry arrives, the movement travels the distance the reading moved, and only then does the reading land at its new level */ @keyframes hxRec { 0% { opacity: 0; transform: translateY(9px); animation-timing-function: cubic-bezier(.2, .7, .3, 1); } 36%, 100% { opacity: 1; transform: none; } } @keyframes hxStem { 0%, 20% { transform: scaleY(0); animation-timing-function: cubic-bezier(.4, 0, .2, 1); } 74%, 100% { transform: scaleY(1); } } @keyframes hxDn { 0%, 50% { opacity: 0; transform: translateY(-15px); animation-timing-function: cubic-bezier(.2, .7, .3, 1); } 100% { opacity: 1; transform: none; } } @keyframes hxUp { 0%, 50% { opacity: 0; transform: translateY(15px); animation-timing-function: cubic-bezier(.2, .7, .3, 1); } 100% { opacity: 1; transform: none; } } /* the opened Score's focus ring appears only once there is an opened Score for it to frame */ @keyframes ssFocus { 0%, 64% { outline-color: transparent; } 70%, 100% { outline-color: var(--teal-focus); } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) and (min-width: 901px) and (min-height: 640px), (prefers-reduced-motion: no-preference) and (max-width: 900px) and (min-height: 620px) { .score-scene { --dial: clamp(190px, 33svh, 300px); --cy: 36px; --navd: 58px; height: 320vh; padding-top: 0; view-timeline: --score block; view-timeline-inset: 0; } /* the room is the large viewport; what is read in it is laid out in the small one */ .ss-stage { position: sticky; top: 0; height: 100lvh; overflow: hidden; } .ss-inner { position: relative; height: 100svh; } .ss-veil { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(78% 72% at 50% 50%, transparent 38%, rgba(4, 4, 9, .62) 100%); animation: ssVeil linear both; animation-timeline: --score; animation-range: contain 0% contain 100%; } /* the passage sets, it does not stop. The stage is clipped, so once it unpins its bottom edge sweeps up the screen and cuts the lit ring mid-stroke against flat ground. The ground under that edge carries what the ring is still throwing — brightest at the two sides the arcs are cut on — and gives it back to the page over the run into the close. It hangs off the scene's own bottom, which IS that edge at every scroll position, so it stays registered at any scroll speed with nothing running: no timeline, no script, and the same composed ground under reduced motion. */ .score-scene::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; z-index: 0; height: min(46svh, 420px); pointer-events: none; background: radial-gradient(40% 78% at -2% 0%, color-mix(in srgb, var(--score-blue) 13%, transparent), transparent 68%), radial-gradient(40% 78% at 102% 0%, color-mix(in srgb, var(--score-cyan) 11%, transparent), transparent 68%), radial-gradient(90% 104% at 50% -16%, color-mix(in srgb, var(--score-navy) 9%, transparent), transparent 72%); } /* the words that land in it stay in front. html carries its own background, so body's paints as an ordinary block over anything negative — the release has to sit above that, and the copy above it. */ .ss-after, .close { position: relative; z-index: 1; } .ss-head { position: absolute; left: var(--gut); right: var(--gut); top: clamp(84px, 11svh, 104px); z-index: 3; max-width: none; } .ss-head .scene-cap, .ss-h .t1 { animation: ssRecede linear both; animation-timeline: --score; animation-range: contain 0% contain 100%; } .ss-h { margin-top: 14px; font-size: clamp(28px, min(3.7vw, 5.4svh), 48px); } /* the invitation is the link under the dial; the opened Score needs no heading over it */ .ss-h .t2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .ss-body { position: absolute; inset: 0; margin: 0; display: block; } /* the Score: centred, so growing it is moving toward it */ .ss-dialwrap { position: absolute; left: 0; right: 0; top: calc(50% - var(--dial) / 2 + var(--cy)); z-index: 2; pointer-events: none; } .ss-dialwrap::before { display: none; } .ss-dial { width: var(--dial); flex: 0 0 auto; } .ss-ring { animation: ssRing linear both; animation-timeline: --score; animation-range: contain 0% contain 100%; } .ss-energy { display: block; position: absolute; inset: -34%; border-radius: 50%; animation: ssEnergy linear both; animation-timeline: --score; animation-range: contain 0% contain 100%; } .ss-beat { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(27, 176, 220, .16), rgba(30, 122, 216, .06) 55%, transparent 74%); animation: ssBeat 1.6s ease-in-out infinite; } .ss-turn { animation: ssSpin linear both; animation-timeline: --score; animation-range: contain 0% contain 100%; } /* feathered by a pixel, so the ring stays smooth when it is many times its size */ .ss-dial .bezel { -webkit-mask: radial-gradient(closest-side circle, transparent calc(100% - 5.6px), #000 calc(100% - 4.6px) calc(100% - 1.6px), transparent calc(100% - .6px)); mask: radial-gradient(closest-side circle, transparent calc(100% - 5.6px), #000 calc(100% - 4.6px) calc(100% - 1.6px), transparent calc(100% - .6px)); animation: bezelDrift 60s linear infinite, ssSlow linear both; animation-timeline: auto, --score; animation-range: normal, contain 0% contain 100%; } .ss-dial .bezel.ss-quick { display: block; opacity: 0; animation: quickSpin 5.2s linear infinite, ssQuick linear both; animation-timeline: auto, --score; animation-range: normal, contain 0% contain 100%; } /* the time-based light rests off screen and while the Score is out of reach; the scroll-linked animations (the second of each pair) always follow */ .idle .ss-dial .bezel, .ss-far .ss-dial .bezel.ss-quick { animation-play-state: paused, running; } .idle .ss-beat, .ss-far .ss-beat { animation-play-state: paused; } /* opened, the room holds still: the ring's corners stop drifting, so a page left open costs nothing */ .ss-held .ss-dial .bezel { animation-play-state: paused, running; } .ss-dial .bezel-idx { animation: ssIdxOut linear both; animation-timeline: --score; animation-range: contain 0% contain 100%; } .ss-dial .dial-n { transform-origin: 50% 50%; animation: ssNum linear both; animation-timeline: --score; animation-range: contain 0% contain 100%; } .ss-dial .dial-c { animation: ssCap linear both; animation-timeline: --score; animation-range: contain 0% contain 100%; } .ss-trend { animation: ssFade linear both; animation-timeline: --score; animation-range: contain 0% contain 100%; } .ss-open { display: inline-flex; pointer-events: auto; animation: ssQuiet linear both; animation-timeline: --score; animation-range: contain 0% contain 100%; } /* the Pulse: not a card over the page — the page itself, inside the ring */ .ss-lens { position: absolute; left: 0; right: 0; top: var(--navd); bottom: 0; z-index: 1; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: safe center; border: 0; border-radius: 0; background: none; box-shadow: none; padding: 16px var(--gut) 20px; } .ss-lens::before { display: none; } /* when a reader's own text spacing makes the opened Score taller than the room, it starts at the top and scrolls rather than lose a line under the nav or the screen's edge (site.js measures it) */ .ss-lens.ss-tall { overflow-y: auto; scrollbar-width: none; } .ss-lens.ss-tall::-webkit-scrollbar { display: none; } .ss-lens:focus-visible { outline-offset: -10px; border-radius: var(--r-modal); /* inside the room, never clipped by it */ animation: ssFocus linear both; animation-timeline: --score; animation-range: contain 0% contain 100%; } .ss-lens > .ss-k { border: 0; padding: 0; text-align: center; animation: ssKey linear both; animation-timeline: --score; animation-range: contain 0% contain 100%; } .ss-sum { position: relative; animation: ssSum linear both; animation-timeline: --score; animation-range: contain 0% contain 100%; } .ss-sum .ss-row, .ss-sum .ss-total { display: block; border: 0; margin: 0; padding: 0; } .ss-sum .ss-v { display: block; position: relative; font-size: var(--nfs); font-weight: 200; letter-spacing: -0.05em; line-height: 1; color: var(--ink); text-align: center; white-space: nowrap; } .ss-sum .ss-v.dn { color: var(--amber); } .ss-sum .ss-total .ss-v { font-size: var(--nfs); color: var(--ink); } /* the evidence at the scale of the reading: thin marks standing the height of its figures */ .ss-sum .ss-mk, .ss-sum .ss-fade { display: flex; justify-content: center; align-items: center; height: 1em; gap: .13em; } .ss-sum .ss-mk i, .ss-sum .ss-fade i { width: max(3px, .07em); height: .64em; } .ss-sum .ss-fade { gap: 0; } .ss-sum .ss-fade b { width: 1.4em; height: max(2px, .035em); } .ss-sum .r1 .ss-v { animation: ssUnfold1 linear both; animation-timeline: --score; animation-range: contain 0% contain 100%; } .ss-sum .r2 .ss-v { animation: ssUnfold2 linear both; animation-timeline: --score; animation-range: contain 0% contain 100%; } .ss-sum .ss-n { display: inline-block; animation: ssLand linear both; animation-timeline: --score; animation-range: contain 0% contain 100%; } .ss-sum .ss-l { display: block; text-align: center; text-wrap: balance; font-size: var(--t-row-size); color: var(--ink); margin-top: 14px; animation: ssName linear both; animation-timeline: --score; animation-range: contain 0% contain 100%; } .ss-sum .ss-l span { font-size: var(--t-meta-size); margin-top: 4px; } /* opened, the scope reads as two phrases: what was kept, then the window it was kept in */ .ss-sum .ss-l .ss-br { display: block; height: 0; margin: 0; overflow: hidden; } .ss-sum .ss-total .ss-l { font-size: var(--t-row-size); font-weight: 400; } .ss-drivers { width: min(760px, 100%); margin-top: clamp(28px, 5svh, 48px); padding-top: 0; animation: ssRise1 linear both; animation-timeline: --score; animation-range: contain 0% contain 100%; } .ss-drivers .ss-k { padding-bottom: 12px; border-bottom-color: var(--line); } .ss-driver { padding-top: 14px; } .ss-driver p { font-size: var(--t-row-size); line-height: 1.6; } .ss-hist { width: min(1140px, 100%); margin-top: clamp(18px, 3svh, 30px); padding-top: 0; border-top: 0; animation: ssHistIn linear both; animation-timeline: --score; animation-range: contain 0% contain 100%; } .hx { --field: clamp(84px, 12svh, 118px); } .ss-foot { text-align: center; } /* the five steps play in order over the last fifth of the passage, each beginning while the one before it is still arriving — the fall is watched, then the recovery */ .hx-e { animation: hxRec linear both; animation-timeline: --score; } .hx-stem { animation: hxStem linear both; animation-timeline: --score; } .hx-s.dn .hx-r { animation: hxDn linear both; animation-timeline: --score; } .hx-s.up .hx-r, .hx-s.s1 .hx-r { animation: hxUp linear both; animation-timeline: --score; } .hx-s.s1 .hx-e, .hx-s.s1 .hx-stem, .hx-s.s1 .hx-r { animation-range: contain 78% contain 85%; } .hx-s.s2 .hx-e, .hx-s.s2 .hx-stem, .hx-s.s2 .hx-r { animation-range: contain 81.5% contain 88.5%; } .hx-s.s3 .hx-e, .hx-s.s3 .hx-stem, .hx-s.s3 .hx-r { animation-range: contain 85% contain 92%; } .hx-s.s4 .hx-e, .hx-s.s4 .hx-stem, .hx-s.s4 .hx-r { animation-range: contain 88.5% contain 95.5%; } .hx-s.s5 .hx-e, .hx-s.s5 .hx-stem, .hx-s.s5 .hx-r { animation-range: contain 92% contain 99%; } /* 93% of the pinned travel — fully open, still pinned — plus the scroll-padding an anchor jump subtracts */ #score-open { top: calc((320vh - 100svh) * .93 + 76px); } } /* desktop: the anatomy is a line across the room — what was kept, what is remembered, the reading */ @media (prefers-reduced-motion: no-preference) and (min-width: 901px) and (min-height: 640px) { .score-scene { --nfs: clamp(64px, 11svh, 104px); } .ss-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 270px)); column-gap: clamp(28px, 4vw, 64px); margin-top: clamp(22px, 4svh, 40px); align-items: start; } } @media (prefers-reduced-motion: no-preference) and (min-width: 901px) and (min-height: 640px) and (max-height: 760px) { .score-scene { --cy: 40px; } .ss-drivers .ss-k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; border: 0; } } /* phone and tablet portrait: the same passage in a tall, narrow room — everything moves up and down. The room is the SMALL viewport, and on a phone that is the screen LESS the browser's own toolbars — about 660px on the iPhones this is read on, not the 844 an emulator reports with no toolbars to subtract. So the opened Score is composed to that room: the evidence stands at the height of a row of marks rather than reserving a numeral's line for it, and every interval is a share of the room instead of a desktop figure carried down. Nothing is dropped, reordered or scrolled away — the reading, the record behind it and all five movements through today's stand inside the bezel. */ @media (prefers-reduced-motion: no-preference) and (max-width: 900px) and (min-height: 620px) { .score-scene { --dial: clamp(170px, 30svh, 210px); --cy: 28px; --navd: 56px; --nfs: clamp(34px, 5.6svh, 54px); height: 300vh; --z-cross: 3.6; --z-end: 4; } /* stand-ins until site.js measures the screen */ .ss-head { top: 76px; } .ss-h { font-size: clamp(26px, min(7.4vw, 4.6svh), 34px); } .ss-lens { padding: 2px var(--gut) 6px; } .ss-sum { display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.1svh, 14px); margin-top: clamp(5px, 1svh, 14px); } /* the evidence is a row of marks, not a row of numerals: it stands at its own height */ .ss-sum .ss-mk, .ss-sum .ss-fade { height: .72em; } .ss-sum .ss-l { margin-top: 2px; font-size: var(--t-body-size); } .ss-sum .ss-l span { margin-top: 2px; } .ss-sum .ss-total { padding-top: clamp(2px, .5svh, 8px); position: relative; } .ss-drivers { margin-top: clamp(7px, 1.4svh, 18px); } .ss-drivers .ss-k { padding-bottom: 4px; } .ss-driver { padding-top: 7px; gap: 10px; } .ss-driver p { font-size: var(--t-meta-size); line-height: 1.46; } .ss-hist { margin-top: clamp(5px, 1.1svh, 13px); } .hx { --field: clamp(56px, 8svh, 84px); margin-top: 4px; } .hx-s { padding-bottom: 3px; } .hx-e { line-height: 1.28; } .hx-n { font-size: 20px; } .hx-s.now .hx-n { font-size: 26px; } /* the provenance is its own register, not the last line of today's entry */ .ss-foot { margin-top: clamp(6px, 1.2svh, 12px); } #score-open { top: calc((300vh - 100svh) * .93 + 76px); } @media (min-width: 761px) { .score-scene { --dial: 260px; } } } } #score-open { position: absolute; left: 0; width: 1px; height: 1px; } /* no `top` here: the passage blocks above place it */ /* =============== I · THE RECORD — the whole of it, at once ================ */ /* Nine customers, ninety days, every mark a person put there. It is drawn, not summarised: `marksOf()` gives each row all of its own record. Then the field quiets and the two stretches CAPSEAD reads in it today are laid over it — AMBER for a commitment past its recorded deadline, GOLD for a relationship quieter than its own past. The dashed rule under the gold span is that customer's own longest previous gap, from the same origin, so the overhang is the excess. Nothing here is chosen for the picture. */ .field { margin-top: 62px; border: 1px solid var(--line); border-radius: var(--r-modal); background: var(--ground-inset); padding: 18px 22px 14px; } .field-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; padding-bottom: 13px; border-bottom: 1px solid var(--line-inner); } .field-name { font-size: var(--t-row-size); font-weight: 500; letter-spacing: -0.005em; color: var(--ink); } .field-cap { color: var(--ink-faint); } .field-rows { margin: 8px 0 4px; } .fr { display: grid; grid-template-columns: 178px minmax(0, 1fr); align-items: center; gap: 0 20px; } .fr-n { font-size: var(--t-meta-size); color: var(--ink-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .6s var(--ease-out); } .fr-t { position: relative; height: 32px; } .fr-today { position: absolute; top: -3px; bottom: -3px; right: -1px; width: 1px; background: var(--line-strong); } .fr-t::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255, 255, 255, .035); } .fmark { position: absolute; z-index: 2; top: 50%; transform: translate(-50%, -50%); border-radius: 1px; opacity: .72; transition: opacity .7s var(--ease-out); } .fmark.k-contact { width: 2px; height: 14px; background: var(--teal); } .fmark.k-commit { width: 3px; height: 11px; background: var(--gold); } .fmark.k-memory { width: 4px; height: 4px; background: var(--steel); } .fmark.k-note { width: 2px; height: 6px; background: var(--ink-faint); } /* each row is laid down left to right, the way the days ran */ .motion .field-rows .fr { clip-path: inset(-6px 100% -6px -8px); transition: clip-path .72s var(--ease-lock); } .motion .field-rows .fr.on { clip-path: inset(-6px -8px -6px -8px); } /* what CAPSEAD reads steps forward; the rest of the record stays legible behind it */ .field.found-on .fmark { opacity: .18; } .field.found-on .fr.lit .fmark { opacity: .8; } .field.found-on .fr-n { color: var(--ink-faint); } .field.found-on .fr.lit .fr-n { color: var(--ink); } .fspan { position: absolute; z-index: 1; top: 50%; height: 18px; border-radius: 0 2px 2px 0; transform: translateY(-50%); transform-origin: left center; } .fspan.late { background: linear-gradient(90deg, rgba(196, 123, 42, .34), rgba(196, 123, 42, .13)); border-left: 2px solid var(--amber); border-right: 2px solid var(--amber); } /* it closed */ .fspan.quiet { background: linear-gradient(90deg, rgba(196, 146, 42, .30), rgba(196, 146, 42, .06)); border-left: 2px solid var(--gold); border-radius: 0; } /* it is still running */ .fghost { position: absolute; z-index: 1; top: calc(50% + 12px); height: 0; border-top: 1px dashed var(--line-strong); transition: opacity .5s var(--ease-out); } .motion .fspan { transform: translateY(-50%) scaleX(0); transition: transform .85s var(--ease-out); } .motion .fspan.on { transform: translateY(-50%) scaleX(1); } .motion .fghost { opacity: 0; } .motion .fghost.on { opacity: 1; } .field-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; margin-top: 12px; padding-top: 13px; border-top: 1px solid var(--line-inner); color: var(--ink-faint); } .fk-glyphs { display: contents; } .field-key > span > span { display: inline-flex; align-items: center; gap: 8px; } .field-key .replay { margin-left: auto; } .found { margin-top: 34px; max-width: 78ch; } .found-h, .found-l, .found-say { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); } .motion .found-h:not(.on), .motion .found-l:not(.on), .motion .found-say:not(.on) { opacity: 0; transform: translateY(6px); } .found-h { color: var(--ink-faint); padding-bottom: 14px; border-bottom: 1px solid var(--line); } .found-l { display: flex; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line-inner); } .found-l p { font-size: 15px; line-height: 1.5; color: var(--ink-secondary); letter-spacing: -0.004em; } .found-l p b { color: var(--ink); font-weight: 600; } .found-say { margin-top: 30px; font-size: clamp(19px, 2.1vw, 27px); font-weight: 200; line-height: 1.24; letter-spacing: -0.028em; color: var(--ink); } /* the payoff: its own line, a step heavier, and a beat after the question it answers */ .found-pay { display: block; margin-top: .28em; font-weight: 300; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); } .motion .found-say:not(.paid) .found-pay { opacity: 0; transform: translateY(6px); } /* the word CAPSEAD in the mark's own spectrum, as the arrival writes it — never the sentence around it */ .cs-word { background-image: linear-gradient(97deg, #7FE2FD 0%, #0579EE 33%, #029E9B 70%, #02AC84 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .cs-word { color: var(--teal); -webkit-text-fill-color: currentColor; } } @media (max-width: 860px) { /* phone: the names sit over their own rows, so ninety days keep the full width */ .field { padding: 15px 15px 12px; } .fr { grid-template-columns: minmax(0, 1fr); gap: 0; } .fr-n { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding-top: 9px; } .fr-t { height: 24px; } .fmark.k-contact { height: 11px; } .fmark.k-commit { height: 9px; } .fspan { height: 13px; } .fghost { top: calc(50% + 9px); } .field-cap { display: none; } .field-key { gap: 8px 18px; } .field-key .replay { margin-left: 0; width: 100%; justify-content: center; } } /* a phone comes to the field a screen at a time: the same passes, in the same order, travelling a little quicker so the reading resolves nearer the reader's arrival than their patience */ @media (max-width: 760px) { .motion .field-rows .fr { transition-duration: .58s; } .motion .fspan { transition-duration: .7s; } .found-h, .found-l, .found-say { transition-duration: .5s; } .found-pay { transition-duration: .58s; } } /* =============== II · ONE ACCOUNT — three saves, read as one ============= */ /* Calder's own row is the ground and it stays (it is sticky), so every mark lands where the reader is already looking. The three saves pass it in the order they were made — what the team learned, what was said, what that call promised — and each one's line is stated in the reading beside them, which holds its place under the row. Why the three belong together is shown, never left to inference. */ .acct { position: relative; margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 0 56px; align-items: start; } .slice { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: var(--r-modal); background: var(--ground-inset); padding: 18px 22px 12px; position: sticky; top: 60px; z-index: 3; box-shadow: 0 24px 44px -26px rgba(0, 0, 0, .92); } .slice-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 8px; } .slice-name { font-size: var(--t-row-size); font-weight: 500; letter-spacing: -0.005em; color: var(--ink); } .slice-cap { color: var(--ink-faint); } .slice-track { position: relative; height: 66px; margin-right: 1px; } .slice-track::before { content: ''; position: absolute; left: 0; right: 0; top: 30px; height: 1px; background: rgba(255, 255, 255, .06); } /* today is the right edge of the row, as it is in every record on the site */ .slice-track::after { content: ''; position: absolute; top: 14px; height: 32px; right: -1px; width: 1px; background: var(--line-strong); } .sday { position: absolute; top: 56px; transform: translateX(-50%); white-space: nowrap; color: var(--ink-faint); font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; } .sday.above { top: 0; } .sday.end { transform: translateX(calc(-100% + 4px)); color: var(--gold); } .smark { position: absolute; z-index: 1; top: 30px; transform: translate(-50%, -50%) scaleY(1); border-radius: 1px; transition: opacity .5s var(--ease-out), transform .5s var(--ease-settle); } .smark.k-contact { width: 3px; height: 26px; background: var(--teal); } .smark.k-commit { width: 6px; height: 17px; background: var(--gold); } .smark.k-memory { width: 8px; height: 8px; background: var(--steel); } .smark.k-note { width: 2px; height: 9px; background: var(--ink-faint); } .smark.dim { opacity: .3; } /* owed: from the call that produced the commitment to the deadline it was given */ .sowed { position: absolute; top: 29px; height: 3px; border-radius: 2px; transform-origin: left center; background: linear-gradient(90deg, rgba(196, 146, 42, .12), rgba(196, 146, 42, .55)); transition: opacity .5s var(--ease-out), transform .7s var(--ease-out); } .slice.pending .smark.saved:not(.on) { opacity: 0; transform: translate(-50%, -50%) scaleY(.2); } .slice.pending .sday.saved:not(.on) { opacity: 0; } .slice.pending .sowed:not(.on) { opacity: 0; transform: scaleX(0); } .acct-saves { grid-column: 1; display: flex; flex-direction: column; gap: 42px; margin-top: 40px; min-width: 0; } .sv { min-width: 0; position: relative; z-index: 1; } .sv-tag { color: var(--ink-faint); margin-bottom: 13px; display: flex; align-items: center; gap: 9px; } .sv-say { font-size: var(--t-body-size); line-height: 1.6; color: var(--ink-faint); font-weight: 300; margin-top: 13px; max-width: 46ch; } .sv-say b { color: var(--ink-secondary); font-weight: 600; } .sv .ui { transition: border-color .45s var(--ease-out); } .sv.on .ui { border-color: var(--line-strong); } /* The reading keeps its place beside the saves, under Calder's row, from the first save to the chapter's end: on any screen wide enough to set them side by side and tall enough to hold the row and the reading's three lines (620px). It can never pass the chapter: its bounds are the account's own. */ .acct-read { grid-column: 2; margin-top: 40px; position: sticky; top: 206px; min-width: 0; } @media (min-width: 1001px) and (min-height: 620px) { /* the whole account stays in view for a while after the last save lands */ .acct-saves { padding-bottom: clamp(280px, 46vh, 460px); } } .acct-say { margin-top: 22px; font-size: clamp(17px, 1.6vw, 21px); font-weight: 200; line-height: 1.34; letter-spacing: -0.02em; color: var(--ink); text-wrap: pretty; max-width: 36ch; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); } .motion .acct-say:not(.on) { opacity: 0; transform: translateY(6px); } @media (max-width: 1000px), (max-height: 619px) { .acct-read { position: static; } } @media (max-width: 1000px) { /* stacked: the same journey down the screen, under a row that stays in view; the reading follows its saves */ .acct { grid-template-columns: minmax(0, 1fr); } .acct-saves, .acct-read { grid-column: 1; } /* the reading is the payoff: once it is reached the card passes over the row, never under it (its closing words, which stand on open ground, pass under it like everything else) */ .acct-read { position: relative; top: auto; } .acct-read .reading { z-index: 4; } .acct-saves { gap: 40px; margin-top: 32px; } .slice { padding: 14px 14px 10px; top: 57px; } .slice-cap { display: none; } } /* A save and the line it becomes carry ONE cue: a spine in the kind's own colour — steel for what the team learned, teal for what was said, gold for what was promised — on the saved form and on its line of the reading, facing each other across the gutter, and the reading marks its words in the same colour. Where the two stand side by side, the pair being read brightens together, and a save lands the moment it is level with its line: one light crosses the gutter, once, and settles. Stacked, the spines carry it alone. */ .acct [data-mark="memory"] { --sem: var(--steel); --sem-rgb: 90, 135, 184; } .acct [data-mark="contact"] { --sem: var(--teal); --sem-rgb: 24, 208, 215; } .acct [data-mark="commit"] { --sem: var(--gold); --sem-rgb: 196, 146, 42; } .acct .sv .ui, .acct .sv.on .ui { border-left: 2px solid rgba(var(--sem-rgb), .62); } .acct .sv .ui { transition: border-color .45s var(--ease-out), box-shadow .5s var(--ease-out); } .acct .sv-k { color: var(--sem); } .acct .sv.cur .ui { border-left-color: var(--sem); box-shadow: -10px 0 22px -14px rgba(var(--sem-rgb), .9); } .acct .rline { margin: 0 -10px; padding: 15px 10px; background: linear-gradient(90deg, rgba(var(--sem-rgb), .11), rgba(var(--sem-rgb), 0) 72%) no-repeat 0 0 / 0% 100%; transition: opacity .45s var(--ease-out), transform .45s var(--ease-out), background-size .7s var(--ease-out); } .acct .rline p { transition: color .5s var(--ease-out); } .acct .rline .rspine { transition: box-shadow .5s var(--ease-out); } .acct .rline.cur { background-size: 100% 100%; } .acct .rline.cur p { color: var(--ink); } .acct .rline.cur .rspine { box-shadow: 0 0 12px rgba(var(--sem-rgb), .6); } .acct .rline .hl { --hlc: rgba(var(--sem-rgb), .28); } .acct .rline .hl.settled { --hlc: rgba(var(--sem-rgb), 0); text-decoration-color: rgba(var(--sem-rgb), .8); } .acct-trace { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; } .acct-trace path { fill: none; stroke: var(--sem); stroke-width: 1.5; stroke-linecap: round; } .acct-trace circle { fill: var(--sem); } /* The capture UI, drawn from the shipped composer, Active Need row and memory editor (EntryComposer, ActiveNeeds, MemoryEditor): gold type choice and contact tick, teal-tint Save / Confirm, the due date set on the need itself. */ .ui { border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--ground); padding: 13px 14px; } .ui-ed { border-left: 2px solid var(--gold); } .ui-types { display: flex; gap: 6px; } .ui-type { font-size: var(--t-meta-size); color: var(--ink-secondary); border: 1px solid var(--line); border-radius: var(--r-control); padding: 4px 10px; line-height: 1.3; } .ui-type.on { color: var(--gold); border-color: var(--gold-line); background: var(--gold-dim); } .ui-lab { color: var(--ink-faint); font-size: var(--t-meta-size); margin-bottom: 7px; } .ui-l { color: var(--ink-secondary); font-size: var(--t-meta-size); margin-top: 11px; display: flex; align-items: center; gap: 8px; } .ui-check { width: 13px; height: 13px; border-radius: 3px; background: var(--gold); position: relative; flex: 0 0 auto; } .ui-check::after { content: ''; position: absolute; left: 4px; top: 1.5px; width: 3.5px; height: 7px; border: solid var(--ground); border-width: 0 1.6px 1.6px 0; transform: rotate(42deg); } /* left unticked: a note that is not customer contact carries no contact date */ .ui-check.off { background: none; border: 1px solid var(--ink-faint); } .ui-check.off::after { content: none; } .ui-row > .ui-l { margin-top: 0; } .ui-v { font-size: var(--t-body-size); color: var(--ink); line-height: 1.45; } .ui-v.gap { margin-top: 11px; } .ui-row { display: flex; justify-content: space-between; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line-inner); } .ui-row.top { margin-top: 2px; padding-top: 0; border-top: none; justify-content: flex-start; gap: 10px 16px; } .ui-row.end { justify-content: flex-end; } .ui-fl { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-meta-size); color: var(--ink-faint); } .ui-field { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-meta-size); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-control); background: var(--ground-inset); padding: 4px 9px; transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out); } .ui-field.press { border-color: var(--teal-line); box-shadow: 0 0 0 3px rgba(24, 208, 215, .12); } .ui-caret { width: 6px; height: 6px; border: solid var(--ink-faint); border-width: 0 1.2px 1.2px 0; transform: translateY(-2px) rotate(45deg); } .ui-acts { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; } .ui-ghost { font-size: var(--t-meta-size); color: var(--ink-faint); padding: 5px 8px; } .ui-date { font-size: var(--t-meta-size); color: var(--ink-secondary); font-variant-numeric: tabular-nums; } .ui-btn { font-size: var(--t-meta-size); font-weight: 600; color: var(--ink); background: var(--teal-tint); border: 1px solid var(--teal-line); padding: 4px 13px; border-radius: var(--r-control); transition: transform .18s var(--ease-out), background-color .18s var(--ease-out); } .ui-btn.press { transform: scale(.95); background: rgba(24, 208, 215, .22); } /* =============== THE READING — the object every reading on the site is ======== */ /* the read mark: one tint, on the source fact and on the reading that carries it */ @property --hlc { syntax: ''; inherits: false; initial-value: rgba(27, 176, 220, .24); } .hl { --hlc: rgba(27, 176, 220, .24); background-image: linear-gradient(var(--hlc), var(--hlc)); background-repeat: no-repeat; background-size: 0% 100%; border-radius: 2px; padding: 1px 3px; margin: 0 -3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .6s var(--ease-out), --hlc 1s var(--ease-out), color .4s var(--ease-out); } .hl.on { background-size: 100% 100%; color: var(--ink); } /* settles to a cited trace, not a box */ .hl.settled { --hlc: rgba(27, 176, 220, 0); text-decoration: underline 1px rgba(27, 176, 220, .62); text-underline-offset: 3px; } .reading { position: relative; z-index: 2; border: 1px solid var(--line-strong); border-radius: var(--r-modal); background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 60%), var(--ground-occluding); padding: 24px 24px 22px; box-shadow: 0 40px 90px -46px rgba(0, 0, 0, .95); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); } .reading:not(.on) { opacity: 0; transform: translateY(8px); } /* the reading mark: the record is being read, so the spectrum may appear — as a hairline */ .reading::before { content: ''; position: absolute; left: 24px; right: 24px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--score-blue) 30%, var(--score-cyan) 60%, transparent); opacity: .55; } .reading-h { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line-inner); margin-bottom: 4px; color: var(--ink-faint); } .rline { display: flex; gap: 13px; padding: 15px 0; border-bottom: 1px solid var(--line-inner); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); } .rline:not(.on) { opacity: 0; transform: translateY(5px); } .rline:last-of-type { border-bottom: none; } .rspine { width: 2px; border-radius: var(--r-spine); flex: 0 0 auto; align-self: stretch; } .rspine.gold { background: var(--gold); } .rspine.steel { background: var(--steel); } .rspine.teal { background: var(--teal); } .rspine.sage { background: var(--sage); } .rspine.amber { background: var(--amber); } .rspine.score { background: linear-gradient(180deg, var(--score-navy), var(--score-cyan) 55%, var(--score-teal)); } .rline p { font-size: var(--t-body-size); line-height: 1.55; color: var(--ink-secondary); } .rline p b { color: var(--ink); font-weight: 600; } .rsrc { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--t-meta-size); color: var(--ink-faint); font-variant-numeric: tabular-nums; } @media (max-width: 1000px) { .reading { padding: 18px 18px 16px; } .reading::before { left: 18px; right: 18px; } } /* ===================== 4 · PRODUCT PROOF ================================ */ /* Two real surfaces, redrawn from the shipped components with illustrative records: Command's work band (CommandSurface) and the Customer Quick View (CustomerQuickView). A plane laid in front of a plane — depth, not a grid. */ .proof { position: relative; margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr) 452px; column-gap: 72px; align-items: start; } .panel { border: 1px solid var(--line); border-radius: var(--r-modal); background: var(--ground-inset); overflow: hidden; margin: 0; min-width: 0; } .panel-h { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line-inner); background: var(--ground-occluding); color: var(--ink-faint); } .panel-h > :last-child { margin-left: auto; } /* Command runs the full measure; the Quick View rises into its lower margin, one plane in front of another, and the notes sit in the space beside it. Nothing real is covered. */ .proof .p-back { grid-column: 1 / -1; grid-row: 1; } .proof .p-back .cmd { padding-bottom: 104px; } .proof .p-front { grid-column: 2; grid-row: 2; margin-top: -84px; position: relative; z-index: 2; background: var(--ground-occluding); box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .02); } .proof .proof-notes { grid-column: 1; grid-row: 2; } @media (max-width: 1080px) { .proof { grid-template-columns: minmax(0, 1fr); } .proof .p-back .cmd { padding-bottom: 60px; } .proof .p-front { grid-column: 1; grid-row: 2; margin: -40px 0 0 auto; width: min(calc(100% - 18px), 452px); } .proof .proof-notes { grid-column: 1; grid-row: 3; } } @media (max-width: 520px) { .panel-h .t-meta { display: none; } } /* Command · Where to look first */ .cmd { padding: 18px 22px 20px; } .cmd-head { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line-inner); } .cmd-k { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .cmd-k.gold { color: var(--gold); } .cmd-k.steel { color: var(--steel); } .cmd-kx { font-size: var(--t-micro-size); color: var(--ink-faint); letter-spacing: .02em; } @media (max-width: 760px) { .cmd-kx { display: block; margin-top: 4px; } .cmd-kx .dot { display: none; } } .cmd-counts { font-size: var(--t-meta-size); color: var(--ink-secondary); font-variant-numeric: tabular-nums; } .cmd-group { padding: 16px 0 6px; } .cmd-qs { font-size: var(--t-meta-size); color: var(--ink-secondary); line-height: 1.5; margin: 0 0 6px; max-width: 72ch; } .cmd-row { display: grid; grid-template-columns: 64px 176px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line-inner); font-size: var(--t-body-size); } .cmd-chip { justify-self: start; font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-pill); line-height: 1.2; } .cmd-chip.today { color: var(--gold); background: var(--gold-dim); border: 1px solid var(--gold-line); } .cmd-chip.quiet { color: var(--steel); background: var(--steel-dim); border: 1px solid rgba(90, 135, 184, .26); } .cmd-cust { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmd-stmt { color: var(--ink-secondary); min-width: 0; } .cmd-right { display: inline-flex; gap: 14px; align-items: baseline; justify-content: flex-end; white-space: nowrap; } .cmd-who { font-size: var(--t-meta-size); color: var(--ink-faint); } .cmd-when { font-size: var(--t-meta-size); color: var(--ink-secondary); } /* A row that can be opened. In the shipped Command the ROW itself is the control — the design took the per-row "Open customer" button out, because "a band whose every line carries a name, a sentence and a button is a table of buttons rather than a list of work", and gave it an accessible name instead. It is marked exactly as `.capRow.capOpenable` marks it (commandStage.ts): a pointer, a wash under the hand, and a focus ring in GOLD — the band's own colour, not the site's teal, because what is being pointed at is something that needs attention. The wash is pulled out to the panel's edge so the row lights as a row, not as an inset block. */ .cmd-row.cmd-open { text-decoration: none; color: inherit; cursor: pointer; margin: 0 -22px; padding-left: 22px; padding-right: 22px; transition: background-color .22s var(--ease-out); } /* The shipped band has no resting cue: a pointer finds the row, and a pointer is enough when every row opens. Here only one customer has a profile to open, so without a mark at rest a phone has nothing to go on. It is the product's own invitation, shrunk to the size of a row — `.capOpenLink` carries a gold arrow at 11px and .75 opacity — set against the name, because the name is what opens. It travels on hover like every other arrow on this site. */ .cmd-row.cmd-open .cmd-go { display: inline-block; /* the sheet sets svg { display: block } */ width: 11px; height: 11px; margin-left: 7px; vertical-align: -1px; color: var(--gold); opacity: .75; transition: transform .24s var(--ease-out); } @media (hover: hover) { .cmd-row.cmd-open:hover .cmd-go { transform: translateX(3px); } } @media (hover: hover) { .cmd-row.cmd-open:hover { background-color: var(--wash); } } .cmd-row.cmd-open:focus-visible { outline: 2px solid color-mix(in srgb, var(--gold) 75%, transparent); outline-offset: -2px; border-radius: var(--r-chip); } .cmd-row.cmd-open:active { background-color: var(--wash-selected); transition-duration: .08s; } @media (max-width: 760px) { .cmd-row.cmd-open { margin: 0 -16px; padding-left: 16px; padding-right: 16px; } } @media (max-width: 760px) { .cmd { padding: 16px 16px 18px; } .cmd-row { grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; padding: 12px 0; } .cmd-stmt { grid-column: 1 / -1; } .cmd-right { grid-column: 1 / -1; justify-content: flex-start; } .cmd-right:empty { display: none; } } /* Customer Quick View · Delta Ridge Produce */ .qv { padding: 20px 20px 16px; } .qv-top { display: flex; justify-content: space-between; gap: 12px; } .qv-name { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); line-height: 1.2; } .qv-loc { font-size: var(--t-meta-size); color: var(--ink-faint); margin-top: 3px; } .qv-x { width: 28px; height: 28px; border-radius: var(--r-control); position: relative; flex: 0 0 auto; } .qv-x::before, .qv-x::after { content: ''; position: absolute; left: 8px; top: 13.5px; width: 12px; height: 1px; background: var(--ink-faint); } .qv-x::before { transform: rotate(45deg); } .qv-x::after { transform: rotate(-45deg); } .qv-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; } .mini { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: var(--r-control); font-size: var(--t-meta-size); font-weight: 500; color: var(--ink-secondary); border: 1px solid rgba(255, 255, 255, .068); } .mini.teal { color: var(--ink); background: var(--teal-tint); border-color: var(--teal-line); } .mini-ring { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--teal); } .mini-plus { position: relative; width: 9px; height: 9px; } .mini-plus::before, .mini-plus::after { content: ''; position: absolute; background: var(--ink-faint); } .mini-plus::before { left: 4px; top: 0; width: 1px; height: 9px; } .mini-plus::after { left: 0; top: 4px; width: 9px; height: 1px; } /* The three sections are ONE row, always. Where the labels fit, each tab is as wide as its label — the product's own compact strip; where they do not, the columns give way together and a label wraps inside its own tab, so no tab ever drops below another and every top edge stays level. */ .qv-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); justify-content: start; align-items: stretch; gap: 4px; margin: 16px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line-inner); } .qv-tab { position: relative; font-size: var(--t-meta-size); font-weight: 500; color: var(--ink-faint); padding: 5px 9px; border-radius: var(--r-control); white-space: normal; min-width: 0; } /* Home's Quick View is 360px wide: the three labels are 267px of text, so the strip is set 2px tighter per tab than the drawer's to hold them on one line with room to spare */ @media (min-width: 761px) { .pcomp .qv-tabs { gap: 2px; } .pcomp .qv-tab { padding: 5px 7px; } } /* a phone: three equal cells across the drawer, each label centred in its own */ @media (max-width: 760px) { .qv-tabs, .drawer-comp .qv-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; line-height: 1.3; } .qv-tabs button.qv-tab { padding: 5px 4px; text-align: center; } } /* The three sections share one cell, so a change happens in place: the outgoing panel fades where it stands while the incoming one rises into it — `cvDrawerFade` is the shipped drawer's own entrance (opacity 0 / translateY(3px), .17s). The product's drawer is a fixed height whose body scrolls, so it never resizes; in the page it must, so the box settles to the new height around the change. */ .qv-body { display: grid; align-items: start; transition: height .3s var(--ease-lock); } /* only while the two overlap: a taller outgoing panel must not spill past the box as it fades. At rest the box never clips, so a focused panel keeps its ring. */ .qv-body.qv-swapping { overflow: clip; } .qv-body > [role="tabpanel"] { grid-area: 1 / 1; min-width: 0; transition: opacity .17s var(--ease-out), transform .17s var(--ease-out); } .qv-body > .qv-enter { opacity: 0; transform: translateY(3px); } .qv-body > .qv-leave { opacity: 0; } .qv-standing { font-size: var(--t-body-size); color: var(--ink-secondary); padding-bottom: 14px; border-bottom: 1px solid var(--line-inner); } .qv-sec { padding: 14px 0; border-bottom: 1px solid var(--line-inner); } .qv-k { font-size: var(--t-micro-size); font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; } .qv-v { font-size: var(--t-body-size); font-weight: 500; color: var(--ink); } .qv-link { font-size: var(--t-meta-size); color: var(--ink-secondary); margin-top: 4px; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; } .qv-lab { font-size: var(--t-meta-size); color: var(--ink-faint); margin-bottom: 4px; } .qv-mem { font-size: var(--t-row-size); color: var(--ink); line-height: 1.5; } .qv-prov { font-size: var(--t-meta-size); color: var(--ink-faint); margin-top: 6px; } .qv-note { font-size: var(--t-body-size); color: var(--ink-secondary); line-height: 1.5; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .qv-foot { display: flex; align-items: center; gap: 7px; padding-top: 14px; font-size: var(--t-meta-size); font-weight: 500; color: var(--ink-secondary); } .qv-foot svg { width: 13px; height: 13px; color: var(--teal); } .proof-notes { display: grid; gap: 40px; padding-top: 64px; } @media (max-width: 1080px) { .proof-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 56px; padding-top: 48px; } } @media (max-width: 760px) { .proof-notes { grid-template-columns: 1fr; gap: 26px; padding-top: 40px; } } .pnote h3 { display: flex; align-items: center; gap: 10px; color: var(--ink-secondary); margin-bottom: 12px; } .pnote p { font-size: var(--t-row-size); line-height: 1.64; color: var(--ink-secondary); font-weight: 300; max-width: 58ch; } .pnote p b { color: var(--ink); font-weight: 500; } .pnote .note { margin-top: 14px; font-size: var(--t-body-size); } /* ===================== 5 · RELATIONSHIP AWARENESS ======================= */ .aw-stage { margin-top: 56px; border: 1px solid var(--line); border-radius: var(--r-modal); background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 40%), var(--ground-occluding); padding: 26px 28px 22px; position: relative; box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .95); } .aw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line-inner); margin-bottom: 30px; flex-wrap: wrap; } .aw-head > div { padding-right: 236px; } .aw-name { font-size: var(--t-title-size); font-weight: 600; letter-spacing: -0.015em; } .aw-meta { color: var(--ink-faint); margin-top: 4px; } .axis { position: relative; height: 146px; } /* the record recedes: the past is further back and fainter, today is nearest */ .axis-base { position: absolute; left: 0; right: 0; bottom: 52px; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .025), var(--line) 55%, var(--line-strong)); } .tick { position: absolute; bottom: 52px; width: 2px; height: 24px; background: var(--ink-secondary); border-radius: 1px; transform-origin: bottom; transform: scaleY(0); opacity: var(--o, .8); transition: transform .3s var(--ease-settle); } .tick.on { transform: scaleY(1); } .tick.last { background: var(--teal); height: 34px; opacity: 1; } /* the hinge: the last recorded contact, named where it stands */ .aw-hinge { position: absolute; bottom: 52px; height: 72px; width: 0; border-left: 1px solid var(--teal-line); opacity: 0; transition: opacity .4s var(--ease-out); } .aw-hinge.on { opacity: 1; } .aw-hinge-l { position: absolute; top: -2px; right: 8px; white-space: nowrap; color: var(--teal); } /* the customer's own longest gap, faint and dashed, where it actually happened */ .aw-prior { position: absolute; bottom: 36px; height: 16px; } .aw-prior::before { content: ''; position: absolute; inset: 0; border: 1px dashed var(--line-strong); border-top: none; clip-path: inset(0 100% 0 0); transition: clip-path .5s var(--ease-out); } .aw-prior.on::before { clip-path: inset(0); } .aw-prior-l { position: absolute; top: 20px; right: 0; white-space: nowrap; color: var(--ink-faint); opacity: 0; transition: opacity .45s var(--ease-out) .15s; } .aw-prior.on .aw-prior-l { opacity: 1; } /* today's silence, from the hinge */ .live { position: absolute; bottom: 52px; height: 58px; border: 1px solid var(--teal-line); border-bottom: none; background: linear-gradient(180deg, rgba(24, 208, 215, .10), transparent); width: 0; } /* the production treatment: a relationship quieter than its own past is GOLD, never amber (amber = overdue) */ .live.over { border-color: var(--gold); background: linear-gradient(180deg, var(--gold-dim), transparent); } .live-l { position: absolute; top: -20px; right: 0; white-space: nowrap; color: var(--teal); opacity: 0; transition: color .5s var(--ease-out), opacity .25s var(--ease-out); } /* the count appears once the silence starts to run, so it never sits on the hinge's own label */ .live.run .live-l { opacity: 1; } .live.over .live-l { color: var(--gold); } /* only the part beyond the customer's own past is the excess */ .aw-excess { position: absolute; top: 0; bottom: 0; right: 0; opacity: 0; background: linear-gradient(180deg, rgba(196, 146, 42, .30), rgba(196, 146, 42, .07)); transition: opacity .45s var(--ease-out); } .aw-excess.on { opacity: 1; } /* a copy of that longest gap, lifted out of the record and laid from the hinge: the same origin */ .ghost { position: absolute; bottom: 60px; height: 16px; border: 1px dashed rgba(236, 234, 230, .34); background: rgba(236, 234, 230, .025); opacity: 0; } .ghost.on { opacity: 1; } .ghost.go { animation: awLift .8s var(--ease-out) both; } @keyframes awLift { 0% { opacity: 0; transform: translate(-100%, 24px); } 14% { opacity: 1; transform: translate(-100%, 24px); } 46% { transform: translate(-100%, 0); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 100% { opacity: 1; transform: none; } } .axis-scale { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; color: var(--ink-faint); } .axis-v { display: none; } .aw-out { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-inner); display: flex; gap: 13px; transition: opacity .55s var(--ease-out), transform .55s var(--ease-out); } .aw-out:not(.on) { opacity: 0; transform: translateY(6px); } .aw-out p { font-size: var(--t-row-size); font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.005em; } .aw-out span.sub2 { display: block; margin-top: 5px; font-size: var(--t-body-size); color: var(--ink-faint); font-weight: 400; } .aw-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px 40px; margin-top: 30px; flex-wrap: wrap; } .aw-foot .note { flex: 1 1 420px; } #replayAw { position: absolute; top: 24px; right: 26px; } @media (max-width: 760px) { .axis { display: none; } .axis-v { display: block; position: relative; height: 372px; margin: 4px 0 6px; } .aw-stage { padding: 22px 18px 20px; } #replayAw { position: static; width: 100%; justify-content: center; margin-top: 14px; } .aw-head > div { padding-right: 0; } .aw-head { margin-bottom: 22px; } } /* phone: the same comparison, rotated — time runs down, today at the foot */ .av-rule { position: absolute; left: 74px; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, rgba(255, 255, 255, .025), var(--line) 55%, var(--line-strong)); } .av-mark { position: absolute; left: 74px; width: 46px; height: 2px; border-radius: 1px; background: var(--ink-secondary); opacity: var(--o, .8); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-settle); } .av-mark.on { transform: scaleX(1); } .av-mark.last { background: var(--teal); width: 52px; opacity: 1; } .av-lbl { position: absolute; left: 0; width: 66px; text-align: right; color: var(--ink-faint); } .av-hinge { position: absolute; left: 144px; margin-top: -7px; width: min(150px, calc(100% - 144px)); color: var(--teal); opacity: 0; transition: opacity .4s var(--ease-out); } .av-hinge span, .av-prior span { display: block; line-height: 1.3; } .av-hinge.on { opacity: 1; } .av-prior { position: absolute; left: 132px; width: 0; border-left: 1px dashed var(--line-strong); clip-path: inset(-12px -190px 100% -6px); transition: clip-path .5s var(--ease-out); } .av-prior.on { clip-path: inset(-12px -190px -30px -6px); } .av-prior::before, .av-prior::after { content: ''; position: absolute; left: -4px; width: 7px; height: 1px; background: var(--line-strong); } .av-prior::before { top: 0; } .av-prior::after { bottom: 0; } .av-prior span { position: absolute; left: 12px; top: -6px; width: min(150px, calc(100vw - 240px)); color: var(--ink-faint); } /* the narrowest phones: the gap's label takes the room the card has, so it never reaches the hinge's */ @media (max-width: 359px) { .av-prior span { width: calc(100vw - 223px); } .av-hinge { margin-top: 2px; } } .av-live { position: absolute; left: 72px; width: 4px; border-radius: 2px; height: 0; background: linear-gradient(180deg, var(--teal), var(--gold)); } .av-excess { position: absolute; left: -2px; right: -2px; bottom: 0; border-radius: 2px; background: var(--gold); opacity: 0; transition: opacity .45s var(--ease-out); } .av-excess.on { opacity: 1; } .av-live-l { position: absolute; z-index: 1; left: 14px; bottom: 0; padding: 0 3px; white-space: nowrap; color: var(--gold); letter-spacing: .07em; background: var(--ground-occluding); opacity: 0; transition: opacity .25s var(--ease-out); } .av-live.run .av-live-l { opacity: 1; } .av-ghost { position: absolute; left: 96px; width: 0; border-left: 1px dashed rgba(236, 234, 230, .42); opacity: 0; } .av-ghost::before, .av-ghost::after { content: ''; position: absolute; left: -4px; width: 7px; height: 1px; background: rgba(236, 234, 230, .42); } .av-ghost::before { top: 0; } .av-ghost::after { bottom: 0; } .av-ghost.on { opacity: 1; } .av-ghost.go { animation: avLift .8s var(--ease-out) both; } @keyframes avLift { 0% { opacity: 0; transform: translate(36px, -100%); } 14% { opacity: 1; transform: translate(36px, -100%); } 46% { transform: translate(0, -100%); animation-timing-function: cubic-bezier(.45, 0, .2, 1); } 100% { opacity: 1; transform: none; } } /* ===================== 6 · THE SCORE =================================== */ .score-top { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 62px; align-items: center; margin-top: 56px; } @media (max-width: 980px) { .score-top { grid-template-columns: 1fr; gap: 34px; } } .dial { display: block; /* it is a inside the control that opens it */ position: relative; aspect-ratio: 1; width: 100%; max-width: 330px; margin: 0 auto; } /* the one place atmosphere earns its keep below the arrival: behind the reading itself */ #dialWrap { position: relative; } #dialWrap::before { content: ''; position: absolute; inset: -18% -10%; pointer-events: none; z-index: -1; background: radial-gradient(closest-side, rgba(27, 176, 220, .075), rgba(30, 122, 216, .03) 55%, transparent 75%); } /* one column (and after the rule above, or that rule wins): the dial's column is the full measure, so its light stays inside it instead of reaching past the page's edge — 768–976px overflowed by up to 30px */ @media (max-width: 980px) { #dialWrap::before { inset: -18% 0; } } /* the shipped instrument is a BEZEL: its geometry is identical at every value */ .bezel { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, var(--score-navy) 0deg, var(--score-blue) 95deg, var(--score-cyan) 190deg, var(--score-teal) 275deg, var(--score-navy) 360deg); -webkit-mask: radial-gradient(closest-side circle, transparent 0 calc(100% - 5px), #000 calc(100% - 5px) calc(100% - 1px), transparent calc(100% - 1px)); mask: radial-gradient(closest-side circle, transparent 0 calc(100% - 5px), #000 calc(100% - 5px) calc(100% - 1px), transparent calc(100% - 1px)); animation: bezelDrift 110s linear infinite; opacity: .92; will-change: transform; } .bezel-idx { position: absolute; top: -3px; left: 50%; width: 1px; height: 12px; margin-left: -.5px; background: var(--ink-secondary); } @keyframes bezelDrift { to { transform: rotate(360deg); } } /* The Score page's ring is quietly alive: its spectrum drifts round, very slowly, and its light rises and settles like breath, with a faint halo breathing with it. Only the ring lives — the number never moves, nothing scales, nothing spins fast. It is compositor work only (a turn and an opacity), it rests while it is off screen, and under reduced motion it stands still. */ #dialWrap .bezel { animation: bezelDrift 80s linear infinite, ringBreath 8s ease-in-out infinite alternate; } #dialWrap .dial::before { content: ''; position: absolute; inset: -5%; border-radius: 50%; pointer-events: none; background: conic-gradient(from 0deg, var(--score-navy) 0deg, var(--score-blue) 95deg, var(--score-cyan) 190deg, var(--score-teal) 275deg, var(--score-navy) 360deg); -webkit-mask: radial-gradient(closest-side circle, transparent calc(100% - 30px), #000 calc(100% - 17px) calc(100% - 13px), transparent); mask: radial-gradient(closest-side circle, transparent calc(100% - 30px), #000 calc(100% - 17px) calc(100% - 13px), transparent); filter: blur(9px); opacity: .14; will-change: transform, opacity; animation: bezelDrift 80s linear infinite, ringHalo 8s ease-in-out infinite alternate; } @keyframes ringBreath { from { opacity: .74; } to { opacity: 1; } } @keyframes ringHalo { from { opacity: .05; } to { opacity: .22; } } /* the only ambient loop on the page, and it rests when it is off-screen */ .idle .dial, .idle .bezel, .idle .dial::before { animation-play-state: paused; } /* The reading wakes, once: the first time the ring is really seen, one light of its own spectrum — blue, then cyan, then teal at its head — travels round it from the top in 2.6s, the ring a touch brighter while it does, and then it is gone and the slow drift carries on. It lives on the ring (the ring's own mask holds it to the band), never on the number; the script starts it once per visit, and never under reduced motion. */ #dialWrap .bezel::after { content: none; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: conic-gradient(from 0deg, rgba(30, 122, 216, 0) 0deg 272deg, rgba(40, 140, 236, .7) 306deg, rgba(64, 200, 240, .95) 336deg, rgba(70, 232, 218, 1) 351deg, rgba(214, 248, 255, 1) 358deg, rgba(214, 248, 255, 0) 360deg), linear-gradient(rgba(170, 236, 255, .18), rgba(170, 236, 255, .18)); opacity: 0; transform: rotate(var(--wake-from, 0deg)); } /* …and a soft light travels with its head, just outside the band (the halo's own mask): never on the number */ #dialWrap .dial::after { content: none; position: absolute; inset: -5%; border-radius: 50%; pointer-events: none; background: conic-gradient(from 0deg, rgba(30, 122, 216, 0) 0deg 290deg, rgba(40, 150, 236, .5) 322deg, rgba(70, 225, 235, .9) 352deg, rgba(160, 240, 255, 0) 360deg); -webkit-mask: radial-gradient(closest-side circle, transparent calc(100% - 30px), #000 calc(100% - 18px) calc(100% - 12px), transparent); mask: radial-gradient(closest-side circle, transparent calc(100% - 30px), #000 calc(100% - 18px) calc(100% - 12px), transparent); filter: blur(7px); opacity: 0; } #dialWrap.wake .bezel::after { content: ''; animation: ringWake 2600ms cubic-bezier(.42, .06, .3, 1) 1 both, ringWakeLight 2600ms linear 1 both; } #dialWrap.wake .dial::after { content: ''; animation: ringWakeBloom 2600ms cubic-bezier(.42, .06, .3, 1) 1 both, ringWakeGlow 2600ms linear 1 both; } @keyframes ringWake { from { transform: rotate(var(--wake-from, 0deg)); } to { transform: rotate(calc(var(--wake-from, 0deg) + 360deg)); } } @keyframes ringWakeBloom { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes ringWakeLight { 0% { opacity: 0; } 14% { opacity: 1; } 76% { opacity: 1; } 100% { opacity: 0; } } @keyframes ringWakeGlow { 0% { opacity: 0; } 16% { opacity: .55; } 72% { opacity: .55; } 100% { opacity: 0; } } .dial-core { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .dial-n { font-size: clamp(64px, 8vw, 96px); font-weight: 200; letter-spacing: -0.05em; line-height: 1; color: var(--ink); } .dial-c { margin-top: 12px; color: var(--ink-faint); } /* ── the Score, under the visitor's hand ────────────────────────────────────── Home plays this; here it is operated. The instrument is the control: the whole dial is the button, and the reconciliation is its second state — one instrument, not a dial and a panel beside it. The ring is never dimmed and never moves; what opens is seated past its edge and GROWS from it, the way the product's own ring opens. The invitation under the number is the product's own words. */ .dial-btn { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; border-radius: var(--r-modal); text-align: center; } .dial-cue { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; font-size: var(--t-row-size); font-weight: 500; color: var(--ink-secondary); transition: color .22s var(--ease-out); } .dial-cue svg { width: 14px; height: 14px; color: var(--teal); transition: transform .24s var(--ease-out); } [aria-expanded="true"] .dial-cue svg { transform: rotate(90deg); } @media (hover: hover) { .dial-btn:hover .dial-cue { color: var(--ink); } .dial-btn:hover .dial-cue svg { transform: translateX(3px); } .dial-btn[aria-expanded="true"]:hover .dial-cue svg { transform: rotate(90deg) translateX(3px); } } .dial-btn:active .dial-cue { opacity: .66; transition: opacity .06s linear; } /* Beside the dial the account arrives from the right, into the place it already holds: closed, it keeps that place (.led-closed), so the dial never moves when it opens or closes. Under the dial it opens out of the dial's foot. Two named animations rather than one with a var() — a keyframe var() is the trap the Score passage already paid for. */ #ledgerWrap { position: relative; transform-origin: 50% 0; } /* the arrival starts past the page's right edge on a narrow desktop: it is clipped there, so for the moment it travels the page is never wider than the screen (clip, not hidden: the reading bar still sticks) */ #reconcile { overflow-x: clip; } #ledgerWrap.led-closed { visibility: hidden; } #ledgerWrap.led-arriving { animation: ledArrive .72s var(--ease-out) both; } #ledgerWrap.led-opening { animation: ledOpenDown .44s var(--ease-out) both; } @keyframes ledArrive { from { opacity: 0; transform: translateX(88px); } to { opacity: 1; transform: none; } } @keyframes ledOpenDown { from { opacity: 0; transform: scaleY(.92) translateY(-10px); } to { opacity: 1; transform: none; } } /* its own way out, named plainly and set where a panel's close is looked for. Stacked, there is no panel: the dial above the account already says "Close the Score" (and on a phone it rides the sticky reading bar, so it never leaves the screen), so a second close would only repeat it. */ .led-x { position: absolute; top: -48px; right: -10px; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border: 0; border-radius: var(--r-control); background: none; font: inherit; font-size: var(--t-meta-size); font-weight: 500; color: var(--ink-secondary); cursor: pointer; transition: color .18s var(--ease-out), background-color .18s var(--ease-out); } .led-x svg { width: 12px; height: 12px; } @media (hover: hover) { .led-x:hover { color: var(--ink); background: rgba(255, 255, 255, .05); } } .led-x:active { opacity: .66; transition: opacity .06s linear; } .led-x:focus-visible { outline: 2px solid var(--teal-focus); outline-offset: 0; } @media (max-width: 980px) { .led-x { display: none; } } /* what shapes the reading: named, dated evidence — each line shown in the record's own marks, never as points. Each line leads with its claim in the page's white; what explains it follows, quieter. The colour is the mark's: gold for commitments on or before their deadline, amber for the one that ran past it, and the Score's teal only for the Score. The line that shapes nothing stays neutral. */ .led-h { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding-bottom: 13px; border-bottom: 1px solid var(--line); color: var(--ink-faint); } .led-h > :first-child { color: var(--teal); } .led { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 20px; align-items: start; padding: 17px 0 18px; border-bottom: 1px solid var(--line-inner); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); } .led:not(.on) { opacity: 0; transform: translateY(6px); } @media (min-width: 981px) { .led:not(.on) { transform: translateX(16px); } } .led-k { color: var(--ink-faint); margin-bottom: 7px; } .lk.gold { color: var(--gold); } .lk.amber { color: var(--amber); } .led-t { font-size: var(--t-body-size); line-height: 1.55; color: var(--ink-secondary); } .led-a { display: block; margin-bottom: 3px; font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -0.008em; color: var(--ink); } .led-e { color: var(--amber); font-weight: 500; } /* the marks stand level with the claim they count */ .led-v { margin-top: 19px; font-size: 16px; font-weight: 600; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; } .led-mk, .led-fade { display: flex; justify-content: flex-end; align-items: center; gap: 3px; height: 24px; } .led-mk i { flex: 0 0 auto; width: 5px; height: 15px; border-radius: 1px; background: var(--gold); } /* due today and still open: the same mark, outlined — on its deadline, not yet met or missed */ .led-open i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--gold); width: 6px; } .led-fade { gap: 0; } .led-fade i { flex: 0 0 auto; width: 5px; height: 15px; border-radius: 1px; background: var(--amber); } .led-fade b { flex: 0 0 auto; width: 40px; height: 3px; border-radius: 0 1.5px 1.5px 0; background: linear-gradient(90deg, rgba(196, 123, 42, .8), rgba(196, 123, 42, 0)); } /* what it all comes to: the reading, in the Score's own colour and the dial's own hand */ .led-total { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 20px; align-items: baseline; border-top: 1px solid var(--line-strong); padding-top: 16px; margin-top: 4px; } .led-total > span:first-child { font-size: var(--t-row-size); color: var(--ink); font-weight: 500; } .led-total .n { font-size: 36px; font-weight: 300; line-height: 1; letter-spacing: -0.035em; text-align: right; color: var(--teal); font-variant-numeric: tabular-nums; } @media (max-width: 760px) { /* Phone: the reading IS this page, so the instrument is composed as one and centred on it — the ring at the width the screen gives it, the number inside the ring, the name of the reading under both. It is the same instrument as the desktop dial at the phone's own scale, not a badge beside a label; only the halo goes, which has no room over a column of evidence. It still holds its place while the account reconciles beneath it (it is sticky), so the number the evidence is being read FOR never leaves the screen. The reading and its own caption come up to meet the deck above them, so the page arrives at the instrument rather than at a gap. */ .score-top { margin-top: 30px; } #dialWrap::before { display: none; } #dialWrap { position: sticky; top: 57px; z-index: 5; background: var(--ground); padding: 14px 0 16px; border-bottom: 1px solid var(--line-inner); margin-bottom: 4px; } #dialWrap .dial { --bz: clamp(120px, 33vw, 168px); max-width: none; width: 100%; aspect-ratio: auto; height: auto; animation: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; } #dialWrap .bezel { position: relative; inset: auto; width: var(--bz); height: var(--bz); flex: 0 0 auto; } #dialWrap .bezel-idx { display: none; } #dialWrap .dial::before, #dialWrap .dial::after { display: none; } /* the ring breathes; the halo has no room here */ #dialWrap .dial-core { position: static; flex-direction: column; align-items: center; gap: 0; justify-content: center; } /* the number reads from INSIDE the bezel, laid over it rather than set beside it, so the ring is the same instrument as the dial on Home and on this page's own desktop */ #dialWrap .dial-n { position: absolute; left: 50%; top: 0; width: var(--bz); height: var(--bz); margin-left: calc(var(--bz) / -2); display: flex; align-items: center; justify-content: center; font-size: clamp(40px, 11vw, 54px); } #dialWrap .dial-c { margin-top: 0; } #dialWrap .dial-cue { margin-top: 16px; } .led { grid-template-columns: minmax(0, 1fr) 58px; gap: 14px; } .led-total { grid-template-columns: minmax(0, 1fr) 58px; gap: 14px; } .led-mk { gap: 2px; } .led-mk i { width: 4px; } .led-open i { width: 5px; } .led-fade b { width: 30px; } } /* history: told, not decoded — the cause on its own lane under the reading it moved */ .hist { margin-top: 64px; border-top: 1px solid var(--line); padding-top: 26px; } .hist-h { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--ink-faint); margin-bottom: 22px; } .hist-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; align-items: start; } .hist-read { padding-top: 6px; } .hr-n { font-size: clamp(52px, 4.6vw, 64px); font-weight: 200; letter-spacing: -0.05em; line-height: .9; color: var(--ink); } .hr-meta { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; min-height: 18px; } .hr-date { color: var(--ink-faint); } .hr-t { margin-top: 12px; font-size: var(--t-row-size); line-height: 1.5; color: var(--ink-secondary); min-height: 84px; letter-spacing: -0.005em; } .hr-t b { color: var(--ink); font-weight: 500; } .hist-svg { width: 100%; height: 248px; overflow: visible; } .hdrop { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; transition: opacity .45s var(--ease-out); } .hdrop.on { opacity: .7; } .hseg { fill: none; stroke: var(--score-cyan); stroke-width: 1.5; stroke-linecap: round; } .hdot { fill: var(--score-teal); } .hlane-rule { stroke: rgba(255, 255, 255, .05); stroke-width: 1; } .hlane-k { fill: var(--ink-faint); font-size: 11px; font-weight: 700; letter-spacing: .09em; } .hev { fill: var(--ink-secondary); font-size: 12px; font-weight: 500; opacity: 0; transition: opacity .45s var(--ease-out); font-variant-numeric: tabular-nums; } .hev.faint { fill: var(--ink-faint); } .hev.on { opacity: 1; } .hplay { stroke: var(--ink-secondary); stroke-width: 1; opacity: .55; } .hist-scale { display: flex; justify-content: space-between; color: var(--ink-faint); margin-top: 2px; } .hist-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap; margin-top: 26px; } .hist-foot .note { flex: 1 1 420px; } @media (max-width: 900px) { .hist-body { grid-template-columns: 1fr; gap: 14px; } .hist-read { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: end; } .hr-n { font-size: 52px; grid-row: 1 / 3; } .hr-meta { margin-top: 0; } .hr-t { grid-column: 1 / -1; margin-top: 8px; min-height: 66px; font-size: var(--t-body-size); } .hist-svg { height: 240px; } } /* ===================== 7 · CLOSE — REQUEST ACCESS ======================= */ /* Home ends here, on purpose early: the price, the two ways in, and what happens next. */ .close { padding: 150px 0 120px; text-align: center; } @media (max-width: 760px) { .close { padding: 96px 0 88px; } } .close-h { font-size: clamp(28px, 2.9vw, 40px); font-weight: 200; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; max-width: 22ch; margin: 22px auto 0; } /* the offer's seam: the arrival's own, used a second time and nowhere else — no glow, no tint on the price beneath it; it spreads once from its centre as the offer comes into view */ .price-seam { width: min(440px, 72vw); height: 2px; margin: 44px auto 0; border-radius: 2px; background: linear-gradient(90deg, #011539, #0579EE 30%, #7FE2FD 50%, #029E9B 72%, #02AC84); -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); transition: transform 1.1s cubic-bezier(.17, .84, .27, 1); } .price-seam.pending { transform: scaleX(0); } /* the price is the moment: neutral ink at the page's largest size; the $, the cents and the unit small */ .price { display: flex; align-items: baseline; justify-content: center; gap: 6px 18px; margin-top: 30px; flex-wrap: wrap; } .price-n { display: inline-flex; align-items: baseline; font-size: clamp(76px, 8.8vw, 128px); font-weight: 200; letter-spacing: -0.05em; line-height: .9; color: var(--ink); } .price-s { align-self: flex-start; margin: .2em .01em 0 0; font-size: .28em; font-weight: 300; letter-spacing: 0; color: var(--ink-secondary); } .price-c { font-size: .4em; letter-spacing: -0.03em; } .price-u { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; } .price-u span:first-child { font-size: 17px; color: var(--ink-secondary); } .price-u span + span { font-size: var(--t-meta-size); color: var(--ink-faint); } .price-terms { margin-top: 20px; font-size: var(--t-body-size); color: var(--ink-faint); } .close-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; } .close .close-cta { justify-content: center; } .close-small { margin: 16px auto 0; color: var(--ink-faint); font-size: var(--t-meta-size); max-width: 60ch; } /* what happens next: one neutral path through the three steps, each number set on it. Ink only — the way in is not a record event. The path draws once and each step brightens as it is reached. */ .next3 { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: 880px; margin: 56px auto 0; text-align: left; } .next3::before, .next3::after { content: ''; position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: 1px; } .next3::before { background: var(--line); } .next3::after { background: var(--ink-faint); opacity: .7; transform-origin: 0 50%; transition: transform 1.3s linear; } .next3.pending::after { transform: scaleX(0); } .next3 li { position: relative; padding: 24px 24px 0 0; font-size: var(--t-body-size); line-height: 1.55; color: var(--ink-secondary); transition: color .45s var(--ease-out); } .next3 li b { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: var(--t-row-size); font-weight: 500; margin-bottom: 6px; transition: color .45s var(--ease-out); } .next3 li b span { position: absolute; z-index: 1; left: 0; top: 0; transform: translateY(-50%); padding-right: 12px; background: var(--ground); font-size: var(--t-micro-size); font-weight: 700; line-height: 1; color: var(--ink-secondary); font-variant-numeric: tabular-nums; transition: color .45s var(--ease-out); } @media (min-width: 761px) { .next3 li + li b span { left: -12px; padding-left: 12px; } } .next3.pending li, .next3.drawing li:not(.reached) { color: var(--ink-faint); } .next3.pending li b, .next3.drawing li:not(.reached) b { color: var(--ink-secondary); } .next3.pending li b span, .next3.drawing li:not(.reached) b span { color: var(--ink-faint); } .next3 a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--line-strong); position: relative; } .next3 a::after { content: ''; position: absolute; inset: -15px 0; } .addr { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; } .addr code { font-family: var(--font); font-size: var(--t-row-size); color: var(--ink-secondary); font-weight: 500; } .copy { font-size: var(--t-micro-size); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); background: transparent; border: 1px solid var(--line); border-radius: var(--r-pill); min-height: 32px; padding: 0 13px; cursor: pointer; transition: color .22s var(--ease-out), border-color .22s var(--ease-out); } @media (max-width: 860px) { .copy { min-height: 44px; padding: 0 16px; } } @media (max-width: 760px) { .next3 { grid-template-columns: 1fr; margin-top: 44px; } /* phone: the same path, running down */ .next3::before, .next3::after { left: 8px; right: auto; top: 4px; bottom: 8px; width: 1px; height: auto; } .next3::after { transform-origin: 50% 0; } .next3.pending::after { transform: scaleY(0); } .next3 li { padding: 0 0 22px 32px; } .next3 li:last-child { padding-bottom: 0; } .next3 li b span { left: 8px; top: .72em; transform: translate(-50%, -50%); padding: 5px 0; } .close .close-cta .btn-primary, .close .close-cta .btn-ghost { flex: 1 1 auto; justify-content: center; } } /* ===================== DEEPER PAGES =================================== */ /* How it works, Product and The Score take their time. Each opens with the arrival's own grammar — a caption that names the object, then one statement — and lets the evidence carry the page. */ .page-hero { position: relative; padding: 168px 0 0; isolation: isolate; } .page-hero::before { content: ''; position: absolute; inset: 0 0 -40% 0; z-index: -1; pointer-events: none; background: radial-gradient(90% 60% at 50% -10%, rgba(24, 208, 215, .035) 0%, transparent 55%); } @media (max-width: 760px) { .page-hero { padding-top: 116px; } } .page-h { font-size: clamp(34px, 4.8vw, 62px); font-weight: 200; line-height: 1.06; letter-spacing: -0.036em; margin-top: 26px; max-width: 18ch; text-wrap: balance; } .page-say { margin-top: 22px; max-width: 58ch; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.62; color: var(--ink-secondary); font-weight: 300; text-wrap: pretty; } .page-say b { color: var(--ink); font-weight: 500; } /* The Score page's promise is two sentences: the object, then what it is. "live read" is the one phrase that states the Score itself, so it alone carries the Score's own spectrum (Brand System §5.4) — a step heavier than its line, as each page sets its one phrase — and never the sentence around it. */ .score-h { max-width: 21ch; } .score-h1 { display: block; } .sc-word { font-weight: 300; white-space: nowrap; background-image: linear-gradient(97deg, var(--score-blue) 0%, var(--score-cyan) 52%, var(--score-teal) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .sc-word { color: var(--score-cyan); -webkit-text-fill-color: currentColor; } } @media (forced-colors: active) { .sc-word { background: none; color: CanvasText; -webkit-text-fill-color: currentColor; } } /* The Score's scope, in the visitor's own words: the one question it answers, stated whole, then what that means five ways — the substance. Beside it, quieter and ruled, what is not part of it; and set apart under it, what CAPSEAD watches elsewhere, so a signal the Score leaves out is never mistaken for one CAPSEAD does not have. */ .scope { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 0 72px; margin-top: 52px; align-items: start; } .scope h3 { color: var(--ink-faint); padding-bottom: 12px; border-bottom: 1px solid var(--line); } .scope-yes h3 { color: var(--teal); border-bottom-color: var(--teal-line); } .scope-ask { margin-top: 22px; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.5; font-weight: 300; color: var(--ink-secondary); } .scope-lead { margin-top: 8px; font-size: clamp(22px, 2.3vw, 30px); font-weight: 200; line-height: 1.26; letter-spacing: -0.026em; color: var(--ink); max-width: 28ch; text-wrap: balance; } .scope-basis { margin-top: 14px; max-width: 52ch; font-size: var(--t-row-size); line-height: 1.6; color: var(--ink-faint); text-wrap: pretty; } .scope-yes ul { margin-top: 26px; } .scope-yes li { padding: 14px 0 15px; border-top: 1px solid var(--line-inner); font-size: var(--t-row-size); line-height: 1.6; color: var(--ink-secondary); max-width: 62ch; } .scope-yes li b { color: var(--teal); font-weight: 500; margin-right: .3em; } .scope-side { display: grid; gap: 52px; min-width: 0; } .scope-no li { position: relative; padding: 13px 0 13px 20px; border-bottom: 1px solid var(--line-inner); font-size: var(--t-body-size); line-height: 1.5; color: var(--ink-faint); } .scope-no li::before { content: ''; position: absolute; left: 0; top: calc(13px + .75em); width: 8px; height: 1px; background: var(--line-strong); } .scope-no li b { color: var(--ink-secondary); font-weight: 500; margin-right: .3em; } /* elsewhere in CAPSEAD: each signal with its own mark, in the relationship's steel */ .scope-else h3 { color: var(--steel); border-bottom-color: rgba(90, 135, 184, .3); } .scope-else li { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--line-inner); font-size: var(--t-body-size); line-height: 1.5; color: var(--ink-secondary); } .scope-else li .g { margin-top: 4px; } .scope-else li .g-memory { margin-top: 7px; } .scope-else li b { color: var(--ink); font-weight: 500; margin-right: .3em; } @media (max-width: 1000px) { .scope { grid-template-columns: minmax(0, 1fr); gap: 44px; } } /* =============== III · FIVE READINGS — one record, the lens changes ======= */ /* ONE stage, built once: nine customers, the last sixty days, today on the right edge. It stands still while the reader moves through five short beats beside it (under it, where there is no room beside), and only the lens changes — which marks are being read, which answer, and what CAPSEAD draws over them. Every lens is a state of `data-lens` on the stage; every change has one event of its own. */ .l5 { position: relative; margin-top: 56px; display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: 0 60px; align-items: start; } .l5-stage { grid-column: 2; grid-row: 1; position: sticky; top: max(96px, calc(50vh - 232px)); z-index: 3; border: 1px solid var(--line); border-radius: var(--r-modal); background: var(--ground-inset); padding: 16px 20px 14px; box-shadow: 0 40px 90px -52px rgba(0, 0, 0, .95); } .l5-h { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 13px; border-bottom: 1px solid var(--line-inner); color: var(--ink-faint); } /* where the reader is among the five: the current one in the reading's teal, the ones passed in its line */ .l5-steps { display: inline-flex; gap: 5px; flex: 0 0 auto; } .l5-steps i { width: 18px; height: 2px; border-radius: 1px; background: var(--line-strong); transition: background-color .4s var(--ease-out); } .l5-stage[data-lens="1"] .l5-steps i:nth-child(-n+1), .l5-stage[data-lens="2"] .l5-steps i:nth-child(-n+2), .l5-stage[data-lens="3"] .l5-steps i:nth-child(-n+3), .l5-stage[data-lens="4"] .l5-steps i:nth-child(-n+4) { background: var(--teal-line); } .l5-stage[data-lens="0"] .l5-steps i:nth-child(1), .l5-stage[data-lens="1"] .l5-steps i:nth-child(2), .l5-stage[data-lens="2"] .l5-steps i:nth-child(3), .l5-stage[data-lens="3"] .l5-steps i:nth-child(4), .l5-stage[data-lens="4"] .l5-steps i:nth-child(5) { background: var(--teal); } .l5-stage { --rn: 84px; } .l5-field { position: relative; margin: 38px 0 12px; } .l5-r { position: relative; display: grid; grid-template-columns: var(--rn) minmax(0, 1fr); gap: 0 14px; align-items: center; height: 34px; transition: transform .6s var(--ease-out); } .l5-rn { font-size: var(--t-meta-size); color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .45s var(--ease-out); } .l5-t { position: relative; height: 100%; } .l5-t::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255, 255, 255, .035); } /* the record, with its past falling away into the stage's left edge */ .l5-fade { position: absolute; top: 0; bottom: 0; left: -2px; width: 12%; background: linear-gradient(90deg, rgba(10, 10, 18, .7), rgba(10, 10, 18, 0)); } .l5-over { position: absolute; top: -10px; bottom: -10px; right: 0; left: calc(var(--rn) + 14px); pointer-events: none; } .l5-edge { position: absolute; top: 0; bottom: 0; right: -1px; width: 1px; background: var(--line-strong); } .l5-scale { display: flex; justify-content: space-between; margin-left: calc(var(--rn) + 14px); color: var(--ink-faint); padding-top: 10px; border-top: 1px solid var(--line-inner); } /* every mark the record holds, at the level of something not being read */ .pm { position: absolute; z-index: 1; top: 50%; transform: translate(-50%, -50%); border-radius: 1px; opacity: .14; } .pm.k-contact { width: 2px; height: 16px; background: var(--teal); } .pm.k-commit { width: 4px; height: 12px; background: var(--gold); } .pm.k-memory { width: 5px; height: 5px; background: var(--steel); } .pm.k-note { width: 2px; height: 7px; background: var(--ink-faint); } /* how long it has been — from each last recorded contact to today */ .pt { position: absolute; top: 50%; height: 1px; opacity: 0; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, rgba(24, 208, 215, .5), rgba(24, 208, 215, .08)); } /* the lens's own words, in one place above the record: what it reads, or what it found */ .l5-k { position: absolute; top: -22px; right: 0; white-space: nowrap; color: var(--ink-faint); opacity: 0; } .ls { display: none; } /* I · every recorded deadline; the two carrying today's date answer */ .l5-stage[data-lens="0"] .pm.k-commit { opacity: .6; } .l5-stage[data-lens="0"] .pm.tdy { opacity: 1; width: 6px; height: 24px; box-shadow: 0 0 15px rgba(196, 146, 42, .55); } .l5-stage[data-lens="0"] .l5-r.due .l5-rn { color: var(--gold); } .l5-stage[data-lens="0"] .k0 { opacity: 1; color: var(--gold); } /* II · every recorded contact; each customer's own last one answers, and the time since is drawn */ .l5-stage[data-lens="1"] .pm.k-contact { opacity: .5; } .l5-stage[data-lens="1"] .pm.last { opacity: 1; width: 3px; height: 24px; box-shadow: 0 0 13px rgba(24, 208, 215, .48); } .l5-stage[data-lens="1"] .pt { opacity: 1; transform: none; } .l5-stage[data-lens="1"] .l5-rn { color: var(--ink-secondary); } .l5-stage[data-lens="1"] .k1 { opacity: 1; color: var(--teal); } /* III · the record parts around one relationship, measured against its own longest gap */ .l5-stage[data-lens="2"] .l5-r.above { transform: translateY(-15px); } .l5-stage[data-lens="2"] .l5-r.below { transform: translateY(15px); } .l5-stage[data-lens="2"] .l5-r:not(.quiet) .pm { opacity: .06; } .l5-stage[data-lens="2"] .l5-r.quiet .pm.k-contact { opacity: .85; } .l5-stage[data-lens="2"] .l5-r.quiet .l5-rn { color: var(--ink); } .pq-band { position: absolute; top: 50%; height: 22px; transform: translateY(-50%) scaleX(0); transform-origin: left center; opacity: 0; background: linear-gradient(90deg, rgba(196, 146, 42, .30), rgba(196, 146, 42, .05)); border-left: 2px solid var(--gold); } .pq-ghost { position: absolute; top: calc(50% + 17px); height: 0; border-top: 1px dashed var(--line-strong); opacity: 0; } .pq-ghost::after { content: ''; position: absolute; right: 0; top: -5px; width: 1px; height: 10px; background: var(--line-strong); } .pq-n, .pq-g { position: absolute; font-size: var(--t-meta-size); line-height: 1.3; white-space: nowrap; opacity: 0; } .pq-n { top: calc(50% - 30px); margin-left: 10px; color: var(--ink); } .pq-g { top: calc(50% + 21px); color: var(--ink-faint); } .l5-stage[data-lens="2"] .pq-band { opacity: 1; transform: translateY(-50%); } .l5-stage[data-lens="2"] .pq-ghost, .l5-stage[data-lens="2"] .pq-n, .l5-stage[data-lens="2"] .pq-g { opacity: 1; } /* IV · one window closes onto the seven days the Owner Briefing reads; V · it opens to the Score's forty */ .pw { position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; border-left: 1px solid rgba(255, 255, 255, .26); background: linear-gradient(90deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .06)); } .l5-stage[data-lens="3"] .pw { opacity: 1; left: var(--wk-x); } .l5-stage[data-lens="4"] .pw { opacity: 1; left: var(--sw-x); border-left-color: rgba(27, 176, 220, .5); background: linear-gradient(90deg, rgba(27, 176, 220, .05), rgba(34, 211, 198, .025)); } .l5-stage[data-lens="3"] .pm { opacity: .05; } .l5-stage[data-lens="3"] .pm.k-memory.wk { opacity: 1; width: 7px; height: 7px; } /* a commitment opened (on the day it was recorded) or resolved (on the day it was met) — the only commitment events the Owner Briefing counts; its contact and plain notes are not read */ .pb { position: absolute; z-index: 1; top: 50%; transform: translate(-50%, -50%); border-radius: 1px; opacity: 0; } .pb.opened { width: 6px; height: 14px; border: 1.5px solid var(--gold); } .pb.done { width: 3px; height: 16px; background: var(--sage); } .l5-stage[data-lens="3"] .pb { opacity: 1; } .l5-stage[data-lens="3"] .k3 { opacity: 1; color: var(--ink-secondary); } .l5-stage[data-lens="4"] .pm { opacity: .05; } .l5-stage[data-lens="4"] .pm.sw { opacity: .85; } .l5-stage[data-lens="4"] .l5-r.miss .l5-rn { color: var(--ink-secondary); } .l5-stage[data-lens="4"] .k4 { opacity: 1; color: var(--score-cyan); } .ps-late { position: absolute; top: 50%; height: 16px; transform: translateY(-50%) scaleX(0); transform-origin: left center; opacity: 0; background: linear-gradient(90deg, rgba(196, 123, 42, .38), rgba(196, 123, 42, .14)); border-left: 2px solid var(--amber); border-right: 2px solid var(--amber); border-radius: 0 2px 2px 0; } .ps-l { position: absolute; top: calc(50% - 25px); margin-left: 2px; color: var(--ink-secondary); font-size: var(--t-meta-size); line-height: 1.3; white-space: nowrap; opacity: 0; } .l5-stage[data-lens="4"] .ps-late { opacity: 1; transform: translateY(-50%); } .l5-stage[data-lens="4"] .ps-l { opacity: 1; } /* the Owner Briefing's own lines, in the part of the record it does not read */ .l5-brief { position: absolute; top: 50%; left: 5%; width: min(64%, 420px); transform: translateY(calc(-50% + 6px)); opacity: 0; padding: 14px 18px; border-left: 1px solid rgba(255, 255, 255, .26); background: linear-gradient(90deg, var(--ground-inset) 60%, rgba(10, 10, 18, .6)); } .l5-bh { display: block; color: var(--ink-secondary); margin-bottom: 8px; } .l5-bl { display: block; font-size: var(--t-body-size); line-height: 1.45; color: var(--ink); padding: 3px 0; } .l5-stage[data-lens="3"] .l5-brief { opacity: 1; transform: translateY(-50%); } /* the reading itself, standing in the part of the record it does not read */ .l5-score { position: absolute; top: 0; bottom: 0; left: 0; width: var(--sw-x); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; opacity: 0; transform: translateY(6px); background: radial-gradient(closest-side, var(--ground-inset) 62%, rgba(10, 10, 18, 0)); } .l5-sn { font-size: clamp(54px, 6.4vw, 92px); font-weight: 200; line-height: .86; letter-spacing: -0.05em; color: var(--ink); } .l5-sc { color: var(--score-cyan); } .l5-stage[data-lens="4"] .l5-score { opacity: 1; transform: none; } /* the beats: one question and where it is read from, each given the time to be read */ /* the last reading is the one the others lead to, so the stage holds it: it stays in place for close to half a screen of scrolling after it arrives (its own arrival takes a moment), and only then moves on — while its beat is still in view beside it. Scrolled back, the same distance hands it back to reading 04. */ .l5-beats { grid-column: 1; grid-row: 1; padding-bottom: max(110px, calc(45vh - 60px)); } .l5-beat { min-height: clamp(236px, 31vh, 300px); display: flex; flex-direction: column; justify-content: center; gap: 0; padding: 18px 0; } .l5-i { font-size: var(--t-meta-size); font-weight: 600; color: var(--ink-faint); letter-spacing: .06em; transition: color .4s var(--ease-out); } .l5-beat .ro-t { margin-top: 10px; font-size: clamp(19px, 1.75vw, 24px); font-weight: 300; line-height: 1.26; letter-spacing: -0.02em; color: var(--ink-secondary); text-wrap: balance; transition: color .4s var(--ease-out); } .l5-beat .rsrc { margin-top: 12px; align-items: flex-start; } .l5-beat.on .l5-i { color: var(--teal); } .l5-beat.on .ro-t { color: var(--ink); } .src-k { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; height: 17px; } .src-t { text-wrap: balance; } /* each beat carries its own answer: read aloud with the stage, and read on the page without it */ .l5-a { margin-top: 12px; font-size: var(--t-body-size); line-height: 1.55; color: var(--ink-secondary); max-width: 44ch; } .l5.built .l5-a { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* a screen too short to hold the stage beside or above a beat (a phone on its side, a zoomed page): the stage is set down in the flow, and each beat says its answer on the page, as it does without a script */ .l5.flat .l5-stage { position: static; } .l5.flat .l5-beats { padding-bottom: 0; } .l5.flat .l5-beat { min-height: 0; padding: 24px 0 0; } .l5.built.flat .l5-a { position: static; width: auto; height: auto; margin: 12px 0 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; } /* no script: nothing is drawn, so the five readings simply read, one after another, with their answers */ .l5:not(.built) { display: block; } .l5:not(.built) .l5-stage { display: none; } .l5:not(.built) .l5-beats { padding-bottom: 0; } .l5:not(.built) .l5-beat { min-height: 0; padding: 26px 0 0; } .l5:not(.built) .l5-beat .ro-t { color: var(--ink); } /* the lens changes, it does not cut: marks come up out of the ground, an interval is drawn, the record parts, a window closes and opens. Declared only with motion; without it each lens replaces the last. */ .motion .pm { transition: opacity .5s var(--ease-out), width .4s var(--ease-out), height .4s var(--ease-out), box-shadow .5s var(--ease-out); } .motion .pb { transition: opacity .5s var(--ease-out) .45s; } .motion .l5-stage:not([data-lens="3"]) .pb { transition-delay: 0s; transition-duration: .2s; } .motion .pt { transition: opacity .5s var(--ease-out), transform .8s var(--ease-out); } .motion .pq-band { transition: opacity .4s var(--ease-out), transform .8s var(--ease-out) .15s; } .motion .pq-ghost, .motion .pq-n, .motion .pq-g { transition: opacity .5s var(--ease-out) .35s; } .motion .pw { transition: opacity .4s var(--ease-out), left .95s var(--ease-out), border-color .6s var(--ease-out), background .6s var(--ease-out); } .motion .l5-k { transition: opacity .45s var(--ease-out) .2s; } .motion .ps-late { transition: opacity .3s var(--ease-out) .3s, transform .85s var(--ease-out) .35s; } .motion .ps-l { transition: opacity .5s var(--ease-out) .8s; } .motion .l5-score, .motion .l5-brief { transition: opacity .7s var(--ease-out) .55s, transform .7s var(--ease-out) .55s; } /* leaving a lens is quicker than arriving in one, and never waits */ .motion .l5-stage:not([data-lens="2"]) .pq-band, .motion .l5-stage:not([data-lens="2"]) .pq-ghost, .motion .l5-stage:not([data-lens="2"]) .pq-n, .motion .l5-stage:not([data-lens="2"]) .pq-g, .motion .l5-stage:not([data-lens="4"]) .ps-late, .motion .l5-stage:not([data-lens="4"]) .ps-l, .motion .l5-stage:not([data-lens="4"]) .l5-score, .motion .l5-stage:not([data-lens="3"]) .l5-brief { transition-delay: 0s; transition-duration: .25s; } /* the signature: what the whole page has been showing, said once — a step larger than the chapter's own words, under the reading mark, with what CAPSEAD does in the mark's own spectrum */ .pl-say { margin: 88px 0 0 auto; max-width: 25ch; text-align: right; font-size: clamp(24px, 3vw, 40px); font-weight: 200; line-height: 1.16; letter-spacing: -0.034em; color: var(--ink); text-wrap: balance; } .pl-say::before { content: ''; display: block; width: 72px; height: 1px; margin: 0 0 24px auto; background: linear-gradient(90deg, transparent, var(--score-blue) 40%, var(--score-cyan)); opacity: .8; } .pl-read { font-weight: 300; background-image: linear-gradient(97deg, #7FE2FD 0%, #0579EE 33%, #029E9B 70%, #02AC84 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .pl-read { color: var(--teal); -webkit-text-fill-color: currentColor; } } .pl-fine { margin-top: 40px; max-width: 66ch; color: var(--ink-faint); } @media (max-width: 1000px) { /* stacked: the stage stands above the words, and the beats pass under it */ .l5 { grid-template-columns: minmax(0, 1fr); margin-top: 40px; } .l5-stage { grid-column: 1; grid-row: 1; top: 64px; } .l5-beats { grid-column: 1; grid-row: 2; padding-bottom: 0; } .l5-beat { min-height: clamp(200px, 34vh, 280px); } .pl-say { margin-top: 64px; max-width: 22ch; text-align: left; } .pl-say::before { margin: 0 0 20px; background: linear-gradient(90deg, var(--score-cyan), var(--score-blue) 60%, transparent); } } @media (max-width: 760px) { .l5-stage { top: 57px; padding: 12px 12px 10px; border-radius: var(--r-panel); } .l5-stage { --rn: 0px; } .l5-field { margin: 30px 0 10px; } .l5-r { grid-template-columns: minmax(0, 1fr); height: 24px; gap: 0; } .l5-rn { display: none; } .l5-over { left: 0; } .l5-scale { margin-left: 0; } .pm.k-contact { height: 12px; } .pm.k-commit { height: 9px; width: 3px; } .l5-stage[data-lens="0"] .pm.tdy, .l5-stage[data-lens="1"] .pm.last { height: 18px; } .l5-stage[data-lens="2"] .l5-r.above { transform: translateY(-13px); } .l5-stage[data-lens="2"] .l5-r.below { transform: translateY(13px); } .pq-band { height: 16px; } .pq-ghost { top: calc(50% + 12px); } .pq-n { top: calc(50% - 25px); } .pq-g { top: calc(50% + 15px); } .ps-late { height: 12px; } .ps-l { top: calc(50% - 21px); } .l5-brief { left: 0; width: 84%; padding: 10px 12px; } .l5-bl { font-size: var(--t-meta-size); padding: 2px 0; } .lw { display: none; } .ls { display: inline; } .l5-beat { min-height: clamp(210px, 34vh, 280px); padding: 14px 0; } .l5-beat .ro-t { font-size: 19px; } /* a phone's stage has no room for names: each beat says who its answer is about */ .l5.built .l5-a { position: static; width: auto; height: auto; margin: 10px 0 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; } } /* How it works: the environment answers what CAPSEAD is doing in each chapter — gold where the record is being written, the Score's own spectrum where it is being read. Behind the content, never on it, and far below a visible tint. */ .chap#context, .chap#awareness { isolation: isolate; } .chap#context::before, .chap#awareness::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; } .chap#context::before { background: radial-gradient(56% 38% at 18% 34%, rgba(196, 146, 42, .026) 0%, transparent 62%), radial-gradient(60% 44% at 80% 52%, rgba(27, 176, 220, .038) 0%, transparent 60%); } .chap#awareness::before { inset: 0 0 -12% 0; background: radial-gradient(84% 42% at 50% 98%, rgba(34, 211, 198, .030) 0%, transparent 62%); } /* next page, and the compact close every deeper page ends on */ .next-page { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 150px; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .next-page .t-meta { color: var(--ink-faint); } .next-page a { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); font-size: clamp(22px, 2.6vw, 32px); font-weight: 200; letter-spacing: -0.03em; min-height: 44px; border-radius: var(--r-control); } .next-page a svg { width: 18px; height: 18px; color: var(--teal); transition: transform .24s var(--ease-out); } @media (max-width: 760px) { .next-page { margin-top: 96px; } } .access-band { display: flex; justify-content: space-between; align-items: center; gap: 24px 40px; flex-wrap: wrap; padding: 64px 0 96px; } .access-band p { font-size: clamp(22px, 2.6vw, 32px); font-weight: 200; letter-spacing: -0.03em; } /* the terms are a sentence, so they sit under the price rather than trailing it */ .access-band p span { display: block; max-width: 50ch; margin-top: 10px; color: var(--ink-faint); font-size: 15px; font-weight: 300; line-height: 1.55; letter-spacing: 0; text-wrap: pretty; } @media (max-width: 760px) { .access-band p span { margin-top: 8px; } .access-band .close-cta { width: 100%; margin-top: 0; } .access-band .close-cta a { flex: 1 1 auto; justify-content: center; } } /* Product — the Customers list, as the shipped inventory renders it (CRMTab) */ .clist-top { padding: 16px 22px 14px; border-bottom: 1px solid var(--line-inner); } .clist-title { display: flex; align-items: baseline; gap: 10px; } .clist-title b { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; } .clist-title span { font-size: var(--t-body-size); color: var(--ink-faint); } .clist-sort { margin-left: auto; font-size: var(--t-meta-size); color: var(--ink-faint); } .clist-aw { display: flex; gap: 10px; align-items: baseline; margin-top: 14px; } .clist-aw i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; transform: translateY(-2px); } .clist-aw p { font-size: var(--t-row-size); color: var(--ink); line-height: 1.45; } .clist-aw small { display: block; margin-top: 4px; font-size: var(--t-micro-size); color: var(--ink-faint); font-weight: 400; } .clist-aw .show { margin-left: auto; font-size: var(--t-meta-size); color: var(--gold); white-space: nowrap; } .crow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; min-height: 62px; padding: 10px 22px; border-bottom: 1px solid var(--line-inner); } .crow:last-child { border-bottom: none; } .crow.quiet::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--gold); } .crow-n { font-size: var(--t-row-size); font-weight: 500; color: var(--ink); } .crow-l { font-size: var(--t-meta-size); color: var(--ink-secondary); margin-top: 3px; } .crow.quiet .crow-l { color: var(--ink); } .crow-d { font-size: var(--t-meta-size); font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; } @media (max-width: 760px) { .crow { padding: 10px 16px; } .clist-top { padding: 14px 16px 12px; } .clist-aw { flex-wrap: wrap; } .clist-aw .show { margin-left: 15px; } } /* Customers list with the Quick View drawer open over its right side, as it opens in CAPSEAD */ /* the drawer holds the three section names on one line: they measure 353px of text at --t-meta-size, so a 420px column left the strip 24px short and the panel clipped "Relationship Memory" */ .drawer-comp { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 470px; max-width: 1120px; margin: 56px auto 0; align-items: start; } .drawer-comp .p-back { grid-column: 1 / 3; grid-row: 1; margin-right: 350px; } /* +50, with the drawer */ .drawer-comp .p-front { grid-column: 2; grid-row: 1; margin-top: 40px; z-index: 2; background: var(--ground-occluding); box-shadow: -30px 40px 90px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .02); } @media (max-width: 1080px) { .drawer-comp { grid-template-columns: minmax(0, 1fr); max-width: 760px; } .drawer-comp .p-back { grid-column: 1; margin-right: 0; } .drawer-comp .p-front { grid-column: 1; grid-row: 2; margin: -36px 0 0 auto; width: min(calc(100% - 20px), 452px); } } /* the narrowest phones: the drawer takes the full measure, so a third of its tab strip still holds the longest word in the three labels ("Relationship", 70px at 12px) on one line */ @media (max-width: 400px) { .drawer-comp .p-front { width: 100%; } .drawer-comp .qv { padding-left: 16px; padding-right: 16px; } } /* Quick View tabs that really switch */ .drawer-comp .qv-tabs { gap: 2px; } .drawer-comp .qv-tab { padding: 5px 8px; } /* The Quick View is the one live surface in its chapter, on Home and here. Its tabs answer the hand before they are pressed, and the mark under the selected one DRAWS rather than appears — the same acknowledgement the shipped CustomerQuickView gives (`.cv-qv-tab::before`: scaleX(.4) → none, .18s). Hovering an unselected tab shows that mark starting, which is what says the panel is operable. */ .qv-tabs[role="tablist"] button { font-family: inherit; line-height: inherit; background: none; border: 0; cursor: pointer; } .qv-tabs button.qv-tab { min-height: 32px; transition: color .22s var(--ease-out), background-color .22s var(--ease-out); } .qv-tabs button.qv-tab::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 12px; height: 2px; margin-left: -6px; border-radius: 1px; background: var(--teal); opacity: 0; transform: scaleX(.4); transition: opacity .18s var(--ease-out), transform .18s var(--ease-out); } .qv-tabs button.qv-tab[aria-selected="true"] { color: var(--ink); background: var(--wash-selected); } .qv-tabs button.qv-tab[aria-selected="true"]::after { opacity: 1; transform: none; } @media (hover: hover) { .qv-tabs button.qv-tab:hover { color: var(--ink); background-color: var(--wash-hover); } .qv-tabs button.qv-tab[aria-selected="false"]:hover::after { opacity: .45; } } @media (max-width: 760px) { .qv-tabs button.qv-tab { min-height: 44px; } } /* the foot leaves the panel for the surface that shows it in full; if it looks like a link, it is one */ a.qv-foot { text-decoration: none; border-radius: var(--r-control); transition: color .22s var(--ease-out); } a.qv-foot svg { transition: transform .24s var(--ease-out); } @media (hover: hover) { a.qv-foot:hover { color: var(--ink); } a.qv-foot:hover svg { transform: translateX(3px); } } @media (max-width: 760px) { a.qv-foot { min-height: 44px; } } .qv-mitem { padding: 12px 0; border-bottom: 1px solid var(--line-inner); } .qv-mitem:last-child { border-bottom: none; } /* a morning in CAPSEAD: four real moments, each a small crop of the surface it happens on */ .flow { position: relative; max-width: 980px; margin: 56px auto 0; } .flow::before { content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 1px; background: var(--line); } .flow-step { position: relative; display: grid; grid-template-columns: 24px minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px 32px; align-items: start; padding-bottom: 44px; } .flow-step:last-child { padding-bottom: 0; } .flow-n { width: 23px; height: 23px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--ground); display: grid; place-items: center; font-size: var(--t-micro-size); font-weight: 700; color: var(--ink-secondary); position: relative; z-index: 1; } .flow-t h3 { font-size: var(--t-section-size); font-weight: 600; letter-spacing: -0.01em; } .flow-t p { margin-top: 8px; font-size: var(--t-body-size); line-height: 1.6; color: var(--ink-secondary); max-width: 44ch; } .flow-crop { border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--ground-inset); padding: 14px 16px; } @media (max-width: 860px) { /* Stacked, each moment is its own screenful rather than a line beside a crop, so it is set as one: the step's sentence takes the title size the page gives a moment of its own, and the rail keeps only the room a finger needs beside it — which the sentence and the record then both use. */ .flow-step { grid-template-columns: 24px minmax(0, 1fr); column-gap: 18px; padding-bottom: 38px; } .flow-crop { grid-column: 2; position: relative; } .flow-t h3 { font-size: var(--t-title-size); line-height: 1.32; } .flow-t p { margin-top: 7px; } /* Stacked under its own step, the morning reads as one grey column. Each crop is a record of a kind, so it carries the mark the record's own lines carry everywhere else on the site — the spine, in that kind's colour: the promise that is due, what the team has confirmed, the contact just recorded, the work completed. The prose stays quiet and the rail stays a rail; the records are the only thing named, and they are named in the colours the page already uses inside them. */ .flow-crop::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; border-radius: 0 var(--r-spine) var(--r-spine) 0; background: var(--kind, transparent); } .flow-crop.gold { --kind: var(--gold); } .flow-crop.steel { --kind: var(--steel); } .flow-crop.teal { --kind: var(--teal); } .flow-crop.sage { --kind: var(--sage); } } .mini-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: var(--t-body-size); } .mem-band-h { font-size: var(--t-section-size); font-weight: 600; } .mem-band-s { font-size: var(--t-meta-size); color: var(--ink-faint); margin-top: 2px; } .ui-btn.sage { color: var(--ink); background: rgba(106, 173, 130, .12); border-color: rgba(106, 173, 130, .32); } /* The Score — how one open commitment weighed, and how it is remembered */ /* ── what one late commitment weighs, over its own life ─────────────────────── Not a table of the rule: the rule, held. One axis — the commitment's lifetime — and the moment it is in, stated in the page's headline voice, with its weight drawn as a size and never counted. Amber while it is open and growing, the quieter amber of memory once it is put right, nothing once it is forgotten; the track marks in teal the day it was repaired. Every stop is a day the record holds, so the control steps between real moments and never interpolates. */ .wt { max-width: 920px; margin: 48px auto 0; } /* the moment and the Score, side by side: what the commitment weighs, and what the Score read that day — cause and effect in one glance, both answering the same hand */ .wt-top { display: grid; grid-template-columns: minmax(0, 1fr) 184px; gap: 0 64px; align-items: center; } .wt-when { font-size: var(--t-body-size); color: var(--ink-secondary); font-variant-numeric: tabular-nums; } /* the moment carries the chapter: two lines are always reserved, so moving the hand never moves the page */ .wt-state { margin-top: 8px; min-height: 2.3em; font-size: clamp(24px, 3vw, 36px); font-weight: 200; line-height: 1.15; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; transition: color .22s var(--ease-out); } /* the end of the story is a recovery, so it arrives in the Score's own recovery colour */ .wt[data-phase="gone"] .wt-state { color: var(--teal); } .wt[data-phase="gone"] .wt-scale span:nth-child(3) { color: var(--teal); } .wt-k { margin-top: 20px; color: var(--ink-faint); } .wt-gauge { height: 12px; border-radius: 3px; background: rgba(255, 255, 255, .04); margin-top: 10px; overflow: hidden; } /* The Score, compact: the instrument's own bezel, still (the page's one ambient loop is the dial above), with that day's reading in it. The number moves the way the reading did; the line under it says which way that day moved it, and why — amber down while the commitment weighs, the Score's teal up as it lifts. It holds a reading at every stop. */ .wt-score { display: flex; flex-direction: column; align-items: center; text-align: center; } .wt-dial { position: relative; width: 148px; aspect-ratio: 1; } .wt-dial::before { content: ''; position: absolute; inset: -16%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(27, 176, 220, .07), rgba(30, 122, 216, .025) 60%, transparent 76%); } .wt-ring { position: absolute; inset: 0; border-radius: 50%; opacity: .9; background: conic-gradient(from 0deg, var(--score-navy) 0deg, var(--score-blue) 95deg, var(--score-cyan) 190deg, var(--score-teal) 275deg, var(--score-navy) 360deg); -webkit-mask: radial-gradient(closest-side circle, transparent 0 calc(100% - 4px), #000 calc(100% - 4px) calc(100% - 1px), transparent calc(100% - 1px)); mask: radial-gradient(closest-side circle, transparent 0 calc(100% - 4px), #000 calc(100% - 4px) calc(100% - 1px), transparent calc(100% - 1px)); } .wt-core { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .wt-n { font-size: 52px; font-weight: 200; letter-spacing: -0.05em; line-height: 1; color: var(--ink); } .wt-n.fall { animation: wtFall .3s var(--ease-out); } .wt-n.rise { animation: wtRise .3s var(--ease-out); } @keyframes wtFall { from { opacity: 0; transform: translateY(-10px); } } @keyframes wtRise { from { opacity: 0; transform: translateY(10px); } } .wt-c { margin-top: 14px; color: var(--ink-faint); } .wt-says { margin-top: 8px; min-height: 2.9em; max-width: 184px; font-size: var(--t-body-size); line-height: 1.45; color: var(--ink-secondary); text-wrap: balance; } .wt-dir { display: none; width: 0; height: 0; margin-right: 7px; border: 4.5px solid transparent; } .wt-score[data-dir="fall"] .wt-dir { display: inline-block; border-top: 6px solid var(--amber); border-bottom: 0; vertical-align: 1px; } .wt-score[data-dir="rise"] .wt-dir { display: inline-block; border-bottom: 6px solid var(--score-teal); border-top: 0; vertical-align: 2px; } .wt-note { margin-top: 22px; color: var(--ink-faint); max-width: 62ch; } .wt-bar { display: block; width: 13%; height: 100%; border-radius: 3px; background: var(--amber); transition: width .22s var(--ease-out), background-color .22s var(--ease-out); } .wt-bar.mem { background: rgba(196, 123, 42, .45); } .wt-bar.gone { background: transparent; } .wt-lab { display: block; margin-top: 26px; font-size: var(--t-meta-size); color: var(--ink-secondary); } /* The track carries the life, and reads as a thing to take hold of: every day the record holds is a tick on it, the part already lived is drawn in, and the hand is a knob with a grip. The whole track — and the names along it — answers a click or a tap. A stop's centre is the thumb's centre, so every position below is measured from the thumb's half-width (12px) in from each end. */ .wt { position: relative; --wt-p: .857; --wt-d: .143; --wt-r: .714; --wt-n: 7; } .wt-track { position: relative; } .wt-track::before { content: ''; position: absolute; left: 12px; right: 12px; top: 50%; height: 10px; margin-top: -5px; pointer-events: none; background: linear-gradient(90deg, transparent calc(100% - 1px), var(--line-strong) 0), repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px calc(100% / var(--wt-n))); } .wt-range { -webkit-appearance: none; appearance: none; position: relative; z-index: 1; display: block; width: 100%; height: 44px; margin: 0; background: none; cursor: pointer; } .wt-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, rgba(236, 234, 230, .42) 0 calc(12px + (100% - 24px) * var(--wt-p)), var(--line-strong) 0); } .wt-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line-strong); } .wt-range::-moz-range-progress { height: 4px; border-radius: 2px; background: rgba(236, 234, 230, .42); } .wt-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; border: 0; cursor: grab; background: linear-gradient(90deg, transparent 8px, rgba(8, 8, 14, .5) 8px 9px, transparent 9px 11.5px, rgba(8, 8, 14, .5) 11.5px 12.5px, transparent 12.5px 15px, rgba(8, 8, 14, .5) 15px 16px, transparent 16px) center / 100% 8px no-repeat var(--ink); box-shadow: 0 0 0 4px var(--ground), 0 0 0 5.5px var(--teal-line), 0 2px 10px -2px rgba(0, 0, 0, .9); transition: transform .18s var(--ease-out); } .wt-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; border: 0; cursor: grab; background: linear-gradient(90deg, transparent 8px, rgba(8, 8, 14, .5) 8px 9px, transparent 9px 11.5px, rgba(8, 8, 14, .5) 11.5px 12.5px, transparent 12.5px 15px, rgba(8, 8, 14, .5) 15px 16px, transparent 16px) center / 100% 8px no-repeat var(--ink); box-shadow: 0 0 0 4px var(--ground), 0 0 0 5.5px var(--teal-line), 0 2px 10px -2px rgba(0, 0, 0, .9); transition: transform .18s var(--ease-out); } @media (hover: hover) { .wt-range:hover::-webkit-slider-thumb { transform: scale(1.08); } .wt-range:hover::-moz-range-thumb { transform: scale(1.08); } } .wt-range:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.08); } .wt-range:active::-moz-range-thumb { cursor: grabbing; transform: scale(1.08); } .wt-range:focus-visible { outline: 2px solid var(--teal-focus); outline-offset: 2px; border-radius: var(--r-control); } /* High Contrast forces the drawn track and thumb away with every other background, which left nothing to take hold of: there the browser draws its own slider, in the system's colours, and the direction mark keeps its two colours (it is decoration — the words beside it say which way) */ @media (forced-colors: active) { .wt-range { -webkit-appearance: auto; appearance: auto; } .wt-track::before { display: none; } .wt-dir { forced-color-adjust: none; } } /* the one signal, the first time the control is seen, that the hand can be moved: a single ring leaves it */ .wt-cue { position: absolute; z-index: 2; top: 50%; left: calc(12px + (100% - 24px) * var(--wt-p)); width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; pointer-events: none; opacity: 0; box-shadow: 0 0 0 1.5px var(--teal); } .wt-cue.go { animation: wtCue 1.5s var(--ease-out) .35s 1 both; } @keyframes wtCue { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } } @media (prefers-reduced-motion: reduce) { .wt-cue { display: none; } } /* the three names sit ON the track: the first stands exactly where the deadline passed, the middle one exactly where the repair is marked (the life starts a day earlier, on the day it was only due) */ .wt-scale { position: relative; height: 1.4em; font-size: var(--t-micro-size); color: var(--ink-faint); letter-spacing: .02em; cursor: pointer; } .wt-scale span { position: absolute; top: 0; white-space: nowrap; } .wt-scale span:nth-child(1) { left: calc(12px + (100% - 24px) * var(--wt-d)); transform: translateX(-50%); color: var(--gold); } .wt-scale span:nth-child(2) { left: calc(12px + (100% - 24px) * var(--wt-r)); transform: translateX(-50%); color: var(--teal); } .wt-scale span:nth-child(3) { right: 0; } /* the deadline and the repair, each marked where it happened */ .wt-scale::before, .wt-scale::after { content: ''; position: absolute; top: -28px; width: 1px; height: 12px; margin-left: -.5px; opacity: .85; } .wt-scale::before { left: calc(12px + (100% - 24px) * var(--wt-r)); background: var(--teal); } .wt-scale::after { left: calc(12px + (100% - 24px) * var(--wt-d)); background: var(--gold); } @media (max-width: 760px) { .wt-scale { font-size: 10px; } /* a phone stacks cause over effect: the moment and its weight at the page's full measure, then the Score as one readout row right above the hand that moves it */ .wt-top { display: block; } .wt-score { flex-direction: row; align-items: center; gap: 18px; margin-top: 24px; text-align: left; } .wt-dial { width: 80px; flex: 0 0 auto; } .wt-n { font-size: 30px; } .wt-read { min-width: 0; } .wt-c { margin-top: 0; } .wt-says { margin-top: 6px; max-width: none; } } .score-page-top { margin-top: 64px; } /* phone: the reading comes up to meet the deck, so the page arrives at the instrument, not at a gap */ @media (max-width: 760px) { .score-page-top { margin-top: 18px; } } /* ── volume cannot buy a better number: the record's own two weeks ───────────── ONE field, 8 – 20 Aug. Everything the business logged piles up, entry by entry, as the days run — muted, because it is context, not performance. On the floor, each recorded deadline that arrived and was met; from it a gold stem rises to the reading. The reading is one quiet line across the top, level through the busiest days. It has no scale: the page shows what moved it and what did not, never how much. */ .vol { max-width: 1000px; margin: 52px auto 0; } .vol-field { position: relative; } .vol-plot { position: relative; height: 320px; border-bottom: 1px solid var(--line); } .vol-log, .vol-kept, .vol-read { position: absolute; inset: 0; } .vol-kept { z-index: 1; } .vol-read { z-index: 2; } /* everything logged: one stratum per entry, from the day it was saved to the end of the fortnight, laid on everything before it — close enough to read as one mass. Neutral, because it is context; the kind of record shows only where it began. */ .vol-log { --pitch: 9px; --band: 7px; --floor: calc(94% - 16px); } .vm { position: absolute; right: 0; height: var(--band); top: calc(var(--floor) - var(--i) * var(--pitch)); border-radius: 1px 0 0 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .07)); box-shadow: 0 calc(var(--pitch) - var(--band)) 0 rgba(255, 255, 255, .03); transform-origin: left center; transition: opacity .35s var(--ease-out), transform .45s var(--ease-settle); } .vm::before { content: ''; position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); border-radius: 1px; } .vm.k-contact::before { width: 2px; height: 15px; background: var(--teal); } .vm.k-note::before { width: 2px; height: 9px; background: var(--ink-faint); } .vm.k-memory::before { width: 7px; height: 7px; background: var(--steel); } .vl-k, .vr-k { position: absolute; transition: opacity .5s var(--ease-out); } .vl-k { top: 47%; display: flex; flex-direction: column; gap: 4px; color: var(--ink-secondary); } .vl-s { font-size: var(--t-meta-size); color: var(--ink-faint); } .vr-k { left: 0; transform: translateY(-50%); white-space: nowrap; color: var(--score-cyan); } .vk { position: absolute; width: 6px; height: 16px; border-radius: 1px; background: var(--gold); transform: translate(-50%, -50%); transition: opacity .3s var(--ease-out), transform .42s var(--ease-settle); } .vk-stem { position: absolute; width: 1px; transform: translateX(-50%); transform-origin: 50% 100%; background: linear-gradient(0deg, var(--gold), rgba(196, 146, 42, .5)); transition: transform .9s var(--ease-out), opacity .3s var(--ease-out); } .vr-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; clip-path: inset(-12px calc(100% - var(--vr, 100%)) -12px -12px); transition: clip-path .23s linear; } .vr-line polyline { fill: none; stroke: var(--score-cyan); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; } /* the two dates stand under the days they name; the met deadline is named once, under the middle one */ .vol-scale { position: relative; height: 30px; color: var(--ink-faint); } .vol-scale > span { position: absolute; top: 11px; transform: translateX(-50%); white-space: nowrap; } .vol-scale > span:first-child { left: 3.85%; } .vol-scale > span:last-child { left: 96.15%; } .vol-scale .vk-l { left: 50%; color: var(--gold); } .vol-cap { margin-top: 20px; color: var(--ink-faint); max-width: 72ch; } /* built by the script: each mark is drawn as the days reach it (at once, without motion) */ .vol .vm:not(.on) { opacity: 0; transform: scaleX(0); } .vol .vk:not(.on) { opacity: 0; transform: translate(-50%, -50%) scaleY(.2); } .vol .vk-stem:not(.on) { transform: translateX(-50%) scaleY(0); } .vol .vl-k:not(.on), .vol .vr-k:not(.on) { opacity: 0; } @media (max-width: 760px) { .vol-plot { height: 270px; } .vol-log { --pitch: 7px; --band: 5px; } .vm.k-contact::before { height: 11px; } .vk { width: 5px; height: 13px; } .vl-k .micro { max-width: 7em; } .vl-s { display: none; } /* a phone's gutter is narrow: the two dates keep to the field's own edges */ .vol-scale > span:first-child { left: 0 !important; transform: none; } .vol-scale > span:last-child { left: auto !important; right: 0; transform: none; } } /* Product: one surface at a time, centred, with room around it */ .solo-panel { max-width: 920px; margin: 56px auto 0; } .pnote-solo { max-width: 920px; margin: 40px auto 0; } .pnote-solo .pnote h3 { display: flex; align-items: center; gap: 10px; color: var(--ink-secondary); margin-bottom: 12px; } .pnote-solo .pnote p { font-size: var(--t-row-size); line-height: 1.64; color: var(--ink-secondary); font-weight: 300; max-width: 66ch; } .pnote-solo .pnote p b { color: var(--ink); font-weight: 500; } /* a statement of what the product does, not a caption: a step larger and in ink, over its quieter line */ .pnote-solo .pnote p.pnote-lead { max-width: 52ch; font-size: clamp(16px, 1.45vw, 19px); line-height: 1.5; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; } .pnote-solo .note { margin-top: 14px; font-size: var(--t-body-size); } /* ── the handoff: the full profile, where a line on Command opens ────────────── Not a drawer: no close, no tabs, no masthead, no list behind it — a crop from the middle of the profile's own page, from its state line to its memory band, on open ground with the page's spine. One promise can be lit on arrival; its holder can change; the steel memories under it never move, and the name on the one someone else confirmed comes forward. The consequence is said beside it, in the page's voice. */ .hand { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 0 72px; align-items: start; max-width: 1120px; margin: 56px auto 0; } .hand-ws { margin: 0; min-width: 0; } .hand-h { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; color: var(--ink-faint); padding-bottom: 12px; border-bottom: 1px solid var(--line); } .hand-page { position: relative; padding: 20px 0 4px 26px; border-left: 1px solid var(--line-strong); } .hand-page > * { transition: opacity .26s var(--ease-out); } .hand-page.soft > * { opacity: .34; } .hand-page.soft > [data-keep] { opacity: 1; } .hand-state { font-size: var(--t-body-size); color: var(--ink-secondary); } .hand-k { color: var(--ink-faint); } .hand-needs { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-inner); } .hand-need { display: grid; grid-template-columns: 5px minmax(0, 1fr); gap: 11px; margin: 10px -14px 0; padding: 12px 14px; border-radius: 6px; transition: background-color .26s var(--ease-out), box-shadow .26s var(--ease-out); } .hand-need:focus:not(:focus-visible) { outline: none; } .hand-need:focus-visible { outline: 2px solid var(--teal-focus); outline-offset: 2px; } .hand-need.lit { background-color: rgba(196, 146, 42, .13); box-shadow: inset 0 0 0 1.5px var(--gold); } .hand-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); margin-top: 9px; } .hand-t { font-size: 17px; font-weight: 400; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); } .hand-ev { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 7px; } .hand-by { font-size: var(--t-meta-size); color: var(--ink-faint); } .hand-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; } .hand-ctl .ui-fl { font-size: var(--t-meta-size); } /* the one live control in the section, and it looks it: a field that answers the hand. The site draws it and the list it opens itself, so it opens the same way on every system — never into the operating system's own menu — and it is a combobox to assistive technology, with a select's keyboard. */ .hand-pick { position: relative; display: inline-flex; } .hand-who { display: inline-flex; align-items: center; gap: 12px; min-height: 34px; padding: 6px 11px 6px 12px; font-size: var(--t-body-size); font-weight: 500; line-height: 1.2; color: var(--ink); cursor: pointer; background: var(--wash-hover); border: 1px solid var(--teal-line); border-radius: var(--r-control); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out); } .hand-chev { width: 12px; height: 12px; flex: 0 0 auto; color: var(--teal); transition: transform .22s var(--ease-out); } @media (hover: hover) { .hand-who:hover { border-color: var(--teal); background-color: var(--wash-selected); } .hand-who:hover .hand-chev { transform: translateY(1px); } } .hand-who[aria-expanded="true"] { border-color: var(--teal); background-color: var(--wash-selected); } .hand-who[aria-expanded="true"] .hand-chev { transform: rotate(180deg); } .hand-who:focus:not(:focus-visible) { outline: none; } .hand-who:focus-visible { outline: 2px solid var(--teal-focus); outline-offset: 2px; } /* the first time it is really seen, one ring leaves it — the weight control's own signal — and then it is still */ .hand-who.cue { animation: handCue 1.5s var(--ease-out) .3s 1 both; } @keyframes handCue { from { box-shadow: 0 0 0 0 rgba(24, 208, 215, .55); } to { box-shadow: 0 0 0 12px rgba(24, 208, 215, 0); } } /* the list it opens: the page's own ground, a hairline and a shadow, seated just under the field */ .hand-pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; min-width: max(100%, 232px); padding: 6px; background: var(--ground-occluding); border: 1px solid var(--line-strong); border-radius: var(--r-panel); box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .92), 0 2px 8px rgba(0, 0, 0, .35); transform-origin: 24px 0; animation: handPop .16s var(--ease-out); } .hand-pop.up { top: auto; bottom: calc(100% + 6px); transform-origin: 24px 100%; animation-name: handPopUp; } @keyframes handPop { from { opacity: 0; transform: translateY(-4px) scale(.98); } } @keyframes handPopUp { from { opacity: 0; transform: translateY(4px) scale(.98); } } .hand-pop-k { padding: 7px 10px 8px; color: var(--ink-faint); } .hand-list { outline: none; } .hand-opt { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; padding: 0 10px; border-radius: 5px; font-size: var(--t-row-size); color: var(--ink-secondary); cursor: pointer; -webkit-user-select: none; user-select: none; } .hand-opt.act { background: var(--wash-selected); color: var(--ink); } .hand-opt[aria-selected="true"] { color: var(--ink); font-weight: 500; } /* whoever holds it now is checked, in the action's own colour */ .hand-opt[aria-selected="true"]::after { content: ''; flex: 0 0 auto; width: 4px; height: 8px; margin-right: 3px; border: solid var(--teal); border-width: 0 1.6px 1.6px 0; transform: translateY(-1px) rotate(45deg); } @media (pointer: coarse) { .hand-opt { min-height: 44px; } } @media (prefers-reduced-motion: reduce) { .hand-pop, .hand-who.cue { animation: none; } } /* High Contrast forces every wash away, so the name in hand wears the system's own highlight instead */ @media (forced-colors: active) { .hand-opt.act { forced-color-adjust: none; background: Highlight; color: HighlightText; } .hand-opt.act[aria-selected="true"]::after { border-color: HighlightText; } } .hand-static { color: var(--ink); } .hand-assigned { font-size: var(--t-meta-size); color: var(--ink-faint); } .hand-mem { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-inner); } .mem-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line-inner); } /* the memories at the page's reading size — a document, not a drawer's list */ .hand-m { padding: 18px 0 16px; border-bottom: 1px solid var(--line-inner); } .hand-m:last-child { border-bottom: none; } .hand-m .qv-k { margin-bottom: 7px; } .hand-ms { font-size: clamp(17px, 1.5vw, 19px); font-weight: 300; line-height: 1.42; letter-spacing: -0.012em; color: var(--ink); max-width: 44ch; } .hand-m .qv-prov { margin-top: 8px; } /* provenance as the product renders it, whoever holds the promise */ .hand-conf { font-weight: 500; color: var(--ink-secondary); } /* the site's note in the margin, outside the product: the memory that came to the holder from someone else. When the promise changes hands, it moves to the other one; the profile itself never changes. */ .hand-ws { position: relative; } .hand-brace { position: absolute; right: -30px; top: var(--by, 0); height: var(--bh, 0); width: 7px; opacity: 0; border: solid var(--steel); border-width: 1px 1px 1px 0; border-radius: 0 3px 3px 0; pointer-events: none; transition: opacity .3s var(--ease-out), top .45s var(--ease-out), height .45s var(--ease-out); } .hand-brace.on { opacity: .9; } .hand-got { color: #8FB3DA; } .hand-say { position: sticky; top: 120px; padding-top: 118px; min-width: 0; } .hand-line { margin-top: 14px; font-size: clamp(22px, 2.3vw, 30px); font-weight: 200; line-height: 1.24; letter-spacing: -0.028em; color: var(--ink); min-height: 3.75em; text-wrap: balance; } .hand-line.in { animation: handIn .22s var(--ease-out); } @keyframes handIn { from { opacity: 0; transform: translateY(3px); } } /* the invitation sits right under the control it is about; once the control is used, the same line says what just happened — the promise moved, the customer's context did not */ .hand-try { margin-top: 12px; font-size: var(--t-meta-size); line-height: 1.45; color: var(--teal); } .hand-try.done { color: var(--ink-secondary); } .hand-try.done::before { content: ''; display: inline-block; width: 4px; height: 8px; margin: 0 10px 0 2px; border: solid var(--teal); border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); } .hand-try.in { animation: handIn .22s var(--ease-out); } .hand-fine { margin-top: 22px; font-size: var(--t-body-size); line-height: 1.62; color: var(--ink-secondary); max-width: 42ch; } .hand-replay { margin-top: 14px; padding: 0; background: none; border: 0; cursor: pointer; } .hand-replay svg { color: var(--gold); } @media (hover: hover) { .hand-replay:hover { color: var(--ink); } .hand-replay:hover svg { transform: translateX(3px); } } @media (max-width: 1000px) { /* stacked: what the control does is said above it, where the hand reaching for it can read it */ .hand { display: flex; flex-direction: column; gap: 30px; max-width: 760px; } .hand-say { order: -1; position: static; padding-top: 0; } .hand-brace { right: auto; left: -1px; width: 3px; border: 0; border-radius: 2px; background: var(--steel); } .hand-line { min-height: 2.5em; } } @media (max-width: 760px) { .hand-page { padding-left: 16px; } .hand-need { margin: 10px -10px 0; padding: 12px 10px; } .hand-t { font-size: 16px; } /* a finger's height, and the page's reading size, for the control and every name in its list */ .hand-who { min-height: 44px; padding: 8px 13px 8px 14px; font-size: 16px; } .hand-opt { min-height: 44px; font-size: 16px; } .hand-h .t-meta { display: none; } /* Stacked, the reading is a block on the page rather than a note in the margin, so it is set as one: it keeps the whole column the page gives it — no measure held back for a column that is not there — and its four registers are spaced as four, with the invitation a beat under the statement rather than a caption pressed against it. */ .hand-line { margin-top: 9px; } .hand-try { margin-top: 10px; font-size: var(--t-body-size); } .hand-fine { margin-top: 22px; max-width: none; } .hand-replay { margin-top: 16px; } } .why { margin-top: 8px; } .why summary { cursor: pointer; font-size: var(--t-meta-size); color: var(--ink-faint); list-style: none; display: flex; align-items: center; gap: 6px; min-height: 32px; width: fit-content; border-radius: var(--r-chip); } .why summary::-webkit-details-marker { display: none; } .why summary::after { content: '›'; transition: transform .2s var(--ease-out); } .why[open] summary::after { transform: rotate(90deg); } .why summary:hover { color: var(--ink-secondary); } .why p { font-size: var(--t-meta-size); color: var(--ink-secondary); line-height: 1.55; padding: 4px 0 4px 12px; border-left: 1px solid var(--line-strong); } @media (max-width: 760px) { .why summary { min-height: 44px; } } /* the phone menu: a native disclosure, no script, only where the links would not fit */ .nav-more { display: none; position: relative; } .nav-more summary { list-style: none; cursor: pointer; font-size: var(--t-row-size); font-weight: 500; color: var(--ink-secondary); min-height: 44px; padding: 0 12px; display: flex; align-items: center; border-radius: var(--r-control); } .nav-more summary::-webkit-details-marker { display: none; } .nav-more[open] summary { color: var(--ink); background: var(--wash-hover); } .nav-more-panel { position: absolute; right: -96px; top: calc(100% + 8px); min-width: 220px; display: grid; padding: 6px; background: rgba(12, 12, 21, .98); border: 1px solid var(--line-strong); border-radius: var(--r-panel); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); } .nav-more-panel a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r-control); color: var(--ink-secondary); text-decoration: none; font-size: var(--t-row-size); } .nav-more-panel a:hover, .nav-more-panel a[aria-current] { color: var(--ink); background: var(--wash-hover); } @media (max-width: 600px) { .nav-more { display: block; margin-left: auto; } .nav-signin { display: none; } } /* the Score's glow never widens the page */ .score-scene { overflow-x: clip; } /* ===================== INTERACTION ===================================== */ /* Every control answers the hand that reaches for it. With a pointer: a little light and lift as it is approached (hover rules live only where hover exists, so a tap never leaves one stuck on). Under a finger: a press, quick in and quick out (site.js registers the passive touch listener iOS needs before it will show :active). Nothing moves more than a pixel or two, and nothing loops. */ a, button, summary { -webkit-tap-highlight-color: transparent; } @media (hover: hover) { .nav-cta:hover, .btn-primary:hover { transform: translateY(-1px); background-color: color-mix(in srgb, var(--teal) 86%, #fff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 30px -10px rgba(24, 208, 215, .55); } .btn-ghost:hover { border-color: var(--line-strong); color: var(--ink); background-color: var(--wash); } .btn-ghost:hover svg, .more:hover svg, .ss-open:hover svg { transform: translateX(3px); } .more:hover { color: var(--ink); } .next-page a:hover svg { transform: translateX(4px); } .replay:hover, .copy:hover { color: var(--teal); border-color: var(--teal-line); background-color: rgba(24, 208, 215, .05); } .foot-links a:hover { color: var(--ink); text-decoration-color: var(--line-strong); } .nav-more summary:hover { color: var(--ink); background: var(--wash-hover); } /* the product surfaces take the light when they are looked at: their edge and their reading line brighten — a real surface answering, never a card that jumps */ .panel, .reading, .aw-stage { transition: border-color .45s var(--ease-out), box-shadow .6s var(--ease-out), opacity .6s var(--ease-out), transform .6s var(--ease-out); } .panel:hover { border-color: rgba(255, 255, 255, .12); } .reading:hover, .aw-stage:hover { border-color: rgba(255, 255, 255, .2); } .reading::before, .pcomp .p-back::before, .ss-lens::before { transition: opacity .5s var(--ease-out); } .reading:hover::before { opacity: .95; } .pcomp .p-back:hover::before { opacity: 1; } } .nav-cta:active, .btn-primary:active { transform: translateY(0) scale(.975); transition-duration: .08s; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 3px 12px -6px rgba(24, 208, 215, .45); } .btn-ghost:active { transform: scale(.975); background-color: var(--wash-selected); border-color: var(--line-strong); transition-duration: .08s; } .replay:active, .copy:active { transform: scale(.96); transition-duration: .08s; } .more:active, .nav-links a:active, .nav-signin:active, .foot-links a:active, .next-page a:active, .nav-more summary:active, .nav-more-panel a:active, .why summary:active, .qv-tabs button:active, .nav-mark:active, .foot-mark:active, .next3 a:active, a.qv-foot:active { opacity: .66; transition: opacity .06s linear; } .replay, .copy { transition: color .22s var(--ease-out), border-color .22s var(--ease-out), background-color .22s var(--ease-out), transform .2s var(--ease-out); } .ss-open:active { filter: brightness(.7); transition: filter .06s linear; } /* its opacity belongs to the scroll timeline */ /* ===================== FOOTER =========================================== */ .foot { border-top: 1px solid var(--line); padding: 34px 0 56px; } .foot-row { display: flex; justify-content: space-between; align-items: center; gap: 22px 32px; flex-wrap: wrap; } .foot-mark { display: inline-flex; border-radius: var(--r-control); } .foot-mark img { height: 22px; width: auto; opacity: .85; } .foot-links { display: flex; gap: 4px 6px; flex-wrap: wrap; align-items: center; } .foot-links a { font-size: var(--t-body-size); color: var(--ink-secondary); text-decoration: underline 1px transparent; text-underline-offset: 5px; padding: 8px 10px; border-radius: var(--r-control); transition: color .22s var(--ease-out), text-decoration-color .22s var(--ease-out); } .foot-fine { display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; margin-top: 18px; color: var(--ink-faint); font-size: var(--t-meta-size); } @media (max-width: 760px) { .foot-links { margin-left: -10px; } .foot-mark { min-height: 44px; align-items: center; } .foot-links a { min-height: 44px; display: inline-flex; align-items: center; } } /* ===================== 404 ============================================== */ .lost { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 120px 0 80px; } .lost .chap-h { max-width: 18ch; } .lost-h { margin-top: 28px; } .lost p.say { margin-top: 20px; font-size: 15px; line-height: 1.62; color: var(--ink-secondary); font-weight: 300; max-width: 48ch; } .lost .close-cta { margin-top: 32px; } @media (max-height: 560px) { .slice, #dialWrap { position: static; box-shadow: none; } } .motion .rv:focus-within { opacity: 1; transform: none; transition: none; } /* forced colours: the evidence keeps its marks, and the primary action keeps its shape */ @media (forced-colors: active) { .g, .bmark, .smark, .tick, .av-mark, .av-live, .rspine, .kspan, .ss-mk i, .ss-fade i, .ss-fade b, .led-mk i, .led-fade i, .led-fade b, .led-open i, .aw-excess, .av-excess, .vm, .vk, .vk-stem, .wt-bar, .pm, .pb, .pt, .pq-band, .ps-late, .sowed { forced-color-adjust: none; } } /* ===================== REDUCED MOTION =================================== */ /* final states, immediately — no wipes, no fades, no drift, no breath */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; } .dial, .bezel, .dial::before { animation: none !important; } #dialWrap .bezel::after, #dialWrap .dial::after { content: none !important; } }