/* ============================================================================
page-ai-optimization.css — AI OPTIMIZATION page (/ai-seo/)
----------------------------------------------------------------------------
Base layer ONLY: self-hosted font, page-scoped tokens, page shell, dark-nav
variant, and the shared labelled-placeholder utility.
Section rules live in their own files and load AFTER this one:
aio-hero-stats.css · aio-body.css · aio-stages-cases.css
Scope: #page-aio2. A deliberately NEW id — the 202 dead `#page-ai-seo` rules
in page-ai-seo.css/pages.css were unreachable behind this template's old
302-redirect and must stay unreachable now that the redirect is gone.
Do not rename this id without auditing those rules first.
========================================================================== */
/* ----- Cutive Mono (OFL) — self-hosted, latin subset only -------------------
Used exclusively for small mono eyebrow/label text (e.g. "01 · Diagnosis"),
which is Latin-only, so the latin subset is sufficient. Never load this from
the Google CDN — production self-hosts fonts (see global CLAUDE.md). */
@font-face {
font-family: 'Cutive Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/cutive-mono-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ----- Page-scoped tokens ---------------------------------------------------
This page is a dark design inside a light theme. These 13 values had no
match in the global :root, so they are scoped here rather than promoted —
notably --aio-radius, since the theme's --radius-* are all 0 and changing
them globally would reshape every existing page. */
#page-aio2 {
--aio-bg: #0e0e0e; /* page root */
--aio-bg-card: rgba(5, 5, 7, .6); /* stats3 cards */
--aio-bg-card-2: #0b0b0b; /* diagnosis + strategy cards */
--aio-bg-card-3: #101217; /* action cards */
--aio-bg-tag: #2d2d2d; /* case hashtag pills */
--aio-blue: #284ca0; /* borders, eyebrows, tag text */
--aio-line: #484848; /* card borders */
--aio-line-faq: #4b4b4b; /* faq item borders */
--aio-ink-muted: #9ea09f; /* statement muted prefix */
/* Figma sets the checklist text and its diamond bullet to rgba(255,255,255,.3)
on every stage card (740:198, 738:439, 738:457 and the 02/03 equivalents).
The value had drifted to .72 while the comments at both use sites still read
.3; restored to the design 2026-07-29. NOTE: .3 white on the #0b0b0b card is
roughly a 2.3:1 contrast ratio, below WCAG AA for body text — kept because
the design calls for it, but worth a deliberate decision if these lines are
meant to be read rather than scanned. */
--aio-ink-check: rgba(255, 255, 255, .3); /* stage checklist text + bullet */
--aio-radius: 10px;
--aio-radius-pill: 20px;
--aio-f-mono: 'Cutive Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* ----- Page shell ---------------------------------------------------------- */
#page-aio2 {
background-color: var(--aio-bg); /* longhand: the Cafe24 CSS optimizer
mangles `background:` + var() */
color: var(--on-dark-1);
overflow-x: hidden; /* full-bleed 100vw children must not
create a horizontal scrollbar */
}
/* Default type colours, at ELEMENT specificity (0,0,0,1) via :where().
These MUST NOT be written as `#page-aio2 p { color: … }`: that is ID
specificity and silently beat every section rule — measured 2026-07-27, 15 of
18 colour declarations on this page were being overridden, including
`.aio2-faq__q { color: var(--aio-blue) }` and every stat/body paragraph, all
rendering --on-dark-2 grey instead of their intended colour.
Element specificity still beats the UA sheet and any bare `p {}` in the base
stylesheet (this file loads later), but loses to every `.aio2-*` class rule —
which is exactly the precedence we want. Same trap as the margin reset below;
see CLAUDE.md "check for ID-level selectors before writing a rule". */
:where(#page-aio2) h1,
:where(#page-aio2) h2,
:where(#page-aio2) h3,
:where(#page-aio2) h4 {
color: var(--on-dark-1);
}
:where(#page-aio2) p {
color: var(--on-dark-2);
}
/* UA margin reset at ZERO specificity.
`:where()` contributes nothing, so this whole selector is (0,0,0,0) — it still
beats the user-agent stylesheet (any author rule does) but loses to every
section rule like `.aio2-statement__heading { margin: 0 0 88px }`.
This MUST NOT be written as `#page-aio2 h1 { margin: 0 }`: that is ID
specificity and silently beat every class-level margin on the page. Measured
consequence — hero title and statement heading both computed margin-bottom:0,
collapsing the designer's spacer-29 and spacer-88 and shifting everything
below them. See CLAUDE.md, "check for ID-level selectors before writing a
rule". */
:where(#page-aio2) :where(h1, h2, h3, h4, p) {
margin: 0;
}
#page-aio2 a { color: inherit; }
/* Full-bleed helper: escape the 1200px content column to the viewport edge.
Used by the hero video band and the bottom decoration. */
#page-aio2 .aio2-bleed {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
/* ZOOM COMPENSATION (pairs with `html { zoom: 1.25 }` in styles.css)
Same breakpoint and same /1.25 treatment as the 100svh → 80svh compensations in
home.css / about.css / pages.css. Root zoom does NOT scale viewport units, so an
uncompensated 100vw resolves to the REAL viewport width while the layout viewport
is only 1/1.25 of it — full-bleed blocks then overflow by 25% and force a
horizontal scrollbar (measured: hero 2400px wide in a 1920px viewport, x=-240).
100vw / 1.25 = 80vw; 50vw / 1.25 = 40vw. */
@media (min-width: 1152px) {
#page-aio2 .aio2-bleed {
width: 80vw;
margin-left: calc(50% - 40vw);
margin-right: calc(50% - 40vw);
}
}
/* ----- Dark nav -------------------------------------------------------------
Mirrors the existing page-history dark-hero treatment (about.css:909-930)
rather than inventing a second mechanism. Divergence from history: this page
is dark end-to-end, not just at the hero, so the scrolled state stays dark
instead of flipping to the light backdrop. */
body.page-template-page-ai-seo .nav {
position: fixed;
width: 100%;
background-color: transparent;
border-bottom-color: transparent;
}
/* .recruit excluded — self-contained white pill that owns its --ink text (pages.css) */
body.page-template-page-ai-seo .nav .brand,
body.page-template-page-ai-seo .nav .nav__menu a,
body.page-template-page-ai-seo .nav .mobile-toggle {
color: rgba(255, 255, 255, .9);
}
body.page-template-page-ai-seo .nav .brand::after {
color: rgba(255, 255, 255, .9);
}
body.page-template-page-ai-seo .nav .brand img {
filter: brightness(0) invert(1);
}
body.page-template-page-ai-seo .nav.is-scrolled {
background-color: rgba(14, 14, 14, .88);
-webkit-backdrop-filter: saturate(1.4) blur(10px);
backdrop-filter: saturate(1.4) blur(10px);
}
/* The mega panel and the mobile drawer are light surfaces — restore dark type
inside them so the inverted nav colours above don't bleed into the dropdown.
Both states must be restated here: the generic `.nav.nav--drawer-open` rule in
styles.css is (0,2,0) and loses to the `body.page-template-page-ai-seo .nav`
rules above, so without this the bar stays dark above a white drawer. */
body.page-template-page-ai-seo .nav.nav--mega-open,
body.page-template-page-ai-seo .nav.nav--drawer-open {
background-color: #fff;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
body.page-template-page-ai-seo .nav.nav--mega-open .brand,
body.page-template-page-ai-seo .nav.nav--mega-open .nav__menu a,
body.page-template-page-ai-seo .nav.nav--mega-open .mobile-toggle,
body.page-template-page-ai-seo .nav.nav--drawer-open .brand,
body.page-template-page-ai-seo .nav.nav--drawer-open .mobile-toggle {
color: var(--ink-2);
}
body.page-template-page-ai-seo .nav.nav--mega-open .brand::after,
body.page-template-page-ai-seo .nav.nav--drawer-open .brand::after {
color: var(--accent);
}
body.page-template-page-ai-seo .nav.nav--mega-open .brand img,
body.page-template-page-ai-seo .nav.nav--drawer-open .brand img {
filter: none;
}
/* ----- Labelled placeholder -------------------------------------------------
Shared by every section for art that has no asset yet. Deliberately NOT the
theme's global `.ph` — that carries a light --placeholder fill, a light
border and a dark diagonal hatch, all of which read as a rendering bug on a
#0e0e0e page. Caller sets the ratio inline:
Swapping a placeholder for a real ![]()
must not change layout, so the box
is sized by aspect-ratio, exactly as the image will be. */
#page-aio2 .aio2-ph {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background-color: #141414;
border: 1px dashed var(--aio-line);
border-radius: var(--aio-radius);
overflow: hidden;
}
#page-aio2 .aio2-ph::before {
/* Faint diagonal hatch, light-on-dark, so a placeholder never reads as a
styled empty card. */
content: '';
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
135deg,
transparent 0 14px,
rgba(255, 255, 255, .03) 14px 15px
);
}
#page-aio2 .aio2-ph::after {
content: attr(data-ph-label);
position: relative;
padding: 0 12px;
font-family: var(--aio-f-mono);
font-size: 12px;
line-height: 1.4;
letter-spacing: .04em;
text-align: center;
color: var(--ink-4);
overflow-wrap: anywhere;
}
/* ----- Uniform section rhythm ----------------------------------------------
The Figma comp gave every seam its own spacer frame (147/180/236/244/247/344
desktop), which read as arbitrary. One token now owns the gap BETWEEN every
section; each section supplies only the gap BELOW itself.
The section files' own bottom spacing is zeroed here rather than edited in
place — ID specificity (0,1,1,0) beats their class rules regardless of load
order, which is what makes a single override point possible.
The stage/cases partials used to emit `style="margin-bottom:Npx"` inline;
those were removed, since no CSS rule can outrank an inline style.
.aio2-hero is excluded on desktop — .aio2-stats overlaps it by -561px by
design, so giving the hero a bottom gap would push that overlap off. */
#page-aio2 {
--aio-section-gap: 240px;
}
#page-aio2 > .aio2-stats,
#page-aio2 > .aio2-statement,
#page-aio2 > .aio2-process,
#page-aio2 > .aio2-stage,
#page-aio2 > .aio2-cases,
#page-aio2 > .aio2-faq {
margin-bottom: var(--aio-section-gap);
padding-bottom: 0;
}
#page-aio2 > .cta-band {
margin-top: 0;
}
@media (max-width: 768px) {
#page-aio2 {
--aio-section-gap: 100px;
}
/* No overlap at this width — but the hero does NOT join the section rhythm.
On the 375 frame the stat cards sit right under the hero band (the video
ends y=11770.1, the 3 BOX frame starts y=11776), so this one boundary is
6px, not --aio-section-gap. Desktop still overlaps them via the -561px pull
on .aio2-stats, so the two viewports agree that these read as one unit. */
#page-aio2 > .aio2-hero {
margin-bottom: 6px;
}
}
/* ----- Reduced motion -------------------------------------------------------
Page-wide backstop. The stats3 effects also carry their own reduced-motion
rules in aio-hero-stats.css; this covers anything added later. */
@media (prefers-reduced-motion: reduce) {
#page-aio2 *,
#page-aio2 *::before,
#page-aio2 *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}