/* ============================================================================
OPEN BRAIN — COMPONENT LAYER
Loads after styles.css. Two jobs:
1. Retunes SHARED CHROME (base type, nav, buttons, footer) onto the tokens,
so all 19 pages improve together rather than diverging during migration.
2. Defines the NEW content primitives (band, card, field) that redesigned
pages are built from. Legacy page classes stay in styles.css untouched.
========================================================================= */
/* ── BASE ───────────────────────────────────────────────────────────────── */
body {
font-size: var(--text-base);
font-weight: var(--weight-regular);
line-height: var(--leading-normal);
color: var(--text-primary);
background: var(--surface);
}
/* No-JS escape hatch. styles.css starts every .reveal at opacity 0 and relies
on script.js to add .visible — so if JS never runs, the page is blank.
script.js sets on its first line; absent that, reveals are
forced visible. Scoped to :not(.js) so it never fights the reveal itself. */
html:not(.js) .reveal {
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
::selection { background: var(--surface-inverse); color: var(--paper); }
/* Visible focus on every interactive element. The palette's accents are all
too light to ring against sand, so the ring uses ink. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* Skip link — keyboard users should not tab the whole nav to reach content. */
.skip-link {
position: absolute; left: var(--space-4); top: var(--space-4);
z-index: 1000;
transform: translateY(-200%);
background: var(--surface-inverse); color: var(--paper);
font-size: var(--text-sm); font-weight: var(--weight-medium);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-sm); text-decoration: none;
transition: transform var(--duration-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }
/* ── BUTTON ───────────────────────────────────────────────────────────────
Variants: .btn-primary (filled) · .btn-outline (bordered) · .btn-ghost (text)
Sizes: default · .btn-large
Context: .btn-primary-inv / .btn-outline-inv on dark bands
One filled primary per screen. */
.btn-primary,
.btn-outline,
.btn-primary-inv,
.btn-outline-inv {
display: inline-flex; align-items: center; justify-content: center;
gap: var(--space-2);
min-height: 40px;
padding: 0 var(--space-6);
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-normal);
border-radius: var(--radius-sm);
text-decoration: none;
cursor: pointer;
transition: background var(--duration-fast) var(--ease),
border-color var(--duration-fast) var(--ease),
color var(--duration-fast) var(--ease);
}
.btn-primary {
background: var(--surface-inverse);
color: var(--paper);
border: 1px solid var(--surface-inverse);
box-shadow: none; /* was a drop shadow — border carries it now */
}
.btn-primary:hover { background: #262421; border-color: #262421; transform: none; box-shadow: none; }
.btn-primary:active { background: var(--surface-inverse); }
.btn-outline {
background: transparent;
color: var(--text-primary);
border: 1px solid var(--border-strong);
}
.btn-outline:hover {
background: var(--fill);
border-color: var(--text-muted);
color: var(--text-primary);
transform: none; box-shadow: none;
}
.btn-outline:active { background: var(--fill-subtle); }
.btn-ghost {
font-size: var(--text-sm);
font-weight: var(--weight-regular);
color: var(--text-muted);
text-decoration: none;
transition: color var(--duration-fast) var(--ease);
}
.btn-ghost:hover { color: var(--text-primary); }
/* Inverse — dark bands */
.btn-primary-inv {
background: var(--paper);
color: var(--surface-inverse);
border: 1px solid var(--paper);
}
.btn-primary-inv:hover { background: #FFFFFF; border-color: #FFFFFF; transform: none; box-shadow: none; }
.btn-outline-inv {
background: transparent;
color: var(--text-on-dark);
border: 1px solid var(--border-on-dark);
}
.btn-outline-inv:hover {
background: rgba(var(--paper-rgb), 0.08);
border-color: rgba(var(--paper-rgb), 0.28);
transform: none; box-shadow: none;
}
.btn-primary-inv:focus-visible,
.btn-outline-inv:focus-visible { outline-color: var(--paper); }
.btn-large { min-height: 48px; padding: 0 var(--space-8); font-size: var(--text-base); border-radius: var(--radius-sm); }
/* 44px minimum tap target on touch screens. */
@media (max-width: 768px) {
.btn-primary, .btn-outline, .btn-primary-inv, .btn-outline-inv { min-height: 44px; }
}
/* ── NAV ────────────────────────────────────────────────────────────────── */
nav#main-nav {
height: 64px;
padding: 0 var(--gutter);
background: rgba(var(--surface-rgb), 0.85);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid transparent;
box-shadow: none;
transition: background var(--duration-base) var(--ease),
border-color var(--duration-base) var(--ease),
transform var(--duration-base) var(--ease);
}
/* Hidden while scrolling down, restored on any upward scroll. Under
prefers-reduced-motion the duration tokens are 0ms, so it cuts rather
than slides — the behaviour is kept, the motion is not. */
nav#main-nav.nav-hidden { transform: translateY(-100%); }
nav#main-nav.nav-scrolled {
background: rgba(var(--surface-rgb), 0.96);
border-bottom-color: var(--border);
box-shadow: none; /* separation by hairline, not shadow */
}
.nav-logo-text { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.nav-links { gap: var(--space-8); }
.nav-links a {
font-size: var(--text-sm);
font-weight: var(--weight-regular);
color: var(--text-muted);
padding: var(--space-2) 0;
}
.nav-links a:hover,
.nav-links a.nav-active { color: var(--text-primary); }
.nav-links a.nav-active { font-weight: var(--weight-medium); }
.nav-links a::after { height: 1px; background: var(--text-primary); }
/* ── BAND ─────────────────────────────────────────────────────────────────
Full-width horizontal section. Replaces the legacy `.section`, which stays
in styles.css for the pages that have not been migrated yet.
.band default surface
.band--raised alternating lighter band
.band--inverse dark band (sets the on-dark text tokens for children)
.band--tight reduced vertical rhythm */
.band {
padding: var(--space-32) var(--gutter);
background: var(--surface);
}
.band--raised { background: var(--surface-raised); }
.band--sunken { background: var(--surface-sunken); }
.band--inverse {
background: var(--surface-inverse);
--text-primary: var(--text-on-dark);
--text-secondary: var(--text-on-dark-secondary);
--text-muted: var(--text-on-dark-muted);
--border: var(--border-on-dark);
color: var(--text-on-dark);
}
.band--tight { padding-top: var(--space-24); padding-bottom: var(--space-24); }
.band__inner { max-width: var(--content-max); margin: 0 auto; }
.band__label {
display: block;
font-size: var(--text-xs);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: var(--space-4);
}
.band__title {
font-family: var(--font-serif);
font-size: var(--text-2xl);
font-weight: var(--weight-regular);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-tight);
color: var(--text-primary);
max-width: 18ch;
}
.band__title em { font-style: italic; color: var(--text-secondary); }
.band__body {
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--text-secondary);
max-width: var(--prose-max);
margin-top: var(--space-4);
}
.band__header { margin-bottom: var(--space-16); }
/* ── CARD ─────────────────────────────────────────────────────────────────
Separation by 1px border, never shadow. Shadow is reserved for surfaces
that genuinely float. */
.card {
display: flex; flex-direction: column;
padding: var(--space-8);
background: var(--surface-raised);
border: 1px solid var(--border);
border-radius: var(--radius-md);
transition: border-color var(--duration-base) var(--ease),
background var(--duration-base) var(--ease);
}
.card--plain { background: transparent; }
.card--inverse { background: var(--surface-inverse); border-color: var(--border-on-dark); }
a.card { text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--border-strong); }
.card__index {
font-size: var(--text-xs);
font-weight: var(--weight-medium);
font-variant-numeric: tabular-nums;
letter-spacing: var(--tracking-wide);
color: var(--text-muted);
margin-bottom: var(--space-4);
}
.card__title {
font-size: var(--text-lg);
font-weight: var(--weight-medium);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-tight);
color: var(--text-primary);
margin-bottom: var(--space-3);
}
.card__body {
font-size: var(--text-sm);
line-height: var(--leading-normal);
color: var(--text-secondary);
flex: 1;
}
.card__link {
display: inline-flex; align-items: center; gap: var(--space-2);
margin-top: var(--space-6);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--text-primary);
text-decoration: none;
}
a.card:hover .card__link { gap: var(--space-3); }
.card__link svg { transition: transform var(--duration-fast) var(--ease); }
/* Grid helper — cards sit on a simple 12-column-derived track. */
.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }
/* ── FIELD (form input) ───────────────────────────────────────────────────
Defined here for the contact/waitlist rebuild. The site has no form today,
so nothing currently renders these.
Add .field--invalid / .field--valid on the wrapper for state. */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--text-primary);
}
.input, .textarea {
width: 100%;
min-height: 44px;
padding: var(--space-3) var(--space-4);
font-family: var(--font-sans);
font-size: var(--text-base);
font-weight: var(--weight-regular);
line-height: var(--leading-normal);
color: var(--text-primary);
background: var(--surface-raised);
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
transition: border-color var(--duration-fast) var(--ease),
background var(--duration-fast) var(--ease);
}
.textarea { min-height: 120px; padding-top: var(--space-3); resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.input:hover, .textarea:hover { border-color: var(--text-muted); }
.input:focus, .textarea:focus { outline: 2px solid var(--focus-ring); outline-offset: 0; border-color: transparent; }
.field__hint { font-size: var(--text-sm); color: var(--text-muted); }
.field__error { font-size: var(--text-sm); color: var(--text-primary); display: none; }
/* State is carried by BOTH colour and an icon/text, never colour alone. */
.field--invalid .input,
.field--invalid .textarea { border-color: var(--accent-red); border-width: 2px; }
.field--invalid .field__error { display: block; }
.field--invalid .field__hint { display: none; }
.field--valid .input,
.field--valid .textarea { border-color: var(--accent-green-text); }
.form-status {
padding: var(--space-4);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: var(--text-sm);
color: var(--text-secondary);
}
.form-status--success { border-color: var(--accent-green-text); }
.form-status--error { border-color: var(--accent-red); }
/* ── FOOTER ─────────────────────────────────────────────────────────────── */
/* Stays light. The original #EDE9E1 was one of the three redundant off-whites
the audit collapsed into --surface-raised — same colour, now a token. */
footer { background: var(--surface-raised); border-top: 1px solid var(--border); }
.footer-tagline { font-size: var(--text-sm); color: var(--text-muted); }
.footer-col h2 {
font-size: var(--text-xs);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--text-muted);
}
.footer-col a {
font-size: var(--text-sm);
color: var(--text-secondary);
transition: color var(--duration-fast) var(--ease);
}
.footer-col a:hover { color: var(--text-primary); }
.footer-bottom p,
.footer-links a { font-size: var(--text-sm); color: var(--text-muted); }
.footer-links a:hover { color: var(--text-primary); }
/* ── ACCENT CORRECTIONS ───────────────────────────────────────────────────
--accent-green-text is for green text on the LIGHT surfaces (status.html's
"Operational" labels, currently 1.97 : 1 in inline styles — page-specific,
so it is handled when status.html is migrated).
.api-verb is NOT one of them: it sits on api.html's dark band, where the
original light #6dbe8d already measures well. Left alone deliberately. */
/* ── REDUCED MOTION ───────────────────────────────────────────────────────
Absent site-wide before this. Covers the scroll reveals, the 22s marquee,
the typing effect and every transition in one pass — and forces revealed
content visible so nothing is stranded at opacity 0. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.reveal, .fade-up {
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
}
/* ── PAGE: HOME ─────────────────────────────────────────────────────────── */
/* Hero retuned onto the scale. Was clamp(52px, 8vw, 96px) — 96px overshot the
scale's top step by a long way. The glow div is gone from the markup. */
.hero { padding: 140px var(--gutter) var(--space-16); }
.hero-headline {
font-size: clamp(40px, 6vw, 56px);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
margin-bottom: var(--space-6);
}
.hero-headline em { color: var(--text-secondary); }
.hero-sub {
font-size: var(--text-lg);
line-height: var(--leading-normal);
color: var(--text-secondary);
max-width: 46ch;
margin: 0 auto var(--space-8);
}
.hero-cta { gap: var(--space-4); }
.steps { list-style: none; counter-reset: none; }
.steps .card { padding: var(--space-6) 0 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; }
/* Vision */
.vision-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.vision-quote {
font-family: var(--font-serif);
font-size: var(--text-xl);
font-weight: var(--weight-regular);
line-height: var(--leading-snug);
letter-spacing: var(--tracking-tight);
color: var(--text-on-dark);
}
.vision-cite {
display: block;
margin-top: var(--space-6);
font-family: var(--font-sans);
font-size: var(--text-xs);
font-style: normal;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
color: var(--text-on-dark-muted);
}
/* Final CTA */
.cta-band { background: var(--surface-raised); text-align: center; }
.cta-inner { display: flex; flex-direction: column; align-items: center; }
.cta-title { max-width: none; }
.cta-body { margin: var(--space-4) 0 var(--space-8); }
@media (max-width: 768px) {
.hero { padding-top: 112px; }
.hero-cta { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; margin: 0 auto; }
.band { padding: var(--space-24) var(--gutter); }
.band__title { max-width: none; }
}
/* Mobile nav — the hamburger was a 36px tap target (20px bar + 8px padding). */
@media (max-width: 920px) {
.nav-mobile-toggle {
min-width: 44px; min-height: 44px;
align-items: center; justify-content: center;
padding: var(--space-3);
}
.nav-mobile-toggle span { background: var(--text-primary); }
.nav-mobile-open .nav-links a { min-height: 44px; display: flex; align-items: center; }
}
@media (max-width: 480px) {
/* At 375px the logo, CTA and hamburger were competing for the same row. */
nav#main-nav .btn-primary { padding: 0 var(--space-4); font-size: var(--text-xs); }
}
/* 44px tap targets on touch for the remaining chrome links. */
@media (max-width: 768px) {
.nav-logo { min-height: 44px; }
.btn-ghost { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.footer-social-link { min-width: 44px; min-height: 44px; }
}
/* ── PRODUCT MOCK CONTRAST ────────────────────────────────────────────────
The hero mock is a simulated app UI, but it is real DOM text, so AA applies
to it like anything else. Its dim chrome measured 1.69–3.71 : 1.
.preview-window also inherited body's dark ink onto a near-black surface,
so any text inside it that did not set its own colour was invisible. */
.preview-window { color: var(--text-on-dark); }
.preview-title,
.preview-sidebar-item,
.msg-author,
.preview-mode,
.at-popup-label,
.at-desc,
.panel-header,
.preview-input > span { color: rgba(var(--paper-rgb), 0.62); }
.preview-sidebar-item.active,
.at-name { color: var(--text-on-dark); }
.msg-text, .code-line { color: rgba(var(--paper-rgb), 0.78); }
/* The @-trigger and mention keep the periwinkle — already 6.3 : 1 here. */
.at-trigger, .at-mention { color: var(--accent-mention); }
/* Artifact-panel syntax markers in the mock — 1.72 and 2.64 : 1. */
.code-line .ck { color: rgba(var(--paper-rgb), 0.62); }
.code-line .cv { color: rgba(var(--paper-rgb), 0.70); }
/* ── INVERSE SECTION (legacy `.section` pages) ────────────────────────────
Dark bands on capabilities.html and api.html declared their background
inline as `style="background:var(--ink)"` and then set every child's
colour with its own inline light-on-dark rgba literal. Background and
text were coupled by nothing but coincidence: if one applied and the
other did not, the whole band rendered light-on-light and became
unreadable. They now succeed or fail together, from tokens, with a
literal fallback on the surface so the band is never light by accident. */
.section--inverse {
background: var(--color-surface-inverse, #141312);
color: var(--color-text-on-dark, #E5E1D7);
}
.section--inverse .section-label { color: var(--color-text-on-dark-muted, rgba(229, 225, 215, 0.55)); }
.section--inverse .section-title,
.section--inverse .section-title em { color: var(--color-text-on-dark, #E5E1D7); }
.section--inverse .section-title em { color: var(--color-text-on-dark-strong, rgba(229, 225, 215, 0.75)); }
.section--inverse .section-body { color: var(--color-text-on-dark-strong, rgba(229, 225, 215, 0.75)); }
/* Slash-command table. The header sat at 0.30 alpha — about 2.5:1 — and the
body at 0.60. Both now come off the on-dark ladder. */
.slash-table-wrap { border-color: var(--color-border-on-dark); }
.slash-table thead tr { background: rgba(var(--paper-rgb), 0.07);
border-bottom-color: var(--color-border-on-dark); }
.slash-table th { color: var(--color-text-on-dark-muted); }
.slash-table td { color: var(--color-text-on-dark-strong);
border-bottom-color: rgba(var(--paper-rgb), 0.06); }
.slash-table tbody tr:hover { background: rgba(var(--paper-rgb), 0.04); }
.slash-table code { color: var(--color-text-on-dark);
background: rgba(var(--paper-rgb), 0.08);
border-color: var(--color-border-on-dark); }
.slash-code { color: var(--color-text-on-dark-strong);
background: rgba(var(--paper-rgb), 0.08); }
/* api.html beta note — was an inline rgba at 0.5 alpha, 4.32:1. */
.api-beta-note {
font-size: var(--text-sm);
font-weight: var(--weight-regular);
color: var(--color-text-on-dark-strong);
margin-bottom: var(--space-6);
}
/* status.html operational indicators. The label was an inline #4caf50 on a
light surface — 2.14:1, effectively unreadable. The dot stays the bright
brand green because it is a non-text indicator; only the words move to the
darkened text variant. */
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-success); flex-shrink: 0; }
.status-pill {
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--color-success-text);
background: rgba(41, 93, 62, 0.08);
border: 1px solid rgba(41, 93, 62, 0.22);
border-radius: var(--radius-pill);
padding: 4px 12px;
}
/* Section sub-headings on brain.html and privacy.html were sitting
directly under an , skipping two levels. They are now; this keeps
the size they were designed at. */
.h5 {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
letter-spacing: 0.01em;
color: var(--color-text);
margin-bottom: var(--space-2);
}
/* Astro injects `astro-island,astro-slot,astro-static-slot{display:contents}`
as an inline