/* =========================================================================
abacus-arcsystem — public.css
Public site-specific layout: banner, header (logo-only), footer
(matches-page-bg, theme-aware logo), page layout, detail pages, /_design.
Phase 6a:
- Header is logo-only (no separate brand name text)
- Theme-aware logo swap (light/dark mode → different PNG)
- Footer matches the page background (hairline top edge only)
- Card hover animates (transform + shadow growth, transitioned)
- Cards have visible resting elevation so boundaries read on warm paper
- Signature 3px orange underline on .title-underline + active nav item
- News category tag renders as a compact square-stamp pill
All values via tokens. The themes.css `[data-theme]` + `[data-mode]`
overrides flow through without changes here.
========================================================================= */
/* ---------- Sitewide banner (active occasion) ----------------------- */
.site-banner {
background: var(--accent);
color: var(--on-accent);
}
.site-banner-inner {
max-width: var(--content-max);
margin: 0 auto;
padding: var(--s-2) var(--s-6);
font-family: var(--font-body);
font-weight: 500;
font-size: var(--fs-sm);
text-align: center;
}
.site-banner a {
color: var(--on-accent);
text-decoration: underline;
}
.site-banner a:hover { color: var(--on-accent); }
/* ---------- Header --------------------------------------------------- */
.site-header-inner .brand {
display: inline-flex; align-items: center;
text-decoration: none;
flex: 0 0 auto;
}
.site-header-inner .brand-mark {
display: block;
height: 40px;
width: auto;
max-width: 200px;
object-fit: contain;
}
/* Theme-aware logo swap. Two axes — mode (light/dark) and form (full
lockup / compact gear-only). The full lockup shows on desktop + tablet;
the compact mark shows on phone (handled inside the phone @media block
below). By default we hide everything and explicitly show exactly one
variant per (mode, viewport) combination. */
.site-header .brand-mark { display: none; }
.site-header .brand-mark--full.brand-mark--light { display: block; }
body[data-mode="dark"] .site-header .brand-mark--full.brand-mark--light { display: none; }
body[data-mode="dark"] .site-header .brand-mark--full.brand-mark--dark { display: block; }
/* Active nav item: 3px orange underline. The brand's signature gesture. */
.site-nav a.is-active {
color: var(--fg);
font-weight: 600;
position: relative;
}
.site-nav a.is-active::after {
content: "";
position: absolute;
left: 0; right: 0;
bottom: -10px;
height: 3px;
background: var(--accent);
border-radius: var(--r-xs);
}
.site-nav a {
transition: color var(--dur-fast) var(--ease-out);
}
.site-donate { margin-left: auto; flex: 0 0 auto; }
/* ---------- Nav dropdown (phase 7a — About → People) ----------------- */
/* Generic, NOT About-specific: any .nav-has-dropdown gets a hover/focus
popup on desktop and renders nested on mobile. 7d's pages-driven nav can
reuse this shape verbatim. */
.nav-has-dropdown {
position: relative;
display: inline-flex;
align-items: center;
gap: 2px;
}
.nav-caret {
display: inline-flex;
align-items: center;
color: var(--fg-muted);
pointer-events: none;
transition: transform var(--dur-fast) var(--ease-out);
}
.nav-caret svg { display: block; }
/* Open state is driven by JS (.is-open) so the mouseleave close-delay can
work; :focus-within keeps it open for keyboard users. (No bare :hover
here — JS opens on mouseenter and closes on a short delay.) */
.nav-has-dropdown:focus-within .nav-caret,
.nav-has-dropdown.is-open .nav-caret { transform: rotate(180deg); }
.nav-dropdown {
position: absolute;
top: 100%;
left: 0;
margin: var(--s-2) 0 0;
padding: var(--s-1);
min-width: 180px;
list-style: none;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-md);
box-shadow: var(--shadow-md);
display: none;
z-index: 1080;
}
/* Invisible "bridge" filling the var(--s-2) gap between the trigger and the
panel, so a downward mouse trajectory from the trigger to a menu item
never crosses an un-hovered surface (technique A — works with the JS
close-delay in technique B). It's a descendant of .nav-has-dropdown, so
hovering it keeps the container's mouseenter region alive. */
.nav-dropdown::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: calc(-1 * var(--s-2));
height: var(--s-2);
}
.nav-has-dropdown:focus-within .nav-dropdown,
.nav-has-dropdown.is-open .nav-dropdown { display: block; }
.nav-dropdown li { margin: 0; }
.nav-dropdown a {
display: block;
padding: var(--s-2) var(--s-3);
border-radius: var(--r-sm);
color: var(--fg);
font-size: var(--fs-sm);
white-space: nowrap;
}
.nav-dropdown a:hover { background: var(--bg-sunken); }
.nav-dropdown a.is-active { color: var(--fg); font-weight: 600; }
/* Hamburger: hidden on desktop + tablet; visible at phone width. */
.nav-toggle {
display: none;
align-items: center; justify-content: center;
width: 44px; height: 44px;
flex: 0 0 auto;
padding: 0;
background: transparent;
border: 1px solid transparent;
border-radius: var(--r-md);
color: var(--fg);
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out);
}
.nav-toggle:hover { background: var(--bg-sunken); }
.nav-toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.nav-toggle svg { display: block; width: 22px; height: 22px; }
.nav-toggle .ico-close { display: none; }
.nav-toggle[aria-expanded="true"] .ico-menu { display: none; }
.nav-toggle[aria-expanded="true"] .ico-close { display: block; }
/* Backdrop scrim behind the open hamburger panel. Same color as the
existing modal scrims (rgba(0,0,0,0.55), per design-system §3.11). */
.nav-scrim {
position: fixed; inset: 0;
background: rgba(11, 14, 20, 0.55);
z-index: 1090;
display: none;
}
.nav-scrim.is-open { display: block; }
/* ---------- Tablet: 640px – 1023px ---------------------------------- */
/* Nav links stay inline but shrink — smaller gap, smaller padding,
allowed to wrap to a second row if the viewport gets tight. */
@media (max-width: 1023px) {
.site-header-inner { gap: var(--s-4); }
.site-header-inner .brand-mark { height: 36px; }
.site-nav { gap: var(--s-3); flex-wrap: wrap; }
.site-nav a { font-size: 13px; }
.site-nav a.is-active::after { bottom: -6px; }
}
/* ---------- Phone: < 640px ------------------------------------------ */
/* Nav collapses to a hamburger that opens a right-side panel. The full
lockup is swapped for the gear-only mark; the Donate CTA stays in
the bar (per phase 6c brief). */
@media (max-width: 639px) {
/* The header in components.css uses `backdrop-filter: blur(...)`. That
creates a containing block for descendant `position: fixed`, which
would clip the open panel + scrim to the header's height. Drop the
filter at phone width — the sticky bg color is enough on its own. */
.site-header {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: var(--bg);
}
.site-header-inner {
flex-wrap: nowrap;
gap: var(--s-2);
padding: var(--s-3) var(--s-4);
}
/* Swap the full lockup for the compact gear mark. The default
base-rule still hides everything; we re-show exactly one variant
here, then dark mode picks the other. */
.site-header .brand-mark--full.brand-mark--light { display: none; }
body[data-mode="dark"] .site-header .brand-mark--full.brand-mark--dark { display: none; }
.site-header .brand-mark--compact.brand-mark--light { display: block; }
body[data-mode="dark"] .site-header .brand-mark--compact.brand-mark--light { display: none; }
body[data-mode="dark"] .site-header .brand-mark--compact.brand-mark--dark { display: block; }
.site-header-inner .brand-mark { height: 36px; max-width: 40px; }
.nav-toggle { display: inline-flex; }
/* Slide-in panel from the right. Always rendered so the transform
can be transitioned; offscreen + visibility:hidden when closed. */
.site-nav {
position: fixed;
top: 0; right: 0; bottom: 0;
width: min(360px, 85vw);
z-index: 1100;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: var(--s-16) var(--s-4) var(--s-6);
background: var(--bg-elev);
border-left: 1px solid var(--border);
box-shadow: var(--shadow-lg);
overflow-y: auto;
transform: translateX(100%);
visibility: hidden;
transition: transform var(--dur-base) var(--ease-out),
visibility 0s linear var(--dur-base);
}
.site-nav.is-open {
transform: translateX(0);
visibility: visible;
transition: transform var(--dur-base) var(--ease-out),
visibility 0s linear 0s;
}
.site-nav a {
display: flex;
align-items: center;
min-height: 44px;
width: 100%;
padding: var(--s-2) var(--s-3);
border-radius: var(--r-md);
font-size: var(--fs-body);
color: var(--fg);
}
.site-nav a:hover { background: var(--bg-sunken); }
/* 7a: in the hamburger panel the dropdown is NOT a popup — People renders
as an indented sub-item nested under About (no caret, no overlay). */
.nav-has-dropdown {
flex-direction: column;
align-items: stretch;
width: 100%;
gap: 0;
}
.nav-has-dropdown .nav-caret { display: none; }
/* No desktop hover here — the gap "bridge" is irrelevant and would only
sit over the panel as an inert strip; drop it so it can't catch taps. */
.nav-dropdown::before { display: none; }
.nav-dropdown {
position: static;
display: block;
margin: 0;
padding: 0;
min-width: 0;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
.nav-dropdown a { padding-left: var(--s-6); }
/* Active item: keep the 3px orange underline, but pull it under the
text (not under the row) so it reads as the brand signature. */
.site-nav a.is-active::after {
left: var(--s-3);
right: auto;
bottom: var(--s-2);
width: 2em;
height: 3px;
}
}
@media (prefers-reduced-motion: reduce) {
.site-nav { transition: none !important; }
.site-nav.is-open { transition: none !important; }
}
/* ---------- Footer --------------------------------------------------- */
/* Phase 6a: same surface as the page (no dark slab), single 1px hairline
on the top edge to separate from page content. Theme-aware logo swap. */
.site-footer {
background: var(--bg);
color: var(--fg);
border-top: 1px solid var(--border);
margin-top: var(--s-20);
}
.site-footer-inner {
max-width: var(--content-max);
margin: 0 auto;
padding: var(--s-10) var(--s-6) var(--s-8);
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: var(--s-8);
align-items: start;
}
@media (max-width: 760px) {
.site-footer-inner {
grid-template-columns: 1fr;
gap: var(--s-6);
}
}
/* align-items:flex-start so the logo keeps its intrinsic width and sits
flush-left with the tagline. Without it the default `stretch` blows the
![]()
out to max-width and object-fit:contain centers the art, indenting it. */
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.footer-logo {
display: block;
height: 56px;
width: auto;
max-width: 280px;
object-fit: contain;
}
.footer-logo--dark { display: none; }
body[data-mode="dark"] .site-footer .footer-logo--light { display: none; }
body[data-mode="dark"] .site-footer .footer-logo--dark { display: block; }
.footer-tagline {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--fs-h5);
color: var(--fg);
line-height: var(--lh-snug);
max-width: 24ch;
}
/* Right column: contact details stacked above the social icons. */
.footer-connect {
display: flex; flex-direction: column; gap: var(--s-4);
align-items: flex-start;
}
.footer-contact {
display: flex; flex-direction: column; gap: var(--s-2);
}
.footer-contact a { color: var(--accent-deep); }
.footer-contact a:hover { color: var(--accent); text-decoration: underline; }
/* Social icons: monochrome SVGs that inherit currentColor.
Hover → accent. Recolor for free under each theme/mode. */
.footer-socials {
display: flex;
gap: var(--s-3);
align-self: start;
align-items: center;
}
.footer-socials a {
display: inline-flex;
width: 36px; height: 36px;
align-items: center; justify-content: center;
border-radius: var(--r-md);
color: var(--fg-muted);
transition: color var(--dur-fast) var(--ease-out),
background-color var(--dur-fast) var(--ease-out);
}
.footer-socials a:hover {
color: var(--accent);
background: var(--bg-sunken);
text-decoration: none;
}
.footer-socials a:focus-visible {
outline: none; box-shadow: var(--shadow-focus);
}
.footer-socials svg { display: block; }
.footer-legal {
grid-column: 1 / -1;
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
text-align: center; gap: var(--s-4);
padding-top: var(--s-5);
border-top: 1px solid var(--divider);
color: var(--fg-muted);
font-size: var(--fs-sm);
}
.footer-legal a { color: var(--fg-muted); }
.footer-legal a:hover { color: var(--accent); text-decoration: underline; }
/* ---------- Main + pages -------------------------------------------- */
.site-main {
max-width: var(--content-max);
margin: 0 auto;
padding: var(--s-12) var(--s-6);
display: flex; flex-direction: column;
gap: var(--s-8);
}
/* ---------- Three-tier page header (phase 6d) -----------------------
The shared partial templates/public/_page_header.html renders this
block on every public page. Tier 1 = .eyebrow (small uppercase
orange, owned by colors_and_type.css); tier 2 = .h1.page-header
(big display); tier 3 = .page-subheader (small faded). Stack flows
top-to-bottom with deliberately tight gaps so the three lines read
as one composed unit, not three loose paragraphs.
Note: 6d renames the *container* from `.page-header` (which was
confusing — it implied an h1) to `.page-header-block`. The `.h1` on
the H1 itself now also carries `.page-header` per the brief. */
.page-header-block {
display: flex;
flex-direction: column;
margin-bottom: var(--s-6);
}
.page-header-block .eyebrow,
.page-header-block .page-eyebrow {
display: block;
/* Tight gap to the H1 — the eyebrow is a label, not a paragraph. */
margin: 0 0 var(--s-2);
color: var(--accent-deep);
}
.page-header-block .eyebrow a {
color: inherit;
text-decoration: none;
}
.page-header-block .eyebrow a:hover {
color: var(--accent);
text-decoration: underline;
}
.page-header-block .page-header {
color: var(--fg);
margin: 0;
}
.page-header-block .page-subheader {
/* Tight top margin per brief — reads as a subtitle, not a body
paragraph. Faded text colour separates it visually from the H1. */
margin: var(--s-2) 0 0;
max-width: 60ch;
font-family: var(--font-body);
font-size: var(--fs-sm);
line-height: var(--lh-normal);
color: var(--fg-muted);
}
/* Optional one-line context note that sits *under* the header partial
(e.g. "Part of " on offering detail pages). Pulled up tight
to the subheader so it reads as one composed group, not a paragraph. */
.page-context {
margin: calc(-1 * var(--s-4)) 0 var(--s-4);
}
.page-header-block .title-affix {
display: inline-block;
margin-left: var(--s-2);
font-family: var(--font-mono);
font-weight: 500;
font-size: var(--fs-h5);
color: var(--fg-subtle);
vertical-align: middle;
}
/* The signature gesture (DESIGN_SYSTEM §3.7) — applied per-page via the
`pages.title_underline_words` field, also used by the active nav item
above. 3px solid accent under each matching word. */
.title-underline {
position: relative;
display: inline-block;
white-space: nowrap;
}
.title-underline::after {
content: "";
position: absolute;
left: 0; right: 0;
bottom: -4px;
height: 3px;
background: var(--accent);
border-radius: var(--r-xs);
}
/* News article header: tag pill + date inline row */
.news-meta-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-3);
margin: var(--s-2) 0 var(--s-3);
}
.page-empty-state {
text-align: center;
padding: var(--s-20) var(--s-4);
}
.page-empty-state .eyebrow {
display: block; margin-bottom: var(--s-3);
color: var(--accent-deep);
}
.page-empty-state .accent-word {
position: relative; display: inline-block;
}
.page-empty-state .accent-word::after {
content: ""; position: absolute; left: 2px; right: 2px; bottom: -2px;
height: var(--s-1); background: var(--accent); border-radius: var(--r-xs);
}
.page-block { /* sections inside the block-driven pages */ }
.page-block + .page-block { margin-top: var(--s-8); }
.page-block--placeholder {
padding: var(--s-3);
border: 1px dashed var(--border-strong);
border-radius: var(--r-md);
color: var(--fg-subtle);
background: var(--bg-sunken);
}
.page-hero-image {
width: 100%;
max-height: 480px;
object-fit: cover;
border-radius: var(--r-lg);
margin: 0 0 var(--s-5);
display: block;
}
/* ---------- Prose (markdown blocks + bios + descriptions) ----------- */
.prose {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-loose);
color: var(--fg);
/* Pre-launch fix D: was a fixed 68ch (~2/3 of the 1100px content container),
which left a dead empty right third while the card grids below filled the
full width. Now fills the container up to the ultrawide readability cap so
prose reads as one column with the grids; min(100%) keeps mobile/tablet
(where 100% is below the cap) exactly as before. */
max-width: min(100%, var(--prose-max));
}
/* Lead paragraphs (detail-page summaries, intro ledes) align to the same
measure — previously uncapped, so they could run edge-to-edge on ultrawide. */
.site-main .lead {
max-width: min(100%, var(--prose-max));
}
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5 {
font-family: var(--font-display);
font-weight: 600;
color: var(--fg);
line-height: var(--lh-tight);
margin: var(--s-6) 0 var(--s-3);
}
/* 7a: deep-linkable headers. position:relative anchors the absolutely-placed
copy-link icon; scroll-margin-top keeps a hash-navigated header from
landing under the sticky site header. */
.prose h2, .prose h3, .prose h4 {
position: relative;
scroll-margin-top: var(--s-12);
}
.prose-anchor {
position: absolute;
left: calc(-1 * var(--s-6));
top: 0.15em;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--s-5);
height: var(--s-5);
padding: 0;
background: transparent;
border: 0;
color: var(--fg-subtle);
cursor: pointer;
opacity: 0;
transition: opacity var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}
.prose h2:hover .prose-anchor,
.prose h3:hover .prose-anchor,
.prose h4:hover .prose-anchor,
.prose h2:focus-within .prose-anchor,
.prose h3:focus-within .prose-anchor,
.prose h4:focus-within .prose-anchor {
opacity: 1;
}
.prose-anchor:hover { color: var(--accent); }
.prose-anchor:focus-visible {
outline: none;
opacity: 1;
box-shadow: var(--shadow-focus);
border-radius: var(--r-xs);
}
/* Brief "Link copied" confirmation, positioned beside the icon. */
.prose-anchor-toast {
position: absolute;
left: calc(-1 * var(--s-6));
top: calc(100% + var(--s-1));
white-space: nowrap;
padding: var(--s-1) var(--s-2);
border-radius: var(--r-xs);
background: var(--fg);
color: var(--bg-elev);
font-family: var(--font-body);
font-size: var(--fs-xs);
font-weight: 500;
opacity: 0;
transform: translateY(-2px);
pointer-events: none;
transition: opacity var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.prose-anchor-toast.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Touch devices can't hover — keep the icon faintly visible so the
affordance is discoverable. */
@media (hover: none) {
.prose-anchor { opacity: 0.45; }
}
.prose h1 { font-size: var(--fs-h2); }
.prose h2 { font-size: var(--fs-h3); margin-top: var(--s-8); }
.prose h3 { font-size: var(--fs-h4); }
.prose p { margin: var(--s-3) 0; }
.prose ul, .prose ol { margin: var(--s-3) 0; padding-left: var(--s-6); }
.prose li { margin: var(--s-1) 0; }
.prose a {
color: var(--accent-deep);
text-decoration: underline;
text-decoration-thickness: 1px;
transition: color var(--dur-fast) var(--ease-out),
text-decoration-thickness var(--dur-fast) var(--ease-out);
}
.prose a:hover {
color: var(--accent);
text-decoration-thickness: 2px;
}
.prose blockquote {
border-left: 4px solid var(--accent);
padding-left: var(--s-4);
margin: var(--s-4) 0;
color: var(--fg-muted);
}
.prose code {
font-family: var(--font-mono);
font-size: 0.9em;
background: var(--bg-sunken);
padding: 1px 4px;
border-radius: var(--r-xs);
}
.prose img { max-width: 100%; border-radius: var(--r-md); }
.prose-serif {
font-family: var(--font-serif);
font-size: var(--fs-body);
line-height: var(--lh-loose, 1.7);
color: var(--fg);
}
.prose-snippet {
font-family: var(--font-body);
font-size: var(--fs-sm);
color: var(--fg-muted);
}
/* ---------- Chips row (related taggables) --------------------------- */
.chips {
display: flex; flex-wrap: wrap; gap: var(--s-2);
}
/* ---------- Tag pill (compact square stamp) ------------------------- */
/* Per DESIGN_SYSTEM §3.6: tag radius = --r-xs (3px), tinted background,
compact width fit to the label. NOT a full-width bordered box. */
.tag--pill {
display: inline-flex;
align-items: center;
align-self: flex-start;
/* width: max-content hugs the label even when the pill sits inside a
flex column whose default `align-items: stretch` would otherwise
stretch a block-level child to the cross-axis width. */
width: max-content;
max-width: 100%;
padding: var(--s-1) var(--s-2);
border-radius: var(--r-xs);
background: var(--brand-orange-soft);
color: var(--accent-deep);
border: 1px solid transparent;
font-family: var(--font-body);
font-weight: 600;
font-size: var(--fs-xs);
letter-spacing: 0.02em;
text-transform: uppercase;
line-height: 1.2;
white-space: nowrap;
}
.tag--category { /* news category — semantic alias */ }
/* ---------- Person detail headshot (Fix E 3a) ----------------------- */
/* Constrained so the headshot doesn't dominate the detail page (was the
full-width .page-hero-image). Capped width, rounded, sits above the bio. */
.person-headshot {
display: block;
width: 100%;
max-width: 280px;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--r-lg);
border: 1px solid var(--border);
margin: var(--s-4) 0 var(--s-6);
}
/* ---------- Card fallback-icon placeholder (Fix E) ------------------- */
/* Sits inside a card's existing image slot (.abc-*-img, which already carries
the aspect-ratio + --bg-sunken surface) when the record has no asset image.
The Lucide becomes an inline