/* ============================================================ * chrome.css — Classy Dental header/footer chrome (L3). * * HEADER: transparent serif masthead (utility bar + masthead) that overlays * the hero and turns solid dark teal on scroll (chrome.js toggles .is-stuck). * Reproduces the artifact design verbatim. FOOTER chrome is unchanged. * ============================================================ */ /* Prevent the off-canvas mobile menu (translateX(100%)) from creating horizontal scroll / pushing the page off screen. */ html, body{ overflow-x: hidden; } /* --- Container (footer inner width) --- */ .ac-container{ max-width: 1320px; margin: 0 auto; padding: 0 36px; } @media (max-width: 980px){ .ac-container{ padding: 0 20px; } } /* --- Buttons --- */ /* Deliberately empty: every button on the site is the `.btn-default` system in classy-dental.css. The old `.ac-btn` pill helpers lived here and are gone; `.ac-btn` is now aliased onto that system so parent templates still render. */ /* =================== HEADER — transparent serif masthead (fixed, over hero) =================== */ .ac-header{ position: fixed; top: 0; left: 0; right: 0; z-index: 1002; background: transparent; transition: background .3s ease, box-shadow .3s ease; } /* Solidify to dark teal once scrolled past the hero (and on inner pages). */ .ac-header.is-stuck{ background: var(--primary-color); box-shadow: 0 8px 30px rgba(0, 0, 0, .28); } /* Header height, hand-computed. The header is `fixed`, so it sits OVER the hero and takes no flow space — a full-height hero must subtract this itself or its bottom edge (and anything pinned there) falls below the fold. utility bar 11 + 15 + 11 + 1px border = 38 masthead 18 + 54 (logo) + 18 = 90 128 A constant on purpose, not a JS measurement: reading offsetHeight on load and writing it back would resize the hero after first paint, which is exactly the layout shift we're avoiding. If the paddings below change, change this too. */ :root{ --ac-header-h: 128px; } /* The admin bar pushes the document down (html margin-top) but viewport units still measure the whole screen, so logged-in views need it in the subtraction or the hero overhangs the fold by the bar's height. */ body.admin-bar{ --ac-header-h: 160px; } @media (max-width: 782px){ body.admin-bar{ --ac-header-h: 174px; } } /* --- Utility bar (thin, transparent, over hero) --- */ .ac-util{ border-bottom: 1px solid rgba(244, 239, 228, .14); } .ac-util__inner{ max-width: 1440px; margin: 0 auto; padding: 11px 56px; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-family: var(--default-font); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #e6ecea; } .ac-util__addr{ opacity: .82; } .ac-util__contact{ display: flex; align-items: center; gap: 28px; } .ac-util__email{ color: #e6ecea; letter-spacing: .14em; text-decoration: none; transition: color .2s ease; } .ac-util__phone{ color: #d3c99e; letter-spacing: .14em; font-weight: 600; text-decoration: none; transition: color .2s ease; } .ac-util__email:hover, .ac-util__phone:hover{ color: var(--accent-color); } /* --- Masthead (transparent, over hero) --- */ .ac-masthead__inner{ max-width: 1440px; margin: 0 auto; padding: 18px 56px; display: flex; align-items: center; justify-content: space-between; gap: 40px; } .ac-header__logo{ display: flex; align-items: center; flex: none; text-decoration: none; } .ac-header__logo-img{ height: 54px; width: auto; display: block; } .ac-header.is-stuck .ac-masthead__inner{ padding-top: 14px; padding-bottom: 14px; transition: padding .3s ease; } /* --- Nav --- */ .ac-nav{ display: flex; align-items: center; gap: 34px; font-family: var(--mono-font); font-size: 18px; letter-spacing: .02em; } .ac-nav__link{ color: #f4efe4; text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent; transition: border-color .2s ease, color .2s ease; } .ac-nav__link:hover{ color: #f4efe4; border-bottom-color: var(--accent-color); } /* Nav CTA — the `.btn-default.btn-solid.btn-sm` system; only spacing lives here. */ .ac-header__cta{ margin-left: 6px; flex: none; } /* --- Nav dropdowns --- CSS-only: the panel opens on :hover and on :focus-within, so keyboard users tab straight into it without any JS. The parent is a REAL link to the section index, never a dead toggle — so we do not fake an aria-expanded that nothing updates; aria-haspopup alone is the honest markup here. */ .ac-nav__group{ position: relative; display: flex; align-items: center; } .ac-nav__caret{ display: inline-block; width: 5px; height: 5px; margin-left: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; } .ac-nav__group:hover .ac-nav__caret, .ac-nav__group:focus-within .ac-nav__caret{ transform: translateY(1px) rotate(-135deg); } .ac-nav__panel{ position: absolute; top: 100%; left: 50%; z-index: 1002; /* padding-top is the hover bridge — it keeps the pointer "inside" the group while travelling from the link down to the panel, so it can't flicker shut. */ padding-top: 18px; transform: translateX(-50%) translateY(6px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility .18s; } .ac-nav__group:hover .ac-nav__panel, .ac-nav__group:focus-within .ac-nav__panel{ opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .ac-nav__panel-inner{ display: flex; flex-direction: column; min-width: 232px; padding: 12px; background: color-mix(in srgb, var(--primary-color) 96%, black); border: 1px solid rgba(184, 174, 130, .3); border-radius: 4px; box-shadow: 0 20px 44px rgba(0, 0, 0, .34); } .ac-nav__panel-inner--cols{ display: grid; grid-template-columns: repeat(2, minmax(196px, 1fr)); gap: 0 14px; } .ac-nav__sub{ display: block; padding: 9px 12px; border-radius: 3px; font-size: 16px; line-height: 1.25; white-space: nowrap; color: #f4efe4; text-decoration: none; transition: background-color .18s ease, color .18s ease; } .ac-nav__sub:hover, .ac-nav__sub:focus-visible{ background: color-mix(in srgb, var(--accent-color) 16%, transparent); color: var(--accent-color); } .ac-burger{ display: none; } .ac-menu{ display: none; } /* --- Masthead compression band: 992px–1279px --- The desktop nav must survive all the way down to 992px, because the burger does not take over until 991px. Measured with the real font files (EB Garamond for the nav, the .btn-sm metrics for the CTA), the DEFAULT row needs: logo 297px (638x116 wordmark at height:54px) + nav 533px (About / Services / TMJ & Sleep / Smile Gallery / Media, EB Garamond 18px + .02em, 34px gaps, 3 carets) + CTA 212px ("REQUEST A VISIT", 11.5px/.22em + 70px padding) + 2x40px flex gap + 2x56px container padding = 1122px of content, i.e. **1234px of viewport**. So the default layout is only safe from ~1234px up, NOT from 1200px. This band therefore runs to 1279px, not 1199px — ending it at 1199px left a fresh 34px overflow across 1200–1233px. Compressed, the same row measures 915px of content = 971px of viewport, so it clears 992px with ~21px to spare. Rather than raise the burger breakpoint and lose the desktop nav on tablets, this band trims the four things that cost the most width. If a sixth top-level item is ever added, or a nav label gets longer, RE-MEASURE — the headroom at 992px is only ~21px. Otherwise fold it into a `children` array. */ @media (min-width: 992px) and (max-width: 1279px){ .ac-masthead__inner{ padding-left: 28px; padding-right: 28px; gap: 24px; } .ac-header__logo-img{ height: 44px; } .ac-nav{ gap: 18px; font-size: 16px; } .ac-nav__caret{ margin-left: 5px; } .ac-header__cta{ margin-left: 0; } } @media (max-width: 991px){ .ac-util__inner{ padding: 9px 20px; } .ac-util__addr{ display: none; } .ac-util__email{ display: none; } .ac-masthead__inner{ padding: 14px 20px; } .ac-header.is-stuck .ac-masthead__inner{ padding-top: 10px; padding-bottom: 10px; } /* Wide wordmark: constrain by width (not height) so it fits the mobile bar; height:auto keeps the aspect ratio — no stretch/shrink distortion. */ .ac-header__logo-img{ height: auto; width: auto; max-width: min(230px, 56vw); } .ac-nav{ display: none; } /* Hamburger — morphs to X in place. */ .ac-burger{ position: relative; z-index: 1001; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 48px; height: 48px; padding: 0; background: var(--primary-color); border: 1px solid rgba(184, 174, 130, .5); border-radius: 10px; cursor: pointer; } .ac-burger span{ display: block; width: 20px; height: 2px; background: var(--white-color); border-radius: 2px; transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .2s ease; } .ac-burger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .ac-burger.is-open span:nth-child(2){ opacity: 0; } .ac-burger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } /* Slide-out menu — dark teal panel, EB Garamond ivory links. */ .ac-menu{ display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 1000; background: var(--primary-color); transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1); } .ac-menu.is-open{ transform: translateX(0); } /* overflow-x must be stated, not left to default. The sub-panels park at translateX(100%), i.e. outside this box; with only `overflow-y: auto` set, CSS computes the other axis to `auto` as well, so the parked panels become reachable by swiping sideways. Clipping x confines them to the drill-down. */ .ac-menu__viewport{ position: relative; flex: 1; overflow-y: auto; overflow-x: hidden; } .ac-menu__panel{ padding: 120px 32px 32px; } .ac-menu__list{ list-style: none; margin: 0; padding: 0; } .ac-menu__list li + li{ border-top: 1px solid rgba(184, 174, 130, .18); } .ac-menu__list a, .ac-menu__into{ display: block; font-family: var(--mono-font); font-size: 18px; line-height: 1.1; letter-spacing: .02em; color: #f4efe4; text-decoration: none; padding: 15px 0; } .ac-menu__list a:hover, .ac-menu__into:hover{ color: var(--accent-color); } /* Drill-down groups. chrome.js already implements the panel contract (.ac-menu__into[data-target] opens, .ac-menu__back closes, and it resets to root ~350ms after the drawer shuts) — it shipped with the ported chrome and simply had no markup or styles until now. Triggers are