/* ========================================================================== Shared Nav + Footer — La Habra Historical Museum Source of truth: the .nav/.wordmark header and .footer-grid footer are identical across every approved interior-page comp (contact.html, about-us.html, privacy-policy.html, terms.html). Rendered via Site_Chrome::render_nav()/render_footer() (inc/site-chrome.php) on any template using header-blank.php/footer-blank.php instead of the legacy shared header.php/footer.php. Scoped under .lahabra-chrome (applied to by header-blank.php) rather than left global. ========================================================================== */ .lahabra-chrome { --display: var(--font-display); --heritage: var(--font-heritage); --text: var(--font-text); } .lahabra-chrome .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--cream); padding: 14px 22px; font-weight: 700; text-decoration: none; border-radius: 0 0 10px 0; } .lahabra-chrome .skip-link:focus { left: 0; } /* ---------- nav ---------- */ .lahabra-chrome .nav { position: sticky; top: 0; z-index: 50; background: var(--cream); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px clamp(20px, 5vw, 56px); border-bottom: 1px solid rgba(30, 36, 32, .08); } .lahabra-chrome .nav .wordmark { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 17px; text-decoration: none; color: var(--ink); } .lahabra-chrome .wordmark-text { display: flex; flex-direction: column; line-height: 1.2; } .lahabra-chrome .wordmark-tagline { font-family: var(--heritage); font-style: italic; font-weight: 400; font-size: 13.5px; color: var(--sage); margin-top: 1px; } @media (max-width: 560px) { .lahabra-chrome .wordmark-tagline { display: none; } } .lahabra-chrome .nav-logo { height: 116px; width: auto; flex: none; } .lahabra-chrome .nav .links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); font-size: 15px; font-weight: 500; } .lahabra-chrome .nav .links a { text-decoration: none; color: var(--ink); transition: color .2s; } .lahabra-chrome .nav .links a:hover { color: var(--sage); } .lahabra-chrome .nav .links a.active { color: var(--sage); font-weight: 700; border-bottom: 2px solid var(--sage); padding-bottom: 2px; } .lahabra-chrome .member-pill { background: var(--sage); color: var(--cream) !important; padding: 9px 18px; border-radius: 999px; font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap; transition: background .2s, transform .2s; } .lahabra-chrome .member-pill:hover { background: var(--deep-sage); transform: translateY(-1px); } .lahabra-chrome .member-pill:focus-visible { outline: 3px solid var(--harbor); outline-offset: 3px; border-radius: 999px; } /* Mobile menu toggle. QA finding, 2026-07-15: the approved comp's own fix for narrow screens was `span.link-text{display:none}` — but that span is the anchor's ONLY content, so every nav link collapsed to a 0×0 box with no visible or tappable link at all (About/Exhibits/ Gallery/Contact were completely unreachable except via the footer). Replaced with a real hamburger menu instead of reproducing that. */ .lahabra-chrome .chrome-nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; } .lahabra-chrome .chrome-nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .lahabra-chrome .chrome-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .lahabra-chrome .chrome-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .lahabra-chrome .chrome-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 760px) { .lahabra-chrome .chrome-nav-toggle { display: flex; } .lahabra-chrome .nav .links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--cream); padding: 10px clamp(20px, 5vw, 56px) 18px; box-shadow: 0 12px 24px rgba(30, 36, 32, .12); } .lahabra-chrome .nav .links.is-open { display: flex; } .lahabra-chrome .nav .links a { padding: 12px 4px; border-bottom: 1px solid rgba(30, 36, 32, .08); } .lahabra-chrome .nav .links a.active { border-bottom-color: var(--sage); } .lahabra-chrome .nav .links .member-pill { text-align: center; margin-top: 10px; } } /* ---------- footer ---------- */ .lahabra-chrome footer { background: var(--harbor); color: var(--harbor-tint); } .lahabra-chrome .footer-hills svg { display: block; width: 100%; height: auto; } .lahabra-chrome .footer-inner { max-width: 1150px; margin: 0 auto; padding: clamp(24px, 4vw, 40px) clamp(22px, 6vw, 72px) 36px; } /* max-content columns (not 1.4fr/1fr/1fr/1fr) so each column's box hugs its own text instead of stretching to an assigned share of the row — with fr-based columns, short content (e.g. "Exhibits", "Privacy") left a huge dead gap inside its own column before the next one started, while a column whose content happened to be nearly as wide as its box (the Visit address/email) looked like it had almost no gap at all. Content-sized columns make the visible gap between actual text uniform. */ .lahabra-chrome .footer-grid { display: grid; grid-template-columns: repeat(4, max-content); column-gap: clamp(48px, 6vw, 88px); row-gap: clamp(30px, 5vw, 48px); margin-bottom: clamp(30px, 5vw, 48px); } /* Footer logo — not part of the original approved comp (that footer column was text-only), added 2026-07-15 per client request since the column looked bare after the newsletter/other text was trimmed. The PNG itself is transparent outside the arch shape (no cream fill baked in), so per brand guidelines it sits directly on the footer's harbor-blue background with no added background plate/box around it. */ .lahabra-chrome .footer-badge { display: inline-flex; margin-bottom: 14px; } .lahabra-chrome .footer-badge img { width: 60px; height: auto; display: block; } .lahabra-chrome footer .brand-line { font-family: var(--display); font-weight: 800; font-size: 22px; color: #fff; line-height: 1.1; margin-bottom: 8px; } .lahabra-chrome footer h4 { font-family: var(--text); font-weight: 700; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: #D5E0E9; margin-bottom: 10px; } .lahabra-chrome footer p { font-size: 15.5px; line-height: 1.65; color: #EDF2F6; } .lahabra-chrome footer a { text-decoration: none; border-bottom: 1px solid rgba(227, 234, 240, .35); transition: border-color .2s; } .lahabra-chrome footer a:hover { border-color: #fff; } .lahabra-chrome .footer-bottom { border-top: 1px solid rgba(227, 234, 240, .22); padding-top: 20px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 15px; color: #D5E0E9; } /* Two items only (copyright line, founding-name footnote) — left/right split. The approved comp's own CSS was written for a 3-span layout that never actually shipped (only 2 spans exist in the markup, in this comp and every comp copying it), which left the second span centered instead of right-aligned; this fixes that rather than reproducing it. */ .lahabra-chrome .footer-legal-row { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; column-gap: 14px; row-gap: 4px; width: 100%; } .lahabra-chrome .footer-bottom .footer-note { color: #C8D4DF; } @media (max-width: 860px) { .lahabra-chrome .footer-grid { grid-template-columns: repeat(3, 1fr); row-gap: 32px; } /* Logo+name block gets its own full-width row instead of pairing with Visit — pairing them made the row stretch to the taller (logo) cell's height, leaving a large dead gap under Visit's shorter content before the next row. */ .lahabra-chrome .footer-grid > div:first-child { grid-column: 1 / -1; } } @media (max-width: 560px) { .lahabra-chrome .footer-grid { grid-template-columns: 1fr; } .lahabra-chrome .footer-grid > div:first-child { grid-column: auto; } .lahabra-chrome .footer-legal-row { justify-content: center; text-align: center; } }