/* ========================================================================== theme.css — homepage-derived theme overlay for the inner pages Loads AFTER site.css and restyles the inner pages to match the homepage: Coastal Calm V2 tokens, light airy header with the consultation button, generous section rhythm with full-bleed sand bands, homepage quote and button treatments, and the universal 9px corner radius. Provisional working styling (Q12/Q13 open). Hand-maintained. ========================================================================== */ :root { --t-blue: #294A52; --t-seaglass-dark: #4F7C78; --t-seaglass-text: #3B625E; /* AA-safe Sea Glass for normal-size text (eyebrows/labels/small links): >=4.5:1 on tint/sand/cream. Buttons/borders/focus/icons/glyphs stay --t-seaglass-dark. */ --t-seaglass-tint: #D3E6E3; --t-sand: #E8DED0; --t-cream: #FBF8F3; --t-terracotta: #B66F52; --t-terracotta-dark: #9C5A2B; /* documented warm text derivative: 5.07 cream, 4.04 sand, 4.14 tint */ --t-charcoal: #303738; --t-radius: 9px; /* Palette conformance (2026-08-30): the base sheet's card-shadow tokens were mixed from #22333A, which is not a Coastal Calm V2 board color. Re-declared here (theme.css loads after site.css, so these win) as Deep Coastal Blue at the same alphas — visually equivalent, and now an alpha variant of an approved color. The fingerprinted base sheet is never edited. */ /* Card depth parity (Matt, 2026-09-01), Home's pair: one tight contact shadow, one wide soft ambient one, Deep Coastal Blue throughout (Comeau / Vercel: layered, one light source, tinted to the ink). The trailing transparent INSET layer gives every rest list the same shape as the pathway hover list, so the rust ring spreads in over the base sheet's 200ms shadow transition instead of snapping (lists with mismatched inset-ness fall back to a discrete change). --shadow-medium is the hover lift in the same shape. */ --shadow-low: 0 1px 2px rgba(41, 74, 82, 0.05), 0 14px 32px -14px rgba(41, 74, 82, 0.18), inset 0 0 0 0 rgba(182, 111, 82, 0); --shadow-medium: 0 4px 14px rgba(41, 74, 82, 0.12), 0 14px 32px -14px rgba(41, 74, 82, 0.18), inset 0 0 0 0 rgba(182, 111, 82, 0); /* Quiet hover (Matt, 2026-09-01): links, dropdown items, the header button and card titles ease over 160ms on the standard curve; the base sheet's reduced-motion rule zeroes it. */ --t-hover-duration: 240ms; /* softened from 160 (Matt, 2026-09-01 evening: gradual, not snapped) */ /* Motion layer tokens (Matt, 2026-09-01), Home's values: NN/g's scroll-fade range is 100-400ms and Material's medium band 250-400ms; the rise sits in the 8-16px band. */ --t-motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --t-reveal-duration: 650ms; /* softened from 400 (2026-09-01 evening) */ --t-reveal-distance: 8px; /* softened from 14: the fade carries the effect, not the movement */ /* Link interaction states (2026-08-30, Matt): the base sheet mixed #17323a / #102830, hand-darkened near-blacks that are not board colors. Re-declared as the board's Sea Glass interactive role — links shift Deep Blue -> Sea Glass on hover (AA 6.41:1 on cream) and return to Deep Blue on press. --action-primary is already on-palette. */ --action-hover: #3B625E; --action-active: #294A52; /* Home chrome parity (Matt, 2026-08-30): the interior container was 66rem with a responsive gutter capping at 2rem (content 992px at 1440) while Home runs a fixed 1200px container with 1.5rem padding (content 1152px) — visibly narrower interior margins. Both tokens pinned to Home's values, so header, breadcrumb, sections, card grids, CTA band (and its container-anchored rings), and footer all share Home's exact 144px side margins at 1440. Home's .final-cta__rings layer moved 62rem → 72rem in the same pass to track the new content width. Prose stays capped at the 68ch reading measure inside the wider column, as on Home. */ --container-standard: 75rem; --gutter: 1.5rem; } /* --- Base ------------------------------------------------------------------ */ /* The decorative ring pseudos (hero crescents, CTA arcs) deliberately hang past the content edge; at mid viewports (~1024) they extended the scrollable area (57px of horizontal scroll, pre-existing — found in the 2026-08-30 chrome-parity pass, and present on Home too). Clip ink overflow instead of letting it scroll; `hidden` first as the fallback for engines without `clip`. Declared on BOTH html and body: in the verifying Chromium, root-level clip alone left the viewport programmatically scrollable (scrollX reached 72 at a 1024 viewport) while the body-level guard pinned scrollX to 0 — the propagation quirk is the reason for the pair. */ html, body { overflow-x: hidden; overflow-x: clip; } /* Home renders with antialiased smoothing (its body sets it); without this the interior pages fall to macOS subpixel AA and the same DM Sans 500 reads visibly heavier — the header-font mismatch Matt flagged 2026-08-30. */ body { -webkit-font-smoothing: antialiased; } /* No synthetic styles (identity rule): missing weights/styles fall back to the nearest real file instead of being faked by the browser. */ html { font-synthesis: none; } /* Emphasis without faux italics: DM Sans has no italic file, so renders as factual emphasis (Semibold), per the identity's emphasis rules. */ em { font-style: normal; font-weight: 600; } body { background: var(--t-cream); color: var(--t-charcoal); font-size: 18px; line-height: 1.62; } /* Body copy is 18px site-wide (Matt, 2026-08-30 — P2 pass). The base sheet sizes running text directly on the elements (`p, li, dd, dt { font-size: var(--type-body) }`, site.css:218-223), so the body declaration above never reached it — interiors silently rendered 16px against Home's 18 for the life of the overlay (the build's widest specificity trap, audit finding 6). The correction lands on the same elements at equal (0,0,1) specificity, later in the cascade. Small-role sizes (footer links, breadcrumbs, card bodies, fact lists) are pinned at item level below so they no longer ride the element default. */ p, li, dd, dt { font-size: 1.125rem; } /* Client-reference downloads and credentials (Matt, 2026-09-15). */ .form-download { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; } .form-download .button { white-space: normal; text-align: center; } .form-download__detail { font-size: 0.875rem; color: var(--t-seaglass-text); } .group-guidelines > li + li { margin-top: 1rem; } .group-agreement { margin-top: clamp(2.5rem, 5vw, 4rem); } .group-agreement > * + * { margin-top: var(--space-sm); } .group-agreement > p, .group-agreement > ul { max-width: var(--measure-default); } .credential-feature { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; gap: 1.5rem; max-width: 46rem; margin-top: 2rem; } .credential-feature > img { width: 100%; height: auto; } #about-why-personal .credential-feature { align-items: start; } @media (min-width: 561px) { /* Offset the seal's transparent inset to align its visible top with the heading. */ #about-why-personal .credential-feature > img { margin-top: -0.625rem; } } .credential-feature__title { margin: 0 0 0.5rem; } .credential-feature p { margin: 0.5rem 0 0; font-size: 1rem; } .credential-feature .credential-feature__date { color: var(--t-seaglass-text); font-size: 0.875rem; } .psychology-today-badge { display: inline-block; max-width: 100%; } .psychology-today-badge img { display: block; width: 186px; max-width: 100%; height: auto; } /* About "Professional profiles" (2026-09-16): a light text-link list of Ashley's directory profiles — two unobtrusive columns on desktop, one on phones. Links keep the base sheet's standard content-link treatment so the group stays lighter than the consultation CTA. */ .profile-links { list-style: none; margin: 1.1rem 0 0; padding: 0; columns: 2; column-gap: 2.5rem; } .profile-links li { margin: 0; padding: 0.28rem 0; break-inside: avoid; } .profile-links li + li { margin-top: 0; } .profile-links .psychology-today-badge { display: block; width: fit-content; margin-top: 0.75rem; } @media (max-width: 48.75rem) { /* 780px at the default text size (rem since 2026-10-20) */ .profile-links { columns: 1; } } /* On-demand certificate viewer: native modal focus, fit view and scrollable zoom. */ html.certificate-open, html.certificate-open body { overflow: hidden; } .certificate-viewer { width: min(72rem, calc(100% - 2rem)); max-width: none; max-height: 94vh; max-height: 94dvh; margin: auto; padding: 0; border: 1px solid var(--t-seaglass-dark); border-radius: 0.75rem; color: var(--t-blue); background: var(--t-cream); box-shadow: 0 1rem 4rem rgb(0 0 0 / 25%); } .certificate-viewer::backdrop { background: rgb(24 43 48 / 78%); } .certificate-viewer[open] { display: flex; flex-direction: column; } .certificate-viewer [hidden] { display: none; } .certificate-viewer__header { display: flex; align-items: center; gap: 1rem; padding: 1rem 1rem 0; } .certificate-viewer__title { flex: 1; font-family: "Newsreader", Georgia, serif; font-size: clamp(1.25rem, 3vw, 1.75rem); line-height: 1.2; margin: 0; } .certificate-viewer__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.75rem 1rem; } .certificate-viewer button, .certificate-viewer__download { min-height: 44px; font: inherit; font-size: 0.9375rem; } .certificate-viewer button { padding: 0.5rem 0.875rem; border: 1px solid var(--t-seaglass-text); border-radius: 0.4rem; color: var(--t-blue); background: var(--t-cream); cursor: pointer; } .certificate-viewer button:hover { background: var(--t-seaglass-pale, #D3E6E3); } .certificate-viewer__download { display: inline-flex; align-items: center; color: var(--t-blue); text-underline-offset: 0.2em; } .certificate-viewer__viewport { min-height: 0; overflow: auto; overscroll-behavior: contain; background: #f5f6f8; } .certificate-viewer__image { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(94vh - 11rem); max-height: calc(94dvh - 11rem); margin: auto; } .certificate-viewer.is-zoomed .certificate-viewer__image { width: 1600px; max-width: none; max-height: none; margin: 0; } .certificate-viewer__error { margin: 0; padding: 1rem; } @media (max-width: 560px) { .credential-feature { grid-template-columns: minmax(0, 1fr); gap: 1rem; } .credential-feature > img { width: 7rem; } } /* --- Header: light and airy, matching the homepage ------------------------- */ .site-header { background: var(--t-cream); border-bottom: 1px solid rgba(41, 74, 82, 0.12); box-shadow: none; } /* Centred header composition (Matt, 2026-08-30, site-wide): the brand block sits centred — "LCSW, PMH-C" centred beneath the name — with the menu row beneath it spanning the full content column, first item on the left margin and the CTA on the right. The base sheet's `.site-header__brand { margin-inline-end: auto }` (a row- layout device) is neutralised for the column layout. */ .site-header__inner { padding-top: 1.1rem; padding-bottom: 1.1rem; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; } .site-header__brand { margin-inline-end: 0; text-align: center; } .site-nav { width: 100%; } /* Sticky desktop header (Matt, 2026-08-30; round 19 unified with the centred/condense pass). Desktop-only per the round-19 rationale: at mobile the open disclosure menu lives inside the header, and a stuck header taller than the viewport would trap the menu's bottom rows. Gated on data-nav="enhanced" so a no-JS visitor never gets a full-height permanently-stuck bar (the condense toggle is JS too). Works with the round-17 overflow guard because `clip` (unlike `hidden`) creates no scroll container — verified by measurement. z-index 80: above content and the CTA/hero ring pseudos, below the skip link (100). scroll-padding 7.5rem (120px default; rem so it tracks the rem-sized bar at enlarged user fonts, 2026-09-08) clears the CONDENSED bar (~108px): interior anchor jumps land past the 12rem condense threshold, so the condensed height is the one that matters (the old 176px was sized for the full bar and would sum with any target-side scroll-margin — keep exactly one mechanism, this one). */ /* ≥66rem: below 1056px the one-line nav row (~946px + gutters) cannot fit, so the disclosure menu takes over (Matt, 2026-08-30 — "at ~1024 go into mobile view so the menu does not wrap"); sticky and condense belong to the desktop nav only. */ @media (min-width: 66rem) { .site-header[data-nav="enhanced"] { position: sticky; top: 0; z-index: 80; } html { scroll-padding-top: 7.5rem; } } /* Practice kicker above the name (Q12, 2026-09-06): "Healing Home Counseling" set in the credential font (Montserrat), so Ashley's name stays the prominent serif line. */ /* The kicker aligns to interior letters (Matt, 2026-09-06): H under the h in "asHley", G under the g in "morGan" — 78.1% of the name width, centered; font ~0.43x the name so the caps fit that span on one line, justify snaps the edges to the h and the g. */ .brand-specimen__practice { font-family: "Montserrat", Arial, sans-serif; font-weight: 600; font-size: clamp(0.65rem, 0.57rem + 0.85vw, calc(0.57rem + 7.6px)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-blue); display: block; width: 78.1%; align-self: center; margin-bottom: 0.45rem; text-align: justify; text-align-last: justify; } .brand-specimen__name { font-family: "Vidaloka", Georgia, serif; font-size: clamp(1.55rem, 1.35rem + 2vw, calc(1.35rem + 18px)); line-height: 1.1; font-weight: 400; color: var(--t-blue); letter-spacing: 0.01em; text-transform: none; } .brand-specimen__credential { font-family: "Montserrat", Arial, sans-serif; font-weight: 500; font-size: clamp(0.8rem, 0.74rem + 0.35vw, 0.92rem); /* enlarged from 0.75rem but kept below the kicker */ letter-spacing: 0.2em; text-transform: uppercase; color: var(--t-blue); display: block; margin-top: 0.3rem; } /* Kill the first-item stagger: center every item vertically in the row. Link padding matches Home (2026-08-30): NO horizontal padding, so hover/current underlines span the text, not a padded box. The row spans the full content column with space-between (Matt's centred-header composition); the gap is the wrap floor. */ .site-nav__list { align-items: center; gap: 1rem; width: 100%; justify-content: space-between; } .site-nav__list > .site-nav__item { display: flex; align-items: center; margin: 0; padding: 0; height: auto; } .site-nav__link { font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 1rem; /* §2.1 binding nav band + §2.4's 16px functional floor */ font-weight: 500; color: var(--t-blue); text-transform: none; letter-spacing: normal; padding: 0.35rem 0; /* Home's link box (header parity, 2026-08-30); mobile re-pads later in the cascade */ border-bottom: 2px solid transparent; text-decoration: none; } .site-nav__link:hover, .site-nav__link:focus-visible { color: var(--t-blue); border-bottom-color: var(--t-seaglass-dark); background: transparent; } .site-nav__link.is-current { color: var(--t-blue); border-bottom-color: var(--t-seaglass-dark); } /* Current SECTION: a top-level parent (Therapy/Books/Resources) whose child page is showing. Same underline as the current page — both mark "where you are"; the exact page is also marked inside the open dropdown. */ .site-nav__link.is-current-section { color: var(--t-blue); border-bottom-color: var(--t-seaglass-dark); } /* Current page inside a dropdown (visible when the menu opens, and in the flattened mobile menu) */ .site-nav__subnav a.is-current { background: var(--t-seaglass-tint); color: var(--t-blue); font-weight: 600; } .site-nav__toggle { color: var(--t-blue); background: transparent; border: 1px solid rgba(41, 74, 82, 0.25); border-radius: var(--t-radius); } /* The consultation button added to the inner navs */ .site-nav__cta { display: inline-block; background: var(--t-seaglass-dark); color: #ffffff; font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 1rem; /* §2.1 button band */ font-weight: 600; text-decoration: none; padding: 0.65rem 1.2rem; border-radius: var(--t-radius); transition: background-color var(--t-hover-duration) var(--motion-easing-standard); /* quiet hover 2026-09-01 */ } .site-nav__cta:hover, .site-nav__cta:focus-visible { background: var(--t-blue); color: #ffffff; } /* --- Dropdown menus (Therapy, Books): hover + keyboard focus ------------------- */ .site-nav__item--has-sub { position: relative; } .site-nav__item--has-sub > .site-nav__link::after { content: " \25BE"; font-size: 0.86em; opacity: 0.7; } /* indicator raised twice by Matt (2026-08-30): 0.65em -> 0.78em (+2px) -> 0.86em (+3px more; 15.48px at the 18px desktop link) */ .site-nav__subnav { position: absolute; top: 100%; left: 0; z-index: 60; min-width: 17rem; background: #ffffff; border: 1px solid rgba(41, 74, 82, 0.14); border-radius: var(--t-radius); box-shadow: 0 2px 6px rgba(41, 74, 82, 0.06), 0 18px 40px -12px rgba(41, 74, 82, 0.22); /* layered tinted pair (2026-09-01), matching Home */ padding: 0.5rem; margin: 0; list-style: none; display: none; } .site-nav__subnav::before { content: ""; position: absolute; top: -0.55rem; left: 0; right: 0; height: 0.6rem; } /* .is-dismissed (theme.js, 2026-10-20 audit U4): Escape hides the open dropdown while the pointer or focus stays put; the class clears on a fresh entry. The phone menu's static rule below still shows it. */ .site-nav__item--has-sub:not(.is-dismissed):hover > .site-nav__subnav, .site-nav__item--has-sub:not(.is-dismissed):focus-within > .site-nav__subnav { display: block; } .site-nav__subnav li { display: block; margin: 0; } .site-nav__subnav a { display: block; padding: 0.5rem 0.7rem; border: 0; border-radius: 6px; font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 1rem; /* §2.1 nav band */ font-weight: 500; color: var(--t-blue); text-decoration: none; transition: background-color var(--t-hover-duration) var(--motion-easing-standard); /* quiet hover 2026-09-01 */ } .site-nav__subnav a:hover, .site-nav__subnav a:focus-visible { background: var(--t-seaglass-tint); color: var(--t-blue); } /* Desktop menu type +2px (Matt, 2026-08-30): links, dropdown items, and the header button run 18px in the desktop bar; the disclosure band keeps the 1rem nav band. MUST sit after every `font-size: 1rem` nav declaration above — the first placement (inside the earlier sticky block) silently lost the cascade at equal specificity. */ @media (min-width: 66rem) { .site-nav__link, .site-nav__subnav a, .site-nav__cta { font-size: 1.125rem; } } @media (max-width: 65.999rem) { /* Raised from 47.999rem (Matt, 2026-08-30): the whole band below the 66rem nav-fit line uses the disclosure menu. The base sheet's toggle/list display rules stop at 47.999rem and its ≥48rem block forces a row list, so the 48–66 band restates the disclosure display and the column geometry here. */ .site-header[data-nav="enhanced"] .site-nav__toggle { display: inline-flex; } .site-header[data-nav="enhanced"] .site-nav__list { display: none; } .site-header[data-nav="enhanced"] .site-nav__list.is-open { display: flex; } .site-nav, .site-nav__list { width: 100%; } .site-nav__list { flex-direction: column; flex-wrap: nowrap; } /* Inside the mobile Menu overlay: flatten the dropdowns, always visible */ .site-nav__subnav { position: static; display: block; border: 0; box-shadow: none; background: transparent; padding: 0 0 0 1rem; min-width: 0; } .site-nav__subnav::before { display: none; } .site-nav__item--has-sub > .site-nav__link::after { content: ""; } /* Mobile menu legibility redesign (Matt, 2026-08-30). Root cause of the old jumble: the two desktop rules above (`.site-nav__list { align-items: center }` and `> .site-nav__item { display: flex }`, written to kill the desktop row's first-item stagger) leaked into the flex-COLUMN mobile list — childless items floated centred at ragged x positions, and each dropdown parent sat in a flex ROW beside its own flattened children, vertically centred against them. Re-scope both, then give the column real structure: full-width left-aligned rows, weight-differentiated levels, hairlines between groups, a guide rail on children, and the CTA as a block button. */ .site-nav__list { align-items: stretch; gap: 0; } .site-nav__list.is-open { margin-top: 0.85rem; border-top: 1px solid rgba(41, 74, 82, 0.14); padding-top: 0.35rem; } .site-nav__list > .site-nav__item { display: block; border-bottom: 1px solid rgba(41, 74, 82, 0.09); } .site-nav__list > .site-nav__item:last-child { border-bottom: 0; } .site-nav__link { display: block; width: 100%; padding: 0.75rem 0.25rem; font-weight: 600; border-bottom: 0; } /* "You are here" at mobile: the tint chip the dropdowns already use, not the desktop underline (a full-width border here reads as another separator, not a marker) */ .site-nav__link.is-current, .site-nav__link.is-current-section { background: var(--t-seaglass-tint); border-radius: 6px; text-decoration: none; } .site-nav__subnav { margin: -0.15rem 0 0.6rem 0.35rem; padding: 0 0 0 0.85rem; border-left: 2px solid rgba(79, 124, 120, 0.45); } /* --t-seaglass-dark rail at 45% */ .site-nav__subnav a { padding: 0.55rem 0.6rem; } .site-nav__cta { display: block; text-align: center; margin: 0.9rem 0 0.75rem; padding: 0.75rem 1.2rem; } /* bottom 0.35rem -> 0.75rem (~12px) for separation, Matt 2026-09-07 */ } /* --- Sticky condensed state (theme.js toggles .is-condensed on scroll with rem-scaled hysteresis: condense past 12rem, expand back above 1rem — the 11rem dead band stays ≈1.9× the ~93px-at-default condensed height change at every user font size, so scroll anchoring can't flicker-loop the toggle; 2026-09-08) -------- Matt, 2026-08-30: when scrolled, the centred two-line brand collapses to the one-line lockup "Ashley Hanna-Morgan, LCSW, PMH-C" (the comma comes from the name's ::after, the credential keeps its Montserrat caps) and spacing tightens so the pinned header takes as little page real estate as possible. Desktop-scoped like the sticky rule itself — at mobile the header is not sticky and keeps its full form. */ @media (min-width: 66rem) { .site-header.is-condensed { box-shadow: 0 2px 14px rgba(41, 74, 82, 0.10); } .site-header.is-condensed .site-header__inner { padding-top: 0.55rem; padding-bottom: 0.55rem; gap: 0.45rem; } /* Scrolled: drop the practice kicker, show just "Ashley Hanna-Morgan, LCSW, PMH-C". */ .site-header.is-condensed .brand-specimen__practice { display: none; } .site-header.is-condensed .brand-specimen__name { font-size: 1.35rem; } .site-header.is-condensed .brand-specimen__name::after { content: ", "; } .site-header.is-condensed .brand-specimen__credential { font-size: 0.8rem; } /* The base sheet's .brand-specimen is inline-flex COLUMN, which blockifies the two spans — `display: inline` on the credential computes back to block and cannot join the line. Flip the wrapper itself to a baseline row instead. */ .site-header.is-condensed .brand-specimen { flex-direction: row; align-items: baseline; gap: 0.35rem; } } @media (prefers-reduced-motion: no-preference) { .site-header__inner { transition: padding 0.18s ease, gap 0.18s ease; } .brand-specimen__name { transition: font-size 0.18s ease; } } /* --- At-a-glance trust chips (hero) -------------------------------------------- */ .chips { list-style: none; display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.6rem; margin: 1.5rem 0 0; padding: 0; } .chips li { font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 0.82rem; font-weight: 600; color: var(--t-blue); background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(41, 74, 82, 0.14); border-radius: var(--t-radius); padding: 0.45rem 0.8rem; /* Equal-height chips. The base sheet puts a 4px top margin on list items after the first; inside this stretch-aligned flex row that made every chip EXCEPT the first stretch to 4px less than the line height, so they shared a bottom edge while the credential chip started 4px higher and read as taller/thicker. (Same first-item flex quirk already fixed in the nav, breadcrumbs, and the footer Elsewhere row.) Zeroing the margin makes every chip the same height; the inline-flex box with an explicit line-height keeps the label optically centred in it. */ margin: 0; display: inline-flex; align-items: center; line-height: 1.25; } /* Forces a flex line break so the chips read 2 + 2 rather than wrapping 3 + 1. Presentational only: it carries no text and is removed from the list semantics. */ .chips .chips__break { flex-basis: 100%; height: 0; margin: 0; padding: 0; border: 0; background: none; } @media (max-width: 560px) { /* Too narrow for two per row: let the chips wrap naturally instead. */ .chips .chips__break { display: none; } } /* --- Pathway icons (shared with the homepage set) -------------------------------- */ /* Terracotta pathway icons — see the note on the homepage rule. Non-text decoration on the cream card surface (3.68 against the 3:1 floor); cards stay cream on sand bands. */ .path-icon { width: 26px; height: 26px; stroke: var(--t-terracotta); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; display: block; margin-bottom: 0.65rem; } /* --- Books hub: small cover thumbnails --------------------------------------------- */ .book-thumb { float: right; width: min(30%, 9.75rem); border: 1px solid transparent; /* object shadow instead of the hairline (2026-09-01): the same Deep-Blue pair the cards carry */ box-shadow: var(--shadow-low); margin: 0.5rem 0 1rem 1.5rem; /* small top offset drops the cover to the heading's cap line (Matt, 2026-09-04) */ } .book-thumb img { display: block; width: 100%; height: auto; } /* the cover's native ~2:3 ratio sets the height; square corners, full cover shown (Matt, 2026-09-04) */ /* Books hub: intro paragraph and the three covers side by side, half and half (Matt, 2026-09-04). The trio is the three de-bordered covers in a row — no baked frame or gaps. Top-aligned; stacks on narrow screens. */ #books-intro .section__inner { display: grid; grid-template-columns: 1fr 1.2fr; /* trio ~9% larger than an even split (Matt, 2026-09-04) */ gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } #books-intro .section__inner > * { margin: 0; } /* grid gap owns the spacing; drop the base owl margins */ .books-trio { display: flex; gap: 0.6rem; align-items: flex-start; padding-top: 0.4rem; } /* drop the cover tops to the paragraph's first-line top — even tops (Matt, 2026-09-04) */ .books-trio picture { flex: 1 1 0; min-width: 0; display: block; } .books-trio img { display: block; width: 100%; height: auto; box-shadow: var(--shadow-low); } /* square corners, full cover shown (Matt, 2026-09-04) */ @media (max-width: 48.75rem) { /* 780px at the default text size (rem since 2026-10-20) */ #books-intro .section__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } /* stack: paragraph then trio */ .books-trio { padding-top: 0; } /* no top nudge once stacked */ } /* Ground-aware thumb fill (2026-08-30): this rule keyed on nth-of-type parity until the banding rollout made the ground a class decision — parity no longer predicts sand. Sand thumbs (default, above) read on cream --plain sections; a --band section gets the cream thumb so it reads on the sand band. */ .section--band .book-thumb { background: var(--t-cream); } @media (max-width: 560px) { .book-thumb { float: none; width: 9.75rem; max-width: 100%; margin: 0 0 1.1rem; } } /* max-width (2026-10-20): 9.75rem is 312px at a 32px text size, wider than a 320px phone's column */ /* --- Books: retailer links (Matt, 2026-09-02) --------------------------------------- Detail pages carry the two standard buttons (Amazon primary, Barnes & Noble secondary) under the "Get the book" sentence; the hub carries a small quick-link stack beneath each cover thumb, riding the same float column (clear: right) so the prose keeps wrapping around one object. The URLs are plain, non-affiliate retailer pages (Ashley confirmed the legacy links were not affiliate links; no disclosure is owed). Neutral bag line icons in the .path-icon language rather than retailer logos, whose trademark guidelines restrict use to approved partners. Opens in a new tab like the Resources directory. Bookshop.org joins as the third link (Ashley, 2026-10-06), after Amazon and Barnes & Noble, which she keeps first for reviews. All three are the links from PSI's own Bookshop.org lists, carrying PSI's affiliate ID (aid=112212), so sales benefit Postpartum Support International: they are rel="sponsored" and a visible line says so (aria-describedby on the hub link). */ .retailer-links { list-style: none; margin: 1.35rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem; } .retailer-links li { margin: 0; max-width: 100%; } /* max-width (2026-10-20): the playlist buttons ran past a phone screen at 200% text */ .retailer-links__note { margin: 0.85rem 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--t-blue); opacity: 0.85; } /* §2.1 caption band */ .book-thumb:has(+ .book-thumb__buy) { margin-bottom: 0.65rem; } .section__inner:has(> .book-thumb) { display: flow-root; } /* contain the float column: the hub sections are short, and the thumb + quick links (284px at 1440) otherwise ran past the section into its neighbour (measured 2026-09-02: 5px on poetry, 44px on the curriculum) */ .section__inner:has(> .book-thumb) > .section__heading { margin-top: 0; } /* the thumb now precedes the heading in source order (covers reach the heading top, Matt 2026-09-04); drop the heading's sibling margin so it sits level with the floated cover */ .book-thumb__buy { float: right; clear: right; width: min(30%, 9.75rem); margin: 0 0 1rem 1.5rem; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.875rem; line-height: 1.45; } .book-thumb__buy-label { font-weight: 600; color: var(--t-blue); opacity: 0.85; } .book-thumb__link { display: inline-flex; align-items: center; gap: 0.45rem; width: max-content; max-width: 100%; padding: 0.15rem 0; } /* 20px text → ~25px tap target (2.5.8) */ .book-thumb__link .path-icon { width: 1.1rem; height: 1.1rem; margin: 0; flex: none; stroke: var(--t-terracotta-dark); } /* 4.04:1 on sand, higher on cream */ .book-thumb__buy-note { margin-top: 0.15rem; color: var(--t-blue); opacity: 0.85; } /* the PSI line under the Bookshop.org link, in the label's caption treatment */ @media (max-width: 560px) { .book-thumb__buy { float: none; width: auto; margin: -0.4rem 0 1.1rem; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; } .book-thumb__buy-label, .book-thumb__buy-note { flex-basis: 100%; } } /* --- Related-support cross-links ---------------------------------------------------- */ .related-eyebrow { font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 0.875rem; /* §2.1 binding: eyebrow 13-15 / caption 14-15 */ font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-seaglass-text); margin: 0 0 0.9rem; } /* --- Breadcrumb: quieter, and vertically aligned ----------------------------- */ .breadcrumb { font-size: 0.85rem; opacity: 0.85; } .breadcrumb a { transition: color var(--t-hover-duration) var(--motion-easing-standard); } /* quiet hover 2026-09-01: the breadcrumb sits outside .page__body */ .breadcrumb__list { align-items: center; } .breadcrumb__item { display: inline-flex; align-items: center; margin: 0; padding: 0; font-size: 0.85rem; /* the container's 0.85rem never reached the li (finding 6) */ } /* --- Page hero: full-bleed tinted split band with image placeholder ---------- */ .page-hero { position: relative; background: var(--t-seaglass-tint); box-shadow: 0 0 0 100vmax var(--t-seaglass-tint); clip-path: inset(0 -100vmax); /* Same rhythm as every other band edge (2026-08-30): the hero is a colour band, so its content should sit the same 72px from its edge that a section's does. */ padding-top: clamp(2.75rem, 6vw, 4.5rem); padding-bottom: clamp(2.75rem, 6vw, 4.5rem); } /* Short heroes (Matt, 2026-08-30): on pages without a chips row the band is shallow enough that the top-anchored outer ring's arc touched the bottom edge (measured 1px clearance on Support Groups). +15px of bottom padding on every chipless hero — the listed short-title pages, the legal stubs, and any future short page — restores the clearance; chips pages are untouched. */ .page-hero:not(:has(.chips)) { padding-bottom: calc(clamp(2.75rem, 6vw, 4.5rem) + 15px); margin: 0; display: grid; grid-template-columns: 1.6fr minmax(0, min(20rem, 320px)); /* see the reflow note below */ gap: clamp(1.5rem, 4vw, 3rem); align-items: center; } .page-hero--plain { grid-template-columns: minmax(0, 1fr); } /* Ring motif, opening bookend: same two-circle geometry as the closing CTA band, tone-inverted (seaglass-dark on tint) and mirrored to hang off the top right. */ .page-hero::after { content: ""; display: block; position: absolute; right: -6rem; top: -14rem; width: 30rem; height: 30rem; background: transparent; /* the base sheet's accent-bar ::after sets a terracotta fill */ margin-top: 0; border: 2px solid rgba(79, 124, 120, 0.20); border-radius: 50%; pointer-events: none; } .page-hero::before { content: ""; position: absolute; right: -1rem; top: -9rem; width: 19rem; height: 19rem; border: 2px solid rgba(79, 124, 120, 0.14); border-radius: 50%; pointer-events: none; } .page-hero__text, .page-hero__media { position: relative; z-index: 1; } /* Reflow (2026-10-20 audit U2). Stacked on phones the hero is one minmax(0, 1fr) track, so one long word ("Recommendations" at 320px, a title word at 200% text) can no longer widen it past the screen, where the root's overflow-x clip cut it off; a word that cannot fit a line on its own breaks instead (break-word, which leaves intrinsic sizes alone). Side by side, the title track keeps its automatic minimum, so its words stay whole, and the second track, empty on every page (no hero has .page-hero__media, and the (0,2,0) chipless rule also outranks .page-hero--plain), gives way first: it now starts at 0 and stops at its default 320px, so enlarged text cannot grow it into the title. The stacking breakpoint below is 48.75rem (780px at the default size), so a larger browser text setting stacks the hero sooner. At 16px nothing moves. */ .page-hero__text { overflow-wrap: break-word; } /* A long title word that may break only when it cannot fit a line at all: an inline-block keeps it whole on its own line wherever it fits, and its soft hyphens apply only below that (Book Recommendations under about 378px: a hyphenated break such as "Recom-" / "mendations" instead of an orphaned "s"). Side by side it never breaks, so the title track's automatic minimum holds the whole word even when only the root font size is enlarged. */ .page-hero__word { display: inline-block; max-width: 100%; } @media (min-width: 48.75rem) { .page-hero__word { white-space: nowrap; } } /* (no rule under the hero title: the eyebrow above carries the structure) */ .page-hero__eyebrow { font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 0.875rem; /* §2.1 binding: eyebrow 13-15 / caption 14-15 */ font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-seaglass-text); margin: 0 0 0.9rem; } .page-hero__title, .error-page__title { font-family: "Vidaloka", Georgia, serif; font-weight: 400; color: var(--t-blue); /* §2.1 BINDING (Matt, 2026-08-30): interior H1 band 42-50 mobile / 56-72 desktop. One continuous clamp hits both anchors (42px at 375, 68px at 1440) with no media step — which also retires the P2 mobile-ramp block: Home's raised clamp is larger at every width, so the old inversion cannot recur. */ font-size: clamp(2.625rem, 5vw, 4.25rem); line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; margin: 0; } /* Long-title variant: SIZE-ONLY since Matt's 2026-08-30 consistency ruling. The old "identity exception" also switched long H1s to Newsreader 500, and browsing sibling pages the family change read as inconsistency (his screenshot: the therapy children) — a long headline may size down and gain leading, but it stays Vidaloka like every H1. */ .page-hero__title.page-hero__title--long { /* Doubled class (0,2,0): the base sheet's `.has-longtitle-h1 .page-hero__title` is (0,2,0) and silently beat the old single-class form — the two long-title pages were rendering base-sheet sizes, not this rule (finding 38; the build's ninth specificity trap). Same-specificity, later in the cascade, so this now wins. */ font-family: "Vidaloka", Georgia, serif; /* MUST stay declared: the base sheet's (0,2,0) long-title rule sets Newsreader 500 and wins for any property this rule omits */ font-weight: 400; font-size: clamp(2.375rem, 4.4vw, 3.75rem); /* stays below the plain H1 at every width */ line-height: 1.2; letter-spacing: -0.01em; /* match the plain H1 */ } .page-hero__media { aspect-ratio: 4 / 3; background: rgba(255, 255, 255, 0.55); /* Placeholder frames (P1, 2026-08-30): the faint blue-alpha borders composited below 1.3:1 wherever a tint-filled placeholder met tint or sand (1.03:1 on About's band). Solid Dark Sea Glass reads 3.6 on tint, 3.5 on sand, 4.4 on cream — the whole placeholder family (.page-hero__media, .section-media, .profile-card__media, .portrait-ph) uses it until real imagery lands. */ border: 1px solid var(--t-seaglass-dark); border-radius: var(--t-radius); display: flex; align-items: flex-end; padding: 1rem; } .page-hero__media p { margin: 0; font-size: 0.875rem; /* §2.1 binding: eyebrow 13-15 / caption 14-15 */ line-height: 1.5; color: var(--t-blue); opacity: 0.85; } @media (max-width: 48.75rem) { /* 780px at the default text size; rem so enlarged text stacks the hero */ .page-hero { grid-template-columns: minmax(0, 1fr); } /* Chipless heroes on phones (found 2026-09-02 while measuring the article pages): the short-hero rule above is (0,2,0) and carries the two-column grid, so the (0,1,0) stack rule on this line never won on chipless pages — About's title column measured 229px at 375, Support Groups' 96px. Same specificity here, later in the cascade, so every hero stacks on phones; desktop is untouched. */ .page-hero:not(:has(.chips)) { grid-template-columns: minmax(0, 1fr); } .page-hero__media { max-width: 22rem; } /* Narrow screens: one corner crescent instead of the full ring sweep */ .page-hero::after { display: none; } .page-hero::before { width: 13rem; height: 13rem; right: -5rem; top: -6rem; } } /* --- Section rhythm: airy, with full-bleed sand bands ------------------------ */ .page__body > .section { margin-top: 0; margin-bottom: 0; } /* No horizontal inset on any band, so every section's content sits on the same left/right edge as the hero, breadcrumb, and footer; horizontal breathing room comes from `.page.container`. The base sheet still carries `.page__body > .section:nth-of-type(2n) { padding: var(--space-lg) }` — a leftover from the earlier inset-CARD treatment, from before these sections became full-bleed bands. Its top/bottom were replaced above, but its 36px left/right survived and indented every alternating (sand) band while the cream ones sat flush. `:nth-of-type(n)` matches every section AND matches that rule's specificity (0,3,0), which a plain `.page__body > .section` (0,2,0) cannot — so this needs the pseudo-class to win, not just a later position in the cascade. */ .page__body > .section:nth-of-type(n) { /* THE canonical section geometry — all four sides, one rule (Matt, 2026-08-30). (0,3,0) via :nth-of-type(n), which matches every section while tying the base sheet's `:nth-of-type(2n) { padding: var(--space-lg) }`. A plain `.page__body > .section` is (0,2,0) and loses to it regardless of order, which is why the vertical rhythm silently never applied to even-numbered sections and the bands sat at 36px against their neighbours' 68px. Matt's call: keep the tighter feel and make it even, rather than loosening the bands — so every section now carries the tight value and every boundary is a uniform 72px. Anything that needs to deviate declares LATER at (0,3,0) or higher. */ padding-top: clamp(2.75rem, 6vw, 4.5rem); padding-bottom: clamp(2.75rem, 6vw, 4.5rem); padding-left: 0; padding-right: 0; /* No corner radius on a full-bleed band. The same leftover inset-card rule that carried the 36px padding (§5ab) also sets `border-radius: var(--radius-lg)` (16px). A band is painted with `box-shadow: 0 0 0 100vmax`, which spreads outward from the element's ROUNDED rectangle — so each corner left a small curved notch of page background showing through. A radius has no meaning on an edge-to-edge element. */ border-radius: 0; } /* With one even rhythm, the only thing left that can skew a boundary is a trailing margin on a section's last element — a closing .prose-quote carries 1.5rem, which turned a 72px boundary into 96px. Normalise it so the section's padding is the whole story. (0,2,0), beating the component's own (0,1,0) margin. */ .section__inner > :last-child { margin-bottom: 0; } .page__body > .section + .section { margin-top: 0; } /* Full-bleed band without 100vw scrollbar issues: paint outward with a huge box-shadow and clip it. Even sections get the warm sand band. */ .page__body > .section:nth-of-type(even) { background: var(--t-sand); box-shadow: 0 0 0 100vmax var(--t-sand); clip-path: inset(0 -100vmax); } /* --- Chapter banding (2026-08-30) ------------------------------------------ The automatic nth-of-type alternation makes every section boundary a colour change, so a page with six sections gets six stripes whether or not it has six ideas. These two classes let a band mark a CHAPTER instead: --band paints sand, --plain opts out, and whitespace does the separating in between (the Bunny Hive principle). Same (0,3,0) specificity as the alternation rule and declared after it, so either wins; both sit above the :has(.cta) rule so the signature closing band always beats them. Piloted on About; not yet applied site-wide. */ .page__body > .section.section--plain { background: transparent; box-shadow: none; clip-path: none; } .page__body > .section.section--band { background: var(--t-sand); box-shadow: 0 0 0 100vmax var(--t-sand); clip-path: inset(0 -100vmax); } /* Consecutive sections on the SAME ground are separated by whitespace alone, so the full band padding on both sides of the boundary doubles into a gulf — up to 8.5rem of nothing between two headings that belong together. Halve each side, but only at same-ground boundaries: a boundary where the colour actually changes keeps its full padding, because there the band needs room to read as a band. (0,3,0) on both, matching the rules they override — see §5ab/§5ao on this overlay's specificity traps.) */ /* The section immediately before the closing CTA is always cream (Matt, 2026-08-30). Warm Sand against the Dark Sea Glass CTA puts two mid-tones together and muddies the band; cream gives the signature band a clean edge to land on. Expressed positionally, NOT as `:has(+ .section:has(.cta))` — **`:has()` cannot be nested inside `:has()`**, so that selector is invalid and is dropped silently (the first attempt was, and measured unchanged). The CTA is verified to be the last section on every page that has one, so the pre-CTA section is `:nth-last-of-type(2)`, and `.page__body:has(.cta)` scopes the whole thing to CTA-bearing pages so the book and placeholder pages are untouched. (0,4,0) — beats the alternation and an explicit --band, deliberately: this is a policy about one boundary, not a default. */ .page__body:has(.cta) > .section:nth-last-of-type(2) { background: transparent; box-shadow: none; clip-path: none; } /* Where that section WAS the sand band (even-numbered), its predecessor is cream, so the boundary between them no longer has a colour change and should not carry the doubled band padding. If the pre-CTA section is even then its predecessor is odd, which is why the second rule can be positional too. Matches the same-ground rhythm set on About. */ /* Two-tier rhythm (Matt, 2026-08-30). A colour edge TERMINATES the eye, so at a band boundary each side reads only its own padding — 36px, against the 72px of continuous cream between two same-ground sections. Matt: make the band edges match the sections. So the default padding above is the full 72px (what the eye should read on either side of an edge), and a boundary WITHOUT a colour change is halved, so its two paddings add back up to the same 72px. Result: every perceived gap on the page is 72px. */ .page__body > .section--plain + .section--plain { padding-top: clamp(1.375rem, 3vw, 2.25rem); } .page__body > .section--plain:has(+ .section--plain) { padding-bottom: clamp(1.375rem, 3vw, 2.25rem); } /* The positional pre-CTA halving fallbacks that lived here (nth-of-type parity crossed with nth-last-of-type) served pages WITHOUT chapter classes. Retired 2026-08-30 with the banding rollout: every multi-section page now carries explicit --band/--plain tags, so the --plain + --plain rules above own all same-ground halving. They could not simply stay: at (0,5,0) the positional forms outranked the (0,3,0) class rules and would have mis-halved any colour-change boundary above a pre-CTA section whose predecessor is a --band (a boundary that must keep its full padding). */ /* --- Portrait split: image beside its supporting text ---------------------- Heading spans both columns, portrait sits left at column width (smaller than the old full-width 3:2 block, which left a dead gutter), supporting text sits right, and the voice quote spans the full measure beneath. Columns are assigned explicitly so any number of children stays predictable. */ .section .section__inner--portrait-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(13rem, 1fr); column-gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } .section__inner--portrait-split > * { grid-column: 1 / -1; } /* Restore the site's standard content rhythm inside the grid. The base sheet spaces adjacent section children with `.section__inner > * + * { margin-top: var(--space-sm) }` (16px) — but .portrait-ph zeroes its own top margin, and a grid row-gap defaults to 0, so the heading sat flush against the image while every other heading on the site has 16px under it. Both gaps below use the same token, so they track the base scale. */ .section__inner--portrait-split > .section__heading { grid-row: 1; margin-bottom: var(--space-sm); } .section__inner--portrait-split > .portrait-ph { grid-column: 1; grid-row: 2; max-width: none; margin-bottom: 0; } /* The credentials paragraph sits UNDER the image in the left column; the lists span both of those rows on the right, so the two columns finish at similar depths instead of the text column overshooting the image. */ .section__inner--portrait-split > .portrait-bio { grid-column: 1; grid-row: 3; margin: var(--space-sm) 0 0; } .section__inner--portrait-split > .portrait-aside { grid-column: 2; grid-row: 2 / span 2; } .section__inner--portrait-split > .prose-quote { grid-row: 4; margin-top: clamp(1.6rem, 3vw, 2.4rem); } /* First label in the aside must not push the column below the image top. */ .portrait-aside > :first-child { margin-top: 0; } /* Zero the base sheet's inherited 16px top margin so the text column starts on the same line as the image, matching --with-profile and --with-media. */ .portrait-aside { margin: 0; } /* Micro-label + fact list inside the portrait aside. Sea-glass text on the sand band is 5.10:1; body charcoal on sand is 9.13:1. */ .portrait-aside__label { font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 0.875rem; /* §2.1 binding: eyebrow 13-15 / caption 14-15 */ font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-seaglass-text); /* Clear break above a group label: well beyond the 0.5rem between list items, so 'Selected training' reads as a new group rather than another item. */ margin: 1.75rem 0 0.7rem; } .portrait-aside__list { list-style: none; margin: 0; padding: 0; font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 0.92rem; line-height: 1.55; } .portrait-aside__list li { margin: 0 0 0.5rem; padding: 0; font-size: 0.92rem; /* item-level, per finding 6 */ } .portrait-aside__list li:last-child { margin-bottom: 0; } @media (max-width: 48.75rem) { /* 780px at the default text size (rem since 2026-10-20) */ /* Every placed child must be reset by name: the desktop rules above are more specific than a bare `> *`, so an unlisted child keeps its explicit grid-row and jumps out of source order (the quote did exactly that, landing above the aside). */ .section .section__inner--portrait-split { grid-template-columns: minmax(0, 1fr); } .section__inner--portrait-split > *, .section__inner--portrait-split > .section__heading, .section__inner--portrait-split > .portrait-ph, .section__inner--portrait-split > .portrait-bio, .section__inner--portrait-split > .portrait-aside, .section__inner--portrait-split > .prose-quote { grid-column: 1; grid-row: auto; } .section__inner--portrait-split > .portrait-ph { margin-bottom: 1.4rem; } .section__inner--portrait-split > .prose-quote { margin-top: 1.6rem; } } /* The closing CTA: the signature band — button-color surface, white type, inverted white primary, faint concentric rings (the Oula line-graphic move). */ .page__body > .section:has(.cta) { position: relative; background: var(--t-seaglass-dark); box-shadow: 0 0 0 100vmax var(--t-seaglass-dark); clip-path: inset(0 -100vmax); color: #ffffff; text-align: center; } /* The signature ring sweep on the CTA band — two large concentric circles anchored off the bottom-right, the Oula closing-line-graphic move (§5t). Briefly removed 2026-08-30 on a misread of Matt's note; he wanted the LARGE arcs kept and the small corner artifacts gone instead. Restored. */ .page__body > .section:has(.cta)::after { content: ""; position: absolute; right: -6rem; bottom: -14rem; width: 30rem; height: 30rem; border: 2px solid rgba(255, 255, 255, 0.12); border-radius: 50%; pointer-events: none; } .page__body > .section:has(.cta)::before { content: ""; position: absolute; right: -1rem; bottom: -9rem; width: 19rem; height: 19rem; border: 2px solid rgba(255, 255, 255, 0.09); border-radius: 50%; pointer-events: none; } .page__body > .section:has(.cta) .section__inner { position: relative; z-index: 1; } .page__body > .section:has(.cta) .section__heading, .page__body > .section:has(.cta) p { color: #ffffff; } .page__body > .section:has(.cta) p { margin-left: auto; margin-right: auto; } .page__body > .section:has(.cta) a { color: #ffffff; } .page__body > .section:has(.cta) .cta__action { display: inline-block; margin: 0.35rem 0.4rem; } /* Enlarged text (2026-10-20 audit U2): at 200% text on a phone "Request a free consultation" ran past the screen. The CTA is a size container; below 16rem, which happens with enlarged text or on screens narrower than about 305px (a 320px phone's CTA is 17rem at the default size), the pill drops its side margins, is capped at its column and its side padding tightens, so the label fits or, at the extreme, hyphenates ("consulta-tion") instead of running off. It hyphenates only where "consultation", the longest label word (6.07rem), cannot fit the pill: the column less 1.5rem of padding and 2px of border. Firefox and Safari otherwise split it where it would fit whole. */ .page__body > .section:has(.cta) .cta { container: cta / inline-size; } @container cta (max-width: 16rem) { .page__body > .section:has(.cta) .cta__action { margin-left: 0; margin-right: 0; max-width: 100%; } .page__body > .section:has(.cta) .cta__action .button { padding-left: 0.75rem; padding-right: 0.75rem; } } @container cta (max-width: calc(7.57rem + 2px)) { .page__body > .section:has(.cta) .cta__action .button { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; } } .page__body > .section:has(.cta) .button--primary, .page__body > .section:has(.cta) .cta .button--primary { background: #ffffff; color: var(--t-blue); } .page__body > .section:has(.cta) .button--primary:hover, .page__body > .section:has(.cta) .button--primary:focus-visible { background: var(--t-cream); color: var(--t-blue); } .page__body > .section:has(.cta) .button--secondary, .page__body > .section:has(.cta) .cta .button--secondary { color: #ffffff; border-color: rgba(255, 255, 255, 0.75); background: transparent; } /* 2.77:1 -> 3.34:1 on the band (P1) */ /* The hover fill is removed, not reduced: white label on the band measures 4.68:1 against a 4.5 floor, so even a 2% white fill drops it to 4.48 and fails. The solid-white border carries the hover signal; the lift carries the rest. Home's .final-cta matches. */ .page__body > .section:has(.cta) .button--secondary:hover, .page__body > .section:has(.cta) .button--secondary:focus-visible { border-color: #ffffff; background: transparent; color: #ffffff; } /* A blue shadow vanishes on the dark band; it needs its own deeper value. */ .page__body > .section:has(.cta) .button:hover, .page__body > .section:has(.cta) .button:focus-visible { box-shadow: 0 6px 16px rgba(14, 32, 36, 0.30); } .page__body > .section:has(.cta) .button:active { box-shadow: 0 3px 8px rgba(14, 32, 36, 0.26); } .cta__facts { margin-top: 1.2rem; font-size: 0.9rem; color: #ffffff; } /* The CTA band runs flush to the footer: no stray cream gap beneath it */ .page { padding-bottom: 0; } .page__main { padding-bottom: 0; margin-bottom: 0; } .page__body > .section:last-of-type { margin-bottom: 0; } /* Closing ring bookend for content pages that have no signature CTA band (the four book pages; Contact has since gained a CTA): echoes the opening hero rings, tone-matched (seaglass on the light closing section) and mirrored to hang off the lower-right, so the page is bracketed open + close. clip-path contains the rings to the section (like the hero). */ .page__body > .section.closing-bookend { position: relative; clip-path: inset(0 -100vmax); } .page__body > .section.closing-bookend::after { content: ""; position: absolute; right: -6rem; bottom: -14rem; width: 30rem; height: 30rem; border: 2px solid rgba(79, 124, 120, 0.20); border-radius: 50%; pointer-events: none; } .page__body > .section.closing-bookend::before { content: ""; position: absolute; right: -1rem; bottom: -9rem; width: 19rem; height: 19rem; border: 2px solid rgba(79, 124, 120, 0.14); border-radius: 50%; pointer-events: none; } .page__body > .section.closing-bookend .section__inner { position: relative; z-index: 1; } @media (max-width: 48.75rem) { /* 780px at the default text size (rem since 2026-10-20) */ .page__body > .section.closing-bookend::after { display: none; } .page__body > .section.closing-bookend::before { width: 13rem; height: 13rem; right: -5rem; bottom: -6rem; } } .section__heading, .error-page__suggest-heading { font-family: "Newsreader", Georgia, serif; font-weight: 500; color: var(--t-blue); /* §2.1 BINDING: H2 band 34-40 mobile / 42-56 desktop — 34px at 375, 56px at 1440. */ font-size: clamp(2.125rem, 3.9vw, 3.5rem); line-height: 1.22; text-wrap: balance; } /* Headings stand alone: hierarchy comes from type and the band rhythm (no accent bars) */ /* Oura principle: one memorable thought per viewport. The opening editorial statement is CLASS-APPLIED as of 2026-08-30 (P2): the old positional selector (`.section:first-of-type .section__inner > p:first-child`) silently fired on only 7 of 24 pages — whichever happened to open with a bare

— while the ledger recorded the role as site-wide (finding 7). The seven pages that rendered the role now carry class="lead" explicitly; a page opening with a heading, quote, or cover gets no lede unless one is deliberately added. */ .section .lead { font-family: "Newsreader", Georgia, serif; font-weight: 500; font-style: normal; font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.45; color: var(--t-blue); max-width: 34ch; } /* --- Quotes: large serif quotation glyph, no bars ----------------------------- */ .prose-quote { margin: 0 0 1.5rem; padding: 0; background: transparent; border: 0; border-radius: 0; font-family: "Newsreader", Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(1.25rem, 1.8vw, 1.5rem); /* voice-quote presence bump, both systems (2026-08-30) */ line-height: 1.5; color: var(--t-blue); } .prose-quote::before { content: "\201C"; display: block; font-family: "Newsreader", Georgia, serif; font-style: normal; font-weight: 500; font-size: 3rem; line-height: 0.6; /* The voice mark is warm (2026-08-30). Per §5p this glyph means Ashley's first-person voice or a quoted record — the one element with a precise semantic rule — but it was painted the same Dark Sea Glass as buttons, borders, focus rings and icons, so the rule was invisible. Sea glass stays the interaction layer; terracotta is the human one. #9C5A2B not #B66F52 because the glyph lands on sand bands too, where base terracotta is 2.93 (below even the non-text floor). At 48px the 3:1 large-text bar applies and this clears everywhere — and it beats the old colour on every ground (5.07 vs 4.42 cream, 4.04 vs 3.52 sand), so it is also a contrast improvement. */ color: var(--t-terracotta-dark); /* Bottom margin is NEGATIVE by design (Matt, 2026-09-02: halve the gap to the quote). Measured ink-to-ink on /books/, /about/ and /therapy/trauma-emdr/, the gap was 39.4px and margin was only 22% of it. The dominant term is 23.6px of empty slack BELOW the glyph's ink but inside its own line box — line-height 0.6 on a 48px face whose ink sits high — plus 6.9px of the paragraph's own half-leading. Zeroing the margin would still have left 30.5px, so closing to ~19px has to eat into that slack. A tighter line-height would instead push the ink further above the box top and crowd whatever precedes the quote. Home's .pull-quote::before carries the identical value; the two were measured separately and came out the same (39.3 vs 39.4) because the quote type matches. */ margin: 0.4rem 0 -0.7rem; } .prose-quote p { font-size: inherit; color: inherit; font-family: inherit; font-style: inherit; line-height: inherit; } /* First-in-section quotes (2026-08-30): the glyph's 0.4rem top margin collapses out through the quote and the inner (neither has top padding/border), adding 6.4px above the section's padding wherever a .prose-quote is the inner's FIRST flow child — surfaced by the banding rollout when a halved 36px boundary measured 42. Mid-section quotes are unaffected (the 16px sibling margin wins the collapse), and the :not() excludes the modifier-grid inners (--with-media etc.), where grid items do not collapse margins and zeroing would instead shift the glyph inside its cell. */ .section__inner:not([class*="section__inner--"]) > .prose-quote:first-child::before { margin-top: 0; } /* --- Buttons: homepage button system ----------------------------------------- */ .button { font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 1rem; /* §2.1 button band + §2.4 floor */ font-weight: 600; letter-spacing: normal; text-transform: none; padding: 0.9rem 1.6rem; border: 1px solid transparent; border-radius: var(--t-radius); text-decoration: none; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; } .button--primary, .cta .button--primary { background: var(--t-seaglass-dark); color: #ffffff; } .button--primary:hover, .button--primary:focus-visible, .cta .button--primary:hover, .cta .button--primary:focus-visible { background: var(--t-blue); color: #ffffff; } /* Outline-button boundary raised to the 3:1 non-text floor (2026-08-30, P1 pass): 0.35 blue composited to 1.85:1 on cream; 0.65 reads 3.58 on cream / 3.52 on sand. Home's .btn--ghost carries the same change — the two systems move together. */ .button--secondary, .cta .button--secondary { background: transparent; color: var(--t-blue); border-color: rgba(41, 74, 82, 0.65); } .button--secondary:hover, .button--secondary:focus-visible, .cta .button--secondary:hover, .cta .button--secondary:focus-visible { border-color: var(--t-blue); background: rgba(41, 74, 82, 0.06); color: var(--t-blue); } /* Per-button revision (Matt, 2026-09-16): the Walk-and-Talk button on california-nevada's sand band gets a cream fill so it lifts off the band instead of taking its colour. Blue text and the 0.65 border are unchanged; the border still carries the 3:1 boundary. Page-scoped by section id so no other button is affected. */ #availability-san-diego .button--secondary, #availability-san-diego .button--secondary:hover, #availability-san-diego .button--secondary:focus-visible { background: var(--t-cream); } /* Hover affordance (Matt, 2026-09-01) — Home's .btn block carries the same treatment; the two systems move together. The base sheet already lifted .button--primary 1px ("gentle hover rise"); this takes both roles to 2px, adds the shadow, and gates the motion, which the base rule was not. */ .button:hover, .button:focus-visible { box-shadow: 0 4px 12px rgba(41, 74, 82, 0.18); } .button:active { box-shadow: 0 2px 6px rgba(41, 74, 82, 0.16); } @media (prefers-reduced-motion: no-preference) { .button:hover, .button:focus-visible { transform: translateY(-2px); } .button:active { transform: translateY(0); } } /* The base sheet's 1px rise is ungated, so it would still shift under reduced motion. */ @media (prefers-reduced-motion: reduce) { .button--primary:hover, .button--primary:focus-visible { transform: none; } } /* --- Cards: homepage card treatment ------------------------------------------ */ .card { background: var(--t-cream); border: 1px solid transparent; /* card depth parity with Home (2026-09-01): the elevation pair in --shadow-low carries the edge; the border stays in the box model so nothing moves */ border-radius: var(--t-radius); } /* Ground-aware card fill (2026-08-30, P1 pass). On cream --plain sections cream cards had no visible boundary (1.00:1 fill, 1.17:1 border) — the five specialty pages' related- support grids all sit in the forced-cream pre-CTA slot. Sand fill follows the book-thumb precedent (sand surface on cream ground); cards on --band sand stay cream via the default above. The old `.section:nth-of-type(even) .card` parity rule that lived here was removed in the same change: audit finding 51 verified it redundant (it duplicated the cream default), and at equal (0,2,0) specificity declared later it would have defeated this rule on even-numbered --plain sections (perinatal's related grid is section 8). */ .section--plain .card { background: var(--t-sand); } /* Card typography (P2, 2026-08-30): theme.css never styled .card__title, so interior card titles fell through to the base sheet's neutral --type-h3 (19.2-23.2px at 1.18) against Home's 17.92px/1.3 nav-card role (finding 9); .card__body rode the body default. Pinned to the Home role values so the same component reads the same in both systems. */ .card__title { font-size: 1.2rem; line-height: 1.3; } /* harmonized card-title role, both systems (2026-08-30) */ .card__body { font-size: 0.96rem; } .card__link { color: var(--t-blue); } /* Quiet hover (2026-09-01): the title underline is reserved but transparent at rest, so the base sheet's hover underline (a shorthand, which resets the colour to currentcolor) fades in over 160ms instead of popping; the colour shift eases on the same curve. */ .card__title a, .card__link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color var(--t-hover-duration) var(--motion-easing-standard), text-decoration-color var(--t-hover-duration) var(--motion-easing-standard); } .card__link:hover, .card__link:focus-visible { color: var(--t-seaglass-text); } /* Even-count grid modifier (2026-08-30, Therapy review): the base sheet's 40rem auto-fit makes 3 tracks in the prose column, so a 4-card grid orphans as 3+1. Two balanced rows at the same card width auto-fit already gives the 2-card related pairs. Doubled class (0,2,0) outranks the base rule; media-scoped so mobile keeps the base single column. */ @media (min-width: 40rem) { .card-grid.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Shrinkable card tracks (2026-10-20 audit U2): the base sheet's phone rule is a bare 1fr, and with 200% text a card's longest word widened it past the screen (In Her Own Backyard's pathway cards reached 437px on a 390px phone). minmax(0, …) here and in the 2- and 3-up rules; cards keep their default widths wherever their words fit. */ @media (max-width: 39.999rem) { .card-grid { grid-template-columns: minmax(0, 1fr); } } /* ...and below 16rem of grid width (enlarged text, or a screen narrower than about 305px: a 320px phone's grid is 17rem at the default size) the cards' padding tightens from 1.5rem to 0.625rem, so a long title word ("recommendations" at Chrome's Very large text on a 360px phone) stays whole. */ .card-grid { container: card-grid / inline-size; } @container card-grid (max-width: 16rem) { .card-grid > .card { padding: 0.625rem; } } /* A title word too long for its card hyphenates instead of splitting anywhere, but only in a card narrower than that word. Each card is a size container, so the narrow cards of a multi-column grid count too. The limit is "reproductive", the longest title word that can hyphenate in most grids (7.51rem), or "recommendations" (10.63rem) in the grids marked .card-grid--long-words (In Her Own Backyard). Chrome and Firefox hyphenate only words of 10 letters or more, 4 each side of the break, and never a capitalised word, so a title-case word still splits where it cannot fit. Those grids' one lowercase 9-letter word, "questions" (5.72rem), may hyphenate too in a card narrower than it. Safari has no letter limit and hyphenates capitalised words, so its limit is the longest capitalised title word, "Psychologically" (8.88rem). Inside these widths a shorter word can still hyphenate where it would fit a line of its own (October 20: "depression" with 32px text at 346-356px, and in Safari 6- to 10-letter words in narrow multi-column cards). */ .card-grid > .card { container: card / inline-size; } @container card (max-width: 7.53rem) { .card-grid > .card .card__title { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; } } @supports (-webkit-hyphenate-limit-before: 1) { @container card (max-width: 8.9rem) { .card-grid > .card .card__title { -webkit-hyphens: auto; hyphens: auto; } } } @container card (max-width: 10.65rem) { .card-grid--long-words > .card .card__title { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4; } } @container card (max-width: 5.72rem) { .card-grid--long-words > .card .card__title { hyphenate-limit-chars: 9 4 4; } } /* The base sheet's global `li + li { margin-top: var(--space-3xs) }` list rhythm leaks into card grids: every card after the first starts 4px lower inside its stretched grid cell (bottoms align, tops and title baselines stagger — measured on perinatal row 1, 2540.15 vs 2544.15). (0,1,1) outranks the (0,0,2) base rule. */ .card-grid > li { margin-top: 0; } /* Card grids fill the section's full content column (Matt, 2026-08-30, matching Home's dispersed/centred card band): the base sheet's `.section__inner > ul { max-width: var(--measure-default) }` is a 68ch READING-measure cap meant for prose lists, and card grids are