/* Shared site chrome styles (header, nav, breadcrumb, footer) for interior/ property pages. Pairs with site-chrome.js. Single source of truth — edit chrome styling here, not per page. Relies on tokens.css for the palette. */ /* NAV / HEADER */ .site-header { background: var(--forest-2); padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; height: 60px; position: sticky; top: 0; z-index: 100; } .site-header a { color: var(--white); text-decoration: none; } .site-logo { display: flex; align-items: center; gap: 10px; } .site-logo .logo-mark { width: 36px; height: 36px; background: var(--forest); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; color: white; } .site-logo .logo-text strong { display: block; font-size: .9rem; } .site-logo .logo-text span { font-size: .7rem; opacity: .7; } .site-nav a { color: rgba(255,255,255,.8); font-size: .875rem; margin-left: 1.5rem; } .site-nav a:hover { color: white; } /* Hamburger toggle — hidden on desktop, shown on mobile. The header is position:sticky, which is itself a containing block, so the mobile dropdown below anchors to it without changing the header's position. */ .nav-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: 0; padding: 8px; cursor: pointer; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--white); border-radius: 2px; } @media (max-width: 720px) { .nav-toggle { display: flex; } /* Nav becomes a full-width dropdown under the header (out of flow, so the header row is just logo + hamburger). Previously the 4 links ran off the right edge and forced the whole page to scroll sideways. */ .site-nav { display: none; position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; background: var(--forest-2); padding: .25rem 1.5rem 1rem; border-top: 1px solid rgba(255,255,255,.12); box-shadow: 0 12px 24px rgba(0,0,0,.25); } .site-nav.open { display: flex; } .site-nav a { margin-left: 0; padding: .75rem 0; font-size: 1rem; border-bottom: 1px solid rgba(255,255,255,.08); } .site-nav a:last-child { border-bottom: 0; } } /* BREADCRUMB */ .breadcrumb { max-width: 1100px; margin: 1rem auto; padding: 0 1.5rem; font-size: .8rem; color: var(--muted); } .breadcrumb a { color: var(--forest); text-decoration: underline; } .breadcrumb a:hover { text-decoration: none; } .breadcrumb span { margin: 0 .4rem; } /* FOOTER */ .site-footer { background: var(--forest-2); color: rgba(255,255,255,.7); text-align: center; padding: 1.5rem; font-size: .8rem; margin-top: 4rem; } .site-footer a { color: rgba(255,255,255,.7); text-decoration: underline; text-underline-offset: 2px; } /* ── ACCESSIBILITY (WCAG 2.2 AA) ───────────────────────────────────── */ /* Focus indicator — visible on keyboard navigation (not mouse clicks). */ :focus-visible { outline: 3px solid #4f6ef7; outline-offset: 2px; } /* Skip-to-content link — first focusable element in . */ .skip-link { position: absolute; top: -40px; left: 0; background: #000; color: #fff; padding: 8px 16px; z-index: 9999; font-size: 14px; text-decoration: none; } .skip-link:focus { top: 0; } /* Respect user motion preferences. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Screen-reader-only text — visually hidden but announced. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }