/** * WumeHealth - Site Styles * Wume Brand Style Guide aligned (Section 1 — Brand Foundations). * Color palette: cream / sand / sage / lbrown / brown / black ONLY. * Typography: Rhymes Text (heading) + Unica 77 LL (body). * Text-on-bg rule (page 36, binding): cream/sand/sage → black; lbrown/brown/black → cream. * V04 adds: mega-menu desktop backdrop (page 63), mobile full-screen overlay * menu (page 63), modal backdrop blur, and .wume-popup-panel for * inline-bottom newsletter-style pop-ups (page 64). * V05 adds: unified 3-column mega-menu panel (page 63) that replaces the * per-item dropdowns; serif item links, sand divider lines under * column kickers, drops down inside the navbar with absolute positioning. * V22 replaces the @media (max-width: 991.98px) navbar block — was a brown * full-screen overlay (V07/brand page 63), now a cream-on-cream R0 figma * accordion drawer with full-width rows, +/− pseudo-element indicator * keyed off aria-expanded, [hidden]-attribute-driven sublists, and focus * management; supports the new accordion markup added in base.html.twig * V25. Drawer is top-sheet style (sits under the sticky navbar at * top: var(--wume-nav-height)) and locks body scroll while open. * V23 spec-gap fixes for Phase A: * (1) Mobile-compact Request CTA — the navbar Request button now renders * at <992px per spec section 2.1.3. Adds .wume-btn-request mobile * override (smaller font/padding/letter-spacing) so the button fits * the three-region top bar without crowding the centered logo at * 375/390/414 viewports. * (2) Sub-list expand transition — the mobile drawer sublist now * animates open/closed via max-height: 0 → 800px with * transition: max-height 0.15s ease-out per spec section 2.10.2. * The previous [hidden]-attribute mechanic is replaced by an * .is-open class toggle (driven from the inline JS in * base.html.twig V26). 800px headroom is safely larger than the * longest sublist (Physicians, 4 items ≈ 240px tall). * V24 Phase B — per-page mobile reflow rules added at the umbrella 991.98 * breakpoint, co-located with the existing per-section CSS: * Universal — .wume-split breakpoint moved 768 → 991.98; .wume-section * and .wume-hero compress padding to 3rem 0 / 4rem 0 below 992 with * .wume-hero-title scaling to clamp(2rem, 7vw, 2.75rem); jump-link * target sections gain scroll-margin-top:106px under the sticky * announcement+navbar. * Home — services tile 7-up grid stacks to 1 column (was 2-up at <769); * testimonial col-md-4 row collapses to 1 column at <992 via * .row > .col-md-4 override; doctor-digest 4-up grid stacks to 1 * column (was 2-up at <769). * Care — 3-pillar row, 4-step process, and side-by-side comparison * cards (col-md-6 inside .wume-section-alt) all stack with a slim * sand-toned divider between the comparison cards. * Pathways — featured-pathways 4 col-md-3 teaser tiles stack to 1 * column; how-it-works diagram scales down to fit 320px viewports. * Physicians — sage-band CTA pair flex-direction column; Dr. Wu * credentials inner row collapses to 1 col (label-above-value); * 4-physician 2x2 grid (.wume-physician-row alternating) stacks; Our * Standard 6-pillar grid stacks; architectural-band fontsize scales. * Visit — 3-up Email/Phone/Office contact panels stack with bottom * borders restored; doctor-digest 4-up stacks; press-swatch wall * goes 6→2 columns at <992 and 2→1 at <576. * Conflict reconciliation — pre-existing 768 blocks for * .wume-services-grid (repeat(2, 1fr)), .wume-doctor-digest-grid * (repeat(2, 1fr)), and .wume-press-swatch-grid (repeat(3, 1fr)) * contradicted the design's 1-up-at-<992 mandate; they were * neutralized by setting 1fr at the new 991.98 umbrella with !important * so the 768 narrower-viewport rules cannot re-multi-columnize the * cascade. * V25 Phase B cascade fix — code-quality follow-up to V24: * (1) The pre-existing @media (max-width: 768px) block (.wume-section * padding 60px 0, .wume-hero 80px 0 60px, .wume-hero-title 2.2rem, * .wume-section-title 1.8rem) sat BEFORE the V24 991.98 umbrella in * source order and so was silently dead at <769 (991.98 always won * the source-order tiebreak between two equal-specificity rules that * both match the viewport). The 768 block has been moved AFTER the * 991.98 block and rewritten so it now wins for <769 viewports with * strictly tighter values: titles use clamp() with smaller floors * (clamp(1.8rem, 6vw, 2.2rem) for hero, clamp(1.4rem, 5vw, 1.8rem) * for section), padding uses --wume-*-phone tokens that are strictly * tighter than --wume-*-mobile, and units are rem (consistent with * 991.98) so cascade comparison is unit-consistent. * (2) Custom-property extraction added to :root — * --wume-section-padding-mobile (4rem), --wume-section-padding-phone * (3rem), --wume-hero-padding-mobile (5rem 0 4rem), * --wume-hero-padding-phone (4rem 0 3rem), --wume-mobile-sticky-offset * (calc(var(--wume-nav-height,64px)+42px)). 991.98 + 768 padding rules * and section[id] scroll-margin-top now read from these tokens. * (3) !important reduction — V24 added !important on .wume-services-grid, * .wume-doctor-digest-grid, .wume-press-swatch-grid, and the 575.98 * .wume-press-swatch-grid override (4 declarations) to defeat * conflicting 768 grid rules. The 768 conflicts are now deleted at * source; all 4 !important declarations dropped. Redundant 768 * duplicates of .wume-step-card, .wume-three-pillar, .wume-physician-row, * and .wume-contact-panel-grid (4 blocks) deleted. * Cache-bust ?v=23 → ?v=24. * V26 Phase C — extrapolated-pages mobile reflow rules added at the umbrella * 991.98 breakpoint (no figma reference; pattern extrapolation per spec * section 3.3). All 6 pages already inherited the universal Phase B * rules (.wume-section padding, .wume-hero scaling, section[id] scroll- * margin, Bootstrap col flatten); per-page additions are minimal. * Journal index — .wume-doctor-digest-grid already collapses to 1fr at * 991.98 (Phase B universal). New: .wume-pill-row flex-wraps with * tighter gap on mobile so the 6-pill filter row does not overflow at * 375; .wume-pill scales font-size and padding down for thumb-friendly * tap targets. * Journal detail — .wume-article-body horizontal padding (1.25rem) so * reading-column copy doesn't hug the viewport edge at <992; pull-quote * scales down (1.6rem → clamp(1.2rem, 4.5vw, 1.5rem)) and indent * compresses (24px → 16px) so it doesn't dominate at 375. * Search — .wume-search-input-row stacks (input above button) so the * search field gets full width; .wume-search-suggestions flex-wraps with * tighter gap for the 6 suggestion pills; .wume-search-empty centers * with 1.25rem horizontal padding. * Account — .wume-account-split breakpoint moved 768 → 991.98 to align * with the umbrella, .wume-account-split-pane padding tightens further * at <992 (60px 32px → 48px 24px). Sign-in form pane is naturally first * in DOM order so explicit `order: -1` is unnecessary; the existing * DOM ordering already stacks form-above-invite as the spec intends. * FAQ — accordion already vertical; .wume-faq-category gains tighter * bottom margin at <992 (40px → 28px) so 6 categories don't push the * footer too far. * 404 — .wume-404-band already centered single-element; minor padding * tightening at <992 (no separate band rule needed; universal .wume- * hero-tagline + .wume-hero-title scaling applies). * Cache-bust ?v=24 → ?v=25. * V27 Mobile top-bar polish (post-domain-rename feedback): * (1) Suppress Bootstrap's default 4px box-shadow focus ring on the * hamburger (.navbar-toggler) and the sr-only in-drawer close X * (.wume-mobile-menu-close) at every interactive state (:focus, * :focus-visible, :active). The .border-0 utility class on the * hamburger only kills the CSS border property; Bootstrap's :focus * rule applies a separate rgba(0,0,0,0.65) 0 0 0 0.25rem box-shadow * that reads as a heavy black "border" on click — removed entirely * per user feedback. * (2) margin-right: 12px on the hamburger so it doesn't sit flush * against the logo's left edge at narrow viewports — there was zero * gap (hamburger right=57.89px, logo left=57.89px), causing visual * crowding even without the focus ring. * Cache-bust ?v=25 → ?v=26. * V28 figma R1 mobile alignment — two corrections from the 2026-05-12 visual * diff (figma-renders/r1-mobile-{care,pathways,physicians,visit}.png vs * live-mobile-*.png): * (1) Section padding rhythm — mobile reflow tokens bumped to widen the * vertical breathing room between sections on Care/Home/Physicians/ * Visit so the live pages don't read as compressed against the figma * pacing. --wume-section-padding-mobile 4rem → 5rem (+25%), * --wume-section-padding-phone 3rem → 4rem, --wume-hero-padding-mobile * 5rem 0 4rem → 6rem 0 5rem (+20%), --wume-hero-padding-phone * 4rem 0 3rem → 5rem 0 4rem. * (2) Brand-mark band — new .wume-brand-mark class added (cream ground, * full-width wume-wordmark.png) so every page can render the giant * brand wordmark figma R1 places between the last content section and * the brown footer. base.html.twig V31 inserts the markup once in the * shared footer area so all 5 main pages (and journal/search/account/ * faq/404) pick it up automatically. * Cache-bust ?v=26 → ?v=27. * V29 figma R1 mobile alignment — editorial photo bands across the 4 main * pages. Adds the .wume-photo-band utility class (full-bleed via * 100vw + center-shift, max-height clamped at 540/420/360 by viewport * so portrait photos don't dominate). Markup additions in home/care/ * physicians/visit templates insert 7 total photo bands (Home 1, * Care 3, Physicians 2, Visit 1) at section boundaries where figma * R1 shows editorial photos and live did not. Closes the cross-cutting * finding from the 2026-05-12 visual diff. Cache-bust ?v=27 → ?v=28. * V30 two more figma R1 alignment fixes: * (1) Pathways "How It Works" diagram — replaces the compass-style * .wume-how-it-works-* (N/E/S/W absolute-positioned phase labels * around a center label) with .wume-pathway-rings, an inline-SVG * 4-overlapping-circle rosette matching figma R1's concentric/ * overlapping-ring visualization. Brand colors via CSS custom-property * tokens; viewBox-driven scaling. The prior .wume-how-it-works-* CSS * block is removed entirely (no other consumer). * (2) Physicians 3-up thumbnail row — adds .wume-physician-thumbnail-row * (grid-template-columns: repeat(3, 1fr)) and child rules so the * non-Wu physicians (Hammerman + 2 placeholder Lorem Ipsum) render as * a compact inline row matching figma R1 mobile. The prior 3 stacked * .wume-physician-row sections in physicians.html.twig are consolidated * by template restructure. Existing .wume-physician-row CSS untouched * (still in use for Dr. Wu's full-width credential card). Drops to * 1-up only at <360px. * Cache-bust ?v=28 → ?v=29. * V31 corrects the V30 Pathways "How It Works" diagram — the 4-overlapping- * circle rosette was a misreading of figma. The actual figma R1 mobile * diagram is a brown panel with TWO cream-stroke lines: a vertical * "Ongoing Care" line (with downward arrowhead) and a curved bezier * "Signature Pathway" line bowing right and rejoining. .wume-pathway-rings* * rules removed and replaced with .wume-pathway-flow* (background + * lines + labels). Markup also restructured in pathways.html.twig V09. * Cache-bust ?v=29 → ?v=30. * V32 invite panel full rebuild — figma R1 mobile [94:5575]. Replaces the * V21 brown-on-cream override (which itself replaced the original * cream-on-cream invisible-text bug) with sand-on-cream + sage-green * SEND. Color story flips from dark-mode panel to light-mode: * - .wume-invite-panel background: brown → sand * - .wume-invite-panel color: cream → brown * - Close X color: cream → brown * Markup-aligned rules added: .wume-invite-panel-header (kicker + X * bar), .wume-invite-panel-kicker (REQUEST/INVITATION two-line caps * label), .wume-invite-panel-form-card (cream inset for the form), * .wume-invite-field + .wume-invite-label + .wume-invite-input (line- * underline form rows replacing Bootstrap .form-control box style), * .wume-invite-fieldset + .wume-invite-check (checkbox groups for * Interest + Contact Method), .wume-invite-send (sage-green full- * width SEND replacing Submit/Cancel pair), .wume-invite-panel-footer * (address + emails + phone block below the form card). * The V07 baseline rules for .wume-invite-panel-inner h2/p/.form- * control are removed (no longer applicable — different markup). * Cache-bust ?v=30 → ?v=31. * V33 invite panel responsive layout — adds the desktop two-column card * from figma [94:3447]. At <992px the panel stays as the V32 mobile * stack (cream form-card inset, footer below). At ≥992px the panel * becomes a 2-column grid: sand LEFT column (kicker + serif heading * + subtitle + bottom contact info) and cream RIGHT column (form * filling full height). Form-field pairs (firstName+lastName, * email+phone) become 2-col on desktop. Checkbox groups (interest, * contact-method) wrap their labels in .wume-invite-check-row so * they're stacked on mobile and inline on desktop. Panel width * bumped from 480px to 100vw mobile / 960px desktop. Close X moves * to absolute top-right of the panel. Cache-bust ?v=31 → ?v=32. * V34 Home-page figma R1 desktop [94:681] high-fidelity overrides — all * scoped via `body.is-home-page` so other pages stay untouched. * (1) Hero text alignment flips center → left. .wume-hero gains * position:relative; a new .wume-hero-content wrapper holds the title/ * subtitle/CTA pair at max-width 60%. The "from the practice of Dr. * Jessica Wu" kicker moves out of the centered position above the * heading and pins to absolute top-right of the hero band via a new * .wume-hero-tagline--corner modifier. Below 992 the kicker falls back * to centered/inline (figma mobile keeps centered hero so the corner * pin is desktop-only). * (2) Navbar background flips cream → brown on the home page, so the * announcement bar + navbar + brown hero form one continuous brown * chrome surface (figma R1 shows no two-tone break). Nav links + Sign * In + Cart icon recolor cream so they read on the brown ground. * Border-bottom changes sand → lbrown so the seam isn't visible. * (3) New .wume-press-logo-grid utility (4-up real logo images, * max-height 48px, contain-fit). Replaces the 6-up text-swatch grid * on the home press strip. Stacks 4→2 at <992 and 2→1 at <576. * Cache-bust ?v=32 → ?v=33. * V35 Care-page figma R1 desktop [94:1510] high-fidelity overrides — all * scoped via `body.is-care-page` so other pages stay untouched. * (1) Hero background flips cream → sage. Hero becomes a 2-column * layout: heading + jump-links in the LEFT column, body paragraph * indented to the middle-right column. New .wume-hero-body class for * the right-column body paragraph (replaces the centered * .wume-hero-subtitle treatment on this page). * (2) Jump links on Care flip from centered to LEFT-aligned and gain * a bullet/marker prefix via :before pseudo-element. Override scoped * so other pages keep the centered cluster. * (3) Announcement bar hidden on Care since figma shows no * announcement strip above the sage-toned navbar. * (4) Navbar background flips cream → sage, border-bottom darker-sage. * Nav-link / Sign In / cart-icon colors stay BLACK per the brand * text-on-bg rule (sage → black, page 36 binding). * (5) New .wume-three-pillar-rows class for the Care 3-pillar block: * 3 stacked rows, each a 3-column row (small square photo LEFT + * kicker MID-LEFT + body paragraph RIGHT). Distinct from * .wume-three-pillar (still used by physicians.html.twig for the * "Our Standard" 6-pillar grid; untouched). * (6) New .wume-step-card-body-row class for the step-card LEFT * half's sub-2-column treatment: narrow far-LEFT column for the * "step I." kicker, wider INDENTED middle column for the body * paragraph. Heading stays on top spanning the full left half. * Cache-bust ?v=33 → ?v=34. * V36 Care-page V08-fix: forces all 4 step-card photos to the RIGHT side * via body.is-care-page .wume-step-card > .wume-step-card-image * { order: 2 }, overriding the existing .wume-step-card:nth-child(even) * rule that only flipped even-indexed images. Figma R1 Care keeps * photos on the RIGHT for all 4 steps (no alternation); the * alternation pattern was unique to live and a fidelity miss in V35. * Scoped to body.is-care-page so other pages that consume * .wume-step-card keep their alternating behavior. * Cache-bust ?v=34 → ?v=35. * V37 Pathways-page figma R1 desktop [94:1855] high-fidelity overrides — * all scoped via `body.is-pathways-page`. Mirrors the Care V35 hero * pattern but uses BROWN chrome (Pathways' existing hero is brown). * (1) Announcement bar hidden on Pathways since figma shows no * announcement strip above the brown-toned navbar. * (2) Navbar background flips cream → brown, border-bottom darker- * brown. Nav-link / Sign In / cart-icon colors flip to cream per * the brand text-on-bg rule (brown → cream, page 36 binding). * (3) Hero becomes a 2-column layout: heading + jump-links anchor * the LEFT column, body paragraph (.wume-hero-body) indented to the * middle-right column. * (4) Jump links flip from centered to LEFT-aligned and gain a "□" * bullet/marker prefix. Cream-text + cream-border colored via scoped * selectors (replaces the inline `style="color: var(--wume-cream)"` * attributes that lived on each in pathways.html.twig V09). * Cache-bust ?v=35 → ?v=36. * V38 Physicians-page figma R1 desktop [94:1992] high-fidelity overrides — * all scoped via `body.is-physicians-page`. Mirrors the Care V35 * pattern but uses SAND chrome (warm beige) to match figma's hero * tone. * (1) Announcement bar hidden on Physicians. * (2) Navbar background flips cream → sand, border-bottom sand → * lbrown. Nav-link / Sign In / cart icon colors stay BLACK per the * brand text-on-bg rule (sand → black). * (3) Hero becomes a 2-column layout: heading + jump-links anchor * the LEFT column, body paragraph (.wume-hero-body) indented to the * middle-right column. Hero element gains class `wume-section-alt` * in the template so the existing .wume-hero.wume-section-alt * compound rule paints the hero sand. * (4) Jump links flip from centered to LEFT-aligned and gain "□" * bullet/marker prefix on each link. * Cache-bust ?v=36 → ?v=37. * V39 Visit-page figma R1 desktop [94:2183] high-fidelity overrides — all * scoped via `body.is-visit-page`. Lighter than Care/Pathways/ * Physicians since figma's Visit hero is CREAM (same as the navbar * base) — no chrome color flip is needed; only the announcement bar * is hidden so the cream surface runs continuous from page-top * through the hero. * (1) Announcement bar hidden on Visit. * (2) Hero becomes a 2-column layout: heading + jump-links anchor * the LEFT column, body paragraph (.wume-hero-body) indented to the * middle-right column. * (3) Jump links flip from centered to LEFT-aligned and gain "□" * bullet/marker prefix on each link. * Cache-bust ?v=37 → ?v=38. * V40 Mobile fidelity fix across all 5 pages (Home V34, Care V35, * Pathways V37, Physicians V38, Visit V39). The previous mobile * fallbacks wrongly re-centered the hero treatment and the jump-link * cluster on <992. Figma mobile keeps: * - Hero heading + body LEFT-aligned (just like desktop, but body * stacks BELOW heading instead of in a right column). * - Home kicker (FROM THE PRACTICE OF DR. JESSICA WU) LEFT-aligned * at the TOP of the hero (above the heading), not centered. * - Jump links VERTICALLY STACKED, each on its own row, LEFT- * aligned with the "□" marker prefix. * Changes: * (1) V34 Home @media block: text-align center → left on * .wume-hero and .wume-hero-tagline--corner. * (2) V35 Care, V37 Pathways, V38 Physicians, V39 Visit @media * blocks: .wume-jump-links justify-content:center → * flex-direction:column + align-items:flex-start + gap:12px, * so the jump-links stack vertically. * Cache-bust ?v=38 → ?v=39. * V41 Physician Application form support — figma R1 [PhysicianApplication * desktop + PhyisicanApplicationMobile mobile]. The new * `#physicianApplicationPanel` aside uses the SAME `.wume-invite-panel` * class as the patient invite panel so it inherits all V32+V33 * styling (sand outer + cream form card + line-underline inputs + * sage SEND + 2-col responsive). Only the file upload field needs * new styling — new .wume-invite-upload-btn class (cream-on-sand * cube button below the field label, replaces a "choose file" file- * input control). Cache-bust ?v=39 → ?v=40. * V42 Home bottom "Request an Invitation" CTA layout fix to match figma * mobile HomeMobile.jpg bottom band: * (1) Heading + subtitle left-align (text-center removed from * section markup in home.html.twig V14). * (2) Subtitle rule margin override: section-scoped via * `body.is-home-page .wume-invite-form .wume-section-subtitle` * to drop the centered `margin: 0 auto` so the subtitle * left-aligns inside the container. * (3) GET STARTED button on the bottom CTA flips cream-on-brown * (old V09 inline style) to sage-on-cream (figma color), and * becomes full-width. * (4) LOGIN link stays centered below the full-width button via * the existing `d-flex flex-column align-items-center` wrapper. * Photo (hourglass product image figma shows above the subtitle) * is deferred to a later cycle — figma hash not yet identified * (REST API node-tree endpoint 429-blocked). * Cache-bust ?v=40 → ?v=41. * V43 Footer fidelity fix to match figma desktop + mobile sage footer: * (1) `.wume-footer` background flips brown → SAGE GREEN. Text and * link colors flip from cream-on-brown to BLACK-on-sage per the * brand text-on-bg rule (sage → black, page 36 binding). * Affected rules: .wume-footer, .wume-footer a, * .wume-footer-heading, .wume-footer-text, * .wume-footer-newsletter-heading, .wume-footer-links a, * .wume-footer-bottom, .wume-footer-bottom p, * .wume-footer-newsletter .form-control (input bg + border + * placeholder colors), .wume-footer .wume-btn-outline. * (2) `.wume-footer-newsletter` form layout flips from stacked * (input above button) to INLINE (email input on LEFT + SUBSCRIBE * on RIGHT) via display:flex on the form. Mobile fallback under * 575.98 stacks them back vertically. * Cache-bust ?v=41 → ?v=42. * V44 follow-up to V43 inline newsletter: hardens the rules to win over * Bootstrap `.form-control { width: 100%; }` and the `mb-2` + `w-100` * utility classes that were also on the input/button in the markup. * Adds `!important` on flex-direction:row on the form, on width:auto * on the input + button. The markup change in base.html.twig V47 * drops `mb-2` and `w-100` from the input/button — making the * !important fallbacks belt-and-suspenders for any custom override. * Cache-bust ?v=42 → ?v=43. * V45 Navbar fidelity pass to match figma R1 home frame [94:681]. Markup * partner is base.html.twig V48 (logo no me-auto, nav-items mx-auto, * hamburger moved to far right, dual-PNG wordmark, search + person * icons replacing the Sign In text link, request button hidden on * mobile). * Scoping: most rules are body.is-home-page so other pages keep their * current navbar styling. The global primitives are: .wume-logo-img * defaults (cream variant hidden by default), .wume-nav-icon sizing, * and the @media (max-width: 991.98) mobile margin rule. * (1) Announcement bar on home flips brown → sage, text + link colors * flip cream → brown. * (2) `.wume-navbar` on home loses its border-bottom so the brown * flows seamlessly from navbar into the brown hero. * (3) Wordmark visibility — `.wume-logo-img--light` hidden by default, * `.wume-logo-img--dark` visible; on body.is-home-page these flip. * (4) New `.wume-nav-icon` primitive for the search / person / cart * icons — uniform 38×38 hit target, color inherits, hover fades * opacity to 0.7. * (5) Desktop nav links on home drop the global uppercase + caps- * letter-spacing and render in sentence case (figma shows "Care" * not "CARE"). * (6) `.wume-btn-request` on home flips from solid black to cream- * outline on brown (transparent fill, 1px cream border, cream * text); hover inverts to cream fill + brown text. * (7) Mobile (<992): `.wume-nav-right` gets margin-left:auto so the * cart cluster anchors right of the (empty) middle, and the * hamburger sits flush after it. * Cache-bust pairs with base.html.twig V48 ?v=43 → ?v=44. * V46 Follow-up to V45: search + person icons rendered black on the brown * home navbar because they use `color: inherit` and the navbar had * no color set, so they fell back to the body's default. The cart * worked because it has its own explicit home-page color rule. * Hamburger also rendered in Bootstrap's default rgba(0,0,0,0.65). * Fix: set `color: var(--wume-cream)` on body.is-home-page * .wume-navbar (cascade) plus an explicit rule on the .navbar-toggler * to override Bootstrap's dark default. Nothing else changes — * existing explicit color rules on .nav-link and .wume-cart-icon * remain as belt-and-suspenders. * Cache-bust pairs with base.html.twig V49 ?v=44 → ?v=45. * V47 Fix dual-wordmark regression on non-home pages (audit item A). * The V45 rule `.wume-logo-img--light { display: none; }` was * being beaten in the cascade by an older `.wume-logo img * { display: block; }` rule (specificity 0,1,1 vs 0,1,0), so both * wordmark variants rendered side by side on Care, Pathways, * Physicians, and Visit. Fix: prefix each show/hide selector with * `.wume-logo ` (specificity 0,2,0) so they win the cascade. No * markup change. * V48 Move WUME wordmark INTO the sage footer (audit item B). Pre-V48 * the wordmark rendered as a standalone
band above the footer, using the original black-on-white * opaque PNG — which read as a giant white-tile rectangle. Figma R1 * shows the large wordmark INSIDE the sage footer as one cohesive * band, cream-on-sage. Changes: * (1) `.wume-brand-mark` rules retired (the standalone cream-tile * element no longer exists in markup). * (2) New `.wume-footer-wordmark-row` + `.wume-footer-wordmark` * rules render the wordmark at full container width at the top * of the sage footer. * (3) Markup move lives in base.html.twig V50 (section deleted, * new inserted as first row of `.wume-footer .container`). * The img src points at the new wume-wordmark-cream.png * transparent-background variant so cream letters appear * directly on the sage ground. * Cache-bust pairs with base.html.twig V50 ?v=45 → ?v=46. * V49 Bottom "Request an Invitation" CTA — photo background + brown * translucent overlay (audit item C). Figma R1 shows this section * as the editorial "hands holding hourglass" photo (figma image hash * 73f1a227e63e03c4b59e4f67d951933272caa5d6.png) with a brown * ~55%-opacity tint layered on top. Live previously rendered as a * flat brown band. Single-rule CSS change targeting * `.wume-invite-form.wume-section-brown` — uses multi-background * with a linear-gradient (overlay) above a background-image (photo). * Applies globally; every page that uses this section markup picks * up the treatment. * Cache-bust pairs with base.html.twig V51 ?v=46 → ?v=47. * V50 Heading + subtitle left-alignment cascade (audit item D). Figma * R1 left-aligns most section headings and supporting bodies; the * live templates had `text-center` on the `
` markup of * many sections, which Bootstrap turns into `text-align: center * !important`, cascading down to the heading + subtitle inside. * Fix: remove `text-center` from the targeted sections (care * bottom CTA, pathways integrated-care, physicians experience + * truly + practice + heading wrappers, home services strip + * testimonials wrapper, visit heading wrapper) in the templates. * The press-strip and tile-card centered usages stay as-is. CSS * gains a `:not(.text-center)` rule on `.wume-section-subtitle` * so the subtitle's `max-width: 600px; margin: 0 auto` box- * centering doesn't leave a narrow centered column under a left- * aligned heading. * Cache-bust pairs with base.html.twig V52 ?v=47 → ?v=48. * V51 Extend the V50 `:not(.text-center)` subtitle rule to also cover * `.wume-invite-form:not(.text-center)` so the Care bottom CTA's * subtitle anchors to the container's left edge instead of staying * in a 600px centered box next to the now left-aligned heading. * Cache-bust pairs with base.html.twig V53 ?v=48 → ?v=49. * V52 Home mobile carousels (audit item 2) + sage footer 2-photo grid * (audit item 4). * Item 2: Home's `.wume-services-grid` (7 treatment tiles) and the * "Real stories" testimonial row both stack vertically on mobile, * doubling the page height vs figma's horizontal-scrolling * carousels. New @media (max-width: 991.98) rules flip both to * flex-row + overflow-x auto + scroll-snap-type x mandatory. Each * tile takes ~75% of viewport width, each testimonial card takes * ~80%, so the next tile/card peeks at the right edge as an * affordance. The testimonial row gets a scoping class * `wume-testimonial-row` added in home.html.twig V17 so this rule * doesn't bleed onto other Bootstrap `.row` elements site-wide. * Item 4: New `.wume-footer-photos` 2-col CSS grid rule for the * 2-photo block inside the sage footer (markup added in * base.html.twig V54 between the wordmark row and the content * row). Photos use the two figma Section-8 hashes already * identified in the home image map memory (`3745aace…` and * `9668b693…`) — portrait crops, full-width on mobile + desktop. * Cache-bust pairs with base.html.twig V54 ?v=49 → ?v=50. * V53 Final-figma foundation: real @font-face for Rhymes Text Light (replaces * the Georgia fallback for all headings); palette corrected to the * design-system Color board (cream/stone #F2F0EB → #F4F1EB, sand * #D4C9B0 → #E3DDCD); heading weight 400 → 300 (all headings Light); * heading tracking -0.02em → -0.03em (-3%). Paired with base ?v=52. * V54 Home final-figma rebuild styles: .wume-hero-final + .wume-hero-band, * .wume-section-sage feature band, .wume-pathway-cards (4 Signature * Pathways), .wume-steps (what-happens-at-wume), .wume-img-cover, * .wume-link-underline, .wume-stories-head. Pairs with home.html.twig * V18 and base.html.twig ?v=53. * V55 Pathway-card corner icon (.wume-pathway-card-icon, bi-arrow-up-right): * cards become position:relative with the up-right arrow pinned * top-right. Pairs with home.html.twig V20 + base ?v=54. * V56 Home rebuilt to match home.png section crops: per-section bg classes * (sand/stone/sage), sage/sand buttons, animated hero carousel, the * editorial feature pattern (heading on top + small-caps label with * indented body + side image), top-left card arrows, step-number * column, brown story cards, photo-overlay CTA. Pairs with * home.html.twig V21 + base ?v=55. * V57 Home redone with EXACT get_design_context values: 36px .wume-x * container, sharp sage/sand buttons (no radius, 14px black caps), * 14px caps underline links, translucent cards with the real figma * arrow asset + 30px label, 50/40/30px headings, real figma photos. * Pairs with home.html.twig V22 + base ?v=56. * V58 Navbar to figma: announcement warm-brown #715434 no-underline (X hidden), * nav bg sand, nav links sentence-case 16px regular, Start-With-WUME a * translucent outlined box (black caps, sage on hover), 36px margins. * Pairs with base ?v=57. * V59 Nav CTA border -> white (was dark); nav search/account/cart icons * swapped to the real figma SVGs (.wume-nav-icon-img). Pairs base ?v=58. * V60 Section-bg selectors made specific (.wume-section.wume-bg-*) so sage + * sand bands win over .wume-section; pathway tiles + stories are real * auto-carousels; tiles 464px, sage on hover, arrow -38deg; what-happens * label one line. Pairs home.html.twig V23 + base ?v=59. * V61 Home bottom + nav + footer figma fixes: Real-stories section bg * stone -> sand; story cards turn sand on hover (dark text + shadow so * they stay visible on the sand ground); CTA rebuilt as a frosted-glass * panel over the (parallax) warm hourglass photo with a sharp top-right * inset; scrolled nav gets the figma 85%-sand + blur glass; the * full-page mega-menu veil (body::before) is neutralized so the glass * lives on the nav, not over the page; nav-link hover is a frosted * square (not underline) + nav icons fade on hover; footer WUME wordmark * constrained 100% -> 440px and the 2 footer photos capped to a 440px * column (were full-width). Pairs home.html.twig V25 + base ?v=60. * V62 Home-figma round 2: pathway arrow -> top-right corner; what-happens * image stretches to the steps height (was centered with big gaps); nav * scroll-glass dropped 85% sand -> 55% stone so it reads as glass; * Real-stories reverted sand -> stone (so the sand card-hover shows); * footer rebuilt to the figma grid (black wordmark, uppercase address * mid / social right / legal row bottom, less top space). Pairs * home.html.twig V26 + base ?v=61. * V63 Dr Wu (World) section now layers the portrait over the stone-arches * background (.wume-drwu-stack/bg/fg) at 74% width, floated bottom-right * with a shadow (figma "doctor floats on a background picture"); Expert * image swapped to the figma 3-people wood-room shot. Pairs home V27 + * base ?v=62. * V64 Round 3 polish: nav scroll-glass 0.55 -> 0.30 (clearly translucent); * footer address lines stack (were inline), "Join the WUME world" * centered with the photos; footer left column 440 -> 560px, wordmark * -> 540px, photos -> 560px, legal row confined to the left column and * justified to the picture edges, social pulled ~75px off the page edge; * Dr Wu portrait centered over the arches. Pairs home V28 + base ?v=63. * V65 PIXEL-EXACT pass (measured from figma home.png @1440 = 1:1 CSS px): * footer rebuilt to exact px — content x=36..1342, wordmark 560px (aligns * with the 36..596 pictures), col gap 132px (address starts x=728), * pictures 560px wide / aspect 274:350 (=350px tall), vertical gaps * top42/wordmark->pics70(28+42)/pics->legal42/bottom13, address+social * wrapped in .wume-footer-right-top (col2), news bottom-aligned with the * pictures, legal justified to the picture edges. `.wume-section` padding * 80 -> 44px (figma inter-section gaps are 68-100px, not 160). Nav -> near * -clear glass rgba(255,255,255,.10/.12)+blur at BOTH states (figma liquid * glass). Pairs home V28 + base ?v=64. * V66 Footer row2 pinned to grid-template-rows auto/350px/auto so the news box * can't inflate it — pics->legal gap back to the figma 42px (was 82). * V67 404 page rebuilt to figma: .wume-404 cream centered error text + * .wume-404-photos full-width 6-photo band (was a broken left-aligned * single backdrop image with no desktop CSS). Pairs 404.html.twig V04 + * base ?v=66. * V68 Stage-2 desktop 404: figma photo gaps 16px + 367px tall + ~130px text->band * gap, scoped @min-width:992px (mobile 404 untouched). Pairs base ?v=67. * V69 Navbar solid on scroll for non-home pages (home keeps brown chrome). Hero * bodies un-squeezed at wide viewports: care/pathways/physicians intro moved * below the heading + widened (max-width 340px -> 670/470/470). Pairs ?v=74. * V70 Restored figma liquid-glass: navbar translucent/frosted at the top (rgba * white 0.10 + 20px blur); .is-scrolled flips it solid cream as you scroll. * V69 had wrongly flattened the top to solid too. Pairs base ?v=75. * V71 Reverted the erroneous solid-on-scroll: .is-scrolled is translucent again * (rgba 0.12 + 22px blur — content shows through). The 4 per-page navbar * color overrides scoped :not(.is-scrolled) so they tint only the first * screen; once scrolled the bar is translucent site-wide. Pairs base ?v=76. * V72 Announcement strip wired to figma R1: shown on HOME (brown band, cream * text via the default) + SEARCH (sage band, dark text). Removed the wrong * sage-on-home override (pixel sample: home #4D3D2D/#715434 brown, search * #949B88 sage). Pairs base ?v=77. * V73 Mobile home announcement bar deepened from the default lbrown (#715434) * to --wume-brown (#4D3D2D) — the figma mobile home frame is a shade darker * than desktop. Phones only. Pairs base ?v=78. */ /* ── Unica 77 LL Web Fonts ── */ @font-face { font-family: 'Unica77'; src: url('../fonts/Unica77LLWeb-Regular.woff2') format('woff2'), url('../fonts/Unica77LLWeb-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Unica77'; src: url('../fonts/Unica77LLWeb-Medium.woff2') format('woff2'), url('../fonts/Unica77LLWeb-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } /* ── Rhymes Text (heading family) ── Light is the only weight the final design uses; supplied from maxitype.zip, served from /fonts/. OTF is accepted by all modern browsers via format('opentype'). */ @font-face { font-family: 'Rhymes Text'; src: url('../fonts/RhymesText-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; } :root { /* === BRAND COLOR PALETTE (Wume Brand Style Guide page 35) === */ --wume-cream: #F4F1EB; --wume-sand: #E3DDCD; --wume-sage: #949B88; --wume-lbrown: #715434; --wume-brown: #4D3D2D; --wume-black: #000000; --wume-paper: var(--wume-cream); /* Wume "white" — use anywhere CSS would normally use #ffffff */ /* Text-on-background rule (page 36, binding) */ --wume-text-on-cream: var(--wume-black); --wume-text-on-sand: var(--wume-black); --wume-text-on-sage: var(--wume-black); --wume-text-on-lbrown: var(--wume-cream); --wume-text-on-brown: var(--wume-cream); --wume-text-on-black: var(--wume-cream); /* === TYPOGRAPHY === */ --wume-font-heading: 'Rhymes Text', Georgia, 'Times New Roman', serif; --wume-font-body: 'Unica77', Arial, Helvetica, sans-serif; --wume-w-heading-display: 300; /* Rhymes Text Light, hero only */ --wume-w-heading: 300; /* Rhymes Text Light — final figma: all headings Light */ --wume-w-body: 400; --wume-w-sub: 500; /* Unica 77 Medium for ALL CAPS kicker/CTA */ --wume-tracking-heading: -0.03em; /* final figma: -3% on headings */ --wume-tracking-caps: 0.06em; /* Leading: brand strict is size+2pt (~1.13 ratio) — relaxed to 1.4 for body prose readability; tables/forms get the brand-strict editorial rhythm. */ --wume-lead-body: 1.4; --wume-lead-clinical: 1.45; --wume-lead-heading: 1.13; /* === LAYOUT === */ --wume-nav-height: 72px; /* === MOBILE REFLOW TOKENS (V25 Phase B cascade fix; V28 widened for figma rhythm) === Named replacements for the 4rem / 3rem / 106px magic numbers that the Phase B 991.98 + 768 media blocks shared. V28 bumped section padding 4rem → 5rem (mobile) and 3rem → 4rem (phone), and hero padding 5rem 0 4rem → 6rem 0 5rem (mobile) and 4rem 0 3rem → 5rem 0 4rem (phone) so mobile sections breathe closer to figma R1 mobile rhythm. Section padding +25%, hero padding +20%. */ --wume-section-padding-mobile: 5rem; /* applied at <992 (tablet/phone) — V28: was 4rem */ --wume-section-padding-phone: 4rem; /* applied at <769 (phone-tighter) — V28: was 3rem */ --wume-hero-padding-mobile: 6rem 0 5rem; /* V28: was 5rem 0 4rem */ --wume-hero-padding-phone: 5rem 0 4rem; /* V28: was 4rem 0 3rem */ --wume-mobile-sticky-offset: calc(var(--wume-nav-height, 64px) + 42px); /* announcement + nav */ } /* ── Home (final figma) — EXACT values from get_design_context [446:920] ── */ /* 36px-margin content container (figma 1440 grid) */ .wume-x { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 36px; } /* section backgrounds */ .wume-section.wume-bg-sand { background: var(--wume-sand); } .wume-section.wume-bg-stone { background: var(--wume-cream); } .wume-section.wume-bg-sage { background: var(--wume-sage); color: var(--wume-black); } /* buttons — SHARP corners, 14px black caps, sage / sand (figma 446:983 / 446:973) */ .wume-btn-sage, .wume-btn-sand { display: inline-block; border: none; border-radius: 0; padding: 15px 80px; font-family: var(--wume-font-body); font-weight: 500; font-size: 14px; line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wume-black); cursor: pointer; } .wume-btn-sage { background: var(--wume-sage); } .wume-btn-sand { background: var(--wume-sand); } .wume-btn-sage:hover { background: #868d77; color: var(--wume-black); } .wume-btn-sand:hover { background: #d6cdb6; color: var(--wume-black); } /* links — underline at default offset, 14px black caps (figma 446:933 etc.) */ .wume-link-underline { display: inline-block; margin-top: 28px; font-family: var(--wume-font-body); font-weight: 500; font-size: 14px; line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; color: inherit; } /* HERO (sand) — centered, 50px headline, animated photo carousel */ .wume-hero-final { background: var(--wume-sand); padding: 72px 0 0; text-align: center; } .wume-hero-final-copy { max-width: 820px; margin: 0 auto; } .wume-hero-final-title { font-family: var(--wume-font-heading); font-weight: 300; font-size: 50px; line-height: 1.2; letter-spacing: -1.5px; margin: 0 auto; max-width: 780px; } .wume-hero-final-subtitle { font-family: var(--wume-font-body); font-weight: 400; font-size: 18px; line-height: 1.4; max-width: 563px; margin: 28px auto 32px; } .wume-hero-final .wume-btn-sage { margin: 0; } .wume-hero-band { overflow: hidden; margin-top: 56px; } .wume-hero-band-track { display: flex; gap: 16px; width: max-content; animation: wume-band-scroll 60s linear infinite; } .wume-hero-band:hover .wume-hero-band-track { animation-play-state: paused; } .wume-hero-band-track img { flex: 0 0 auto; width: 243px; height: 365px; object-fit: cover; } @keyframes wume-band-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 8px)); } } /* feature pattern: 40px heading on top, [185px label | indented 18px body] row, side image */ .wume-feature { display: grid; grid-template-columns: 1fr 522px; column-gap: 60px; align-items: center; } .wume-feature--img-left { grid-template-columns: 522px 1fr; } .wume-feature-title { font-family: var(--wume-font-heading); font-weight: 300; font-size: 40px; line-height: 1.2; letter-spacing: -1.2px; margin: 0 0 48px; max-width: 648px; } .wume-feature-row { display: grid; grid-template-columns: 230px 1fr; align-items: start; } .wume-feature-label, .wume-feature-label--top { font-family: var(--wume-font-body); font-weight: 500; font-size: 14px; line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase; color: inherit; margin: 0; max-width: 185px; } .wume-feature-label--top { margin: 0 0 28px; max-width: none; white-space: nowrap; } .wume-feature-body { max-width: 479px; } .wume-feature-body p { font-family: var(--wume-font-body); font-size: 18px; line-height: 1.4; margin: 0 0 10px; } .wume-feature-media img { width: 522px; max-width: 100%; height: 654px; object-fit: cover; display: block; } /* what-happens: image fills the steps column height so it hugs the steps (figma has little gap above/below) */ .wume-feature--steps { align-items: stretch; } .wume-feature--steps .wume-feature-media img { height: 100%; min-height: 520px; } /* Dr Wu (World) — figma floats the portrait (sketches backdrop) over the stone-arches background, smaller than the column */ .wume-drwu-stack { position: relative; aspect-ratio: 522 / 600; } .wume-drwu-stack .wume-drwu-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .wume-drwu-stack .wume-drwu-fg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 72%; height: 82%; object-fit: cover; display: block; box-shadow: 0 16px 44px rgba(0,0,0,0.32); } /* protocols: heading + small 200px corner image */ .wume-feature--img-corner { grid-template-columns: 1fr 200px; align-items: start; column-gap: 40px; } .wume-feature-corner-img img { width: 200px; height: 200px; object-fit: cover; display: block; } /* pathway cards — translucent panels, real arrow, 30px label, AUTO CAROUSEL, sage on hover */ .wume-pathway-cards { overflow: hidden; margin-top: 56px; } .wume-pathway-track { display: flex; gap: 16px; width: max-content; animation: wume-cards-scroll 38s linear infinite; } .wume-pathway-cards:hover .wume-pathway-track { animation-play-state: paused; } @keyframes wume-cards-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 8px)); } } .wume-pathway-card { flex: 0 0 464px; display: flex; flex-direction: column; justify-content: space-between; height: 128px; padding: 16px 20px; background: rgba(254,254,252,0.4); text-decoration: none; transition: background .2s ease; } .wume-pathway-card:hover { background: var(--wume-sage); } .wume-pathway-card-icon { width: 22px; height: 20px; display: block; transform: rotate(-38.41deg); align-self: flex-end; } .wume-pathway-card-label { font-family: var(--wume-font-heading); font-weight: 300; font-size: 30px; line-height: 1.1; letter-spacing: -0.6px; color: var(--wume-black); } /* steps — STEP n left column, 30px title, 16px body */ .wume-steps { list-style: none; margin: 20px 0 0; padding: 0; } .wume-steps li { display: grid; grid-template-columns: 115px 1fr; padding: 22px 0; } .wume-step-num { font-family: var(--wume-font-body); font-weight: 500; font-size: 14px; line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wume-black); padding-top: 8px; } .wume-step-title { font-family: var(--wume-font-heading); font-weight: 300; font-size: 30px; line-height: 1.2; letter-spacing: -0.6px; margin: 0 0 6px; max-width: 558px; } .wume-step-body p { font-family: var(--wume-font-body); font-size: 16px; line-height: 1.4; margin: 0; max-width: 558px; } /* stories — brown cards (quote top, name+headline bottom), horizontal scroll */ .wume-stories-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 40px; flex-wrap: wrap; } .wume-stories-head .wume-section-title { font-family: var(--wume-font-heading); font-weight: 300; font-size: 50px; line-height: 1.2; letter-spacing: -1.5px; margin: 0; } .wume-stories-head .wume-link-underline { margin-top: 0; } .wume-stories-cards { overflow: hidden; } .wume-stories-track { display: flex; gap: 24px; width: max-content; animation: wume-stories-scroll 50s linear infinite; } .wume-stories-cards:hover .wume-stories-track { animation-play-state: paused; } @keyframes wume-stories-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 12px)); } } .wume-story-card { flex: 0 0 439px; display: flex; flex-direction: column; justify-content: space-between; height: 398px; padding: 36px; background: var(--wume-lbrown); color: var(--wume-cream); transition: background .22s ease, color .22s ease, box-shadow .22s ease; } .wume-story-card:hover { background: var(--wume-sand); color: var(--wume-black); box-shadow: 0 10px 30px rgba(0,0,0,0.12); } .wume-story-quote { font-family: var(--wume-font-heading); font-weight: 300; font-size: 30px; line-height: 1.2; letter-spacing: -0.6px; margin: 0; max-width: 362px; } .wume-story-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; } .wume-story-name, .wume-story-headline { font-family: var(--wume-font-body); font-weight: 500; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.2; } .wume-story-headline { text-align: right; max-width: 130px; } /* CTA — frosted-glass panel over the (blurred, parallax) warm hourglass photo + sharp inset. Figma 446:965 */ .wume-cta-final { background-size: cover; background-position: center; background-attachment: fixed; color: var(--wume-cream); padding: 96px 0; position: relative; } .wume-cta-final::before { content: ""; position: absolute; inset: 0; background: rgba(77,61,45,0.18); pointer-events: none; } .wume-cta-final .wume-x { position: relative; } .wume-cta-glass { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; padding: 56px; background: rgba(255,255,255,0.10); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); border: 1px solid rgba(255,255,255,0.28); } .wume-cta-inset { flex: 0 0 auto; } .wume-cta-inset img { display: block; width: 132px; height: 168px; object-fit: cover; border: 1px solid rgba(255,255,255,0.35); } .wume-cta-copy { max-width: 676px; } .wume-cta-title { font-family: var(--wume-font-heading); font-weight: 300; font-size: 50px; line-height: 1.2; letter-spacing: -1.5px; margin: 0 0 24px; } .wume-cta-body { font-family: var(--wume-font-body); font-size: 18px; line-height: 1.4; max-width: 432px; margin: 0 0 32px; } .wume-cta-actions { display: flex; align-items: center; gap: 40px; } .wume-cta-login { color: var(--wume-cream); text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; font-size: 14px; letter-spacing: 0.05em; font-weight: 500; } @media (max-width: 991.98px) { .wume-x { padding: 0 20px; } .wume-cta-final { background-attachment: scroll; } .wume-cta-glass { flex-direction: column; padding: 32px; gap: 28px; } .wume-feature, .wume-feature--img-left, .wume-feature--img-corner { grid-template-columns: 1fr; row-gap: 28px; } .wume-feature--img-left .wume-feature-media { order: -1; } .wume-feature-row { grid-template-columns: 1fr; row-gap: 12px; } .wume-feature-media img { width: 100%; height: auto; aspect-ratio: 4/5; } .wume-feature-corner-img img { width: 120px; height: 120px; } .wume-hero-final-title { font-size: 34px; letter-spacing: -1px; } .wume-feature-title, .wume-cta-title, .wume-stories-head .wume-section-title { font-size: 28px; letter-spacing: -0.8px; } .wume-step-title, .wume-pathway-card-label, .wume-story-quote { font-size: 22px; } .wume-hero-band-track img { width: 160px; height: 240px; } } /* ── Global ── */ body { font-family: var(--wume-font-body); background: var(--wume-cream); color: var(--wume-black); line-height: var(--wume-lead-body); } h1, h2, h3, h4, h5, h6 { font-family: var(--wume-font-heading); font-weight: var(--wume-w-heading); letter-spacing: var(--wume-tracking-heading); line-height: var(--wume-lead-heading); } a { color: inherit; } /* ── Announcement Bar ── */ .wume-announcement-bar { background: var(--wume-lbrown); color: var(--wume-cream); padding: 8px 40px; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; position: relative; } .wume-announcement-link { color: var(--wume-cream); text-decoration: none; } .wume-announcement-link:hover { color: var(--wume-cream); text-decoration-thickness: 2px; } .wume-announcement-close { display: none; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--wume-cream); font-size: 1rem; cursor: pointer; opacity: 0.7; } .wume-announcement-close:hover { opacity: 1; } /* Announcement bar removed on inner pages to match the figma standard (no top invitation strip). Left in the DOM so the sticky-offset JS still resolves #announcement-bar; simply not rendered. */ #announcement-bar { display: none; } /* ...except HOME + SEARCH, whose figma keeps the "Read our latest doctoral digest" strip (brown band on home, sage band on search). */ body.is-home-page #announcement-bar, body.is-search-page #announcement-bar { display: block; } /* ── Navigation ── */ .wume-navbar { background: rgba(255, 255, 255, 0.10); /* figma liquid-glass: translucent/frosted at the top; .is-scrolled flips it solid */ backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-bottom: none; padding: 0 0; min-height: var(--wume-nav-height); } /* Brand spec page 60: logo CENTERED with nav flanking. The Bootstrap navbar is reordered via .order-* utilities in base.html.twig. This .wume-logo class wraps the SVG mark, never typeset text. */ .wume-logo { display: inline-flex; align-items: center; color: var(--wume-black); text-decoration: none; } .wume-logo svg { height: 36px; width: auto; display: block; } .wume-nav-items .nav-link { font-family: var(--wume-font-body); font-weight: 400; font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--wume-black); padding: 24px 18px; transition: text-decoration-thickness 0.15s; } .wume-nav-items .nav-link:hover, .wume-nav-items .nav-link:focus { color: var(--wume-black); background: rgba(254, 254, 252, 0.35); /* figma: hover is a frosted square, not an underline */ text-decoration: none; opacity: 0.9; } /* nav CTA — translucent outlined box, black caps, sage on hover (figma 446:1063) */ .wume-navbar .wume-btn-request { background: transparent; border: 1px solid var(--wume-black); border-radius: 0; color: var(--wume-black); padding: 13px 26px; font-family: var(--wume-font-body); font-weight: 500; font-size: 14px; line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase; } .wume-navbar .wume-btn-request:hover { background: var(--wume-sage); border-color: var(--wume-sage); color: var(--wume-black); } /* Home: the navbar sits on the brown hero, so the dark base border would vanish — keep a cream outline + cream caps there. */ body.is-home-page .wume-navbar .wume-btn-request { border-color: var(--wume-cream); color: var(--wume-cream); } .wume-nav-icon-img { height: 17px; width: auto; display: block; } .wume-nav-icon { transition: opacity .15s ease; } .wume-nav-icon:hover { opacity: 0.6; } /* figma: icons get the same hover fade, no square */ .wume-dropdown { background: var(--wume-cream); border: 1px solid var(--wume-sand); border-radius: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); padding: 12px 0; min-width: 220px; } .wume-dropdown .dropdown-item { font-size: 0.82rem; letter-spacing: 0.04em; padding: 8px 24px; color: var(--wume-black); } .wume-dropdown .dropdown-item:hover { background: var(--wume-sand); color: var(--wume-black); } /* ── Nav Actions (Login, Cart, Request) ── */ .wume-btn-nav-login { font-family: var(--wume-font-body); font-weight: var(--wume-w-sub); font-size: 0.78rem; letter-spacing: var(--wume-tracking-caps); text-transform: uppercase; color: var(--wume-black); background: none; border: none; padding: 8px 12px; } .wume-btn-nav-login:hover { color: var(--wume-black); text-decoration: underline; text-underline-offset: 4px; } .wume-cart-icon { position: relative; /* anchor the absolute #cart-badge to the icon, not the navbar */ color: var(--wume-black); font-size: 1.2rem; text-decoration: none; } .wume-cart-icon:hover { color: var(--wume-lbrown); } .wume-cart-badge { position: absolute; top: -6px; right: -8px; background: var(--wume-brown); color: var(--wume-cream); font-size: 0.65rem; font-weight: 600; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--wume-font-body); } /* ── Buttons ── */ .wume-btn-primary { background: var(--wume-black); color: var(--wume-cream); border: 1px solid var(--wume-black); font-family: var(--wume-font-body); font-weight: var(--wume-w-sub); font-size: 0.78rem; letter-spacing: var(--wume-tracking-caps); text-transform: uppercase; padding: 12px 28px; border-radius: 0; transition: background 0.2s, border-color 0.2s, color 0.2s; } .wume-btn-primary:hover, .wume-btn-primary:focus { background: var(--wume-brown); border-color: var(--wume-brown); color: var(--wume-cream); } .wume-btn-outline { background: transparent; color: var(--wume-black); border: 1px solid var(--wume-black); font-family: var(--wume-font-body); font-weight: var(--wume-w-sub); font-size: 0.78rem; letter-spacing: var(--wume-tracking-caps); text-transform: uppercase; padding: 12px 28px; border-radius: 0; transition: background 0.2s, color 0.2s; } .wume-btn-outline:hover, .wume-btn-outline:focus { background: var(--wume-black); color: var(--wume-cream); } /* ── Sections ── */ .wume-section { padding: 44px 0; background: var(--wume-cream); color: var(--wume-text-on-cream); } .wume-section-alt { background: var(--wume-sand); color: var(--wume-text-on-sand); } .wume-section-sage { background: var(--wume-sage); color: var(--wume-text-on-sage); } .wume-section-brown { background: var(--wume-brown); color: var(--wume-text-on-brown); } .wume-section-lbrown { background: var(--wume-lbrown); color: var(--wume-text-on-lbrown); } .wume-section-title { font-size: 2.2rem; margin-bottom: 16px; } .wume-section-subtitle { font-size: 1rem; color: inherit; /* hierarchy via size + spacing, not color */ max-width: 600px; margin: 0 auto; line-height: 1.6; } .wume-section-cta { margin-top: 32px; } /* ── Hero ── */ .wume-hero { padding: 120px 0 100px; text-align: center; background: var(--wume-cream); color: var(--wume-text-on-cream); } .wume-hero-title { font-size: 3rem; line-height: var(--wume-lead-heading); margin-bottom: 20px; } .wume-hero-subtitle { font-size: 1.1rem; color: inherit; max-width: 560px; margin: 0 auto 32px; line-height: 1.6; } .wume-hero-tagline { font-family: var(--wume-font-body); font-weight: var(--wume-w-sub); font-size: 0.78rem; letter-spacing: var(--wume-tracking-caps); text-transform: uppercase; color: inherit; /* kicker is black on light grounds, cream on dark — inherits per text-on-bg rule */ margin-bottom: 16px; } /* ── Image Placeholders ── */ .wume-img-placeholder { background: var(--wume-sand); display: flex; align-items: center; justify-content: center; color: var(--wume-black); font-size: 0.85rem; letter-spacing: 0.04em; min-height: 300px; } /* ── Editorial photo band (V29, figma R1 mobile alignment) ── Full-bleed photo placed between content sections to match figma's image-rich pacing. The 100vw + center-shift trick negates the parent container's max-width so the photo runs edge-to-edge regardless of surrounding layout. max-height clamps at 3 breakpoints (540 desktop / 420 <992 / 360 <576) so very tall portrait photos don't dominate the page. */ .wume-photo-band { position: relative; left: 50%; transform: translateX(-50%); width: 100vw; margin: 0; padding: 0; overflow: hidden; } .wume-photo-band img { display: block; width: 100%; height: auto; max-height: 540px; object-fit: cover; } @media (max-width: 991.98px) { .wume-photo-band img { max-height: 420px; } } @media (max-width: 575.98px) { .wume-photo-band img { max-height: 360px; } } /* ── Request an Invitation Section ── */ .wume-section-invite { background: var(--wume-cream); padding: 80px 0; } /* V48: the separate brand-mark band (cream ground, opaque PNG) is retired — figma R1 puts the large WUME wordmark INSIDE the sage footer as one cohesive band. The new rules live with the rest of the footer styling below (.wume-footer-wordmark-row + .wume-footer-wordmark). */ /* ── Footer ── */ /* V43: footer background flips brown → sage, text/link colors flip cream → black per brand text-on-bg rule (sage → black, page 36). */ .wume-footer { background: var(--wume-sage); color: var(--wume-black); padding: 42px 0 13px; } .wume-footer a { color: var(--wume-black); } /* V48 — Large WUME wordmark at the top of the sage footer band. Replaces the retired .wume-brand-mark cream-tile element. Uses the cream-on- transparent variant so cream letters sit directly on the sage ground. */ .wume-footer-wordmark-row { padding: 16px 0 32px; } .wume-footer-wordmark { display: block; width: 560px; max-width: 100%; height: auto; } /* ── Figma footer grid: black wordmark + photos (left), address (mid), social (right), newsletter (mid), legal row (bottom) ── */ .wume-footer-grid { display: grid; grid-template-columns: 560px 1fr; grid-template-rows: auto 350px auto; grid-template-areas: "brand top" "photos news" "legal ."; column-gap: 132px; row-gap: 42px; align-items: start; padding-right: 62px; } .wume-footer-brand { grid-area: brand; display: block; margin-bottom: 28px; } .wume-footer-right-top { grid-area: top; display: flex; justify-content: space-between; gap: 40px; } .wume-footer-social { list-style: none; margin: 0; padding: 0; } .wume-footer-photos { grid-area: photos; } .wume-footer-news { grid-area: news; align-self: end; max-width: 100%; } .wume-footer-legal { grid-area: legal; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; } .wume-footer-address p, .wume-footer-social li a { font-family: var(--wume-font-body); font-size: 13px; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.7; color: var(--wume-black); text-decoration: none; display: inline-block; } .wume-footer-address p { margin: 0 0 16px; display: block; } .wume-footer-social li { margin-bottom: 10px; } .wume-footer-news-text { font-family: var(--wume-font-body); font-size: 16px; line-height: 1.4; margin: 0 0 18px; color: var(--wume-black); } .wume-footer-legal span, .wume-footer-legal a { font-family: var(--wume-font-body); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wume-black); text-decoration: none; } /* 404 — figma: cream centered error text + a full-width band of 6 photos at the bottom */ .wume-404 { background: var(--wume-cream); padding-top: 72px; } .wume-404-inner { text-align: center; max-width: 640px; margin: 0 auto; padding-bottom: 64px; } .wume-404-kicker { font-family: var(--wume-font-body); font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--wume-black); margin: 0 0 20px; } .wume-404-title { font-family: var(--wume-font-heading); font-weight: 300; font-size: 50px; line-height: 1.2; letter-spacing: -1.5px; color: var(--wume-black); margin: 0 0 16px; } .wume-404-subtitle { font-family: var(--wume-font-body); font-size: 18px; line-height: 1.4; color: var(--wume-black); margin: 0 0 22px; } .wume-404-path { margin-top: 32px; font-size: 12px; color: rgba(0,0,0,0.4); } .wume-404-photos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; } .wume-404-photos img { width: 100%; height: 360px; object-fit: cover; display: block; } /* V68 Stage-2 desktop: figma 404 has ~16px gaps between the 6 photos, 367px tall, and ~130px between the error text and the photo band. Desktop-only so the verified mobile 404 stays untouched. */ @media (min-width: 992px) { .wume-404-inner { padding-bottom: 130px; } .wume-404-photos { gap: 16px; } .wume-404-photos img { height: 367px; } } @media (max-width: 991.98px) { .wume-footer-grid { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "brand" "top" "photos" "news" "legal"; row-gap: 24px; padding-right: 0; column-gap: 0; } .wume-footer-brand { margin-bottom: 0; } .wume-footer-right-top { flex-direction: column; gap: 18px; } .wume-footer-wordmark { width: 300px; } } .wume-footer-heading { font-family: var(--wume-font-body); font-weight: var(--wume-w-sub); font-size: 0.75rem; letter-spacing: var(--wume-tracking-caps); text-transform: uppercase; color: var(--wume-black); margin-bottom: 16px; } .wume-footer-text { font-size: 0.85rem; color: var(--wume-black); line-height: 1.7; } .wume-footer-newsletter-heading { font-family: var(--wume-font-heading); font-weight: 300; font-size: 1.6rem; line-height: 1.2; color: var(--wume-black); margin: 0 0 12px; } .wume-footer-links { list-style: none; padding: 0; margin: 0; } .wume-footer-links li { margin-bottom: 8px; } .wume-footer-links a { color: var(--wume-black); text-decoration: none; font-size: 0.85rem; transition: text-decoration-thickness 0.15s; } .wume-footer-links a:hover { color: var(--wume-black); text-decoration: underline; text-underline-offset: 3px; } .wume-footer-bottom { border-top: 1px solid rgba(0, 0, 0, 0.2); padding-top: 20px; margin-top: 40px; } .wume-footer-bottom p { font-size: 0.78rem; color: var(--wume-black); } /* ── Card Style ── */ .wume-card { border: 1px solid var(--wume-sand); border-radius: 0; background: var(--wume-cream); padding: 40px; transition: box-shadow 0.3s; } .wume-card:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); } .wume-card-title { font-size: 1.3rem; margin-bottom: 12px; } .wume-card-text { font-size: 0.92rem; color: var(--wume-black); } /* ── Two Column Layout ── */ .wume-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } /* ── V24 Phase B universal mobile reflow ── Single 991.98 umbrella applies to every page. Spec section 3.1: multi-col grids → 1fr; flex rows → column; section padding compresses; hero headline scales; sticky-offset for jump-link landing positions. */ @media (max-width: 991.98px) { /* Spec 3.1.1 — .wume-split (used on every page's hero/intro split) collapses. */ .wume-split { grid-template-columns: 1fr; gap: 32px; } /* Spec 3.1.2 — section padding compresses. V25 uses named tokens. */ .wume-section { padding: var(--wume-section-padding-mobile) 0; } .wume-hero { padding: var(--wume-hero-padding-mobile); } /* Spec 3.1.3 — hero headline scales down with viewport-relative cap. */ .wume-hero-title { font-size: clamp(2rem, 7vw, 2.75rem); } .wume-section-title { font-size: clamp(1.6rem, 5.5vw, 2.2rem); } /* Spec 3.1.5 — jump-link sticky offset. Token = nav-height + 42px announcement bar; default nav-height fallback 64px on phone where the desktop --wume-nav-height (72px) is shorter in practice. */ section[id] { scroll-margin-top: var(--wume-mobile-sticky-offset); } /* Spec 3.1.1 — Bootstrap col-md-* / col-lg-* columns inside .wume-section also collapse to 1-up. Bootstrap's md breakpoint is 768 (already collapses at <769) but its lg breakpoint is 992; the 769–991px slice needs an explicit override so a `col-md-6 col-lg-3` row that desktop renders as 4-up does not stay multi-column on tablet portrait. The selector is scoped to .wume-section so we don't inadvertently flatten Bootstrap rows in components (cart, checkout, navbar) that have their own mobile state. */ .wume-section .row > [class*="col-md-"], .wume-section .row > [class*="col-lg-"], .wume-section .row > [class*="col-sm-"] { flex: 0 0 100%; max-width: 100%; } /* Spec 3.2.2 — Care comparison block: the two .wume-card columns inside the .wume-section-alt before the brown CTA stack with a slim sand divider between them. The :first-child of .row gets the bottom divider; the row's gap is preserved by .mb-4 on each col. */ .wume-section-alt .row > [class*="col-md-6"]:first-child .wume-card { margin-bottom: 1.5rem; } /* Spec 3.1.4 — image responsive backstop. Some inline-styled .wume-img-placeholder containers (Visit FAQ split, About-Dr-Wu hero, Care intro split) carry aspect-ratio 4/5 but no width cap, so the intrinsic image width (often 800-1200px) overflows the 390px viewport. Cap to container width on mobile. The min-width: 0 reset is required because .wume-split is display:grid and grid items default to min-width: min-content (image natural width), defeating the max-width: 100% cap on its own. */ .wume-img-placeholder { max-width: 100%; min-width: 0; min-height: auto; } .wume-img-placeholder img { max-width: 100%; height: auto; } .wume-split > * { min-width: 0; } } /* ── V25 Phase B cascade fix — phone-tighter overrides ── This 768 block is positioned AFTER the 991.98 umbrella block above so that source-order tiebreak grants its declarations to <769px viewports. Every rule here MUST be strictly tighter than its 991.98 counterpart — otherwise it defeats responsive scaling. The previous V24 values (font-size: 2.2rem literal, 60px / 80px padding) sat BEFORE 991.98 in source order and so were silently dead at <769 (991.98 always won the cascade). Now: titles use clamp() with smaller floors so phones still scale, padding uses --wume-*-phone tokens (3rem / 4rem 0 3rem) that are tighter than --wume-*-mobile (4rem / 5rem 0 4rem), and units are rem throughout for cascade-comparison consistency. */ @media (max-width: 768px) { .wume-hero-title { font-size: clamp(1.8rem, 6vw, 2.2rem); } .wume-section-title { font-size: clamp(1.4rem, 5vw, 1.8rem); } .wume-section { padding: var(--wume-section-padding-phone) 0; } .wume-hero { padding: var(--wume-hero-padding-phone); } /* Mobile navbar: monogram fits where the wordmark cannot. */ .wume-logo svg { height: 28px; } } /* ── Cart Page ── */ .wume-cart-empty { text-align: center; padding: 80px 0; } .wume-cart-empty i { font-size: 3rem; color: var(--wume-brown); margin-bottom: 16px; } /* ── Request-Invitation Placeholder Modal ── */ .wume-invite-modal { background: var(--wume-cream); border: 1px solid var(--wume-brown); border-radius: 0; color: var(--wume-text-on-cream); } .wume-invite-modal .modal-header { background: var(--wume-cream); border-bottom: 1px solid var(--wume-sand); } .wume-invite-modal .modal-title { font-family: var(--wume-font-heading); font-weight: var(--wume-w-heading); letter-spacing: var(--wume-tracking-heading); } .wume-invite-badge { display: inline-block; font-family: var(--wume-font-body); font-weight: var(--wume-w-sub); font-size: 0.72rem; letter-spacing: var(--wume-tracking-caps); text-transform: uppercase; background: var(--wume-lbrown); color: var(--wume-cream); padding: 6px 14px; border-radius: 0; } /* ── Press Logo Placeholder Grid (Home, Visit) ── */ .wume-press-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin: 30px auto 0; max-width: 1000px; } .wume-press-logo { flex: 0 0 auto; width: 150px; height: 60px; display: flex; align-items: center; justify-content: center; background: var(--wume-cream); border: 1px solid var(--wume-black); color: var(--wume-black); font-size: 0.75rem; letter-spacing: var(--wume-tracking-caps); text-transform: uppercase; } /* ── Pathways Featured Distinct Pathways Accordion ── */ .wume-pathway-accordion .accordion-button { font-family: var(--wume-font-heading); font-weight: var(--wume-w-heading); letter-spacing: var(--wume-tracking-heading); background: var(--wume-cream); color: var(--wume-black); border-radius: 0; box-shadow: none; } .wume-pathway-accordion .accordion-button:not(.collapsed) { background: var(--wume-sage); color: var(--wume-text-on-sage); } .wume-pathway-accordion .accordion-button:focus { box-shadow: 0 0 0 2px var(--wume-black); } .wume-pathway-accordion .accordion-item { border: 1px solid var(--wume-sand); border-radius: 0; margin-bottom: 8px; } .wume-pathway-accordion .accordion-body { background: var(--wume-cream); color: var(--wume-text-on-cream); line-height: var(--wume-lead-body); } /* ── Hero Subtitle / Jump-to Link Cluster (Physicians, Pathways, Visit) ── */ .wume-jump-links { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .wume-jump-link { font-family: var(--wume-font-body); font-weight: var(--wume-w-sub); font-size: 0.78rem; letter-spacing: var(--wume-tracking-caps); text-transform: uppercase; color: var(--wume-black); text-decoration: none; border-bottom: 1px solid var(--wume-black); padding-bottom: 2px; transition: border-bottom-width 0.15s; } .wume-jump-link:hover { color: var(--wume-black); border-bottom-width: 2px; } /* ── Footer newsletter form (V43 sage footer) ── Inline layout: email input on LEFT, SUBSCRIBE link on RIGHT — matches figma's single-row newsletter pattern. Input is a line-underline style (no box / border) on sage background; SUBSCRIBE is minimal text-only with underline (NOT a Bootstrap btn box). */ .wume-footer-newsletter { display: flex !important; flex-direction: row !important; align-items: flex-end; gap: 16px; border-bottom: 1px solid var(--wume-black); padding-bottom: 4px; } .wume-footer-newsletter .form-control { background: transparent; border: 0; color: var(--wume-black); border-radius: 0; font-size: 0.85rem; flex: 1 1 0 !important; /* basis 0 so the flex algorithm fills remaining space, not initial content size */ width: auto !important; /* override Bootstrap's .form-control { width: 100%; } */ min-width: 0; /* prevent intrinsic min-width from blocking shrink */ padding: 8px 0; margin: 0 !important; /* override Bootstrap `mb-2` etc */ box-shadow: none; } .wume-footer-newsletter .form-control:focus { box-shadow: none; background: transparent; color: var(--wume-black); } .wume-footer-newsletter .form-control::placeholder { color: rgba(0, 0, 0, 0.55); } /* The .wume-btn-outline class in the footer becomes a minimal black-text link with underline (figma SUBSCRIBE pattern). Other footer btn-outline consumers retain the box appearance via the base .wume-btn-outline rule defined elsewhere. */ .wume-footer .wume-btn-outline { background: transparent; color: var(--wume-black); border: 0; padding: 8px 0; font-family: var(--wume-font-body); font-weight: var(--wume-w-sub); font-size: 0.78rem; letter-spacing: var(--wume-tracking-caps); text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; flex: 0 0 auto; width: auto; } .wume-footer .wume-btn-outline:hover, .wume-footer .wume-btn-outline:focus { background: transparent; color: var(--wume-black); text-decoration-thickness: 2px; } /* The Bootstrap `w-100` utility class on the SUBSCRIBE