/* Capabilities · the discipline template (PLAN-SITE A6; _template/discipline.js). Builds on home-v3e/css/base.css (V3e's text system: zones, glass, the motion grammar) and kit/v3e/site.css (flow sections, the Closing, the credits). 1 the hero 2 the anatomy (do) 3 the work 4 the process 5 the flows (tools, questions) 6 small parts 7 phones 8 reduced motion and no WebGL Motion: transform, opacity and clip-path only; the kit's --ease-out; nothing animates a blur. Dark only. */ /* ============================================================ 1 · the hero */ .cap .xp[data-story="hero"] { gap: 18px; } /* (the hero's body a little narrower than the kit's measure on a desktop: 52 characters a line at most) */ html[data-layout="land"] .cap .xp[data-story="hero"] .xp__body { max-width: 37ch; } /* a short desktop frame: the title by the frame's height too, so the hero stands inside it (check_anchors at 1280 x 720) */ html[data-layout="land"] .cap .xp[data-story="hero"] .xp__h1 { font-size: clamp(38px, min(5vw, 7.4vh), 92px); } .cap .xp__act .v3-arrow { padding: 12px 0; } /* where the carried object still lands (PLAN-SITE A1.4: the walk's close-up framing; F wires the carry in Wave 3) */ .cap-accept { position: fixed; left: 54vw; top: 20vh; width: 30vw; height: 46vh; pointer-events: none; } html[data-layout="port"] .cap-accept { left: 18vw; top: 54svh; width: 64vw; height: 30svh; } .v3-reduced .cap-accept, .v3-nogl .cap-accept { display: none; } /* ============================================================ 2 · the anatomy: six labels pinned to the object's parts desktop: two columns either side of the object (the layer draws each leader line from the part to its label); a phone: one list under the object, on one panel */ .cap-do { margin: 0; padding: 0; list-style: none; } html:not(.v3-reduced):not(.v3-nogl) .cap-do { display: contents; } .cap-do .xp { gap: 4px; } .cap-do .xp__h3 { font-size: clamp(15px, 1.2vw, 19px); line-height: 1.02; max-width: 15ch; } .cap-do .xp__body { font-size: clamp(13.5px, 0.98vw, 15px); line-height: 1.42; max-width: 30ch; } html[data-layout="land"] .xp[data-land^="do-"] { width: min(24vw, 300px); } html[data-layout="land"] .xp[data-land^="do-l"] { left: var(--g-m); } html[data-layout="land"] .xp[data-land^="do-r"] { left: auto; right: var(--g-m); } html[data-layout="land"] .xp[data-land="do-l0"] { top: 31vh; } html[data-layout="land"] .xp[data-land="do-l1"] { top: 51vh; } html[data-layout="land"] .xp[data-land="do-l2"] { top: 71vh; } html[data-layout="land"] .xp[data-land="do-r0"] { top: 17vh; } html[data-layout="land"] .xp[data-land="do-r1"] { top: 39vh; } html[data-layout="land"] .xp[data-land="do-r2"] { top: 61vh; } .cap-moved { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; font: 500 14px/1.3 var(--v3-body); } .cap-moved a { color: var(--filament, #c9b6ea); text-underline-offset: 3px; } .cap-tag { display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border: 1px solid rgba(201, 182, 234, 0.55); border-radius: 999px; font: 500 10px/1 var(--v3-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--filament, #c9b6ea); } /* Part D (PLAN-SITE-D D1.9): What we do as the six services in one row along the foot of the frame, the object above them (desktop; each card lit in turn, its leader line rising from the card's top to its part, so no line crosses another card: discipline.js); a phone: one panel, two columns, under the object */ html[data-layout="land"]:not(.v3-reduced):not(.v3-nogl) .cap-do { display: grid; position: fixed; left: var(--g-m); right: var(--g-m); bottom: max(5vh, 36px); z-index: 3; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; pointer-events: none; } html[data-layout="land"]:not(.v3-reduced):not(.v3-nogl) .xp[data-land^="svc"] { position: relative; inset: auto; width: auto; max-width: none; gap: 5px; padding: 12px 14px; align-self: stretch; } .cap-do .xp[data-land^="svc"] .xp__h3 { font-size: clamp(16px, 1.3vw, 21px); line-height: 1.02; max-width: 15ch; } .cap-do .xp[data-land^="svc"] .xp__body { font-size: clamp(12.5px, 0.95vw, 14.5px); line-height: 1.4; max-width: none; } /* the card being read lit; the others quieter (their words stay legible); the others' leader lines away */ .cap-do .xp { transition: opacity 260ms var(--ease-out); } html:not(.v3-reduced):not(.v3-nogl) .cap-do:has(.xp.is-cur) .xp:not(.is-cur) { opacity: 0.86; } .cap-do .xp.is-cur::before { border-color: rgba(201, 182, 234, 0.55) !important; } .xp-lines .cap-co-off { opacity: 0; transition: opacity 200ms var(--ease-out); } .xp-lines .xp-co { transition: opacity 200ms var(--ease-out); } /* the answer block's figure, as lit type in the sentence */ .cap-ansfig { color: var(--gold, #f2c27a); font-weight: 600; } /* the related article (SEO-PLAN §6.1), last in the questions */ .cap-read { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 6px 0 0; padding-top: 14px; border-top: 1px solid rgba(236, 233, 241, 0.1); } .cap-read__l { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--filament, #c9b6ea); } /* the tools frame on its flow (kit/v3e/tools.css: static; the frame is its own glass) */ .cap-fl--tools .cap-tfw { width: 100%; max-width: min(1240px, calc(100vw - 2 * var(--g-m))); } .cap-fl--tools .tf__intro, .cap-fl--tools .tf__marker { margin: 0 var(--tf-pad); } /* ============================================================ 3 · the work: the windows at their own ratios (never cropped), beside the title cluster on a desktop; one at a time under it on a phone */ /* (W1, BUILD-PLAN-1104 change 14) the proof's figures, designed: case by case, each figure in the titling face with its label and its qualifier under it, then the source (the client, Fezey-reported), then the case it proves, named. The figures' date windows are not on file (content/projects.json: window null), so the qualifier stands as the window. */ .cap-proof { display: grid; gap: 16px; margin-top: 4px; } .cap-case { display: grid; gap: 8px; justify-items: start; padding-top: 14px; border-top: 1px solid rgba(236, 233, 241, 0.12); } .cap-stats { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: clamp(24px, 2.6vw, 44px); row-gap: 2px; align-items: start; } .cap-stats__in { display: contents; } .cap-stat { display: grid; gap: 5px; align-content: start; margin: 0; max-width: 26ch; } .cap-stat__v { font: 600 clamp(34px, 3vw, 50px)/0.92 var(--v3-title); font-stretch: 88%; letter-spacing: -0.025em; text-shadow: 0 0 20px rgba(242, 194, 122, 0.36), 0 1px 2px rgba(7, 6, 10, 0.5); white-space: nowrap; } .cap-stat__l { font: 500 14px/1.3 var(--v3-body); color: var(--signal, #ece9f1); } .cap-stat__q, .cap-stats__q { font: 500 10.5px/1.35 var(--v3-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--filament, #c9b6ea); } /* (L1, W1 review D4 C7) a window both figures share reads as shared: a bracket under the pair, the window centred on it */ .cap-stats__q { grid-column: 1 / -1; position: relative; margin: 8px 0 0; padding-top: 8px; text-align: center; } .cap-stats__q::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border: 1px solid rgba(201, 182, 234, 0.5); border-top: 0; } .cap-fig__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0; font: 500 13px/1.4 var(--v3-body); color: rgba(236, 233, 241, 0.86); } .cap-case > .xp__case { margin-top: 0; } /* (L1, W1 review D11 D12) a case link a phone cannot set in 34 characters takes two balanced lines (never an orphan word); a window's caption breaks into balanced lines (a quoted title stays whole) */ html[data-layout="port"] .cap-case > .xp__case { max-width: min(100%, 17em); text-wrap: balance; } .cap-win__cap { text-wrap: balance; } .xp > .cap-proof:first-child > .cap-case:first-child { padding-top: 0; border-top: 0; } /* a cluster that is the proof alone (Websites' search proof) */ .cap-wins { display: contents; } html:not(.v3-reduced):not(.v3-nogl) .cap-wins { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: 16px 18px; } html[data-layout="land"] .xp[data-land="wins"] { left: auto; right: var(--g-m); top: var(--z-title-top); width: calc(50vw - var(--g-m) - 12px); } .cap-win { --h: 28vh; margin: 0; display: grid; gap: 8px; align-content: start; } /* three windows or more: smaller, so they stand in two rows inside a short frame (check_anchors at 1280 x 720) */ html[data-layout="land"] .cap-wins:not(.cap-wins--big):has(> .cap-win:nth-child(3)) .cap-win { --h: 21vh; } /* each window as wide as its picture (its caption wraps under it, 22ch at least), so the windows pair up in rows */ html[data-layout="land"]:not(.v3-reduced):not(.v3-nogl) .cap-win { width: min-content; } html[data-layout="land"]:not(.v3-reduced):not(.v3-nogl) .cap-win__cap { min-width: 22ch; } .cap-win__media { position: relative; display: block; height: var(--h); aspect-ratio: var(--ar); max-width: 100%; overflow: hidden; border-radius: 10px; background: rgba(18, 16, 23, 0.6); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.06); } .cap-win__media > :is(img, video) { display: block; width: 100%; height: 100%; object-fit: contain; } .cap-win__none { position: absolute; inset: 0; display: grid; place-items: center; font: 500 10.5px/1.4 var(--v3-mono); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(236, 233, 241, 0.7); border: 1px dashed rgba(201, 182, 234, 0.42); border-radius: 10px; } .cap-win__cap { position: relative; isolation: isolate; display: grid; gap: 2px; max-width: max(100%, 22ch); padding: 7px 10px; font: 400 12.5px/1.4 var(--v3-body); color: rgba(236, 233, 241, 0.9); } .cap-win__cap::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 8px; background: var(--gl-tint); border: 1px solid var(--gl-edge); } html.gl-blur .cap-win__cap::before { background: var(--gl-fill); -webkit-backdrop-filter: blur(14px) saturate(115%); backdrop-filter: blur(14px) saturate(115%); } .cap-win__who { font: 600 13px/1.2 var(--v3-title); font-stretch: 92%; letter-spacing: 0.01em; text-transform: uppercase; color: var(--signal, #ece9f1); } .cap-tbc { justify-self: start; margin-top: 3px; font: 500 9.5px/1.3 var(--v3-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--e-warn, #f2c27a); } /* the block opens as the media grammar says (motion.js media(): clip-path from the direction of travel); its films play once their frame has opened */ html:not(.v3-reduced):not(.v3-nogl) .cap-wins .cap-win__cap { opacity: 0; transform: translate3d(0, 8px, 0); } html:not(.v3-reduced):not(.v3-nogl) .cap-wins .cap-win__cap.is-in { opacity: 1; transform: none; } /* (W1, BUILD-PLAN-1104 change 5) the windows much bigger, one at a time, on the diagonal from the title card: discipline.js sizeWins measures the region once per layout (--wins-l, --wins-t, --wins-b) and each window's --h; the window stands at the region's bottom right, its caption under it; the reader's scroll hands one to the next (is-cur), each paired in and out (opacity and a short rise) */ html[data-layout="land"]:not(.v3-reduced):not(.v3-nogl) .xp.cap-wins--big[data-land="wins"] { left: var(--wins-l); right: var(--g-m); top: var(--wins-t); bottom: var(--wins-b); width: auto; height: auto; display: block; } html[data-layout="land"]:not(.v3-reduced):not(.v3-nogl) .cap-wins--big > .cap-win { position: absolute; right: 0; bottom: 0; opacity: 0; translate: 0 14px; transition: opacity 520ms var(--v3-ease), translate 520ms var(--v3-ease); } html[data-layout="land"]:not(.v3-reduced):not(.v3-nogl) .cap-wins--big > .cap-win.is-cur { opacity: 1; translate: none; } html[data-layout="land"]:not(.v3-reduced):not(.v3-nogl) .cap-wins--big .cap-win__cap { font-size: 13.5px; padding: 9px 12px; } html[data-layout="land"]:not(.v3-reduced):not(.v3-nogl) .cap-wins--big .cap-win__who { font-size: 14px; } /* (the window's width from its height and its ratio: an absolutely placed figure shrinks to fit, so the width is stated) */ .cap-wins--big .cap-win__media { width: calc(var(--h) * var(--ar)); max-width: none; } html[data-layout="land"] .cap-wins--big .cap-win__media { border-radius: 14px; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.07); } /* ============================================================ 4 · the process: the steps beside the ring (desktop: two columns in the title zone; the step being read lit as its node lights) */ .cap-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; counter-reset: s; } .cap-steps > li { display: grid; gap: 3px; align-content: start; opacity: 0.8; transition: opacity 320ms var(--v3-ease); } .cap-steps > li.is-done { opacity: 0.88; } .cap-steps > li.is-cur { opacity: 1; } .cap-step__h { margin: 0; font: 600 clamp(15px, 1.15vw, 18px)/1.02 var(--v3-title); font-stretch: 88%; letter-spacing: -0.03em; text-transform: uppercase; text-wrap: balance; max-width: 18ch; } .cap-steps .xp__body { font-size: 13.5px; line-height: 1.42; max-width: 30ch; } .cap-step__n { font: 500 10px/1.4 var(--v3-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--filament, #c9b6ea); } html[data-layout="land"] .xp[data-story="process"] { max-width: 600px; width: calc(50vw - var(--g-m) - 16px); } .cap-steps > li.is-cur .cap-step__n::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--filament, #c9b6ea); box-shadow: 0 0 10px rgba(201, 182, 234, 0.9); vertical-align: 1px; } /* ============================================================ 5 · the flows: tools and questions on the reading glass */ .cap-fl .fl { gap: 18px; } .cap-tools .xp__h2, .cap-faq .xp__h2 { max-width: none; } .cap-tg { display: grid; gap: 12px; padding-top: 6px; border-top: 1px solid rgba(236, 233, 241, 0.1); } .cap-tg:first-of-type { border-top: 0; padding-top: 0; } .cap-tlist { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px 26px; } .cap-tool { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; } .cap-tool > :not(.cap-mark, .cap-chipmark, .cap-labmark) { grid-column: 2; } .cap-mark { grid-row: 1 / span 2; width: 26px; height: 26px; margin-top: 2px; object-fit: contain; filter: invert(0.92); } .cap-chipmark { grid-row: 1 / span 2; width: 26px; height: 26px; margin-top: 2px; border: 1px solid rgba(236, 233, 241, 0.4); border-radius: 7px; } .cap-labmark { grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 7px; } .cap-tool__n { margin: 0; font: 600 16px/1.1 var(--v3-title); font-stretch: 92%; letter-spacing: -0.01em; } .cap-tool__l { margin: 0; font: 400 14px/1.45 var(--v3-body); color: rgba(236, 233, 241, 0.84); max-width: 46ch; } .cap-tool--lab .cap-tool__n { color: var(--signal, #ece9f1); } .cap-draft { font: 500 10.5px/1.4 var(--v3-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--e-warn, #f2c27a); } /* the Questions (W1, BUILD-PLAN-1104 changes 10 and 23): the title holds the title zone on the left, on its own glass (sticky while the questions pass), and each question rises on its own glass in the right columns, numbered, its answer at the caption's measure (a line at most 52 characters; on a phone 34). Each panel rises as it comes up the frame and sinks back when it leaves below (page.js wireFlow: the paired in and out); a reduced-motion visit finds every panel standing, the composed still. The words are the approved Q&As, unchanged (and the page's FAQPage JSON-LD, word for word: tools/seo_head.py) */ .cap-faq { display: grid; gap: 12px; width: 100%; } .cap-faq__head { width: auto; } .cap-faq__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } .cap-fl .cap-qa { width: auto; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; align-items: baseline; } .cap-qa__n { grid-column: 1; grid-row: 1; font: 500 10.5px/1 var(--v3-mono); letter-spacing: 0.16em; color: var(--filament, #c9b6ea); } .cap-qa .xp__h3 { grid-column: 2; grid-row: 1; max-width: 22ch; font-size: clamp(18px, 1.45vw, 22px); line-height: 1.02; } .cap-qa .xp__body { grid-column: 2; max-width: 23ch; font-size: 15.5px; } /* the related article, after the questions (approved copy, SEO-PLAN §6.1; L1, C2): a quiet row that rises and sinks with the act (a bare flow panel: no glass of its own); it carries data-article, so the articles' switch hides it */ .cap-faq .cap-read { width: auto; margin: 4px 0 0; padding: 14px 0 0; } /* (L1, P1) a phone: the questions rise as one piece, the list (not each panel), and the panels sit on tint, no live blur: the list comes in with its first panel (page.js wireFlow marks the panels) and sinks when none is in */ html.rv-one:not(.v3-reduced) body .cap-faq__list .fl.cap-qa { opacity: 1; translate: none; transition: none; } html.rv-one:not(.v3-reduced) body .cap-faq__list { opacity: 0; translate: 0 18px; transition: opacity calc(420ms * var(--rv-slow, 1)) var(--ease-out), translate calc(420ms * var(--rv-slow, 1)) var(--ease-out); } html.rv-one:not(.v3-reduced) body .cap-faq__list:has(> .fl.is-in), html.rv-one:not(.v3-reduced) body .cap-faq__list:focus-within { opacity: 1; translate: none; transition-duration: calc(560ms * var(--rv-slow, 1)); } html.rv-one.gl-blur:not(.v3-reduced) body .cap-faq .fl.gl--read:not(.fl--bare) { -webkit-backdrop-filter: none; backdrop-filter: none; } html.rv-one.gl-blur:not(.v3-reduced) body .cap-faq .fl.gl--read::before { background: var(--gl-read-tint); } @media (min-width: 900px) { .cap-faq { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 0; align-items: start; } .cap-faq__head { grid-column: 1 / span 4; position: sticky; top: calc(var(--nav-h, 72px) + 24px); } .cap-faq__list { grid-column: 5 / span 8; gap: 14px; } .cap-faq .cap-read { grid-column: 5 / span 8; } .cap-fl .cap-qa { grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; } .cap-qa .xp__body { max-width: 37ch; font-size: clamp(15.5px, 1.18vw, 18px); } } /* a wide frame: each panel a ledger row, the question on the left and its answer beside it */ @media (min-width: 1200px) { .cap-fl .cap-qa { grid-template-columns: 40px minmax(0, 1fr) 37ch; column-gap: 16px; row-gap: 0; } .cap-qa .xp__h3 { padding-right: 8px; } .cap-qa .xp__body { grid-column: 3; grid-row: 1; } } .cap .cap-fl { padding-bottom: clamp(56px, 9vh, 96px); } /* ============================================================ 6 · small parts */ .cap-chip { justify-self: start; display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border: 1px solid rgba(242, 194, 122, 0.6); border-radius: 999px; font: 500 10px/1 var(--v3-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--e-warn, #f2c27a); } .cap-word { font: 700 clamp(30px, 3.2vw, 56px)/0.9 var(--v3-title); font-stretch: 80%; letter-spacing: -0.02em; text-transform: uppercase; color: var(--signal, #ece9f1); text-shadow: 0 0 22px rgba(201, 182, 234, 0.42), 0 1px 2px rgba(7, 6, 10, 0.5); } .cap .xp__case { margin-top: 4px; } .cap-next { padding: 12px 0; } /* ============================================================ 7 · phones: the object high, a list low; one picture at a time; the steps under the ring */ @media (max-width: 760px), (max-aspect-ratio: 9/10) { .cap-proof { gap: 8px; margin-top: 0; } .cap-case { gap: 4px; padding-top: 8px; } .cap-stats { column-gap: 22px; row-gap: 0; } .cap-stat { gap: 2px; } .cap-stats__q { margin-top: 2px; } .cap-stat__v { font-size: 27px; } .cap-stat__l { font-size: 13.5px; } } /* the anatomy as one list on one panel under the object (V3e's phone services list: the list moves as one cluster) */ html[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) .cap-do { position: fixed; left: var(--g-m); right: var(--g-m); bottom: var(--z-cap-bottom); z-index: 3; display: grid; gap: 8px; padding: 14px 16px; isolation: isolate; visibility: hidden; transition: visibility 0s linear calc(760ms * var(--rv-slow, 1)); } html[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) .cap-do:has(.xp.is-on) { visibility: visible; transition-delay: 0s; } html[data-layout="port"] .cap-do::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: var(--gl-r); background: var(--gl-tint); border: 1px solid var(--gl-edge); box-shadow: inset 0 1px 0 var(--gl-hi), var(--gl-shadow); opacity: 0; transition: opacity 260ms var(--v3-ease) 300ms; } html.gl-blur[data-layout="port"] .cap-do::before { background: var(--gl-fill); -webkit-backdrop-filter: blur(14px) saturate(115%); backdrop-filter: blur(14px) saturate(115%); } html[data-layout="port"] .cap-do:has(.xp.is-on)::before { opacity: 1; transition-duration: 420ms; transition-delay: 0s; } html[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) .cap-do .xp { position: relative; padding: 0; gap: 1px; } html[data-layout="port"] .cap-do .xp::before { display: none; } html[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) .cap-do { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: 10px; } html[data-layout="port"] .cap-do .xp__h3 { font-size: 14px; max-width: 15ch; } html[data-layout="port"] .cap-do .xp__body { font-size: 12.5px; line-height: 1.36; max-width: 27ch; } html.rv-one[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) body .cap-do { opacity: 0; translate: 0 12px; transition: opacity calc(260ms * var(--rv-slow, 1)) var(--v3-ease), translate calc(260ms * var(--rv-slow, 1)) var(--v3-ease), visibility 0s linear calc(260ms * var(--rv-slow, 1)); } html.rv-one[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) body .cap-do:has(.xp.is-on) { opacity: 1; translate: none; transition-duration: calc(420ms * var(--rv-slow, 1)), calc(420ms * var(--rv-slow, 1)), 0s; transition-delay: calc(120ms * var(--rv-slow, 1)), calc(120ms * var(--rv-slow, 1)), 0s; } html.rv-one[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) body .cap-do::before { opacity: 1; transition: none; } html.rv-one[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) body .cap-do .xp { visibility: inherit; opacity: 1; translate: none; transition: none; will-change: auto; -webkit-backdrop-filter: none; backdrop-filter: none; } /* the process's steps under the ring: one compact list on one panel */ html[data-layout="port"] .xp[data-port="steps"] { left: var(--g-m); right: var(--g-m); top: auto; bottom: var(--z-cap-bottom); width: auto; padding: 14px 16px; gap: 8px; } html[data-layout="port"] .cap-steps { grid-template-columns: 1fr; gap: 7px; } html[data-layout="port"] .cap-steps > li { grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 1px; } html[data-layout="port"] .cap-steps > li > .cap-step__n { grid-row: 1 / span 2; padding-top: 2px; } html[data-layout="port"] .cap-step__h { font-size: 14px; max-width: none; } html[data-layout="port"] .cap-steps .xp__body { font-size: 12.5px; line-height: 1.34; max-width: 23ch; } /* the work on a phone: the title at the top, one window at a time in the lower part of the frame */ html[data-layout="port"] .xp[data-port="wins"] { left: var(--g-m); right: var(--g-m); top: auto; bottom: calc(var(--z-cap-bottom) - 8px); width: auto; height: var(--wins-ph, 31svh); } /* (the box hugs its one window at a time, bottom-aligned: the Proof's words above it stay clear, check_anchors) */ html[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) .cap-wins { display: block; } html[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) .cap-win { --h: 30svh; position: absolute; left: 0; right: 0; bottom: 0; justify-items: center; opacity: 0; translate: 0 10px; transition: opacity 420ms var(--v3-ease), translate 420ms var(--v3-ease); } html[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) .cap-win.is-cur { opacity: 1; translate: none; } /* two proofs and two case links: the window stays under the cluster's last line */ html[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) .cap-work--tall .cap-win:not([style*="--h:"]) { --h: 22svh; } html[data-layout="port"] .cap-win__media { max-width: calc(100vw - 2 * var(--g-m)); } /* (L1, W1 review D2) no room between the title card and the caption band (a short phone): the windows stay off and the figures and case links keep the frame (discipline.js sizeWins) */ html[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) body .cap-wins.cap-wins--off { display: none; } html[data-layout="port"] .cap-win__cap { justify-self: center; text-align: center; } html.rv-one[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) body .cap-wins .cap-win__cap { opacity: 1; transform: none; } html.rv-one[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) body .cap-wins { opacity: 0; transition: opacity calc(420ms * var(--rv-slow, 1)) var(--v3-ease); } html.rv-one[data-layout="port"]:not(.v3-reduced):not(.v3-nogl) body .cap-wins.is-on { opacity: 1; transition-delay: calc(120ms * var(--rv-slow, 1)); } /* ============================================================ 8 · reduced motion and no WebGL: one still per section, every word in its section's flow, the same panels */ .v3-reduced .cap-do, .v3-nogl .cap-do { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 1100px; } .v3-reduced .cap-wins, .v3-nogl .cap-wins { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; } .v3-reduced .cap-win, .v3-nogl .cap-win { --h: 30vh; } .v3-reduced .xp[data-story="process"], .v3-nogl .xp[data-story="process"] { max-width: min(100%, 900px) !important; } @media (max-width: 760px), (max-aspect-ratio: 9/10) { .v3-reduced .cap-do, .v3-nogl .cap-do { grid-template-columns: 1fr; } .v3-reduced .cap-steps, .v3-nogl .cap-steps { grid-template-columns: 1fr; } .v3-reduced .cap-win, .v3-nogl .cap-win { --h: 26svh; } } /* ============================================================ contrast over the lit film (tools/check_contrast.py: 4.5:1 against the brightest 3% behind each line): the words that stand over the object's light, the ring or a signature's lit piece sit on a deeper glass (as the hub's labels) */ .cap-body .cap-do .xp::before, .cap-body .xp[data-story="process"]::before, .cap-body .xp[data-story="sig-problem"]::before, .cap-body .xp[data-story="do-head"]::before, .cap-body .xp:is([data-land="label"], [data-port="label"], [data-port^="hop"])::before { background: rgba(10, 8, 16, 0.78) !important; } html[data-layout="port"] .cap-body .xp[data-story="hero"]::before { background: rgba(10, 8, 16, 0.66) !important; } html[data-layout="land"] .cap-body .xp[data-story="hero"]::before { background: rgba(10, 8, 16, 0.6) !important; } .cap-body .cap-win__cap::before { background: rgba(10, 8, 16, 0.78) !important; } /* an empty window (no media on file): its ratio's label legible on a near-solid ground */ .cap-body .cap-win__media:has(.cap-win__none) { background: rgba(14, 12, 19, 0.9); } .cap-body .cap-win__none { color: rgba(236, 233, 241, 0.86); }