/* =========================================================================
— shared scroll-reveal + focus + reduced-motion layer for /about
Mirrors the house convention used by home.js (data-reveal + .is-visible),
but self-contained because about.html does NOT load home.css / home.js.
Tokens only. No new colours.
========================================================================= */
/* ---- scroll reveal ------------------------------------------------------- */
/* Until ab-reveal.js arms the page, hidden state only applies when JS is ready
(.ab-reveal-armed on ), so a no-JS / failed-JS visitor sees everything. */
.ab-reveal-armed [data-reveal] {
opacity: 0;
transform: translateY(20px);
transition:
opacity 600ms var(--ease-out-soft),
transform 600ms var(--ease-out-soft);
will-change: opacity, transform;
}
.ab-reveal-armed [data-reveal].is-visible {
opacity: 1;
transform: none;
}
/* A few elements want a touch more travel ("land" harder). */
.ab-reveal-armed [data-reveal="lift"] { transform: translateY(28px); }
/* ---- branded display type (About only) ----------------------------------- */
/* Every About heading already uses var(--font-display). Re-route that token to
"Anybody" — the homepage's display face / PixelForce reference — for the whole
page in one line. Scoped to #main, so the nav + footer (outside #main) keep the
global token and NO other page is affected. Small display roles are pinned back
to Inter in their own section files (Anybody runs heavy at small sizes). */
#main { --font-display: "Anybody", "Inter", -apple-system, BlinkMacSystemFont, sans-serif; }
/* ---- shared elevation scale (navy-tinted — premium on light bands) -------- */
#main {
--elev-1: 0 1px 2px rgba(15,20,25,.05);
--elev-2: 0 1px 2px rgba(15,20,25,.05), 0 12px 28px -20px rgba(10,26,63,.16);
--elev-3: 0 1px 2px rgba(15,20,25,.05), 0 18px 40px -18px rgba(10,26,63,.22);
--elev-4: 0 24px 60px -22px rgba(10,26,63,.28);
/* seam recipes (1px, mask-faded ends) shared by section ::after seams */
--seam-light: linear-gradient(90deg, transparent 0%, rgba(10,26,63,0.10) 50%, transparent 100%);
--seam-dark: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.02) 12%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.02) 88%, transparent 100%);
--seam-ask: linear-gradient(90deg, transparent 0%, rgba(232,180,0,0.18) 50%, transparent 100%);
}
/* ---- page-wide focus ring (about only) ---------------------------- */
#main :focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
border-radius: 4px;
}
/* On light bands a pure-lime ring can wash out on white — add a navy halo so
focus stays obvious in both themes while lime remains the identity color. */
.ab-story :focus-visible,
.ab-charter :focus-visible,
.ab-advisors :focus-visible {
box-shadow: 0 0 0 4px rgba(10, 26, 63, 0.18);
}
/* ---- in-page anchor scroll (ghost CTA → founder story) -------------------- */
/* Smooth only when the user hasn't asked for reduced motion. scroll-margin
clears the 72px sticky nav so the section heading isn't hidden under it. */
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
#ab-story { scroll-margin-top: 92px; }
/* ---- faint texture floor so deep navy never reads dead-flat -------------- */
/* Felt, not seen — kept below the 0.02 threshold. */
#main {
background-color: var(--color-primary);
background-image:
repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 22px);
}
/* ---- reduced motion: reveal everything instantly, kill ambient motion ---- */
@media (prefers-reduced-motion: reduce) {
.ab-reveal-armed [data-reveal],
.ab-reveal-armed [data-reveal].is-visible {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.ab-story__play { animation: none !important; }
}
/* ============================ READABILITY (about page only) =============================
Body/smaller text slightly larger + higher contrast. Scoped to .ab-* leaf selectors;
ab-reveal.css loads last, so these win without touching shared tokens or other pages.
Navy sections: white 0.72/0.65 -> 0.85/0.80. Gold section (awards): navy 0.72 -> 0.88.
Headings, eyebrows, charter titles, para-ledes, and the shared .fcta/footer untouched.
Aligns with UI-UX-PRO-MAX: base 16px body, 4.5:1 contrast.
===================================================================================== */
.ab-hero__sub {
font-size: clamp(18px, 1.5vw, 20px);
color: rgba(255, 255, 255, 0.86);
}
.ab-story__subline { color: rgba(255, 255, 255, 0.85); }
.ab-story__para {
font-size: 18px;
color: rgba(255, 255, 255, 0.85);
}
.ab-charter__sub { color: rgba(255, 255, 255, 0.85); }
.ab-ct__body {
font-size: 16px;
color: rgba(255, 255, 255, 0.85);
}
.ab-advisors__sub { color: rgba(255, 255, 255, 0.85); }
.ab-mission__attr-role { color: rgba(255, 255, 255, 0.80); }
.ab-awards__sub {
font-size: 16px;
color: rgba(10, 26, 63, 0.88);
}