and inherited text fell to the browser default (Albert Sans weight 400) — one step heavier than the standard. This rule sets the spec baseline; headings, buttons, eyebrows, and labels all set their own weight explicitly, so they are unaffected. */ body { margin: 0; font-family: var(--wp--preset--font-family--body); font-weight: 300; font-size: var(--wp--preset--font-size--body, 17px); line-height: 1.7; color: var(--wp--preset--color--stone); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---- Accessibility: Skip Link ------------------------------------------ */ .skip-link { /* v0.8.2 — Cormorant SC nav-style label per Joy's spec. */ position: absolute; top: -40px; left: 0; background: var(--wp--preset--color--button-fill); color: var(--wp--preset--color--warm-white); padding: 12px 18px; font-family: var(--wp--preset--font-family--accent); font-size: 12px; font-weight: 500; letter-spacing: 0.17em; text-transform: uppercase; text-decoration: none; z-index: 1000; transition: top 200ms var(--wp--custom--ease--out); } .skip-link:focus { top: 0; outline: 2px solid var(--wp--preset--color--rust); outline-offset: 2px; } /* ---- Site Header ------------------------------------------------------- */ /* Fixed-positioned so it floats over hero content (doesn't reserve vertical space in the flow). Inner pages add padding-top to

to compensate. Dark-hero pages remove that padding so the hero photo fills the viewport from y=0 and the header overlays it. Default visual state: solid warm-white with dark text (inner pages). On : transparent with white text over the hero, transitioning to a solid black bar with white text once .is-scrolled is added by nav.js (scroll past 40px). */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(253, 250, 246, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(20, 20, 20, 0.09); font-family: var(--wp--preset--font-family--body); transition: background var(--wp--custom--duration--base) var(--wp--custom--ease--out), border-color var(--wp--custom--duration--base) var(--wp--custom--ease--out), color var(--wp--custom--duration--base) var(--wp--custom--ease--out), transform var(--wp--custom--duration--base) var(--wp--custom--ease--out); } .site-header.is-hidden { transform: translateY(-100%); } /* Push content below the fixed header by default (inner pages without a dark hero). On dark-hero pages, the header floats over the hero, so no top-padding is added. */ main { padding-top: 120px; } body.has-dark-hero main { padding-top: 0; } /* Belt-and-suspenders: any

that contains a .home-hero or .inner-hero (anywhere inside — direct child, or wrapped in a wp-block-group / wp-block-html / any other WP block-editor wrapper) gets padding-top: 0 regardless of whether body.has-dark-hero made it onto the body. Covers the edge cases where the body_class filter doesn't fire — block-editor preview, CPT entries the filter doesn't detect, post_content wrapped in wp:html blocks by the importer. Requires CSS :has() support (Chrome/Edge 105+, Safari 15.4+, Firefox 121+). */ main:has(.home-hero), main:has(.inner-hero) { padding-top: 0; } /* Kill the WordPress block-gap between header template-part and main. theme.json sets useRootPaddingAwareAlignments + a spacing scale that results in WP injecting `margin-block-start: var(--wp--style--block-gap)` (~1.5rem / 24px) on main as a sibling of the header template-part. That gap is fine on inner pages, but on hero pages the hero must butt against the bottom of the fixed header with zero gap — otherwise a 24px strip of the body background bleeds through. */ body:has(main .home-hero) main, body:has(main .inner-hero) main, body.has-dark-hero main { margin-block-start: 0 !important; } /* Header transparency belt-and-suspenders: same idea, applied to the site header. When the page has a hero, the header should float over it with a semi-transparent dark wash + backdrop blur so the cream logo + nav links stay legible over any hero photo. (v0.6.1) */ body:has(main .home-hero) .site-header:not(.is-scrolled), body:has(main .inner-hero) .site-header:not(.is-scrolled), body.has-dark-hero .site-header:not(.is-scrolled) { background: rgba(20, 16, 12, 0.42); -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%); border-bottom-color: rgba(255, 255, 255, 0.06); } /* Defensive backstop (v0.6.1): any page that does NOT carry a hero trigger (.home-hero / .inner-hero in

, or body.has-dark-hero) gets the solid-cream header — even if a stale rule, inherited markup, or unexpected class combination would otherwise leave the header transparent. This rule is the last word for non-hero pages. */ body:not(.has-dark-hero):not(:has(main .home-hero)):not(:has(main .inner-hero)) .site-header:not(.is-scrolled) { background: rgba(253, 250, 246, 0.94) !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; } body:has(main .home-hero) .site-header:not(.is-scrolled) .site-header__logo img, body:has(main .inner-hero) .site-header:not(.is-scrolled) .site-header__logo img { filter: invert(100%) brightness(110%); } body:has(main .home-hero) .site-header:not(.is-scrolled) .site-header__menu a, body:has(main .home-hero) .site-header:not(.is-scrolled) .site-header__phone, body:has(main .inner-hero) .site-header:not(.is-scrolled) .site-header__menu a, body:has(main .inner-hero) .site-header:not(.is-scrolled) .site-header__phone { color: var(--wp--preset--color--warm-white); border-color: rgba(253, 250, 246, 0.55); } body:has(main .home-hero) .site-header:not(.is-scrolled) .site-header__menu a:hover, body:has(main .home-hero) .site-header:not(.is-scrolled) .site-header__menu a[aria-current="page"], body:has(main .inner-hero) .site-header:not(.is-scrolled) .site-header__menu a:hover, body:has(main .inner-hero) .site-header:not(.is-scrolled) .site-header__menu a[aria-current="page"] { color: var(--wp--preset--color--rust-light); } body:has(main .home-hero) .site-header:not(.is-scrolled) .site-header__phone:hover, body:has(main .inner-hero) .site-header:not(.is-scrolled) .site-header__phone:hover { background: rgba(253, 250, 246, 0.12); border-color: var(--wp--preset--color--warm-white); color: var(--wp--preset--color--warm-white); } body:has(main .home-hero) .site-header:not(.is-scrolled) .site-header__burger, body:has(main .inner-hero) .site-header:not(.is-scrolled) .site-header__burger { border-color: var(--wp--preset--color--rust); } body:has(main .home-hero) .site-header:not(.is-scrolled) .site-header__burger span, body:has(main .inner-hero) .site-header:not(.is-scrolled) .site-header__burger span { background: var(--wp--preset--color--warm-white); } /* Submenu (dropdown panel) on dark-hero pages keeps its own dark text color since the panel itself has a light background. */ body:has(main .home-hero) .site-header:not(.is-scrolled) .site-header__submenu a, body:has(main .inner-hero) .site-header:not(.is-scrolled) .site-header__submenu a { color: var(--wp--preset--color--text-deep); border-bottom: 0; } body:has(main .home-hero) .site-header:not(.is-scrolled) .site-header__submenu a:hover, body:has(main .home-hero) .site-header:not(.is-scrolled) .site-header__submenu a[aria-current="page"], body:has(main .inner-hero) .site-header:not(.is-scrolled) .site-header__submenu a:hover, body:has(main .inner-hero) .site-header:not(.is-scrolled) .site-header__submenu a[aria-current="page"] { background: var(--wp--preset--color--warm-1); color: var(--wp--preset--color--rust); } /* WP admin-bar offset: when an admin is logged in, position:fixed site-header would render BEHIND the WP admin bar. Push it down by the admin bar height. */ .admin-bar .site-header[data-sticky-header] { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .site-header[data-sticky-header] { top: 46px; } } @media screen and (max-width: 600px) { .admin-bar .site-header[data-sticky-header] { top: 0; } } /* DARK-HERO MODE — applies on pages with .has-dark-hero on . At top: header background (dark wash) is declared in the combined :has() rule above; this block only declares the text/logo/nav color overrides. On scroll: header gets a solid black bar. */ body.has-dark-hero .site-header:not(.is-scrolled) .site-header__logo img { /* Swap logo to its white variant via filter — preserves single asset */ filter: invert(100%) brightness(110%); } body.has-dark-hero .site-header:not(.is-scrolled) .site-header__menu a, body.has-dark-hero .site-header:not(.is-scrolled) .site-header__phone { color: var(--wp--preset--color--warm-white); border-color: rgba(253, 250, 246, 0.55); } body.has-dark-hero .site-header:not(.is-scrolled) .site-header__menu a:hover, body.has-dark-hero .site-header:not(.is-scrolled) .site-header__menu a[aria-current="page"] { color: var(--wp--preset--color--rust-light); } body.has-dark-hero .site-header:not(.is-scrolled) .site-header__phone:hover { background: rgba(253, 250, 246, 0.12); border-color: var(--wp--preset--color--warm-white); color: var(--wp--preset--color--warm-white); } body.has-dark-hero .site-header:not(.is-scrolled) .site-header__burger { border-color: var(--wp--preset--color--rust); } body.has-dark-hero .site-header:not(.is-scrolled) .site-header__burger span { background: var(--wp--preset--color--warm-white); } /* Scrolled state on dark-hero pages — solid black bar with white text */ body.has-dark-hero .site-header.is-scrolled { background: rgba(20, 20, 20, 0.94); border-bottom-color: rgba(255, 255, 255, 0.08); } body.has-dark-hero .site-header.is-scrolled .site-header__logo img { filter: invert(100%) brightness(110%); } body.has-dark-hero .site-header.is-scrolled .site-header__menu a, body.has-dark-hero .site-header.is-scrolled .site-header__phone { color: var(--wp--preset--color--warm-white); border-color: rgba(253, 250, 246, 0.45); } body.has-dark-hero .site-header.is-scrolled .site-header__menu a:hover, body.has-dark-hero .site-header.is-scrolled .site-header__menu a[aria-current="page"] { color: var(--wp--preset--color--rust-light); } body.has-dark-hero .site-header.is-scrolled .site-header__phone:hover { background: var(--wp--preset--color--warm-white); border-color: var(--wp--preset--color--warm-white); color: var(--wp--preset--color--body); } body.has-dark-hero .site-header.is-scrolled .site-header__burger { border-color: rgba(253, 250, 246, 0.35); } body.has-dark-hero .site-header.is-scrolled .site-header__burger span { background: var(--wp--preset--color--warm-white); } .site-header__inner { max-width: 1280px; margin: 0 auto; padding: 0 var(--wp--custom--section--padding-x); height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .site-header__logo { display: flex; align-items: center; line-height: 1; color: var(--wp--preset--color--body); text-decoration: none; } .site-header__logo img { display: block; height: 40px; width: auto; } .site-header__nav { /* v0.8.2 — Cormorant SC top-nav label per Joy's spec. */ display: flex; align-items: center; gap: 38px; font-family: var(--wp--preset--font-family--accent); font-size: 13px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--wp--preset--color--text-deep); } .site-header__menu { display: flex; gap: 38px; list-style: none; margin: 0; padding: 0; } .site-header__menu a { color: var(--wp--preset--color--text-deep); text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid transparent; transition: color var(--wp--custom--duration--quick) var(--wp--custom--ease--out), border-color var(--wp--custom--duration--quick) var(--wp--custom--ease--out); } .site-header__menu a:hover, .site-header__menu a[aria-current="page"] { color: var(--wp--preset--color--rust); } .site-header__menu a:focus-visible { outline: 2px solid var(--wp--preset--color--rust); outline-offset: 4px; } /* ---- Dropdown submenus (Services / Events) ---- A parent .site-header__menu-item--dropdown contains the trigger link + a .site-header__submenu. Submenu opens on hover, focus-within, or when JS sets aria-expanded=true on the trigger (click/keyboard). */ .site-header__menu-item--dropdown { position: relative; } .site-header__menu-item--dropdown > a::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 8px; vertical-align: 2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid currentColor; opacity: 0.7; transition: transform var(--wp--custom--duration--quick) var(--wp--custom--ease--out); } .site-header__menu-item--dropdown:hover > a::after, .site-header__menu-item--dropdown:focus-within > a::after, .site-header__menu-item--dropdown > a[aria-expanded="true"]::after { transform: rotate(180deg); } .site-header__submenu { position: absolute; /* IMPORTANT: top must touch the parent (no gap) — otherwise the mouse crosses outside the parent :hover area on the way to the submenu and the dropdown closes. Visual spacing achieved via padding-top inside the submenu instead. */ top: 100%; left: 50%; transform: translateX(-50%); min-width: 240px; background: var(--wp--preset--color--warm-white); border: 1px solid rgba(70, 62, 50, 0.1); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); padding: 20px 0 12px; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 200ms var(--wp--custom--ease--out), visibility 0s linear 200ms; z-index: 50; } .site-header__menu-item--dropdown:hover > .site-header__submenu, .site-header__menu-item--dropdown:focus-within > .site-header__submenu, .site-header__menu-item--dropdown > a[aria-expanded="true"] + .site-header__submenu { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 200ms var(--wp--custom--ease--out), visibility 0s; } .site-header__submenu a { display: block; padding: 10px 22px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--text-deep); text-decoration: none; border-bottom: 0 !important; white-space: nowrap; transition: background var(--wp--custom--duration--quick) var(--wp--custom--ease--out), color var(--wp--custom--duration--quick) var(--wp--custom--ease--out); } .site-header__submenu a:hover, .site-header__submenu a[aria-current="page"] { background: var(--wp--preset--color--warm-1); color: var(--wp--preset--color--rust); } .site-header__submenu a:focus-visible { outline: 2px solid var(--wp--preset--color--rust); outline-offset: -2px; } /* On dark-hero pages: the .site-header__menu a rules force cream-white for the transparent header. Submenu items must override that with their own dark color (the dropdown panel has a light background). Specificity matched to the dark-hero rules above; cascade order ensures these win. */ body.has-dark-hero .site-header:not(.is-scrolled) .site-header__submenu a, body.has-dark-hero .site-header.is-scrolled .site-header__submenu a { color: var(--wp--preset--color--text-deep); border-bottom: 0; } body.has-dark-hero .site-header:not(.is-scrolled) .site-header__submenu a:hover, body.has-dark-hero .site-header:not(.is-scrolled) .site-header__submenu a[aria-current="page"], body.has-dark-hero .site-header.is-scrolled .site-header__submenu a:hover, body.has-dark-hero .site-header.is-scrolled .site-header__submenu a[aria-current="page"] { background: var(--wp--preset--color--warm-1); color: var(--wp--preset--color--rust); } .site-header__phone { color: var(--wp--preset--color--body); border: 1px solid rgba(20, 20, 20, 0.35); padding: 13px 24px; letter-spacing: 0.16em; font-size: 14px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: background var(--wp--custom--duration--base) var(--wp--custom--ease--out), border-color var(--wp--custom--duration--base) var(--wp--custom--ease--out), color var(--wp--custom--duration--base) var(--wp--custom--ease--out); } .site-header__phone:hover { background: var(--wp--preset--color--button-fill); border-color: var(--wp--preset--color--button-fill); color: var(--wp--preset--color--warm-white); } .site-header__phone:focus-visible { outline: 2px solid var(--wp--preset--color--rust); outline-offset: 2px; } /* Language switcher (Español ↔ English) — small text link, sits to the left of the phone CTA. Mirrors the eyebrow type tier so it reads as utility, not navigation. */ .site-header__lang { font-family: var(--wp--preset--font-family--accent); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--wp--preset--color--body); text-decoration: none; padding: 6px 4px; margin-right: 14px; border-bottom: 1px solid transparent; transition: color 180ms ease, border-color 180ms ease; } .site-header__lang:hover, .site-header__lang:focus-visible { color: var(--wp--preset--color--rust); border-bottom-color: var(--wp--preset--color--rust); } .site-header__lang:focus-visible { outline: none; } /* Dark-hero state — preserve readable contrast. */ body.has-dark-hero .site-header:not(.is-scrolled) .site-header__lang, body:has(main .home-hero) .site-header:not(.is-scrolled) .site-header__lang, body:has(main .inner-hero) .site-header:not(.is-scrolled) .site-header__lang { color: var(--wp--preset--color--warm-white); } body.has-dark-hero .site-header.is-scrolled .site-header__lang { color: var(--wp--preset--color--warm-white); } /* Mobile drawer variant — sits as a top-level item, rust-accented to stand apart from the regular nav rows. */ .site-header__mobile-lang { color: var(--wp--preset--color--rust) !important; } /* Burger button — rust square outline, brand-aligned. */ .site-header__burger { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; background: transparent; border: 1.5px solid var(--wp--preset--color--rust); border-radius: 3px; cursor: pointer; flex-direction: column; gap: 5px; padding: 0; transition: background 200ms ease, border-color 200ms ease; } .site-header__burger:focus-visible { outline: 2px solid var(--wp--preset--color--rust); outline-offset: 2px; } .site-header__burger span { display: block; width: 22px; height: 2px; background: var(--wp--preset--color--body); transition: transform var(--wp--custom--duration--base) var(--wp--custom--ease--out), opacity var(--wp--custom--duration--quick) var(--wp--custom--ease--out), background-color 200ms ease; } .site-header__burger[aria-expanded="true"] { background: #16130f; border-color: var(--wp--preset--color--rust); } .site-header__burger[aria-expanded="true"] span { background: var(--wp--preset--color--warm-white); } .site-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .site-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .site-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile menu drawer — dark, brand-typography (v0.9.80). Replaces v0.8.x light

-accordion drawer with a flat, always- expanded panel. Services keeps a sub-list (no toggle); everything else is a single-line top-level link. */ .site-header__mobile { background: #16130f; color: var(--wp--preset--color--warm-white); padding: 8px 0 24px; border-top: 1px solid rgba(243, 234, 216, 0.08); } .site-header__mobile[hidden] { display: none; } .site-header__mobile-list { list-style: none; margin: 0; padding: 0 var(--wp--custom--section--padding-x); display: flex; flex-direction: column; } .site-header__mobile-list > li { border-bottom: 1px solid rgba(243, 234, 216, 0.12); } .site-header__mobile-list > li:last-child { border-bottom: 0; } .site-header__mobile-top { display: block; color: var(--wp--preset--color--warm-white); font-family: var(--wp--preset--font-family--accent); font-size: 17px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; padding: 22px 4px 18px; line-height: 1; } .site-header__mobile-top:hover, .site-header__mobile-top:focus-visible { color: var(--wp--preset--color--rust); } .site-header__mobile-top[aria-current="page"] { color: var(--wp--preset--color--rust); } .site-header__mobile-sub { list-style: none; margin: 0; padding: 0 4px 14px 4px; display: flex; flex-direction: column; gap: 4px; } .site-header__mobile-sub a { display: block; color: rgba(243, 234, 216, 0.72); font-family: var(--wp--preset--font-family--body); font-size: 15.5px; font-weight: 400; letter-spacing: 0; text-transform: none; text-decoration: none; padding: 9px 4px; line-height: 1.3; } .site-header__mobile-sub a:hover, .site-header__mobile-sub a:focus-visible { color: var(--wp--preset--color--warm-white); } .site-header__mobile-cta { display: block; text-align: center; background: var(--wp--preset--color--rust); color: var(--wp--preset--color--warm-white); padding: 20px 22px; border-radius: 2px; font-family: var(--wp--preset--font-family--accent); font-size: 14px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; margin: 24px var(--wp--custom--section--padding-x) 0; transition: background var(--wp--custom--duration--base) var(--wp--custom--ease--out); } .site-header__mobile-cta:hover { background: #7a3a08; } @media (max-width: 1000px) { .site-header__nav { display: none; } .site-header__burger { display: inline-flex; } } /* ---- Site Footer ------------------------------------------------------- */ .site-footer { background: var(--wp--preset--color--body); color: var(--wp--preset--color--cream-warm); font-family: var(--wp--preset--font-family--body); } .site-footer__main { max-width: 1240px; margin: 0 auto; padding: clamp(56px, 7vw, 88px) var(--wp--custom--section--padding-x) 48px; display: grid; grid-template-columns: 1.5fr 0.85fr 1fr 0.9fr 1.05fr; gap: clamp(28px, 3.4vw, 46px); } @media (max-width: 1100px) { .site-footer__main { grid-template-columns: 1.4fr 1fr 1fr; } } @media (max-width: 760px) { .site-footer__main { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 480px) { .site-footer__main { grid-template-columns: 1fr; } } .site-footer__col { font-style: normal; /* address element default override */ } .site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; } .site-footer__col a, .site-footer__visit a { color: var(--wp--preset--color--cream-warm); text-decoration: none; transition: color var(--wp--custom--duration--quick) var(--wp--custom--ease--out); } .site-footer__col a:hover, .site-footer__visit a:hover { color: var(--wp--preset--color--warm-white); } .site-footer__col a:focus-visible, .site-footer__visit a:focus-visible { outline: 2px solid var(--wp--preset--color--rust); outline-offset: 2px; } .site-footer__heading { /* v0.8.2 — Cormorant SC footer column heading per Joy's spec. */ font-family: var(--wp--preset--font-family--accent); font-size: 13px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: #d8cfbf; margin: 0 0 18px; line-height: 1; } .site-footer__logo img { display: block; height: 46px; width: auto; margin-bottom: 14px; } .site-footer__est { /* v0.8.2 — Cormorant SC "EST. 1982" label per Joy's spec. */ font-family: var(--wp--preset--font-family--accent); font-size: 12px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: #c8bfad; margin: 0 0 22px; line-height: 1; } .site-footer__lede { font-family: var(--wp--preset--font-family--display); font-style: italic; color: #d8cfbf; font-size: 17px; line-height: 1.55; max-width: 360px; margin: 0; } .site-footer__visit p { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: var(--wp--preset--color--cream-warm); } .site-footer__hours { color: #b8af9d !important; } .site-footer__directions { /* v0.9.35 — Get Directions link, subtle accent treatment. */ color: var(--wp--preset--color--rust) !important; font-weight: 500; } .site-footer__directions:hover { color: var(--wp--preset--color--warm-white) !important; } /* v0.9.35 — Social icons row in brand column. v0.9.39 fix: bumped specificity from .site-footer__social to .site-footer .site-footer__social so it wins against .site-footer__col ul { display: grid }. Without this, the icons render as a 1-column vertical stack instead of a horizontal row. */ .site-footer .site-footer__social, ul.site-footer__social { list-style: none; margin: 22px 0 0; padding: 0; display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 10px; grid-template-columns: none; } .site-footer__social li { margin: 0; } .site-footer__social a { width: 38px; height: 38px; border: 1px solid rgba(216, 203, 180, 0.28); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #d8cbb4; transition: background-color var(--wp--custom--duration--quick) var(--wp--custom--ease--out), border-color var(--wp--custom--duration--quick) var(--wp--custom--ease--out), color var(--wp--custom--duration--quick) var(--wp--custom--ease--out); } .site-footer__social a:hover { background: var(--wp--preset--color--rust); border-color: var(--wp--preset--color--rust); color: var(--wp--preset--color--warm-white); } /* v0.9.35 — Middle tagline band ("Maravelous since 1982."). */ .site-footer__tagline { border-top: 1px solid rgba(216, 203, 180, 0.14); padding: 30px 20px 26px; text-align: center; } .site-footer__tagline p { font-family: var(--wp--preset--font-family--display); font-style: italic; font-size: clamp(22px, 2.6vw, 30px); color: #e7dcc4; margin: 0; line-height: 1.2; } .site-footer__bottom { border-top: 1px solid rgba(216, 203, 180, 0.14); padding: 24px var(--wp--custom--section--padding-x); max-width: 1240px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } @media (max-width: 640px) { .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 14px; } } .site-footer__copyright { /* v0.8.2 — Cormorant SC footer-bottom label per Joy's spec. */ font-family: var(--wp--preset--font-family--accent); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #b8af9d; margin: 0; line-height: 1; } .site-footer__last-updated { /* v0.8.2 — Cormorant SC fine-print label per Joy's spec. */ font-family: var(--wp--preset--font-family--accent); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #968f80; margin: 0; line-height: 1; } .site-footer__last-updated time { color: #b8af9d; } .site-footer__bottom-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; } .site-footer__bottom-links a { /* v0.8.2 — Cormorant SC footer-link label per Joy's spec. */ font-family: var(--wp--preset--font-family--accent); font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #b8af9d; text-decoration: none; } .site-footer__bottom-links a:hover { color: var(--wp--preset--color--warm-white); } .site-footer__allergen { background: var(--wp--preset--color--allergen-band); padding: 20px var(--wp--custom--section--padding-x); } .site-footer__allergen > p { max-width: 880px; margin: 0 auto; text-align: center; } .site-footer__allergen-label { /* v0.8.2 — Cormorant SC allergen-band label per Joy's spec. */ font-family: var(--wp--preset--font-family--accent); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: #c8bfad; margin-bottom: 10px !important; line-height: 1; } .site-footer__allergen-body { font-family: var(--wp--preset--font-family--display); font-style: italic; font-size: 15px; line-height: 1.6; color: rgba(216, 203, 180, 0.5); } /* ---- Back-to-top button ------------------------------------------------ */ /* Small circular button, bottom-right corner. Hidden until user scrolls past ~600px, then fades + slides up into view. Tasteful per brand: thin rust border on warm-white pill, fills rust on hover. */ .to-top { position: fixed; bottom: 28px; right: 28px; z-index: 90; width: 48px; height: 48px; border-radius: 50%; background: rgba(250, 248, 244, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--wp--preset--color--rust); color: var(--wp--preset--color--rust); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--wp--custom--duration--base) var(--wp--custom--ease--out), transform var(--wp--custom--duration--base) var(--wp--custom--ease--out), background var(--wp--custom--duration--base) var(--wp--custom--ease--out), color var(--wp--custom--duration--base) var(--wp--custom--ease--out), border-color var(--wp--custom--duration--base) var(--wp--custom--ease--out); } .to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .to-top:hover { background: var(--wp--preset--color--rust); color: var(--wp--preset--color--warm-white); } .to-top:focus-visible { outline: 2px solid var(--wp--preset--color--rust); outline-offset: 3px; } .to-top svg { display: block; width: 18px; height: 18px; } @media (max-width: 640px) { .to-top { bottom: 20px; right: 20px; width: 44px; height: 44px; } } /* ---- Reduced motion --------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .site-header.is-hidden { transform: none; } } /* ========================================================================= v0.5.7 — Italic accent color polish. Italic accent words in section headlines get the editorial rust color. Matches the v0.5.7 design refresh from June 2026. Dark-hero pages keep their existing styles (the heroes set their own colors via :has rules). ========================================================================= */ h1 em, h2 em, h3 em { color: var(--wp--preset--color--rust); font-style: italic; } body:has(main .home-hero) h1 em, body:has(main .home-hero) h2 em, body:has(main .inner-hero) h1 em, body:has(main .inner-hero) h2 em { /* Hero headlines keep italic but inherit color from the hero white */ color: inherit; } /* v0.7.1 — Kill the residual white bar above the hero on dark-hero pages. theme.json's useRootPaddingAwareAlignments injects padding-top on .wp-site-blocks; on hero pages we need the photo flush to the header. */ body:has(main .home-hero) .wp-site-blocks, body:has(main .inner-hero) .wp-site-blocks, body.has-dark-hero .wp-site-blocks { padding-top: 0 !important; } /* v0.9.37 — KILL THE GAP behind the transparent header. The fixed header has a translucent wash on dark-hero pages so the hero photo shows through it. Any pixel where the body background leaks through the wash will look light/gray and be visible as a stripe behind the header. Three belts: 1. Set html/body bg to the canonical dark hero color so ANY leak is invisible (matches the hero's dark tone). 2. Force main → padding-top:0 + margin-top:0 on every hero-page signal we have, including the custom .about-hero / .services-hero section classes that don't share .inner-hero / .home-hero names. 3. Force the first

child of

ELEMENTS. WordPress's useRootPaddingAwareAlignments injects :root :where(.is-layout-constrained) > * { margin-block-start: 24px; } which pushes EVERY section away from the previous one by 24px. Visible as a 24px strip of body bg between every dark/light section. Joy spotted it in dev tools: the rule fires on direct children of .wp-block-post-content and .is-layout-constrained wrappers. We narrowly override for

elements (which have their own internal padding and don't need block-gap on top) without touching paragraph/heading flow inside content blocks. Matches the WP selector shape so the override wins on specificity, plus !important for the :where(...) zero-specificity case. */ :root :where(.is-layout-constrained) > section, :root :where(.wp-block-post-content) > section, :root :where(.wp-block-post-content.is-layout-constrained) > section, .wp-block-post-content > section, .is-layout-constrained > section, main > section { margin-block-start: 0 !important; } /* Belt-and-suspenders: target the FIRST

child of any constrained wrapper too, so even if a wrapper changes the gap can't sneak in through the first-child boundary. */ :root :where(.is-layout-constrained) > section:first-child, :root :where(.wp-block-post-content) > section:first-child, .wp-block-post-content > section:first-child { margin-top: 0 !important; } /* v0.9.54 — DEFINITIVE bg fix. The body_class filter in accessibility.php adds `has-dark-hero` based on post_content containing 'home-hero'/'inner-hero' strings. When the WP-imported post content is stale OR a page legitimately has a has-dark-hero class but the visible hero is the light typo-hero pattern (not a dark photo hero), body bg goes dark and shows between sections. Fix: give