/* =========================================================================
Park Street Post — base stylesheet
Single sheet, no build step. Plain CSS.
========================================================================= */
/* ---------------------------------------------------------------------------
Fonts — Geist + Geist Mono, self-hosted (SIL OFL 1.1, see /fonts/LICENSE.txt)
--------------------------------------------------------------------------- */
@font-face {
font-family: "Geist";
src: url("/fonts/Geist-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Geist";
src: url("/fonts/Geist-Medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Geist";
src: url("/fonts/Geist-SemiBold.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GeistMono";
src: url("/fonts/GeistMono-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* System-sans fallback tuned to reduce FOUT shift. */
@font-face {
font-family: "Geist Fallback";
src: local("Helvetica Neue"), local("Arial");
size-adjust: 100%;
ascent-override: 92%;
descent-override: 22%;
line-gap-override: 0%;
}
/* ---------------------------------------------------------------------------
Tokens
--------------------------------------------------------------------------- */
:root {
/* Palette (OKLCH; cool/dark/neutral per DESIGN.md) */
--surface: oklch(14% 0.008 240); /* Deep Cool Charcoal */
--surface-lift: oklch(22% 0.008 240); /* Console Slate */
--hairline: oklch(28% 0.008 240); /* 1px dividers */
--text-cue: oklch(68% 0.008 240); /* Secondary text */
--text: oklch(96% 0.005 240); /* Working Light */
--accent: oklch(72% 0.13 225); /* Signal Cyan-Cool */
--accent-deep: oklch(58% 0.14 225); /* Active / pressed state */
--accent-soft: oklch(72% 0.13 225 / 0.18); /* Glow base */
/* Type scale (1.333 perfect-fourth) */
--t-xs: 0.75rem;
--t-sm: 0.875rem;
--t-base: 1.0625rem; /* 17px body, comfortable on dark */
--t-lg: 1.333rem;
--t-xl: 1.777rem;
--t-display: clamp(2.25rem, 4.6vw + 0.25rem, 3.75rem);
/* Vertical rhythm — body line-height as the unit (1.65 * 17 ≈ 28px) */
--rhythm: 28px;
/* Spacing — 4pt scale */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-6: 24px;
--s-8: 32px;
--s-12: 48px;
--s-16: 64px;
--s-24: 96px;
--s-32: 144px;
/* Motion */
--ease-out: cubic-bezier(0.25, 1, 0.5, 1); /* quart out */
--ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); /* quint out */
--dur-quick: 120ms;
--dur-base: 220ms;
/* Layout */
--max-w: 1200px;
--gutter: clamp(20px, 4vw, 56px);
--measure: 68ch;
/* Elevation (state-only, never ambient — see DESIGN.md Flat-By-Default) */
--focus-ring: 0 0 0 2px var(--accent);
--glow-live: 0 0 28px 4px var(--accent-soft);
}
/* ---------------------------------------------------------------------------
Reset / base
--------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
background: var(--surface); /* canvas; lets the z-index:-1 atmosphere layers show through a transparent body */
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
scroll-padding-top: 88px; /* matches .nav height; keeps scroll-into-view
targets out from under the sticky site header */
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
margin: 0;
background: transparent; /* surface lives on ; keeps the atmosphere layers visible */
color: var(--text);
font-family: "Geist", "Geist Fallback", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
font-size: var(--t-base);
font-weight: 400;
line-height: 1.65; /* compensated for light-on-dark */
letter-spacing: 0.005em; /* compensated for light-on-dark */
font-feature-settings: "ss03", "cv11"; /* Geist tabular alts */
text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a {
color: inherit;
text-decoration: none;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--accent); color: var(--surface); }
:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
border-radius: 2px;
transition: box-shadow var(--dur-quick) var(--ease-out);
}
code, kbd, samp, pre {
font-family: "GeistMono", ui-monospace, "SF Mono", Menlo, monospace;
font-size: 0.95em;
}
/* ---------------------------------------------------------------------------
Type roles
--------------------------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-size: var(--t-display); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); font-weight: 500; }
h4 { font-size: var(--t-base); font-weight: 600; }
p { margin: 0; max-width: var(--measure); text-wrap: pretty; }
p + p { margin-top: var(--s-3); }
.eyebrow {
font-family: "GeistMono", ui-monospace, monospace;
font-size: var(--t-xs);
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-cue);
}
.cue { color: var(--text-cue); }
/* ---------------------------------------------------------------------------
Layout primitives
--------------------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--max-w);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section {
padding-block: var(--s-16);
}
.section--lead { padding-block: clamp(var(--s-12), 8vw, var(--s-32)) clamp(var(--s-12), 6vw, var(--s-24)); }
.section--tight { padding-block: var(--s-12); }
.section--end { padding-block: var(--s-12) var(--s-16); }
.divider {
height: 1px;
background: var(--hairline);
border: 0;
margin: 0;
}
/* ---------------------------------------------------------------------------
Site header / nav
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
Ambient atmosphere (marketing pages only; body.has-atmos, layers in head.php)
Pure static depth so the dark surfaces read as a room, not a void: a soft cool
screen-light, a faint blueprint grid masked to the margins, and fine film grain.
No motion and no JS, so nothing to gate on prefers-reduced-motion. /live and
/admin omit the layer divs entirely, so they are unaffected.
--------------------------------------------------------------------------- */
.atmos-light,
.atmos-grid,
.atmos-grain { position: fixed; inset: 0; pointer-events: none; }
/* Cool screen-light: large, soft, very low chroma. Not a glow blob. Sits behind
content (z-index:-1) above the canvas. */
.atmos-light {
z-index: -1;
background:
radial-gradient(78% 48% at 72% 4%, oklch(34% 0.035 235 / 0.30), transparent 72%),
radial-gradient(64% 42% at 12% -4%, oklch(28% 0.030 255 / 0.22), transparent 70%),
radial-gradient(120% 70% at 50% 120%, oklch(22% 0.020 245 / 0.20), transparent 75%);
}
/* Blueprint hairline grid, faded toward the centre so it reads as margin texture. */
.atmos-grid {
z-index: -1;
background-image:
linear-gradient(to right, oklch(60% 0.02 240 / 0.08) 1px, transparent 1px),
linear-gradient(to bottom, oklch(60% 0.02 240 / 0.08) 1px, transparent 1px);
background-size: 60px 60px;
-webkit-mask-image: radial-gradient(125% 90% at 50% 0%, transparent 30%, #000 88%);
mask-image: radial-gradient(125% 90% at 50% 0%, transparent 30%, #000 88%);
}
/* Fine film grain so the black reads as a surface. Soft-light wash over content,
but UNDER the sticky header (z-index:10) and the live player (z-index:8) so the
review picture stays pristine: never any grain over the video. */
.atmos-grain {
z-index: 5;
mix-blend-mode: soft-light;
opacity: .45;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 170px 170px;
}
.site-header {
position: sticky;
top: 0;
z-index: 10;
background: var(--surface); /* solid; No-Glassmorphism Rule */
border-bottom: 1px solid var(--hairline);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-6);
height: 88px;
}
.brand {
display: inline-flex;
align-items: baseline;
gap: 0.5em;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
}
.brand-mark {
font-family: "GeistMono", ui-monospace, monospace;
font-size: var(--t-xs);
letter-spacing: 0.18em;
color: var(--text-cue);
text-transform: uppercase;
}
.nav-links {
display: flex;
align-items: center;
gap: var(--s-6);
font-size: var(--t-xs);
text-transform: uppercase;
letter-spacing: 0.12em;
}
.nav-links a {
color: var(--text-cue);
padding-block: 6px;
position: relative;
transition: color var(--dur-quick) var(--ease-out);
}
.nav-links a:hover { color: var(--text); }
.nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a[aria-current="page"]::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 1px;
background: var(--accent);
}
/* Live nav link — name + state dot */
.nav-live {
display: inline-flex;
align-items: center;
gap: 8px;
}
.live-dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--hairline);
transition: background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.is-live .live-dot {
background: var(--accent);
box-shadow: var(--glow-live);
animation: live-pulse 2.4s var(--ease-out) infinite;
}
@keyframes live-pulse {
0%, 100% { box-shadow: 0 0 18px 2px var(--accent-soft); }
50% { box-shadow: 0 0 32px 6px var(--accent-soft); }
}
@media (prefers-reduced-motion: reduce) {
.is-live .live-dot { animation: none; }
}
/* ---------------------------------------------------------------------------
Hero
--------------------------------------------------------------------------- */
.hero {
display: grid;
gap: clamp(var(--s-8), 5vw, var(--s-16));
grid-template-columns: 1fr;
align-items: center;
}
@media (min-width: 760px) {
.hero {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: clamp(var(--s-12), 6vw, var(--s-24));
}
}
/* Cap the stacked-state photo so it doesn't eat the viewport on mobile. */
@media (max-width: 759px) {
.hero__photo { max-height: 56vh; }
}
.hero__lede {
display: flex;
flex-direction: column;
gap: var(--s-6);
}
.hero__title {
/* h1 styling already applied */
}
.hero__sub {
font-size: var(--t-lg);
line-height: 1.4;
color: var(--text-cue);
max-width: 32ch;
}
.hero__sub strong { color: var(--text); font-weight: 500; }
.hero__ctas {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--s-3);
margin-top: var(--s-3);
font-size: var(--t-base);
}
@media (min-width: 520px) {
.hero__ctas { flex-direction: row; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }
}
.cta-text {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--text);
padding: 6px 0;
border-bottom: 1px solid var(--hairline);
transition: color var(--dur-quick) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.cta-text::after {
content: "→";
font-family: "GeistMono", monospace;
color: var(--text-cue);
transition: color var(--dur-quick) var(--ease-out), transform var(--dur-base) var(--ease-out-soft);
}
.cta-text:hover { color: var(--accent); border-color: var(--accent); }
.cta-text:hover::after { color: var(--accent); transform: translateX(2px); }
/* Photo frame — the Cool Frame Rule made literal */
.hero__frame {
background: var(--surface-lift);
padding: clamp(8px, 1.2vw, 14px);
border: 1px solid var(--hairline);
border-radius: 2px;
}
.hero__photo {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
background: var(--surface);
}
/* ---------------------------------------------------------------------------
Services teaser — Sound (larger) + Picture (smaller)
--------------------------------------------------------------------------- */
.services {
display: grid;
gap: var(--s-8);
}
@media (min-width: 760px) {
.services {
grid-template-columns: 1.4fr 1fr;
gap: var(--s-16);
}
}
.discipline { display: flex; flex-direction: column; gap: var(--s-3); }
.discipline h2 { font-size: var(--t-xl); }
.discipline .gear {
font-family: "GeistMono", monospace;
font-size: var(--t-xs);
letter-spacing: 0.04em;
color: var(--text-cue);
}
.section-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: var(--s-2);
font-size: var(--t-sm);
color: var(--text);
border-bottom: 1px solid var(--hairline);
padding-bottom: 4px;
align-self: flex-start;
transition: color var(--dur-quick) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.section-link::after {
content: "→";
color: var(--text-cue);
transition: color var(--dur-quick) var(--ease-out), transform var(--dur-base) var(--ease-out-soft);
}
.section-link:hover { color: var(--accent); border-color: var(--accent); }
.section-link:hover::after { color: var(--accent); transform: translateX(2px); }
/* ---------------------------------------------------------------------------
Software teaser — strip of three tools, badges left-anchored
--------------------------------------------------------------------------- */
.software-strip {
display: grid;
gap: 1px;
background: var(--hairline);
border-block: 1px solid var(--hairline);
}
.tool {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-2);
padding: var(--s-6) 0;
background: var(--surface);
}
@media (min-width: 720px) {
.tool {
grid-template-columns: 110px minmax(0, 1.1fr) minmax(0, 2fr) auto;
align-items: baseline;
gap: var(--s-6);
}
}
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: "GeistMono", monospace;
font-size: var(--t-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-cue);
border: 1px solid var(--hairline);
padding: 4px 8px;
border-radius: 2px;
width: max-content;
}
.badge--live {
color: var(--accent);
border-color: var(--accent);
}
.tool__name { font-size: var(--t-base); font-weight: 600; }
.tool__desc { color: var(--text-cue); font-size: var(--t-sm); margin: 0; max-width: none; }
.tool__link {
font-size: var(--t-sm);
color: var(--text);
border-bottom: 1px solid var(--hairline);
padding-bottom: 2px;
transition: color var(--dur-quick) var(--ease-out), border-color var(--dur-base) var(--ease-out);
justify-self: start;
}
.tool__link:hover { color: var(--accent); border-color: var(--accent); }
/* ---------------------------------------------------------------------------
Contact + footer
--------------------------------------------------------------------------- */
.contact {
display: grid;
gap: var(--s-3);
}
.contact dl {
display: grid;
grid-template-columns: max-content 1fr;
gap: var(--s-2) var(--s-6);
font-size: var(--t-base);
margin: 0;
}
.contact dt {
font-family: "GeistMono", monospace;
font-size: var(--t-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-cue);
align-self: center;
}
.contact dd { margin: 0; }
.contact dd a { border-bottom: 1px solid var(--hairline); padding-bottom: 2px; transition: color var(--dur-quick) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.contact dd a:hover { color: var(--accent); border-color: var(--accent); }
.site-footer {
border-top: 1px solid var(--hairline);
padding-block: var(--s-8);
font-size: var(--t-sm);
color: var(--text-cue);
}
.site-footer .row {
display: flex;
flex-wrap: wrap;
gap: var(--s-4) var(--s-8);
align-items: baseline;
justify-content: space-between;
}
/* Section heads and inline citations */
.section-eyebrow { margin-bottom: var(--s-6); }
.section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-6);
margin-bottom: var(--s-6);
flex-wrap: wrap;
}
.section-head .eyebrow { margin: 0; }
.section-head .section-link { margin: 0; }
cite {
font-style: normal;
font-weight: 500;
color: var(--text);
}
.tool__status {
font-size: var(--t-sm);
justify-self: start;
}
/* ---------------------------------------------------------------------------
"Coming next" placeholder pages
--------------------------------------------------------------------------- */
.placeholder {
min-height: 60vh;
display: grid;
gap: var(--s-6);
align-content: center;
}
.placeholder h1 { font-size: var(--t-xl); }
.placeholder p { color: var(--text-cue); }
/* ---------------------------------------------------------------------------
Skip link (a11y)
--------------------------------------------------------------------------- */
.skip {
position: absolute;
left: -9999px;
top: 0;
background: var(--surface-lift);
color: var(--text);
padding: var(--s-2) var(--s-3);
border: 1px solid var(--accent);
z-index: 100;
}
.skip:focus { left: var(--gutter); top: 8px; }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
/* ---------------------------------------------------------------------------
Reduced motion — global override
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
}
/* ---------------------------------------------------------------------------
Narrow-viewport overrides — must come after the base nav rules above so
they actually win on mobile. (Lesson learned the hard way.)
--------------------------------------------------------------------------- */
@media (max-width: 519px) {
.brand-mark { display: none; }
.brand { font-size: var(--t-sm); letter-spacing: 0.04em; white-space: nowrap; }
/* Stack: brand on top row, nav as a 2x2 grid below it. Predictable
layout that doesn't overflow at any width down to ~280px. */
.nav {
flex-direction: column;
align-items: stretch;
gap: var(--s-3);
height: auto;
padding-block: var(--s-3);
}
.nav-links {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
gap: var(--s-2) var(--s-4);
letter-spacing: 0.08em;
}
.nav-links a { padding-block: 4px; }
.site-header .container { padding-inline: var(--s-4); }
}
/* ===========================================================================
BRAND LANGUAGE — added during the design push pass.
Logo mark theming, filmstrip motif, sine-wave dividers, footer signature.
Source-order is intentional: these come AFTER all the base rules so they win.
=========================================================================== */
/* ---- Logo mark, themable via CSS ---- */
.psp-mark {
display: block;
width: 100%;
height: 100%;
}
.psp-mark__frame { fill: var(--text); }
.psp-mark__perf { fill: var(--surface); }
.psp-mark__wave { stroke: var(--surface); }
/* Nav variant: solid white-on-dark logo, small */
.psp-mark--nav .psp-mark__frame { fill: var(--text); }
.psp-mark--nav .psp-mark__perf { fill: var(--surface); }
.psp-mark--nav .psp-mark__wave { stroke: var(--surface); }
/* Footer ghost variant: very dim, decorative scale */
.psp-mark--ghost .psp-mark__frame { fill: var(--surface-lift); }
.psp-mark--ghost .psp-mark__perf { fill: var(--surface); }
.psp-mark--ghost .psp-mark__wave { stroke: var(--surface); }
/* Hero variant: cyan wave inside a cool slate frame — used as a brand stamp */
.psp-mark--stamp .psp-mark__frame { fill: var(--surface-lift); }
.psp-mark--stamp .psp-mark__perf { fill: var(--surface); }
.psp-mark--stamp .psp-mark__wave { stroke: var(--accent); }
/* ---- Brand lockup in the nav ---- */
.brand {
display: inline-flex;
align-items: center;
gap: var(--s-3);
font-weight: 600;
text-transform: none;
letter-spacing: 0;
}
.brand-mark-wrap {
display: inline-block;
width: 84px;
height: 57px;
flex-shrink: 0;
}
.brand-words {
display: inline-flex;
flex-direction: column;
line-height: 1;
gap: 4px;
}
.brand-name {
font-size: 1.125rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text);
}
.brand-tag {
font-family: "GeistMono", ui-monospace, monospace;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-cue);
}
/* ---- Live indicator: cyan dot inside a sprocket-hole rectangle ---- */
.live-perf {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 13px;
background: var(--surface-lift);
border: 1px solid var(--hairline);
border-radius: 1px;
margin-left: 4px;
transition: border-color var(--dur-base) var(--ease-out);
}
.live-dot {
width: 7px;
height: 7px;
border-radius: 999px;
background: var(--text-cue);
opacity: 0.45;
transition: background var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out),
opacity var(--dur-base) var(--ease-out);
}
.is-live .live-perf { border-color: var(--accent); }
.is-live .live-dot {
background: var(--accent);
opacity: 1;
box-shadow: 0 0 10px 2px var(--accent-soft);
animation: live-pulse 2.4s var(--ease-out) infinite;
}
/* ---- Sine-wave divider ---- */
.sine-divider {
display: block;
width: 100%;
height: 12px;
color: var(--hairline); /* svg uses currentColor */
margin-block: 0;
}
.sine-divider svg { display: block; width: 100%; height: 100%; }
.sine-divider--accent { color: var(--accent); }
/* ---- Section header with oversized number ---- */
.section-head--major {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: end;
gap: var(--s-4);
padding-block: var(--s-3) var(--s-6);
border-bottom: 1px solid var(--hairline);
margin-bottom: var(--s-12);
}
.section-num {
font-family: "GeistMono", ui-monospace, monospace;
font-size: clamp(2.25rem, 6vw, 4rem);
font-weight: 400;
line-height: 0.85;
color: var(--text);
letter-spacing: -0.04em;
display: inline-flex;
align-items: baseline;
gap: 0.2em;
}
.section-num__slash { color: var(--text-cue); font-weight: 400; }
.section-head__label {
font-family: "GeistMono", ui-monospace, monospace;
font-size: var(--t-xs);
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-cue);
align-self: center;
padding-bottom: 6px;
}
.section-head__cta { padding-bottom: 6px; }
.section-head__cta .section-link { margin: 0; }
@media (max-width: 759px) {
.section-head--major {
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
gap: var(--s-3) var(--s-4);
}
.section-head__cta { grid-column: 1 / -1; }
}
/* ---- Hero — bigger, with filmstrip-frame photo ---- */
h1 { font-size: clamp(2.25rem, 4.4vw, 3.75rem); line-height: 1.05; letter-spacing: -0.02em; }
.hero__title {
text-wrap: balance;
}
.hero__index {
font-family: "GeistMono", ui-monospace, monospace;
font-size: var(--t-xs);
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-cue);
display: flex;
align-items: center;
gap: var(--s-3);
}
.hero__index::before {
content: "00";
color: var(--text);
font-size: var(--t-base);
letter-spacing: -0.02em;
}
/* Filmstrip frame around hero photo: sprocket holes on left and right */
.hero__frame {
position: relative;
background: var(--surface-lift);
padding: 14px 26px; /* extra horizontal room for sprocket rails */
border: 1px solid var(--hairline);
border-radius: 0;
}
.hero__frame::before,
.hero__frame::after {
content: "";
position: absolute;
top: 14px;
bottom: 14px;
width: 10px;
background-image:
linear-gradient(var(--surface) 50%, transparent 50%),
linear-gradient(var(--surface-lift), var(--surface-lift));
background-size: 100% 16px, 100% 100%;
background-repeat: repeat-y, no-repeat;
}
.hero__frame::before { left: 6px; }
.hero__frame::after { right: 6px; }
/* ---- Filmstrip rail — horizontal, above section heads ---- */
.perf-rail {
display: block;
width: 56px;
height: 12px;
background-image: linear-gradient(to right, var(--text-cue) 50%, transparent 50%);
background-size: 14px 100%;
background-repeat: repeat-x;
opacity: 0.5;
margin-bottom: var(--s-3);
}
/* ---- Footer redesign with ghost mark signature ---- */
.site-footer {
border-top: 1px solid var(--hairline);
position: relative;
overflow: hidden;
padding-block: 0;
}
.site-footer__inner {
position: relative;
padding-block: var(--s-12) var(--s-8);
}
.site-footer__signature {
position: absolute;
right: var(--gutter);
top: 50%;
transform: translateY(-50%);
width: clamp(220px, 30vw, 360px);
height: clamp(150px, 20vw, 240px);
pointer-events: none;
opacity: 0.22;
z-index: 0;
}
.site-footer__cols {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr;
gap: var(--s-8);
align-items: start;
}
@media (min-width: 760px) {
.site-footer__cols {
grid-template-columns: 1.4fr 1.4fr 1fr;
gap: var(--s-12);
}
}
.site-footer__name {
font-size: var(--t-base);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text);
margin: 0 0 4px 0;
}
.site-footer__where { color: var(--text-cue); margin: 0; font-size: var(--t-sm); }
.site-footer__year { color: var(--text-cue); margin: var(--s-3) 0 0 0; font-size: var(--t-sm); font-family: "GeistMono", monospace; letter-spacing: 0.06em; }
.site-footer__contact ul,
.site-footer__nav ul {
list-style: none; padding: 0; margin: var(--s-3) 0 0 0;
display: flex; flex-direction: column; gap: 6px;
font-size: var(--t-sm);
}
.site-footer__contact a,
.site-footer__nav a {
border-bottom: 1px solid var(--hairline);
padding-bottom: 1px;
transition: color var(--dur-quick) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.site-footer__contact a:hover,
.site-footer__nav a:hover { color: var(--accent); border-color: var(--accent); }
.site-footer__contact .cue,
.site-footer__nav .cue {
font-family: "GeistMono", monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
display: inline-block;
width: 56px;
}
/* ---- Software section confidence: large numbered listing, not card grid ---- */
.software-list {
display: grid;
gap: 0;
border-top: 1px solid var(--hairline);
}
.tool-row {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-2) var(--s-6);
padding-block: var(--s-6);
border-bottom: 1px solid var(--hairline);
position: relative;
transition: background var(--dur-base) var(--ease-out);
}
.tool-row__num {
font-family: "GeistMono", monospace;
font-size: var(--t-xs);
letter-spacing: 0.14em;
color: var(--text-cue);
}
.tool-row__name {
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 600;
letter-spacing: -0.02em;
margin: 0;
line-height: 1.05;
}
.tool-row__desc {
color: var(--text-cue);
font-size: var(--t-base);
max-width: 56ch;
margin: 0;
}
.tool-row__meta {
display: flex;
align-items: center;
gap: var(--s-3);
flex-wrap: wrap;
margin-top: var(--s-2);
}
@media (min-width: 760px) {
.tool-row {
grid-template-columns: 64px minmax(0, 1.1fr) minmax(0, 1.4fr);
align-items: baseline;
padding-block: var(--s-8);
}
.tool-row__meta { justify-content: flex-end; }
}
.tool-row .badge { background: transparent; }
/* ---- Credits strip — typographic signature moment ---- */
.credits {
padding-block: var(--s-12);
}
.credits__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-6);
margin-bottom: var(--s-6);
flex-wrap: wrap;
}
.credits__list {
list-style: none;
margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--s-3) var(--s-6);
font-size: clamp(1.15rem, 2vw, 1.5rem);
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.2;
}
.credits__list li {
display: flex;
align-items: baseline;
gap: var(--s-3);
padding-block: 4px;
}
.credits__list .num {
font-family: "GeistMono", monospace;
font-size: var(--t-xs);
letter-spacing: 0.14em;
color: var(--text-cue);
font-weight: 400;
min-width: 28px;
}
.credits__list .role {
display: block;
font-family: "GeistMono", monospace;
font-size: 11px;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-cue);
margin-top: 4px;
line-height: 1;
}
/* ---- Hero CTA refinement: turn arrow into a sine-curve glyph on hover ---- */
.cta-text { gap: 10px; }
/* ---- Discipline blocks polish: bigger names, optional perforation tick ---- */
.discipline { gap: var(--s-4); }
.discipline h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -0.02em; }
.discipline .gear { letter-spacing: 0.08em; }
/* Film grain overlay deleted in critique-pass — the S1 video carries the cinema. */
.credits__note {
margin-top: var(--s-6);
font-size: var(--t-sm);
}
.credits__note a {
color: var(--text);
border-bottom: 1px solid var(--hairline);
padding-bottom: 1px;
transition: color var(--dur-quick) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.credits__note a:hover { color: var(--accent); border-color: var(--accent); }
/* Hero video: video element shares the .hero__photo slot, but its native
16:9 ratio looks better than 3:2 with object-fit: cover. */
.hero__video {
aspect-ratio: 16 / 9;
object-fit: cover;
}
/* Reduced-motion fallback: video stays paused at its poster frame. */
@media (prefers-reduced-motion: reduce) {
.hero__video { /* poster image stays as-is; pause is enforced via JS */ }
}
/* ---- Credits row icons (sound / picture) ---- */
.credits__list li {
/* override default flex to accommodate the icon span */
display: flex;
align-items: baseline;
gap: var(--s-3);
padding-block: 4px;
}
.credit-icons {
display: inline-flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
height: 14px;
align-self: center;
}
.credit-icon {
display: inline-block;
width: 14px;
height: 14px;
color: var(--text-cue);
flex: 0 0 auto;
}
.credit-icon--snd { color: var(--text); }
.credit-icon--pic { color: var(--text); }
.credit-icon svg { display: block; width: 100%; height: 100%; }
/* ===========================================================================
Stacked hero + full-bleed photo / video banners.
Replaces the asymmetric hero pane with a typographic hero followed by a
substantial photo banner; S1 video gets its own dedicated section between
/01 SERVICES and /02 CREDITS.
=========================================================================== */
.hero--stacked {
padding-block: clamp(var(--s-12), 8vw, var(--s-24)) clamp(var(--s-8), 4vw, var(--s-12));
}
.hero--stacked .hero__title {
font-size: clamp(2.5rem, 6.2vw, 5rem);
line-height: 1.0;
letter-spacing: -0.025em;
max-width: 22ch;
/* The explicit
in the markup controls the break; no wrap override needed. */
}
@media (max-width: 519px) {
.hero--stacked .hero__title {
font-size: clamp(2rem, 9vw, 2.75rem);
text-wrap: balance;
}
/* On narrow mobile we want the natural wrap, not the desktop two-line lockup. */
.hero--stacked .hero__title br { display: none; }
}
.hero--stacked .hero__sub {
font-size: clamp(1.0625rem, 1.5vw, 1.4rem);
line-height: 1.45;
max-width: 56ch;
}
.hero--stacked .hero__ctas {
margin-top: var(--s-4);
}
/* Banners — full-bleed strips outside the container. Live in directly. */
.banner {
margin: 0;
width: 100%;
background: var(--surface);
position: relative;
overflow: hidden;
}
.banner--photo {
aspect-ratio: 16 / 7;
max-height: 78vh;
border-block: 1px solid var(--hairline);
}
.banner--photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 40%;
display: block;
}
.banner--video {
aspect-ratio: 16 / 7;
max-height: 70vh;
border-block: 1px solid var(--hairline);
margin-block: var(--s-12) 0;
}
.banner--video video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.banner__caption {
position: absolute;
left: var(--gutter);
bottom: var(--s-6);
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--s-3) var(--s-4);
background: var(--surface);
border: 1px solid var(--hairline);
max-width: calc(100% - var(--gutter) * 2);
}
.banner__eyebrow {
font-family: "GeistMono", monospace;
font-size: var(--t-sm);
font-weight: 500;
letter-spacing: 0.04em;
color: var(--text);
}
.banner__note {
font-family: "Geist", sans-serif;
font-size: 11px;
letter-spacing: 0.04em;
color: var(--text-cue);
}
@media (max-width: 759px) {
.banner--photo,
.banner--video { aspect-ratio: 4 / 3; max-height: none; }
}
/* Reduced motion: skip the autoplay; show the poster frame only. */
@media (prefers-reduced-motion: reduce) {
.banner--video video { /* poster image stays as-is; pause is enforced via JS */ }
}
/* ===========================================================================
Critique-pass additions (post /impeccable critique).
=========================================================================== */
/* Hero live-cue: small mono link sitting under the email CTAs, addresses
the missing /live signpost on the homepage without changing the
two-routed-emails decision (DECISIONS.md §5.4). */
.hero__live-cue {
margin-top: var(--s-4);
font-family: "GeistMono", monospace;
font-size: var(--t-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.hero__live-cue a {
color: var(--text);
border-bottom: 1px solid var(--hairline);
padding-bottom: 1px;
transition: color var(--dur-quick) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.hero__live-cue a:hover { color: var(--accent); border-color: var(--accent); }
/* /02 Credits restructured — featured combined credits at display weight,
then a Picture column and a Sound column below. */
.credits__both {
display: flex;
flex-direction: column;
gap: var(--s-3);
margin-bottom: var(--s-12);
padding-bottom: var(--s-8);
border-bottom: 1px solid var(--hairline);
}
.credits__both-eyebrow {
display: flex;
align-items: center;
gap: var(--s-2);
font-family: "GeistMono", monospace;
font-size: var(--t-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-cue);
margin: 0;
}
.credits__featured {
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--s-2) 0;
font-size: clamp(1.5rem, 3.4vw, 2.25rem);
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.05;
}
.credits__featured li {
display: inline-flex;
align-items: baseline;
}
.credits__featured li + li::before {
content: "/";
color: var(--text-cue);
opacity: 0.55;
font-weight: 400;
font-family: "GeistMono", monospace;
margin: 0 clamp(var(--s-3), 2vw, var(--s-6));
font-size: 0.8em;
}
.credits__featured cite {
font-style: normal;
color: var(--text);
}
.credits__cols {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-8);
}
@media (min-width: 760px) {
.credits__cols { grid-template-columns: 1fr 1fr; gap: var(--s-16); }
}
.credits__col-head {
display: flex;
align-items: center;
gap: var(--s-2);
font-family: "GeistMono", monospace;
font-size: var(--t-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-cue);
padding-bottom: var(--s-3);
border-bottom: 1px solid var(--hairline);
margin-bottom: var(--s-4);
}
.credits__sub {
list-style: none;
margin: 0; padding: 0;
display: flex;
flex-direction: column;
gap: var(--s-2);
font-size: var(--t-lg);
font-weight: 500;
line-height: 1.2;
}
.credits__sub cite {
font-style: normal;
color: var(--text);
}
/* Drop the old grid layout for credits since we restructured. */
.credits__list { display: none; }
/* ===========================================================================
/about page primitives
=========================================================================== */
/* Page lede — used by /about and any future content page that wants a
typographic top section without the asymmetric photo pane. */
.page-title {
font-size: clamp(2rem, 4.6vw, 3.5rem);
line-height: 1.05;
letter-spacing: -0.02em;
max-width: 22ch;
margin: var(--s-3) 0 var(--s-6) 0;
}
.page-deck {
font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
line-height: 1.5;
max-width: 60ch;
}
/* Two stacked partner bios; each spans the container width so each gets
room to breathe rather than being cramped into a 50/50 column. */
.bio-list {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-12);
}
.bio {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-4);
padding-block: var(--s-6);
border-top: 1px solid var(--hairline);
}
.bio:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 760px) {
.bio {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
gap: var(--s-12);
padding-block: var(--s-8);
}
.bio__head { padding-top: 6px; }
}
.bio__role {
font-family: "GeistMono", monospace;
font-size: var(--t-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-cue);
margin: 0 0 var(--s-2) 0;
}
.bio__name {
font-size: clamp(1.75rem, 3.4vw, 2.5rem);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.05;
margin: 0;
}
.bio__body p {
max-width: 62ch;
}
.bio__body p + p { margin-top: var(--s-3); }
.bio__links {
list-style: none;
margin: var(--s-4) 0 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--s-2);
font-size: var(--t-sm);
color: var(--text-cue);
}
.bio__links a {
color: var(--text);
border-bottom: 1px solid var(--hairline);
padding-bottom: 1px;
transition: color var(--dur-quick) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.bio__links a:hover { color: var(--accent); border-color: var(--accent); }
/* Place links + headshot rail in the right column on desktop alongside body. */
@media (min-width: 760px) {
.bio__body,
.bio__links {
grid-column: 2;
}
.bio__head { grid-column: 1; grid-row: 1; }
.bio__body { grid-column: 2; grid-row: 1; }
.bio__links { grid-column: 2; grid-row: 2; }
}
/* /about's own contact block — slightly more presence than the homepage one. */
.contact--about dl {
font-size: var(--t-lg);
gap: var(--s-3) var(--s-8);
}
.contact--about dt { font-size: var(--t-xs); }
/* Anonymous reporting section. */
.reporting {
display: flex;
flex-direction: column;
gap: var(--s-4);
max-width: 62ch;
}
.reporting__cta { margin-top: var(--s-4); }
.reporting__cta .cta-text[data-pending="true"] {
color: var(--text-cue);
pointer-events: none;
border-color: var(--hairline);
}
.reporting__cta .cta-text[data-pending="true"]::after { color: var(--text-cue); }
/* ===========================================================================
/software page primitives
=========================================================================== */
/* Featured shipping tool — more depth than .tool-row.
Used for the credibility-anchor entry on /software (AAF Browser today). */
.tool-detail {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-6);
padding-block: var(--s-6) 0;
}
@media (min-width: 760px) {
.tool-detail {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
gap: var(--s-12);
padding-block: var(--s-8) 0;
}
}
.tool-detail__head { display: flex; flex-direction: column; gap: var(--s-3); }
.tool-detail__status {
display: flex;
align-items: center;
gap: var(--s-3);
margin: 0;
flex-wrap: wrap;
}
.tool-detail__path {
font-family: "GeistMono", monospace;
font-size: var(--t-xs);
letter-spacing: 0.06em;
color: var(--text-cue);
}
.tool-detail__name {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.0;
margin: 0;
}
.tool-detail__tag {
font-size: var(--t-lg);
color: var(--text-cue);
margin: 0;
max-width: 28ch;
}
.tool-detail__body p { max-width: 60ch; }
.tool-detail__body p + p { margin-top: var(--s-3); }
.tool-detail__bullets {
list-style: none;
margin: var(--s-6) 0 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--s-2);
font-size: var(--t-sm);
color: var(--text-cue);
border-top: 1px solid var(--hairline);
padding-top: var(--s-4);
}
.tool-detail__bullets li {
display: flex;
align-items: baseline;
gap: var(--s-3);
}
.tool-detail__bullets li::before {
content: "";
width: 6px; height: 6px;
background: var(--text-cue);
flex: 0 0 auto;
margin-top: 0.5em;
}
.tool-detail__cta {
margin-top: var(--s-4);
}
.tool-detail__cta .cta-text[data-pending="true"] {
color: var(--text-cue);
pointer-events: none;
border-color: var(--hairline);
}
.tool-detail__cta .cta-text[data-pending="true"]::after { color: var(--text-cue); }
@media (min-width: 760px) {
.tool-detail__cta { grid-column: 2; }
}
/* Bottom note below the in-dev list */
.software__note {
margin-top: var(--s-8);
font-size: var(--t-sm);
}
.software__note a {
color: var(--text);
border-bottom: 1px solid var(--hairline);
padding-bottom: 1px;
transition: color var(--dur-quick) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.software__note a:hover { color: var(--accent); border-color: var(--accent); }
/* Slot the URL path next to the badge inside coming-soon tool-rows. */
.tool-row .tool-detail__path { margin-left: var(--s-2); }
/* ===========================================================================
/services page primitives
=========================================================================== */
/* Discipline body: prose intro on the left, equipment spec on the right.
Sound block is bigger than picture block per DECISIONS.md §2.1. */
.discipline-page {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-8);
margin-bottom: var(--s-12);
}
@media (min-width: 760px) {
.discipline-page {
grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr);
gap: var(--s-16);
align-items: start;
}
}
.discipline-page__intro p {
font-size: clamp(1.0625rem, 1.3vw, 1.2rem);
line-height: 1.55;
max-width: 64ch;
}
.discipline-page__intro p + p { margin-top: var(--s-4); }
/* Picture block reads visibly smaller than sound: less prose presence. */
.discipline-page--picture .discipline-page__intro p {
font-size: var(--t-base);
line-height: 1.6;
}
/* Equipment spec sheet — looks like a working room's spec card. */
.spec {
border: 1px solid var(--hairline);
padding: var(--s-6);
background: var(--surface-lift);
}
.spec__label {
font-family: "GeistMono", monospace;
font-size: var(--t-xs);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-cue);
margin: 0 0 var(--s-3) 0;
padding-bottom: var(--s-2);
border-bottom: 1px solid var(--hairline);
}
.spec__list {
display: grid;
grid-template-columns: max-content 1fr;
gap: var(--s-3) var(--s-4);
align-items: baseline;
margin: 0;
font-size: var(--t-sm);
line-height: 1.35;
}
.spec__list dt {
font-family: "GeistMono", monospace;
font-size: var(--t-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-cue);
/* Optical nudge: small mono caps at 12px appear higher than 14px sans
when both are baselined; pull dt down a touch to optically align. */
position: relative;
top: 0.05em;
}
.spec__list dd {
margin: 0;
color: var(--text);
}
/* Live-stream differentiator callout, lives inside the Sound section.
Cool-charcoal panel with an accent left edge. */
.live-callout {
margin-block: var(--s-8) var(--s-12);
padding: var(--s-8);
background: var(--surface-lift);
border: 1px solid var(--hairline);
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: 1fr;
gap: var(--s-3);
max-width: 78ch;
}
.live-callout__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-family: "GeistMono", monospace;
font-size: var(--t-xs);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text);
margin: 0;
}
/* Use the live-perf indicator with a forced-on dot inside the callout. */
.live-callout__eyebrow .live-perf {
background: var(--surface);
border-color: var(--accent);
margin-left: 0;
}
.live-callout__eyebrow .live-dot {
background: var(--accent);
opacity: 1;
box-shadow: 0 0 8px 2px var(--accent-soft);
animation: live-pulse 2.4s var(--ease-out) infinite;
}
.live-callout__title {
font-size: clamp(1.5rem, 2.6vw, 2rem);
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.15;
margin: 0;
}
.live-callout__body {
color: var(--text-cue);
max-width: 60ch;
}
.live-callout__body a {
color: var(--text);
border-bottom: 1px solid var(--hairline);
padding-bottom: 1px;
transition: color var(--dur-quick) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.live-callout__body a:hover { color: var(--accent); border-color: var(--accent); }
.live-callout__cta { margin: 0; }
/* Per-discipline credits — used at the bottom of each /services section. */
.discipline-credits {
margin-top: var(--s-6);
padding-top: var(--s-6);
border-top: 1px solid var(--hairline);
}
.discipline-credits__label {
display: flex;
align-items: center;
gap: var(--s-2);
font-family: "GeistMono", monospace;
font-size: var(--t-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-cue);
margin: 0 0 var(--s-4) 0;
}
.credits__sub--cols {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-2) var(--s-12);
font-size: var(--t-base);
}
@media (min-width: 760px) {
.credits__sub--cols { grid-template-columns: 1fr 1fr; }
}
.discipline-credits__more {
margin-top: var(--s-4);
font-size: var(--t-sm);
}
.discipline-credits__more a {
color: var(--text);
border-bottom: 1px solid var(--hairline);
padding-bottom: 1px;
transition: color var(--dur-quick) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.discipline-credits__more a:hover { color: var(--accent); border-color: var(--accent); }
/* ---------------------------------------------------------------------------
Live portal — /live
--------------------------------------------------------------------------- */
/* Idle-state signpost row (services · software · about). */
.live-idle__signpost {
margin-top: var(--s-6);
font-size: var(--t-sm);
}
.live-idle__signpost a {
color: var(--text);
border-bottom: 1px solid var(--hairline);
padding-bottom: 1px;
transition: color var(--dur-quick) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
.live-idle__signpost a:hover { color: var(--accent); border-color: var(--accent); }
/* Lobby CTA — the one-and-only Join button. */
.live-lobby__cta { margin-top: var(--s-8); }
.btn-join {
display: inline-flex;
align-items: center;
gap: var(--s-3);
background: var(--accent);
color: var(--surface);
font-family: inherit;
font-size: var(--t-lg);
font-weight: 600;
letter-spacing: -0.005em;
padding: 18px 28px;
border: 1px solid var(--accent);
cursor: pointer;
transition: background var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out),
transform var(--dur-quick) var(--ease-out);
}
.btn-join::after {
content: "→";
font-family: "GeistMono", ui-monospace, monospace;
font-weight: 400;
transition: transform var(--dur-base) var(--ease-out-soft);
}
.btn-join:hover {
background: var(--accent-deep);
border-color: var(--accent-deep);
}
.btn-join:hover::after { transform: translateX(3px); }
.btn-join:active { transform: translateY(1px); }
.btn-join:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Player section. The frame is capped by VIEWPORT HEIGHT (not just width) so the
16:9 video fits on screen under the nav and above the stats bar on typical wide
windows instead of overflowing vertically. When the height cap bites, the frame
centers and the cool surround shows on either side.
The section background matches the frame background on purpose: `margin-inline:
auto` can land the frame on a half-pixel x-position, and the browser then
anti-aliases that sub-pixel edge into a faint light vertical line ("white
strips") wherever the frame is darker than what's behind it. Painting the
surround the same colour gives the edge nothing lighter to blend against, so the
seam disappears. */
.live-player {
position: relative;
z-index: 8; /* above the grain wash (5), below the sticky header (10): no grain on the video */
padding-block: var(--s-6) var(--s-12);
background: oklch(8% 0.004 240);
--player-reserve: 210px; /* chrome to keep in view: nav + collapsed stats + breathing room */
}
/* Open stats bar is taller, so reserve more height: nav + full video + fully open
stats all fit when open; the video grows back when the bar is closed. */
.live-player:has(.live-stats[open]) { --player-reserve: 300px; }
.live-player__container { max-width: 1600px; }
.live-player__frame {
aspect-ratio: 16 / 9;
width: 100%;
max-width: calc((100vh - var(--player-reserve)) * 16 / 9);
max-width: calc((100svh - var(--player-reserve)) * 16 / 9);
margin-inline: auto;
background: oklch(8% 0.004 240);
overflow: hidden;
}
.live-player__frame iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
background: oklch(8% 0.004 240);
}
.live-player__note {
margin-top: var(--s-4);
font-size: var(--t-sm);
}
.live-player__note a {
color: var(--text);
border-bottom: 1px solid var(--hairline);
padding-bottom: 1px;
transition: color var(--dur-quick) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
.live-player__note a:hover { color: var(--accent); border-color: var(--accent); }
/* Browser advisory above the Join button — soft gate, never blocks. */
.live-browser-note {
margin-top: var(--s-6);
padding: var(--s-4) var(--s-5);
border: 1px solid var(--accent);
background: oklch(20% 0.008 240);
max-width: 62ch;
}
.live-browser-note__title {
margin: 0 0 var(--s-2) 0;
font-family: "GeistMono", ui-monospace, monospace;
font-size: var(--t-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
}
.live-browser-note__body {
margin: 0;
color: var(--text);
font-size: var(--t-base);
line-height: 1.55;
}
/* Connection stats — a disclosure bar BELOW the player, never over it. The
picture area is sacred: these readouts live in normal flow under the frame,
collapsed by default and toggled by the client. Native /
gives the disclosure triangle and keyboard a11y for free. Unlike vdo.ninja's
own &stats overlay, this is freely show/hide-able and trimmed to essentials. */
.live-stats {
margin-top: var(--s-4);
border: 1px solid var(--hairline);
background: var(--surface-lift);
}
.live-stats__summary {
display: flex;
align-items: center;
gap: var(--s-3);
padding: var(--s-3) var(--s-4);
cursor: pointer;
list-style: none;
font-family: "GeistMono", ui-monospace, monospace;
font-size: var(--t-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-cue);
transition: color var(--dur-quick) var(--ease-out),
background var(--dur-quick) var(--ease-out);
}
.live-stats__summary::-webkit-details-marker { display: none; }
.live-stats__summary:hover { color: var(--text); background: oklch(25% 0.008 240); }
.live-stats__summary:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px var(--accent);
}
/* CSS-drawn triangle (no glyph dependency); rotates to point down when open. */
.live-stats__chevron {
flex: none;
width: 0;
height: 0;
border-left: 5px solid currentColor;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
transition: transform var(--dur-base) var(--ease-out);
}
.live-stats[open] .live-stats__chevron { transform: rotate(90deg); }
.live-stats__summary-label { flex: 1 1 auto; }
/* Hairline grid: container painted --hairline, 1px gaps show through between
cells that are painted --surface-lift. Crisp dividers, no side-stripe borders. */
.live-stats__readout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1px;
margin: 0;
border-top: 1px solid var(--hairline);
background: var(--hairline);
}
.live-stats__item {
display: flex;
flex-direction: column;
gap: var(--s-1);
padding: var(--s-3) var(--s-4);
background: var(--surface-lift);
}
.live-stats__item dt {
font-family: "GeistMono", ui-monospace, monospace;
font-size: var(--t-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-cue);
}
.live-stats__item dd {
margin: 0;
font-family: "GeistMono", ui-monospace, monospace;
font-size: var(--t-base);
color: var(--text);
font-variant-numeric: tabular-nums;
}
.live-stats__wait {
margin: 0;
padding: var(--s-3) var(--s-4);
border-top: 1px solid var(--hairline);
background: var(--surface-lift);
font-size: var(--t-sm);
}
@media (prefers-reduced-motion: reduce) {
.live-stats__summary { transition: none; }
.live-stats__chevron { transition: none; }
}
/* ---------------------------------------------------------------------------
Operator console — /admin/
Utility surface; uses the same tokens as the marketing site but with
less ornament. Functional, not branded.
--------------------------------------------------------------------------- */
.page-admin { background: var(--surface); }
.admin-header {
background: var(--surface-lift);
border-bottom: 1px solid var(--hairline);
position: sticky;
top: 0;
z-index: 10;
}
.admin-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-6);
min-height: 64px;
flex-wrap: wrap;
}
.admin-header__brand {
display: inline-flex;
align-items: baseline;
gap: var(--s-3);
font-family: "GeistMono", ui-monospace, monospace;
font-size: var(--t-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-cue);
}
.admin-header__brand-mark { color: var(--text); font-weight: 600; }
.admin-header__brand:hover .admin-header__brand-mark { color: var(--accent); }
.admin-header__links {
display: inline-flex;
align-items: center;
gap: var(--s-6);
font-family: "GeistMono", ui-monospace, monospace;
font-size: var(--t-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.admin-header__links a {
color: var(--text-cue);
padding-block: 6px;
border-bottom: 1px solid transparent;
transition: color var(--dur-quick) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
.admin-header__links a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.admin-main { padding-block: var(--s-12) var(--s-16); }
.admin-main__inner { display: flex; flex-direction: column; gap: var(--s-8); }
.admin-page-head h1 {
font-size: var(--t-xl);
font-weight: 600;
letter-spacing: -0.015em;
margin: 0 0 var(--s-2) 0;
}
.admin-page-head p { max-width: 60ch; }
.admin-flash {
padding: var(--s-3) var(--s-4);
border: 1px solid var(--hairline);
font-size: var(--t-sm);
}
.admin-flash--ok { border-color: var(--accent); color: var(--text); }
.admin-flash--error { border-color: oklch(58% 0.005 240); color: var(--text); background: oklch(20% 0.005 240); }
.admin-card {
border: 1px solid var(--hairline);
background: var(--surface-lift);
padding: var(--s-8);
display: grid;
gap: var(--s-6);
}
.admin-card__head { display: flex; flex-direction: column; gap: var(--s-3); }
.admin-card__eyebrow {
font-family: "GeistMono", ui-monospace, monospace;
font-size: var(--t-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-cue);
margin: 0;
}
.admin-card__body { display: flex; flex-direction: column; gap: var(--s-4); }
.admin-card__desc { max-width: 60ch; color: var(--text-cue); }
.admin-card__desc a { color: var(--text); border-bottom: 1px solid var(--hairline); }
.admin-card__desc a:hover { color: var(--accent); border-color: var(--accent); }
.admin-card__meta { margin: 0; font-size: var(--t-sm); }
.admin-card__action { margin-top: var(--s-2); }
.admin-status {
display: inline-flex;
align-items: center;
gap: var(--s-3);
margin: 0;
font-family: "GeistMono", ui-monospace, monospace;
font-size: var(--t-xl);
letter-spacing: 0.04em;
color: var(--text-cue);
}
.admin-status__dot {
width: 14px;
height: 14px;
border-radius: 999px;
background: var(--hairline);
transition: background var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.admin-status--live { color: var(--text); }
.admin-status--live .admin-status__dot {
background: var(--accent);
box-shadow: var(--glow-live);
animation: live-pulse 2.4s var(--ease-out) infinite;
}
@media (prefers-reduced-motion: reduce) {
.admin-status--live .admin-status__dot { animation: none; }
}
.btn-admin {
display: inline-flex;
align-items: center;
gap: var(--s-3);
font-family: inherit;
font-size: var(--t-lg);
font-weight: 600;
padding: 14px 24px;
background: var(--accent);
color: var(--surface);
border: 1px solid var(--accent);
cursor: pointer;
transition: background var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out),
transform var(--dur-quick) var(--ease-out);
}
.btn-admin:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-admin:active { transform: translateY(1px); }
.btn-admin:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--accent-soft);
}
.admin-footer {
border-top: 1px solid var(--hairline);
padding-block: var(--s-6);
margin-top: var(--s-12);
}
/* Viewer-config form — second admin card. */
.admin-card__title {
margin: 0;
font-size: var(--t-xl);
font-weight: 600;
letter-spacing: -0.015em;
}
.admin-form { display: flex; flex-direction: column; gap: var(--s-6); }
.admin-form__group {
border: 0;
border-top: 1px solid var(--hairline);
margin: 0;
padding: var(--s-6) 0 0 0;
display: grid;
gap: var(--s-4);
}
.admin-form__group:first-of-type {
border-top: 0;
padding-top: 0;
}
.admin-form__group legend {
font-family: "GeistMono", ui-monospace, monospace;
font-size: var(--t-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-cue);
padding: 0;
margin-bottom: var(--s-2);
}
.admin-form__row {
display: grid;
grid-template-columns: minmax(160px, 200px) minmax(200px, 320px) 1fr;
align-items: baseline;
gap: var(--s-4);
}
@media (max-width: 759px) {
.admin-form__row { grid-template-columns: 1fr; gap: var(--s-2); }
}
.admin-form__row label {
font-weight: 500;
color: var(--text);
}
.admin-form__row input[type="text"],
.admin-form__row input[type="number"],
.admin-form__row input[type="password"],
.admin-form__row select {
font-family: inherit;
font-size: var(--t-base);
padding: 8px 10px;
background: var(--surface);
color: var(--text);
border: 1px solid var(--hairline);
width: 100%;
max-width: 320px;
transition: border-color var(--dur-base) var(--ease-out);
}
.admin-form__row input:focus-visible,
.admin-form__row select:focus-visible {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px var(--accent-soft);
}
/* Password → hash helper: input + button on one line, status wraps below. */
.admin-form__inline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-3);
}
.admin-form__inline input[type="password"] {
flex: 1 1 180px;
min-width: 0;
}
.admin-form__inline .btn-admin { flex: 0 0 auto; }
#hash-status {
flex-basis: 100%;
font-size: var(--t-sm);
margin: 0;
}
#hash-status.is-ok { color: var(--accent); }
#hash-status.is-error { color: var(--text); font-weight: 600; }
.admin-form__hint {
font-size: var(--t-sm);
line-height: 1.45;
margin: 0;
}
.admin-form__hint code {
font-family: "GeistMono", ui-monospace, monospace;
font-size: 0.92em;
color: var(--text);
}
.admin-form__row--check label.admin-form__check {
display: inline-flex;
align-items: center;
gap: var(--s-3);
cursor: pointer;
grid-column: 1 / 3;
}
.admin-form__row--check input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--accent);
cursor: pointer;
}
.admin-form__actions {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
margin-top: var(--s-2);
}
.btn-admin--ghost {
background: transparent;
color: var(--text);
border-color: var(--hairline);
}
.btn-admin--ghost:hover {
background: var(--surface);
border-color: var(--text-cue);
}
.admin-card__output {
border-top: 1px solid var(--hairline);
padding-top: var(--s-6);
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.admin-code {
margin: 0;
padding: var(--s-3) var(--s-4);
background: var(--surface);
border: 1px solid var(--hairline);
font-family: "GeistMono", ui-monospace, monospace;
font-size: var(--t-sm);
line-height: 1.5;
color: var(--text);
overflow-x: auto;
white-space: pre-wrap;
word-break: break-all;
}
/* Fallback links card — read-only URL + copy button list. */
.admin-fallbacks {
display: flex;
flex-direction: column;
gap: var(--s-6);
}
.admin-fallback {
display: flex;
flex-direction: column;
gap: var(--s-2);
}
.admin-fallback__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-3);
}
.admin-fallback__label {
margin: 0;
font-weight: 600;
font-size: var(--t-base);
color: var(--text);
}
.admin-fallback__desc {
margin: 0;
font-size: var(--t-sm);
color: var(--text-cue);
max-width: 60ch;
}
.admin-fallback__url {
margin: 0;
padding: var(--s-2) var(--s-3);
background: var(--surface);
border: 1px solid var(--hairline);
font-family: "GeistMono", ui-monospace, monospace;
font-size: var(--t-xs);
line-height: 1.45;
color: var(--text);
overflow-x: auto;
white-space: pre-wrap;
word-break: break-all;
}
.btn-copy {
font-family: "GeistMono", ui-monospace, monospace;
font-size: var(--t-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 6px 12px;
background: transparent;
color: var(--text);
border: 1px solid var(--hairline);
cursor: pointer;
transition: border-color var(--dur-quick) var(--ease-out),
color var(--dur-quick) var(--ease-out);
flex-shrink: 0;
}
.btn-copy:hover { border-color: var(--accent); color: var(--accent); }
.btn-copy:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-soft); }
.btn-copy.is-copied { border-color: var(--accent); color: var(--accent); }
.btn-copy.is-failed { border-color: var(--text-cue); color: var(--text-cue); }