); ALL page content (every section/block inside main#reforma-main) is capped to the 1440 design width + centered, so on screens wider than 1440 the content is boxed with the page bg as margins. Applies to every page (home + about + treatments + doctors + news + etc.). ========================================================================= */ main#reforma-main{ max-width:1440px !important; margin-left:auto !important; margin-right:auto !important; overflow-x:clip; } /* neutralize any alignfull viewport-breakout inside main so sections stay boxed */ main#reforma-main > .alignfull, main#reforma-main > *{ margin-left:auto !important; margin-right:auto !important; max-width:100% !important; } /* header + footer remain full screen width (explicit, defensive) */ .reforma-site-header, .reforma-site-footer{ max-width:none !important; width:auto; } /* ========================================================================= v2.9.6 — HEADER built to EXACT Figma spec (two states). TOP (home, not scrolled): transparent; nav #29514C; search = green icon (no circle); Book Appointment = green TEXT only #29514C 20px (NO background). SCROLLED (home) + ALL OTHER PAGES: band #29514C; nav #FFFFFF; search = 52px white-border circle + white icon; Book = GOLD gradient button (90deg #9C783A→#825A14) + white text 16px. Home is always #A07C42 bold + 2px gold underline. Logo always gold #9B7535. Primary buttons radius = 0 30px 0 30px (Figma "primary 1"). ========================================================================= */ /* actions container: search + book, gap 30 */ .reforma-site-header .reforma-header-actions{ display:flex !important; align-items:center; gap:30px !important; background:transparent !important; box-shadow:none !important; padding:0 !important; height:52px; } .reforma-site-header{ padding-top:18px !important; padding-bottom:18px !important; } .reforma-site-header.is-scrolled{ padding-top:24px !important; padding-bottom:24px !important; } /* ---- BASE = SCROLLED / non-home (green band) ---- */ .reforma-site-header .reforma-header-actions .reforma-header-search{ width:52px !important; height:52px !important; border-radius:50% !important; border:1px solid #FFFFFF !important; background:transparent !important; display:inline-flex; align-items:center; justify-content:center; padding:0 !important; } .reforma-site-header .reforma-header-actions .reforma-header-search svg{ width:24px;height:24px; stroke:#FFFFFF !important; stroke-width:1.5; } .reforma-site-header .reforma-header-actions .reforma-header-cta-link{ display:inline-flex; align-items:center; gap:8px; background:linear-gradient(90deg,#9C783A 0%,#825A14 100%) !important; color:#FFFFFF !important; border-radius:0 30px 0 30px !important; padding:8px 16px 8px 18px !important; height:52px; box-sizing:border-box; font-family:'Fraunces','Playfair Display',Georgia,serif !important; font-weight:500 !important; font-size:16px !important; box-shadow:none !important; white-space:nowrap !important; } .reforma-site-header .reforma-header-actions .reforma-header-cta-link svg{ stroke:#FFFFFF !important; } /* nav base (white on green band) */ .reforma-site-header .reforma-primary-nav .wp-block-navigation-item__content{ font-family:'Fraunces','Playfair Display',Georgia,serif !important; font-weight:400 !important; font-size:20px !important; line-height:24px !important; color:#FFFFFF !important; } .reforma-site-header .reforma-primary-nav .wp-block-navigation__container{ gap:54px !important; } .reforma-site-header .reforma-primary-nav .reforma-nav-link.is-active .wp-block-navigation-item__content{ color:#A07C42 !important; font-weight:700 !important; } /* ---- TOP (home, not scrolled) overrides ---- */ body.home .reforma-site-header:not(.is-scrolled){ background:transparent !important; box-shadow:none !important; } body.home .reforma-site-header:not(.is-scrolled) .reforma-primary-nav .wp-block-navigation-item__content{ color:#29514C !important; } body.home .reforma-site-header:not(.is-scrolled) .reforma-primary-nav .reforma-nav-link.is-active .wp-block-navigation-item__content{ color:#A07C42 !important; font-weight:700 !important; } /* top search = green icon, NO circle */ body.home .reforma-site-header:not(.is-scrolled) .reforma-header-actions .reforma-header-search{ border:none !important; width:auto !important; height:auto !important; border-radius:0 !important; } body.home .reforma-site-header:not(.is-scrolled) .reforma-header-actions .reforma-header-search svg{ stroke:#29514C !important; } /* top Book = green TEXT, no background, 20px */ body.home .reforma-site-header:not(.is-scrolled) .reforma-header-actions .reforma-header-cta-link{ background:none !important; color:#29514C !important; border-radius:0 !important; padding:0 !important; height:auto; font-size:20px !important; font-weight:500 !important; } body.home .reforma-site-header:not(.is-scrolled) .reforma-header-actions .reforma-header-cta-link svg{ stroke:#29514C !important; } /* logo always gold (filter none) */ .reforma-site-header .reforma-logo-img, .reforma-site-header.is-scrolled .reforma-logo-img{ filter:none !important; } /* ---- HERO primary button + FOOTER button: exact "primary 1" (90deg, radius 0 30) ---- */ .reforma-home-hero .reforma-hero-btn--primary{ background:linear-gradient(90deg,#9C783A 0%,#825A14 100%) !important; border-radius:0 30px 0 30px !important; } .reforma-footer-cta-button{ background:linear-gradient(90deg,#9C783A 0%,#825A14 100%) !important; border-radius:0 30px 0 30px !important; padding:16px 28px !important; } /* mobile: collapse to gold circle (keep) */ @media (max-width:900px){ .reforma-site-header .reforma-header-actions .reforma-header-cta-link, body.home .reforma-site-header:not(.is-scrolled) .reforma-header-actions .reforma-header-cta-link{ background:linear-gradient(90deg,#9C783A,#825A14) !important; color:#fff !important; width:46px !important;height:46px !important;border-radius:50% !important;padding:0 !important;font-size:0 !important; } .reforma-site-header .reforma-header-actions .reforma-header-cta-link svg{ stroke:#fff !important; width:18px;height:18px; } .reforma-site-header .reforma-header-actions .reforma-header-search{ display:none !important; } } /* v2.9.7 — beat the older .is-scrolled cta rules: exact gold "primary 1" on scroll (90deg gradient, radius 0 30px 0 30px, 16px text). */ .reforma-site-header.is-scrolled .reforma-header-actions .reforma-header-cta-link, body.home .reforma-site-header.is-scrolled .reforma-header-actions .reforma-header-cta-link{ background:linear-gradient(90deg,#9C783A 0%,#825A14 100%) !important; border-radius:0 30px 0 30px !important; color:#FFFFFF !important; font-size:16px !important; padding:8px 16px 8px 18px !important; } .reforma-site-header.is-scrolled .reforma-header-actions .reforma-header-cta-link svg{ stroke:#FFFFFF !important; } /* ========================================================================= v2.9.8 — (A) BOX every content section (kill the 100vw full-bleed breakout from pattern-decorations.css:4013). ID-level specificity beats the class rules. (B) FOOTER truly full-bleed: green bands span 100%, content centered at 1304. ========================================================================= */ /* (A) all direct children of main are boxed to main's 1440 width */ body main#reforma-main > *:not(style):not(script){ width:auto !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; } /* also neutralize any inner alignfull 100vw breakout inside main */ body main#reforma-main .alignfull{ width:auto !important; max-width:100% !important; margin-left:auto !important; margin-right:auto !important; } /* (B) FOOTER full screen width — green edge-to-edge, content centered at 1304 */ .reforma-site-footer{ width:100% !important; max-width:none !important; } .reforma-site-footer .reforma-footer-cta-band{ max-width:none !important; width:100% !important; margin:80px 0 0 !important; padding-top:56px !important; padding-bottom:56px !important; padding-left:max(40px, calc((100% - 1304px)/2)) !important; padding-right:max(40px, calc((100% - 1304px)/2)) !important; border-top-right-radius:100px !important; } .reforma-site-footer .reforma-footer-main{ max-width:none !important; width:100% !important; margin:0 !important; padding-left:max(40px, calc((100% - 1304px)/2)) !important; padding-right:max(40px, calc((100% - 1304px)/2)) !important; } .reforma-site-footer .reforma-footer-main-inner{ max-width:1304px !important; margin:0 auto !important; padding-left:0 !important; padding-right:0 !important; } .reforma-site-footer .reforma-footer-copyright-band{ max-width:none !important; width:100% !important; margin:0 !important; background:#1F3C38 !important; padding-left:max(40px, calc((100% - 1304px)/2)) !important; padding-right:max(40px, calc((100% - 1304px)/2)) !important; } /* v2.9.9 — FOOTER full-bleed, robust: pin to true viewport width (100vw) regardless of the over-wide parent (2133px). Bands = 100% of footer, border-box, content centered. */ .wp-block-template-part:has(> .reforma-site-footer), footer.wp-block-template-part, .reforma-site-footer{ width:100vw !important; max-width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; box-sizing:border-box !important; } .reforma-site-footer .reforma-footer-cta-band, .reforma-site-footer .reforma-footer-main, .reforma-site-footer .reforma-footer-copyright-band{ box-sizing:border-box !important; width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; } .reforma-site-footer .reforma-footer-cta-band{ margin-top:80px !important; } /* v2.10.0 — FOOTER full-bleed via width:auto (fills parent naturally; avoids the 100vw/% computed-width quirk that left 96px gaps). Content centered at 1304. */ footer.wp-block-template-part, .reforma-site-footer{ width:auto !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; } .reforma-site-footer .reforma-footer-cta-band, .reforma-site-footer .reforma-footer-main, .reforma-site-footer .reforma-footer-copyright-band{ box-sizing:border-box !important; width:auto !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; padding-left:max(40px, calc((100% - 1304px)/2)) !important; padding-right:max(40px, calc((100% - 1304px)/2)) !important; } .reforma-site-footer .reforma-footer-cta-band{ margin-top:80px !important; padding-top:98px !important; padding-bottom:56px !important; } .reforma-site-footer .reforma-footer-cta-body{ max-width:520px !important; } .reforma-site-footer .reforma-footer-main-inner{ max-width:1304px !important; margin:0 auto !important; } /* ========================================================================= v2.10.2 — Pixel-perfect corrections: (A) Hero arch border removed (Figma arches clip images cleanly with no stroke) (B) Footer copyright band now a direct child of .reforma-site-footer — full-width #1F3C38 strip, text centered at 1304px gutter ========================================================================= */ /* (A) Hero arches: no border. No outline in Figma. */ .reforma-home-hero .reforma-arch, .reforma-home-hero .reforma-arch--left, .reforma-home-hero .reforma-arch--right{ border:none !important; box-shadow:none !important; } /* (B) Footer copyright band — full-width dark strip */ .reforma-site-footer > .reforma-footer-copyright-band{ background:#1F3C38 !important; width:100% !important; max-width:none !important; margin:0 !important; padding:0 !important; border-top:none !important; display:flex; align-items:center; justify-content:center; min-height:64px; } .reforma-site-footer > .reforma-footer-copyright-band .reforma-footer-copyright{ font-family:'Fraunces','TRY Vesterbro','Poppins',sans-serif; font-weight:400; font-size:14px; line-height:1.4; color:rgba(255,255,255,0.7); margin:0; letter-spacing:0.02em; text-align:center; padding:20px max(40px, calc((100% - 1304px)/2)); } /* ========================================================================= v2.10.3 — Restore arch gold border (1px solid #9C783A, strokeWeight=1 in Figma). v2.10.2 removed borders entirely — incorrect. Figma Rectangle 12426 has strokeWeight=1, color #9C783A. No double ring (inner stroke is behind mask). ========================================================================= */ .reforma-home-hero .reforma-arch, .reforma-home-hero .reforma-arch--left, .reforma-home-hero .reforma-arch--right{ border:1px solid #9C783A !important; box-shadow:none !important; } /* ========================================================================= v2.10.4 — Footer CTA button: Figma spec = 348×60 (exact dimensions). Add min-width to match the Figma layout. ========================================================================= */ .reforma-footer-cta-button{ min-width:348px !important; height:60px !important; justify-content:center !important; box-sizing:border-box !important; } @media (max-width:599px){ .reforma-footer-cta-button{ min-width:0 !important; width:100% !important; height:auto !important; } } /* v2.10.27 — FIX: kill white "pill" box behind header buttons (scrolled) + remove notch on CTA */ body .reforma-site-header .reforma-header-actions, body .reforma-site-header.is-scrolled .reforma-header-actions{ background:transparent !important; box-shadow:none !important; } body .reforma-site-header .reforma-header-actions .reforma-header-cta-link, body .reforma-site-header.is-scrolled .reforma-header-actions .reforma-header-cta-link{ border-radius:8px !important; } /* v2.10.36 — FORCE normal rounded-rect on header CTA (kill the 0 30px notch in ALL states) */ html body .reforma-site-header .reforma-header-actions .reforma-header-cta-link, html body.home .reforma-site-header:not(.is-scrolled) .reforma-header-actions .reforma-header-cta-link, html body .reforma-site-header.is-scrolled .reforma-header-actions .reforma-header-cta-link{ border-radius:8px !important; } /* v2.10.38 — definitively kill the notch: higher specificity than the 0,3,0 rules at L301-363 */ html body header.reforma-site-header .reforma-header-actions a.reforma-header-cta-link, html body header.reforma-site-header.is-scrolled .reforma-header-actions a.reforma-header-cta-link, html body.home header.reforma-site-header:not(.is-scrolled) .reforma-header-actions a.reforma-header-cta-link{ border-radius:8px !important; } /* ========================================================================= v2.10.40 — HEADER per user Figma spec (header-button.md). Highest-specificity final override block. Beats all prior notch/pill rules (L283-521). (1) TOP (home, not scrolled): header bg #FFF0E6; CTA = green TEXT only #29514C, NO background/border/radius/box (delete the notch+box). (2) GREEN (scrolled / inner pages): CTA 219x52, padding 8/8/8/16, gradient 90deg #9C783A->#825A14, white 16px label, 28px white arrow (stroke 1.75px), NORMAL radius 8px (NOT the 0 30px notch). (3) Kill leftover white pill: .reforma-header-actions bg -> transparent. ========================================================================= */ /* (3) actions container never a white pill */ html body header.reforma-site-header .reforma-header-actions, html body header.reforma-site-header.is-scrolled .reforma-header-actions, html body.home header.reforma-site-header:not(.is-scrolled) .reforma-header-actions{ background:transparent !important; box-shadow:none !important; border:0 !important; } /* (1) TOP state — home, not scrolled: peach header bg, green-text-only CTA */ html body.home header.reforma-site-header:not(.is-scrolled){ background:#FFF0E6 !important; box-shadow:none !important; } html body.home header.reforma-site-header:not(.is-scrolled) .reforma-header-actions a.reforma-header-cta-link{ background:none !important; background-image:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; padding:0 !important; height:auto !important; width:auto !important; min-width:0 !important; color:#29514C !important; font-family:'Fraunces','TRY Vesterbro','Playfair Display',Georgia,serif !important; font-weight:500 !important; font-size:20px !important; line-height:24px !important; display:inline-flex !important; align-items:center !important; gap:8px !important; } html body.home header.reforma-site-header:not(.is-scrolled) .reforma-header-actions a.reforma-header-cta-link svg{ stroke:#29514C !important; width:24px !important; height:24px !important; stroke-width:1.75 !important; } /* (2) GREEN state — scrolled (home) + all inner pages: exact "primary 1" 219x52 */ html body header.reforma-site-header .reforma-header-actions a.reforma-header-cta-link, html body header.reforma-site-header.is-scrolled .reforma-header-actions a.reforma-header-cta-link, html body.home header.reforma-site-header.is-scrolled .reforma-header-actions a.reforma-header-cta-link{ display:flex !important; flex-direction:row !important; justify-content:center !important; align-items:center !important; box-sizing:border-box !important; width:219px !important; height:52px !important; padding:8px 8px 8px 16px !important; background:linear-gradient(90deg,#9C783A 0%,#825A14 100%) !important; background-image:linear-gradient(90deg,#9C783A 0%,#825A14 100%) !important; border:0 !important; border-radius:8px !important; box-shadow:none !important; color:#FFFFFF !important; font-family:'Fraunces','TRY Vesterbro','Playfair Display',Georgia,serif !important; font-weight:500 !important; font-size:16px !important; line-height:19px !important; white-space:nowrap !important; gap:8px !important; } html body header.reforma-site-header .reforma-header-actions a.reforma-header-cta-link svg, html body header.reforma-site-header.is-scrolled .reforma-header-actions a.reforma-header-cta-link svg, html body.home header.reforma-site-header.is-scrolled .reforma-header-actions a.reforma-header-cta-link svg{ stroke:#FFFFFF !important; width:28px !important; height:28px !important; stroke-width:1.75 !important; flex-shrink:0 !important; } /* Re-assert mobile collapse (≤900px) stays a gold circle — this block must not break it */ @media (max-width:900px){ html body header.reforma-site-header .reforma-header-actions a.reforma-header-cta-link, html body.home header.reforma-site-header:not(.is-scrolled) .reforma-header-actions a.reforma-header-cta-link, html body header.reforma-site-header.is-scrolled .reforma-header-actions a.reforma-header-cta-link{ width:46px !important; min-width:46px !important; height:46px !important; border-radius:50% !important; padding:0 !important; gap:0 !important; justify-content:center !important; font-size:0 !important; background:linear-gradient(90deg,#9C783A,#825A14) !important; color:#fff !important; } html body header.reforma-site-header .reforma-header-actions a.reforma-header-cta-link svg{ stroke:#fff !important; width:18px !important; height:18px !important; } } /* ========================================================================= v2.10.41 — Reinforce TOP header peach bg. v2.10.40's shorthand was beaten (computed bg resolved transparent). Use max specificity + both background and background-color longhand !important, class-form (no tag dependency). ========================================================================= */ html body.home .reforma-site-header.reforma-site-header:not(.is-scrolled), html body.home header.reforma-site-header.reforma-site-header:not(.is-scrolled){ background:#FFF0E6 !important; background-color:#FFF0E6 !important; background-image:none !important; box-shadow:none !important; } /* ============================================================ FOOTER CTA DECORATIONS — Figma match (v2.10.110) Bird flies OUT the top; tilted translucent glass panel on the right; large yellow flower (head top-right, stem hanging down). Band is overflow:visible; html/body overflow-x:clip absorbs any horizontal bleed (no h-scroll). Footer is a sibling of #reforma-main. ============================================================ */ .reforma-footer-cta-band{ overflow:visible !important; padding:64px 80px !important; } .reforma-footer-cta-inner{ position:relative; z-index:4 !important; max-width:700px !important; } /* tilted frosted-glass panel behind the flower */ .reforma-footer-cta-panel{ position:absolute; top:-6%; right:3%; width:40%; height:128%; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.06); border-radius:16px; transform:rotate(11deg); transform-origin:center; z-index:0; pointer-events:none; } /* large yellow flower: head near top-right rounded corner, stem hangs down */ .reforma-footer-cta-flower{ position:absolute !important; left:54.9% !important; right:auto !important; top:-139px !important; width:72.6% !important; aspect-ratio:1045/805 !important; height:auto !important; object-fit:cover !important; object-position:center !important; z-index:2 !important; pointer-events:none !important; } /* orange bird flying OUT the top of the band, centre-right */ .reforma-footer-cta-bird{ position:absolute !important; left:46.2% !important; right:auto !important; top:-77px !important; width:37.2% !important; aspect-ratio:535/333 !important; height:auto !important; object-fit:cover !important; object-position:center !important; z-index:3 !important; pointer-events:none !important; } @media (max-width:1023px){ .reforma-footer-cta-flower{ width:34% !important; top:-8% !important; right:-2% !important; } .reforma-footer-cta-bird{ width:34% !important; top:-22% !important; right:18% !important; } .reforma-footer-cta-panel{ width:48%; right:-4%; } } @media (max-width:781px){ /* keep only a subtle flower; drop the bird+panel so the band stays clean on phones */ .reforma-footer-cta-bird, .reforma-footer-cta-panel{ display:none !important; } .reforma-footer-cta-flower{ width:42% !important; top:auto !important; bottom:0 !important; right:-6% !important; opacity:0.9 !important; } } /* Search icon = SQUARE per Figma (override the 3-class .header-actions .header-search 50% rule). v2.10.115 */ .reforma-site-header .reforma-header-actions .reforma-header-search, .reforma-site-header .reforma-header-search, body.home .reforma-site-header:not(.is-scrolled) .reforma-header-actions .reforma-header-search{ border-radius:3px !important; } /* ============================================================ GLOBAL Figma-fidelity fixes — header/footer (v2.10.116) From 8-agent full-res audit 2026-06-02. ============================================================ */ /* G1 — Footer CTA eyebrow: Figma is Title Case serif, not ALL-CAPS letter-spaced */ .reforma-footer-cta-eyebrow{ text-transform:none !important; letter-spacing:0.03em !important; } /* G2a — Nav active item: persistent gold underline (Figma) */ .reforma-site-header .reforma-primary-nav .reforma-nav-link.is-active .wp-block-navigation-item__content{ position:relative !important; } .reforma-site-header .reforma-primary-nav .reforma-nav-link.is-active .wp-block-navigation-item__content::after{ content:"" !important; position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important; height:2px !important; width:auto !important; border-radius:2px !important; background:var(--reforma-amber) !important; opacity:1 !important; transform:none !important; transition:none !important; } body.home .reforma-site-header:not(.is-scrolled) .reforma-primary-nav .reforma-nav-link.is-active .wp-block-navigation-item__content::after{ background:var(--reforma-gold-active) !important; } /* G3 — Footer social icons: rounded-square (Figma), not circle */ .reforma-site-footer .reforma-footer-socials a{ border-radius:10px !important; } /* G4 — Footer link columns: serif (Figma), not Poppins sans */ .reforma-site-footer .reforma-footer-links a{ font-family:'Fraunces','TRY Vesterbro',Georgia,serif !important; } /* G6 — Header "Book Appointment" button: sharp rectangle (Figma) */ @media (min-width:1024px){ .reforma-site-header .reforma-header-cta-link{ border-radius:2px !important; } } /* G6 — Header "Book Appointment" button: sharp rectangle (Figma). 3-class override beats .reforma-header-actions rule. v2.10.121 */ @media (min-width:1024px){ .reforma-site-header .reforma-header-actions .reforma-header-cta-link{ border-radius:2px !important; } } /* G6 CLOSE — Book button sharp (Figma). Match the html-body-header specificity that locked 8px. v2.10.135 */ @media (min-width:1024px){ html body header.reforma-site-header .reforma-header-actions a.reforma-header-cta-link, html body.home header.reforma-site-header:not(.is-scrolled) .reforma-header-actions a.reforma-header-cta-link, html body header.reforma-site-header.is-scrolled .reforma-header-actions a.reforma-header-cta-link{ border-radius:2px !important; } } /* HOME hero arches — authoritative Figma placement (beats leftover min(48vw) rules). v2.10.144 */ @media (min-width:1024px){ html body .reforma-home-hero .reforma-hero-right{ overflow:visible !important; } /* v2.10.161 — single exact-Figma CLUSTER (hand+sprig+both arches+women+butterfly). Crop is 752x500 from the Figma 1440 canvas at (x648,y138). Positioned absolute relative to .reforma-hero-grid (the grid spans the full 1440 on a 1440 canvas). Grid has padding-top:34px (v2.10.146); absolute top is from the grid border-box top, so top = figmaY(138) - gridBorderTop. Empirically tuned for a clean blend. */ html body .reforma-home-hero .reforma-hero-cluster{ position:absolute !important; top:22px !important; right:auto !important; left:596px !important; bottom:auto !important; width:844px !important; max-width:none !important; min-width:0 !important; height:auto !important; margin:0 !important; transform:none !important; z-index:3 !important; } /* dead leftover (artwork element removed; cluster replaces it) */ html body .reforma-home-hero .reforma-hero-right .reforma-hero-artwork{ display:none !important; } } /* HOME header — Figma: logo/nav sit higher (~y20). Reduce home header padding. v2.10.145 */ body.home .reforma-site-header{ padding-top:48px !important; padding-bottom:18px !important; } /* HOME hero vertical position — content+arches down 34px to hit Figma (eyebrow y122, arch-top y52). v2.10.146 */ @media (min-width:1024px){ html body .reforma-home-hero .reforma-hero-grid{ padding-top:44px !important; } } /* HOME hero TEXT — authoritative Figma values (this file is the last-loaded layer and uses html-body specificity, so it beats reforma-home.css/pattern-decorations). v2.10.161. All measured off the 1440 Figma: eyebrow #9d793d @22px; margin-bottom 11px lands title line1 cap at y180. title #402800 (srgb 64,40,0) @71px, line-height 74px (line3 lands y347). subtext warm brown; buttons ~52px tall. */ @media (min-width:1024px){ html body .reforma-home-hero .reforma-hero-eyebrow{ color:#9d793d !important; font-size:20px !important; line-height:1.2 !important; font-weight:700 !important; letter-spacing:0 !important; margin:0 0 24px !important; } html body .reforma-home-hero .reforma-hero-title{ color:#402800 !important; font-size:64px !important; line-height:77px !important; /* Figma title = TRY Vesterbro 700, letter-spacing 0 (commercial font unavailable; Fraunces is the closest bundled substitute — match its weight/tracking exactly). */ font-weight:700 !important; letter-spacing:0 !important; margin:0 0 18px !important; } html body .reforma-home-hero .reforma-hero-sub{ font-family:'Fraunces','Playfair Display','TRY Vesterbro',Georgia,serif !important; color:#726c67 !important; line-height:1.2 !important; margin:0 0 44px !important; max-width:480px !important; } html body .reforma-home-hero .reforma-hero-cta-row{ margin-bottom:120px !important; } /* socials to Figma y690 */ /* Figma button notch: top-left + bottom-right rounded (live had the mirror). */ html body .reforma-home-hero .reforma-hero-btn{ padding:13px 30px !important; font-size:16px !important; border-radius:0 30px 0 30px !important; } html body .reforma-home-hero .reforma-hero-btn--primary{ font-weight:700 !important; background:linear-gradient(180deg,#9c783a 0%,#825a14 100%) !important; } html body .reforma-home-hero .reforma-hero-btn--ghost{ font-size:16px !important; letter-spacing:0 !important; border-radius:30px 0 30px 0 !important; } } /* dead leftover (hand is now baked into the cluster image). v2.10.161 */ @media (min-width:1024px){ html body .reforma-home-hero .reforma-hero-right .reforma-hero-hand{ display:none !important; } } /* HOME header content lift 11px to match Figma (logo/nav/actions sit higher). v2.10.149 */ @media (min-width:1024px){ body.home .reforma-site-header > .wp-block-group{ transform:translateY(-11px) !important; } } /* HERO header — Figma content band x74->x1372 (width 1298). v2.10.225 */ @media (min-width:1024px){ body.home .reforma-site-header > .wp-block-group.alignwide{ max-width:1298px !important; padding-left:0 !important; padding-right:0 !important; } body.home .reforma-site-header .reforma-header-search svg{ width:24px !important; height:24px !important; } } /* ========================================================================= v2.10.259 — HOME pixel-parity wave (client-visible deltas). ========================================================================= */ /* (a) Hero social icons — Figma node 130:2865 "Social media": gold stroke #9c783a (measured darkest pixel luminance ~123 == gold). Live was dark-plum #3e273b (luminance ~45). The icon color drives the SVG stroke (currentColor). */ html body .reforma-home-hero .reforma-hero-socials a{ color:#9c783a !important; border-color:#9c783a !important; } html body .reforma-home-hero .reforma-hero-socials a:hover{ background:#9c783a !important; border-color:#9c783a !important; color:#ffffff !important; } /* (b) Hero "Explore Treatments" primary button — Figma node 144:1508 (Group 169): the arrow icon sits IMMEDIATELY after the text (text x106..x253, arrow x253), NOT pushed to the far edge. Live pushed a thin → glyph out with loose whitespace. Pack the label + SVG arrow tightly (gap 8px), button hugs content. */ html body .reforma-home-hero .reforma-hero-btn--primary{ display:inline-flex !important; align-items:center !important; gap:8px !important; width:auto !important; white-space:nowrap !important; } html body .reforma-home-hero .reforma-hero-btn__label{ display:inline-block; } html body .reforma-home-hero .reforma-hero-btn__arrow{ display:inline-block; width:20px; height:20px; flex:0 0 auto; stroke:currentColor; stroke-width:2; vertical-align:middle; } /* ========================================================================= v2.10.264 — HOME FULL-BLEED SECTION BACKGROUNDS Fix: on screens wider than the 1440 design, the boxed #reforma-main left the page (body) cream #fff0e6 showing as side gutters next to white sections. Each block's OWN background must fill the gutter instead. Technique: keep #reforma-main boxed at 1440 (so every tuned section/decoration stays pixel-identical), move the horizontal clip up to , and paint the gutters with a horizontal-only box-shadow on each section (a copy of the section box shifted left/right by its own width — fills the gutter at the exact section height, never overlaps neighbours, and is immune to the sections' own overflow:hidden). Only active >1440; the design width is byte- identical. Per-block colour: white default, hero cream, offer band dark. ========================================================================= */ @media (min-width:1441px){ body.home{ overflow-x:clip; } body.home main#reforma-main{ overflow:visible !important; } body.home main#reforma-main > section, body.home main#reforma-main > div{ box-shadow: 1440px 0 0 0 #ffffff, -1440px 0 0 0 #ffffff; } body.home main#reforma-main > .reforma-home-hero{ box-shadow: 1440px 0 0 0 #fff0e6, -1440px 0 0 0 #fff0e6; } body.home main#reforma-main > .reforma-curated-offer{ box-shadow: 1440px 0 0 0 #2e1f0d, -1440px 0 0 0 #2e1f0d; } } /* ========================================================================= v2.10.279 — Language switcher in the footer copyright bar. The copyright band (v2.10.2 above: flex / centered, #1F3C38 strip) now holds the branded [reforma-language-switcher] pill end-aligned next to the copyright line. The horizontal gutter moves onto the band itself and the copyright

drops its baked-in gutter, so both items sit inside the 1304 content width. RTL mirrors automatically: the band inherits dir=rtl so the flex row reverses (copyright → right edge, switcher → left edge), while the pill keeps dir="ltr" internally (flag + language name stay LTR). ========================================================================= */ .reforma-site-footer > .reforma-footer-copyright-band{ justify-content:space-between !important; gap:14px 24px; flex-wrap:wrap; padding:13px max(40px, calc((100% - 1304px)/2)) !important; } .reforma-site-footer > .reforma-footer-copyright-band .reforma-footer-copyright{ padding:0 !important; text-align:start; } .reforma-site-footer > .reforma-footer-copyright-band .reforma-language-switcher{ flex:0 0 auto; } @media (max-width:599px){ .reforma-site-footer > .reforma-footer-copyright-band{ justify-content:center !important; text-align:center; } .reforma-site-footer > .reforma-footer-copyright-band .reforma-footer-copyright{ text-align:center; } } /* v2.10.280 — HERO WATERMARK → exact Figma 02-frame (node 130:2865). Figma frame page(-68,253) 1637x1640. Hero at page(0,118) → ring left:-68 top:135. Prior media-query/transform overrides shrank it to 1326 @ x84 (wrong). Force exact. */ html body .reforma-home-hero .reforma-hero-ring{ position:absolute !important; left:-68px !important; top:135px !important; width:1637px !important; height:1640px !important; transform:none !important; margin:0 !important; } html body .reforma-home-hero .reforma-hero-wm-img{ width:1637px !important; height:auto !important; max-width:none !important; display:block; margin:0 !important; } /* v2.10.281 — neutralize stray scale(0.9) on hero watermark so it renders at exact Figma 1637 size */ html body .reforma-home-hero .reforma-hero-watermark{ transform:none !important; } /* v2.10.282 — nudge desktop nav ~6px left to match Figma item x-positions (residual drift is font-substitution: Fraunces renders items slightly narrower than TRY Vesterbro). */ @media (min-width:1024px){ html body .reforma-site-header .reforma-primary-nav{ transform:translateX(-4.5px); } } /* ========================================================================= v2.10.286 — HOME pixel-parity wave (user batch 2026-06-04): hero height trim + mobile/tablet responsive, offer band (taller + centered vignette + full-bleed), section decorations (testimonials hand FLIP, objects floral+butterfly, physicians tulip placement, footer flower FLIP), news newsletter bird visibility. Last-loaded layer: html-body specificity. ========================================================================= */ /* ---- (1) HERO — trim trailing whitespace so the next section peeks (desktop) ---- */ @media (min-width:1024px){ html body .reforma-home-hero .reforma-hero-cta-row{ margin-bottom:44px !important; } html body .reforma-home-hero .reforma-hero-right{ min-height:430px !important; } html body main#reforma-main > .reforma-home-hero{ padding-bottom:28px !important; } } /* ---- (2) HERO — MOBILE/TABLET (<1024): title was 71px at ALL widths and overflowed ("Natural Bea…"); the 120px socials gap left a huge void. ---- */ @media (max-width:1023px){ html body .reforma-home-hero .reforma-hero-title{ font-size:clamp(34px,8.4vw,52px) !important; line-height:1.1 !important; letter-spacing:-0.01em !important; margin:0 0 16px !important; } html body .reforma-home-hero .reforma-hero-eyebrow{ font-size:18px !important; margin:0 0 14px !important; } html body .reforma-home-hero .reforma-hero-sub{ font-size:16px !important; margin:0 0 28px !important; max-width:none !important; } html body .reforma-home-hero .reforma-hero-cta-row{ margin-bottom:28px !important; } html body main#reforma-main > .reforma-home-hero{ padding-top:96px !important; padding-bottom:32px !important; } html body .reforma-home-hero .reforma-hero-grid{ gap:24px !important; } } @media (max-width:899px){ /* cluster stacks below the text — keep it modest so the hero isn't ~1160px tall */ html body .reforma-home-hero .reforma-hero-cluster{ max-width:430px !important; margin:4px auto 0 !important; } html body .reforma-home-hero .reforma-hero-socials{ margin-top:4px !important; } } @media (max-width:599px){ html body main#reforma-main > .reforma-home-hero{ padding-top:84px !important; } html body .reforma-home-hero .reforma-hero-cluster{ max-width:360px !important; } } /* ---- (3) OFFER BAND — taller (Figma 578), centered content, soft centered vignette (Figma: florals show at the edges, dark only behind the text), true full-bleed on >1440 (body already overflow-x:clip there). ---- */ html body .reforma-curated-offer{ min-height:578px !important; } html body .reforma-curated-offer > .wp-block-cover__background{ opacity:1 !important; background:radial-gradient(118% 132% at 50% 48%, rgba(46,31,13,0.62) 0%, rgba(46,31,13,0.40) 52%, rgba(46,31,13,0.16) 100%) !important; } html body .reforma-curated-offer > .wp-block-cover__inner-container{ max-width:760px !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; } @media (min-width:1441px){ html body main#reforma-main > .reforma-curated-offer{ width:100vw !important; max-width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; box-shadow:none !important; } } /* ---- (4) TESTIMONIALS hand+butterfly — Figma 09-group-131: 4b698779 at page x989 y0, 520x325, scaleX=-1 (MIRRORED). Live wasn't flipped + sat 96px too far left. ---- */ @media (min-width:1024px){ html body .reforma-testimonials__deco{ top:-48px !important; left:calc(50% + 269px) !important; right:auto !important; width:520px !important; height:325px !important; } html body .reforma-testimonials__deco img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; transform:scaleX(-1) !important; } } /* ---- (5) OBJECTS OF BEAUTY — Figma 10-group-167: blue tulip 66df8cb2 at page x1099 y55 (423x393); pink butterfly 07052d2e at page x981 y0 (261x187, scaleX=-1). ---- */ @media (min-width:1024px){ html body .reforma-objects-of-beauty .reforma-oob-deco{ position:absolute !important; inset:0 !important; top:0 !important; right:0 !important; width:auto !important; height:auto !important; } html body .reforma-objects-of-beauty .reforma-oob-deco-floral{ position:absolute !important; top:55px !important; left:calc(50% + 379px) !important; right:auto !important; width:423px !important; height:393px !important; object-fit:cover !important; object-position:center !important; aspect-ratio:auto !important; } html body .reforma-objects-of-beauty .reforma-oob-deco-butterfly{ position:absolute !important; top:0 !important; left:calc(50% + 261px) !important; right:auto !important; width:261px !important; height:187px !important; object-fit:cover !important; object-position:center !important; transform:scaleX(-1) !important; } } /* ---- (6) PHYSICIANS tulip — desktop placement comes from the pattern inline style (left:calc(50% + 127px), 870x437). Shrink/anchor on tablet+mobile. ---- */ @media (max-width:1023px){ html body .reforma-phys-deco{ left:auto !important; right:0 !important; top:0 !important; width:min(56vw,560px) !important; height:auto !important; aspect-ratio:870/437 !important; opacity:0.9 !important; } } @media (max-width:640px){ html body .reforma-phys-deco{ width:64vw !important; opacity:0.55 !important; } } /* ========================================================================= v2.10.287 — follow-up polish: - mobile hero top padding (eyebrow "Aesthetic Excellence" was clipping under the absolute home header at <600px) - footer flower (Figma 11-group-150): bloom was a touch large/low → smaller + raised + nudged right to match the Figma upper-right placement (flip kept). ========================================================================= */ @media (max-width:599px){ html body main#reforma-main > .reforma-home-hero{ padding-top:104px !important; } } /* ========================================================================= v2.10.288 — HOME pixel batch (user 2026-06-05): (1) HERO height trim — kill the base height:clamp(540,50vw,760) on .reforma-hero-right that left ~155px dead space below the cluster. (2) TESTIMONIALS + NEWS true full-bleed (>1440); inner content unchanged. (3) TESTIMONIALS hand anchored to the real right page edge (from outside). (4) OBJECTS OF BEAUTY floral — smaller + raised. (6) FOOTER flower+bird — exact Figma 11-group-150 (NO flip, center-anchored, 1045/535px desktop; corner-scaled tablet/mobile). (7) Mobile/tablet hero top padding (title+eyebrow were under abs header). ========================================================================= */ /* ---- (1) HERO height — remove dead space below the absolute cluster ---- */ @media (min-width:1024px){ html body .reforma-home-hero .reforma-hero-grid{ padding-top:32px !important; align-items:start !important; } html body .reforma-home-hero .reforma-hero-right{ height:600px !important; min-height:0 !important; } html body main#reforma-main > .reforma-home-hero{ padding-bottom:24px !important; } } @media (max-width:1023px){ html body .reforma-home-hero .reforma-hero-right{ height:auto !important; min-height:0 !important; } } /* ---- (2) TESTIMONIALS + NEWS full-bleed (>1440 only; <=1440 already fills the viewport since #reforma-main is 100%). main is overflow:visible here. ---- */ @media (min-width:1441px){ body.home main#reforma-main > .reforma-testimonials, body.home main#reforma-main > .reforma-home-news{ width:100vw !important; max-width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; box-shadow:none !important; } } /* ---- (3) TESTIMONIALS hand — deco is now a direct child of the full-width section (see pattern), so anchor it to the section's right edge. Keep the Figma scaleX(-1) (asset wrist points the wrong way). ---- */ @media (min-width:1024px){ html body .reforma-testimonials__deco{ position:absolute !important; left:auto !important; right:-40px !important; top:0 !important; width:520px !important; height:325px !important; z-index:0 !important; } html body .reforma-testimonials__deco img{ width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; transform:scaleX(-1) !important; } } /* ---- (4) OBJECTS OF BEAUTY floral + butterfly — smaller + raised ---- */ @media (min-width:1024px){ html body .reforma-objects-of-beauty .reforma-oob-deco-floral{ top:6px !important; left:calc(50% + 438px) !important; right:auto !important; width:330px !important; height:300px !important; aspect-ratio:auto !important; object-fit:cover !important; object-position:center !important; } html body .reforma-objects-of-beauty .reforma-oob-deco-butterfly{ top:-14px !important; left:calc(50% + 318px) !important; right:auto !important; width:205px !important; height:147px !important; object-fit:cover !important; object-position:center !important; transform:scaleX(-1) !important; } } @media (max-width:1023px){ html body .reforma-footer-cta-flower{ left:auto !important; right:-30px !important; top:-64px !important; width:min(62vw,360px) !important; max-width:none !important; transform:none !important; } html body .reforma-footer-cta-bird{ left:auto !important; right:118px !important; top:-34px !important; width:min(34vw,200px) !important; max-width:none !important; transform:none !important; } } @media (max-width:599px){ html body .reforma-footer-cta-flower{ right:-22px !important; top:-44px !important; width:min(58vw,220px) !important; } html body .reforma-footer-cta-bird{ right:58px !important; top:-24px !important; width:min(40vw,148px) !important; } } /* ---- (7) Mobile/tablet hero top padding — clear the absolute home header ---- */ @media (min-width:600px) and (max-width:1023px){ html body main#reforma-main > .reforma-home-hero{ padding-top:120px !important; } } @media (max-width:599px){ html body main#reforma-main > .reforma-home-hero{ padding-top:128px !important; } } /* ========================================================================= v2.10.288 — HOME POLISH (user round 2026-06-05). Appended LAST = wins. (1) hero too tall -> trim dead grid-cell height below the absolute cluster. (2) objects-of-beauty deco a touch smaller + raised (toward Figma 541x448). (3a) full-bleed Testimonials + News (no side gaps >1440); inner content keeps its max-width + centering so element sizes are UNCHANGED. (3b) testimonials hand right edge -> true page edge (arm from outside, Figma). (3c) footer flower+bird anchored to the centered 1440 design box (Figma 11-group-150 exact) instead of % of the full-bleed band (was huge). (5) mobile/tablet hero: eyebrow+title were tucking under the 118px absolute header (padding-top forced to 0 by a (1,2,2) rule) -> beat it (1,2,3). ========================================================================= */ /* (1) HERO height trim (cluster is position:absolute, so the right grid-cell height was the only thing padding the hero out below the artwork). */ @media (min-width:1024px){ html body .reforma-home-hero .reforma-hero-right{ height:auto !important; min-height:clamp(560px, calc(100vh - 174px), 720px) !important; } } /* (5) MOBILE/TABLET hero top-clear — specificity (1,2,3) beats the (1,2,2) `padding-top:0 !important` killer. Header is ~118px tall on home. */ @media (max-width:1023px){ html body.home main#reforma-main > .reforma-home-hero{ padding-top:130px !important; } } @media (max-width:599px){ html body.home main#reforma-main > .reforma-home-hero{ padding-top:126px !important; } } /* (3a) FULL-BLEED Testimonials + News & Journal. main is overflow:visible on home, so the 100vw breakout paints full width; (1,1,2) beats the (1,0,4) boxing rule. At <=1440 this is a no-op (section already == viewport). */ body main#reforma-main > .reforma-testimonials, body main#reforma-main > .reforma-home-news{ width:100vw !important; max-width:100vw !important; box-sizing:border-box !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; } /* (3b) Testimonials hand: anchor right edge to the viewport right edge while __inner stays centered at 1307. (hand is hidden <=900 already). */ @media (min-width:901px){ html body .reforma-testimonials .reforma-testimonials__deco{ right:0 !important; left:auto !important; } } /* (2) OBJECTS OF BEAUTY deco — reverted my conflicting container-width rule (it fought the authoritative left:calc(50%+N) floral/butterfly rules above). OOB tuning lives in block (4) below. */ /* ========================================================================= v2.10.289 — fix: mobile/tablet hero top padding lost the cascade to `body.home main#reforma-main>.reforma-home-hero{padding-top:0!important}` (spec 1,2,2). Use html body.home … (spec 1,2,3) to win. The sticky/abs home header (~118px) was overlapping the eyebrow + title top. ========================================================================= */ @media (min-width:600px) and (max-width:1023px){ html body.home main#reforma-main > .reforma-home-hero{ padding-top:124px !important; } } @media (max-width:599px){ html body.home main#reforma-main > .reforma-home-hero{ padding-top:132px !important; } } /* ========================================================================= v2.10.290 — fix: tablet/mobile FOOTER flower was anchored too high (small flower → bloom clipped above the band, only the stem showed). Lower it so the bloom sits in the top-right corner; hide the bird on <=1023 (desktop flourish that clutters the small band). ========================================================================= */ @media (max-width:1023px){ html body .reforma-footer-cta-flower{ left:auto !important; right:-12px !important; top:-14px !important; width:min(50vw,400px) !important; max-width:none !important; transform:none !important; } html body .reforma-footer-cta-bird{ display:none !important; } } @media (max-width:599px){ html body .reforma-footer-cta-flower{ right:-8px !important; top:-6px !important; width:min(58vw,230px) !important; } } /* ========================================================================= v2.10.291 — fix: mobile FOOTER flower bloom sat at the band's very top, hidden behind the fixed (scrolled) home header. Drop it into the band so the bloom clears the header. ========================================================================= */ @media (max-width:599px){ html body .reforma-footer-cta-flower{ right:-10px !important; top:56px !important; width:min(56vw,215px) !important; } } /* ========================================================================= v2.10.344 — FINAL footer CTA bird + flower (2026-06-08). Supersedes every prior stacked desktop block (v2.10.288-343) and the base scaleX flip (l.972). Assets are CLEAN alpha cutouts extracted from the ORIGINAL Figma source images (03e650c1.. flower+stem, 17af718f.. bird) with the node's exact reflection + rotation baked into the pixels, then auto-cropped to the on-screen content box. Placement = Figma 11-group-150, band-relative @1x (band design width 1440) so it lands pixel-exact at 1440 and scales with the full-bleed band: FLOWER content box: left 55.07% top -134px width 71.88% (1035/1440) BIRD content box: left 44.03% top -77px width 41.46% (597/1440) No transform (rotation/flip is in the pixels); object-fit:contain so the intrinsic PNG ratio governs (never cropped). ========================== */ @media (min-width:1024px){ html body .reforma-footer-cta-flower{ left:55.07% !important; right:auto !important; top:-134px !important; width:71.88% !important; height:auto !important; aspect-ratio:auto !important; object-fit:contain !important; object-position:center !important; transform:none !important; z-index:1 !important; display:block !important; } html body .reforma-footer-cta-bird{ left:44.03% !important; right:auto !important; top:-77px !important; width:41.46% !important; height:auto !important; aspect-ratio:auto !important; object-fit:contain !important; object-position:center !important; transform:none !important; z-index:2 !important; display:block !important; } } /* Tablet/mobile: keep the client-confirmed PLACEMENT blocks above, but let the new asset show uncropped (base 1045/805 cover + the v2.10.335 553/722 fix were for older assets; bird stays display:none on <=1023 per l.1185). */ @media (max-width:1023px){ html body .reforma-footer-cta-flower{ aspect-ratio:auto !important; height:auto !important; object-fit:contain !important; transform:none !important; } html body .reforma-footer-cta-bird{ aspect-ratio:auto !important; height:auto !important; object-fit:contain !important; transform:none !important; } } /* v2.10.347 — re-tune tablet/mobile footer flower for the NEW landscape asset. Heading is centered + full-width on small screens, so the only clear space is the top-right corner. Place the bloom there (no flip; stem trails into the right margin), small + just below the band top so it reads as a corner accent without covering the heading. Bird stays hidden <=1023. */ @media (min-width:600px) and (max-width:1023px){ html body .reforma-footer-cta-flower{ left:auto !important; right:-22px !important; top:-12px !important; width:min(30vw,240px) !important; transform:none !important; opacity:0.97 !important; } } @media (max-width:599px){ html body .reforma-footer-cta-flower{ left:auto !important; right:-10px !important; top:-8px !important; width:min(42vw,160px) !important; transform:none !important; opacity:0.96 !important; } } /* ========================================================================= v2.10.349 — MOBILE header CTA: keep "Book Appointment" a compact gold circle in EVERY state (home top + scrolled + inner pages). BUG was: on scroll the home header got .is-scrolled and an always-on "primary 219x52" pill rule beat the @media(max-width:900) circle rule (equal specificity, later source). The doubled .reforma-site-header class below => specificity (0,5,4) beats every existing (0,4,4) pill rule, and being last locks it. ============== */ @media (max-width:900px){ html body header.reforma-site-header.reforma-site-header .reforma-header-actions a.reforma-header-cta-link, html body.home header.reforma-site-header.reforma-site-header:not(.is-scrolled) .reforma-header-actions a.reforma-header-cta-link, html body header.reforma-site-header.reforma-site-header.is-scrolled .reforma-header-actions a.reforma-header-cta-link, html body.home header.reforma-site-header.reforma-site-header.is-scrolled .reforma-header-actions a.reforma-header-cta-link{ width:46px !important; min-width:46px !important; max-width:46px !important; height:46px !important; border-radius:50% !important; padding:0 !important; gap:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; font-size:0 !important; line-height:0 !important; background:linear-gradient(135deg,#a07c42 0%,#825a14 100%) !important; color:#fff !important; box-shadow:none !important; border:0 !important; } html body header.reforma-site-header.reforma-site-header .reforma-header-actions a.reforma-header-cta-link span{ display:none !important; } html body header.reforma-site-header.reforma-site-header .reforma-header-actions a.reforma-header-cta-link svg{ width:18px !important; height:18px !important; margin:0 !important; stroke:#fff !important; } } /* ========================================================================= v2.10.356 — MOBILE overlay menu items: DARK on the light overlay, never white. The open hamburger overlay inherited the header's white nav color when the WP preset var (--wp--preset--color--ink) failed to resolve on some phones → fell back to the .reforma-site-header white rule. Force explicit hex (no var), high specificity, scoped to .is-menu-open ONLY so the desktop top-bar nav is untouched. Current/selected item = gold. ===================== */ html body .reforma-site-header .reforma-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content, html body .reforma-site-header.is-scrolled .reforma-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content, html body .reforma-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{ color:#2b2b2b !important; } html body .reforma-site-header .reforma-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover, html body .reforma-site-header .reforma-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible{ color:#9c783a !important; } html body .reforma-site-header .reforma-primary-nav .wp-block-navigation__responsive-container.is-menu-open .reforma-nav-link.is-active .wp-block-navigation-item__content, html body .reforma-site-header .reforma-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content, html body .reforma-site-header .reforma-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item[aria-current] .wp-block-navigation-item__content{ color:#9c783a !important; font-weight:700 !important; } html body .reforma-site-header .reforma-primary-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{ color:#2b2b2b !important; } /* v2.10.358 — kill the brand-col dead space: inline flex:0 1 441px becomes a fixed 441px HEIGHT once the footer-row stacks to a column on mobile/tablet, leaving ~160px empty under the socials. Reset to content height when stacked. */ @media (max-width:1023px){ html body .reforma-footer-brand-col{ flex:0 0 auto !important; flex-basis:auto !important; height:auto !important; max-width:100% !important; } } /* ========================================================================= v2.10.356 — MOBILE footer tightening (keep ALL content). The accordion columns had large inter-row gaps (40-48px) that read as empty bands, and the footer-main-inner kept its big desktop top padding on phones. Trim dead vertical space only. =================================== */ @media (max-width:899px){ html body .reforma-footer-main-inner{ padding:40px 0 24px !important; } html body .reforma-footer-cols{ gap:0 !important; } /* accordion rows divide via their border, not empty bands */ html body .reforma-footer-row{ gap:32px !important; margin-bottom:8px !important; } html body .reforma-footer-col{ padding-top:14px !important; padding-bottom:14px !important; } } @media (max-width:599px){ html body .reforma-footer-main-inner{ padding:30px 0 18px !important; } html body .reforma-footer-row{ gap:24px !important; } html body .reforma-footer-brand-col{ gap:16px !important; } html body .reforma-footer-col{ padding-top:12px !important; padding-bottom:12px !important; } html body .reforma-site-footer > .reforma-footer-copyright-band{ min-height:52px !important; } } /* ========================================================================= v2.10.360 — HEADER SEARCH overlay (command-palette style, web + mobile). ========================================================================= */ html.reforma-search-lock{ overflow:hidden !important; } .reforma-search-overlay{ position:fixed; inset:0; z-index:100000; display:none; } .reforma-search-overlay.is-open{ display:block; } .reforma-search-backdrop{ position:absolute; inset:0; background:rgba(18,33,30,0.55); -webkit-backdrop-filter:blur(8px) saturate(1.2); backdrop-filter:blur(8px) saturate(1.2); animation:reforma-search-fade .22s ease; } .reforma-search-panel{ position:relative; max-width:680px; margin:8vh auto 0; background:#fffdfa; border-radius:18px; box-shadow:0 30px 90px rgba(0,0,0,0.38); overflow:hidden; animation:reforma-search-rise .26s cubic-bezier(.2,.7,.3,1); } .reforma-search-form{ display:flex; align-items:center; gap:12px; padding:20px 22px; border-bottom:1px solid rgba(0,0,0,0.08); } .reforma-search-mag{ color:#9c783a; flex:0 0 auto; } .reforma-search-input{ flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent; font-family:'Fraunces','Playfair Display',Georgia,serif; font-size:22px; color:#2b2b2b; } .reforma-search-input::placeholder{ color:rgba(0,0,0,0.38); } .reforma-search-close{ flex:0 0 auto; width:40px; height:40px; border:0; border-radius:50%; background:rgba(0,0,0,0.05); color:#2b2b2b; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .15s ease; } .reforma-search-close:hover{ background:rgba(0,0,0,0.10); } .reforma-search-body{ max-height:min(60vh,520px); overflow-y:auto; padding:8px; } .reforma-search-status{ margin:0; padding:18px 16px; color:rgba(0,0,0,0.5); font-family:'Fraunces','Playfair Display',Georgia,serif; font-size:15px; } .reforma-search-results{ display:flex; flex-direction:column; } .reforma-sr{ display:flex; align-items:center; gap:14px; padding:11px 14px; border-radius:12px; text-decoration:none; color:inherit; transition:background .14s ease; } .reforma-sr:hover, .reforma-sr.is-active{ background:rgba(156,120,58,0.09); } .reforma-sr-thumb{ flex:0 0 auto; width:52px; height:52px; border-radius:10px; background-size:cover; background-position:center; background-color:#ece6da; } .reforma-sr-thumb--none{ background:linear-gradient(135deg,#ece3d2,#d9cbb0); } .reforma-sr-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; } .reforma-sr-type{ font-family:Poppins,'Helvetica Neue',sans-serif; font-size:11px; letter-spacing:0.09em; text-transform:uppercase; color:#9c783a; font-weight:600; } .reforma-sr-title{ font-family:'Fraunces','Playfair Display',Georgia,serif; font-size:17px; color:#2b2b2b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .reforma-sr-meta{ font-family:Poppins,'Helvetica Neue',sans-serif; font-size:12px; color:rgba(0,0,0,0.45); } .reforma-sr-arrow{ flex:0 0 auto; color:#9c783a; opacity:0; transform:translateX(-4px); transition:.15s ease; } .reforma-sr:hover .reforma-sr-arrow, .reforma-sr.is-active .reforma-sr-arrow{ opacity:1; transform:none; } .reforma-search-all{ display:block; text-align:center; padding:14px; margin:8px 6px 6px; border-radius:12px; background:#29514c; color:#fff !important; text-decoration:none !important; font-family:'Fraunces','Playfair Display',Georgia,serif; font-weight:600; font-size:15px; letter-spacing:0.02em; } .reforma-search-all:hover{ background:#1f3f3b; } .reforma-search-foot{ padding:11px 22px; border-top:1px solid rgba(0,0,0,0.06); font-family:Poppins,'Helvetica Neue',sans-serif; font-size:12px; color:rgba(0,0,0,0.4); } .reforma-search-foot kbd{ font-family:inherit; background:rgba(0,0,0,0.06); border-radius:5px; padding:1px 6px; } @keyframes reforma-search-fade{ from{opacity:0} to{opacity:1} } @keyframes reforma-search-rise{ from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none} } @media (max-width:599px){ .reforma-search-panel{ margin:0; min-height:100%; border-radius:0; display:flex; flex-direction:column; } .reforma-search-input{ font-size:18px; } .reforma-search-body{ flex:1 1 auto; max-height:none; } } @media (prefers-reduced-motion:reduce){ .reforma-search-backdrop, .reforma-search-panel{ animation:none !important; } } /* Search icon = a tappable 44px hit-area on MOBILE (it was display:none <=900). High specificity (beats body.home:not(.is-scrolled){width:auto;border:none}, 0,5,1). Borderless — just enlarges the tap target around the icon; colour inherits (dark on the light top bar, white on the green scrolled bar). */ @media (max-width:900px){ html body.home .reforma-site-header:not(.is-scrolled) .reforma-header-actions .reforma-header-search, html body .reforma-site-header.is-scrolled .reforma-header-actions .reforma-header-search, html body .reforma-site-header.reforma-site-header .reforma-header-actions .reforma-header-search{ display:inline-flex !important; width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important; padding:0 !important; margin:0 2px 0 0 !important; align-items:center !important; justify-content:center !important; border:0 !important; border-radius:50% !important; background:transparent !important; } html body .reforma-site-header.reforma-site-header .reforma-header-actions .reforma-header-search svg{ width:22px !important; height:22px !important; stroke:currentColor !important; } } /* kill the browser's native search-input clear (×) so only our close button shows */ .reforma-search-input::-webkit-search-cancel-button, .reforma-search-input::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; } /* ========================================================================= v2.10.395 — HERO: photo cluster replaced by the BIG transparent REFORMA monogram (client hide/edit batch 2026-06-10). The now serves assets/figma-images/reforma-monogram-v2.svg (gold #9A7435 double-R mark) — same element/class, so this block restyles it from the old 844px photo-composite geometry to a centered watermark-style mark. Desktop: ~520px, vertically centered in the right hero region, opacity .13 so the hero text stays dominant. Tablet (768–1023): small centered mark in the stacked flow (between sub-text and CTAs, per the v2.10.349 order rules). Mobile (<=767): hidden — it crowded the small screens. Watermark ring + text/buttons/socials untouched. Revert: delete this block + restore the home_hero_image ACF value (attachment 112) + pattern fallback. ========================================================================= */ @media (min-width:1024px){ html body .reforma-home-hero .reforma-hero-cluster{ position:absolute !important; top:50% !important; left:auto !important; right:170px !important; bottom:auto !important; transform:translateY(-50%) !important; width:auto !important; height:min(520px, 80vh) !important; max-width:none !important; min-width:0 !important; margin:0 !important; opacity:0.13 !important; z-index:1 !important; pointer-events:none !important; user-select:none !important; } } @media (min-width:768px) and (max-width:1023px){ html body .reforma-home-hero .reforma-hero-cluster{ width:min(40vw, 280px) !important; max-width:280px !important; height:auto !important; margin:6px auto 20px !important; opacity:0.14 !important; pointer-events:none !important; } } @media (max-width:767px){ html body .reforma-home-hero .reforma-hero-cluster{ display:none !important; } } /* v2.10.396 — HERO monogram: hide on TABLET too (<=1023). In the stacked flow the small in-flow mark visually merged with the tiled watermark ring and read as accidental dead space between the sub-text and the CTAs (verified 768 screenshot). The mark is now desktop-only (>=1024); supersedes the 768–1023 sizing rule in the v2.10.395 block above. */ @media (max-width:1023px){ html body .reforma-home-hero .reforma-hero-cluster{ display:none !important; margin:0 !important; } } /* v2.10.397 — HERO monogram upright (client refinement batch 2026-06-11). ROOT CAUSE: no CSS rotation anywhere in the cascade (computed transform on .reforma-hero-cluster was a pure translate matrix(1,0,0,1,0,-260)); the double-R glyph is DRAWN ~5.2 deg counterclockwise inside the reforma-monogram-v2.svg viewBox itself (no transform attrs in the SVG — the path coordinates are tilted). Measured across 3 straight features of the mark (lens long-axis, top-right + bottom-left serif bars): raw tilt -4.0..-5.3 deg; iterated counter-rotations 4.0/4.5/5.0/5.2/5.5 — the lens axis zeroes at +5.2 deg (residual +0.04 deg). Counter-rotate clockwise; keeps the v2.10.395 translateY(-50%) centering. No container clipping at 1440 (rotated bbox 730..1290 x 214..774 inside hero 0..1440 x 118..894). Tablet/mobile hide rules (v2.10.396) unaffected. */ @media (min-width:1024px){ html body .reforma-home-hero .reforma-hero-cluster{ transform:translateY(-50%) rotate(5.2deg) !important; } } /* v2.10.398 — footer language-switcher hover: text must be footer green, not white. Root cause: mobile-home.css :hover sets a light pill bg + gold text, but footer white-link rules outrank the color → white-on-white. This block loads last. */ html body .reforma-site-footer .reforma-language-switcher__link:hover, html body .reforma-site-footer .reforma-language-switcher__link:focus-visible { color: #29514c !important; } html body .reforma-site-footer .reforma-language-switcher__link:hover img, html body .reforma-site-footer .reforma-language-switcher__link:focus-visible img { box-shadow: 0 0 0 1px rgba(41, 81, 76, 0.25); } /* v2.10.399 — HERO monogram: SHOW on mobile/tablet again (client request 2026-06-11). The v2.10.396 hide existed only because the mark merged with the tiled watermark RING in the stacked flow; the ring was removed entirely in v2.10.397, so the collision is gone. Centered in-flow watermark between hero text and CTAs, same 5.2deg glyph-tilt correction as desktop. Supersedes both hide rules above. */ @media (max-width:1023px){ html body .reforma-home-hero .reforma-hero-cluster{ display:block !important; position:relative !important; top:auto !important; left:auto !important; right:auto !important; width:min(56vw, 300px) !important; height:auto !important; margin:8px auto 16px !important; opacity:0.14 !important; z-index:1 !important; pointer-events:none !important; user-select:none !important; transform:rotate(5.2deg) !important; } } /* v2.10.400 — header logo = WORDMARK ONLY (client request 2026-06-11). New asset reforma-logo-word.svg (7 letter groups extracted from reforma-logo.svg, tight viewBox 131.69x16.41, gold #9b7535 fills). Aspect went 4.18:1 → 8.03:1, so the height-driven rules above (46px desktop / 38px mobile) would render it 369px/305px wide — re-based height-driven sizing: cap-height ≈ nav's 20px type, widths land ≈168/144/128px (close to the old 188/150/130 footprints). */ .reforma-site-header .reforma-logo .reforma-logo-img{ height:21px !important; width:auto !important; max-height:none !important; } @media (max-width:900px){ .reforma-site-header .reforma-logo .reforma-logo-img{ height:18px !important; width:auto !important; } } @media (max-width:480px){ .reforma-site-header .reforma-logo .reforma-logo-img{ height:16px !important; width:auto !important; } } /* v2.10.401 — logo crop CORRECTION (client: "crop the REAL logo, same logo"). Asset = reforma-logo-cropped.svg: the ORIGINAL logo file untouched, only the viewBox windowed to the word (mark sits outside the crop). Word now renders at its EXACT size inside the old full logo: old logo 46px tall / 45-unit box = 1.022 px/unit -> word (16.41u) = 17px desktop; old mobile 38px -> 14px. Supersedes the v2.10.400 sizing block. */ .reforma-site-header .reforma-logo .reforma-logo-img{ height:17px !important; width:auto !important; } @media (max-width:900px){ .reforma-site-header .reforma-logo .reforma-logo-img{ height:14px !important; width:auto !important; } } @media (max-width:480px){ .reforma-site-header .reforma-logo .reforma-logo-img{ height:14px !important; width:auto !important; } }