/* hax-site.css — the CONTENT layer of the studio UI system: pages people read. * * Expects hax-ui.css (derived tokens) to be loaded first; this file adds no * values of its own — every colour is a token reference, and the build fails * on a hex. Light document context by default; `data-ui="dark"` on * flips the token set and everything here follows (a theme IS the token set, * Aaron 2026-09-03). The cover is a dark ground in both themes, like the form * banner it descends from, so the lockup and the switch read on it either way. * * First consumer: the wiki at wiki.hax.digital (2026-09-13). The shape is the * one the old Notion wiki had converged on and the forms ratified: a full-bleed * establishing cover with a mono kicker and the site menu in its bar, a branch's * pages as a sticky strip under it (the forms' nav), prose at a real measure, * and a service page as narrative beside facts. Rail tried and dropped the * same day (Aaron 2026-09-13): a standalone site gets a top menu. Cards are marked * by dividers, not boxes; sentence case; weight carries hierarchy. * * Registry: blueprints/ui-system/registry.json (context "site"). */ /* ---------- ground ---------- */ :root { color-scheme: light; } :root[data-ui="dark"] { color-scheme: dark; } .site { --gutter: clamp(20px, 4vw, 56px); --frame: 1280px; --col: 1040px; --cover-h: clamp(300px, 34vw, 420px); margin: 0; background: var(--ui-bg); color: var(--ui-ink); font-family: var(--font-display); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } .site *, .site *::before, .site *::after { box-sizing: border-box; } .site a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 0.16em; } .site a:hover { text-decoration-color: currentColor; } .site :focus-visible { outline: 2px solid var(--ui-accent-ui); outline-offset: 2px; } .skip { position: absolute; left: -999px; top: 0; padding: var(--space-sm) var(--space-md); background: var(--ui-surface); z-index: 10; } .skip:focus { left: var(--space-md); } /* ---------- cover — the establishing shot (PLAYBOOK §1.4) ---------- */ .cover { position: relative; min-height: var(--cover-h); display: flex; flex-direction: column; justify-content: space-between; background: var(--hax-mograf-ground); color: var(--hax-paper); isolation: isolate; overflow: hidden; } .cover__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -2; } .cover::after { /* legibility for the text block; the image stays the subject on the right */ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--hax-mograf-ground) 82%, transparent) 0%, color-mix(in srgb, var(--hax-mograf-ground) 40%, transparent) 55%, transparent 100%), linear-gradient(180deg, color-mix(in srgb, var(--hax-mograf-ground) 45%, transparent) 0%, transparent 40%, color-mix(in srgb, var(--hax-mograf-ground) 60%, transparent) 100%); } /* ONE left edge: the bar, the cover text, the strip, the content and the footer all sit on the same column (Aaron 2026-09-13) */ .cover__bar, .cover__text { width: min(100% - 2 * var(--gutter), var(--col)); margin: 0 auto; padding: 0; } .cover__bar { display: flex; align-items: center; gap: var(--space-md); padding-top: var(--space-lg); } .cover__logo { display: inline-flex; margin-right: auto; } .cover__logo .lockup { height: 30px; width: auto; display: block; } .cover__text { padding-bottom: clamp(28px, 4vw, 48px); } .kicker { margin: 0 0 var(--space-sm); display: flex; flex-wrap: wrap; gap: 0 0.6em; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--text-xs-weight); letter-spacing: 0.08em; color: var(--teal-200); } .kicker a { text-decoration: none; color: inherit; } .kicker a:hover { text-decoration: underline; } .kicker span[aria-hidden] { color: var(--hax-pewter); } .cover__title { margin: 0; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.02; font-weight: 700; letter-spacing: -0.025em; max-width: 16ch; } .cover__lead { margin: var(--space-md) 0 0; font-size: var(--text-lg); font-weight: 400; line-height: 1.45; color: var(--hax-mist); max-width: 44ch; } /* the switch, as on the forms - but pinned to the window's top-right corner, so it never collides with the menu (Aaron 2026-09-13). Dark chrome reads on either ground. */ .theme-switch { position: fixed; top: var(--space-md); right: var(--space-md); z-index: 12; display: inline-flex; align-items: center; gap: var(--space-xs); font: inherit; font-size: var(--text-sm); white-space: nowrap; padding: var(--space-xs) var(--space-md); border: 1px solid color-mix(in srgb, var(--hax-paper) 28%, transparent); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--hax-mograf-ground) 55%, transparent); color: var(--hax-paper); cursor: pointer; backdrop-filter: blur(4px); } .theme-switch:hover { border-color: var(--hax-paper); } .theme-switch__dot { width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--hax-paper); } :root[data-ui="dark"] .theme-switch__dot { background: transparent; box-shadow: inset 0 0 0 1px var(--hax-paper); } @media (max-width: 720px) { .theme-switch .theme-switch__label { display: none; } .cover__bar { padding-right: calc(var(--gutter) + 44px); } } .rail-toggle { display: none; font: inherit; font-size: var(--text-sm); padding: var(--space-xs) var(--space-md); border: 1px solid color-mix(in srgb, var(--hax-paper) 28%, transparent); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--hax-mograf-ground) 55%, transparent); color: var(--hax-paper); cursor: pointer; } /* ---------- top menu — the site's one menu, in the cover bar ---------- */ .topnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-lg); } .topnav a { text-decoration: none; color: var(--hax-mist); font-size: var(--text-md); font-weight: 500; padding: var(--space-xs) 0; border-bottom: 2px solid transparent; } .topnav a:hover { color: var(--hax-paper); } .topnav a[aria-current="page"] { color: var(--hax-paper); border-bottom-color: var(--teal-200); } /* ---------- sub-menu — a branch's pages, sticky under the cover (the forms' nav) ---------- */ .subnav { position: sticky; top: 0; z-index: 5; background: var(--ui-surface); border-bottom: 1px solid var(--ui-line); } .subnav__inner { width: min(100% - 2 * var(--gutter), var(--col)); margin: 0 auto; padding: 0; display: flex; flex-wrap: nowrap; gap: var(--space-xl); list-style: none; min-height: 72px; align-items: stretch; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; overscroll-behavior-x: contain; } .subnav__inner::-webkit-scrollbar { display: none; } .subnav li { display: flex; flex: 0 0 auto; } .subnav a { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; color: var(--ui-ink3); font-size: var(--text-md); font-weight: 700; letter-spacing: -0.005em; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; } .subnav a .ico { width: 22px; height: 22px; flex: none; color: var(--ui-accent-ui); } .subnav a:hover { color: var(--ui-ink); } .subnav .is-current a { color: var(--ui-ink); border-bottom-color: var(--ui-ink); } /* ---------- the column ---------- */ .frame { width: 100%; } .content { width: min(100% - 2 * var(--gutter), var(--col)); margin: 0 auto; padding: var(--space-xl) 0; } /* ---------- prose ---------- */ /* one width for everything in the column - a paragraph, a note and a row of cards all run to the same edge (Aaron 2026-09-13: a measure narrower than the cards beside it read as a mistake, not as typography) */ .prose p, .prose ul, .prose ol, .prose blockquote { margin: 0 0 1.1em; } .prose > :first-child { margin-top: 0; } .prose h1 { font-size: 40px; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; margin: 2em 0 0.6em; } .prose h2 { font-size: 28px; line-height: 1.15; font-weight: 500; letter-spacing: -0.01em; margin: 2.2em 0 0.7em; } .prose h3 { font-size: 20px; line-height: 1.25; font-weight: 700; margin: 1.8em 0 0.5em; } .prose h1:first-child, .prose h2:first-child, .prose h3:first-child { margin-top: 0; } .prose .has-icon { display: flex; align-items: center; gap: 0.5em; } .prose h2 .ico { width: 26px; height: 26px; flex: none; color: var(--ui-accent-ui); } .prose h3 .ico { width: 20px; height: 20px; flex: none; color: var(--ui-accent-ui); } .prose h1 .ico { width: 34px; height: 34px; flex: none; color: var(--ui-accent-ui); } .prose ul, .prose ol { padding-left: 1.3em; } .prose li { margin: 0.35em 0; } .prose li::marker { color: var(--ui-ink3); } .prose ol li::marker { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ui-accent-text); } .prose strong { font-weight: 700; } .prose blockquote { padding: 0 0 0 var(--space-md); border-left: 2px solid var(--ui-accent-ui); color: var(--ui-ink2); font-size: var(--text-md); } .prose hr { border: 0; border-top: 1px solid var(--ui-line); margin: var(--space-xl) 0; } .prose code { font-family: var(--font-mono); font-size: 0.9em; padding: 0.05em 0.35em; background: var(--ui-line-soft); border-radius: var(--radius-sm); } .prose figure { margin: var(--space-lg) 0; } .prose figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); background: var(--ui-surface); } /* link rows: navigation is an arrow, never a button (HAX-EXTENSION §4) */ .prose .links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); } .prose .links a, .prose a.arrow { display: inline-flex; align-items: center; gap: var(--space-xs); /* the forms' .btn--accent, one size everywhere (Aaron 2026-09-13): 6 px radius, md */ padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); border: 1px solid var(--ui-accent); background: var(--ui-accent); color: var(--ui-hero-dark); text-decoration: none; font-weight: 600; font-size: var(--text-md); line-height: 1.5; white-space: nowrap; transition: background var(--t-ui, 180ms) cubic-bezier(.2,.7,.3,1); } .prose .links a:hover, .prose a.arrow:hover { background: var(--ui-accent-text); border-color: var(--ui-accent-text); } .prose .links a span { display: inline-block; transition: transform var(--t-ui, 180ms) cubic-bezier(.2,.7,.3,1); } .prose .links a:hover span { transform: translateX(3px); } /* a one-line note with its icon */ .prose .note-line { display: flex; gap: var(--space-sm); align-items: flex-start; color: var(--ui-ink2); font-size: var(--text-md); } .prose .note-line .ico { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--ui-accent-ui); } /* ---------- service page: narrative beside facts ---------- */ .service { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-xl) clamp(32px, 5vw, 72px); align-items: start; } .service__main > :first-child, .service__facts > :first-child { margin-top: 0; } .service__facts { padding-top: 6px; } .service__facts h2 { font-size: 20px; font-weight: 700; margin-top: 2.4em; } .service__facts h2 .ico { width: 20px; height: 20px; } .service__facts p, .service__facts li { font-size: var(--text-md); } .service__facts .links a { font-size: var(--text-md); } /* ---------- cards: divider-marked, one per heading ---------- */ .card-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-lg) var(--space-lg); margin: var(--space-lg) 0 var(--space-xl); } /* four cards read as two by two, six as two rows of three - never a row and an orphan */ .card-row:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card-row:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .card { border-top: 1px solid var(--ui-accent-ui); padding-top: var(--space-md); display: flex; flex-direction: column; } .card__text { display: flex; flex-direction: column; flex: 1; } .card__text > .links { margin-top: auto; padding-top: var(--space-sm); } .card h3 { margin: 0 0 0.5em; } .card p, .card li { font-size: var(--text-md); } .card p { margin-bottom: 0.7em; } .card .links { gap: var(--space-sm); } .card ul { padding-left: 0; list-style: none; } .card li { margin: 0.25em 0; } .card--visual { border-top: 0; padding-top: 0; } .card__visual { display: block; aspect-ratio: 16 / 7; border-radius: var(--radius-sm); overflow: hidden; background: var(--hax-mograf-ground); margin-bottom: var(--space-md); } .card__visual img { width: 100%; height: 100%; object-fit: cover; display: block; } .card--visual .card__text { border-top: 1px solid var(--ui-accent-ui); padding-top: var(--space-md); } .card__visual { flex: none; } /* ---------- a mini section: its heading over a banner, the body below ---------- */ .section { margin: var(--space-xl) 0; } .section:first-child { margin-top: 0; } .section__banner { position: relative; min-height: 200px; border-radius: var(--radius-md); overflow: hidden; background: var(--hax-mograf-ground); color: var(--hax-paper); display: flex; align-items: flex-end; isolation: isolate; } .section__banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .section__banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--hax-mograf-ground) 78%, transparent) 0%, color-mix(in srgb, var(--hax-mograf-ground) 30%, transparent) 60%, transparent 100%); } .section__title { padding: var(--space-lg); } .section__title h1, .section__title h2 { margin: 0; color: var(--hax-paper); font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; } .section__title .ico { color: var(--teal-200); } .section__body { padding-top: var(--space-sm); } .section__body > .card-row:first-child { margin-top: var(--space-md); } .section__body > :last-child { margin-bottom: 0; } /* ---------- folds ---------- */ .fold { border-top: 1px solid var(--ui-line); } .fold:last-of-type { border-bottom: 1px solid var(--ui-line); } .fold summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--space-sm); padding: 14px 0; font-weight: 700; font-size: var(--text-md); } .fold summary::-webkit-details-marker { display: none; } .fold summary::before { content: ""; width: 8px; height: 8px; flex: none; border-right: 2px solid var(--ui-accent-ui); border-bottom: 2px solid var(--ui-accent-ui); transform: rotate(-45deg); transition: transform var(--t-ui, 180ms) cubic-bezier(.2,.7,.3,1); margin-right: 4px; } .fold[open] summary::before { transform: rotate(45deg); } .fold summary:hover { color: var(--ui-accent-text); } .fold__body { padding: 0 0 var(--space-md) calc(8px + 4px + var(--space-sm)); font-size: var(--text-md); color: var(--ui-ink2); } .fold__body > :last-child { margin-bottom: 0; } .fold__body p { color: var(--ui-ink); } /* ---------- note ---------- */ .note { display: flex; gap: var(--space-md); align-items: flex-start; padding: var(--space-md) var(--space-lg); margin: var(--space-lg) 0; background: var(--ui-accent-soft); border-radius: var(--radius-sm); font-size: var(--text-md); } .note .ico { width: 22px; height: 22px; flex: none; margin-top: 3px; color: var(--ui-accent-ui); } .note > div > :last-child { margin-bottom: 0; } /* ---------- galleries, tiles, people ---------- */ .gallery { columns: 2; column-gap: var(--space-sm); margin: var(--space-lg) 0; } .gallery__item { display: block; text-decoration: none; break-inside: avoid; margin: 0 0 var(--space-sm); border-radius: var(--radius-sm); overflow: hidden; background: var(--ui-surface); } .gallery__item img { display: block; width: 100%; height: auto; } .gallery__item:hover img { opacity: 0.92; } .gallery__caption { display: block; padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); color: var(--ui-ink2); } .cases { margin-top: var(--space-xl); } .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-lg) var(--space-md); } .tile { display: block; text-decoration: none; } .tile__visual { display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--ui-surface); border: 1px solid var(--ui-line-soft); } .tile__visual img { width: 100%; height: 100%; object-fit: contain; padding: 10%; display: block; background: var(--hax-paper); transition: transform var(--t-move, 320ms) cubic-bezier(.2,.7,.3,1); } .tile:hover .tile__visual img { transform: scale(1.03); } .tile__name { display: block; margin-top: var(--space-sm); font-size: var(--text-md); font-weight: 500; } .tile:hover .tile__name { color: var(--ui-accent-text); } .people { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg) var(--space-xl); margin: var(--space-lg) 0 var(--space-xl); } /* the photo is as tall as the text beside it - no gap at the foot (Aaron 2026-09-13) */ .person { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--space-md); align-items: stretch; } .person__photo { width: 100%; height: 100%; min-height: 132px; object-fit: cover; border-radius: var(--radius-md); background: var(--ui-surface); } .person__text h3 { margin: 0 0 0.2em; } .person__text p { font-size: var(--text-md); margin-bottom: 0.5em; } .person__text > :last-child { margin-bottom: 0; } .person__text .role { color: var(--ui-accent-text); font-weight: 500; } /* ---------- video ---------- */ .video { margin: var(--space-lg) 0; } .video__frame { position: relative; aspect-ratio: 16 / 9; background: var(--hax-mograf-ground); border-radius: var(--radius-sm); overflow: hidden; } .video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } button.video__frame { display: block; width: 100%; padding: 0; border: 0; cursor: pointer; font: inherit; } button.video__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .video__play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--hax-carbon) 55%, transparent); backdrop-filter: blur(4px); transition: background var(--t-ui, 180ms) cubic-bezier(.2,.7,.3,1); } .video__play::after { content: ""; position: absolute; left: 26px; top: 20px; border-style: solid; border-width: 12px 0 12px 18px; border-color: transparent transparent transparent var(--hax-paper); } button.video__frame:hover .video__play { background: var(--ui-accent); } button.video__frame:hover .video__play::after { border-left-color: var(--hax-carbon); } button.video__frame:focus-visible { outline: 2px solid var(--ui-accent-ui); outline-offset: 2px; } .video figcaption, .video h3 { margin: var(--space-sm) 0 0; font-size: var(--text-md); } .video__pending { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: var(--space-md); text-align: center; color: var(--hax-pewter); font-family: var(--font-mono); font-size: var(--text-sm); } .video__pending span { color: var(--ui-telemetry, var(--hax-slate)); } .videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-lg) var(--space-md); } .videos .video { margin: 0; } .video p { margin: var(--space-sm) 0 0; font-size: var(--text-md); font-weight: 500; } /* ---------- generic columns (transitional) ---------- */ .columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-lg); } /* ---------- pager + footer ---------- */ .pager { display: flex; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--ui-line); font-weight: 600; } .pager a { text-decoration: none; color: var(--ui-accent-text); } .pager a:hover { text-decoration: underline; } .pager__next { margin-left: auto; text-align: right; } .foot { width: min(100% - 2 * var(--gutter), var(--col)); margin: 0 auto; padding: var(--space-lg) 0 var(--space-xl); border-top: 1px solid var(--ui-line); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); font-size: var(--text-sm); color: var(--ui-ink2); } .foot__id { display: flex; align-items: center; gap: var(--space-sm); } .foot .lockup { height: 26px; width: auto; display: block; } .foot__links { margin: 0 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); font-size: var(--text-md); } .foot__links a { text-decoration: none; color: var(--ui-accent-text); font-weight: 600; } .foot__links a:hover { text-decoration: underline; } .foot__links a.arrow { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); border: 1px solid var(--ui-accent); background: var(--ui-accent); color: var(--ui-hero-dark); font-size: var(--text-md); } .foot__links a.arrow:hover { background: var(--ui-accent-text); border-color: var(--ui-accent-text); text-decoration: none; } /* ---------- lightbox ---------- */ .lightbox[hidden] { display: none; } .lightbox { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: var(--space-lg); background: color-mix(in srgb, var(--hax-carbon) 88%, transparent); } .lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-sm); } .lightbox__close { position: absolute; top: var(--space-md); right: var(--space-md); width: 44px; height: 44px; border: 0; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--hax-paper) 12%, transparent); color: var(--hax-paper); font-size: 28px; line-height: 1; cursor: pointer; } .lightbox__close:hover { background: color-mix(in srgb, var(--hax-paper) 24%, transparent); } /* ---------- small screens ---------- */ @media (max-width: 900px) { .rail-toggle { display: inline-flex; } .topnav { position: fixed; inset: 0 auto 0 0; width: min(84vw, 320px); z-index: 15; padding: var(--space-xl) var(--space-lg); background: var(--ui-surface); box-shadow: var(--elev-pop); overflow-y: auto; transform: translateX(-100%); transition: transform var(--t-move, 320ms) cubic-bezier(.2,.7,.3,1); } .topnav.rail--open { transform: none; } .topnav ul { flex-direction: column; gap: var(--space-sm); } .topnav a { color: var(--ui-ink2); font-size: var(--text-lg); display: block; padding: var(--space-sm) 0; border-bottom: 0; border-left: 2px solid transparent; padding-left: var(--space-md); } .topnav a[aria-current="page"] { color: var(--ui-accent-text); border-left-color: var(--ui-accent-ui); } .subnav__inner { gap: var(--space-lg); min-height: 60px; } .subnav a { font-size: var(--text-sm); } .subnav a .ico { width: 18px; height: 18px; } .service { grid-template-columns: 1fr; } .gallery { columns: 1; } .cover__title { font-size: clamp(30px, 8vw, 40px); } .content { padding-top: var(--space-lg); } .section__title h1, .section__title h2 { font-size: 26px; } } @media (prefers-reduced-motion: reduce) { .site * { transition: none !important; } } @media print { .cover { min-height: 0; } .cover__img, .topnav, .subnav, .theme-switch, .rail-toggle, .pager, .lightbox { display: none !important; } .frame { grid-template-columns: 1fr; } }