/* ============================================================================ GOOD LIFE PORTRAITS — EDITORIAL RESTYLE FOR THE SERVICE PAGES Supersedes services-newborn.css (single-page pilot). Covers 4 structurally identical pages: 1391 /services/newborn/ 1470 /services/family/ 1553 /services/pets/ 1589 /services/couples/ Author: Ace · 4 Sep 2026 · deploy into the child theme's glp-restyle.css OUT OF SCOPE: bikes (3426), boudoir (1479), niche-portraits (4124). --------------------------------------------------------------------------- THE BUG THIS RELEASE FIXES, AND WHY IT LOOKED SO STRANGE --------------------------------------------------------------------------- Ported to 3 new pages, headings rendered in Lato instead of Cormorant. The rules matched, carried a font-family, and still lost. Cause: the design tokens were defined on ONE page and used on FOUR. body.page-id-1391 .post-content { --glp-serif: 'Cormorant Garamond'… } <- 1391 only body.page-id-1391 …, body.page-id-1470 … { font-family: var(--glp-serif) } <- all four On 1470/1553/1589 `var(--glp-serif)` was undefined. An undefined var makes a declaration "invalid at computed-value time" — the property is not ignored, it becomes `unset`. font-family is inherited, so it fell back to the body font: Lato. ⚠️ THE TELL: if the webfont had merely failed to load, the computed font would have been GEORGIA — the next item in our stack. Lato is not in our stack at all, so it could only have arrived by inheritance. "Wrong font" and "wrong font that isn't even in your fallback list" are different bugs. Fix: ONE canonical page list, used by every rule INCLUDING the token block. --------------------------------------------------------------------------- HOW THIS FILE IS SCOPED · read before adding a page --------------------------------------------------------------------------- Every rule begins with the same prefix. Throughout the comments it is written as SCOPE: SCOPE = body:is(.page-id-1391, .page-id-1470, .page-id-1553, .page-id-1589) .post-content Two guards, both deliberate: · the :is() page list — cannot leak to any other page on the site. · `.post-content` — VERIFIED on all four pages: this wrapper opens after the Avada Template Builder header and closes before .fusion-tb-footer, so the global header, nav and footer are structurally unreachable from this file. TO ADD A PAGE: add its id to the :is() list. Do a find-and-replace on the whole list string so every rule changes together — including the token block. Missing the token block is exactly the bug described above, and it fails silently. `verify-restyle.py` check [7] now catches it. Only add pages with the verified structure below. Run the verifier first. --------------------------------------------------------------------------- NO ROW OR COLUMN NUMBERS. This is the other change in this release. --------------------------------------------------------------------------- The pilot targeted `.fusion-builder-row-4`, `.fusion-builder-column-5` etc. Avada generates those numbers in document order, so ANY structural edit in the builder silently re-points them at the wrong thing. Ben is about to delete the $495 column on newborn, which would have done exactly that. Sections are now addressed by their position among .post-content's children, which is identical on all four pages and unaffected by edits inside a row: .post-content ├── .fusion-fullwidth <- HERO (:first-child) ├── .fusion-container-anchor <- OFFERS (#studiospecial wrapper) ├── .fusion-fullwidth <- GALLERY (:nth-child(3)) └── .fusion-fullwidth <- BROWSE (:last-child) Columns inside the offers row are addressed so that deleting the $495 column changes nothing. Four top-level columns on every page: intro = :first-child (no accordion, no button) offer cards = :has(a.fusion-button) (2 per page — CONTENT, not position) what's included = :last-child (accordion, no button) Verified on all four pages: intro=1, cards=2, what's-included=1, and the what's-included h2 confirmed as "What's included in your portrait experience?". After the $495 column goes, the survivor still has a button and what's-included is still last, so nothing re-points. ⚠️ NO `:not(:has(…))` ANYWHERE, deliberately. It is valid CSS and browsers handle it, but the verifier's selector engine evaluates it as always-true — so a rule written that way could not be machine-checked against the live markup. Everything here is verifiable, which matters more than elegance on a file that will be ported to 90+ pages. BROWSER SUPPORT: :is() and :has() are supported by every current browser (:has() since Firefox 121, Dec 2023). If either failed, the affected rules would drop entirely and the page would fall back to Avada's own styling — unstyled but self-consistent and legible. Nothing that sets a background depends on :has(), so a dark band can never lose its light text. --------------------------------------------------------------------------- !important POLICY --------------------------------------------------------------------------- Avada Builder writes real properties inline on its title/text/button elements (specificity 1000), so those need !important or they silently lose. Avada also writes inline CUSTOM PROPERTIES (--awb-*) on rows; those are just variables its own stylesheet consumes, so redefining them is a clean hand-off rather than a fight. Rule: !important ONLY on properties Avada sets inline on a matching element. That is measured, not guessed — verify-restyle.py check [3] reports exactly which. Do not add more. --------------------------------------------------------------------------- WHAT THIS FILE NEVER DOES --------------------------------------------------------------------------- · Hides anything. There is no display:none. Content problems are reported. · Touches the Avada header, nav or footer (structurally impossible above). · Touches the masonry gallery's layout — see PART B4. · Adds a script, webfont request, @import or external asset. The Meta pixel and consent scripts are unaffected. ============================================================================ */ /* =========================================================================== PART A — TOKENS, TYPOGRAPHY, COMPONENTS (page-agnostic) =========================================================================== */ /* --------------------------------------------------------------------------- A1. Design tokens ⚠️ THIS BLOCK MUST CARRY THE SAME PAGE LIST AS EVERY OTHER RULE. If a page id appears anywhere else in this file but not here, every var(--glp-*) on that page resolves to `unset` and the page renders in Avada's Lato with Avada's colours. See the header note. Site palette for reference (Avada Global Colours): --awb-color1 #ffffff · --awb-color4 #839682 (already GLP sage) --awb-color7 #171717 · --awb-color8 #000000 --------------------------------------------------------------------------- */ body:is(.page-id-1391, .page-id-1470, .page-id-1553, .page-id-1589) .post-content { --glp-sage: #839682; /* DECORATIVE ONLY — fills, rules. Never text. */ --glp-light-sage: #A8BFA7; /* for use on dark grounds */ --glp-charcoal: #141413; --glp-off-white: #FAF9F5; --glp-mid-grey: #686868; --glp-hairline: #DFE6DE; /* sage-tinted, so sage carries light sections */ --glp-soft-sage: #EEF1EE; --glp-body-text: #3F3D3B; /* --glp-sage-ink is the ACCESSIBLE sage and exists for a reason. White on #839682 is 3.16:1 — it FAILS WCAG AA for a 12px button label. (The live /investment/ page has this same fault on its own buttons; worth fixing there too.) #5C7159 is the same hue, deep enough to pass wherever it is used here: white on it ................ 5.30 PASS as text on #FAF9F5 ......... 5.03 PASS as text/border on #EEF1EE .. 4.66 PASS Use --glp-sage-ink for anything carrying text or forming a UI boundary. Use --glp-sage for decoration only. */ --glp-sage-ink: #5C7159; --glp-sage-ink-hv: #4F6350; /* hover: white on it = 6.50 PASS */ --glp-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --glp-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; } /* --------------------------------------------------------------------------- A2. Base typography Avada's heading font on this site is Abril Fatface (--awb-typography1). Swapping it for Cormorant Garamond is the biggest single visual shift. FONTS ARE ALREADY LOADED — no request is added here. A sitewide