/* =================================================================
Vertex — shared site styles
All pages link this. Page-specific CSS stays inline per page.
================================================================= */
/* Editorial drop-cap face — Playfair Display italic 700, loaded directly
in the tag of pages that use drop caps (manifesto, safety,
culture, model-card). Lives on the same Google Fonts request as Inter
Tight + JetBrains Mono so there's no extra round trip. */
:root {
--bg: #0a0b0d;
--bg-2: #101216;
--bg-3: #15171b;
--line: #1f2227;
--line-2: #2a2d33;
--fg: #e8e6e1;
--fg-dim: #8b8d92;
--fg-dimmer: #74767c;
--accent: #b8e6b3;
--grid-line: rgba(255,255,255,0.025);
--topnav-bg: rgba(10,11,13,0.92);
--topnav-bg-mid: rgba(10,11,13,0.6);
--hero-overlay:
radial-gradient(ellipse at 50% 55%, transparent 35%, rgba(10,11,13,0.35) 75%, rgba(10,11,13,0.9) 100%),
linear-gradient(to right, rgba(10,11,13,0.95), transparent 25%);
}
[data-theme="light"] {
--bg: #c4c6ca;
--bg-2: #b9bbbf;
--bg-3: #afb1b5;
--line: #8a8c90;
--line-2: #75777b;
--fg: #16181c;
--fg-dim: #3c3e44;
--fg-dimmer: #454649;
--accent: #185014;
--grid-line: rgba(0,0,0,0.06);
--topnav-bg: rgba(196,198,202,0.95);
--topnav-bg-mid: rgba(196,198,202,0.7);
--hero-overlay:
radial-gradient(ellipse at 50% 55%, transparent 35%, rgba(196,198,202,0.35) 75%, rgba(196,198,202,0.9) 100%),
linear-gradient(to right, rgba(196,198,202,0.95), transparent 25%);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
background: var(--bg);
color: var(--fg);
font-family: 'Inter Tight', -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Text selection — native ::selection only (compositor-rendered, zero lag).
Backgrounds are OPAQUE on purpose: WebKit repaints translucent selection
backgrounds on every live extension, which flickers per character. These
hexes are the accent pre-blended against each theme's --bg, so they look
identical to the translucent version without the flicker. */
::selection {
background-color: #425142; /* accent @32% over #0a0b0d */
color: inherit;
text-shadow: none;
}
::-moz-selection {
background-color: #425142;
color: inherit;
text-shadow: none;
}
[data-theme="light"] ::selection,
[data-theme="light"] ::-moz-selection {
background-color: #a3b5a6; /* green @22% over #c4c6ca */
color: inherit;
}
body { min-height: 100vh; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
/* Defensive: prevent any embedded media from causing horizontal scroll on
narrow viewports. Targets img/video/iframe — not canvas (Three.js wants
to manage its own width). */
img, video, iframe, picture, source { max-width: 100%; }
img, video { height: auto; }
img.fill, video.fill { height: 100%; }
/* Background grid */
body::before {
content: '';
position: fixed; inset: 0;
background-image:
linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
background-size: 80px 80px;
pointer-events: none; z-index: 1;
}
/* ════════════════════════════════════════════════════════════════════
Command palette — Cmd/Ctrl+K. Searchable list of nav targets +
actions. Esc closes. Up/Down navigates, Enter executes. Lives at
top of stacking order so it never gets buried.
════════════════════════════════════════════════════════════════════ */
.cmdpal-scrim {
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.66);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 2147483640;
display: none;
opacity: 0;
transition: opacity 0.18s ease;
}
.cmdpal-scrim.is-open { display: block; opacity: 1; }
.cmdpal {
position: fixed;
top: 22vh; left: 50%;
transform: translateX(-50%) translateY(-8px);
width: min(560px, 92vw);
background: var(--bg);
border: 1px solid var(--line-2);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
z-index: 2147483641;
display: none;
opacity: 0;
transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
font-family: 'Inter Tight', sans-serif;
}
.cmdpal-scrim.is-open + .cmdpal,
.cmdpal.is-open {
display: block;
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.cmdpal-input {
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid var(--line);
color: var(--fg);
font-family: inherit;
font-size: 16px;
padding: 18px 20px;
outline: none;
}
.cmdpal-input::placeholder { color: var(--fg-dimmer); }
.cmdpal-list {
max-height: 50vh;
overflow-y: auto;
padding: 8px 0;
}
.cmdpal-item {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 18px;
padding: 10px 20px;
cursor: pointer;
font-size: 14px;
color: var(--fg-dim);
border-left: 2px solid transparent;
}
.cmdpal-item.is-active {
background: var(--bg-2);
color: var(--fg);
border-left-color: var(--accent);
}
.cmdpal-item .label { display: flex; flex-direction: column; gap: 2px; }
.cmdpal-item .name { color: inherit; }
.cmdpal-item.is-active .name { color: var(--fg); }
.cmdpal-item .sub {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.16em;
color: var(--fg-dimmer);
text-transform: uppercase;
}
.cmdpal-item .kbd {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.12em;
color: var(--fg-dimmer);
border: 1px solid var(--line);
padding: 2px 6px;
border-radius: 2px;
}
.cmdpal-foot {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
border-top: 1px solid var(--line);
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.16em;
color: var(--fg-dimmer);
text-transform: uppercase;
}
.cmdpal-foot .keys { display: flex; gap: 10px; }
.cmdpal-foot .keys span { display: inline-flex; align-items: center; gap: 4px; }
.cmdpal-foot .keys span::before {
content: attr(data-key);
border: 1px solid var(--line);
padding: 1px 5px;
border-radius: 2px;
color: var(--fg-dim);
font-size: 9px;
}
.cmdpal-empty {
padding: 24px 20px;
text-align: center;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.14em;
color: var(--fg-dimmer);
text-transform: uppercase;
}
/* ════════════════════════════════════════════════════════════════════
Site search — press `/` to open. Shares modal chrome with cmdpal
but indexes a richer corpus (titles + descriptions + headings) and
highlights matched terms inline. Distinct DOM so both can coexist.
════════════════════════════════════════════════════════════════════ */
.search-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.66); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 2147483640; display: none; opacity: 0; transition: opacity 0.18s ease; }
.search-scrim.is-open { display: block; opacity: 1; }
.search-modal {
position: fixed; top: 14vh; left: 50%;
transform: translateX(-50%) translateY(-8px);
width: min(640px, 94vw);
background: var(--bg);
border: 1px solid var(--line-2);
box-shadow: 0 24px 80px rgba(0,0,0,0.6);
z-index: 2147483641;
display: none; opacity: 0;
transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
font-family: 'Inter Tight', sans-serif;
}
.search-modal.is-open { display: block; opacity: 1; transform: translateX(-50%) translateY(0); }
.search-input {
width: 100%; background: transparent; border: none;
border-bottom: 1px solid var(--line);
color: var(--fg); font-family: inherit; font-size: 17px;
padding: 20px 22px 20px 52px; outline: none;
}
.search-input::placeholder { color: var(--fg-dimmer); }
.search-icon {
position: absolute; top: 22px; left: 22px;
width: 16px; height: 16px;
border: 1px solid var(--accent); border-radius: 50%;
pointer-events: none;
}
.search-icon::after {
content: ''; position: absolute; top: 14px; left: 12px;
width: 8px; height: 1px; background: var(--accent);
transform: rotate(45deg); transform-origin: left center;
}
.search-list { max-height: 56vh; overflow-y: auto; padding: 8px 0; }
.search-item {
display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 16px;
padding: 12px 22px; cursor: pointer; color: var(--fg-dim);
border-left: 2px solid transparent;
text-decoration: none;
}
.search-item.is-active { background: var(--bg-2); color: var(--fg); border-left-color: var(--accent); }
.search-item-body { display: grid; gap: 4px; min-width: 0; }
.search-item-crumb {
font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 0.16em; color: var(--fg-dimmer); text-transform: uppercase;
}
.search-item-crumb .sep { color: var(--line-2); margin: 0 6px; }
.search-item-title { font-size: 15px; font-weight: 500; color: inherit; letter-spacing: -0.01em; line-height: 1.3; }
.search-item.is-active .search-item-title { color: var(--fg); }
.search-item-snippet { font-size: 13px; line-height: 1.5; color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.search-item mark { background: rgba(184,230,179,0.22); color: var(--accent); padding: 0 1px; border-radius: 1px; }
.search-item .kbd {
font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em;
color: var(--fg-dimmer); border: 1px solid var(--line); padding: 2px 6px; border-radius: 2px; align-self: center;
}
.search-foot {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 22px; border-top: 1px solid var(--line);
font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em;
color: var(--fg-dimmer); text-transform: uppercase;
}
.search-foot .keys { display: flex; gap: 10px; }
.search-foot .keys span { display: inline-flex; align-items: center; gap: 4px; }
.search-foot .keys span::before {
content: attr(data-key);
border: 1px solid var(--line); padding: 1px 5px; border-radius: 2px;
color: var(--fg-dim); font-size: 9px;
}
.search-empty {
padding: 32px 22px; text-align: center;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.14em; color: var(--fg-dimmer); text-transform: uppercase;
}
.search-empty .hint { display: block; margin-top: 8px; font-size: 10px; opacity: 0.7; }
@media (max-width: 600px) {
.search-modal { top: 8vh; width: 96vw; }
.search-input { padding: 16px 18px 16px 44px; font-size: 16px; /* iOS won't zoom on 16+ */ }
.search-icon { top: 18px; left: 18px; width: 14px; height: 14px; }
.search-icon::after { top: 12px; left: 11px; width: 7px; }
.search-item { padding: 10px 18px; gap: 12px; }
.search-item-title { font-size: 14px; }
.search-item-snippet { font-size: 12px; -webkit-line-clamp: 2; line-clamp: 2; }
.search-foot { padding: 10px 18px; gap: 8px; flex-wrap: wrap; font-size: 9px; }
.search-foot .keys { gap: 6px; }
.search-foot > div:last-child { display: none; }
}
/* Focus-visible — every interactive element added this loop gets the same
accent outline treatment as the legacy controls. */
.d-chip:focus-visible, .d-rule-head:focus-visible,
.ar-chip:focus-visible, .ar-run:focus-visible, .ar-reset:focus-visible, .ag-cell:focus-visible,
.tr-dot:focus-visible, .cmd-go:focus-visible, .cmd-input:focus-visible,
.ev-row:focus-visible, .op-card:focus-visible, .sc-row:focus-visible,
.hm-rule:focus-visible, .search-item:focus-visible, .ann-toggle:focus-visible,
#dExport:focus-visible, #citeCopy:focus-visible, #mListen:focus-visible {
outline: 1px solid var(--accent);
outline-offset: 2px;
}
/* Skip-to-content — visually hidden until keyboard-focused. */
.skip-link {
position: fixed;
top: -48px; left: 16px;
z-index: 2147483641;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.14em;
padding: 10px 16px;
background: var(--bg); color: var(--accent);
border: 1px solid var(--accent);
transition: top 0.18s ease;
}
.skip-link:focus, .skip-link:focus-visible { top: 16px; outline: none; }
/* ════════════════════════════════════════════════════════════════════
Topnav state — current-section tick + careers role count.
════════════════════════════════════════════════════════════════════ */
a.nav-link.is-here { position: relative; color: var(--fg); }
.mega-col.is-current { border-color: var(--line-2) !important; background: var(--bg-2); }
.mega-col.is-current .mega-title::after { content: ' ·'; color: var(--accent); }
.search-summary { padding: 8px 22px 4px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .18em; color: var(--fg-dimmer); }
.nav-count {
font-size: 9px;
color: var(--accent);
vertical-align: super;
letter-spacing: 0;
margin-left: 1px;
}
/* ════════════════════════════════════════════════════════════════════
Section rail — fixed left nav on long-form pages (body.has-section-rail).
Built by initSectionRail(); fades in after the hero scrolls past.
════════════════════════════════════════════════════════════════════ */
.sec-rail {
position: fixed;
left: 28px; top: 50%;
transform: translateY(-50%);
z-index: 50;
display: grid;
gap: 2px;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
max-width: 200px;
}
.sec-rail.is-visible { opacity: 1; pointer-events: auto; }
.sec-rail a {
display: grid;
grid-template-columns: 26px 1fr;
gap: 10px;
align-items: baseline;
padding: 5px 8px;
border-left: 2px solid transparent;
transition: border-color 0.18s, background 0.18s;
}
.sec-rail a:hover { background: var(--bg-2); }
.sec-rail a.is-active { border-left-color: var(--accent); }
.sec-rail .n { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.12em; color: var(--fg-dimmer); }
.sec-rail a.is-active .n { color: var(--accent); }
.sec-rail .t {
font-size: 11px; line-height: 1.35; color: var(--fg-dimmer);
overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
-webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
transition: color 0.18s;
}
.sec-rail a.is-active .t { color: var(--fg-dim); }
.sec-rail a:hover .t { color: var(--fg); }
@media (max-width: 1280px) { .sec-rail { display: none; } }
/* ════════════════════════════════════════════════════════════════════
Keyboard overlay — `?` opens, Esc closes. Lists g-chords + globals.
════════════════════════════════════════════════════════════════════ */
.kbd-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.66); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 2147483640; display: none; opacity: 0; transition: opacity 0.18s ease; }
.kbd-scrim.is-open { display: block; opacity: 1; }
.kbd-modal {
position: fixed; top: 18vh; left: 50%;
transform: translateX(-50%) translateY(-8px);
width: min(560px, 92vw);
background: var(--bg); border: 1px solid var(--line-2);
box-shadow: 0 24px 80px rgba(0,0,0,0.6);
z-index: 2147483641; display: none; opacity: 0;
transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
padding: 26px 30px 30px;
}
.kbd-modal.is-open { display: block; opacity: 1; transform: translateX(-50%) translateY(0); }
.kbd-title { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.22em; color: var(--accent); margin-bottom: 20px; }
.kbd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.kbd-h { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.2em; color: var(--fg-dimmer); margin-bottom: 10px; }
.kbd-row { display: flex; align-items: center; gap: 14px; padding: 4px 0; font-size: 13px; color: var(--fg-dim); }
.kbd-row .keys { display: inline-flex; gap: 4px; min-width: 58px; }
.kbd-row kbd {
font-family: 'JetBrains Mono', monospace; font-size: 10px;
border: 1px solid var(--line-2); border-bottom-width: 2px;
padding: 2px 7px; border-radius: 3px; color: var(--fg);
background: var(--bg-2);
}
@media (max-width: 600px) { .kbd-grid { grid-template-columns: 1fr; gap: 20px; } }
/* ════════════════════════════════════════════════════════════════════
Operator photography plates — 16:9 cinematic image in a bordered
frame with a mono caption beneath. Used on vertical pages and the
landing "WHO WE BUILD FOR" grid. Swap the inner ![]()
path to a
real photograph (jpg / webp) when one is available.
════════════════════════════════════════════════════════════════════ */
.op-plate-wrap {
max-width: 1280px;
margin: 0 auto;
padding: 60px 40px 0;
position: relative;
z-index: 2;
}
.op-plate {
display: block;
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
border: 1px solid var(--line);
background: var(--bg-2);
margin: 0;
z-index: 2;
}
.op-plate picture { display: block; width: 100%; height: 100%; }
.op-plate img {
width: 100%; height: 100%; display: block; object-fit: cover;
transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.4s ease;
filter: saturate(0.92) contrast(1.02);
}
a.op-plate:hover img { transform: scale(1.018); filter: saturate(1.05) contrast(1.05); }
.op-plate-cap {
display: flex; justify-content: space-between; flex-wrap: wrap;
gap: 16px; padding-top: 14px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.16em; color: var(--fg-dimmer);
text-transform: uppercase;
}
.op-plate-cap .ti { color: var(--fg-dim); }
.op-plate-cap .src { color: var(--accent); }
@media (max-width: 700px) {
.op-plate-wrap { padding: 40px 20px 0; }
.op-plate-cap { font-size: 10px; letter-spacing: 0.14em; }
}
/* Landing-page "WHO WE BUILD FOR" grid — 2×2 of plates with overlay labels.
Used inside the index.html capabilities flow. */
.op-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin: 32px 0 0;
position: relative;
z-index: 2;
}
.op-card {
position: relative; display: block;
overflow: hidden;
border: 1px solid var(--line);
background: var(--bg-2);
aspect-ratio: 16 / 10;
text-decoration: none; color: inherit;
z-index: 2;
}
.op-card picture { display: block; width: 100%; height: 100%; }
.op-card img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(0.9) contrast(1.02); transition: transform 0.6s cubic-bezier(0.22,0.61,0.36,1), filter 0.4s ease; }
.op-card:hover img { transform: scale(1.02); filter: saturate(1.05) contrast(1.06); }
.op-card-veil {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(10,11,13,0.92) 0%, rgba(10,11,13,0.4) 45%, rgba(10,11,13,0) 75%);
pointer-events: none;
}
.op-card-label {
position: absolute; left: 22px; right: 22px; bottom: 20px;
display: grid; gap: 6px;
pointer-events: none;
}
.op-card-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase;
}
.op-card-title {
font-family: 'Inter Tight', sans-serif;
font-size: clamp(20px, 2.3vw, 28px); font-weight: 500; letter-spacing: -0.02em;
color: #e8e6e1; /* locked light — sits on the always-dark .op-card-veil regardless of theme */
}
.op-card-title em { font-style: italic; font-weight: 400; color: var(--accent); }
.op-card-arrow {
position: absolute; top: 18px; right: 18px;
font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em;
color: var(--accent); border: 1px solid var(--accent); padding: 4px 9px;
background: rgba(10,11,13,0.65); backdrop-filter: blur(4px);
transition: background 0.2s, color 0.2s;
}
.op-card:hover .op-card-arrow { background: var(--accent); color: #0a0b0d; }
@media (max-width: 700px) {
.op-grid { grid-template-columns: 1fr; gap: 12px; }
.op-card { aspect-ratio: 16 / 9; }
}
/* ════════════════════════════════════════════════════════════════════
Vertex wordmark — Monoton display face (same as the drop cap).
Replaces the old monospace VERTEX + 10px accent square combo with a
single brand element. !important overrides because most pages have
inline page-CSS that sets .topnav-mark / .footer-mark fonts at the
same specificity. The mark-square is hidden site-wide.
════════════════════════════════════════════════════════════════════ */
.topnav-mark,
.footer-mark,
.mobile-nav-mark,
.mobile-nav-foot .mobile-nav-mark {
font-family: 'Monoton', 'Inter Tight', sans-serif !important;
font-weight: 400 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase;
}
.topnav-mark { font-size: 22px !important; gap: 0 !important; }
.footer-mark { font-size: 26px !important; gap: 0 !important; }
.mobile-nav-mark { font-size: 22px !important; gap: 0 !important; }
/* The accent square was the old mark — Monoton wordmark replaces it */
.mark-square { display: none !important; }
/* ────────────────────────────────────────────────────────────────────
Logo morph on scroll — VERTEX collapses to V[X-with-only-/-stroke].
Implementation: two overlapping X glyphs in the end slot. One full,
one clipped via clip-path to a diagonal strip that keeps the /
stroke and hides the \ stroke. As you scroll, the full X cross-fades
out and the clipped X cross-fades in. Same glyph, same baseline,
same stripes — the result reads as 'the X lost one diagonal,' not
'X replaced with /'. Middle letters ERTE collapse and fade in sync.
Continuous scroll-driven via the --logo-t CSS variable (updated by
site.js initLogoMorph()), 0 at top of page → 1 once you've scrolled
~120px. No CSS transitions: rAF-driven variable updates already run
at 60fps and a transition would add latency.
Markup is constructed at boot by initLogoMorph(): the wordmark span
becomes ERTEXX. */
.topnav-mark .logo-v,
.topnav-mark .logo-mid,
.topnav-mark .logo-end,
.topnav-mark .logo-x,
.topnav-mark .logo-x-slash {
display: inline-block;
}
.topnav-mark .logo-mid {
overflow: hidden;
vertical-align: top;
white-space: nowrap;
opacity: calc(1 - var(--logo-t, 0));
max-width: calc((1 - var(--logo-t, 0)) * 5em);
letter-spacing: calc(var(--logo-t, 0) * -0.5em);
}
.topnav-mark .logo-end {
position: relative;
/* As the morph completes, pull the X (and its visible /) leftward
so it sits tight against the V. Layout-shifting margin, not
transform, so the overall wordmark also gets visually compact. */
margin-left: calc(var(--logo-t, 0) * -0.6em);
}
.topnav-mark .logo-x {
opacity: calc(1 - var(--logo-t, 0));
}
/* Compact-state slash — a real Monoton V character clipped to its
right half, so only the V's right leg is visible. Same font as the
wordmark and the drop cap; no hand-drawn approximations. */
.topnav-mark .logo-x-slash {
display: inline-block;
position: absolute;
left: 0;
top: 0;
opacity: var(--logo-t, 0);
pointer-events: none;
/* Diagonal cut — left edge slopes from (72%, 0%) at top to (15%, 100%)
at bottom. The bottom-left vertex pulled leftward from 28% → 15%
so the right leg's bottom stripe isn't sliced by the diagonal
(the stripe extends below the clip line at this y range). Less
steep slope, full stripe visibility through the bottom. */
-webkit-clip-path: polygon(72% 0%, 100% 0%, 100% 100%, 15% 100%);
clip-path: polygon(72% 0%, 100% 0%, 100% 100%, 15% 100%);
}
/* Reduced motion: skip to end state once a small scroll happens, no
continuous interpolation. */
@media (prefers-reduced-motion: reduce) {
.topnav-mark .logo-mid,
.topnav-mark .logo-x,
.topnav-mark .logo-x-slash { transition: none; }
}
/* ================ Topnav ================ */
.topnav {
position: fixed; top: 0; left: 0; right: 0;
z-index: 100;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 22px 40px;
background: linear-gradient(to bottom, var(--topnav-bg), var(--topnav-bg-mid) 70%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: background 0.22s ease, backdrop-filter 0.22s ease, -webkit-backdrop-filter 0.22s ease;
}
/* At the very top of the page the nav background disappears entirely,
so heroes / explainers / scene plates show through edge-to-edge.
The body.is-scrolled flag is set / cleared by initNavScroll() in site.js. */
body:not(.is-scrolled) .topnav {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.topnav-mark {
display: flex; align-items: center; gap: 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; letter-spacing: 0.12em; font-weight: 600;
}
.topnav-mark a { display: flex; align-items: center; gap: 10px; }
.mark-square { width: 10px; height: 10px; display: inline-block; background: var(--accent); }
.nav-links-row { display: flex; gap: 32px; align-items: center; }
a.nav-link {
color: #b8babf;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; font-weight: 500; letter-spacing: 0.14em;
white-space: pre; min-width: 9ch;
display: inline-block; text-align: center;
padding: 6px 10px;
border: 1px solid transparent;
transition: color 0.18s, border-color 0.18s, background 0.18s;
}
a.nav-link:hover, a.nav-link:focus-visible {
color: #ffffff;
border-color: var(--accent);
background: rgba(184, 230, 179, 0.08);
}
[data-theme="light"] a.nav-link { color: #2a2c30; }
[data-theme="light"] a.nav-link:hover, [data-theme="light"] a.nav-link:focus-visible { color: #000; }
/* ════════════════════════════════════════════════════════════════════
Nav dropdowns — bento panels, one distinct grid per menu.
Shared shell: rounded 24, gradient wash, deep float shadow, spring
stagger, cursor spotlight, orbiting conic edge. Per-menu: its own
width, grid, tile placement, and semantically-matched ornaments.
════════════════════════════════════════════════════════════════════ */
@property --bt-angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
.nav-item { position: relative; }
.nav-item::after {
content: ''; position: absolute; top: 100%; left: -12px; right: -12px; height: 12px;
}
.nav-item:hover::before,
.nav-item:focus-within::before {
content: '';
position: fixed;
left: 0; right: 0;
top: 56px; height: 22px;
z-index: 150;
}
.nav-item .mega-menu {
position: fixed;
top: 74px;
left: 50%; right: auto;
transform: translate(-50%, -8px) scale(0.97);
transform-origin: top center;
background:
linear-gradient(135deg, rgba(184,230,179,0.05), rgba(126,179,216,0.03) 55%, transparent),
var(--bg);
border: 1px solid var(--line-2);
border-radius: 24px;
display: grid;
gap: 10px;
padding: 16px;
opacity: 0;
/* visibility:hidden takes the closed menu's links out of the keyboard tab
order (opacity alone leaves them focusable while invisible). Delayed in
the transition so the fade-out still plays before it's pulled. */
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.2s;
z-index: 200;
box-shadow: 0 30px 70px rgba(0,0,0,0.6);
}
.nav-item:hover .mega-menu,
.nav-item:focus-within .mega-menu,
.nav-item.is-open .mega-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, 0) scale(1);
transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}
/* ── Tile base ── */
.bt {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 13px 15px;
border-radius: 15px;
overflow: hidden;
border: 1px solid transparent;
background:
linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
linear-gradient(155deg, rgba(184,230,179,0.28), rgba(255,255,255,0.06) 45%, rgba(126,179,216,0.14)) border-box;
}
@keyframes bt-orbit { to { --bt-angle: 360deg; } }
.bt:hover {
background:
linear-gradient(var(--bg-3), var(--bg-3)) padding-box,
conic-gradient(from var(--bt-angle),
rgba(184,230,179,0.9), rgba(126,179,216,0.35) 30%,
rgba(184,230,179,0.12) 55%, rgba(184,230,179,0.9)) border-box;
animation: bt-orbit 2.6s linear infinite;
}
.bt::after {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
background: radial-gradient(190px circle at var(--mx, 50%) var(--my, 50%),
rgba(184,230,179,0.13), transparent 65%);
opacity: 0;
transition: opacity 0.25s ease;
pointer-events: none;
z-index: 1;
}
.bt:hover::after { opacity: 1; }
.bt-name {
position: relative; z-index: 2;
font-family: 'Inter Tight', sans-serif;
font-size: 14.5px; font-weight: 600;
color: var(--fg); letter-spacing: -0.005em;
line-height: 1.15;
}
.bt-sub {
position: relative; z-index: 2;
margin-top: 3px;
padding-right: 34px;
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
color: var(--fg-dim); letter-spacing: 0.03em;
line-height: 1.35;
}
.bt:hover .bt-name { color: var(--accent); transition: color 0.15s; }
.bt.is-current .bt-sub::after { content: ' ·'; color: var(--accent); }
.bt-hero .bt-name { font-size: 21px; letter-spacing: -0.02em; }
.bt:not(.bt-hero):not(.bt-banner) .bt-name { padding-right: 30px; }
.bt-hero .bt-sub, .bt-banner .bt-sub { padding-right: 0; }
.bt-hero .bt-name, .bt-banner .bt-name { padding-right: 0; }
.bt-banner { flex-direction: row; align-items: center; justify-content: space-between; }
.bt-banner .bt-text { display: flex; flex-direction: column; }
/* ── shared ornaments ── */
.bt-clouds {
position: absolute; inset: -40%;
width: 180%; height: 180%;
background:
radial-gradient(circle at 28% 30%, rgba(184,230,179,0.16), transparent 42%),
radial-gradient(circle at 75% 60%, rgba(126,179,216,0.12), transparent 45%),
radial-gradient(circle at 50% 85%, rgba(184,230,179,0.08), transparent 40%);
filter: blur(20px);
animation: bt-breathe 9s ease-in-out infinite;
pointer-events: none;
}
.bt-clouds.warm {
background:
radial-gradient(circle at 30% 35%, rgba(255,138,92,0.16), transparent 42%),
radial-gradient(circle at 72% 65%, rgba(184,230,179,0.10), transparent 45%),
radial-gradient(circle at 50% 90%, rgba(255,96,96,0.08), transparent 40%);
}
@keyframes bt-breathe {
0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
40% { transform: translate(5%, -4%) scale(1.25) rotate(35deg); }
75% { transform: translate(-4%, 3%) scale(0.92) rotate(-18deg); }
}
.bt-go {
position: absolute; top: 12px; right: 12px; z-index: 2;
width: 28px; height: 28px;
border: 1px solid var(--line-2);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; color: var(--fg-dim);
transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.bt:hover .bt-go {
transform: rotate(45deg);
background: rgba(184,230,179,0.14);
color: var(--accent);
}
.bt-dot {
position: absolute; top: 14px; right: 14px; z-index: 2;
width: 8px; height: 8px; border-radius: 50%;
background: var(--accent);
animation: bt-pulse 1.8s ease-out infinite;
}
@keyframes bt-pulse {
0% { box-shadow: 0 0 0 0 rgba(184,230,179,0.45); }
100% { box-shadow: 0 0 0 8px rgba(184,230,179,0); }
}
.bt-pill {
position: absolute; top: 11px; right: 11px; z-index: 2;
font-family: 'JetBrains Mono', monospace;
font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--accent);
background: rgba(184,230,179,0.1);
border: 1px solid rgba(184,230,179,0.25);
border-radius: 99px;
padding: 2px 7px;
white-space: nowrap;
}
.bt-banner .bt-pill { position: static; order: 2; margin-right: 4px; flex: none; }
.bt-banner { gap: 10px; }
.bt-avatars { display: flex; z-index: 2; flex: none; }
.bt-avatars i {
width: 26px; height: 26px; border-radius: 50%;
border: 2px solid var(--bg-2);
background-size: cover; background-position: center;
margin-left: -9px;
transition: margin 0.25s ease, transform 0.25s ease;
}
.bt-avatars i:first-child { margin-left: 0; }
.bt-banner:hover .bt-avatars i { margin-left: 3px; transform: translateY(-2px); }
/* Tiles carrying a top strip reserve headroom for it. */
.bt:has(.bt-quarters), .bt:has(.bt-steps), .bt:has(.bt-week), .bt:has(.bt-ekg) { padding-top: 36px; }
/* ── semantic ornaments ── */
/* equalizer — activity (Arena, Press coverage) */
.bt-eq {
position: absolute; right: 14px; bottom: 13px; z-index: 2;
display: flex; align-items: flex-end; gap: 3px; height: 28px;
}
.bt-eq i {
width: 6px; border-radius: 3px 3px 0 0;
background: linear-gradient(to top, rgba(184,230,179,0.25), var(--accent));
transform-origin: bottom;
}
.bt-eq i:nth-child(1) { height: 35%; }
.bt-eq i:nth-child(2) { height: 60%; }
.bt-eq i:nth-child(3) { height: 45%; }
.bt-eq i:nth-child(4) { height: 80%; }
@keyframes bt-eq-bounce { 0%, 100% { transform: scaleY(0.44); } 50% { transform: scaleY(1.25); } }
.bt:hover .bt-eq i { animation: bt-eq-bounce 1s ease-in-out infinite; }
.bt:hover .bt-eq i:nth-child(2) { animation-delay: 0.15s; }
.bt:hover .bt-eq i:nth-child(3) { animation-delay: 0.30s; }
.bt:hover .bt-eq i:nth-child(4) { animation-delay: 0.45s; }
/* EKG — medics. A faint resting trace with a bright pulse segment that
sweeps along it on hover. pathLength=100 normalizes the dash math. */
.bt-ekg { position: absolute; top: 12px; right: 12px; width: 56px; height: 20px; z-index: 2; }
.bt-ekg .ekg-base {
fill: none; stroke: var(--accent); stroke-width: 1.25;
stroke-linejoin: round;
opacity: 0.22;
}
.bt-ekg .ekg-pulse {
fill: none; stroke: var(--accent); stroke-width: 1.5;
stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 22 78;
stroke-dashoffset: 100;
opacity: 0;
}
.bt:hover .bt-ekg .ekg-pulse {
opacity: 1;
animation: bt-ekg-sweep 2.8s linear infinite;
}
@keyframes bt-ekg-sweep { to { stroke-dashoffset: -100; } }
/* reticle — military. Ring + crosshair, ring spins on hover. */
.bt-reticle {
position: absolute; top: 12px; right: 14px; z-index: 2;
width: 26px; height: 26px;
}
.bt-reticle::before {
content: ''; position: absolute; inset: 0;
border: 1px solid rgba(184,230,179,0.55);
border-radius: 50%;
border-top-color: transparent;
}
.bt-reticle::after {
content: ''; position: absolute; inset: 0;
background:
linear-gradient(var(--accent), var(--accent)) center/1px 8px no-repeat,
linear-gradient(var(--accent), var(--accent)) center/8px 1px no-repeat;
opacity: 0.7;
}
@keyframes bt-spin { to { transform: rotate(360deg); } }
.bt:hover .bt-reticle::before { animation: bt-spin 2.4s linear infinite; }
/* sonar — rescue. Expanding ring from a hollow center. */
.bt-sonar {
position: absolute; bottom: 16px; right: 16px; z-index: 2;
width: 10px; height: 10px; border-radius: 50%;
border: 1.5px solid var(--accent);
}
.bt-sonar::before {
content: ''; position: absolute; inset: -2px;
border-radius: 50%;
border: 1px solid rgba(184,230,179,0.6);
animation: bt-sonar-ring 2s ease-out infinite;
}
@keyframes bt-sonar-ring {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(3.2); opacity: 0; }
}
/* § seal — doctrine. Stamps down on hover. */
.bt-seal {
position: absolute; top: 9px; right: 12px; z-index: 2;
font-family: 'JetBrains Mono', monospace;
font-size: 17px; color: rgba(184,230,179,0.5);
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s;
}
.bt:hover .bt-seal { transform: scale(1.25) rotate(-8deg); color: var(--accent); }
/* quarter bars — roadmap. Four segments fill on hover. */
.bt-quarters { position: absolute; top: 14px; right: 14px; width: 64px; display: flex; gap: 4px; z-index: 2; }
.bt-quarters i { height: 4px; flex: 1; border-radius: 2px; background: var(--bg-3); overflow: hidden; position: relative; }
.bt-quarters i::before { content: ''; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease; }
.bt-quarters i:nth-child(1)::before { transform: scaleX(1); opacity: 0.9; }
.bt-quarters i:nth-child(2)::before { transform: scaleX(0.5); opacity: 0.6; }
.bt:hover .bt-quarters i::before { transform: scaleX(1); }
.bt:hover .bt-quarters i:nth-child(2)::before { transition-delay: 0.12s; }
.bt:hover .bt-quarters i:nth-child(3)::before { transition-delay: 0.24s; }
.bt:hover .bt-quarters i:nth-child(4)::before { transition-delay: 0.36s; }
/* ledger check — safety. Tick draws on hover. */
.bt-check { position: absolute; top: 11px; right: 13px; z-index: 2; width: 16px; height: 16px; }
.bt-check polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset 0.4s ease 0.1s; opacity: 0.8; }
.bt:hover .bt-check polyline { stroke-dashoffset: 0; }
/* week dots — culture. Mon–Thu solid, Fri pulses (think day). */
.bt-week { position: absolute; top: 14px; right: 14px; display: flex; gap: 5px; z-index: 2; }
.bt-week i { width: 7px; height: 7px; border-radius: 2px; background: rgba(184,230,179,0.55); }
.bt-week i:last-child { background: transparent; border: 1px solid var(--accent); animation: bt-pulse 1.8s ease-out infinite; border-radius: 2px; }
/* stepper — hiring. Seven ticks light in sequence on hover. */
.bt-steps { position: absolute; top: 14px; right: 13px; width: 84px; display: flex; gap: 3px; z-index: 2; }
.bt-steps i { height: 5px; flex: 1; background: var(--bg-3); border-radius: 1px; transition: background 0.15s ease; }
.bt:hover .bt-steps i { background: var(--accent); }
.bt:hover .bt-steps i:nth-child(2) { transition-delay: 0.07s; }
.bt:hover .bt-steps i:nth-child(3) { transition-delay: 0.14s; }
.bt:hover .bt-steps i:nth-child(4) { transition-delay: 0.21s; }
.bt:hover .bt-steps i:nth-child(5) { transition-delay: 0.28s; }
.bt:hover .bt-steps i:nth-child(6) { transition-delay: 0.35s; }
.bt:hover .bt-steps i:nth-child(7) { transition-delay: 0.42s; }
/* caret — apply. Blinking input cursor. */
.bt-caret { position: absolute; top: 12px; right: 14px; z-index: 2; width: 7px; height: 14px; background: var(--accent); animation: bt-blink 1.1s steps(1) infinite; }
@keyframes bt-blink { 50% { opacity: 0.15; } }
/* newswire — press. Three lines stream in on hover. */
.bt-wire { position: absolute; top: 13px; right: 14px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; z-index: 2; }
.bt-wire i { height: 3px; border-radius: 2px; background: rgba(184,230,179,0.5); width: 26px; transform-origin: right; transition: transform 0.3s ease; }
.bt-wire i:nth-child(2) { width: 18px; opacity: 0.7; }
.bt-wire i:nth-child(3) { width: 22px; opacity: 0.5; }
.bt:hover .bt-wire i { transform: scaleX(1.45); }
.bt:hover .bt-wire i:nth-child(2) { transition-delay: 0.08s; }
.bt:hover .bt-wire i:nth-child(3) { transition-delay: 0.16s; }
/* swatches — brand. The palette, literally. */
.bt-swatches { position: absolute; top: 13px; right: 13px; display: flex; gap: 4px; z-index: 2; }
.bt-swatches i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line-2); transition: transform 0.25s ease; }
.bt-swatches i:nth-child(1) { background: #b8e6b3; }
.bt-swatches i:nth-child(2) { background: #e8e6e1; }
.bt-swatches i:nth-child(3) { background: #0a0b0d; }
.bt:hover .bt-swatches i { transform: translateY(-2px); }
.bt:hover .bt-swatches i:nth-child(2) { transition-delay: 0.07s; }
.bt:hover .bt-swatches i:nth-child(3) { transition-delay: 0.14s; }
/* hero art — ghosted scratchboard cutouts per hero tile, same treatment
as the team portrait: bottom-right, contained, grayscale, sharpening
slightly on hover. Files live in assets/bento/.png. */
.bt-art {
position: absolute; right: -10px; bottom: -6px; z-index: 1;
width: 62%; height: 108%;
background-size: contain;
background-position: right bottom;
background-repeat: no-repeat;
opacity: 0.26;
filter: grayscale(1);
transition: opacity 0.3s ease;
pointer-events: none;
}
.bt:hover .bt-art { opacity: 0.46; }
.bt-art.art-manifesto { background-image: url('bento/manifesto.png'); }
.bt-art.art-colosseum { background-image: url('bento/colosseum.png'); }
.bt-art.art-firefighting { background-image: url('bento/firefighting.png'); }
.bt-art.art-culture { background-image: url('bento/culture.png'); }
/* portrait wash — team hero. The founder cutout, ghosted. */
.bt-portrait {
position: absolute; right: -12px; bottom: -6px; z-index: 1;
width: 65%; height: 110%;
background: url('team/romir-cutout.png') right bottom / contain no-repeat;
opacity: 0.28;
filter: grayscale(1);
transition: opacity 0.3s ease;
pointer-events: none;
}
.bt:hover .bt-portrait { opacity: 0.48; }
/* ════ Per-menu grids — five genuinely different layouts ════ */
/* ABOUT — 440px · 3-col editorial: tall hero left, two stacked, banner. */
.mega-menu.mega-about { width: 440px; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 66px; }
.mega-about .bt:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.mega-about .bt:nth-child(2) { grid-column: 3; grid-row: 1; }
.mega-about .bt:nth-child(3) { grid-column: 3; grid-row: 2; }
.mega-about .bt:nth-child(4) { grid-column: 1 / 4; grid-row: 3; }
/* RESEARCH — 540px · 4-col flagship: big hero, wide arena, two smalls, banner. */
.mega-menu.mega-research { width: 540px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 64px; }
.mega-research .bt:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.mega-research .bt:nth-child(2) { grid-column: 3 / 5; grid-row: 1; }
.mega-research .bt:nth-child(3) { grid-column: 3; grid-row: 2; }
.mega-research .bt:nth-child(4) { grid-column: 4; grid-row: 2; }
.mega-research .bt:nth-child(5) { grid-column: 1 / 5; grid-row: 3; }
/* OPERATORS — 560px · 6-col field board: wide hero, tall right pair, banner. */
.mega-menu.mega-operators { width: 560px; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 60px; }
.mega-operators .bt:nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 3; }
.mega-operators .bt:nth-child(2) { grid-column: 4 / 7; grid-row: 1; }
.mega-operators .bt:nth-child(3) { grid-column: 4 / 6; grid-row: 2; }
.mega-operators .bt:nth-child(4) { grid-column: 6; grid-row: 2; }
.mega-operators .bt:nth-child(5) { grid-column: 1 / 7; grid-row: 3; }
/* TEAM — 400px · 2-col card: tall portrait hero left, three stacked right. No banner. */
.mega-menu.mega-team { width: 400px; grid-template-columns: 1.25fr 1fr; grid-auto-rows: 58px; }
.mega-team .bt:nth-child(1) { grid-column: 1; grid-row: 1 / 4; }
.mega-team .bt:nth-child(2) { grid-column: 2; grid-row: 1; }
.mega-team .bt:nth-child(3) { grid-column: 2; grid-row: 2; }
.mega-team .bt:nth-child(4) { grid-column: 2; grid-row: 3; }
/* CAREERS — 480px · inverted: full-width CTA banner on top, then the grid. */
.mega-menu.mega-careers { width: 480px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 62px; }
.mega-careers .bt:nth-child(1) { grid-column: 1 / 5; grid-row: 1; }
.mega-careers .bt:nth-child(2) { grid-column: 1 / 3; grid-row: 2 / 4; }
.mega-careers .bt:nth-child(3) { grid-column: 3 / 5; grid-row: 2; }
.mega-careers .bt:nth-child(4) { grid-column: 3 / 5; grid-row: 3; }
@media (prefers-reduced-motion: reduce) {
.bt, .nav-item .mega-menu { transition: opacity 0.1s ease !important; transform: none !important; }
.bt-clouds, .bt-dot, .bt:hover, .bt-sonar::before, .bt-caret,
.bt:hover .bt-eq i, .bt:hover .bt-ekg polyline, .bt:hover .bt-reticle::before, .bt-week i:last-child { animation: none !important; }
}
/* Page veil — dims content under the nav while any menu is open. */
.nav-veil {
position: fixed;
inset: 0;
background: rgba(10, 11, 13, 0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
opacity: 0;
pointer-events: none;
transition: opacity 0.28s ease;
z-index: 99;
}
body:has(.nav-item:hover .mega-menu) .nav-veil,
body:has(.nav-item:focus-within .mega-menu) .nav-veil { opacity: 1; }
/* Mobile menu trigger */
.menu-toggle {
display: none;
background: none;
border: 1px solid var(--line-2);
color: var(--fg);
width: 40px; height: 40px;
cursor: pointer;
position: relative;
}
.menu-toggle span {
display: block;
position: absolute; left: 10px; right: 10px;
height: 1.5px;
background: currentColor;
transition: transform 0.25s ease, opacity 0.2s ease;
}
.menu-toggle span:nth-child(1) { top: 13px; }
.menu-toggle span:nth-child(2) { top: 19.5px; }
.menu-toggle span:nth-child(3) { top: 26px; }
body.menu-open .menu-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* Mobile slide-out panel */
.mobile-nav {
display: none;
position: fixed;
top: 0; right: 0; bottom: 0;
width: min(420px, 100vw);
background: var(--bg);
border-left: 1px solid var(--line);
z-index: 99;
transform: translateX(100%);
transition: transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1);
padding: 96px 28px 32px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
body.menu-open .mobile-nav { transform: translateX(0); }
.mobile-nav-section { margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.mobile-nav-section:last-of-type { border-bottom: none; padding-bottom: 4px; margin-bottom: 8px; }
.mobile-nav-label {
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.22em;
color: var(--fg-dimmer); margin-bottom: 6px;
text-transform: uppercase;
}
.mobile-nav a {
display: flex;
align-items: center;
justify-content: space-between;
font-family: 'Inter Tight', sans-serif;
font-size: 22px; font-weight: 500;
letter-spacing: -0.01em;
padding: 12px 0;
color: var(--fg);
border-bottom: 1px solid transparent;
transition: color 0.18s ease, border-color 0.18s ease;
min-height: 48px;
}
.mobile-nav a:active,
.mobile-nav a:hover,
.mobile-nav a:focus-visible {
color: var(--accent);
outline: none;
}
.mobile-nav a:focus-visible { border-bottom-color: var(--accent); }
.mobile-nav-arrow {
font-family: 'JetBrains Mono', monospace;
font-size: 16px;
color: var(--fg-dimmer);
transition: transform 0.18s ease, color 0.18s ease;
margin-left: 12px;
}
.mobile-nav a:active .mobile-nav-arrow,
.mobile-nav a:hover .mobile-nav-arrow,
.mobile-nav a:focus-visible .mobile-nav-arrow {
color: var(--accent);
transform: translateX(4px);
}
.mobile-nav-blurb { font-size: 13px; color: var(--fg-dim); line-height: 1.5; margin: -4px 0 8px; }
/* Footer block at the bottom of the mobile drawer */
.mobile-nav-foot {
margin-top: 28px; padding-top: 24px;
border-top: 1px solid var(--line);
display: grid; gap: 10px;
}
.mobile-nav-mark {
display: flex; align-items: center; gap: 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; letter-spacing: 0.24em;
color: var(--fg);
}
.mobile-nav-mail {
font-family: 'JetBrains Mono', monospace;
font-size: 12px; letter-spacing: 0.14em;
color: var(--fg-dim);
padding: 6px 0;
}
.mobile-nav-mail:hover, .mobile-nav-mail:active { color: var(--accent); }
/* Drawer entrance — sections fade + rise in a gentle stagger when the
panel opens. Closed state resets (hidden behind the sliding panel) so
each open replays the motion. Restrained: no bounce, short travel. */
.mobile-nav-section,
.mobile-nav-foot {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
body.menu-open .mobile-nav-section,
body.menu-open .mobile-nav-foot {
opacity: 1;
transform: none;
transition: opacity 0.42s ease, transform 0.46s cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.menu-open .mobile-nav-section:nth-of-type(1) { transition-delay: 0.07s; }
body.menu-open .mobile-nav-section:nth-of-type(2) { transition-delay: 0.12s; }
body.menu-open .mobile-nav-section:nth-of-type(3) { transition-delay: 0.17s; }
body.menu-open .mobile-nav-section:nth-of-type(4) { transition-delay: 0.22s; }
body.menu-open .mobile-nav-section:nth-of-type(5) { transition-delay: 0.27s; }
body.menu-open .mobile-nav-foot { transition-delay: 0.32s; }
/* Current page — accent text + a small square bullet on the active link */
.mobile-nav a.is-current { color: var(--accent); }
.mobile-nav a.is-current .mobile-nav-arrow { color: var(--accent); }
.mobile-nav a.is-current > span:first-child { position: relative; padding-left: 16px; }
.mobile-nav a.is-current > span:first-child::before {
content: ""; position: absolute; left: 0; top: 50%;
width: 6px; height: 6px; margin-top: -3px;
background: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
.mobile-nav-section, .mobile-nav-foot { opacity: 1; transform: none; transition: none; }
}
/* Scrim behind mobile nav — blurred for a more premium feel */
.menu-scrim {
display: none;
position: fixed; inset: 0;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 98;
opacity: 0;
transition: opacity 0.28s ease;
}
body.menu-open .menu-scrim { display: block; opacity: 1; }
body.menu-open { overflow: hidden; }
[data-theme="light"] .menu-scrim { background: rgba(196,198,202,0.6); }
/* Theme toggle, vision toggle, terminal trigger — hidden by default for
editorial restraint. Theme + cursor remain reachable via the terminal
(` opens it). Konami still unlocks the rainbow flag. */
.theme-toggle,
.theme-picker,
.vision-toggle,
.terminal-trigger { display: none !important; }
.nav-right { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.theme-toggle {
background: none;
border: 1px solid transparent;
color: #b8babf;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; font-weight: 500; letter-spacing: 0.14em;
padding: 6px 10px;
cursor: pointer;
transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.theme-toggle:hover, .theme-toggle:focus-visible {
color: var(--fg);
border-color: var(--accent);
background: rgba(184,230,179,0.08);
}
[data-theme="light"] .theme-toggle { color: #2a2c30; }
[data-theme="light"] .theme-toggle:hover, [data-theme="light"] .theme-toggle:focus-visible { color: #000; background: rgba(45,122,38,0.10); }
/* ================ Page shells (sub-pages) ================ */
.page-hero {
padding: 200px 40px 140px;
border-bottom: 1px solid var(--line);
max-width: 1280px; margin: 0 auto;
}
.page-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.22em;
color: var(--fg-dimmer); margin-bottom: 48px;
text-transform: uppercase;
}
/* Page titles — matches the 'No model yet.' style: lighter weight 500,
smaller clamp, italic em with accent. The model-card hero feels
restrained in a way the heavier weight didn't. */
.page-title {
font-family: 'Inter Tight', sans-serif;
font-size: clamp(48px, 6vw, 88px);
font-weight: 500;
line-height: 0.95;
letter-spacing: -0.035em;
margin-bottom: 32px;
}
.page-title em { font-style: italic; font-weight: 400; color: var(--accent); }
.page-lead { font-size: 20px; line-height: 1.5; color: var(--fg-dim); max-width: 640px; font-weight: 400; }
/* ================ Buttons ================ */
.btn-primary {
position: relative; display: inline-flex; align-items: center;
padding: 0;
border: 1px solid var(--accent);
color: var(--accent);
background: transparent;
font-family: 'JetBrains Mono', monospace;
font-size: 12px; letter-spacing: 0.14em;
text-transform: uppercase; font-weight: 500;
overflow: hidden; isolation: isolate;
transition: color 0.35s;
cursor: pointer;
}
.btn-fill {
position: absolute; inset: 0;
background: var(--accent);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.45s cubic-bezier(0.6,0.05,0.2,1);
z-index: 0;
}
.btn-label {
position: relative; z-index: 1;
display: inline-flex; align-items: center; gap: 14px;
padding: 16px 24px;
}
.btn-primary:hover .btn-fill, .btn-primary:focus-visible .btn-fill { transform: scaleX(1); }
.btn-primary:hover, .btn-primary:focus-visible { color: var(--bg); outline: none; }
.btn-ghost {
color: var(--fg-dim);
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.14em;
padding: 16px 8px;
}
.btn-ghost:hover { color: var(--fg); }
/* ================ Footer ================ */
.footer {
position: relative; z-index: 5;
background: var(--bg);
border-top: 1px solid var(--line);
padding: 80px 40px 32px;
}
.footer-top {
max-width: 1280px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 2fr;
gap: 80px; padding-bottom: 64px;
}
.footer-mark {
display: flex; align-items: center; gap: 10px;
font-family: 'JetBrains Mono', monospace;
font-size: 13px; letter-spacing: 0.12em; font-weight: 600;
}
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: start; }
.footer-col { display: grid; gap: 12px; align-content: start; }
.footer-col-h {
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.16em;
color: var(--fg-dimmer); margin-bottom: 4px;
}
.footer-col a { font-size: 14px; color: var(--fg-dim); transition: color 0.2s; }
.footer-col a:hover { color: var(--fg); }
.footer-bottom {
max-width: 1280px; margin: 0 auto;
padding-top: 32px;
border-top: 1px solid var(--line);
display: flex; justify-content: space-between;
flex-wrap: wrap; gap: 16px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.08em;
color: var(--fg-dimmer);
}
/* ================ Focus styles (a11y) ================ */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:focus-visible, a:focus-visible { outline-offset: 4px; }
.btn-primary:focus-visible, a.nav-link:focus-visible, .theme-toggle:focus-visible {
outline: none; /* these already have border-based focus indication */
}
/* ================ Hidden terminal (press ` to open) ================ */
.terminal {
position: fixed; left: 0; right: 0; bottom: 0;
z-index: 1100;
background: var(--bg);
border-top: 1px solid var(--line);
height: 0; overflow: hidden;
transition: height 0.32s cubic-bezier(0.22, 1, 0.36, 1);
font-family: 'JetBrains Mono', monospace;
box-shadow: 0 -16px 64px rgba(0,0,0,0.5);
}
.terminal.is-open { height: min(420px, 60vh); }
.terminal-inner { padding: 20px 28px; height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 8px; }
.terminal-log { overflow-y: auto; font-size: 13px; color: var(--fg-dim); line-height: 1.55; padding-bottom: 6px; }
.terminal-log .out { color: var(--fg); }
.terminal-log .err { color: #ff6b6b; }
.terminal-log .accent { color: var(--accent); }
.terminal-log pre { font-family: 'JetBrains Mono', monospace; line-height: 1.15; color: var(--accent); font-size: 11px; margin: 4px 0; }
.terminal-row { display: flex; gap: 12px; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); }
.terminal-prompt { color: var(--accent); font-size: 13px; letter-spacing: 0.08em; }
.terminal-input { flex: 1; background: transparent; border: none; outline: none; color: var(--fg); font-family: 'JetBrains Mono', monospace; font-size: 13px; padding: 0; }
.terminal-hint { font-size: 10px; color: var(--fg-dimmer); letter-spacing: 0.16em; }
@media (max-width: 700px) { .terminal-inner { padding: 16px 18px; } .terminal-hint { display: none; } }
.terminal-trigger {
position: fixed; bottom: 18px; right: 18px;
z-index: 1099;
width: 40px; height: 40px;
background: var(--bg);
border: 1px solid var(--line-2);
color: var(--accent);
font-family: 'JetBrains Mono', monospace;
font-size: 16px;
cursor: pointer;
transition: border-color 0.18s, background 0.18s, transform 0.18s;
display: grid; place-items: center;
}
.terminal-trigger:hover, .terminal-trigger:focus-visible {
border-color: var(--accent);
background: var(--bg-2);
transform: translateY(-1px);
outline: none;
}
@media (max-width: 700px) { .terminal-trigger { bottom: 12px; right: 12px; width: 36px; height: 36px; } }
/* ================ Konami-mode (rainbow accent) ================ */
[data-konami="on"] .mark-square,
[data-konami="on"] .page-title em,
[data-konami="on"] .hero-title em,
[data-konami="on"] .ops-stat .value,
[data-konami="on"] .role-team,
[data-konami="on"] .accent,
[data-konami="on"] .nf-title em,
[data-konami="on"] .m-title em {
animation: konami-shift 5s linear infinite;
}
@keyframes konami-shift {
0% { filter: hue-rotate(0deg) saturate(1.25); }
100% { filter: hue-rotate(360deg) saturate(1.25); }
}
[data-konami="on"] .ops-pulse { animation-duration: 0.6s; }
/* ================ Robot Vision Mode ================ */
/* Toggle adds [data-vision="on"] on . The whole site renders as if
seen through the robot's perception stack — greyscale, scanlines, HUD,
feature boxes around content blocks. Pure CSS + a fixed-position SVG-ish
overlay; no rendering changes anywhere else. */
[data-vision="on"] body { filter: grayscale(0.92) contrast(1.06) brightness(0.94); }
[data-vision="on"] body::after {
content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 999;
background:
repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(184,230,179,0.045) 3px, rgba(184,230,179,0.045) 4px),
radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,0.5) 100%);
mix-blend-mode: normal;
}
[data-vision="on"] .replay-card.
[data-vision="on"] .team-card,
[data-vision="on"] .role-row,
[data-vision="on"] .paper-row,
[data-vision="on"] .principle-card,
[data-vision="on"] .coverage-row,
[data-vision="on"] .repo-card,
[data-vision="on"] .task-card,
[data-vision="on"] .m-stage,
[data-vision="on"] .hero-scene,
[data-vision="on"] .nf-scene {
outline: 1px dashed rgba(184,230,179,0.55);
outline-offset: -1px;
position: relative;
}
[data-vision="on"] .replay-card.:after,
[data-vision="on"] .team-card::after,
[data-vision="on"] .role-row::after,
[data-vision="on"] .paper-row::after,
[data-vision="on"] .principle-card::after,
[data-vision="on"] .coverage-row::after,
[data-vision="on"] .repo-card::after,
[data-vision="on"] .task-card::after {
content: 'OBJ ' attr(data-vision-id);
position: absolute; top: 0; right: 0;
background: var(--bg); color: var(--accent);
font-family: 'JetBrains Mono', monospace;
font-size: 9px; letter-spacing: 0.18em;
padding: 2px 6px;
border-left: 1px solid rgba(184,230,179,0.35);
border-bottom: 1px solid rgba(184,230,179,0.35);
z-index: 5;
pointer-events: none;
}
/* HUD overlay (created by site.js, only visible when vision is on) */
.vision-hud {
display: none;
position: fixed; inset: 0;
pointer-events: none;
z-index: 1000;
font-family: 'JetBrains Mono', monospace;
color: var(--accent);
font-size: 10px;
letter-spacing: 0.18em;
}
[data-vision="on"] .vision-hud { display: block; }
.vision-hud .corner { position: absolute; padding: 6px 0; line-height: 1.6; }
.vision-hud .tl { top: 80px; left: 18px; }
.vision-hud .tr { top: 80px; right: 18px; text-align: right; }
.vision-hud .bl { bottom: 18px; left: 18px; }
.vision-hud .br { bottom: 18px; right: 18px; text-align: right; }
.vision-hud .crosshair { position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%); opacity: 0.45; }
.vision-hud .crosshair::before, .vision-hud .crosshair::after { content: ''; position: absolute; background: var(--accent); }
.vision-hud .crosshair::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.vision-hud .crosshair::after { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.vision-hud .frame { position: absolute; top: 70px; left: 16px; right: 16px; bottom: 16px; border: 1px solid rgba(184,230,179,0.18); }
/* ================ Scroll-triggered reveal ================ */
.reveal {
opacity: 0;
transform: translateY(22px);
transition:
opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--reveal-delay, 0s);
will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
/* ================ Reduced motion ================ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.nav-item .mega-menu { transition: opacity 0.001ms !important; transform: translateX(-50%) translateY(0) !important; }
.mobile-nav { transition: none !important; }
.btn-fill { transition: none !important; }
.reveal { opacity: 1 !important; transform: none !important; }
}
/* ================ View Transitions API (modern browsers) ================ */
/* Deliberate 200/280ms crossfade — outgoing fades + blurs slightly so the
eye accepts the swap as one motion; incoming settles a few pixels up.
The fade-out / fade-in keyframes are defined further down. */
@view-transition { navigation: auto; }
/* ================ Responsive ================ */
@media (max-width: 1100px) {
.nav-item .mega-menu { display: none; }
}
@media (max-width: 900px) {
.nav-links-row { display: none; }
.menu-toggle { display: block; }
.mobile-nav { display: block; }
.topnav {
padding: 16px 20px;
grid-template-columns: 1fr auto;
gap: 12px;
}
/* Hide the desktop-only toggles on mobile — vision toggle isn't useful
without the hover-revealed canvas, and the theme toggle is collapsed
into a single round button below. */
.vision-toggle { display: none; }
.page-hero { padding: 110px 20px 56px; }
.page-hero .page-title { font-size: clamp(36px, 9vw, 72px); }
}
@media (max-width: 600px) {
.topnav { padding: 14px 16px; }
.topnav-mark { font-size: 11px; letter-spacing: 0.10em; }
.footer { padding: 60px 20px 24px; }
.footer-top { grid-template-columns: 1fr; gap: 40px; }
.footer-cols { grid-template-columns: 1fr 1fr; }
.mobile-nav { width: 100vw; padding: 88px 22px 28px; }
.mobile-nav a { font-size: 20px; }
/* Compact theme toggle on small screens — round, icon-style */
.theme-toggle {
width: 38px; height: 38px;
padding: 0;
border-radius: 50%;
font-size: 10px; letter-spacing: 0;
border-color: var(--line-2);
}
}
/* ═══════════════════════════════════════════════════════════════════
EXPERIMENTAL FEATURES (TEST BATCH — not yet pushed)
#3 agent feed #4 view transitions polish #5 capability carousel
#6 sitemap #7 ambient sound mute #8 custom cursor
#9 voice mfsto #16 char reveals #19 micro-interactions
#20 themes #24 photo mode (mission) #25 terminal commands
═══════════════════════════════════════════════════════════════════ */
/* ── #20 Theme variants beyond light/dark ──────────────────────── */
[data-theme="combat"] {
--bg: #1a1410; --bg-2: #221812; --bg-3: #2a1f18;
--line: #3a2820; --line-2: #4a3528;
--fg: #e8dac8; --fg-dim: #b8a48a; --fg-dimmer: #7a6852;
--accent: #ffb070;
--grid-line: rgba(255,176,112,0.04);
--topnav-bg: rgba(26,20,16,0.92);
--topnav-bg-mid: rgba(26,20,16,0.6);
}
[data-theme="avalanche"] {
--bg: #0e1418; --bg-2: #131c22; --bg-3: #18242c;
--line: #243038; --line-2: #2e3d48;
--fg: #e0eaf0; --fg-dim: #98b0c0; --fg-dimmer: #607888;
--accent: #88c8f0;
--grid-line: rgba(136,200,240,0.04);
--topnav-bg: rgba(14,20,24,0.92);
--topnav-bg-mid: rgba(14,20,24,0.6);
}
[data-theme="hazmat"] {
--bg: #14130a; --bg-2: #1a190d; --bg-3: #221f10;
--line: #2d2916; --line-2: #3d3820;
--fg: #f0ecc8; --fg-dim: #b8b088; --fg-dimmer: #807858;
--accent: #f5d040;
--grid-line: rgba(245,208,64,0.04);
--topnav-bg: rgba(20,19,10,0.92);
--topnav-bg-mid: rgba(20,19,10,0.6);
}
/* ── #8 Custom cursor (compact crosshair, no center dot) ──────── */
@media (hover: hover) and (pointer: fine) {
html.cursor-on, html.cursor-on * { cursor: none !important; }
html.cursor-on input, html.cursor-on textarea { cursor: text !important; }
.vx-cursor {
position: fixed; top: 0; left: 0;
width: 16px; height: 16px;
pointer-events: none;
transform: translate(-50%, -50%);
z-index: 2147483646; /* near max — sits above selection overlay, popovers, etc. */
mix-blend-mode: difference;
will-change: transform;
}
.vx-cursor::before,
.vx-cursor::after {
content: ''; position: absolute; background: var(--accent);
}
.vx-cursor::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-0.5px); }
.vx-cursor::after { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-0.5px); }
/* Chip rides outside the difference-blend cursor frame so its colours
stay readable over any text underneath. Own stacking context via z-index
placed even higher than the cursor body. */
.vx-chip-layer {
position: fixed; top: 0; left: 0;
pointer-events: none;
z-index: 2147483647;
will-change: transform, opacity;
opacity: 0;
transition: opacity 0.14s;
transform: translate(20px, 20px);
}
.vx-chip-layer.is-on { opacity: 1; }
.vx-chip-layer .chip {
font-family: 'JetBrains Mono', monospace;
font-size: 9px; letter-spacing: 0.18em;
padding: 3px 7px; white-space: nowrap;
background: var(--accent); color: var(--bg);
box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.vx-cursor.is-hot { width: 22px; height: 22px; }
}
/* ── #20 Theme picker dropdown ──────────────────────────────────── */
.theme-picker {
position: relative; display: inline-block;
}
.theme-picker .pick-list {
position: absolute; top: calc(100% + 8px); right: 0;
background: var(--bg); border: 1px solid var(--line);
padding: 6px;
display: none;
z-index: 200;
min-width: 140px;
box-shadow: 0 12px 36px rgba(0,0,0,0.45);
}
.theme-picker.is-open .pick-list { display: block; }
.theme-picker .pick-item {
display: flex; align-items: center; gap: 10px;
width: 100%; padding: 8px 10px;
background: transparent; border: 1px solid transparent;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.14em;
color: var(--fg-dim); cursor: pointer; text-align: left;
}
.theme-picker .pick-item:hover { background: var(--bg-2); color: var(--fg); border-color: var(--line-2); }
.theme-picker .pick-item.is-current { color: var(--accent); }
.theme-picker .pick-swatch {
width: 10px; height: 10px; flex-shrink: 0;
}
.theme-picker .pick-swatch.dark { background: #b8e6b3; }
.theme-picker .pick-swatch.light { background: #2d7a26; }
.theme-picker .pick-swatch.combat { background: #ffb070; }
.theme-picker .pick-swatch.avalanche { background: #88c8f0; }
.theme-picker .pick-swatch.hazmat { background: #f5d040; }
/* ── #16 Char-level reveal animation ───────────────────────────── */
.reveal-chars { display: inline-block; }
.reveal-chars .c {
display: inline-block;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.45s cubic-bezier(0.22,0.61,0.36,1), transform 0.45s cubic-bezier(0.22,0.61,0.36,1);
}
.reveal-chars .c.s { width: 0.32em; } /* preserves space breaks */
.reveal-chars.is-visible .c { opacity: 1; transform: translateY(0); }
.reveal-chars.is-visible .c {
transition-delay: calc(var(--ci, 0) * 0.018s);
}
/* ── #19 Hover micro-interactions ───────────────────────────────── */
.btn-primary {
position: relative; overflow: hidden;
}
.btn-primary .btn-fill {
position: absolute; inset: 0;
background: var(--accent);
transform: translateX(-101%);
transition: transform 0.36s cubic-bezier(0.6,0.05,0.2,1);
}
.btn-primary:hover .btn-fill { transform: translateX(0); }
.btn-primary .btn-label { position: relative; z-index: 1; transition: color 0.24s; }
.btn-primary:hover .btn-label { color: var(--bg); }
/* Generic hover micro-shift for cards and tiles */
.mega-col, .scenario-card, .role-row {
transition: transform 0.22s cubic-bezier(0.22,0.61,0.36,1), background 0.22s, border-color 0.22s;
}
.mega-col:hover, .scenario-card:hover { transform: translateY(-2px); }
/* Link underline grow */
a:not(.nav-link):not(.mega-col):not(.btn-primary):not(.btn-ghost):not(.mobile-nav a):not(.footer-mark a):not(.footer-bottom a):hover {
text-decoration: none;
}
/* ── #6 3D site map overlay ──────────────────────────────────────── */
.sitemap-overlay {
position: fixed; inset: 0;
z-index: 1500;
background: rgba(10,11,13,0.85);
backdrop-filter: blur(12px);
display: none;
opacity: 0;
transition: opacity 0.34s ease;
}
.sitemap-overlay.is-open { display: block; opacity: 1; }
.sitemap-mount { position: absolute; inset: 0; }
.sitemap-meta {
position: absolute; top: 24px; left: 32px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.18em;
color: var(--accent);
}
.sitemap-close {
position: absolute; top: 22px; right: 32px;
background: transparent; border: 1px solid var(--line-2);
color: var(--fg); cursor: pointer;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.16em;
padding: 6px 12px;
}
.sitemap-close:hover { color: var(--accent); border-color: var(--accent); }
.sitemap-tooltip {
position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.14em;
color: var(--fg-dim);
pointer-events: none;
}
.sitemap-tooltip kbd {
font-family: inherit; color: var(--accent); border: 1px solid var(--line-2);
padding: 1px 5px; margin: 0 2px;
}
/* ── #5 Capability replays carousel on landing ─────────────────── */
.cap-replays {
position: relative;
padding: 100px 40px;
border-top: 1px solid var(--line);
background: var(--bg);
}
.cap-replays-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 11px; letter-spacing: 0.22em;
color: var(--accent);
margin-bottom: 16px;
}
.cap-replays-title {
font-size: clamp(28px, 4vw, 48px);
font-weight: 500; letter-spacing: -0.025em;
margin-bottom: 8px; max-width: 760px;
}
.cap-replays-title em { font-style: italic; color: var(--accent); font-weight: 400; }
.cap-replays-lead {
color: var(--fg-dim); font-size: 15px; line-height: 1.55;
max-width: 540px; margin-bottom: 48px;
}
.replay-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}
.replay-card {
position: relative;
aspect-ratio: 4 / 5;
border: 1px solid var(--line);
overflow: hidden;
cursor: pointer;
background: var(--bg-2);
transition: border-color 0.24s, transform 0.24s;
}
.replay-card.hover { border-color: var(--accent); transform: translateY(-4px); }
.replay-card canvas { display: block; width: 100% !important; height: 100% !important; }
.replay-card .cap-fx { position: absolute; inset: 0; pointer-events: none; }
.replay-card .cap-label {
position: absolute; bottom: 14px; left: 16px; right: 16px;
z-index: 2;
}
.replay-card .cap-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 9px; letter-spacing: 0.22em;
color: var(--accent);
margin-bottom: 6px;
}
.replay-card .cap-name {
font-size: 18px; font-weight: 500;
letter-spacing: -0.015em;
color: var(--fg);
}
.replay-card .cap-state {
position: absolute; top: 12px; left: 14px; z-index: 2;
font-family: 'JetBrains Mono', monospace;
font-size: 9px; letter-spacing: 0.20em;
color: var(--fg-dimmer);
}
.replay-card.fire .cap-fx { background: radial-gradient(ellipse at 50% 85%, rgba(255,80,30,0.55), rgba(255,150,40,0.20) 30%, transparent 65%); animation: cap-fire 1.2s ease-in-out infinite alternate; }
.replay-card.medic .cap-fx { background: linear-gradient(180deg, rgba(255,217,176,0.18), transparent 55%), radial-gradient(circle at 30% 70%, rgba(120,40,40,0.35), transparent 50%); }
.replay-card.medic::after { content: ''; position: absolute; left: 0; right: 0; top: 40%; height: 1px; background: linear-gradient(to right, transparent, #ff5050, transparent); animation: cap-tracer 1.4s linear infinite; z-index: 1; }
.replay-card.hazmat .cap-fx { background: radial-gradient(ellipse at 70% 35%, rgba(200,217,106,0.40), transparent 55%), linear-gradient(180deg, rgba(180,200,80,0.10), transparent 70%); }
.replay-card.rubble .cap-fx { background: radial-gradient(ellipse at 50% 50%, rgba(208,200,176,0.25), transparent 60%); animation: cap-shake 0.32s ease-in-out infinite alternate; }
.replay-card.avalanche .cap-fx { background: linear-gradient(180deg, rgba(180,212,240,0.30), rgba(214,226,238,0.40)); }
.replay-card.avalanche::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, white 0.5px, transparent 1px), radial-gradient(circle at 80% 60%, white 0.5px, transparent 1px), radial-gradient(circle at 50% 90%, white 0.5px, transparent 1px); background-size: 100px 100px, 80px 80px, 120px 120px; opacity: 0.6; animation: cap-snow 6s linear infinite; }
@keyframes cap-fire { 0% { opacity: 0.85; } 100% { opacity: 1; } }
@keyframes cap-tracer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes cap-shake { 0% { transform: translate(0, 0); } 100% { transform: translate(-2px, 1px); } }
@keyframes cap-snow { 0% { background-position: 0 0, 0 0, 0 0; } 100% { background-position: 0 100px, 0 80px, 0 120px; } }
@media (max-width: 600px) { .cap-replays { padding: 60px 20px; } .replay-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }
/* ── View Transitions polish — deliberate, with a hint of blur out ─ */
::view-transition-old(root) {
animation: vt-out 200ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
mix-blend-mode: normal;
}
::view-transition-new(root) {
animation: vt-in 280ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
mix-blend-mode: normal;
}
@keyframes vt-out { to { opacity: 0; filter: blur(3px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) { animation: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════
ELEGANCE BATCH — #4 drop caps · #5 read progress · #6 section rail
#7 smart micro-typography (handled in JS; no CSS needed here)
═══════════════════════════════════════════════════════════════════ */
/* ── #4 Drop cap on long-form opening paragraphs ─────────────────── */
.drop-cap::first-letter {
font-family: 'Monoton', 'Georgia', 'Times New Roman', serif;
font-style: normal;
font-weight: 400;
font-size: 4.6em;
line-height: 0.92;
float: left;
margin: 0.06em 0.14em -0.02em 0;
color: var(--accent);
letter-spacing: 0;
}
[data-theme="light"] .drop-cap::first-letter { color: var(--accent); }
@media (max-width: 600px) {
.drop-cap::first-letter { font-size: 3.8em; margin-right: 0.10em; }
}
/* ── Reading-progress hairline at top of viewport ─────────────────
1px gray (--fg-dimmer), low opacity. Subtle positional anchor,
not an accent stripe. Fades further when scroll stops. */
.read-progress {
position: fixed;
top: 0; left: 0; right: 0;
height: 1px;
background: var(--fg-dimmer);
transform-origin: left center;
transform: scaleX(0);
z-index: 200;
pointer-events: none;
opacity: 0.30;
transition: transform 0.08s linear, opacity 0.2s ease;
will-change: transform;
}
.read-progress.is-idle { opacity: 0.10; }
@media (prefers-reduced-motion: reduce) { .read-progress { transition: none; } }
/* ── #10 Held-still section transition ───────────────────────────────
Drops into long-form pages between thematic clusters. A wide hairline,
a numeric / date stamp on the left, a single monospace label on the
right. Vertical breathing room is intentional — these are pause beats
in the reading rhythm, not decoration. */
.section-break {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 28px;
margin: 96px 0 88px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.22em;
color: var(--fg-dimmer);
text-transform: uppercase;
}
.section-break::before,
.section-break::after {
content: '';
height: 1px;
background: var(--line);
}
.section-break .sr-mark {
display: inline-flex;
align-items: center;
gap: 14px;
white-space: nowrap;
}
.section-break .sr-num { color: var(--fg-dim); }
.section-break .sr-dot {
width: 4px; height: 4px;
background: var(--fg-dimmer);
display: inline-block;
}
@media (max-width: 600px) {
.section-break {
margin: 64px 0 56px;
grid-template-columns: 1fr;
text-align: center;
gap: 14px;
}
.section-break::before,
.section-break::after { width: 60%; margin: 0 auto; }
}
/* ── #6 Section-marker (sticky margin label) ─────────────────────── */
.section-marker {
position: fixed;
left: 32px;
top: 50%;
transform: translateY(-50%);
z-index: 70;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.20em;
color: var(--fg-dim);
pointer-events: none;
max-width: 200px;
opacity: 0;
transition: opacity 0.32s ease;
}
.section-marker.is-on { opacity: 1; }
.section-marker .sm-num {
color: var(--accent);
margin-bottom: 8px;
}
.section-marker .sm-title {
color: var(--fg);
font-family: 'Inter Tight', sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: -0.005em;
line-height: 1.3;
text-transform: none;
}
.section-marker .sm-bar {
width: 28px;
height: 1px;
background: var(--accent);
margin-bottom: 14px;
opacity: 0.5;
}
/* Hide on narrow viewports where there's no margin to put it in */
@media (max-width: 1300px) { .section-marker { display: none; } }
/* ════════════════════════════════════════════════════════════════════
Canonical footer — five columns, every page represented. The
.footer-cols-5 class out-specifies the older per-page 3-col rules.
════════════════════════════════════════════════════════════════════ */
.footer-cols.footer-cols-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 36px; align-items: start; }
@media (max-width: 1100px) { .footer-cols.footer-cols-5 { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
@media (max-width: 700px) { .footer-cols.footer-cols-5 { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
/* Footer sub-group — Colosseum's pages nest under one expandable entry. */
.footer-sub { margin: 0; }
.footer-sub summary {
list-style: none; cursor: pointer;
font-size: 14px; color: var(--fg-dim);
display: inline-flex; align-items: center; gap: 7px;
transition: color 0.2s;
}
.footer-sub summary::-webkit-details-marker { display: none; }
.footer-sub summary::after {
content: '';
width: 6px; height: 6px;
border-right: 1px solid var(--fg-dimmer);
border-bottom: 1px solid var(--fg-dimmer);
transform: rotate(45deg) translateY(-1px);
transition: transform 0.2s ease;
}
.footer-sub[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.footer-sub summary:hover { color: var(--fg); }
.footer-sub .footer-sub-links {
display: grid; gap: 10px;
padding: 10px 0 4px 14px;
border-left: 1px solid var(--line);
margin: 8px 0 2px 2px;
}
.footer-sub .footer-sub-links a { font-size: 13px; }
/* ════════════════════════════════════════════════════════════════════
Footer link underline — draws in left→right on hover, exits stage
right on leave. Background-size trick: the anchor point swaps sides
(right at rest, left on hover) so grow and shrink run in the same
visual direction.
════════════════════════════════════════════════════════════════════ */
/* .footer prefix out-specifies the per-page inline `.footer-col a`
rules that would otherwise clobber the transition list. */
.footer .footer-col a,
.footer .footer-sub-links a,
.footer .footer-bottom a {
width: fit-content;
background-image: linear-gradient(var(--accent), var(--accent));
background-repeat: no-repeat;
background-position: right bottom;
background-size: 0% 1px;
padding-bottom: 2px;
transition: background-size 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.2s;
}
.footer .footer-col a:hover,
.footer .footer-sub-links a:hover,
.footer .footer-bottom a:hover {
background-position: left bottom;
background-size: 100% 1px;
}