/* ===================================================================== Vantia Insight — design mockup stylesheet Everything adjustable lives in the token block directly below. Palette and typography come from BRAND_IDENTITY.md; nothing is invented there. ===================================================================== */ /* ---------- 1. Tokens ------------------------------------------------ */ :root { /* Brand palette, light backgrounds */ --brand-paper: #FBFAF7; --brand-night: #101A22; --brand-ink: #16242F; --brand-slate: #43616F; --brand-mist: #93A7B1; --brand-muted: #DCE2E5; --brand-origin: #0E7C6B; /* the origin point in the mark. Used nowhere else. */ --brand-wordmark-2: #5C7383; /* "Insight" */ --brand-strapline: #7C8F9A; /* Semantic colour, light theme (dark redefinitions are further down) */ --bg: var(--brand-paper); --text: var(--brand-ink); --text-2: var(--brand-slate); /* secondary prose, 6:1 on a panel */ --text-3: #52677A; /* labels and captions, 5:1 on a panel */ --link: #2F5060; --line: rgba(22, 36, 47, 0.13); --line-strong: rgba(22, 36, 47, 0.28); --panel: rgba(255, 255, 255, 0.68); /* glass tint; the scrim that makes contrast deterministic */ --panel-strong: rgba(255, 255, 255, 0.88); --panel-solid: #FFFFFF; --panel-border: rgba(22, 36, 47, 0.10); --panel-highlight: rgba(255, 255, 255, 0.65); --hover: rgba(22, 36, 47, 0.045); --active: rgba(22, 36, 47, 0.08); --mark-fill: var(--brand-ink); /* fills for glyphs (confidence segments, status discs) */ --mark-empty: rgba(22, 36, 47, 0.10); --logo-1: var(--brand-ink); /* the mark's three layers and its muted state, light */ --logo-2: var(--brand-slate); --logo-3: var(--brand-mist); --logo-muted: var(--brand-muted); --logo-origin: var(--brand-origin); --marker-new: var(--brand-slate); /* the "changed recently" dot */ --ambient-a: rgba(147, 167, 177, 0.42); --ambient-b: rgba(67, 97, 111, 0.16); --ambient-c: rgba(220, 226, 229, 0.9); --shadow: 0 1px 2px rgba(22, 36, 47, 0.05), 0 18px 40px -22px rgba(22, 36, 47, 0.28); --shadow-pop: 0 2px 6px rgba(22, 36, 47, 0.08), 0 24px 48px -16px rgba(22, 36, 47, 0.35); /* Shape and depth */ --radius: 16px; --radius-sm: 9px; --radius-pill: 999px; --blur: 20px; --content-width: 1140px; --measure: 66ch; /* Type */ --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif; --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", Consolas, "Courier New", monospace; --fs-0: 0.75rem; /* 12px captions, eyebrows */ --fs-1: 0.875rem; /* 14px meta */ --fs-2: 0.9375rem; /* 15px body */ --fs-3: 1.0625rem; /* 17px row titles */ --fs-4: 1.25rem; /* 20px section heads */ --fs-5: 1.625rem; /* 26px page titles */ --fs-6: 2.25rem; /* 36px display */ --fs-7: 3rem; /* 48px landing display */ --lh-body: 1.55; --track: 0.08em; /* letter-spacing for uppercase labels */ /* Motion */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --t-fast: 140ms; --t-med: 260ms; color-scheme: light; } /* Dark theme: the system preference unless an explicit choice is stamped on */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: var(--brand-night); --text: #EDF1F3; --text-2: #A7BAC4; --text-3: #9FB2BC; --link: #B7C9D2; --line: rgba(237, 241, 243, 0.12); --line-strong: rgba(237, 241, 243, 0.28); --panel: rgba(16, 26, 34, 0.62); --panel-strong: rgba(16, 26, 34, 0.86); --panel-solid: #16222B; --panel-border: rgba(237, 241, 243, 0.10); --panel-highlight: rgba(237, 241, 243, 0.08); --hover: rgba(237, 241, 243, 0.05); --active: rgba(237, 241, 243, 0.09); --mark-fill: #EDF1F3; --mark-empty: rgba(237, 241, 243, 0.14); --logo-1: #EDF1F3; --logo-2: #A7BAC4; --logo-3: #5B7482; --logo-muted: #2E3F49; --logo-origin: #2FB39C; --marker-new: #A7BAC4; --ambient-a: rgba(91, 116, 130, 0.42); --ambient-b: rgba(167, 186, 196, 0.10); --ambient-c: rgba(46, 63, 73, 0.9); --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 40px -22px rgba(0, 0, 0, 0.6); --shadow-pop: 0 2px 6px rgba(0, 0, 0, 0.35), 0 24px 48px -16px rgba(0, 0, 0, 0.7); color-scheme: dark; } } :root[data-theme="dark"] { --bg: var(--brand-night); --text: #EDF1F3; --text-2: #A7BAC4; --text-3: #9FB2BC; --link: #B7C9D2; --line: rgba(237, 241, 243, 0.12); --line-strong: rgba(237, 241, 243, 0.28); --panel: rgba(16, 26, 34, 0.62); --panel-strong: rgba(16, 26, 34, 0.86); --panel-solid: #16222B; --panel-border: rgba(237, 241, 243, 0.10); --panel-highlight: rgba(237, 241, 243, 0.08); --hover: rgba(237, 241, 243, 0.05); --active: rgba(237, 241, 243, 0.09); --mark-fill: #EDF1F3; --mark-empty: rgba(237, 241, 243, 0.14); --logo-1: #EDF1F3; --logo-2: #A7BAC4; --logo-3: #5B7482; --logo-muted: #2E3F49; --logo-origin: #2FB39C; --marker-new: #A7BAC4; --ambient-a: rgba(91, 116, 130, 0.42); --ambient-b: rgba(167, 186, 196, 0.10); --ambient-c: rgba(46, 63, 73, 0.9); --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 40px -22px rgba(0, 0, 0, 0.6); --shadow-pop: 0 2px 6px rgba(0, 0, 0, 0.35), 0 24px 48px -16px rgba(0, 0, 0, 0.7); color-scheme: dark; } /* Reduced transparency and increased contrast: the operating system setting or the in-page toggle. Panels go solid; the ambient background is removed; lines strengthen. */ @media (prefers-reduced-transparency: reduce) { :root:not([data-transparency="full"]) { --panel: var(--panel-solid); --panel-strong: var(--panel-solid); --blur: 0px; --ambient-a: transparent; --ambient-b: transparent; --ambient-c: transparent; } } :root[data-transparency="reduce"] { --panel: var(--panel-solid); --panel-strong: var(--panel-solid); --blur: 0px; --ambient-a: transparent; --ambient-b: transparent; --ambient-c: transparent; } @media (prefers-contrast: more) { :root:not([data-contrast="normal"]) { --panel: var(--panel-solid); --panel-strong: var(--panel-solid); --blur: 0px; --text-2: var(--text); --text-3: var(--text); --line: var(--line-strong); --panel-border: var(--line-strong); --mark-empty: var(--line-strong); } } :root[data-contrast="more"] { --panel: var(--panel-solid); --panel-strong: var(--panel-solid); --blur: 0px; --text-2: var(--text); --text-3: var(--text); --line: var(--line-strong); --panel-border: var(--line-strong); --mark-empty: var(--line-strong); } /* ---------- 2. Base ---------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-2); line-height: var(--lh-body); font-feature-settings: "kern", "liga"; min-height: 100vh; } h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; line-height: 1.2; margin: 0; text-wrap: balance; } h1 { font-size: var(--fs-5); } h2 { font-size: var(--fs-4); } h3 { font-size: var(--fs-3); } p { margin: 0 0 0.85em; max-width: var(--measure); } a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.15em; } a:hover { text-decoration-thickness: 2px; } button { font: inherit; color: inherit; } img, svg { max-width: 100%; } ul, ol { margin: 0; padding: 0; list-style: none; } code, .mono { font-family: var(--font-mono); font-size: 0.92em; } .num, time, .date { font-variant-numeric: tabular-nums; } :focus-visible { outline: 2px solid var(--text-2); outline-offset: 2px; border-radius: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 8px; top: -60px; background: var(--panel-solid); color: var(--text); padding: 8px 12px; border-radius: var(--radius-sm); z-index: 100; } .skip-link:focus { top: 8px; } .eyebrow { font-size: var(--fs-0); text-transform: uppercase; letter-spacing: var(--track); color: var(--text-3); font-weight: 500; } .muted { color: var(--text-2); } .small { font-size: var(--fs-1); } .measure { max-width: var(--measure); } .nowrap { white-space: nowrap; } .stack > * + * { margin-top: 0.75rem; } .stack-lg > * + * { margin-top: 1.5rem; } .cluster { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; } .spread { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; } .divider { border: 0; border-top: 1px solid var(--line); margin: 1.25rem 0; } [hidden] { display: none !important; } /* ---------- 2b. Motion, depth and finish ------------------------------ */ /* The interface should feel machined: things arrive in order, surfaces catch light, and moving between views is a dissolve rather than a jump. All of it stops under reduce-motion. */ :root { --spring: cubic-bezier(.22, 1, .28, 1); --sheen: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sheen: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.10) 50%, transparent 62%); } } :root[data-theme="dark"] { --sheen: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.10) 50%, transparent 62%); } /* Entrance: visible at rest, animated only on the way in. */ .rise.risen { animation: rise .7s var(--spring) both; } @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* A hairline of light along the top edge of every glass panel. */ .panel, .finding { position: relative; } .panel::after, .finding::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(60% 120% at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.16), transparent 62%); opacity: 0; transition: opacity var(--t-med) var(--ease); } @media (hover: hover) { .panel:hover::after, .finding:hover::after { opacity: 1; } } :root[data-transparency="reduce"] .panel::after, :root[data-contrast="more"] .panel::after, :root[data-transparency="reduce"] .finding::after, :root[data-contrast="more"] .finding::after { display: none; } /* Panels answer the pointer very slightly. */ .tilt { transition: transform var(--t-med) var(--spring), box-shadow var(--t-med) var(--ease); } @media (hover: hover) and (pointer: fine) { .tilt:hover { transform: translate3d(var(--tx, 0), calc(var(--ty, 0px) - 2px), 0); } } /* Route changes cross-fade where the browser supports it. Same-document transitions are started from the script, so no cross-document rule is declared here. */ ::view-transition-old(root) { animation: vt-out .22s ease both; } ::view-transition-new(root) { animation: vt-in .32s var(--spring) both; } @keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } } @keyframes vt-in { from { opacity: 0; transform: translateY(10px); } } @media (prefers-reduced-motion: reduce) { .rise.risen { animation: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* ---------- 3. Ambient background ------------------------------------ */ .ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(60vw 45vh at 8% 8%, var(--ambient-a), transparent 60%), radial-gradient(50vw 40vh at 92% 20%, var(--ambient-b), transparent 60%), radial-gradient(70vw 50vh at 50% 100%, var(--ambient-c), transparent 65%), var(--bg); } /* Three displaced strata, the mark at page scale, barely there. */ .ambient::before, .ambient::after, .ambient .stratum { content: ""; position: absolute; left: 0; right: 0; height: 22vh; border-radius: 999px; background: var(--ambient-b); filter: blur(60px); opacity: 0.55; } .ambient::before { top: 12vh; left: 18vw; right: 14vw; animation: drift-a 34s ease-in-out infinite alternate; } .ambient .stratum { top: 42vh; left: 4vw; right: 34vw; animation: drift-b 41s ease-in-out infinite alternate; } .ambient::after { top: 72vh; left: 30vw; right: 2vw; animation: drift-c 47s ease-in-out infinite alternate; } @keyframes drift-a { to { transform: translate3d(4vw, -3vh, 0) scaleX(1.06); } } @keyframes drift-b { to { transform: translate3d(-5vw, 4vh, 0) scaleX(1.1); } } @keyframes drift-c { to { transform: translate3d(3vw, -5vh, 0) scaleX(.94); } } @media (prefers-reduced-motion: reduce) { .ambient::before, .ambient .stratum, .ambient::after { animation: none; } } /* ---------- 4. Glass panels ------------------------------------------ */ .panel { background: var(--panel); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.15); backdrop-filter: blur(var(--blur)) saturate(1.15); border: 1px solid var(--panel-border); border-radius: var(--radius); box-shadow: var(--shadow), inset 0 1px 0 var(--panel-highlight); } .panel-strong { background: var(--panel-strong); } .panel-pad { padding: 1.25rem 1.5rem; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .panel { background: var(--panel-strong); } } /* ---------- 5. Header, navigation, footer ---------------------------- */ .site-header { position: sticky; top: 0; z-index: 20; background: var(--panel); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.15); backdrop-filter: blur(var(--blur)) saturate(1.15); border-bottom: 1px solid var(--panel-border); } .site-header .inner { max-width: var(--content-width); margin: 0 auto; padding: 0.6rem 1.25rem; display: flex; align-items: center; gap: 1.25rem; } .brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text); } .brand svg { width: 34px; height: 34px; flex: none; } .brand .wordmark { font-family: var(--font-serif); font-weight: 500; font-size: 1.2rem; letter-spacing: -0.005em; white-space: nowrap; } .brand .wordmark span { color: var(--brand-wordmark-2); } :root[data-theme="dark"] .brand .wordmark span { color: #9FB2BC; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand .wordmark span { color: #9FB2BC; } } /* The navigation never reflows: every item keeps its width whether it is the current page or not, and the row does not scroll itself when a link is focused. */ .nav { display: flex; gap: 0.25rem; margin-left: 0.5rem; overflow: visible; } .nav a { color: var(--text-2); text-decoration: none; padding: 0.45rem 0.7rem; border-radius: var(--radius-pill); font-size: var(--fs-1); font-weight: 500; white-space: nowrap; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .nav a:hover { background: var(--hover); color: var(--text); } .nav a[aria-current="page"] { background: var(--active); color: var(--text); } .header-tools { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; } .asof { font-size: var(--fs-1); color: var(--text-3); white-space: nowrap; } .site-footer { max-width: var(--content-width); margin: 3rem auto 2rem; padding: 0 1.25rem; color: var(--text-3); font-size: var(--fs-1); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center; } .site-footer .cluster { gap: 0.25rem 0.75rem; } /* ---------- 6. Page structure ---------------------------------------- */ .page { max-width: var(--content-width); margin: 0 auto; padding: 1.75rem 1.25rem 2rem; } .page-head { margin-bottom: 1.25rem; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1.5rem; } .page-head .lede { color: var(--text-2); max-width: var(--measure); margin: 0.35rem 0 0; } .crumbs { font-size: var(--fs-1); color: var(--text-3); margin-bottom: 0.5rem; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; } .crumbs a { color: var(--text-2); text-decoration: none; } .crumbs a:hover { text-decoration: underline; } .crumbs .sep { opacity: 0.6; } .section { margin-top: 1.5rem; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; } .section-head h2 { font-size: var(--fs-4); } .section-head .count { color: var(--text-3); font-size: var(--fs-1); } .two-col { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 1.25rem; align-items: start; } @media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } } /* ---------- 7. Controls ---------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--panel-strong); color: var(--text); cursor: pointer; font-size: var(--fs-1); font-weight: 500; text-decoration: none; transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .btn:hover { background: var(--hover); } .btn-primary { background: var(--text); color: var(--bg); border-color: var(--text); } .btn-primary:hover { background: var(--text-2); border-color: var(--text-2); } .btn-quiet { border-color: transparent; background: transparent; color: var(--text-2); } .btn-quiet:hover { background: var(--hover); color: var(--text); } .seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 2px; background: var(--panel-strong); } .seg button { border: 0; background: transparent; padding: 0.35rem 0.8rem; border-radius: var(--radius-pill); font-size: var(--fs-1); font-weight: 500; color: var(--text-2); cursor: pointer; } .seg button[aria-pressed="true"] { background: var(--text); color: var(--bg); } .seg button:hover:not([aria-pressed="true"]) { background: var(--hover); color: var(--text); } .input { font: inherit; font-size: var(--fs-1); color: var(--text); background: var(--panel-strong); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 0.45rem 0.9rem; min-width: 14rem; } .input::placeholder { color: var(--text-3); } .chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.65rem; border-radius: var(--radius-pill); border: 1px solid var(--line); font-size: var(--fs-0); color: var(--text-2); background: transparent; letter-spacing: 0.02em; } .chip.on { background: var(--text); color: var(--bg); border-color: var(--text); } button.chip { cursor: pointer; } .toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem 0.9rem; align-items: center; margin-bottom: 0.9rem; } .toolbar .grow { flex: 1 1 12rem; } .switch { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--fs-1); color: var(--text-2); cursor: pointer; } .switch input { accent-color: var(--text); width: 1rem; height: 1rem; } /* ---------- 8. The company list (inbox) ------------------------------- */ .list { overflow: hidden; } .row { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) max-content; gap: 0.25rem 1.25rem; align-items: center; padding: 0.9rem 1.25rem; border-top: 1px solid var(--line); text-decoration: none; color: inherit; transition: background var(--t-fast) var(--ease); position: relative; } .row:first-child { border-top: 0; } .row:hover { background: var(--hover); } .row:focus-visible { outline-offset: -3px; } .row-marker { display: flex; align-items: center; justify-content: center; height: 100%; } .marker { width: 9px; height: 9px; border-radius: 50%; background: var(--marker-new); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marker-new) 22%, transparent); } .marker-quiet { width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: transparent; } .row-changed::before { content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 3px; border-radius: 3px; background: var(--marker-new); opacity: 0.85; } .row-main { min-width: 0; overflow: hidden; } .row-title { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; } .row-title .name { font-family: var(--font-serif); font-size: var(--fs-3); font-weight: 500; } .row-title .ticker { font-family: var(--font-mono); font-size: var(--fs-0); color: var(--text-3); letter-spacing: 0.04em; } .row-sub { display: block; color: var(--text-2); font-size: var(--fs-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 0.15rem; } .row-sub .kind { color: var(--text-3); } .row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; text-align: right; } .row-date { font-size: var(--fs-1); color: var(--text-3); white-space: nowrap; } .row-date strong { color: var(--text-2); font-weight: 500; } .row-facts { display: flex; gap: 0.75rem; align-items: center; font-size: var(--fs-0); color: var(--text-3); } .empty { padding: 2rem 1.25rem; color: var(--text-2); text-align: center; } /* ---------- 9. Facts strip (the compact company summary) -------------- */ .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } .fact { padding: 1.1rem 1.35rem; border-left: 1px solid var(--line); min-width: 0; } .fact:first-child { border-left: 0; } .fact .eyebrow { margin-bottom: 0.35rem; } .fact-value { font-family: var(--font-serif); font-size: var(--fs-4); font-weight: 500; line-height: 1.25; } .fact-note { color: var(--text-2); font-size: var(--fs-1); margin-top: 0.3rem; } @media (max-width: 860px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fact:nth-child(3) { border-left: 0; } .fact:nth-child(n+3) { border-top: 1px solid var(--line); } } /* ---------- 10. Words, glyphs and popovers ---------------------------- */ /* Confidence and track-record words: the word first, the number on drill-down. */ .word { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; } .word-btn { border: 0; background: transparent; padding: 0.15rem 0.35rem; margin: -0.15rem -0.35rem; border-radius: var(--radius-sm); cursor: pointer; text-decoration: underline dotted; text-decoration-color: var(--line-strong); text-underline-offset: 0.2em; } .word-btn:hover { background: var(--hover); } .strata { display: inline-grid; grid-auto-flow: column; gap: 2px; width: 30px; height: 12px; align-items: end; flex: none; } .strata i { display: block; width: 6px; border-radius: 2px; background: var(--mark-empty); } .strata i:nth-child(1) { height: 5px; } .strata i:nth-child(2) { height: 7px; } .strata i:nth-child(3) { height: 9px; } .strata i:nth-child(4) { height: 12px; } .strata[data-level="1"] i:nth-child(-n+1), .strata[data-level="2"] i:nth-child(-n+2), .strata[data-level="3"] i:nth-child(-n+3), .strata[data-level="4"] i:nth-child(-n+4) { background: var(--mark-fill); } .strata-lg { width: 56px; height: 22px; gap: 4px; } .strata-lg i { width: 11px; } .strata-lg i:nth-child(1) { height: 9px; } .strata-lg i:nth-child(2) { height: 13px; } .strata-lg i:nth-child(3) { height: 17px; } .strata-lg i:nth-child(4) { height: 22px; } .status { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 500; } .status svg { width: 14px; height: 14px; flex: none; } .status-open svg { fill: none; stroke: var(--mark-fill); stroke-width: 1.8; } .status-occurred svg { fill: var(--mark-fill); stroke: var(--mark-fill); stroke-width: 1.8; } .status-not_occurred svg { fill: none; stroke: var(--mark-fill); stroke-width: 1.8; } .status-undetermined svg { fill: none; stroke: var(--mark-fill); stroke-width: 1.8; stroke-dasharray: 2.2 2.2; } .pop-host { position: relative; display: inline-block; } .pop { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; min-width: 18rem; max-width: min(26rem, 90vw); background: var(--panel-strong); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); border: 1px solid var(--panel-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); padding: 0.85rem 1rem; font-size: var(--fs-1); font-weight: 400; color: var(--text); text-align: left; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .pop.right { left: auto; right: 0; } .pop p { margin: 0 0 0.5em; max-width: none; } .pop p:last-child { margin-bottom: 0; } .pop .big { font-family: var(--font-serif); font-size: var(--fs-5); line-height: 1.1; margin: 0.1rem 0 0.4rem; } .pop-host.open .pop, .pop-host:focus-within .pop { opacity: 1; transform: none; pointer-events: auto; } @media (hover: hover) { .pop-host:hover .pop { opacity: 1; transform: none; pointer-events: auto; } } /* A panel with a blur creates its own stacking context, so a later sibling paints over anything escaping an earlier one. Lift the whole containing panel while its popover is showing. */ .panel:has(.pop-host.open), .finding:has(.pop-host.open), .fact:has(.pop-host.open), .panel:has(.pop-host:focus-within), .finding:has(.pop-host:focus-within) { position: relative; z-index: 50; } @media (hover: hover) { .panel:has(.pop-host:hover), .finding:has(.pop-host:hover), .fact:has(.pop-host:hover) { position: relative; z-index: 50; } } /* Fallback for browsers without :has(): the row of facts and the card lift on hover regardless. */ .grid-facts > .panel:hover, .facts > .fact:hover { position: relative; z-index: 30; } /* ---------- 11. Drill-downs ------------------------------------------- */ details.drill { border-top: 1px solid var(--line); } details.drill:first-of-type { border-top: 0; } details.drill > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto 1.25rem; gap: 0.75rem; align-items: center; padding: 0.85rem 1.25rem; transition: background var(--t-fast) var(--ease); } details.drill > summary::-webkit-details-marker { display: none; } details.drill > summary:hover { background: var(--hover); } details.drill > summary .chev { width: 1.25rem; height: 1.25rem; color: var(--text-3); transition: transform var(--t-med) var(--ease); justify-self: end; } details.drill[open] > summary .chev { transform: rotate(180deg); } details.drill > summary .title { font-weight: 500; min-width: 0; } details.drill > summary .title .sub { display: block; font-weight: 400; color: var(--text-2); font-size: var(--fs-1); margin-top: 0.1rem; } details.drill > summary .aside { color: var(--text-3); font-size: var(--fs-1); white-space: nowrap; text-align: right; } details.drill > summary .aside:empty { display: none; } .drill-body { padding: 0.25rem 1.25rem 1.1rem 1.25rem; color: var(--text-2); font-size: var(--fs-1); } .drill-body p { max-width: var(--measure); } .drill-body .kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.3rem 1rem; } .drill-body .kv dt { color: var(--text-3); font-size: var(--fs-0); text-transform: uppercase; letter-spacing: var(--track); padding-top: 0.15rem; } .drill-body .kv dd { margin: 0; } .group-head { margin: 0; padding: 0.9rem 1.25rem 0.35rem; border-top: 1px solid var(--line); } .group-head:first-child { border-top: 0; } .group-head + details.drill { border-top: 0; } .bullets { padding-left: 1.1rem; list-style: disc; } .bullets li { margin: 0.3rem 0; max-width: var(--measure); } .drill-nested { margin-top: 0.5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; } .drill-nested details.drill > summary { padding: 0.65rem 0.9rem; } .drill-nested .drill-body { padding: 0 0.9rem 0.9rem; } /* ---------- 11b. The findings feed ------------------------------------ */ /* A card is a piece of reasoning: what came in, the route it was traced along, what is expected to follow. The three steps read left to right on a wide screen and top to bottom on a phone. */ .feed { display: grid; gap: 1rem; } .finding { background: var(--panel); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.15); backdrop-filter: blur(var(--blur)) saturate(1.15); border: 1px solid var(--panel-border); border-radius: var(--radius); box-shadow: var(--shadow), inset 0 1px 0 var(--panel-highlight); padding: 1.15rem 1.35rem 0.9rem; position: relative; transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .finding { background: var(--panel-strong); } } .finding:hover { box-shadow: var(--shadow-pop), inset 0 1px 0 var(--panel-highlight); } .finding.is-fresh::before { content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 3px; border-radius: 3px; background: var(--marker-new); } .finding-head .eyebrow { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.35rem; } .finding-title { font-family: var(--font-serif); font-size: var(--fs-3); font-weight: 500; line-height: 1.3; margin: 0 0 0.9rem; max-width: 72ch; } .finding-title a { color: inherit; text-decoration: none; } .finding-title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; } .finding-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; padding: 0.9rem 0; border-top: 1px solid var(--line); } @media (min-width: 900px) { .finding-steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: 0; } .finding-steps .step { padding: 0 1.35rem; border-left: 1px solid var(--line); } .finding-steps .step:first-child { padding-left: 0; border-left: 0; } .finding-steps .step:last-child { padding-right: 0; } } .step-label { font-size: var(--fs-0); text-transform: uppercase; letter-spacing: var(--track); color: var(--text-3); font-weight: 500; margin: 0 0 0.4rem; } .step-body { font-size: var(--fs-1); color: var(--text); margin: 0 0 0.3rem; max-width: none; } .step-none { color: var(--text-2); } .step-meta { font-size: var(--fs-0); color: var(--text-3); margin: 0; max-width: none; } .finding-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; border-top: 1px solid var(--line); padding-top: 0.7rem; font-size: var(--fs-1); } .foot-item { display: inline-flex; align-items: center; } .foot-open { margin-left: auto; display: inline-flex; align-items: center; gap: 0.2rem; text-decoration: none; color: var(--text-2); font-weight: 500; white-space: nowrap; } .foot-open:hover { color: var(--text); } .foot-open .chev { width: 1rem; height: 1rem; } /* The path: the route the analysis followed. Nodes are steps, the covered company is the emphasis. */ .pathline { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin: 0; padding: 0; } .path-node { display: flex; flex-direction: column; justify-content: center; padding: 0.4rem 0.7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel-strong); min-width: 0; } .path-node a { text-decoration: none; color: inherit; display: flex; flex-direction: column; } .path-node.is-linked { transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .path-node.is-linked:hover { border-color: var(--text-2); background: var(--panel-solid); } .path-node.is-linked .node-name { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .16em; } .path-node.is-linked:hover .node-name { text-decoration-color: var(--text-2); } .path-node a:hover .node-name { text-decoration: underline; } .path-node.is-company { border-color: var(--text); border-width: 1.5px; background: var(--panel-solid); } .node-role { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: var(--track); color: var(--text-3); } .path-node.is-company .node-role { color: var(--text-2); } .node-name { font-size: var(--fs-1); font-weight: 500; } .path-join { display: flex; align-items: center; padding: 0 0.3rem; } .path-join span { display: block; width: 14px; height: 2px; background: var(--line-strong); position: relative; } .path-join span::after { content: ""; position: absolute; right: -1px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); } /* A route of three or more steps runs down a rail, so it never wraps mid-arrow. */ .path-note { margin: .5rem 0 0; max-width: 46ch } .path-more { font-size: var(--fs-0); color: var(--text-3); padding: 0.4rem 0.7rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); align-self: center; } .pathline-tall { flex-direction: column; align-items: flex-start; gap: 0; } .pathline-tall .path-node, .pathline-tall .path-more { align-self: flex-start; } .pathline-tall .path-join { padding: 0; margin-left: 1.1rem; height: 0.55rem; } .pathline-tall .path-join span { width: 2px; height: 100%; } .pathline-tall .path-join span::after { right: -3px; top: auto; bottom: -3px; } /* ---------- 11c. The engine panel ------------------------------------- */ .engine { padding: 1.4rem 1.5rem 1rem; } .engine-head h2 { font-size: var(--fs-4); max-width: 34ch; margin-top: 0.15rem; } .engine-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.25rem 1.5rem; margin: 1.25rem 0 1.35rem; } .estat { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .estat-n { font-family: var(--font-serif); font-size: var(--fs-5); line-height: 1.05; font-variant-numeric: tabular-nums; } .estat-l { font-size: var(--fs-1); font-weight: 500; } .estat-note { font-size: var(--fs-0); color: var(--text-3); } .activity { margin-bottom: 0.5rem; } .abars { display: flex; align-items: flex-end; gap: 2px; height: 44px; margin-bottom: 0.4rem; } .abar { flex: 1 1 0; min-width: 3px; background: var(--mark-fill); opacity: 0.35; border-radius: 2px 2px 0 0; } .abar:last-child { opacity: 0.75; } .engine-drills { border-top: 1px solid var(--line); margin: 0.75rem -1.5rem 0; } .engine-drills details.drill > summary { padding-left: 1.5rem; padding-right: 1.5rem; } .engine-drills .drill-body { padding-left: 1.5rem; padding-right: 1.5rem; } .stages { display: grid; gap: 0.85rem; } .stages li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0.75rem; align-items: start; max-width: var(--measure); } .stage-n { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid var(--line-strong); font-size: var(--fs-0); font-weight: 500; color: var(--text-2); } .stages strong { color: var(--text); font-weight: 500; } .bars { display: grid; gap: 0.4rem; max-width: 34rem; } .bars li { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr) 3.5rem; gap: 0.75rem; align-items: center; font-size: var(--fs-1); } .bar-t { display: block; height: 8px; background: var(--mark-empty); border-radius: 4px; overflow: hidden; } .bar-f { display: block; height: 100%; background: var(--mark-fill); opacity: 0.55; border-radius: 4px; } .bar-n { text-align: right; color: var(--text-2); font-size: var(--fs-0); } @media (max-width: 720px) { .engine { padding: 1.1rem 1rem 0.9rem; } .engine-head h2 { font-size: var(--fs-3); } .engine-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1rem; margin: 1rem 0 1.1rem; } .estat-n { font-size: var(--fs-4); } .estat-note { display: none; } .activity .step-meta { white-space: normal; } .engine-drills { margin-left: -1rem; margin-right: -1rem; } .engine-drills details.drill > summary, .engine-drills .drill-body { padding-left: 1rem; padding-right: 1rem; } .bars li { grid-template-columns: minmax(0, 1fr) 3.5rem; } .bars .bar-t { grid-column: 1 / -1; } .finding { padding: 1rem 1rem 0.8rem; } } /* ---------- 11d. The day in brief ------------------------------------- */ /* A dated run-through of what came in and what followed. Sits between the engine panel and the feed, and is the first thing a returning reader looks at. */ .brief { margin-top: 1rem; padding: 1.4rem 1.5rem 0.5rem; } .brief-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: 0.9rem; } .brief-head h2 { font-size: var(--fs-4); margin-top: 0.15rem; } .brief-lead { font-size: var(--fs-3); line-height: 1.5; color: var(--text-2); max-width: 62ch; margin: 0 0 1rem; } .brief-lead strong { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; } .subjects { gap: 0.4rem 0.5rem; margin-bottom: 0.25rem; } .subjects .chip { gap: 0.45rem; padding-right: 0.4rem; } .chip-n { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.15rem; padding: 0 0.25rem; border-radius: var(--radius-pill); background: var(--mark-empty); color: var(--text-2); font-variant-numeric: tabular-nums; font-size: 0.6875rem; } .brief-list { display: grid; gap: 1px; background: var(--line); border-radius: var(--radius-sm); overflow: hidden; } .brief-list li { background: var(--panel-solid); } .brief-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 1.25rem; align-items: center; padding: 0.65rem 0.85rem; text-decoration: none; color: inherit; transition: background var(--t-fast) var(--ease); } .brief-list a:hover { background: var(--hover); } .brief-line { font-size: var(--fs-1); min-width: 0; } .brief-reach { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--fs-0); color: var(--text-2); white-space: nowrap; } .brief-role { text-transform: uppercase; letter-spacing: var(--track); color: var(--text-3); } .brief-depth { padding: 0.05rem 0.4rem; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--text-3); } .brief-reach .chev { width: 1rem; height: 1rem; color: var(--text-3); transform: rotate(-90deg); } .brief-mon { font-size: var(--fs-1); color: var(--text-2); margin: 1rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--line); max-width: var(--measure); } .brief-earlier { border-top: 1px solid var(--line); margin: 1rem -1.5rem 0; } .brief-earlier > details.drill > summary { padding-left: 1.5rem; padding-right: 1.5rem; } .brief-earlier > details.drill > .drill-body { padding-left: 1.5rem; padding-right: 1.5rem; } .brief-earlier .brief-lead { font-size: var(--fs-1); margin-bottom: 0.75rem; } @media (max-width: 720px) { .brief { padding: 1.1rem 1rem 0.4rem; } .brief-lead { font-size: var(--fs-2); } .brief-head h2 { font-size: var(--fs-3); } .brief-head .step-meta { display: none; } .brief-list a { grid-template-columns: minmax(0, 1fr); } .brief-reach { justify-self: start; } .brief-earlier { margin-left: -1rem; margin-right: -1rem; } .brief-earlier > details.drill > summary, .brief-earlier > details.drill > .drill-body { padding-left: 1rem; padding-right: 1rem; } } /* ---------- 11e. Contextual help -------------------------------------- */ /* A question mark in the top right of anything explainable. It appears on hover, and is always present where there is no hover, which is every touch device. */ .has-help { position: relative; } .help-dot { position: absolute; top: 0.5rem; right: 0.6rem; z-index: 5; width: 1.35rem; height: 1.35rem; padding: 0; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--panel-strong); color: var(--text-3); font-size: 0.75rem; font-weight: 600; line-height: 1; cursor: pointer; opacity: 0; transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .has-help:hover > .help-dot, .help-dot:focus-visible, .help-dot[aria-expanded="true"] { opacity: 1; } .help-dot:hover, .help-dot[aria-expanded="true"] { color: var(--text); border-color: var(--text); } @media (hover: none) { .help-dot { opacity: 0.75; } } /* Inline against a label rather than in a corner. */ .label-help { position: relative; display: flex; align-items: center; gap: 0.4rem; } .label-help > .help-dot { position: static; opacity: 0; } .label-help:hover > .help-dot, .label-help > .help-dot:focus-visible, .label-help > .help-dot[aria-expanded="true"] { opacity: 1; } @media (hover: none) { .label-help > .help-dot { opacity: 0.75; } } .help-pop { position: absolute; z-index: 200; opacity: 1; transform: none; pointer-events: auto; box-shadow: var(--shadow-pop); } .help-title { font-family: var(--font-serif); font-size: var(--fs-3); margin: 0.15rem 0 0.4rem; } .help-pop p { color: var(--text-2); } .help-pop .help-close { margin-top: 0.5rem; padding: 0.3rem 0.6rem; } /* The step panels inside a finding card put their help dot clear of the text. */ .finding-steps .step > .help-dot { top: -0.15rem; right: 0; } .fact > .help-dot, .gf > .help-dot { top: 0.4rem; right: 0.5rem; } .toolbar.has-help > .help-dot { position: static; opacity: 0; margin-left: 0.15rem; } .toolbar.has-help:hover > .help-dot { opacity: 1; } @media (hover: none) { .toolbar.has-help > .help-dot { opacity: 0.75; } } /* ---------- 11f. Back control and the header cog ---------------------- */ .back-link { display: inline-flex; align-items: center; gap: 0.3rem; margin-bottom: 0.75rem; border: 0; background: transparent; padding: 0.3rem 0.5rem 0.3rem 0.35rem; border-radius: var(--radius-pill); color: var(--text-2); font-size: var(--fs-1); font-weight: 500; cursor: pointer; } .back-link:hover { background: var(--hover); color: var(--text); } .back-link .chev { width: 1.1rem; height: 1.1rem; transform: rotate(90deg); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; color: var(--text-2); text-decoration: none; flex: none; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .icon-btn svg { width: 1.15rem; height: 1.15rem; } .icon-btn:hover { background: var(--hover); color: var(--text); } .icon-btn[aria-current="page"] { background: var(--active); color: var(--text); } /* ---------- 11g. The analysis page and settings ----------------------- */ .reasoning { font-family: var(--font-serif); font-size: var(--fs-3); line-height: 1.55; color: var(--text); max-width: 62ch; margin: 0.35rem 0 1.25rem; } .analysis-sub { border-top: 1px solid var(--line); padding-top: 0.9rem; margin-top: 0.9rem; } .analysis-sub p { color: var(--text-2); } .analysis-sub .gf-expect { color: var(--text); margin-bottom: 0.35rem; } .conf-head { display: flex; align-items: center; gap: 0.75rem; margin: 0.5rem 0 1rem; flex-wrap: wrap; } .conf-word { font-family: var(--font-serif); font-size: var(--fs-5); line-height: 1; } .conf-num { margin-left: auto; font-size: var(--fs-3); color: var(--text-2); } .factors { display: grid; gap: 0.75rem 1.25rem; margin: 0; } @media (min-width: 640px) { .factors { grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr); } } .factors dt { font-size: var(--fs-0); text-transform: uppercase; letter-spacing: var(--track); color: var(--text-3); padding-top: 0.15rem; } .factors dd { margin: 0; color: var(--text-2); font-size: var(--fs-1); max-width: var(--measure); } .price-box { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 0.9rem; } .price { display: flex; align-items: baseline; gap: 0.4rem; margin: 0.15rem 0 0.4rem; } .price-n { font-family: var(--font-serif); font-size: var(--fs-6); line-height: 1; font-variant-numeric: tabular-nums; } .price-per { color: var(--text-2); font-size: var(--fs-1); } .settings { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); align-items: start; } .settings h2 { font-size: var(--fs-4); margin: 0.15rem 0 0.6rem; } .settings .kv { margin-top: 0.5rem; } /* ---------- 12. Claim page pieces ------------------------------------- */ .claim-title { font-size: var(--fs-5); max-width: 30ch; } @media (min-width: 720px) { .claim-title { font-size: var(--fs-6); max-width: 28ch; } } .meta-line { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; color: var(--text-2); font-size: var(--fs-1); margin-top: 0.75rem; } .meta-line .dot::before { content: "·"; margin-right: 1rem; color: var(--text-3); } .grid-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; } .gf { padding: 1rem 1.15rem; } .gf .eyebrow { margin-bottom: 0.35rem; } .gf-value { font-family: var(--font-serif); font-size: var(--fs-4); line-height: 1.25; } .gf-note { color: var(--text-2); font-size: var(--fs-1); margin-top: 0.35rem; } .gf-value.blank { color: var(--text-3); font-style: italic; font-family: var(--font-sans); font-size: var(--fs-2); } .gf-wide { grid-column: 1 / -1; } .gf-expect { font-family: var(--font-serif); font-size: var(--fs-4); line-height: 1.4; max-width: 56ch; } .trigger-panel { margin-bottom: 1rem; } .trigger-headline { font-family: var(--font-serif); font-size: var(--fs-3); margin: 0.2rem 0 0.4rem; max-width: 62ch; } .quote { border-left: 3px solid var(--line-strong); margin: 0.75rem 0; padding: 0.35rem 0 0.35rem 1rem; font-family: var(--font-serif); font-size: var(--fs-3); color: var(--text); max-width: 60ch; } .quote + .cite { color: var(--text-3); font-size: var(--fs-1); } .chain { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0; margin: 0.5rem 0; } .chain-node { display: inline-flex; flex-direction: column; padding: 0.4rem 0.75rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel-strong); font-size: var(--fs-1); min-width: 0; } .chain-node .role { font-size: var(--fs-0); text-transform: uppercase; letter-spacing: var(--track); color: var(--text-3); } .chain-node.company { border-color: var(--text); border-width: 1.5px; } .chain-link { width: 1.75rem; height: 2px; background: var(--line-strong); flex: none; position: relative; } .chain-link::after { content: ""; position: absolute; right: -1px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); } .timeline { position: relative; padding-left: 1.5rem; } .timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--line); } .timeline li { position: relative; padding: 0.15rem 0 0.9rem; } .timeline li::before { content: ""; position: absolute; left: -1.5rem; top: 0.45rem; width: 10px; height: 10px; border-radius: 50%; background: var(--panel-solid); border: 2px solid var(--text-2); margin-left: 2px; } .timeline .when { font-size: var(--fs-0); color: var(--text-3); text-transform: uppercase; letter-spacing: var(--track); } .timeline .what { font-weight: 500; } .timeline .how { color: var(--text-2); font-size: var(--fs-1); } /* ---------- 13. Track record ------------------------------------------ */ .tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; } .tier { padding: 1.25rem 1.35rem; display: flex; flex-direction: column; gap: 0.6rem; } .tier .depth { display: flex; align-items: center; gap: 0.6rem; } .tier .layers { display: inline-grid; gap: 3px; width: 30px; } .tier .layers i { display: block; height: 4px; border-radius: 2px; background: var(--mark-empty); } .tier .layers[data-depth="0"] i:nth-child(1), .tier .layers[data-depth="1"] i:nth-child(-n+2), .tier .layers[data-depth="2"] i:nth-child(-n+3), .tier .layers[data-depth="3"] i:nth-child(-n+4) { background: var(--mark-fill); } .tier .layers i:nth-child(2) { margin-left: 4px; } .tier .layers i:nth-child(3) { margin-left: 0; } .tier .layers i:nth-child(4) { margin-left: 6px; } .tier-word { font-family: var(--font-serif); font-size: var(--fs-6); line-height: 1.05; font-weight: 500; } .tier-word.none { font-family: var(--font-sans); font-size: var(--fs-2); font-weight: 400; color: var(--text-2); line-height: var(--lh-body); } .tier-desc { color: var(--text-2); font-size: var(--fs-1); } .dots { display: flex; flex-wrap: wrap; gap: 4px; max-width: 100%; } .dots i { width: 9px; height: 9px; border-radius: 50%; display: block; border: 1.5px solid var(--mark-fill); } .dots i.occurred { background: var(--mark-fill); } .dots i.not_occurred { background: transparent; } .dots i.undetermined { border-style: dotted; opacity: 0.55; } .legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: var(--fs-0); color: var(--text-3); align-items: center; } .legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; border: 1.5px solid var(--mark-fill); vertical-align: middle; margin-right: 0.35rem; } .scale { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem 1rem; } .scale div { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--fs-1); color: var(--text-2); } .scale strong { font-family: var(--font-serif); font-weight: 500; color: var(--text); font-size: var(--fs-2); } /* ---------- 14. Preview banner ---------------------------------------- */ .banner { padding: 0.9rem 1.25rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.25rem; border-style: dashed; } .banner .eyebrow { margin-right: 0.25rem; } .banner p { margin: 0; color: var(--text-2); max-width: none; flex: 1 1 20rem; } /* ---------- 15. Landing page ------------------------------------------ */ .landing-hero { padding: 3.5rem 0 2.5rem; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; } @media (max-width: 860px) { .landing-hero { grid-template-columns: 1fr; padding-top: 2rem; } } .landing-hero h1 { font-size: var(--fs-6); max-width: 22ch; } @media (min-width: 720px) { .landing-hero h1 { font-size: var(--fs-7); } } .landing-hero .statement { font-family: var(--font-serif); font-size: var(--fs-4); line-height: 1.45; color: var(--text); max-width: 34ch; margin-top: 1.25rem; } .landing-hero .strap { font-size: var(--fs-1); letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand-strapline); margin-top: 0.75rem; } .hero-mark { display: flex; justify-content: center; } .hero-mark svg { width: min(100%, 320px); height: auto; filter: drop-shadow(0 30px 40px rgba(22, 36, 47, 0.12)); } .landing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; } .landing-grid .panel-pad h2 { font-size: var(--fs-4); margin-bottom: 0.5rem; } .landing-grid p { color: var(--text-2); font-size: var(--fs-1); } .strata-diagram { padding: 1.5rem 1.5rem 1.25rem; } .strata-rows { display: grid; gap: 1.1rem; margin-top: 0.5rem; } .strata-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.4rem; } @media (min-width: 720px) { .strata-row { grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.9fr); gap: 1.5rem; align-items: center; } } .strata-row .bar { display: block; height: 12px; border-radius: 999px; margin-left: var(--offset, 0); width: var(--width, 50%); } .strata-row .bar-1 { background: var(--logo-1); } .strata-row .bar-2 { background: var(--logo-2); } .strata-row .bar-3 { background: var(--logo-3); } .strata-row .cap { color: var(--text-2); font-size: var(--fs-1); } .strata-row .cap strong { color: var(--text); font-weight: 500; } .origin-row { grid-template-columns: 1.5rem minmax(0, 1fr); align-items: center; gap: 0.75rem; } @media (min-width: 720px) { .origin-row { grid-template-columns: 1.5rem minmax(0, 1fr); } } .origin-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--logo-origin); display: block; } .landing-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; } /* ---------- 16. Motion ------------------------------------------------ */ .reveal { animation: reveal var(--t-med) var(--ease) both; } @keyframes reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ---------- 17. Small screens ----------------------------------------- */ @media (max-width: 860px) { .nav { overflow-x: auto; scrollbar-width: none; } .nav::-webkit-scrollbar { display: none; } } @media (max-width: 720px) { .site-header .inner { padding: 0.5rem 0.9rem; gap: 0.75rem; } .brand .wordmark { font-size: 1.05rem; } .asof { display: none; } .page { padding: 1.1rem 0.9rem 2rem; } .row { grid-template-columns: 1.1rem minmax(0, 1fr); padding: 0.85rem 0.9rem; } .row-meta { grid-column: 2; flex-direction: row; justify-content: space-between; align-items: center; text-align: left; margin-top: 0.2rem; } .row-sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .panel-pad { padding: 1rem 1rem; } .fact { padding: 0.9rem 1rem; } details.drill > summary { padding: 0.8rem 0.9rem; grid-template-columns: minmax(0, 1fr) 1.25rem; row-gap: 0.35rem; } details.drill > summary .title { grid-column: 1; grid-row: 1; } details.drill > summary .aside { grid-column: 1; grid-row: 2; text-align: left; white-space: normal; } details.drill > summary .chev { grid-column: 2; grid-row: 1; } .drill-body { padding: 0.25rem 0.9rem 1rem; } .pop { min-width: 14rem; } .tier-word { font-size: var(--fs-5); } } /* =========================================================================== Absence — added by the website build, 11 September 2026. The one addition to the alpha's stylesheet, and it exists because the real interface serves something the extract never did: a value that could not be determined, carrying the sentence that says why. "An absent value is not an empty one, and the difference must be visible to a reader rather than rendered as a blank." It is not a new register. The alpha already had one for a fact that is not filled in — `.gf-value.blank`, quiet and italic — and this is that register given a name and applied everywhere the interface can send an absence. No new colour, no new size, no new token: `--text-3` is the label and caption colour, already checked at 5:1 on a panel, and it holds under the increased contrast setting because that setting redefines the token. ========================================================================= */ .absent { color: var(--text-3); font-style: italic; } /* A whole panel's worth: a reasoning passage that is held but not publishable, a criterion nobody wrote. It says what exists, why it is not shown, and what is shown instead, so it needs room to be a sentence rather than a label. */ .absent-block { margin: 0.35rem 0 0; max-width: 60ch; line-height: 1.55; } /* A route step beyond the caller's depth entitlement. The step keeps its position in the route — the length and shape are preserved and the step is replaced, never removed — so this has to read as a step that is there and cannot be seen, rather than as a gap. Dashed, because the alpha already uses form rather than colour to carry state everywhere else. */ .path-node-withheld { border-style: dashed; opacity: 0.85; } .path-node-withheld .node-name { font-family: var(--font-sans); font-size: var(--fs-1); } /* Nothing is needed for increased contrast. That setting already redefines `--text-3` to `--text`, so an absence gains the contrast everything else gains, and the italic — which is what actually distinguishes it — survives a setting that flattens colour. A rule here would have restated what the token already does. */ /* The fifth track-record tier — added by the website build, 11 September 2026. "Route not recorded" is **not a depth**. It sits after the depth sequence, it is always shown even when it is empty, and it holds a finding that asserts a route with none on file — a lack of recorded origin, not a short chain. The grid was written for four depth tiers and fits them exactly. Rather than squeeze five equal columns — which would say the fifth is the next one along — it takes the row beneath, full width, which is what "after the depth sequence, and not one of them" looks like. It also keeps the four depth cards at the width the design set for them. */ .tier-not-a-depth { grid-column: 1 / -1; } /* Set apart, not hidden: it is always shown, and the rule above it is the quietest way to say that the sequence has ended. */ .tier-not-a-depth::before { content: ""; display: block; border-top: 1px solid var(--line); margin: -0.35rem 0 0.5rem; } /* Signing in — added by the website build, 12 September 2026. The alpha's panel was one step with a password field. Sign-in is passwordless and is two steps, so the panel needs a message line and two plain text buttons. Both use tokens the design already has; neither introduces a colour. */ /* A button that reads as a link, for "send another code" and "use a different address". They are actions, so they are buttons and reachable by keyboard; the design has no visual language for a secondary action inside a form panel, and a link is the quietest one available. */ .linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .linklike:hover { color: var(--text); } /* The design already has one global focus rule — `2px solid var(--text-2)` — and it applies here without restating it. Nothing needed. */ /* What the interface said. It carries a refusal or a confirmation, and it is the interface's sentence rather than one this client wrote. Form, not colour, carries the distinction — a rule down the left edge — because that is how state is shown everywhere else in this design, and it survives both themes and the increased-contrast setting without a second definition. */ .signin-message { margin: 0.75rem 0 0; padding: 0.5rem 0 0.5rem 0.7rem; border-left: 2px solid var(--line-strong); font-size: var(--fs-1); color: var(--text-2); } .signin-message.is-warn { border-left-style: solid; font-style: italic; } .signin-message.is-ok { border-left-style: double; } #signin-step-code .field { margin-bottom: 0.5rem; } #code { font-family: var(--font-mono); letter-spacing: 0.18em; } /* A settings panel's reply — added 12 September 2026. The alpha's settings were example content and nothing could fail, so no panel needed to answer. These write to the interface and can be refused, and a refusal carries a sentence written for a subscriber. Same construction as the sign-in message: a rule down the left edge, form rather than colour, no new token. */ .settings-message { margin: 0.75rem 0 0; padding: 0.4rem 0 0.4rem 0.7rem; border-left: 2px solid var(--line-strong); font-size: var(--fs-1); color: var(--text-2); } /* A thread is a drill-down inside a panel that is already inside a panel; it needs the room, not the frame. */ #threads .panel { padding: 0; } /* The activity strip at phone width — added 12 September 2026. `.abar` is `flex: 1 1 0` with `min-width: 3px`, which fits the alpha's forty-nine days into 375 pixels and does not fit the hundred days the interface now serves: the bars stop shrinking at three pixels and the page itself gains a horizontal scrollbar. The bars keep their width — a two-pixel bar is not a chart — and the strip scrolls inside its own frame instead, which is what wide content is supposed to do rather than pushing the page sideways. The count is capped at 120 days by the interface, so this has a ceiling. `overscroll-behavior-x: contain` so that reaching the end of the strip does not start scrolling the page behind it. */ .abars { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }