:root, [data-theme="dark"] { --ink: #fbf7f1; --ink-muted: #c8bfb4; --paper: #0e0c0b; --paper-deep: #171412; --rule: #3a322c; --burgundy: #8b1e3f; --burgundy-bright: #c43b5a; --burgundy-soft: #2a1218; --accent: var(--burgundy-bright); /* interactive CTAs */ --secondary: var(--burgundy); /* brand secondary */ --teal: #5eead4; /* pass / system ok */ --teal-dim: #134e4a; --warn: #fdba74; --warn-bg: #431407; --ok: var(--teal); --ok-bg: var(--teal-dim); --panel: #14110f; --hb-term-bg: #0b0a09; --hb-term-fg: #d8d0c6; --hb-term-muted: #8a8177; --hb-term-strong: #ffffff; --radius: 8px; --max: 1180px; --mono: "IBM Plex Mono", ui-monospace, monospace; --sans: "IBM Plex Sans", system-ui, sans-serif; --serif: "Source Serif 4", Palatino, serif; --display: Fraunces, "Source Serif 4", serif; /* sticky chrome — keep case heroes inside the visible frame */ --chrome-h: 3.5rem; } [data-theme="light"] { --ink: #1c1412; --ink-muted: #5c534e; --paper: #f7f3eb; --paper-deep: #efe6dc; --rule: #d4c8bc; --burgundy: #6e1832; --burgundy-bright: #8b1e3f; --burgundy-soft: #f3e4e8; --accent: var(--burgundy-bright); --secondary: var(--burgundy); --teal: #0d8f7a; --teal-dim: #d5f3eb; --warn: #9a3412; --warn-bg: #ffedd5; --ok: var(--teal); --ok-bg: var(--teal-dim); --panel: #fffdf9; --hb-term-bg: #f3eee6; --hb-term-fg: #2a221e; --hb-term-muted: #7a716a; --hb-term-strong: #1c1412; } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* Kill edge bounce / scroll-chaining so the doc ends hard at last paint */ overscroll-behavior: none; --theme-dur: 0.28s; --theme-ease: ease; } /* Theme cross-fade — one clock for the whole site (0.28s). Registered @property color tokens interpolate on ; every element that paints with var(--ink)/--paper/… follows automatically. No per-widget color whitelist (that’s why triage/webhook lagged while corpus felt fine). Mesh palette (--mesh-a…g) uses the same duration on case views. */ @property --ink { syntax: ""; inherits: true; initial-value: #fbf7f1; } @property --ink-muted { syntax: ""; inherits: true; initial-value: #c8bfb4; } @property --paper { syntax: ""; inherits: true; initial-value: #0e0c0b; } @property --paper-deep { syntax: ""; inherits: true; initial-value: #171412; } @property --rule { syntax: ""; inherits: true; initial-value: #3a322c; } @property --burgundy { syntax: ""; inherits: true; initial-value: #8b1e3f; } @property --burgundy-bright { syntax: ""; inherits: true; initial-value: #c43b5a; } @property --burgundy-soft { syntax: ""; inherits: true; initial-value: #2a1218; } @property --teal { syntax: ""; inherits: true; initial-value: #5eead4; } @property --teal-dim { syntax: ""; inherits: true; initial-value: #134e4a; } @property --warn { syntax: ""; inherits: true; initial-value: #fdba74; } @property --warn-bg { syntax: ""; inherits: true; initial-value: #431407; } @property --panel { syntax: ""; inherits: true; initial-value: #14110f; } @property --hb-term-bg { syntax: ""; inherits: true; initial-value: #0b0a09; } @property --hb-term-fg { syntax: ""; inherits: true; initial-value: #d8d0c6; } @property --hb-term-muted { syntax: ""; inherits: true; initial-value: #8a8177; } @property --hb-term-strong { syntax: ""; inherits: true; initial-value: #ffffff; } html.theme-ready { transition: --ink var(--theme-dur) var(--theme-ease), --ink-muted var(--theme-dur) var(--theme-ease), --paper var(--theme-dur) var(--theme-ease), --paper-deep var(--theme-dur) var(--theme-ease), --rule var(--theme-dur) var(--theme-ease), --burgundy var(--theme-dur) var(--theme-ease), --burgundy-bright var(--theme-dur) var(--theme-ease), --burgundy-soft var(--theme-dur) var(--theme-ease), --teal var(--theme-dur) var(--theme-ease), --teal-dim var(--theme-dur) var(--theme-ease), --warn var(--theme-dur) var(--theme-ease), --warn-bg var(--theme-dur) var(--theme-ease), --panel var(--theme-dur) var(--theme-ease), --hb-term-bg var(--theme-dur) var(--theme-ease), --hb-term-fg var(--theme-dur) var(--theme-ease), --hb-term-muted var(--theme-dur) var(--theme-ease), --hb-term-strong var(--theme-dur) var(--theme-ease); } /* Motion chrome that must keep non-color transitions (colors come from tokens). */ html.theme-ready .card { transition: transform 0.25s ease, box-shadow var(--theme-dur) var(--theme-ease); } html.theme-ready .nav-work__menu { transition: opacity 0.18s ease, visibility 0.18s ease, box-shadow var(--theme-dur) var(--theme-ease); } html.theme-ready .btn-ghost, html.theme-ready .btn-primary { transition: transform 0.15s ease, filter 0.15s ease; } html.theme-ready .view[data-view="triage"], html.theme-ready .view[data-view="webhook"], html.theme-ready .view[data-view="corpus"] { transition: --mesh-a var(--theme-dur) var(--theme-ease), --mesh-b var(--theme-dur) var(--theme-ease), --mesh-c var(--theme-dur) var(--theme-ease), --mesh-d var(--theme-dur) var(--theme-ease), --mesh-e var(--theme-dur) var(--theme-ease), --mesh-f var(--theme-dur) var(--theme-ease), --mesh-g var(--theme-dur) var(--theme-ease); } /* Hover preview: same palette clock + slower opacity for case-to-case fade. */ html.theme-ready #mesh-preview { transition: --mesh-a var(--theme-dur) var(--theme-ease), --mesh-b var(--theme-dur) var(--theme-ease), --mesh-c var(--theme-dur) var(--theme-ease), --mesh-d var(--theme-dur) var(--theme-ease), --mesh-e var(--theme-dur) var(--theme-ease), --mesh-f var(--theme-dur) var(--theme-ease), --mesh-g var(--theme-dur) var(--theme-ease), opacity 0.45s ease; } body { margin: 0; min-height: 100vh; min-height: var(--app-vh, 100vh); padding-top: var(--chrome-h); background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 17px; line-height: 1.55; /* clip (not hidden) so fixed chrome isn’t dragged by rubber-band */ overflow-x: clip; overscroll-behavior: none; } a { color: var(--burgundy-bright); text-decoration-thickness: 1px; text-underline-offset: 3px; } button { font: inherit; } .mono { font-family: var(--mono); } /* —— chrome —— */ .chrome { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--rule); /* fixed: stays put during overscroll; sticky was rubber-banded with the page */ position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: var(--paper); /* Opaque so mesh orbs cannot read as dots in the chrome (esp. top-right). */ backdrop-filter: none; -webkit-backdrop-filter: none; } .chrome .mark { grid-column: 1; justify-self: start; font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--burgundy-bright); margin: 0; text-decoration: none; } .chrome .mark:hover { color: var(--accent); } .chrome nav { grid-column: 2; justify-self: center; /* roomier primary nav item spacing; cluster stays centered */ display: flex; align-items: center; gap: 2.85rem; font-family: var(--sans); font-size: 0.88rem; } .chrome nav a { color: var(--ink-muted); text-decoration: none; } .chrome nav a:hover { color: var(--ink); } .chrome nav a.active { color: var(--ink); font-weight: 600; } .nav-work { position: relative; } .nav-work__trigger { display: inline-flex; align-items: center; gap: 0.5rem; } .nav-work__label { color: var(--ink-muted); text-decoration: none; } .nav-work__label:hover, .nav-work:has(:focus-visible) .nav-work__label, .nav-work__label.active { color: var(--ink); } .nav-work__label.active { font-weight: 600; } .nav-work__chev { display: inline-block; width: 0.42rem; height: 0.42rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-1px); opacity: 0.75; color: var(--ink-muted); pointer-events: none; transition: transform 0.18s ease, color 0.18s ease; } .nav-work__menu { position: absolute; top: calc(100% + 0.55rem); left: 50%; transform: translateX(-50%); min-width: 14.5rem; margin: 0; padding: 0.4rem; list-style: none; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 16px 40px color-mix(in srgb, #000 28%, transparent); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, visibility 0.18s ease; z-index: 50; } /* Bridge the gap so hover stays on .nav-work while moving into the panel */ .nav-work__menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 0.7rem; } /* Open state is always .is-open (JS). Hover-open is mouse-desktop only. */ .nav-work.is-open .nav-work__menu { opacity: 1; visibility: visible; pointer-events: auto; } /* * Phones often match (hover:hover) after the first tap (sticky :hover). * Never open on :hover when the device has touch or a coarse pointer — * CSS-only, so we don't depend on JS winning a race with the first tap. */ @media (hover: hover) and (pointer: fine) { html:not(.touch-ui):not(.has-touch) .nav-work:hover .nav-work__menu, html:not(.touch-ui):not(.has-touch) .nav-work:has(:focus-visible) .nav-work__menu { opacity: 1; visibility: visible; pointer-events: auto; } html:not(.touch-ui):not(.has-touch) .nav-work:hover .nav-work__chev, html:not(.touch-ui):not(.has-touch) .nav-work:has(:focus-visible) .nav-work__chev { color: var(--ink); } } .nav-work.is-open .nav-work__chev { color: var(--ink); transform: rotate(225deg) translateY(-1px); } /* * Explicit dismiss (e.g. clicking a case-study link) must win over the * sticky :hover-open rule above until the pointer actually leaves * .nav-work — otherwise the menu stays visually open post-click. */ .nav-work.force-closed .nav-work__menu { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .nav-work__menu a { display: block; padding: 0.55rem 0.7rem; border-radius: calc(var(--radius) - 2px); color: var(--ink-muted); text-decoration: none; font-size: 0.84rem; line-height: 1.35; } .nav-work__menu a:hover, .nav-work__menu a:focus-visible { color: var(--ink); background: color-mix(in srgb, var(--burgundy-soft) 70%, var(--panel)); outline: none; } .nav-work__menu a[aria-current="page"] { color: var(--ink); font-weight: 600; } /* Theme switch — sun (light) / moon (dark), right-justified chrome. Height kept; width a touch shorter than the old text-pill hit target. */ .theme-toggle { --tt-w: 4.65rem; --tt-h: 2.35rem; --tt-pad: 0.28rem; --tt-thumb: 1.8rem; --tt-travel: calc(var(--tt-w) - var(--tt-thumb) - (2 * var(--tt-pad))); grid-column: 3; justify-self: end; position: relative; width: var(--tt-w); height: var(--tt-h); padding: 0; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper-deep); color: var(--ink-muted); cursor: pointer; display: inline-flex; align-items: center; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--burgundy-bright); } .theme-toggle:focus { outline: none; } .theme-toggle:focus-visible { outline: 2px solid var(--burgundy-bright); outline-offset: 3px; } .theme-toggle__thumb { position: absolute; z-index: 0; top: 50%; left: var(--tt-pad); width: var(--tt-thumb); height: var(--tt-thumb); border-radius: 50%; background: var(--ink); transform: translateY(-50%); transition: transform 0.28s ease, background-color 0.28s ease; pointer-events: none; box-shadow: 0 1px 3px color-mix(in srgb, #000 35%, transparent); } .theme-toggle[aria-checked="true"] .theme-toggle__thumb { transform: translate(var(--tt-travel), -50%); background: var(--burgundy-bright); } .theme-toggle__icon { position: absolute; z-index: 1; top: 50%; width: 0.72rem; height: 0.72rem; /* Anchor each glyph to the thumb’s rest-center in that half */ transform: translate(-50%, -50%); display: grid; place-items: center; color: var(--ink-muted); opacity: 0.38; transition: opacity 0.28s ease, color 0.28s ease; pointer-events: none; } .theme-toggle__icon svg { width: 100%; height: 100%; display: block; } .theme-toggle__icon--sun { left: calc(var(--tt-pad) + (var(--tt-thumb) / 2)); } .theme-toggle__icon--moon { left: calc(100% - var(--tt-pad) - (var(--tt-thumb) / 2)); /* Ladder size A — larger than sun so the crescent reads on the thumb */ width: 0.90rem; height: 0.90rem; } /* Heroicons moon mass sits left — nudge optical center onto the thumb */ .theme-toggle__icon--moon svg { transform: translateX(20%); } /* Active glyph sits on the thumb: cream on ink / burgundy */ .theme-toggle[aria-checked="false"] .theme-toggle__icon--sun { opacity: 1; color: var(--paper); } .theme-toggle[aria-checked="true"] .theme-toggle__icon--moon { opacity: 1; color: var(--ink); } @media (prefers-reduced-motion: reduce) { html.theme-ready, html.theme-ready .card, html.theme-ready .nav-work__menu, html.theme-ready .btn-ghost, html.theme-ready .btn-primary, html.theme-ready .view[data-view="triage"], html.theme-ready .view[data-view="webhook"], html.theme-ready .view[data-view="corpus"], html.theme-ready #mesh-preview, .theme-toggle__thumb, .theme-toggle__icon, .pulse-bar > i, .pulse-bar > i::after { transition-duration: 0.01ms !important; } } .view { display: none; } .view.active { display: block; } .view.active > .wrap, .view.active > .case-hero { animation: rise 1.45s cubic-bezier(0.22, 1, 0.36, 1); } /* Paper sheet stays fully opaque (transform-only) so the fixed mesh never shows through. Opacity fade lives on the inner .wrap content only. */ .view.active > .case-study { animation: rise-sheet 1.45s cubic-bezier(0.22, 1, 0.36, 1); } .view.active > .case-study > .wrap { animation: rise-sheet-content 1.45s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes rise-sheet { from { transform: translateY(14px); } to { transform: none; } } @keyframes rise-sheet-content { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .view.active > .wrap, .view.active > .case-hero, .view.active > .case-study, .view.active > .case-study > .wrap { animation: none; } } /* —— case study atmospheric meshes (fixed to viewport) —— */ /* Registered so mesh palette can interpolate (hover preview + theme). */ @property --mesh-a { syntax: ""; inherits: true; initial-value: transparent; } @property --mesh-b { syntax: ""; inherits: true; initial-value: transparent; } @property --mesh-c { syntax: ""; inherits: true; initial-value: transparent; } @property --mesh-d { syntax: ""; inherits: true; initial-value: transparent; } @property --mesh-e { syntax: ""; inherits: true; initial-value: transparent; } @property --mesh-f { syntax: ""; inherits: true; initial-value: transparent; } @property --mesh-g { syntax: ""; inherits: true; initial-value: transparent; } .view[data-view="triage"], #mesh-preview[data-preview="triage"] { --mesh-a: color-mix(in srgb, #c43b5a 78%, transparent); --mesh-b: color-mix(in srgb, #e07a3a 62%, transparent); --mesh-c: color-mix(in srgb, #8b1e3f 70%, transparent); --mesh-d: color-mix(in srgb, #d4a05a 48%, transparent); --mesh-e: color-mix(in srgb, #e07a3a 40%, transparent); --mesh-f: color-mix(in srgb, #c43b5a 55%, transparent); --mesh-g: color-mix(in srgb, #d4a05a 36%, transparent); } .view[data-view="webhook"], #mesh-preview[data-preview="webhook"] { --mesh-a: color-mix(in srgb, #14b8a6 72%, transparent); --mesh-b: color-mix(in srgb, #3b82a8 58%, transparent); --mesh-c: color-mix(in srgb, #5eead4 45%, transparent); --mesh-d: color-mix(in srgb, #c43b5a 52%, transparent); --mesh-e: color-mix(in srgb, #3b82a8 42%, transparent); --mesh-f: color-mix(in srgb, #14b8a6 50%, transparent); --mesh-g: color-mix(in srgb, #5eead4 32%, transparent); } .view[data-view="corpus"], #mesh-preview[data-preview="corpus"] { --mesh-a: color-mix(in srgb, #4a3f8c 70%, transparent); --mesh-b: color-mix(in srgb, #c9a227 56%, transparent); --mesh-c: color-mix(in srgb, #1e1b4b 68%, transparent); --mesh-d: color-mix(in srgb, #e8c547 46%, transparent); --mesh-e: color-mix(in srgb, #c9a227 40%, transparent); --mesh-f: color-mix(in srgb, #4a3f8c 52%, transparent); --mesh-g: color-mix(in srgb, #e8c547 34%, transparent); } [data-theme="light"] .view[data-view="triage"], [data-theme="light"] #mesh-preview[data-preview="triage"] { --mesh-a: color-mix(in srgb, #d6456a 82%, transparent); --mesh-b: color-mix(in srgb, #e88842 68%, transparent); --mesh-c: color-mix(in srgb, #f29ab0 80%, transparent); --mesh-d: color-mix(in srgb, #e0ae5e 58%, transparent); --mesh-e: color-mix(in srgb, #e88842 48%, transparent); --mesh-f: color-mix(in srgb, #d6456a 58%, transparent); --mesh-g: color-mix(in srgb, #e0ae5e 42%, transparent); } [data-theme="light"] .view[data-view="webhook"], [data-theme="light"] #mesh-preview[data-preview="webhook"] { --mesh-a: color-mix(in srgb, #0e8a7a 78%, transparent); --mesh-b: color-mix(in srgb, #3f8fb8 66%, transparent); --mesh-c: color-mix(in srgb, #4fd4bc 72%, transparent); --mesh-d: color-mix(in srgb, #d6456a 58%, transparent); --mesh-e: color-mix(in srgb, #3f8fb8 48%, transparent); --mesh-f: color-mix(in srgb, #0e8a7a 56%, transparent); --mesh-g: color-mix(in srgb, #4fd4bc 40%, transparent); } [data-theme="light"] .view[data-view="corpus"], [data-theme="light"] #mesh-preview[data-preview="corpus"] { --mesh-a: color-mix(in srgb, #5b56b0 78%, transparent); --mesh-b: color-mix(in srgb, #d4b45a 66%, transparent); --mesh-c: color-mix(in srgb, #8b86c8 72%, transparent); --mesh-d: color-mix(in srgb, #e8c547 58%, transparent); --mesh-e: color-mix(in srgb, #d4b45a 48%, transparent); --mesh-f: color-mix(in srgb, #5b56b0 56%, transparent); --mesh-g: color-mix(in srgb, #e8c547 42%, transparent); } /* Fixed mesh: four soft orbs, drifted with transform (compositor-friendly). Avoids animating gradient stop positions, which forces full-layer repaints. */ .mesh { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* Case meshes yield to #mesh-preview instead of stacking under it. */ .view[data-view="triage"] > .mesh, .view[data-view="webhook"] > .mesh, .view[data-view="corpus"] > .mesh { opacity: 1; transition: opacity 0.45s ease; } html.mesh-previewing .view.active[data-view="triage"] > .mesh, html.mesh-previewing .view.active[data-view="webhook"] > .mesh, html.mesh-previewing .view.active[data-view="corpus"] > .mesh { opacity: 0; } /* Click handoff: swap preview → page mesh with no opacity blink. */ html.mesh-handoff #mesh-preview, html.mesh-handoff .view[data-view="triage"] > .mesh, html.mesh-handoff .view[data-view="webhook"] > .mesh, html.mesh-handoff .view[data-view="corpus"] > .mesh { transition: none !important; } .mesh__orb { position: absolute; border-radius: 50%; will-change: transform; backface-visibility: hidden; transform: translate3d(0, 0, 0); /* Soft multi-stop wash — no hard ellipse rim */ filter: blur(28px); } .mesh__orb--a { width: min(110vw, 62rem); height: min(88vw, 50rem); top: -28%; left: -30%; background: radial-gradient(ellipse at 50% 50%, var(--mesh-a) 0%, color-mix(in srgb, var(--mesh-a) 45%, transparent) 32%, transparent 62%); } .mesh__orb--b { width: min(104vw, 58rem); height: min(82vw, 46rem); top: -16%; right: -28%; left: auto; background: radial-gradient(ellipse at 50% 50%, var(--mesh-b) 0%, color-mix(in srgb, var(--mesh-b) 42%, transparent) 34%, transparent 64%); } .mesh__orb--c { width: min(118vw, 66rem); height: min(94vw, 54rem); bottom: -36%; right: -20%; top: auto; left: auto; background: radial-gradient(ellipse at 50% 50%, var(--mesh-c) 0%, color-mix(in srgb, var(--mesh-c) 40%, transparent) 36%, transparent 66%); } .mesh__orb--d { width: min(96vw, 54rem); height: min(78vw, 42rem); bottom: -26%; left: -24%; top: auto; background: radial-gradient(ellipse at 50% 50%, var(--mesh-d) 0%, color-mix(in srgb, var(--mesh-d) 38%, transparent) 34%, transparent 64%); } .mesh__orb--e { width: min(92vw, 50rem); height: min(74vw, 42rem); top: 22%; left: 26%; background: radial-gradient(ellipse at 50% 50%, var(--mesh-e) 0%, color-mix(in srgb, var(--mesh-e) 35%, transparent) 40%, transparent 68%); } .mesh__orb--f { width: min(86vw, 46rem); height: min(68vw, 38rem); top: 4%; left: 4%; background: radial-gradient(ellipse at 50% 50%, var(--mesh-f) 0%, color-mix(in srgb, var(--mesh-f) 36%, transparent) 38%, transparent 66%); } .mesh__orb--g { width: min(90vw, 48rem); height: min(72vw, 40rem); bottom: 8%; right: 4%; top: auto; left: auto; background: radial-gradient(ellipse at 50% 50%, var(--mesh-g) 0%, color-mix(in srgb, var(--mesh-g) 34%, transparent) 40%, transparent 68%); } /* Drift is JS-driven (Web Animations API) for randomized, non-periodic motion inside active case views only — see MeshDrift in the module script. The work-index hover preview (#mesh-preview) stays static. Reduced-motion is handled in JS (no drift scheduled). No CSS keyframe drift, so WAAPI transforms never fight a competing CSS animation on the same property. */ /* Global hover preview (work cards + nav case links). Colors stay on [data-preview] through the opacity fade-out; JS clears after transition. */ #mesh-preview { opacity: 0; transition: opacity 0.45s ease; } #mesh-preview.is-on { opacity: 1; } .wrap { max-width: var(--max); margin: 0 auto; padding: clamp(1.25rem, 2.5vw, 1.5rem) clamp(1.15rem, 2.5vw, 1.4rem) 5rem; } .draft { font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--warn); background: var(--warn-bg); display: inline-block; padding: 0.35rem 0.7rem; border-radius: 999px; margin-bottom: 1.25rem; } /* Work index (desktop): one viewport; .work-stage (eyebrow → cards) is a single block, vertically centered under the chrome. */ .view[data-view="work"].active { height: calc(var(--app-vh, 100svh) - var(--chrome-h)); max-height: calc(var(--app-vh, 100svh) - var(--chrome-h)); overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; } .view[data-view="work"] > .wrap { position: relative; z-index: 1; width: 100%; height: auto; max-height: 100%; box-sizing: border-box; margin: 0 auto; padding-top: clamp(1.5rem, 3vh, 2.5rem); padding-bottom: clamp(1.5rem, 3vh, 2.5rem); overflow: auto; } .work-stage { display: flex; flex-direction: column; gap: 0; } .view[data-view="work"] .home-hero { min-height: 0; max-height: none; padding: 0 0 1.75rem; justify-content: flex-start; } .view[data-view="work"] .home-hero .lede { margin-bottom: 0; } .view[data-view="work"] .index-label { margin: 0 0 0.85rem; } .view[data-view="work"] .index-grid { gap: 0.75rem; } .work-arch { margin: 1.1rem 0 0; max-width: 42rem; font-family: var(--sans); font-size: 0.88rem; line-height: 1.55; color: var(--ink-muted); } .work-arch code { font-family: var(--mono); font-size: 0.8em; color: var(--ink); } .work-arch__gh { display: inline-block; margin-left: 0.2rem; color: var(--burgundy-bright); text-decoration: none; font-weight: 600; } .work-arch__gh:hover { text-decoration: underline; } /* —— HOME hero —— */ .home-hero { min-height: min(72vh, 640px); display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.5rem, 3vw, 2rem) 0 clamp(2rem, 4vw, 3rem); position: relative; } .eyebrow { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--burgundy-bright); margin: 0 0 1rem; position: relative; } .home-hero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 7.2vw, 4.6rem); line-height: 0.98; letter-spacing: -0.035em; margin: 0 0 1.25rem; max-width: 14ch; position: relative; } .home-hero h1 em { font-style: normal; color: var(--burgundy-bright); background: linear-gradient(120deg, var(--burgundy-bright), #e8a0b0 80%); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-theme="light"] .home-hero h1 em { background: linear-gradient(120deg, var(--burgundy), var(--burgundy-bright)); -webkit-background-clip: text; background-clip: text; } .home-hero .lede { font-size: 1.15rem; color: var(--ink-muted); max-width: 75%; margin: 0 0 1.25rem; position: relative; } /* —— project index cards —— */ .index-label { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--burgundy-bright); margin: 0 0 1rem; } .index-grid { display: grid; gap: 1rem; } .card { display: grid; grid-template-columns: auto 1fr auto; gap: 1.25rem; align-items: center; text-align: left; width: 100%; border: 1px solid var(--rule); background: var(--panel); border-radius: var(--radius); padding: 1.35rem 1.4rem; cursor: pointer; color: inherit; transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease; } /* Mesh preview is the hover highlight; keep the card itself quiet. */ .card:hover, .card:focus-visible { border-color: color-mix(in srgb, var(--ink) 28%, var(--rule)); transform: translateY(-2px); background: color-mix(in srgb, var(--panel) 82%, transparent); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); outline: none; } .card .num { font-family: var(--display); font-weight: 800; font-size: 2rem; color: var(--burgundy-bright); line-height: 1; min-width: 2.2rem; } .card h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.35rem, 2.5vw, 1.75rem); margin: 0 0 0.35rem; letter-spacing: -0.02em; } .card p { margin: 0; font-family: var(--sans); font-size: 0.9rem; color: var(--ink-muted); } .card .go { font-family: var(--sans); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--burgundy-bright); } /* —— CASE STUDY layout —— */ /* Exactly one viewport under fixed chrome; mesh is viewport-fixed (view::before). */ .case-hero { position: relative; z-index: 1; box-sizing: border-box; height: calc(var(--app-vh, 100svh) - var(--chrome-h)); min-height: calc(var(--app-vh, 100svh) - var(--chrome-h)); display: flex; flex-direction: column; padding: 0 1.4rem; } .case-hero__inner { position: relative; z-index: 1; max-width: var(--max); width: 100%; margin: 0 auto; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-top: 1.25rem; } .case-hero__copy { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; position: relative; z-index: 1; padding-bottom: 0.5rem; } .case-hero .kicker { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--burgundy-bright); margin: 0 0 1.25rem; } .case-hero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 7.5vw, 5.4rem); line-height: 0.92; letter-spacing: -0.04em; margin: 0; max-width: 14ch; } .case-hero h1 em { font-style: italic; font-weight: 700; color: inherit; } .view[data-view="triage"] .case-hero h1 { max-width: 24ch; } .view[data-view="webhook"] .case-hero h1 { max-width: 12ch; } .view[data-view="corpus"] .case-hero h1 { max-width: 11ch; } .case-hero .sub { margin: 1.25rem 0 0; font-size: 1.15rem; color: var(--ink-muted); max-width: min(32rem, 100%); } .case-gh { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-muted); margin-top: 0.75rem; text-decoration: none; } .case-gh:hover { color: var(--burgundy-bright); } .case-gh svg { width: 0.95rem; height: 0.95rem; opacity: 0.8; flex-shrink: 0; } .case-hero .stack { margin: 1.15rem 0 0; max-width: min(42rem, 100%); } .case-scroll { position: relative; flex: 0 0 auto; align-self: center; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); text-decoration: none; background: none; border: none; cursor: pointer; padding: 0.65rem 0.5rem; margin: 0 0 calc(1.5rem + env(safe-area-inset-bottom, 0px)); } .case-scroll:hover { color: var(--burgundy-bright); } .case-scroll svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.75; animation: arrowBob 1.5s ease-in-out infinite; } @keyframes arrowBob { 0%, 100% { transform: translateY(0); opacity: 0.55; } 50% { transform: translateY(6px); opacity: 1; } } /* Paper sheet that scrolls up over the fixed viewport mesh */ .case-study { position: relative; z-index: 2; background: var(--paper); box-shadow: 0 -18px 40px color-mix(in srgb, #000 18%, transparent); } .case-study > .wrap { padding-top: 0.5rem; } .case-context { padding: 3.5rem 0; border-bottom: 1px solid var(--rule); /* case-scroll targets clear fixed nav + buffer */ scroll-margin-top: calc(var(--chrome-h) + 2.25rem); } /* Title above the split so facts align with the first paragraph, not the h2. */ .case-context > h2:first-child { font-family: var(--display); font-weight: 700; font-size: 1.8rem; letter-spacing: -0.02em; margin: 0 0 1rem; } .case-context__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2.5rem; align-items: start; } .case-context__copy h2 { font-family: var(--display); font-weight: 700; font-size: 1.8rem; letter-spacing: -0.02em; margin: 0 0 1rem; } .case-context p { color: var(--ink-muted); margin: 0 0 1rem; } .facts { list-style: none; padding: 0; margin: 0; font-family: var(--sans); font-size: 0.92rem; } .facts li { display: grid; grid-template-columns: 7rem 1fr; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); } .facts li:first-child { border-top: 1px solid var(--rule); } .facts .k { color: var(--burgundy-bright); font-weight: 600; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.08em; padding-top: 0.2rem; } .stack { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0 0; } /* Resume skills: primary (hot) row, then secondary (muted) on its own row */ .resume-skills { display: flex; flex-direction: column; gap: 0.4rem; margin: 1rem 0 0; } .resume-skills .stack { margin: 0; } .stack span { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.28rem 0.55rem; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-muted); background: var(--paper-deep); } .stack span.hot { border-color: color-mix(in srgb, var(--burgundy-bright) 55%, var(--rule)); color: var(--burgundy-bright); background: var(--burgundy-soft); } /* Beat .case-context p { margin: 0 0 1rem } — that rule was eating margin-top. */ .case-context p.jd-note { font-family: var(--sans); font-size: 0.78rem; color: var(--ink-muted); margin: 0; padding-top: 2.75rem; max-width: 52ch; line-height: 1.45; } .case-context p.jd-note strong { color: var(--ink); font-weight: 600; } .demo-block { padding: 3rem 0 1rem; } .demo-block .label { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--burgundy-bright); margin: 0 0 0.5rem; } .demo-block h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 1.25rem; letter-spacing: -0.02em; } .demo-stage { border: 1px solid var(--rule); border-radius: calc(var(--radius) + 2px); background: radial-gradient(ellipse 80% 60% at 0% 0%, color-mix(in srgb, var(--burgundy) 22%, transparent), transparent 55%), var(--panel); padding: 1.35rem 1.35rem 1.5rem; box-shadow: 0 24px 60px color-mix(in srgb, #000 35%, transparent); } /* Shared interactive-demo chrome (triage · webhook · corpus) */ .demo-panel { border: 1px solid var(--rule); border-radius: var(--radius); background: color-mix(in srgb, var(--paper) 55%, var(--panel)); padding: 1rem 1.05rem 1.1rem; display: flex; flex-direction: column; min-width: 0; } .demo-panel + .demo-panel { margin-top: 0.75rem; } .demo-panel__head { display: flex; align-items: flex-start; gap: 0.7rem; margin: 0 0 0.85rem; padding: 0 0 0.6rem; border-bottom: 1px solid var(--rule); } .demo-panel__num { font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; color: var(--burgundy-bright); line-height: 1.4; padding-top: 0.12rem; flex: 0 0 auto; } .demo-panel__titles { min-width: 0; flex: 1; } .demo-panel__title { font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin: 0; line-height: 1.3; } .demo-panel__sub { font-family: var(--sans); font-size: 0.82rem; color: var(--ink-muted); margin: 0.2rem 0 0; line-height: 1.4; } .demo-stack { display: flex; flex-direction: column; gap: 0.75rem; } .demo-stack > .demo-panel + .demo-panel { margin-top: 0; } .triage-stages > .demo-panel + .demo-panel { margin-top: 0; } .demo-row { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; margin-bottom: 0.9rem; } select, input[type="text"], textarea { font-family: var(--sans); font-size: 0.9rem; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.55rem 0.7rem; } textarea { width: 100%; min-height: 11rem; resize: vertical; line-height: 1.45; font-family: var(--serif); font-size: 0.95rem; } .triage-stages { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; } /* Layout-only; visual chrome comes from .demo-panel */ .triage-stage { min-width: 0; } .triage-meta { display: flex; flex-direction: column; gap: 0.35rem; margin: 0 0 0.85rem; padding: 0.55rem 0.7rem; border: 1px solid var(--rule); border-radius: var(--radius); background: color-mix(in srgb, var(--paper) 70%, transparent); } .triage-meta__line { font-family: var(--mono); font-size: 0.78rem; line-height: 1.45; color: var(--ink-muted); margin: 0; word-break: break-word; } .triage-meta__k { font-family: var(--sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--ink-muted) 85%, var(--ink)); margin-right: 0.45rem; } .triage-field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.75rem; } .triage-field label { font-family: var(--sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); } .triage-hint { font-family: var(--sans); font-size: 0.78rem; color: var(--warn); margin: -0.25rem 0 0.85rem; min-height: 1.15em; } .triage-hint:empty { display: none; } .triage-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; margin-top: 0.25rem; } .triage-stage--thinking .triage-trace { flex: 1; margin: 0; height: 22rem; max-height: 22rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.55rem; padding: 0.65rem 0.7rem; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); } .triage-trace__idle, .triage-trace__warn, .triage-trace__thinking { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-muted); margin: 0.35rem 0.15rem; line-height: 1.45; } .triage-trace__warn { color: var(--warn); } .triage-trace__thinking { display: flex; align-items: center; gap: 0.45rem; color: var(--ink); font-family: var(--mono); font-size: 0.8rem; } .triage-trace__thinking .hb-cursor { flex: 0 0 auto; height: 0.95em; align-self: center; } .triage-step { border-left: 2px solid color-mix(in srgb, var(--burgundy-bright) 70%, var(--rule)); padding: 0.35rem 0 0.45rem 0.7rem; margin: 0; } .triage-step__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem 0.65rem; margin-bottom: 0.28rem; } .triage-step__n { font-family: var(--mono); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.08em; color: var(--burgundy-bright); } .triage-step__title { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); } .triage-step__id { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-muted); } .triage-step__plain { font-family: var(--sans); font-size: 0.82rem; line-height: 1.45; color: var(--ink); margin: 0 0 0.35rem; } .triage-step__detail { font-family: var(--mono); font-size: 0.7rem; line-height: 1.4; color: var(--ink-muted); background: color-mix(in srgb, var(--paper-deep) 80%, var(--burgundy) 6%); border: 1px solid var(--rule); border-radius: calc(var(--radius) - 2px); padding: 0.45rem 0.55rem; margin: 0; white-space: pre-wrap; word-break: break-word; max-height: 5.6rem; overflow: hidden; } [data-theme="light"] .triage-step__detail { background: color-mix(in srgb, var(--paper-deep) 70%, var(--burgundy) 4%); } .triage-output__meta { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; margin-bottom: 0.75rem; } .triage-output__meta .metrics { flex: 1 1 100%; margin: 0.15rem 0 0; } .triage-class { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-muted); margin: 0 0 0.75rem; } .triage-class:empty { display: none; } .triage-draft { flex: 1; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); padding: 0.85rem 0.95rem; min-height: 10rem; } .triage-draft__idle { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-muted); margin: 0; } .triage-draft__subject { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; color: var(--burgundy-bright); margin: 0 0 0.55rem; letter-spacing: 0.02em; } .triage-draft__body { font-family: var(--serif); font-size: 0.95rem; line-height: 1.55; white-space: pre-wrap; margin: 0; color: var(--ink); } .triage-draft__note { font-family: var(--sans); font-size: 0.88rem; color: var(--ink-muted); margin: 0; line-height: 1.5; } .btn { font-family: var(--sans); font-weight: 700; font-size: 0.9rem; border: none; border-radius: var(--radius); padding: 0.6rem 1.15rem; cursor: pointer; transition: transform 0.15s, filter 0.15s; } .btn:active { transform: scale(0.98); } .btn-primary { background: linear-gradient(135deg, var(--burgundy-bright), var(--burgundy)); color: #fff; box-shadow: 0 8px 24px color-mix(in srgb, var(--burgundy) 45%, transparent); } .btn-primary:hover { filter: brightness(1.08); } .btn-ghost { background: transparent; color: var(--ink-muted); border: 1px solid var(--rule); } .btn:disabled { opacity: 0.5; cursor: wait; } .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.55rem; margin: 0.85rem 0; } @media (max-width: 640px) { .metrics { grid-template-columns: 1fr 1fr; } } .metric { background: var(--paper-deep); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.65rem 0.75rem; } .metric .lbl { font-family: var(--sans); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); } .metric .val { font-family: var(--mono); font-size: 1rem; margin-top: 0.2rem; } .log { font-family: var(--mono); font-size: 0.8rem; line-height: 1.5; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.85rem; max-height: 12rem; overflow: auto; white-space: pre-wrap; color: var(--ink-muted); } .log .ok { color: var(--ok); } .log .warn { color: var(--warn); } .gate { display: inline-block; font-family: var(--sans); font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.65rem; border-radius: 999px; } .gate.pass { background: var(--ok-bg); color: var(--ok); } .gate.fail { background: var(--warn-bg); color: var(--warn); } .gate.idle { background: var(--paper-deep); color: var(--ink-muted); } .pulse-bar { height: 7px; background: var(--paper-deep); border-radius: 99px; overflow: hidden; margin: 0.55rem 0 0.85rem; } .pulse-bar > i { display: block; height: 100%; width: 0%; position: relative; background-color: var(--burgundy); /* Default; JS sets a matching linear duration while a run is in progress */ transition: width 0.55s linear, background-color 0.28s ease; } /* Dark: burgundy → burgundy-bright → teal across the filled width. Stops are weighted so cyan reads clearly (was 0/50/100, which buried teal at the tip and looked solid red). Light: overlay fades out → solid burgundy underneath. Opacity crossfade keeps the theme toggle eased. */ .pulse-bar > i::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(90deg, var(--burgundy) 0%, var(--burgundy-bright) 34%, var(--teal) 88%); opacity: 1; transition: opacity 0.28s ease; pointer-events: none; } [data-theme="light"] .pulse-bar > i::after { opacity: 0; } .hb-owner-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--sans); font-size: 0.78rem; background: var(--burgundy-soft); border: 1px solid color-mix(in srgb, var(--burgundy-bright) 40%, var(--rule)); border-radius: 999px; padding: 0.2rem 0.65rem 0.2rem 0.25rem; } .hb-avatar { width: 1.35rem; height: 1.35rem; border-radius: 50%; background: linear-gradient(135deg, var(--burgundy-bright), var(--burgundy)); color: #fff; font-family: var(--sans); font-size: 0.65rem; font-weight: 700; display: grid; place-items: center; } .hb-clock { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-muted); margin: 0 0 0.65rem; display: flex; gap: 0.65rem; flex-wrap: wrap; align-items: baseline; } .hb-clock strong { color: var(--burgundy-bright); font-weight: 600; } .hb-split { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.65rem; align-items: stretch; margin-bottom: 0.85rem; } @media (max-width: 700px) { .hb-split { grid-template-columns: 1fr; } .hb-divider { display: none !important; } } .hb-col { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); padding: 0.75rem; display: flex; flex-direction: column; gap: 0.45rem; transition: border-color 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease, color 0.28s ease; } .hb-col.after.revealed { border-color: var(--teal); box-shadow: 0 0 0 1px color-mix(in srgb, var(--teal) 25%, transparent); } .hb-col-head { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.15rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--rule); } .hb-col-head .when { color: var(--burgundy-bright); font-family: var(--mono); letter-spacing: 0; text-transform: none; font-size: 0.74rem; } .hb-divider { display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--mono); font-size: 0.68rem; color: var(--ink-muted); gap: 0.35rem; min-width: 2.5rem; } .hb-divider .arrow { width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid var(--burgundy-bright); opacity: 0.45; transition: opacity 0.3s; } .hb-divider.lit .arrow { opacity: 1; } .hb-row { display: flex; align-items: flex-start; gap: 0.6rem; border: 1px solid var(--rule); border-radius: 6px; padding: 0.6rem 0.7rem; background: var(--paper-deep); cursor: pointer; transition: border-color 0.28s ease, background-color 0.28s ease, box-shadow 0.28s ease, opacity 0.28s ease, color 0.28s ease; } .hb-row:hover { border-color: color-mix(in srgb, var(--burgundy-bright) 45%, var(--rule)); } .hb-row:focus-visible { outline: 2px solid var(--burgundy-bright); outline-offset: 2px; } .hb-row.is-active { border-color: var(--burgundy-bright); background: color-mix(in srgb, var(--burgundy-soft) 55%, var(--paper-deep)); box-shadow: inset 3px 0 0 var(--burgundy-bright), 0 0 0 1px color-mix(in srgb, var(--burgundy-bright) 30%, transparent); } .hb-row.is-picked { border-color: var(--teal); background: color-mix(in srgb, var(--teal-dim) 35%, var(--paper-deep)); box-shadow: inset 3px 0 0 var(--teal); } .hb-row.is-replay { border-color: var(--teal); box-shadow: 0 0 0 1px color-mix(in srgb, var(--teal) 40%, transparent), inset 3px 0 0 var(--teal); } .hb-box { appearance: none; -webkit-appearance: none; flex: none; width: 1.05rem; height: 1.05rem; margin: 0.15rem 0 0; border: 1.5px solid var(--rule); border-radius: 4px; background: var(--paper); position: relative; pointer-events: none; transition: background-color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease; } .hb-box:checked { background: var(--teal); border-color: var(--teal); } .hb-box:checked::after { content: ""; position: absolute; left: 0.3rem; top: 0.03rem; width: 0.28rem; height: 0.52rem; border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(40deg); } .hb-row-body { flex: 1; min-width: 0; } .hb-row-top { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.2rem; } .hb-row-title { font-family: var(--sans); font-weight: 600; font-size: 0.86rem; color: var(--ink); } .hb-tag { font-family: var(--sans); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap; transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease; } .hb-tag-agent { color: var(--teal); background: var(--ok-bg); border: 1px solid color-mix(in srgb, var(--teal) 45%, var(--rule)); } .hb-tag-human { color: var(--burgundy-bright); background: var(--burgundy-soft); border: 1px solid color-mix(in srgb, var(--burgundy-bright) 45%, var(--rule)); } .hb-row-desc { font-family: var(--sans); font-size: 0.76rem; color: var(--ink-muted); line-height: 1.4; margin: 0 0 0.3rem; } .hb-row-meta { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-muted); margin: 0; } .hb-row-meta .on { color: var(--ok); font-weight: 600; } .hb-row-meta .off { color: var(--ink-muted); } .hb-row-meta .cleared { color: var(--ok); font-weight: 600; } .hb-placeholder { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-muted); text-align: center; padding: 2rem 0.5rem; opacity: 0.7; } .hb-term { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background-color: var(--hb-term-bg); margin-bottom: 0.35rem; } .hb-term-bar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.5rem 0.75rem; background-color: var(--paper-deep); border-bottom: 1px solid var(--rule); font-family: var(--sans); font-size: 0.72rem; color: var(--ink-muted); } .hb-term-bar .dots { display: flex; gap: 0.35rem; } .hb-term-bar .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: var(--rule); } .hb-term-bar .dot.r { background-color: #c43b5a; } .hb-term-bar .dot.y { background-color: #fdba74; } .hb-term-bar .dot.g { background-color: #22c55e; } .hb-term-bar .title { font-family: var(--mono); font-size: 0.7rem; color: var(--ink); } .hb-term-bar .phase { font-family: var(--mono); font-size: 0.68rem; color: var(--burgundy-bright); margin-left: auto; text-transform: lowercase; } .hb-term-body { padding: 0.85rem 1rem 1rem; font-family: var(--mono); font-size: 0.78rem; line-height: 1.55; height: 15rem; overflow-y: auto; background-color: var(--hb-term-bg); color: var(--hb-term-fg); } #corpus-hits { height: 16rem; overflow-y: auto; margin: 0; padding: 0.15rem 0.35rem 0.35rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel); } #corpus-hits:empty { display: flex; align-items: center; justify-content: center; } #corpus-hits:empty::before { content: "Retrieved shelf hits land here."; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-muted); } .hb-term-body .line { margin: 0 0 0.4rem; color: var(--hb-term-fg); } .hb-term-body .line:last-child { margin-bottom: 0; } .hb-term-body .line.ok { color: var(--teal); } .hb-term-body .line.warn { color: var(--warn); } .hb-term-body .line.muted { color: var(--hb-term-muted); } .hb-term-body .line strong { color: var(--hb-term-strong); font-weight: 600; } .hb-cursor { display: inline-block; width: 0.5em; margin-left: 0.15em; background-color: var(--teal); animation: hbBlink 1s step-end infinite; } @keyframes hbBlink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .hb-cursor { animation: none; } } .corpus-hit { border-left: 3px solid var(--burgundy-bright); padding: 0.55rem 0.85rem; margin: 0.45rem 0; background: var(--paper-deep); font-size: 0.92rem; } #corpus-hits .corpus-hit { margin-left: 0.2rem; margin-right: 0.2rem; } .corpus-hit .src { font-family: var(--sans); font-size: 0.68rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.07em; } .corpus-hit__via { font-family: var(--mono); font-size: 0.62rem; color: var(--burgundy-bright); text-transform: none; letter-spacing: 0; margin-left: 0.4rem; } /* —— Demo route presets (triage + corpus) —— */ .demo-route-label { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 0.55rem; } .corpus-presets { display: grid; gap: 0.55rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: 0 0 0.85rem; } .corpus-preset { display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-start; text-align: left; cursor: pointer; padding: 0.7rem 0.85rem; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--paper-deep); color: var(--ink); } .corpus-preset:hover { border-color: var(--burgundy-bright); background: color-mix(in srgb, var(--burgundy-soft) 55%, var(--paper-deep)); } .corpus-preset:focus-visible { outline: 2px solid var(--burgundy-bright); outline-offset: 2px; } .corpus-preset[aria-pressed="true"] { border-color: var(--burgundy-bright); box-shadow: inset 3px 0 0 var(--burgundy-bright); background: color-mix(in srgb, var(--burgundy-soft) 55%, var(--paper-deep)); } .corpus-preset__q { font-family: var(--sans); font-size: 0.9rem; font-weight: 600; line-height: 1.3; } .corpus-preset__tag { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--burgundy-bright); } .hb-term-body .line.q { color: var(--hb-term-strong); } .hb-term-body .line.q strong { color: var(--teal); } .corpus-answer { margin-top: 0; padding: 0.85rem 1rem; border: 1px solid color-mix(in srgb, var(--teal) 45%, var(--rule)); border-left: 4px solid var(--teal); border-radius: var(--radius); background: var(--paper-deep); } .corpus-answer.stop { border-color: color-mix(in srgb, var(--warn) 55%, var(--rule)); border-left-color: var(--warn); } .corpus-answer__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.5rem; } .corpus-answer__head .badge { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.04em; text-transform: none; color: var(--teal); } .corpus-answer.stop .badge { color: var(--warn); } .corpus-answer p { margin: 0 0 0.5rem; font-size: 0.92rem; } .corpus-answer ul { margin: 0.35rem 0 0.5rem; padding-left: 1.1rem; } .corpus-answer li { margin: 0 0 0.45rem; font-size: 0.9rem; line-height: 1.5; } .corpus-answer cite { font-style: normal; font-family: var(--mono); font-size: 0.68rem; color: var(--burgundy-bright); white-space: nowrap; } .corpus-answer__foot { font-family: var(--sans); font-size: 0.72rem; color: var(--ink-muted); margin: 0.35rem 0 0; padding-top: 0.5rem; border-top: 1px solid var(--rule); } .resume-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) auto; gap: 2rem 3rem; align-items: center; } .resume-intro__copy { text-align: left; min-width: 0; } .resume-portrait { width: clamp(12.5rem, 28vw, 17.5rem); height: clamp(12.5rem, 28vw, 17.5rem); border-radius: 50%; object-fit: cover; object-position: 50% 42%; border: 2px solid color-mix(in srgb, var(--burgundy-bright) 55%, var(--rule)); box-shadow: 0 16px 48px color-mix(in srgb, var(--burgundy) 28%, transparent), 0 0 0 6px color-mix(in srgb, var(--burgundy-soft) 70%, transparent); flex-shrink: 0; justify-self: end; } /* —— mobile / compact (no hamburger): wrap chrome, stack grids —— */ @media (max-width: 720px) { body { font-size: 16px; line-height: 1.5; } /* Brand row, then nav + theme — flex-wrap; --chrome-h follows via measureChrome */ .chrome { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 0.75rem; row-gap: 0.55rem; padding: 0.7rem 1rem; } .chrome .mark { grid-column: unset; justify-self: unset; flex: 1 1 100%; min-width: 0; font-size: 0.62rem; letter-spacing: 0.12em; } .chrome nav { grid-column: unset; justify-self: unset; order: 2; flex: 1 1 auto; min-width: 0; gap: 1.15rem; font-size: 0.8rem; justify-content: flex-start; } .theme-toggle { grid-column: unset; justify-self: unset; order: 3; --tt-w: 4.15rem; --tt-h: 2.15rem; --tt-pad: 0.24rem; --tt-thumb: 1.65rem; } .theme-toggle__icon { width: 0.64rem; height: 0.64rem; } .theme-toggle__icon--moon { width: 0.8rem; height: 0.8rem; } .nav-work__menu { left: 0; transform: none; min-width: min(16rem, calc(100vw - 2rem)); } .wrap { padding: clamp(1rem, 3.5vw, 1.35rem) clamp(1rem, 3.5vw, 1.25rem) 4rem; } /* Mobile work index: natural document scroll — don’t clip content. */ .view[data-view="work"].active { height: auto; max-height: none; overflow: visible; display: block; justify-content: unset; } .view[data-view="work"] > .wrap { max-height: none; overflow: visible; padding-top: clamp(1.25rem, 4vw, 1.75rem); padding-bottom: 3.5rem; } .home-hero { min-height: min(calc(var(--app-vh, 100vh) * 0.58), 480px); padding: clamp(1.25rem, 4vw, 2rem) 0 clamp(1.5rem, 4vw, 2.5rem); } .view[data-view="work"] .home-hero { min-height: 0; padding: 0 0 1.35rem; } .home-hero h1 { font-size: clamp(2.15rem, 9.5vw, 3.4rem); margin-bottom: 1rem; } .view[data-view="work"] .home-hero h1 { font-size: clamp(1.85rem, 8.5vw, 2.8rem); margin-bottom: 0.75rem; } .home-hero .lede { font-size: 1.05rem; margin-bottom: 1.5rem; } .view[data-view="work"] .home-hero .lede { font-size: 0.98rem; margin-bottom: 0; } .view[data-view="work"] .card { padding: 0.9rem 1rem; } .card { grid-template-columns: auto 1fr; gap: 0.85rem 1rem; padding: 1.1rem 1.15rem; align-items: start; } .card .num { font-size: 1.65rem; min-width: 1.8rem; } .card h2 { font-size: clamp(1.2rem, 4.5vw, 1.45rem); } .card .go { grid-column: 2; justify-self: start; margin-top: 0.15rem; } .case-hero { padding: 0 clamp(1rem, 3.5vw, 1.25rem); } .case-hero__inner { padding-top: 0.85rem; } .case-hero h1 { font-size: clamp(2rem, 10vw, 3.6rem); } .case-hero .sub { font-size: 1.05rem; margin-top: 1rem; } .case-hero .kicker { margin-bottom: 0.9rem; } .case-context { padding: 2.25rem 0; } .case-context__grid { grid-template-columns: 1fr; gap: 1.35rem; } .case-context > h2:first-child, .case-context__copy h2 { font-size: 1.5rem; } .facts li { grid-template-columns: 5.5rem 1fr; gap: 0.55rem; padding: 0.65rem 0; } .demo-block { padding: 2.25rem 0 0.75rem; } .demo-stage { padding: 1.1rem 1.05rem 1.25rem; } .resume-intro { grid-template-columns: 1fr; gap: 1.75rem; justify-items: start; } .resume-portrait { order: -1; width: clamp(10rem, 42vw, 13.5rem); height: clamp(10rem, 42vw, 13.5rem); justify-self: start; } .resume-hero { padding: clamp(1.5rem, 5vw, 2.25rem) 0 clamp(1.1rem, 3vw, 1.4rem); margin-bottom: 1.5rem; } .resume-intro__copy h1 { font-size: clamp(2.1rem, 8vw, 2.8rem); } .resume-summary { margin-top: 1.15rem; font-size: 1rem; } .resume-section { margin: 1.75rem 0; } .resume-job__title { font-size: 1.2rem; } .resume-job__head { gap: 0.2rem 0.75rem; } } .poem { border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.25rem 1.4rem; background: var(--panel); margin: 1.25rem 0; max-width: 34rem; border-top: 3px solid var(--burgundy-bright); } .poem h4 { font-family: var(--display); margin: 0 0 0.65rem; } .poem pre { font-family: var(--serif); white-space: pre-wrap; margin: 0; line-height: 1.7; } /* —— Resume (site typography, not a PDF attach) —— */ .resume-hero { padding: clamp(1.75rem, 3.5vw, 2.5rem) 0 clamp(1.15rem, 2.5vw, 1.5rem); border-bottom: 1px solid var(--rule); margin-bottom: 2rem; } .resume-hero .eyebrow { margin-bottom: 1.25rem; } .resume-intro__copy h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.4rem); letter-spacing: -0.03em; margin: 0 0 0.75rem; line-height: 1.05; } .resume-meta { font-family: var(--sans); font-size: 0.9rem; color: var(--ink-muted); margin: 0 0 0.35rem; } .resume-meta a { color: var(--burgundy-bright); } .resume-summary { margin: 1.5rem 0 0; max-width: 58ch; color: var(--ink-muted); font-size: 1.05rem; } .resume-section { margin: 2.25rem 0; } .resume-section > h2 { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--burgundy-bright); margin: 0 0 1.1rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--rule); } .resume-job { margin: 0 0 1.85rem; } .resume-job:last-child { margin-bottom: 0; } .resume-job__head { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; align-items: baseline; justify-content: space-between; margin-bottom: 0.35rem; } .resume-job__title { font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; margin: 0; } .resume-job__dates { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-muted); } .resume-job__org { font-family: var(--sans); font-size: 0.92rem; color: var(--ink-muted); margin: 0 0 0.75rem; } .resume-job ul { margin: 0; padding: 0 0 0 1.15rem; color: var(--ink-muted); max-width: 62ch; } .resume-job li { margin: 0 0 0.45rem; } .resume-job li::marker { color: var(--burgundy-bright); } .resume-job a { color: var(--burgundy-bright); text-decoration: underline; text-underline-offset: 0.14em; text-decoration-thickness: 1px; } .resume-job a:hover { color: var(--ink); } .resume-edu { font-family: var(--serif); color: var(--ink-muted); max-width: 48ch; } .resume-edu strong { color: var(--ink); font-weight: 600; } /* —— Contact —— */ .contact-hero { padding: clamp(1.75rem, 3.5vw, 2.5rem) 0 0.85rem; margin-bottom: 0; } .contact-hero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.2rem); letter-spacing: -0.03em; margin: 0 0 0.65rem; line-height: 1.05; } .contact-lede { margin: 0 0 1.35rem; max-width: 75%; font-family: var(--serif); font-size: 1.05rem; line-height: 1.5; color: var(--ink-muted); } .contact-list { margin: 0; padding: 0; max-width: 36rem; } .contact-list__row { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.75rem 1.25rem; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); margin: 0; } .contact-list__row:first-child { border-top: 1px solid var(--rule); } .contact-list dt { margin: 0; font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); align-self: center; } .contact-list dd { margin: 0; font-family: var(--serif); font-size: 1.02rem; color: var(--ink); } .contact-list a { color: var(--ink); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--burgundy-bright) 45%, transparent); } .contact-list a:hover { color: var(--burgundy-bright); } /* —— Demo hook copy (all case studies) —— */ .wh-hook { margin: 0 0 1.1rem; max-width: 75%; font-family: var(--serif); font-size: 1.05rem; line-height: 1.5; color: var(--ink-muted); } .wh-hook strong { color: var(--ink); font-weight: 600; } @media (max-width: 720px) { .wh-hook, .home-hero .lede, .case-hero .sub, .contact-lede { max-width: 100%; } } .wh-demo-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem 1rem; margin-bottom: 0.65rem; } .wh-demo-top .demo-row { margin: 0; flex: 1 1 auto; } .wh-clock { margin-left: auto; font-family: var(--mono); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; color: var(--burgundy-bright); background: var(--paper-deep); border: 1px solid var(--rule); border-radius: 999px; padding: 0.35rem 0.75rem; min-width: 7.5rem; text-align: center; } .wh-clock[data-running="true"] { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--rule)); } .wh-scrub { display: grid; grid-template-columns: auto 1fr auto; gap: 0.65rem; align-items: center; margin: 0 0 1rem; font-family: var(--mono); font-size: 0.68rem; color: var(--ink-muted); } .wh-scrub input[type="range"] { width: 100%; accent-color: var(--burgundy-bright); cursor: pointer; } .wh-cols { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; column-gap: 0.85rem; row-gap: 0.65rem; margin: 0 0 1rem; align-items: start; } /* display:contents so board + Slack rows stay level across columns */ .wh-col { display: contents; min-width: 0; } .wh-col.before > *:nth-child(1) { grid-column: 1; grid-row: 1; } .wh-col.before > *:nth-child(2) { grid-column: 1; grid-row: 2; } .wh-col.before > *:nth-child(3) { grid-column: 1; grid-row: 3; } .wh-col.after > *:nth-child(1) { grid-column: 2; grid-row: 1; } .wh-col.after > *:nth-child(2) { grid-column: 2; grid-row: 2; } .wh-col.after > *:nth-child(3) { grid-column: 2; grid-row: 3; } @media (max-width: 720px) { .wh-cols { display: flex; flex-direction: column; gap: 0.85rem; } .wh-col { display: flex; flex-direction: column; gap: 0.65rem; } .wh-col.before > *, .wh-col.after > * { grid-column: auto; grid-row: auto; } } .wh-col-head { margin: 0; display: flex; flex-direction: column; gap: 0.18rem; } .wh-col-head__title { font-family: var(--display); font-weight: 800; font-size: clamp(1.35rem, 2.5vw, 1.7rem); letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); } .wh-col-head__sub { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); } .wh-col.after .wh-col-head__title { color: var(--ok); } .wh-win { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel); overflow: hidden; } .wh-win__chrome { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--paper-deep); border-bottom: 1px solid var(--rule); font-family: var(--sans); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); } .wh-win__chrome .tag { display: inline-flex; align-items: center; gap: 0.28rem; font-family: var(--mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 0.15rem 0.5rem 0.15rem 0.45rem; border-radius: 999px; border: 1px solid var(--rule); } .wh-win__chrome .tag-ico { width: 0.72rem; height: 0.72rem; flex: 0 0 auto; display: block; } .wh-col.before .tag { color: var(--burgundy-bright); border-color: color-mix(in srgb, var(--burgundy-bright) 55%, var(--rule)); background: color-mix(in srgb, var(--burgundy-soft) 70%, transparent); } .wh-col.before .tag[data-fresh="true"] { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, var(--rule)); background: color-mix(in srgb, var(--ok-bg) 55%, transparent); } .wh-col.before .tag .tag-label { font-size: 0; } .wh-col.before .tag .tag-label::before { font-size: 0.62rem; content: "stale"; } .wh-col.before .tag[data-fresh="true"] .tag-label::before { content: "live"; } .wh-col.before .tag[data-fresh="true"] .tag-ico-x { display: none; } .wh-col.before .tag[data-fresh="true"] .tag-ico-check { display: block; } .wh-col.before .tag .tag-ico-check { display: none; } .wh-col.before .tag[data-fresh="false"] .tag-ico-x { display: block; } .wh-col.after .tag { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, var(--rule)); background: color-mix(in srgb, var(--ok-bg) 55%, transparent); } .wh-dash { padding: 0.9rem 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; } .wh-dash-kicker { font-family: var(--sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); margin: 0; } .wh-dash-title { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; margin: 0; color: var(--ink); } .wh-dash-status { font-family: var(--display); font-weight: 700; font-size: clamp(1.2rem, 2.4vw, 1.45rem); letter-spacing: -0.02em; line-height: 1.15; margin: 0.1rem 0; color: var(--ink); } .wh-col.after .wh-dash-status { color: var(--ok); } .wh-dash-meta { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-muted); margin: 0 0 0.25rem; } .wh-assignee { display: flex; align-items: center; gap: 0.5rem; margin: 0.1rem 0 0.25rem; font-family: var(--sans); font-size: 0.82rem; color: var(--ink-muted); } .wh-assignee strong { color: var(--ink); font-weight: 600; } .wh-avatar { width: 1.45rem; height: 1.45rem; border-radius: 50%; background: linear-gradient(135deg, var(--burgundy-bright), var(--burgundy)); color: #fff; font-family: var(--sans); font-size: 0.62rem; font-weight: 700; display: grid; place-items: center; flex: 0 0 auto; } .wh-stages { display: flex; flex-wrap: wrap; gap: 0.35rem; } .wh-pill { font-family: var(--mono); font-size: 0.62rem; padding: 0.25rem 0.45rem; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-muted); background: var(--paper-deep); opacity: 0.42; } .wh-pill.lit { opacity: 1; color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, var(--rule)); background: var(--ok-bg); } .wh-win--slack { display: flex; flex-direction: column; background: var(--panel); } .wh-win--slack .wh-win__chrome { text-transform: none; letter-spacing: 0; font-weight: 700; font-size: 0.82rem; color: var(--ink); gap: 0.4rem; } .wh-slack-hash { color: var(--ink-muted); font-weight: 600; margin-right: 0.1rem; } .wh-slack { display: flex; flex-direction: column; flex: 1; min-height: 0; } .wh-slack__thread { height: 14.5rem; overflow-y: auto; padding: 0.55rem 0.15rem 0.55rem 0; display: flex; flex-direction: column; gap: 0.05rem; scrollbar-gutter: stable; } .wh-slack__msg { display: grid; grid-template-columns: 2.05rem 1fr; gap: 0.45rem 0.55rem; padding: 0.35rem 0.75rem; font-family: var(--sans); font-size: 0.84rem; line-height: 1.4; color: var(--ink); animation: whSlackIn 0.3s ease; } .wh-slack__msg:hover { background: color-mix(in srgb, var(--paper-deep) 55%, transparent); } .wh-slack__ava { width: 2.05rem; height: 2.05rem; border-radius: 0.35rem; display: grid; place-items: center; font-size: 0.62rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--burgundy-bright), var(--burgundy)); margin-top: 0.1rem; } .wh-slack__msg[data-kind="in"] .wh-slack__ava { background: linear-gradient(135deg, #5b6abf, #3d4a8f); } .wh-col.after .wh-slack__msg[data-kind="in"] .wh-slack__ava { background: linear-gradient(135deg, #3d9b7a, #2a6f56); } .wh-slack__body { min-width: 0; } .wh-slack__head { display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; margin: 0 0 0.1rem; } .wh-slack__name { font-weight: 800; font-size: 0.84rem; color: var(--ink); } .wh-slack__time { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-muted); } .wh-slack__text { margin: 0; } .wh-slack__text strong { font-weight: 700; color: color-mix(in srgb, var(--burgundy-bright) 75%, var(--ink)); background: color-mix(in srgb, var(--burgundy-soft) 45%, transparent); padding: 0.05rem 0.2rem; border-radius: 3px; } .wh-col.after .wh-slack__text strong { color: color-mix(in srgb, var(--ok) 70%, var(--ink)); background: color-mix(in srgb, var(--ok-bg) 55%, transparent); } @keyframes whSlackIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }