/* cMAP Consultant Studio — domain-per-page redesign (D-02, D-03, D-07, D-09). Token layer derives from the approved landing-page language (D-05). Additive surface: nothing here restyles the existing workbench. */ /* Base tokens; alternate palettes live in studio-themes.css */ @font-face { font-family: "Roobert"; src: url("../assets/fonts/roobert/Roobert-Regular.woff2") format("woff2"); font-display: swap; font-weight: 400; } @font-face { font-family: "Roobert"; src: url("../assets/fonts/roobert/Roobert-SemiBold.woff2") format("woff2"); font-display: swap; font-weight: 600; } @font-face { font-family: "Roobert"; src: url("../assets/fonts/roobert/Roobert-Bold.woff2") format("woff2"); font-display: swap; font-weight: 700 900; } /* Display serif for the public face. One variable roman covers 200-800 and carries its own optical sizing, so a 15px card title and a 60px headline are drawn as different designs rather than one design scaled. SIL Open Font Licence; OFL.txt travels with it. No italic: the public pages set none. */ @font-face { font-family: "Newsreader"; src: url("../assets/fonts/newsreader/Newsreader-Variable.woff2") format("woff2-variations"); font-display: swap; font-weight: 200 800; font-style: normal; } :root { color-scheme: light; --ink: #182a38; --navy: #173d68; --blue: #3e6f96; --muted: #5e6c77; --line: #d9e0e5; --paper: #fff; --soft: #f4f7f9; --clay: #a9694f; --clay-soft: #f6eee9; --clay-ink: #8a4a30; --gold: #b99042; --gold-soft: #faf4e4; --gold-ink: #8a5a10; /* gold at 2.94:1 failed AA; -ink is 5.91:1 */ --green: #2f6b4f; --green-soft: #eef4f0; --red: #ad504c; --page: #fbfcfd; /* app background */ --control: #fff; /* inputs, buttons, chips, score cells */ --control-line: #cbd5dc; /* control borders, slightly darker than --line */ --on-accent: #fff; /* text on a navy fill */ --on-accent-dim: #c6d5e7; --on-accent-weak: #f0c9b8; --navy-soft: #eef3f8; --navy-ink: #2b4562; --gold-text: #4a3608; --red-soft: #f9ecec; --red-ink: #7c3532; --green-ink: #2f4a3b; /* Over-photo pair: a hero photograph does not flip with the palette, so neither may the veil that darkens it nor the text that sits on it. */ --photo-ground: #0d1a2a; --photo-veil: rgba(13, 26, 42, 0.72); --photo-veil-soft: rgba(13, 26, 42, 0.45); --on-photo: #f4f8fc; --on-photo-dim: #c9d7e6; --font: "Roobert", ui-sans-serif, system-ui, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* ── PUBLIC FACE ────────────────────────────────────────────────────────── The blueprint palette, scoped to the four public pages by an attribute on so the workbench keeps the palette a consultant chose. Warm paper, navy ink, drafting-line rules -- a printed working document rather than a dashboard. Deliberately not theme-switchable. The look is a paper analogue and it does not have a dark counterpart that means the same thing; a prospect opening the site gets the document, in the one register it was designed in. The workbench, where a consultant spends hours, keeps its full palette set. */ [data-public-face="blueprint"] { color-scheme: light; --ink: #14385f; --navy: #10365f; --blue: #1f5f9f; --muted: #526b83; --line: #cfd8e0; --rule: #a9b7c4; --paper: #fbf8f1; --page: #f4f0e7; --soft: #efeade; --green: #74895a; --green-soft: #eef0e6; --green-ink: #4e5f3a; --gold: #9a7b3c; --gold-soft: #f5eeda; --gold-ink: #6f5620; --clay: #9a5f45; --clay-soft: #f3e8e2; --clay-ink: #7a4530; --control: #fbf8f1; --control-line: #c3cedb; --navy-soft: #e8eef5; --navy-ink: #10365f; --on-accent: #fbf8f1; --on-accent-dim: #b9cbdf; --shadow-card: 0 16px 40px rgba(18, 40, 71, .08); --display: "Newsreader", "Iowan Old Style", Georgia, serif; } * { box-sizing: border-box; } body { margin: 0; background: var(--page); color: var(--ink); font: 400 15px/1.55 var(--font); } code { font-family: var(--mono); font-size: .86em; } button { font-family: var(--font); } .skipLink { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; background: var(--control); border: 1px solid var(--line); border-radius: 8px; transform: translateY(-150%); } .skipLink:focus { transform: none; } /* ---------- shell ---------- */ .studioShell { display: grid; grid-template-columns: 252px 1fr; min-height: 100vh; } /* ---------- domain rail ---------- */ .rail { border-right: 1px solid var(--line); background: var(--paper); padding: 18px 0 30px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .railBrand { display: flex; gap: 10px; align-items: center; padding: 0 18px 16px; border-bottom: 1px solid var(--line); } .railBrand > span, .railBrand > .railBrandMark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--control-line); border-radius: 8px; color: var(--navy); font-weight: 800; font-size: 11px; text-decoration: none; } .railBrand > .railBrandMark:hover, .railBrand > .railBrandMark:focus-visible { border-color: var(--navy); } .railBrand b { display: block; font-size: 14px; color: var(--navy); } .railBrand small { display: block; color: var(--muted); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; } .railGroup { padding: 14px 10px 4px; } .railGroup > small { display: block; padding: 0 8px 6px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .rail a { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 7px; color: var(--ink); font-size: 13px; text-decoration: none; } .rail a:hover { background: var(--soft); } .rail a:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; } .rail a.active { background: var(--navy); color: var(--on-accent); } .rail a.active small, .rail a.active i { color: var(--on-accent-dim); } .rail a i { font-style: normal; color: var(--muted); font-size: 11px; font-weight: 600; text-align: center; } .rail a b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail a small { font-family: var(--mono); font-size: 11px; color: var(--muted); } .rail a small.weak { color: var(--clay); font-weight: 700; } .rail a.active small.weak { color: var(--on-accent-weak); } .rail a small.review { color: var(--gold); font-weight: 700; } .railFoot { margin: 16px 18px 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; } .railFoot a { display: inline; padding: 0; color: var(--blue); } /* ---------- main ---------- */ .studioMain { padding: 0 0 90px; min-width: 0; } .topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 28px; border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 5; } .topbar .crumb { font-size: 12px; color: var(--muted); } .topbar .crumb b { color: var(--navy); } .topbar .who { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--muted); } .topbar .who b { color: var(--ink); font-weight: 600; } .topbar .who button { border: 1px solid var(--control-line); border-radius: 7px; background: var(--control); color: var(--navy); font-weight: 700; font-size: 12px; padding: 5px 12px; cursor: pointer; } .topbar .who button:hover { border-color: var(--navy); } .studioWrap { max-width: 1180px; padding: 26px 28px 0; } .studioToast { position: fixed; right: 20px; bottom: 20px; z-index: 50; border: 1px solid var(--green); border-radius: 9px; background: var(--green-soft); color: var(--green-ink); font-size: 13px; font-weight: 600; padding: 10px 16px; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: none; } .studioToast.show { opacity: 1; transform: none; } /* ---------- empty / landing state ---------- */ .studioEmpty { max-width: 620px; margin: 90px auto; text-align: center; } .studioEmpty h1 { color: var(--navy); font-size: 30px; margin: 0 0 8px; } .studioEmpty p { color: var(--muted); } .studioEmpty button { border: 1px solid var(--navy); border-radius: 8px; background: var(--navy); color: var(--on-accent); font-weight: 750; font-size: 14px; padding: 11px 18px; cursor: pointer; } /* ---------- domain header ---------- */ .eyebrow { color: var(--blue); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .domainHead { border-bottom: 4px solid var(--navy); padding-bottom: 18px; margin-bottom: 8px; } .domainHead h1 { margin: 4px 0 2px; color: var(--navy); font-size: 33px; line-height: 1.08; letter-spacing: -.01em; } .domainHead .sub { color: var(--muted); font-size: 14px; max-width: 760px; } .domainStats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-top: 16px; } .domainStats article { border: 1px solid var(--line); border-radius: 10px; background: var(--paper); padding: 10px 14px; } .domainStats span { display: block; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .domainStats b { display: block; font-size: 21px; color: var(--navy); } .domainStats small { color: var(--muted); font-size: 11.5px; } .bandTitle { display: flex; align-items: baseline; gap: 10px; margin: 26px 0 8px; } .bandTitle h2 { margin: 0; color: var(--navy); font-size: 19px; } .bandTitle small { color: var(--muted); font-size: 12px; } /* ---------- inference ledger ---------- */ .infTable { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); overflow: hidden; } .infRow { display: grid; grid-template-columns: 150px minmax(0,1.5fr) minmax(0,1fr); border-top: 1px solid var(--line); } .infRow:first-child { border-top: 0; } .infRow > .k { padding: 12px 14px; background: var(--soft); border-right: 1px solid var(--line); } .infRow > .k b { display: block; font-size: 12.5px; color: var(--navy); font-weight: 700; } .infRow > .k small { display: block; color: var(--muted); font-size: 10.5px; margin-top: 2px; } .infRow > .k code { display: inline-block; margin-top: 6px; color: var(--blue); font-size: 10.5px; } .infRow > .v { padding: 12px 16px; font-size: 13.5px; border-right: 1px solid var(--line); overflow-wrap: break-word; } .infRow > .v .cite { display: inline-block; margin-left: 6px; color: var(--blue); font-family: var(--mono); font-size: 10.5px; white-space: nowrap; } .infRow > .d { padding: 10px 14px; } /* disposition cell */ .disp { display: flex; flex-direction: column; gap: 6px; } .dispState { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; } /* State is encoded by SHAPE first and colour second. Measured: the four state hues sat within 0.011 luminance of each other, and accepted/pending converge under deuteranopia. Shape survives both. */ .dispState::before { content: ""; width: 9px; height: 9px; flex: none; } .dispState.accepted { color: var(--green); } .dispState.accepted::before { background: var(--green); border-radius: 50%; } /* filled disc */ .dispState.validated { color: var(--navy); } .dispState.validated::before { background: var(--navy); border-radius: 50%; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--navy); } /* ringed disc */ .dispState.edited { color: var(--gold-ink); } .dispState.edited::before { background: var(--gold-ink); border-radius: 2px; transform: rotate(45deg); } /* diamond */ .dispState.pending { color: var(--muted); } .dispState.pending::before { background: transparent; border: 2px solid var(--muted); border-radius: 50%; } /* hollow */ .dispWho { color: var(--muted); font-size: 11px; } .dispNote { border-left: 3px solid var(--gold-ink); background: var(--gold-soft); padding: 7px 10px; border-radius: 0 7px 7px 0; font-size: 12.5px; color: var(--gold-text); } .dispNote b { color: var(--gold-ink); } .dispNote.navy { border-left-color: var(--navy); background: var(--navy-soft); color: var(--navy-ink); } .dispNote.navy b { color: var(--navy); } .dispDrift { border-left: 3px solid var(--red); background: var(--red-soft); padding: 6px 10px; border-radius: 0 7px 7px 0; font-size: 12px; color: var(--red-ink); } .dispActions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .dispActions button { border: 1px solid var(--control-line); border-radius: 6px; background: var(--control); color: var(--navy); font-weight: 700; font-size: 11.5px; padding: 4px 10px; cursor: pointer; } .dispActions button:hover { border-color: var(--navy); } .dispActions button.primary { background: var(--navy); border-color: var(--navy); color: var(--on-accent); } .dispActions button.quiet { border-color: transparent; color: var(--muted); } .editedPair { font-size: 12.5px; } .editedPair .was { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--gold-ink); } .editedPair .now { color: var(--ink); font-weight: 700; } /* inline disposition form */ .dispForm { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); padding: 8px; } .dispForm label { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .dispForm textarea, .dispForm select, .dispForm input[type="text"] { width: 100%; border: 1px solid var(--line); border-radius: 6px; background: var(--control); color: var(--ink); font: 400 12.5px/1.45 var(--font); padding: 6px 8px; resize: vertical; } .dispForm textarea:focus, .dispForm select:focus, .dispForm input:focus { outline: 2px solid var(--blue); outline-offset: 0; } .dispForm .row { display: flex; gap: 6px; justify-content: flex-end; } /* ---------- artifact section ---------- */ .artifact { margin-top: 34px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); overflow: hidden; } .artifact > header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 16px 20px 14px; border-bottom: 1px solid var(--line); background: linear-gradient(125deg, rgba(244,247,249,.9), rgba(255,255,255,.96) 55%); } .artifact > header .id { font-family: var(--mono); color: var(--blue); font-size: 12px; font-weight: 600; } .artifact > header h3 { margin: 2px 0 4px; color: var(--navy); font-size: 21px; line-height: 1.15; } .artifact > header .meta { display: flex; flex-wrap: wrap; gap: 6px; } .chip { display: inline-block; border: 1px solid var(--line); border-radius: 999px; background: var(--control); padding: 2px 9px; font-size: 11px; color: var(--muted); } .chip.dim { border-color: var(--control-line); color: var(--navy); font-weight: 600; } .chip.floor { border-color: var(--clay); background: var(--clay-soft); color: var(--clay-ink); font-weight: 700; } .chip.elevated { border-color: var(--gold-ink); background: var(--gold-soft); color: var(--gold-ink); font-weight: 700; } .scoreBadge { text-align: center; min-width: 86px; } .scoreBadge b { display: block; font-size: 30px; color: var(--navy); line-height: 1; } .scoreBadge span { display: block; font-size: 10.5px; color: var(--muted); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-top: 3px; } .artBody { display: grid; grid-template-columns: minmax(0,1.06fr) minmax(0,1fr); } .artCol { padding: 16px 20px 20px; min-width: 0; } .artCol + .artCol { border-left: 1px solid var(--line); } .artCol > h4 { margin: 0 0 10px; color: var(--navy); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .artCol > h4 small { display: block; margin-top: 2px; color: var(--muted); font-weight: 500; font-size: 11px; letter-spacing: 0; text-transform: none; } /* score editor */ .scoreEditor { border: 1px solid var(--line); border-radius: 10px; background: var(--soft); padding: 10px 12px; margin-bottom: 12px; } .scoreEditorHead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; } .scoreEditorHead > span:first-child { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .scoreScale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; } .scoreOption { display: block; border: 1px solid var(--line); border-radius: 8px; background: var(--control); padding: 6px 4px; cursor: pointer; text-align: center; } .scoreOption b { display: block; color: var(--navy); font-size: 16px; line-height: 1.1; } .scoreOption small { display: block; color: var(--muted); font-size: 9.5px; margin-top: 1px; } .scoreOption:hover { border-color: var(--blue); } .scoreOption:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; } .scoreOption.on { border-color: var(--navy); background: var(--navy); } .scoreOption.on::after { content: ""; } .scoreOption.on b, .scoreOption.on small { color: var(--on-accent); } .confirmRow { display: flex; gap: 7px; align-items: flex-start; margin-top: 8px; font-size: 12.5px; color: var(--ink); cursor: pointer; } .confirmRow input { margin-top: 2px; accent-color: var(--navy); } /* editable pills */ .pill.pillEdit { display: block; cursor: pointer; } .pill.pillEdit select, .pill.pillEdit input[type="text"] { width: 100%; margin-top: 2px; border: 1px solid var(--line); border-radius: 5px; background: var(--control); color: var(--ink); font: 600 12.5px var(--font); padding: 3px 5px; } .pill.pillEdit select:focus, .pill.pillEdit input:focus { outline: 2px solid var(--blue); outline-offset: 0; } /* consultant-entered fields */ .field { margin-bottom: 12px; } .field > label { display: flex; justify-content: space-between; align-items: baseline; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; } .field .val { border: 1px solid var(--line); border-radius: 8px; background: var(--control); padding: 8px 11px; font-size: 13.5px; white-space: pre-wrap; } .field .val:empty::before { content: "—"; color: var(--muted); } .field .val.editable { cursor: text; } .field .val.editable:hover { border-color: var(--blue); } .field .val.editable:focus { outline: 2px solid var(--blue); outline-offset: 0; } .field .savedTick { color: var(--green); font-size: 10.5px; font-weight: 700; letter-spacing: 0; text-transform: none; opacity: 0; transition: opacity .18s; } .field .savedTick.show { opacity: 1; } .fieldGrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 12px; } .pill { display: block; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: var(--soft); } .pill span { display: block; color: var(--muted); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .pill b { font-size: 12.5px; color: var(--ink); font-weight: 600; overflow-wrap: break-word; } /* shared studio form controls */ .studioPanel { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 16px 18px; } .studioInput { width: 100%; border: 1px solid var(--line); border-radius: 7px; background: var(--control); color: var(--ink); font: 400 13.5px/1.45 var(--font); padding: 7px 10px; } .studioInput:focus { outline: 2px solid var(--blue); outline-offset: 0; } textarea.studioInput { resize: vertical; } .fieldHint { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; } .fieldGrid.two { grid-template-columns: 1fr 1fr; } .fieldGrid.three { grid-template-columns: 1fr 1fr 1fr; } .fieldGrid .field { margin-bottom: 0; } .quietDanger { border: 1px solid var(--line); border-radius: 6px; background: var(--control); color: var(--clay); font-weight: 700; font-size: 11.5px; padding: 4px 10px; cursor: pointer; flex: none; } .quietDanger:hover { border-color: var(--clay); } .infRow .d .studioInput { margin-top: 4px; } @media (max-width: 860px) { .fieldGrid.two, .fieldGrid.three { grid-template-columns: 1fr; } } /* report tiles */ .reportGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } .reportTile { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 14px 16px; } .reportTile.canonical { border-color: var(--navy); background: linear-gradient(150deg, var(--soft), var(--paper) 65%); } .reportTile b { display: block; color: var(--navy); font-size: 15px; margin-top: 4px; } .reportTile small { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; } .reportTile button { border: 1px solid var(--navy); border-radius: 7px; background: var(--control); color: var(--navy); font-weight: 750; font-size: 12.5px; padding: 6px 12px; cursor: pointer; flex: none; } .reportTile button:hover { background: var(--navy); color: var(--on-accent); } /* trace strip */ .trace { border-top: 1px solid var(--line); background: var(--soft); padding: 12px 20px; } .trace h5 { margin: 0 0 6px; color: var(--navy); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .trace ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; } .trace li { font-size: 12px; color: var(--muted); } .trace li b { color: var(--ink); font-weight: 600; } .trace li code { color: var(--blue); } .studioBoundary { margin-top: 30px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); padding: 12px 16px; color: var(--muted); font-size: 12.5px; } .studioBoundary b { color: var(--navy); } @media (max-width: 940px) { .studioShell { grid-template-columns: 1fr; } .rail { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); } .artBody { grid-template-columns: 1fr; } .artCol + .artCol { border-left: 0; border-top: 1px solid var(--line); } .infRow { grid-template-columns: 1fr; } .infRow > .k, .infRow > .v { border-right: 0; border-bottom: 1px solid var(--line); } .domainStats { grid-template-columns: 1fr 1fr; } } @media print { .rail, .topbar, .dispActions, .studioToast { display: none !important; } .studioShell { grid-template-columns: 1fr; } .artifact { break-inside: avoid; } body { background: #fff; } } /* Identity & correlation console (D-16). Reuses the guidepost disclosure and panel primitives; only the two grids are new. */ .consoleActionGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:10px} .consoleActionGrid form{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--paper)} .consoleActionGrid label,.consoleRunForm label{display:grid;gap:4px;color:var(--muted);font-size:11.5px;font-weight:700} .consoleActionGrid input,.consoleActionGrid select,.consoleActionGrid textarea,.consoleRunForm input,.consoleRunForm select,.consoleRunForm textarea{border:1px solid var(--control-line);border-radius:8px;background:var(--control);color:var(--ink);padding:7px 9px;font:inherit;font-size:12.5px} .consoleRunForm{display:grid;gap:10px} .consoleRunGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px} /* ── Interactive schedule (D-17) ───────────────────────────────────────── The Executive Transformation MAP as a studio page. Geometry mirrors the governed horizon scale; every colour is a token so all four palettes and print carry it without a special case. */ .schedToolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0 10px; } .schedToolbar button { border: 1px solid var(--control-line); border-radius: 7px; background: var(--control); color: var(--navy); font: 700 12px var(--font); padding: 7px 12px; cursor: pointer; } .schedToolbar button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; } .schedLegend { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11.5px; flex-wrap: wrap; } /* In a legend an is a COLOUR SWATCH, not emphasis: this sizes it to a 18x7 pill. Prose belongs in a -- an of text gets squashed into the pill and paints straight over the schedule below it. */ .schedLegend i { display: inline-block; width: 18px; height: 7px; border-radius: 4px; } .schedLegend .lgGate { background: var(--navy); } .schedLegend .lgSupp { background: var(--blue); opacity: .55; } .schedLegend .lgPos { width: 10px; height: 10px; border-radius: 50%; background: var(--green); } .schedCapacity { margin: 10px 0 0; padding: 10px 14px; border-left: 4px solid var(--clay); background: var(--clay-soft); color: var(--clay-ink); border-radius: 0 9px 9px 0; font-size: 13px; max-width: 860px; } .schedAxis { display: grid; grid-template-columns: 240px 1fr; gap: 10px; margin-top: 6px; } .schedAxisTrack { position: relative; height: 34px; } .schedAxisTrack b { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--soft); border: 1px solid var(--line); border-radius: 6px; color: var(--navy); font-size: 11px; line-height: 1.1; } .schedAxisTrack b small { color: var(--muted); font-weight: 600; font-size: 9.5px; } .schedAoLine { display: grid; grid-template-columns: 240px 1fr; margin: 2px 0 6px; } .schedAoLine b { grid-column: 2; position: relative; display: block; height: 14px; font: 600 9.5px var(--font); color: var(--gold-ink); } .schedAoLine b::before { content: ""; position: absolute; left: 37.5%; top: 0; bottom: 0; border-left: 2px dashed var(--gold); } .schedAoLine b { padding-left: calc(37.5% + 8px); } .schedLane { border: 1px solid var(--line); border-radius: 10px; background: var(--paper); margin-bottom: 10px; overflow: hidden; } .schedLane > summary { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; } .schedLane > summary::-webkit-details-marker { display: none; } .schedLane > summary b { color: var(--navy); font-size: 13.5px; } .schedLane > summary small { color: var(--muted); font-size: 11px; margin-left: auto; } .schedLane[open] > summary { border-bottom: 1px solid var(--line); background: var(--soft); } .schedLaneToggle { color: var(--muted); transition: transform .12s; } .schedLane[open] .schedLaneToggle { transform: rotate(90deg); } .schedRole { border-radius: 999px; padding: 1px 9px; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .schedRole.constraint { background: var(--clay-soft); color: var(--clay-ink); border: 1px solid var(--clay); } .schedRole.lever { background: var(--green-soft); color: var(--green-ink); border: 1px solid var(--green); } .schedRows { padding: 8px 14px 12px; } .schedStream { margin-bottom: 6px; } .schedRow { display: grid; grid-template-columns: 226px 1fr; gap: 10px; align-items: center; } .schedName { display: flex; gap: 7px; align-items: baseline; text-align: left; border: 0; background: none; color: var(--ink); font: 500 12.5px var(--font); padding: 3px 4px; border-radius: 6px; cursor: pointer; } .schedName:hover, .schedName:focus-visible { background: var(--soft); outline: none; } .schedName:focus-visible { outline: 2px solid var(--blue); } .schedId { color: var(--blue); font: 700 11px var(--mono); } .schedLabel { line-height: 1.25; } .schedGateChip { margin-left: 6px; border-radius: 999px; background: var(--navy-soft); color: var(--navy-ink); font-size: 9.5px; font-weight: 800; padding: 1px 7px; } .schedTrack { position: relative; height: 16px; background: var(--soft); border-radius: 8px; } .schedTrack i { position: absolute; top: 3px; height: 10px; border-radius: 5px; } .schedTrack i.gate { background: var(--navy); } .schedTrack i.supp { background: var(--blue); opacity: .55; } .schedTrack i.pos { width: 12px; height: 12px; top: 2px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px var(--paper); } .schedTrack em { position: absolute; right: 8px; top: 0; line-height: 16px; color: var(--muted); font-size: 9.5px; font-style: normal; } .schedPosition .schedPositionLabel { color: var(--green-ink); font-weight: 700; font-size: 11px; cursor: default; } .schedPosition .schedTrack { background: var(--green-soft); } .schedArRow { display: flex; flex-wrap: wrap; gap: 5px; margin: 3px 0 2px 236px; } .schedArRow.schedLoose { margin-left: 0; padding-top: 6px; border-top: 1px dashed var(--line); } .schedArLabel { color: var(--muted); font-size: 10.5px; font-weight: 700; align-self: center; } .schedAr, .schedArDemo { display: inline-flex; align-items: baseline; gap: 4px; border: 1px solid var(--control-line); border-radius: 999px; background: var(--control); color: var(--navy); font: 700 10.5px var(--mono); padding: 2px 9px; text-decoration: none; } .schedAr:hover, .schedAr:focus-visible { border-color: var(--blue); outline: none; } .schedAr small, .schedArDemo small { color: var(--gold-ink); font-size: 9px; } .schedDep { margin: 2px 0 4px 236px; color: var(--muted); font-size: 10.5px; } .schedPreview { position: sticky; bottom: 12px; margin-top: 14px; border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 0 10px 10px 0; background: var(--paper); padding: 10px 14px; box-shadow: 0 6px 18px rgba(0,0,0,.06); } .schedPreview > span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .schedPreview h4 { margin: 2px 0 4px; color: var(--navy); font-size: 13px; } .schedPreview p { margin: 0; color: var(--ink); font-size: 12px; } .schedPreview .schedAttribution { margin-top: 4px; color: var(--muted); font-size: 11px; } .schedDrawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 92vw); background: var(--paper); border-left: 1px solid var(--line); box-shadow: -12px 0 32px rgba(0,0,0,.14); z-index: 40; display: flex; flex-direction: column; } .schedDrawer > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); background: var(--soft); } .schedDrawer h2 { margin: 2px 0 4px; color: var(--navy); font-size: 17px; line-height: 1.2; } .schedDrawerMeta { margin: 0; color: var(--muted); font-size: 11.5px; } .schedDrawer > header button { border: 1px solid var(--control-line); border-radius: 7px; background: var(--control); color: var(--navy); font-size: 13px; padding: 5px 10px; cursor: pointer; } .schedDrawer > header button:focus-visible { outline: 2px solid var(--blue); } .schedDrawerBody { padding: 14px 18px 20px; overflow-y: auto; } .schedOutcome { color: var(--ink); font-size: 13px; } .schedGateNote { padding: 8px 12px; background: var(--navy-soft); color: var(--navy-ink); border-radius: 8px; font-size: 12px; } .schedDrawerCols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; } .schedDrawerCols span { display: block; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .schedDrawerCols p { margin: 3px 0 0; color: var(--ink); font-size: 12px; } .schedSectionLabel { display: block; margin: 12px 0 4px; color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .schedRelated { list-style: none; margin: 0; padding: 0; } .schedRelated li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--line); } .schedRelated a { color: var(--navy); text-decoration: none; font-size: 12.5px; } .schedRelated a:hover { color: var(--blue); } .schedRelated small { color: var(--muted); font-size: 11px; white-space: nowrap; } .schedTeam { margin: 0; color: var(--ink); font-size: 12px; } .schedDrawerBody ol, .schedDrawerBody ul { margin: 0; padding-left: 18px; color: var(--ink); font-size: 12.5px; } @media (max-width: 900px) { .schedRow { grid-template-columns: 1fr; gap: 2px; } .schedArRow, .schedDep { margin-left: 0; } .schedAxis, .schedAoLine { grid-template-columns: 0 1fr; } .schedDrawerCols { grid-template-columns: 1fr; } } @media print { .schedDrawer, .schedPreview, .schedToolbar button { display: none; } .schedLane { break-inside: avoid; } } /* ── People swim lane (D-18): contracted scopes on the same horizon axis ── */ .schedPeople { margin-top: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 16px 18px; } .schedPplHead h2 { margin: 0 0 6px; color: var(--navy); font-size: 17px; } .schedPplHead p { margin: 0 0 14px; color: var(--ink); font-size: 13px; max-width: 900px; } .schedPplLane { display: grid; grid-template-columns: 240px 1fr; gap: 10px; align-items: center; margin-bottom: 10px; } .schedPplName b { display: block; color: var(--navy); font-size: 12.5px; line-height: 1.25; } .schedPplName small { display: block; color: var(--muted); font-size: 10.5px; line-height: 1.35; margin-top: 2px; } .schedPplTrack { height: 26px; } .schedPplTrack i { position: absolute; top: 3px; height: 20px; border-radius: 6px; display: flex; align-items: center; overflow: hidden; } .schedPplTrack i b { color: var(--on-accent); font-size: 9.5px; font-weight: 700; padding: 0 8px; white-space: nowrap; } .schedPplTrack .ppl-steady { background: var(--navy); } .schedPplTrack .ppl-surge { background: var(--clay); } .schedPplTrack .ppl-handoff { background: var(--clay-soft); border: 1px dashed var(--clay); } .schedPplTrack .ppl-handoff b { color: var(--clay-ink); } .schedPplTrack .ppl-build { background: var(--green-soft); border: 1px solid var(--green); } .schedPplTrack .ppl-build b { color: var(--green-ink); } .schedPplTrack .ppl-run { background: var(--green); } .schedPplTrack .ppl-legacy { background: var(--soft); border: 1px solid var(--control-line); } .schedPplTrack .ppl-legacy b { color: var(--muted); } .schedPplTrack .ppl-winddown { background: transparent; border: 1px dashed var(--control-line); } .schedPplTrack .ppl-winddown b { color: var(--muted); } .schedPplBoundary { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 11.5px; } .schedPplBoundary b { color: var(--navy-ink); } .schedPplAttribution { margin: 8px 0 0; padding: 9px 12px; background: var(--navy-soft); border-radius: 8px; color: var(--navy-ink); font-size: 11.5px; line-height: 1.5; } .schedPplAttribution i { font-style: italic; } @media (max-width: 900px) { .schedPplLane { grid-template-columns: 1fr; gap: 3px; } } @media print { .schedPeople { break-inside: avoid; } } /* ── Acquisition overlay (D-19): the join decision on the lanes ────────── */ .schedAcq { border-radius: 999px; padding: 1px 9px; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; } .schedAcq.inherit { background: var(--green-soft); color: var(--green-ink); border: 1px solid var(--green); } .schedAcq.accelerate { background: var(--gold-soft); color: var(--gold-ink); border: 1px solid var(--gold); } .schedAcq.yours { background: var(--soft); color: var(--muted); border: 1px solid var(--control-line); } .schedAcqLegend { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 2px 0 8px; } .schedAcqSrc { color: var(--muted); font-size: 10.5px; font-style: normal; } .schedAcqRow { margin: 2px 0 10px; padding: 8px 12px; border-radius: 8px; border-left: 4px solid var(--control-line); background: var(--soft); } .schedAcqRow.inherit { border-left-color: var(--green); background: var(--green-soft); } .schedAcqRow.accelerate { border-left-color: var(--gold); background: var(--gold-soft); } .schedAcqKind { display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--navy-ink); } .schedAcqRow.inherit .schedAcqKind { color: var(--green-ink); } .schedAcqRow.accelerate .schedAcqKind { color: var(--gold-ink); } .schedAcqRow p { margin: 3px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink); } @media print { .schedAcqRow { break-inside: avoid; } } /* ── PUBLIC FACE LAYOUT ─────────────────────────────────────────────────── Shared by the four public pages so the composition lives in one place and a page ships as content. Every class is pf-prefixed: the pages load this same sheet as the workbench, and an unprefixed .card or .row would inherit workbench rules that were never meant for them. Tints are color-mix off the tokens rather than literal rgba, so the whole surface follows the palette from one block. */ [data-public-face="blueprint"] body { margin: 0; color: var(--ink); font: 400 15px/1.6 var(--font); background: linear-gradient(color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px), var(--page); background-size: 34px 34px; } [data-public-face="blueprint"] h1, [data-public-face="blueprint"] h2, [data-public-face="blueprint"] h3, [data-public-face="blueprint"] .pfSerif { font-family: var(--display); font-weight: 500; } [data-public-face="blueprint"] a { color: inherit; text-decoration: none; } .pfWrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; } .pfHeader { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--page) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); } .pfNav { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 17px 0; } .pfBrand { display: flex; align-items: center; gap: 12px; } .pfMark { width: 42px; height: 42px; border: 1.5px solid var(--blue); border-radius: 50%; position: relative; display: grid; place-items: center; flex: none; } .pfMark::before, .pfMark::after { content: ""; position: absolute; background: var(--blue); } .pfMark::before { width: 1.5px; height: 30px; } .pfMark::after { height: 1.5px; width: 30px; } .pfMark i { width: 14px; height: 14px; border: 1.5px solid var(--green); border-radius: 50%; background: var(--paper); z-index: 1; } .pfBrand > span:last-child { display: block; } .pfType { display: block; font-family: var(--font); font-size: 26px; font-weight: 700; line-height: .95; letter-spacing: -.02em; } .pfType b { color: var(--green); font-weight: 700; } .pfSub { display: block; font-size: 9px; letter-spacing: .18em; font-weight: 700; color: var(--muted); line-height: 1.3; text-transform: uppercase; } .pfLinks { display: flex; gap: 22px; align-items: center; font-size: 14px; color: var(--muted); } .pfLinks a:hover, .pfLinks a.on { color: var(--ink); } .pfBtn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 17px; border-radius: 7px; border: 1px solid currentColor; font-weight: 600; font-size: 14px; } .pfBtn.solid { background: var(--navy); color: var(--on-accent); border-color: var(--navy); } .pfBtn.go { background: var(--green); color: var(--on-accent); border-color: var(--green); } .pfEyebrow { font-size: 12px; letter-spacing: .18em; font-weight: 700; color: var(--green); margin-bottom: 13px; text-transform: uppercase; font-family: var(--font); } .pfKicker { font-size: 15px; font-weight: 600; letter-spacing: .04em; color: var(--blue); font-family: var(--font); } .pfBadge { display: inline-block; padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 999px; font-size: 11px; letter-spacing: .11em; font-weight: 700; color: var(--green); font-family: var(--font); text-transform: uppercase; } .pfHero { display: grid; grid-template-columns: 1.02fr .98fr; gap: 52px; align-items: center; padding: 58px 0 52px; } .pfHero h1 { font-size: clamp(46px, 5.6vw, 78px); line-height: .98; letter-spacing: -.035em; margin: 0 0 19px; } .pfLead { font-size: 18px; line-height: 1.68; color: var(--muted); margin: 0; } .pfCtas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 27px; align-items: center; } .pfBox { position: relative; border: 1px solid color-mix(in srgb, var(--blue) 20%, transparent); border-radius: 18px; padding: 22px; background: linear-gradient(color-mix(in srgb, var(--blue) 5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--blue) 5%, transparent) 1px, transparent 1px), var(--paper); background-size: 26px 26px, 26px 26px, auto; box-shadow: var(--shadow-card); overflow: hidden; } .pfBox svg { display: block; width: 100%; height: auto; } .pfSection { padding: 72px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); } .pfSection h2 { font-size: clamp(32px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -.025em; margin: 0 0 15px; max-width: 22ch; } .pfSection h2.wide { max-width: 34ch; } .pfSection > p { max-width: 74ch; } .pfGrid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 28px; } .pfGrid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; } .pfGrid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; } .pfCard { background: var(--paper); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 14px; padding: 23px; box-shadow: var(--shadow-card); } .pfCard h3 { font-size: 24px; margin: 10px 0 9px; line-height: 1.15; } .pfCard p { margin: 0; color: var(--muted); line-height: 1.58; } .pfCard em { display: block; font-style: normal; font-family: var(--font); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--green); } .pfNum { font-family: var(--display); font-size: 42px; line-height: 1; color: var(--green); } /* Glyphs, untiled. The tinted rounded tile is what reads as a product page; a bare line glyph in ink reads as a printed document, which is the register this surface wants. */ .pfIco { width: 22px; height: 22px; display: block; color: var(--blue); margin-bottom: 12px; } .pfSplit { display: grid; grid-template-columns: .78fr 1.22fr; gap: 42px; align-items: center; } .pfStacked { display: grid; gap: 12px; } .pfLayer { padding: 18px 22px; border: 1px solid currentColor; border-radius: 9px; background: color-mix(in srgb, var(--paper) 62%, transparent); transform: skewX(-4deg); box-shadow: 0 13px 28px color-mix(in srgb, var(--ink) 6%, transparent); font-family: var(--font); font-size: 14px; } .pfRail { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 30px; background: var(--paper); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 15px; padding: 25px 12px 15px; box-shadow: var(--shadow-card); } .pfStep { text-align: center; position: relative; padding: 34px 10px 10px; } .pfStep::before { content: ""; position: absolute; top: 10px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border: 2px solid var(--blue); border-radius: 50%; background: var(--paper); } .pfStep:not(:last-child)::after { content: ""; position: absolute; left: 50%; right: -50%; top: 17px; border-top: 2px dashed color-mix(in srgb, var(--blue) 40%, transparent); } .pfStep small { display: block; color: var(--green); font-weight: 700; letter-spacing: .08em; font-family: var(--font); font-size: 12px; } .pfStep b { display: block; margin: 5px 0; font-family: var(--display); font-size: 17px; font-weight: 600; } .pfStep p { font-size: 13px; line-height: 1.45; color: var(--muted); margin: 0; } .pfTable { display: grid; gap: 10px; margin-top: 26px; } .pfRow { display: grid; grid-template-columns: 180px 1fr; gap: 18px; background: var(--paper); border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 10px; padding: 16px 18px; align-items: baseline; } .pfRow b { color: var(--blue); font-family: var(--font); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; } .pfRow span { color: var(--muted); line-height: 1.55; } .pfRow .pfRowTitle { display: block; color: var(--ink); font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: 0; text-transform: none; margin-bottom: 3px; } .pfCallout { background: linear-gradient(145deg, var(--navy), color-mix(in srgb, var(--navy) 78%, black)); color: var(--on-accent); border-radius: 18px; padding: 34px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; align-items: center; } .pfCallout h2 { margin: 0 0 10px; color: var(--on-accent); } .pfCallout p { color: var(--on-accent-dim); line-height: 1.65; margin: 0; } .pfCallout .pfEyebrow { color: var(--on-accent-dim); } .pfFilm { width: 100%; height: auto; display: block; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); background: var(--navy); box-shadow: var(--shadow-card); } .pfNote { font-size: 13px; color: var(--muted); margin-top: 12px; } .pfFooter { padding: 30px 0 50px; color: var(--muted); font-size: 13px; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; } @media (max-width: 900px) { .pfHero, .pfSplit, .pfCallout { grid-template-columns: 1fr; } .pfGrid2, .pfGrid3, .pfGrid4 { grid-template-columns: 1fr; } .pfRail { grid-template-columns: repeat(2, 1fr); } .pfStep:not(:last-child)::after { display: none; } .pfLinks a:not(.pfBtn) { display: none; } .pfRow { grid-template-columns: 1fr; } } /* ── THE OVERLAY FIGURE ─────────────────────────────────────────────────── The annotated version of the stack: each plane names itself in the drawing, the way a real blueprint annotates, and hovering a plane brings up the one line that says what it is for. The names are always visible -- hover adds detail, it is never the only way to read the figure. */ .geometry.annotated .geoPlane { transition: opacity .18s ease; } .geometry.annotated:hover .geoPlane { opacity: .55; } .geometry.annotated .geoPlane:hover { opacity: 1; } .geometry.annotated .geoFill { transition: fill-opacity .18s ease; } .geometry.annotated .geoPlane:hover .geoFill { fill-opacity: .32; } .geometry.annotated .geoLead { stroke-width: 1.2; stroke-dasharray: 3 3; } .geometry.annotated .geoName { font: 600 13px var(--font); letter-spacing: .01em; } .geometry.annotated .geoDetail { font: 400 12px var(--font); fill: var(--muted); opacity: 0; transition: opacity .18s ease; } .geometry.annotated .geoPlane:hover .geoDetail { opacity: 1; } /* Touch and reduced-motion: there is no hover, so the detail simply shows. */ @media (hover: none) { .geometry.annotated:hover .geoPlane { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .geometry.annotated .geoPlane, .geometry.annotated .geoFill, .geometry.annotated .geoDetail { transition: none; } } /* cloud-waypoint, said quietly. The runway was already a dashed route with nodes on it; the last node becomes the target waypoint you are navigating to, so the metaphor in the domain name shows up in the drawing rather than only in the copy. Same device as the route across Overlay 1. */ .pfStep:last-child::before { border-color: var(--green); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px color-mix(in srgb, var(--green) 55%, transparent); } .pfStep:last-child small { color: var(--green); } /* ── THE RESEARCH FIGURE ────────────────────────────────────────────────── The hero used to carry the same overlay stack that the map section explains, which meant one figure making one argument twice. This one makes the earlier argument instead: standards, requirements, provider practice and the peer programs converge into the single researched road, which runs to a waypoint. Plan view rather than isometric, so the two figures never read as duplicates. */ .researchFig { display: block; width: 100%; height: auto; } .researchFig .rfName { font: 600 14px var(--font); fill: var(--ink); } .researchFig .rfDetail { font: 400 11.5px var(--font); fill: var(--muted); } .researchFig .rfRoad { font: 600 12px var(--font); fill: var(--navy); letter-spacing: .1em; text-transform: uppercase; } /* The figure walks itself. Charlie: highlight one plane at a time, two seconds each, with its subtitle -- so a reader who never hovers still sees all four arguments. Four planes x 2s is an 8s loop; each plane runs the same keyframes offset by a negative delay, which is why there is one animation here and not four. Hovering cancels the cycle outright rather than pausing it, so the pointer always wins and never lands mid-fade. */ @keyframes geoCyclePlane { 0%, 22% { opacity: 1; } 28%, 100% { opacity: .45; } } @keyframes geoCycleFill { 0%, 22% { fill-opacity: .32; } 28%, 100% { fill-opacity: .14; } } @keyframes geoCycleText { 0%, 22% { opacity: 1; } 28%, 100% { opacity: 0; } } .geometry.annotated .geoPlane { animation: geoCyclePlane 8s linear infinite; } .geometry.annotated .geoFill { animation: geoCycleFill 8s linear infinite; } .geometry.annotated .geoDetail { animation: geoCycleText 8s linear infinite; } /* Base first, then overlays 1, 2, 3 -- bottom of the stack upward. */ .geometry.annotated .geoPlane:nth-of-type(1), .geometry.annotated .geoPlane:nth-of-type(1) .geoFill, .geometry.annotated .geoPlane:nth-of-type(1) .geoDetail { animation-delay: 0s; } .geometry.annotated .geoPlane:nth-of-type(2), .geometry.annotated .geoPlane:nth-of-type(2) .geoFill, .geometry.annotated .geoPlane:nth-of-type(2) .geoDetail { animation-delay: -6s; } .geometry.annotated .geoPlane:nth-of-type(3), .geometry.annotated .geoPlane:nth-of-type(3) .geoFill, .geometry.annotated .geoPlane:nth-of-type(3) .geoDetail { animation-delay: -4s; } .geometry.annotated .geoPlane:nth-of-type(4), .geometry.annotated .geoPlane:nth-of-type(4) .geoFill, .geometry.annotated .geoPlane:nth-of-type(4) .geoDetail { animation-delay: -2s; } .geometry.annotated:hover .geoPlane, .geometry.annotated:hover .geoFill, .geometry.annotated:hover .geoDetail { animation: none; } /* No motion: no cycle, and every subtitle simply stays up. */ @media (prefers-reduced-motion: reduce) { .geometry.annotated .geoPlane, .geometry.annotated .geoFill, .geometry.annotated .geoDetail { animation: none; } .geometry.annotated .geoDetail { opacity: 1; } } /* A section's own layer, lifted out of the stack at the top of the page. Same coordinates, cropped by viewBox rather than redrawn, so the slice and the stack cannot drift apart. The badge is the tie-in: it is the one the reader already met on the full figure. */ .pfSliceFig { margin: 26px 0 0; padding: 0; max-width: 720px; } .pfSliceFig .pfSlice { display: block; width: 100%; height: auto; } .pfSliceFig figcaption { margin-top: 8px; font-size: 12.5px; color: var(--muted); }