/* ========================================================================= AlexDesigns — supplemental styles Only what theme.json can't express. Tokens come from the generated --wp--preset--* custom properties (color / font-family / spacing). Brand rule: blue = primary/motion, teal = AI only, navy/paper = surfaces. ========================================================================= */ /* Sticky-header scroll offset: anchor-link navigation lands below the header. Measured from the rendered header: 0.7rem×2 padding + ~28px content ≈ 50px; 64px adds breathing room so the first line of the target is never clipped. */ html { scroll-padding-top: 64px; } :root { --ad-line: 1px solid var(--wp--preset--color--line); --ad-line-soft: 1px solid var(--wp--preset--color--line-soft); --ad-navy-border: 1px solid var(--wp--preset--color--navy-border); --ad-ease: 180ms ease; /* DESIGN-STANDARDS spacing scale (one token set, applied site-wide). */ --ad-section-y: clamp(32px, 3vw, 48px); --section-py: var(--ad-section-y); --block-gap: 24px; --head-gap: 14px; --eyebrow-gap: 8px; --col-gap: 48px; /* Technology badge / pill tokens (see §3d, DESIGN-AUDIT.md). */ --ad-badge-pad: 0.375rem 0.75rem; /* 6px 12px */ --ad-badge-radius: 999px; --ad-badge-font: 0.78rem; /* ≈12.5px */ --ad-badge-feat-bg: #ECFBF8; --ad-badge-feat-color: #0B3F39; --ad-badge-feat-border: #9BE7DC; /* 2026-07-10 (Alex's sitewide button request): "slightly rounded corners and a little bit of raised bevel — flat but still raised and clean, so you can tell they're actually buttons." Every real button on the site had border-radius:2px (near-sharp) and box-shadow:none (measured live, not assumed) — completely flush with the page, no tactile cue at all. Shared tokens so every button uses the identical treatment, not a dozen near-duplicate hand-tuned shadows: --ad-btn-shadow is a soft outer shadow (the "raised off the page" read) plus a faint inset top highlight (the "bevel" — a sliver of lighter edge along the top, like light catching a slightly domed surface) without going skeuomorphic/gradient-heavy. --ad-btn-shadow-hover deepens the outer shadow on hover, paired with each button's own existing hover lift (translateY) where already present. */ --ad-btn-radius: 8px; --ad-btn-shadow: 0 1px 2px rgba(11, 18, 32, 0.14), 0 1px 0 0 rgba(255, 255, 255, 0.22) inset; --ad-btn-shadow-hover: 0 4px 10px rgba(11, 18, 32, 0.18), 0 1px 0 0 rgba(255, 255, 255, 0.22) inset; } @media (max-width: 781px) { :root { --ad-section-y: 32px; --section-py: 32px; --block-gap: 20px; } html { scroll-padding-top: 52px; } /* 0.45rem×2 padding + ~28px content */ } /* ----- Base niceties --------------------------------------------------- */ body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } :where(a) { transition: color var(--ad-ease), border-color var(--ad-ease); } /* Headings break only at word boundaries — never mid-word, never hyphenated. text-wrap:balance evens out the lines and prevents a lone orphan word (gracefully ignored where unsupported). */ :where(h1, h2, h3), .wp-block-heading { overflow-wrap: break-word; word-break: normal; hyphens: none; text-wrap: balance; } /* Body copy: prevent single-word orphans on the last line (no effect where unsupported). */ :where(.ad-section p, main p) { text-wrap: pretty; } /* Visible focus everywhere (a11y). */ :where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; border-radius: 2px; } /* ----- Eyebrow --------------------------------------------------------- 2026-07-09 (Item B1, sitewide typography pass): unified to MATCH .oi-hero-eyebrow__topic (the OI hero eyebrow, later in this file) exactly — same display font-family, 700 weight, 1.1 line-height, -0.02em tracking, primary color, no uppercase transform — EXCEPT font-size, which is 25% smaller than the reference's own calc(display/2): calc(display / 2 * 0.75) = display * 0.375. Exact values at the display token's 3.6rem base: reference 1.8rem (28.8px), this 1.35rem (21.6px); with the token's fluid range (2.15–4rem): reference 1.075–2rem, this 0.80625–1.5rem. Replaces the previous mono/0.75rem/uppercase/0.16em/muted treatment. One shared rule — no per-page overrides. The existing color-modifier classes below (--warm/--teal/--on-navy) and the dark-section overrides (.ad-dark .ad-eyebrow, .ad-bg-navy .ad-eyebrow) still win on color, unchanged — light-on-navy sections keep their legible eyebrow color. text-transform: none is explicit (not just omitted) so nothing upstream can leave uppercase applied. */ .ad-eyebrow { font-family: var(--wp--preset--font-family--display); font-size: calc(var(--wp--preset--font-size--display) * 0.375); letter-spacing: -0.02em; text-transform: none; color: var(--wp--preset--color--primary); font-weight: 700; line-height: 1.1; } .ad-eyebrow--warm { color: var(--wp--preset--color--accent-warm); } .ad-eyebrow--teal { color: var(--wp--preset--color--accent-teal); } .ad-eyebrow--on-navy { color: var(--wp--preset--color--mono-on-navy); } /* Eyebrow with a leading 26x1px rule. */ .ad-eyebrow--ruled { display: inline-flex; align-items: center; gap: 0.75rem; } .ad-eyebrow--ruled::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.6; flex: none; } /* ----- Visible breadcrumb trail (Task 1, structural — reuses --muted/--primary/--ink only) --- */ .ad-breadcrumb { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--eyebrow); color: var(--wp--preset--color--muted); max-width: var(--wp--style--global--wide-size); margin-inline: auto; padding: 1rem clamp(22px, 5vw, 48px) 0; } .ad-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; gap: 0.4rem; } .ad-breadcrumb li { display: flex; align-items: center; gap: 0.4rem; } .ad-breadcrumb a { color: var(--wp--preset--color--muted); text-decoration: none; border-bottom: 1px solid transparent; } .ad-breadcrumb a:hover { color: var(--wp--preset--color--primary); border-bottom-color: var(--wp--preset--color--primary); } .ad-breadcrumb__current { color: var(--wp--preset--color--ink); font-weight: 600; } .ad-breadcrumb__sep { opacity: 0.5; } /* OI breadcrumb context override -- templates/oi-page.html places .ad-breadcrumb inside .oi-breadcrumb-wrap (2026-07-09, feature/oi-overview-hero-rail-refinements: moved out of .oi-hero-wrap /
entirely, to a template-level position before
, matching single.html/page.html's real convention -- see the template's own comment for the full "excessive gap above the breadcrumb" root-cause account). .oi-breadcrumb-wrap is ITSELF already a WordPress "wide"-constrained, auto-centered group (needed so the breadcrumb's left edge matches the content column), so .ad-breadcrumb's own max-width+margin-inline:auto above (load-bearing on single.html/page.html, which render breadcrumbs with NO wrapper at all) would double-constrain here exactly like it did inside the old .oi-hero-wrap (D8) -- same fix, renamed selector: neutralize the breadcrumb's own centering, let the wrapper be the only thing controlling width/position. Scoped to this one context; every other template's breadcrumb (no wrapper) is untouched. */ /* 2026-07-09 (Item B2): padding-inline: 0 added to this override. Measured live (Playwright, ol text edge, not the element box): on how-we-work/single.html (no wrapper), .ad-breadcrumb's own content-box max-width + auto-margin + clamp() padding math lands the breadcrumb TEXT exactly at the wide/logo edge (100px at 1440w, 22px at 390w) — that's the canonical placement. Inside .oi-breadcrumb-wrap the wrapper already provides that inset, so the component's own clamp() padding-inline double-counted and pushed the text 22-48px right of the logo/H1 (bcText=148 vs logo=100 at 1440w). The prior sweep missed it by measuring the element box edge, which the wrapper aligns, instead of the text edge, which the padding offsets. Top padding (1rem) is kept — that vertical gap matches every other template. */ .oi-breadcrumb-wrap .ad-breadcrumb { max-width: none; margin-inline: 0; padding-inline: 0; } /* 2026-07-09 -- real fix for the width-dependent breadcrumb detachment reported after the D12/ D13 passes (both only checked 375/390/1024/1280/1424px; the bug only shows above ~1336px). ROOT CAUSE, confirmed by sweeping every 40px from 320px to 1920px and comparing against the header logo (the site's actual left-edge reference, not just the H1): .oi-breadcrumb-wrap's OWN `align="wide"` never centers it at all, because WordPress's auto-generated ".is-layout-constrained > .alignwide { max-width: ... }" rule only fires when the block's PARENT carries `is-layout-constrained` -- .oi-hero-grid's parent is
, which does; this wrapper's parent is the bare template root, which doesn't. So .oi-breadcrumb-wrap silently rendered full-bleed (rect.left === 0) the whole time, with ONLY its has-global-padding clamp(22px,5vw,48px) padding holding the breadcrumb text in from the edge -- that padding caps at 48px and stops growing, while the real wide-aligned content (H1, logo) keeps growing its inset past ~1336px viewport (max-width:1240px + true auto-centering). Below 1336px the two formulas coincidentally produce the same numbers (both bottom out at 48px), which is exactly why every prior pass's 5-checkpoint sweep (375/390/1024/1280/1424, all under 1336px) reported it fixed. FIX: give the wrapper the real centering math directly -- NOT a hand-rolled duplicate: width: calc(100% - 2 * clamp(...)) + max-width:wideSize + margin:auto is the exact formula this codebase already uses for other elements outside a constrained-layout context, so this reuses it rather than inventing a third variant. padding is explicitly zeroed since the width formula does the insetting now -- leaving has-global-padding's own padding active would double-count it. Verified: diff between this wrapper's rendered left edge and the H1/ logo's left edge is 0px at every 40px step from 320px to 1920px, not just the 5 checkpoints. */ .oi-breadcrumb-wrap { width: calc(100% - 2 * clamp(22px, 5vw, 48px)); max-width: var(--wp--style--global--wide-size); margin: 0 auto; padding: 0; box-sizing: border-box; } /* Below ~480px, "Home / Optimization Intelligence / [Topic Label]" cannot fit on one line at any readable font-size for the longer topic labels (e.g. "Conversion Rate Optimization", "AI Marketing Systems") -- measured: ~65 characters needed vs. ~331px/12px-mono available at 375px, no font-size reduction gets there without going illegibly small. Drop the middle "Optimization Intelligence" crumb + its separator at these widths -- that context is already shown one section above in the sticky .oi-topnav dropdown, so nothing is lost, and "Home / [Topic]" always fits on one line. :not(:last-child) so this never touches the OI hub's own 2-item breadcrumb ("Home / Optimization Intelligence" -- there, item 2 IS the last item, the current page, and must stay). Flagged to Alex as a design call, not silently decided -- see docs/DECISIONS.md D8. */ @media (max-width: 479px) { .oi-breadcrumb-wrap .ad-breadcrumb li:nth-child(2):not(:last-child) { display: none; } } /* ----- Sitemap page list (Task 2, structural — reuses --line/--ink/--primary only) ----------- */ .ad-sitemap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } .ad-sitemap-list li { border-bottom: 1px solid var(--wp--preset--color--line); padding-bottom: 0.5rem; } .ad-sitemap-list a { color: var(--wp--preset--color--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } .ad-sitemap-list a:hover { color: var(--wp--preset--color--primary); } .ad-sitemap-list__empty { color: var(--wp--preset--color--muted); border-bottom: none; } @media (min-width: 700px) { .ad-sitemap-list--two-col { grid-template-columns: 1fr 1fr; column-gap: 2rem; } } /* ----- Section rhythm + hairline dividers ------------------------------ */ .ad-section { padding-block: var(--ad-section-y); } .ad-section--tight { padding-block: clamp(16px, 1.8vw, 24px); } /* wwd-why bottom and wwd-caps top sit closer together */ .wwd-why { padding-bottom: clamp(16px, 1.8vw, 24px); } .wwd-caps { padding-top: clamp(16px, 1.8vw, 24px); } /* wwd-why: tighten card margin so cards sit closer to the intro text */ .wwd-why .wwd-cards { margin-top: 1rem; } .ad-divide-top { border-top: var(--ad-line); } .ad-divide-bottom { border-bottom: var(--ad-line); } /* ----- Left-edge alignment (ui-standards §3) --------------------------- */ /* Constrained sections live inside
which doesn't center them — they fill full
width. Center them at wideSize (1240px) so their left edge matches the logo's left edge. AlignFull/alignwide sections are excluded because they intentionally escape to full width. The FAQ block is raw PHP (no is-layout-constrained) and gets the same treatment via .ad-faq below. */ .wp-block-group.is-layout-constrained.ad-section:not(.alignfull):not(.alignwide) { max-width: var(--wp--style--global--wide-size); margin-inline: auto; } /* FAQ is raw PHP (no is-layout-constrained so WP doesn't add the body padding). Match the section content left edge: same max-width + same horizontal padding. */ .ad-faq { max-width: var(--wp--style--global--wide-size); margin-inline: auto; padding-inline: clamp(22px, 5vw, 48px); } /* Override WP's child-centering (margin-inline:auto at contentSize 720px) so all text children start at the section's left edge = logo's left edge. Specificity (0,3,0,0) beats WP's generated rule (0,1–2,0,0). */ .wp-block-group.is-layout-constrained.ad-section > :not(.alignfull):not(.alignwide) { margin-left: 0 !important; } /* Full-bleed (alignfull) sections have WP's body padding (clamp(22px,5vw,48px)) but no wideSize centering offset. Expand padding-inline to absorb both so content starts at the same left edge as in constrained sections: max(0,(100vw−wideSize)/2) + bodyPad. Specificity (0,4,0,0) + !important beats WP's has-global-padding (0,1,0,0). */ .wp-block-group.alignfull.is-layout-constrained.ad-section { padding-inline: calc(max(0px, (100vw - var(--wp--style--global--wide-size)) / 2) + clamp(22px, 5vw, 48px)) !important; } /* ----- Text link with underline that warms on hover ------------------- */ .ad-textlink { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--wp--preset--color--line); padding-bottom: 2px; } .ad-textlink:hover { border-bottom-color: var(--wp--preset--color--primary); } /* ----- Cards ----------------------------------------------------------- */ .ad-card { background: var(--wp--preset--color--card); border: var(--ad-line); border-radius: var(--wp--custom--radius--card); box-shadow: var(--wp--preset--shadow--whisper); } .ad-card--pad { padding: clamp(1.25rem, 3vw, 2rem); } /* ----- Pill chips (check + label) -------------------------------------- */ .ad-chips { display: flex; flex-wrap: wrap; gap: 0.625rem; } .ad-chip { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--wp--preset--color--card); border: var(--ad-line); border-radius: 2px; padding: 0.5rem 0.8rem; font-size: 1rem; font-weight: 500; color: var(--wp--preset--color--ink); } .ad-chip svg { width: 16px; height: 16px; color: var(--wp--preset--color--primary); flex: none; } /* ----- Technology badge pills (canonical two-variant system, §3d) ------ .ad-badge-group — wrapping container (tinted card, max-width constrained) .ad-badge — base: white pill, gray outline (standard tools) .ad-badge--feat — featured: teal fill, solid teal border (AI platforms) .ad-badge--bespoke — bespoke: teal fill, dashed teal border (custom/proprietary) These replace all inline cap-badges styles sitewide. */ .ad-badge-inner { display: flex; flex-wrap: wrap; gap: 0.44rem; } .ad-badge-group { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: 12px; padding: 1rem; margin-top: 1.5rem; max-width: 62rem; box-sizing: border-box; } .ad-badge { display: inline-block; padding: var(--ad-badge-pad); border-radius: var(--ad-badge-radius); background: var(--wp--preset--color--card); border: 1px solid var(--wp--preset--color--line); font-size: var(--ad-badge-font); font-weight: 500; color: var(--wp--preset--color--ink); white-space: nowrap; } .ad-badge--feat { background: var(--ad-badge-feat-bg); border-color: var(--ad-badge-feat-border); color: var(--ad-badge-feat-color); } .ad-badge--bespoke { background: var(--ad-badge-feat-bg); border: 1px dashed var(--ad-badge-feat-border); color: var(--ad-badge-feat-color); } /* ----- Capability "includes" chips (WHAT YOU GET sections) ------------- */ .ad-incl-group { background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--card-lg); padding: 1.4rem 1.5rem; margin-top: 1.5rem; max-width: 62rem; } .ad-incl-label { font-family: var(--wp--preset--font-family--mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0 0 0.75rem; } .ad-incl-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .ad-incl-chip { display: inline-block; font-size: 0.82rem; font-weight: 500; padding: 0.38rem 0.8rem; border-radius: 999px; background: var(--wp--preset--color--surface); color: var(--wp--preset--color--slate); border: 1px solid var(--wp--preset--color--line); } /* Ecosystem grid (wwd-ecosystem.php) */ .wwd-badges { box-sizing: border-box; margin-top: 1.75rem; } .ad-eco-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; } .ad-eco-cat { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: 12px; padding: 1rem; } .ad-eco-label { font-size: 0.84rem; font-weight: 700; margin: 0 0 0.75rem; color: var(--wp--preset--color--ink); } .ad-eco-chips { display: flex; flex-wrap: wrap; gap: 0.44rem; } /* --muted (#667080) is 4.41:1 on this card's --surface background — just under WCAG AA's 4.5:1 for small text. --slate reads slightly darker but is the theme's next token up and passes with real margin (7.9:1) — same fix pattern as the figure-CSS contrast pass. */ .ad-badge-note { font-size: 0.69rem; color: var(--wp--preset--color--slate); margin-top: 0.62rem; line-height: 1.45; } /* Cap page sections: What You Get, One Capability, Related Reading */ /* .cap-twocol — What You Get + The Technology side-by-side row */ .cap-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap, 48px); align-items: start; } .cap-twocol .ad-eyebrow { margin: 0; } .cap-twocol h2.wp-block-heading { margin-bottom: 0.5rem; } .cap-twocol p { margin: 0.75rem 0 0; } @media (max-width: 768px) { .cap-twocol { grid-template-columns: 1fr; gap: 0; } .cap-twocol__col + .cap-twocol__col { border-top: var(--ad-line); padding-top: var(--ad-section-y); margin-top: var(--ad-section-y); } } /* .cap-includes — 5 standard cap pages */ .cap-includes .wwd-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; max-width: 62rem; } .cap-includes .wwd-chip { font-size: .82rem; font-weight: 500; padding: .4rem .85rem; border-radius: 999px; background: var(--wp--preset--color--surface); color: var(--wp--preset--color--slate); border: 1px solid var(--wp--preset--color--line); } .cap-includes .wwd-chips__lbl { font-family: var(--wp--preset--font-family--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--muted); } .cap-includes .cap-incard { background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--card-lg); padding: 1.4rem 1.5rem; margin-top: 1.5rem; max-width: 62rem; } .cap-includes .cap-incard .wwd-chips { margin-top: .75rem; } /* .capx-incl — experimentation + ai-marketing cap pages */ .capx-incl { background: var(--wp--preset--color--paper); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--card-lg); padding: 1.4rem 1.5rem; margin-top: 1.5rem; max-width: 62rem; } .capx-incl .capx-lbl { font-family: var(--wp--preset--font-family--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0 0 .75rem; } .capx-incl .capx-chips { display: flex; flex-wrap: wrap; gap: .5rem; } .capx-incl .capx-chip, .capx-incl .wwd-chip { font-size: .82rem; font-weight: 500; padding: .36rem .8rem; border-radius: 999px; background: var(--wp--preset--color--surface); color: var(--wp--preset--color--slate); border: 1px solid var(--wp--preset--color--line); } /* .cap-xlink — related capabilities grid (5 standard pages) */ .cap-xlink .cap-xgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-top: 1.75rem; } .cap-xlink .cap-xcard { display: flex; flex-direction: column; gap: .4rem; background: var(--wp--preset--color--card); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--card-lg); padding: 1.25rem 1.35rem; text-decoration: none; transition: border-color .15s ease, transform .15s ease; } .cap-xlink .cap-xcard:hover { border-color: var(--wp--preset--color--primary); transform: translateY(-2px); } .cap-xlink .cap-xcard__title { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 1.05rem; color: var(--wp--preset--color--ink); } .cap-xlink .cap-xcard__title svg { width: 18px; height: 18px; color: var(--wp--preset--color--primary); flex: none; } .cap-xlink .cap-xcard__desc { font-size: .9rem; line-height: 1.5; color: var(--wp--preset--color--muted); } /* .capx-xgrid — related capabilities grid (experimentation + ai-marketing) */ .capx-xgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.75rem; } .capx-xcard { display: block; background: var(--wp--preset--color--card); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--card-lg); padding: 1.25rem 1.35rem; text-decoration: none; transition: border-color .15s ease, transform .15s ease; } .capx-xcard:hover { border-color: var(--wp--preset--color--primary); transform: translateY(-2px); } .capx-xcard__top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .capx-xcard__title { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.05rem; color: var(--wp--preset--color--ink); } .capx-xcard__arrow { flex: none; color: var(--wp--preset--color--primary); } .capx-xcard__desc { margin: .4rem 0 0; font-size: .88rem; line-height: 1.45; color: var(--wp--preset--color--muted); } /* .cap-reading — related reading list (5 standard pages) */ .cap-reading .cap-readlist { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: 62rem; } .cap-reading .cap-readlist li { border-top: 1px solid var(--wp--preset--color--line); } .cap-reading .cap-readlist li:last-child { border-bottom: 1px solid var(--wp--preset--color--line); } .cap-reading .cap-readlist a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem .25rem; text-decoration: none; color: var(--wp--preset--color--ink); font-weight: 600; font-size: 1.05rem; transition: color .15s ease; } .cap-reading .cap-readlist a:hover { color: var(--wp--preset--color--primary); } .cap-reading .cap-readlist svg { width: 18px; height: 18px; color: var(--wp--preset--color--primary); flex: none; } /* .capx-read — related reading cards (experimentation + ai-marketing) */ .capx-read { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-top: 1.5rem; } .capx-readcard { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--wp--preset--color--card); border: 1px solid var(--wp--preset--color--line); border-radius: 14px; padding: 1.25rem 1.4rem; text-decoration: none; transition: border-color .15s ease; } .capx-readcard:hover { border-color: var(--wp--preset--color--primary); } .capx-readcard span { font-weight: 600; color: var(--wp--preset--color--ink); font-size: 1.02rem; } .capx-readcard svg { flex: none; color: var(--wp--preset--color--primary); } /* .capx-quote — testimonial in dark section (experimentation) */ .capx-quote { margin: 2.25rem 0 0; max-width: 48rem; border-left: 3px solid var(--wp--preset--color--teal-on-navy); padding: 0.25rem 0 0.25rem 1.25rem; } .capx-quote blockquote { margin: 0; font-size: 1.15rem; line-height: 1.5; color: var(--wp--preset--color--light-text); } .capx-quote figcaption { margin-top: 0.65rem; font-family: var(--wp--preset--font-family--mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--wp--preset--color--muted-on-navy); text-transform: uppercase; } /* Trust row (icon + label, dot dividers) */ .ad-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; color: var(--wp--preset--color--slate); font-size: 1rem; } .ad-trust__item { display: inline-flex; align-items: center; gap: 0.5rem; } .ad-trust__item svg { width: 18px; height: 18px; color: var(--wp--preset--color--muted); } /* ----- Hero experiment card (illustrative) ----------------------------- */ .ad-exp { padding: 1.25rem 1.4rem; } .ad-exp__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .ad-exp__label { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; font-family: var(--wp--preset--font-family--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--muted); } /* AI teal for small text-on-light is darkened to clear WCAG AA 4.5:1 (decorative teal stays bright). */ .ad-tag-illustrative { white-space: nowrap; font-family: var(--wp--preset--font-family--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: #0A7060; background: color-mix(in srgb, var(--wp--preset--color--accent-teal) 12%, transparent); padding: 0.2rem 0.5rem; border-radius: 2px; } .ad-exp__row { font-size: 1rem; color: var(--wp--preset--color--muted); margin-bottom: 1rem; } .ad-meter { margin-bottom: 0.85rem; } .ad-meter__top { display: flex; justify-content: space-between; font-size: 1rem; margin-bottom: 0.4rem; } .ad-meter__name { font-weight: 600; color: var(--wp--preset--color--ink); } .ad-meter__val { font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--slate); } .ad-meter__track { height: 8px; border-radius: 999px; background: var(--wp--preset--color--surface); overflow: hidden; } .ad-meter__fill { height: 100%; border-radius: 999px; background: var(--wp--preset--color--muted); } .ad-meter__fill--primary { background: var(--wp--preset--color--primary); } .ad-exp__foot { display: flex; align-items: baseline; gap: 0.6rem; border-top: var(--ad-line-soft); padding-top: 1rem; margin-top: 0.25rem; } .ad-exp__stat { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 2rem; color: var(--wp--preset--color--accent-warm); white-space: nowrap; flex: none; } .ad-exp__statnote { font-size: 0.85rem; color: var(--wp--preset--color--muted); } /* ----- Stat band (track record) ---------------------------------------- */ .ad-statband { display: grid; grid-template-columns: repeat(4, 1fr); border-block: var(--ad-line); } .ad-statband__cell { padding: 1.5rem 1rem; } .ad-statband__cell + .ad-statband__cell { border-left: var(--ad-line); } .ad-statband__num { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(2rem, 5vw, 2.875rem); color: var(--wp--preset--color--ink); line-height: 1; } .ad-statband__num .ad-plus { color: var(--wp--preset--color--accent-warm); } .ad-statband__label { font-size: 0.9rem; color: var(--wp--preset--color--muted); margin-top: 0.5rem; } @media (max-width: 781px) { .ad-statband { grid-template-columns: repeat(2, 1fr); } .ad-statband__cell:nth-child(3) { border-left: 0; } .ad-statband__cell:nth-child(n+3) { border-top: var(--ad-line); } } /* ----- Author bio hero (templates/author.html) -------------------------- */ .ad-author-bio__title { font-size: var(--wp--preset--font-size--medium); color: var(--wp--preset--color--slate); margin-top: 0.5rem; } .ad-author-bio__title a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; } .ad-author-bio__credentials { font-size: var(--wp--preset--font-size--medium); color: var(--wp--preset--color--muted); margin-top: 0.6rem; max-width: 640px; } /* ----- Capability rows (link list with trailing arrow, hover) ---------- */ .ad-cap { display: block; text-decoration: none; padding: 1.25rem 0; border-top: var(--ad-line-soft); } .ad-cap:first-child { border-top: 0; } .ad-cap__head { display: flex; align-items: center; gap: 0.7rem; } .ad-cap__icon { width: 24px; height: 24px; color: var(--wp--preset--color--primary); flex: none; } .ad-cap__icon--ai { color: var(--wp--preset--color--accent-teal); } .ad-cap__title { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.19rem; color: var(--wp--preset--color--ink); margin: 0; } .ad-cap__arrow { margin-left: auto; width: 18px; height: 18px; color: var(--wp--preset--color--muted); transition: transform var(--ad-ease), color var(--ad-ease); } .ad-cap__desc { color: var(--wp--preset--color--muted); font-size: 1rem; margin: 0.4rem 0 0; padding-left: calc(24px + 0.7rem); } .ad-cap:hover .ad-cap__title { color: var(--wp--preset--color--primary); } .ad-cap:hover .ad-cap__arrow { transform: translate(2px, -2px); color: var(--wp--preset--color--primary); } /* ----- Contrast card (one-off vs ongoing) ------------------------------ */ .ad-contrast { display: grid; grid-template-columns: 1fr 1fr; } .ad-contrast__col { padding: clamp(1.1rem, 3vw, 1.75rem); } .ad-contrast__col:first-child { border-right: var(--ad-line); } .ad-contrast__head { display: flex; align-items: center; gap: 0.55rem; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.05rem; color: var(--wp--preset--color--ink); } .ad-contrast__head svg { width: 20px; height: 20px; flex: none; } .ad-contrast__head--no svg { color: var(--wp--preset--color--muted); } .ad-contrast__head--yes svg { color: var(--wp--preset--color--accent-teal); } .ad-contrast__body { color: var(--wp--preset--color--muted); margin-top: 0.6rem; font-size: 1rem; } @media (max-width: 600px) { .ad-contrast { grid-template-columns: 1fr; } .ad-contrast__col:first-child { border-right: 0; border-bottom: var(--ad-line); } } /* ----- Fit check checklists -------------------------------------------- */ .ad-fit { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; } .ad-fit li { display: grid; grid-template-columns: 20px 1fr; gap: 0.6rem; color: var(--wp--preset--color--slate); font-size: 1rem; } .ad-fit svg { width: 18px; height: 18px; margin-top: 2px; } .ad-fit--good svg { color: var(--wp--preset--color--accent-teal); } .ad-fit--not svg { color: var(--wp--preset--color--muted); } /* ----- Dark sections (framework, footer) ------------------------------- */ .ad-dark { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--light-text); } .ad-dark--deep { background: var(--wp--preset--color--navy-deep); } .ad-dark :where(h1, h2, h3) { color: #fff; } .ad-dark a { color: var(--wp--preset--color--light-text); } .ad-dark a:hover { color: #fff; } .ad-dark .ad-eyebrow { color: var(--wp--preset--color--mono-on-navy); } /* ----- Pulse dot (Currently) ------------------------------------------- */ .ad-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--wp--preset--color--accent-teal); display: inline-block; } .ad-dot--pulse { animation: ad-pulse 2s ease-in-out infinite; } @keyframes ad-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } } /* Reduced-motion accommodation (deploy-verify QA pass, 2026-07-06) — every other animation in this stylesheet is already gated behind prefers-reduced-motion; this one was the one flagged gap (docs/DEPLOY-AND-PUBLISH-RUNBOOK.md's "Standing status" note). Static dot, full opacity — still conveys "live" via its color/label, just without the motion a reduced-motion user asked to avoid. */ @media (prefers-reduced-motion: reduce) { .ad-dot--pulse { animation: none; opacity: 1; transform: none; } } /* ----- Diagrams (flywheel + curve) ------------------------------------- */ .ad-figure { margin: 0; } .ad-figure svg { display: block; width: 100%; height: auto; } .ad-figcaption { font-size: 0.9rem; color: var(--wp--preset--color--muted); margin-top: 0.75rem; } /* Flywheel: circular diagram at every breakpoint (changed 2026-07-06 — was hidden under 640px in favor of a text-only fallback; the SVG scales via width:100%/height:auto and stays within the same 440px cap used on desktop, so it renders at a comparable, legible size on mobile too). .ad-flywheel__stack (below) stays in the HTML as the always-present AEO text mirror per its own docstring, just no longer visually swapped in at narrow widths. */ .ad-flywheel__circle { display: block; } .ad-flywheel__stack { display: none; } /* ----- Contact form ----------------------------------------------------- */ /* Single column, label above each field, ~20px between fields (DESIGN-STANDARDS). */ .ad-form { display: grid; gap: 1.25rem; } .ad-form__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } .ad-field { display: grid; gap: var(--eyebrow-gap, 8px); } /* [hidden] companion: .ad-field's display:grid would otherwise defeat the hidden attribute, so the reveal-on-"Other" field (start-main.php [data-start-other]) rendered on cold load. See docs/ui-standards.md §1 — the specificity rule Check A enforces. */ .ad-field[hidden] { display: none; } .ad-field > label { font-size: 0.92rem; font-weight: 600; color: var(--wp--preset--color--ink); } .ad-field input, .ad-field textarea { font: inherit; color: var(--wp--preset--color--ink); background: var(--wp--preset--color--card); border: 1px solid #E3E8F0; border-radius: 10px; padding: 0.8rem 0.95rem; width: 100%; min-height: 48px; /* subtle inset bevel so each clearly reads as a clickable input */ box-shadow: inset 0 1px 2px rgba(11, 18, 32, 0.05); transition: border-color var(--ad-ease), box-shadow var(--ad-ease); } .ad-field textarea { min-height: 130px; resize: vertical; } .ad-field input::placeholder, .ad-field textarea::placeholder { color: var(--wp--preset--color--muted); } .ad-field input:hover, .ad-field textarea:hover { border-color: #CFD8E3; } .ad-field input:focus, .ad-field textarea:focus { outline: none; border-color: var(--wp--preset--color--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent), inset 0 1px 2px rgba(11, 18, 32, 0.04); } .ad-field--error input, .ad-field--error textarea { border-color: var(--wp--preset--color--accent-warm); } .ad-field__error { font-size: 0.82rem; color: var(--wp--preset--color--accent-warm); } .ad-form__note { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; color: var(--wp--preset--color--muted); } .ad-form__note svg { width: 15px; height: 15px; } /* Honeypot — visually hidden but present in DOM (no display:none so bots fill it). */ .ad-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .ad-form__success { background: color-mix(in srgb, var(--wp--preset--color--accent-teal) 10%, var(--wp--preset--color--paper)); border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-teal) 35%, transparent); border-radius: 4px; padding: 1rem 1.15rem; color: var(--wp--preset--color--ink); } /* "What happens next" numbered steps */ .ad-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; } .ad-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 0.75rem; } .ad-steps__n { width: 24px; height: 24px; border-radius: 999px; background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent); color: var(--wp--preset--color--primary); font-size: 0.8rem; font-weight: 600; display: grid; place-items: center; } .ad-steps__t { font-weight: 600; color: var(--wp--preset--color--ink); } .ad-steps__d { color: var(--wp--preset--color--slate); font-size: 1rem; margin-top: 0.15rem; } /* ----- CTA panel (solid blue) ------------------------------------------ */ .ad-cta { background: #2353D4; background: var(--wp--preset--color--primary); border-radius: 4px; color: #fff; } .ad-cta :where(h2) { color: #fff; } .ad-cta__sub { color: var(--wp--preset--color--cta-subcopy); } .ad-cta__note { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--wp--preset--color--cta-subcopy); font-size: 0.9rem; } .ad-cta__note svg { width: 15px; height: 15px; } /* 2026-07-10 (Alex's sitewide button request): box-shadow bevel added directly here — radius already comes from theme.json's styles.elements.button.border.radius (now 8px, was 2px), but box-shadow isn't reliably portable through theme.json's element styles across WP versions, so it's set explicitly for the one real class every core button block renders (.wp-block-button__link), covering every wp:buttons instance sitewide in one rule. */ .wp-block-button__link { box-shadow: var(--ad-btn-shadow); transition: background var(--ad-ease), color var(--ad-ease), box-shadow var(--ad-ease), transform var(--ad-ease); } .wp-block-button__link:hover { box-shadow: var(--ad-btn-shadow-hover); transform: translateY(-1px); } .wp-block-button__link:active { box-shadow: var(--ad-btn-shadow); transform: translateY(0); } .ad-cta .wp-block-button__link, .ad-cta .ad-btn-invert { background: #fff; color: var(--wp--preset--color--primary); } .ad-cta .wp-block-button__link:hover, .ad-cta .ad-btn-invert:hover { background: #eef1f4; color: var(--wp--preset--color--primary-hover); } /* ----- Article category eyebrow color coding --------------------------- */ .ad-cat { font-family: var(--wp--preset--font-family--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; } .ad-cat a { text-decoration: none; color: var(--wp--preset--color--muted); } .ad-cat a:hover { color: var(--wp--preset--color--ink); } .ad-cat--experimentation { color: var(--wp--preset--color--primary); } .ad-cat--data { color: var(--wp--preset--color--accent-warm); } .ad-cat--ai { color: var(--wp--preset--color--accent-teal); } /* ----- Header / brand / nav -------------------------------------------- */ /* Sticky header: the template-part WRAPPER is the sticky element, because its parent is the full-height .wp-site-blocks. The inner .ad-header can't stick on its own — its containing block (the wrapper) is only header-height, so it unsticks the instant you scroll past it. Pinning the wrapper keeps the nav fixed for the whole page scroll. */ .wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; } .ad-header { backdrop-filter: saturate(140%) blur(10px); background: rgba(248,250,251,0.82) !important; z-index: 50; } /* Desktop header: 3-column grid (logo | nav, centered | search+CTA+hamburger) so the primary nav sits centered in the header instead of clustered against the right edge. Explicit grid-column on each child (not relying on auto-placement) so the layout stays correct on mobile even though .ad-nav-desktop is display:none there (an auto-placed item would otherwise shift .ad-header__right into the empty middle column). !important overrides the block editor's own inline flex layout styles for this specific instance. 2026-07-06 FIX (feat/oi-rail-and-hero, found during this pass's own scroll-gate verification, unrelated to this pass's own changes): the grid rule below had no min-width guard, so it applied at 360px too — even with .ad-nav-desktop hidden, the "auto 1fr auto" track sizing let .ad-header__right's own min-content width push the grid past 360px (Check B: +15px on every page with the standard header, including several this pass never touched). This centering only matters once .ad-nav-desktop is actually visible (>=1002px as of 2026-07-10, see Part H2's own comment near .ad-nav-desktop for why this moved from 783px) — scoping the grid override to that width restores the original, already-correct flex behavior on mobile/tablet. */ @media (min-width: 1002px) { .ad-header__inner.is-layout-flex { display: grid !important; grid-template-columns: auto 1fr auto; align-items: center; } .ad-header__inner > .ad-brand { grid-column: 1; } .ad-header__inner > .ad-nav-desktop { grid-column: 2; justify-self: center; } .ad-header__inner > .ad-header__right { grid-column: 3; } } .ad-brand { min-height: 44px; align-items: center; text-decoration: none; } .ad-brand__mark { line-height: 0; } /* 2026-07-14 (Alex): the "AlexDesigns" wordmark must never wrap to two lines at any width - white-space:nowrap on the site-title block (theme.json sets its font-size/weight; this file is the right place for a plain CSS behavior rule) keeps it on one line even if the header row gets tight; flex-shrink:0 stops the flex layout from compressing the brand box to force a wrap. */ .wp-block-site-title, .wp-block-site-title a { white-space: nowrap; flex-shrink: 0; } /* Header right cluster: search + CTA(s) + hamburger */ .ad-header__right { display: flex; align-items: center; gap: 1.5rem; } .ad-brand a { display: inline-flex; align-items: center; min-height: 44px; } /* 2026-07-10 (Part H2 — nav must never wrap before the mobile breakpoint takes over). Real measurement (Playwright, live nav): the 4-group desktop nav wrapped to 2 lines across the ENTIRE 783-1003px range, not just near a boundary — the deficit between content width and available space was a near-constant ~135-150px through that whole band, not a gradient a pure vw-scaled clamp could close gracefully. Tried compression alone first; closing that full deficit required font-size/padding/gap cuts aggressive enough to start hurting legibility below ~1000px. Final fix is BOTH pieces together: compress moderately (this rule + the .ad-nav__grouphead rule below, 1002-1149px) AND move the desktop-nav/hamburger switchover from 783px to 1002px — exactly the width where the compressed nav genuinely fits on one line, not an arbitrary round number. This is narrower than jumping straight to ~1024px with no compression (which would've pushed a wider band of ordinary laptop widths into the mobile nav for no reason) and doesn't require crushing the label text to the point of hurting readability. See the @media (max-width: 1001px) block further down for the matching switchover. */ .ad-nav-desktop { display: flex; align-items: center; gap: 0.5rem; } /* Measured (Playwright, real content width vs available column width): the deficit causing the wrap is a near-constant ~135-145px across the ENTIRE 783-1100px range, not a gradient that eases as the viewport widens — a fine vw-scaled clamp (tried first) barely closed it. A flat, larger reduction across this whole band is what actually fits; it recovers to full size at 1100px, where the deficit itself resolves on its own (available width outgrows the font-size-clamped nav's max content width). */ @media (min-width: 1002px) and (max-width: 1149px) { /* 2026-07-14 (Alex): gap:0 read as nav links "crammed together with no space between them" - restored a small minimum gap. The 2026-07-14 font-size revert (1.0625rem -> 1rem, see the .ad-nav__grouphead a rule below) narrows every link in this band too, freeing up the room this needed; re-measured (Playwright) at 0.3rem the nav still fits on one line across the full 1002-1149px range - no wrap regression. */ .ad-nav-desktop { gap: 0.3rem; } } /* Nav dropdown groups — desktop: hover/focus-within (or keyboard-toggled .is-open) opens an anchored panel; drawer: the same markup becomes a JS accordion (panel starts [hidden]). The group label stays a real link to the hub page in both variants. 2026-07-10 (Part H1): background/padding/radius moved from the bare `` (below) to THIS wrapper — .ad-nav__grouphead is the real visual pill now, containing both the label link and the caret button, so hover/active backgrounds enclose them as one shape. Previously the background lived only on `.ad-nav-desktop a`, which covers just the label's own padding box — the caret (a sibling