/* ============================================================ * 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(255, 255, 255, .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: var(--on-dark); } .ac-util__addr{ opacity: .82; } .ac-util__contact{ display: flex; align-items: center; gap: 28px; } .ac-util__email{ color: var(--on-dark); letter-spacing: .14em; text-decoration: none; transition: color .2s ease; } .ac-util__phone{ color: var(--on-dark-accent); 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: var(--on-dark); text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent; transition: border-color .2s ease, color .2s ease; } .ac-nav__link:hover{ color: var(--on-dark); 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); /* Panel edge. --dark-divider-color (white .12) drops this to 1.43:1 against the panel fill, versus 1.81:1 for the khaki it replaces — too faint for a floating panel that has to separate from the page behind it. Derived from --on-dark instead (no new hex) at the alpha that reproduces the original edge weight: 1.95:1. */ border: 1px solid color-mix(in srgb, var(--on-dark) 24%, transparent); 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: var(--on-dark); 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; } @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. This border is the visible boundary of an INTERACTIVE CONTROL, so WCAG 1.4.11 wants 3:1 against the adjacent navy. --dark-divider-color would give 1.43:1 and the khaki it replaces only managed 2.77:1 (already a fail). Derived from --on-dark (no new hex) at the alpha that clears the threshold with margin: 3.57:1. */ .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 color-mix(in srgb, var(--on-dark) 45%, transparent); 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 navy panel, EB Garamond on-dark 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; } /* Decorative row separator — --dark-divider-color lands at 1.43:1, versus 1.40:1 for the khaki it replaces, so the token is a faithful swap here. */ .ac-menu__list li + li{ border-top: 1px solid var(--dark-divider-color); } .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: var(--on-dark); 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