/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 * genre: modern-minimal · macrostructure: Workbench · theme: Cobalt * nav: N13 bordered + working ⌘K · footer: Ft2 inline · enrichment: none (real code + real output) * accent hue: electric cobalt · paper band: cool light · display: grotesk-sans * * Deviation from the Cobalt spec, deliberate: no traffic-light window chrome on * code cards. Global discipline 4 / slop-test gate 47 forbid re-drawn UI chrome, * and that outranks the theme's decorative preference. Code cards get a hairline * and a real mono filename instead. */ *, *::before, *::after { box-sizing: border-box; } html, body { overflow-x: clip; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--color-paper); color: var(--color-ink-2); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-style: normal; /* headings are always roman — gate 38a */ color: var(--color-ink); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); margin: 0; overflow-wrap: anywhere; min-width: 0; } p { margin: 0; } img, svg { max-width: 100%; height: auto; } a { color: inherit; } ::selection { background: var(--color-accent-wash); } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: var(--radius-sm); /* never animated — gate: focus rings that animate in */ } .skip { position: absolute; left: var(--space-sm); top: calc(-1 * var(--space-3xl)); z-index: calc(var(--z-overlay) + 1); background: var(--color-ink); color: var(--color-paper); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-md); font: 500 var(--text-sm)/1 var(--font-body); text-decoration: none; transition: top var(--dur-fast) var(--ease-out); } .skip:focus { top: var(--space-sm); } .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--space-md); } @media (min-width: 900px) { .shell { padding-inline: var(--space-lg); } } .mono-label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--color-ink-3); } .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ── Reveal — the whole motion engine ─────────────────────────────────── */ /* Progressive enhancement: content is visible by default and only starts hidden once site.js has confirmed it can reveal it again (it sets .has-reveal on ). Hiding first would mean a failed script, a blocked CDN or a no-JS reader loses the code samples entirely. */ :root.has-reveal .reveal { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } :root.has-reveal .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { :root.has-reveal .reveal { opacity: 1; transform: none; transition: none; } } /* ── N13 · bordered nav + working ⌘K ──────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: var(--z-nav); background: color-mix(in oklab, var(--color-paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: var(--rule-hair) solid var(--color-rule); } .nav__in { display: flex; align-items: center; gap: var(--space-md); height: 58px; } .nav__mark { display: inline-flex; align-items: baseline; gap: var(--space-3xs); font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); color: var(--color-ink); letter-spacing: var(--tracking-tight); text-decoration: none; white-space: nowrap; } .nav__mark b { color: var(--color-accent-text); font-weight: 600; } .nav__links { display: none; gap: var(--space-md); margin-left: var(--space-sm); } @media (min-width: 860px) { .nav__links { display: flex; } } .nav__link { position: relative; text-decoration: none; white-space: nowrap; font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); padding-block: var(--space-3xs); transition: color var(--dur-fast) var(--ease-out); } .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-mid) var(--ease-out); } .nav__link:hover { color: var(--color-ink); } .nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); } .nav__link[aria-current="page"] { color: var(--color-ink); } .nav__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-2xs); } .kbd-trigger { display: inline-flex; align-items: center; gap: var(--space-2xs); height: 34px; padding-inline: var(--space-2xs) var(--space-3xs); background: var(--color-paper); color: var(--color-ink-3); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-md); font: 400 var(--text-sm)/1 var(--font-body); cursor: pointer; white-space: nowrap; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .kbd-trigger:hover { border-color: var(--color-accent); color: var(--color-ink); } .kbd-trigger span { display: none; } @media (min-width: 560px) { .kbd-trigger span { display: inline; } } kbd { font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1; padding: 4px 5px; border-radius: var(--radius-sm); border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper-2); color: var(--color-ink-3); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs); height: 38px; padding-inline: var(--space-sm); border-radius: var(--radius-md); border: var(--rule-hair) solid transparent; font: 500 var(--text-sm)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .btn--primary { background: var(--color-accent); color: var(--color-accent-ink); } .btn--primary:hover { background: var(--color-accent-hi); } .btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-rule-2); } .btn--ghost:hover { border-color: var(--color-ink-3); } .btn--on-dark { background: transparent; color: var(--color-on-dark); border-color: var(--color-rule-dark); } .btn--on-dark:hover { border-color: var(--color-accent-lift); color: var(--color-paper); } .btn:active { transform: translateY(1px); } @media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } } .nav .btn { height: 34px; } /* ── Hero — title left, real terminal output right ────────────────────── */ .hero { padding-block: var(--space-2xl) var(--space-xl); } @media (min-width: 900px) { .hero { padding-block: var(--space-3xl) var(--space-2xl); } } .hero__grid { display: grid; gap: var(--space-xl); align-items: start; } /* Grid/flex children default to min-width:auto, so one long unbreakable run of text or a wide code block widens the whole track past the viewport. Every grid child here is allowed to shrink; overflow is handled inside the code card's own scroller. */ .hero__grid > * { min-width: 0; } @media (min-width: 1000px) { .hero__grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: var(--space-2xl); } } .hero__eyebrow { display: flex; align-items: flex-start; gap: var(--space-2xs); margin-bottom: var(--space-md); } .hero__eyebrow .mono-label { min-width: 0; overflow-wrap: anywhere; } .hero__tick { width: 6px; height: 6px; border-radius: 1px; background: var(--color-accent); flex: none; margin-top: 0.42em; } .hero h1 { font-size: var(--text-display); letter-spacing: var(--tracking-tighter); font-weight: 600; line-height: var(--leading-tight); } .hero__lede { margin-top: var(--space-md); font-size: var(--text-md); color: var(--color-ink-2); max-width: 46ch; overflow-wrap: anywhere; } .hero__lede strong { color: var(--color-ink); font-weight: 600; } .hero__cta { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-2xs); } .hero__meta { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); } .hero__meta div { display: flex; flex-direction: column; gap: 2px; } .hero__meta b { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--color-ink); letter-spacing: var(--tracking-tight); } /* ── Code surfaces ────────────────────────────────────────────────────── */ .code { background: var(--color-graphite); border: var(--rule-hair) solid var(--color-rule-dark); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 1px 2px oklch(24% 0.02 258 / 0.06); } .code__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-2xs) var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule-dark); background: var(--color-graphite-2); } .code__name { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-mono); color: var(--color-on-dark-3); text-transform: none; } .chip { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--tracking-mono); text-transform: uppercase; padding: 3px 7px; border-radius: var(--radius-sm); border: var(--rule-hair) solid var(--color-accent); color: var(--color-accent-lift); white-space: nowrap; } .code pre { margin: 0; padding: var(--space-sm) var(--space-md) var(--space-md); overflow-x: auto; -webkit-overflow-scrolling: touch; font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.72; color: var(--color-on-dark-2); tab-size: 2; } .code pre code { font: inherit; color: inherit; } .tok-k { color: var(--color-tok-key); } .tok-s { color: var(--color-tok-str); } .tok-n { color: var(--color-tok-num); } .tok-c { color: var(--color-tok-com); } .tok-f { color: var(--color-tok-fn); } .tok-ok { color: var(--color-accent-lift); font-weight: 500; } .tok-w { color: var(--color-on-dark); } .caret { display: inline-block; width: 7px; height: 1.05em; vertical-align: -0.16em; background: var(--color-accent-lift); animation: blink 1.05s steps(2, start) infinite; } @keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .caret { animation: none; opacity: 1; } } /* ── Section furniture ────────────────────────────────────────────────── */ .band { padding-block: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); } @media (min-width: 900px) { .band { padding-block: var(--space-3xl); } } .band--tight { padding-block: var(--space-xl); } .band--dark { background: var(--color-graphite); color: var(--color-on-dark-2); border-top: none; border-block: var(--rule-hair) solid var(--color-rule-dark); } .band--dark h2, .band--dark h3, .band--dark b { color: var(--color-on-dark); } .band--dark .mono-label { color: var(--color-on-dark-3); } .head { max-width: var(--measure); margin-bottom: var(--space-xl); } .head h2 { font-size: var(--text-3xl); font-weight: 600; letter-spacing: var(--tracking-tight); } .head p { margin-top: var(--space-sm); color: var(--color-ink-3); max-width: 60ch; } .band--dark .head p { color: var(--color-on-dark-2); } /* ── Workbench — the guided tour ──────────────────────────────────────── */ .step { display: grid; gap: var(--space-lg); align-items: start; padding-block: var(--space-xl); } .step > * { min-width: 0; } .step + .step { border-top: var(--rule-hair) solid var(--color-rule); } @media (min-width: 980px) { .step { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-2xl); } /* Flipped steps swap the track widths as well as the order, so the code card always lands in the wider column — it is the primary content here, and a narrow track clips its comments into the horizontal scroller. */ .step--flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } .step--flip > .step__note { order: 2; } .step--flip > .step__demo { order: 1; } } .step__note h3 { font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--space-2xs); } .step__note p { color: var(--color-ink-3); } .step__note p + p { margin-top: var(--space-sm); } .step__note code, .prose-inline code { font-family: var(--font-mono); font-size: 0.875em; background: var(--color-paper-3); color: var(--color-ink); padding: 2px 5px; border-radius: var(--radius-sm); } .step__demo { min-width: 0; } /* ── Figures / proof rows ─────────────────────────────────────────────── */ .rows { border-top: var(--rule-hair) solid var(--color-rule-dark); } .row { display: grid; gap: var(--space-3xs) var(--space-md); align-items: baseline; padding-block: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule-dark); grid-template-columns: minmax(0, 1fr) auto; } .row__k { font-size: var(--text-sm); color: var(--color-on-dark-2); min-width: 0; } .row__v { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; color: var(--color-accent-lift); white-space: nowrap; } .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.data { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 480px; } table.data th, table.data td { text-align: left; padding: var(--space-2xs) var(--space-sm) var(--space-2xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); } table.data th { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--color-ink-3); } table.data td.num { font-family: var(--font-mono); text-align: right; white-space: nowrap; } table.data td.hl { color: var(--color-accent-text); font-weight: 500; } /* ── Scope / limits list ──────────────────────────────────────────────── */ .limits { display: grid; gap: 0; border-top: var(--rule-hair) solid var(--color-rule); } .limits li { display: grid; gap: var(--space-3xs) var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); } @media (min-width: 760px) { .limits li { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); } } .limits b { font-family: var(--font-display); font-weight: 600; color: var(--color-ink); font-size: var(--text-base); } .limits span { color: var(--color-ink-3); } ul.limits { list-style: none; margin: 0; padding: 0; } /* ── Doc cards ────────────────────────────────────────────────────────── */ .cards { display: grid; gap: var(--space-sm); } @media (min-width: 820px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .card { display: block; text-decoration: none; padding: var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-paper); transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .card:hover { border-color: var(--color-accent); background: var(--color-paper-2); } .card h3 { font-size: var(--text-lg); font-weight: 600; margin-block: var(--space-2xs) var(--space-3xs); } .card p { color: var(--color-ink-3); font-size: var(--text-sm); } .card__go { display: inline-block; margin-top: var(--space-sm); color: var(--color-accent-text); font-size: var(--text-sm); font-weight: 500; } /* ── Ft2 · inline footer ──────────────────────────────────────────────── */ .foot { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-lg); } .foot__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-md); } .foot__note { min-width: 0; } .foot__note { color: var(--color-ink-4); font-size: var(--text-sm); } .foot__links { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--space-md); } .foot__links a { font-size: var(--text-sm); color: var(--color-ink-3); text-decoration: none; white-space: nowrap; } .foot__links a:hover { color: var(--color-accent-text); } /* ── ⌘K command palette ───────────────────────────────────────────────── */ .pal[hidden] { display: none !important; } .pal { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; place-items: start center; padding: var(--space-md); padding-top: 12vh; } .pal__scrim { position: absolute; inset: 0; background: oklch(24% 0.02 258 / 0.32); backdrop-filter: blur(2px); } .pal__box { position: relative; width: 100%; max-width: 560px; background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 12px 40px oklch(24% 0.02 258 / 0.14); } .pal__input { width: 100%; border: 0; outline: 0; background: transparent; padding: var(--space-sm) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); font: 400 var(--text-md)/1.4 var(--font-mono); color: var(--color-ink); } .pal__input::placeholder { color: var(--color-ink-4); } .pal__list { list-style: none; margin: 0; padding: var(--space-3xs); max-height: 46vh; overflow-y: auto; } .pal__item { display: flex; align-items: baseline; gap: var(--space-2xs); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-md); cursor: pointer; scroll-margin: var(--space-2xs); } .pal__item[aria-selected="true"] { background: var(--color-accent-wash); } .pal__item[aria-selected="true"] .pal__t { color: var(--color-accent-hi); } .pal__t { font-size: var(--text-base); color: var(--color-ink); min-width: 0; } .pal__c { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--color-ink-4); white-space: nowrap; } .pal__empty { padding: var(--space-md); color: var(--color-ink-4); font-size: var(--text-sm); } /* ── Small utilities ──────────────────────────────────────────────────── */ /* Declared here rather than inlined so every colour and space in the markup resolves through a named token. */ .u-mt-sm { margin-top: var(--space-sm); } .u-mt-lg { margin-top: var(--space-lg); } .u-ruled { border-top: var(--rule-hair) solid var(--color-rule); margin-top: var(--space-lg); } .u-wide { max-width: none; } /* Inside the dark band the step furniture inverts. */ .band--dark .step__note h3 { color: var(--color-on-dark); } .band--dark .step__note p { color: var(--color-on-dark-2); } .band--dark .step__note code { background: var(--color-graphite-2); color: var(--color-on-dark); } /* ============================================================================ * docs-platform reconciliation * The shared platform supplies the theme toggle, copy controls and the global * motion guard. This site keeps its own shell, nav and ⌘K palette. * ========================================================================== */ /* The theme toggle sits with the other nav controls. */ .nav__right .dp-theme { margin-left: 0.25rem; } /* Code blocks converted to figures keep this site's own surface and its * hand-authored token colours; only the chrome comes from the platform. */ .dp-code { background: var(--color-graphite); border-color: var(--color-rule-dark); } .dp-code__bar { background: var(--color-graphite-2); border-color: var(--color-rule-dark); } .dp-code__lang { color: var(--color-on-dark-3); } .dp-code code { color: var(--color-on-dark); } .dp-code .dp-copy { color: var(--color-on-dark-3); } .dp-code .dp-copy:hover { color: var(--color-on-dark); background: var(--color-graphite); border-color: var(--color-rule-dark); }