/* ─────────────────────────────────────────────────────────────── WMBR shared site chrome — header, nav, footer ─────────────────────────────────────────────────────────────── Loaded by every public-facing page for a consistent top bar and footer. All classes are prefixed `wmbr-` to avoid collisions with legacy page CSS. Colors are defined locally so this file does not redefine any --primary / --border global variables that individual pages may already be using with different values. Usage: ... in , along with the Fraunces+Inter font links (these are already imported below, but pages may also import them.) ... page content ... ─────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&family=Inter:wght@400;500;600;700&display=swap'); :root { --wmbr-c-primary: #2d5a3d; --wmbr-c-primary-h: #22462f; --wmbr-c-accent: #c65d3c; --wmbr-c-gold: #d9c88a; --wmbr-c-text: #1c1c1c; --wmbr-c-muted: #6b6b6b; --wmbr-c-border: #e8e2d7; --wmbr-c-surface: #fff; --wmbr-radius: 4px; } /* ── Top bar ──────────────────────────────────────────────────── */ .wmbr-topbar { background: #fff; border-bottom: 1px solid var(--wmbr-c-border); padding: 1rem 0; position: sticky; top: 0; z-index: 100; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--wmbr-c-text); } .wmbr-topbar * { box-sizing: border-box; } .wmbr-topbar-inner { max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } @media (max-width: 700px) { .wmbr-topbar-inner { padding: 0 1.25rem; } } .wmbr-brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--wmbr-c-text); } .wmbr-brand:hover { text-decoration: none; } .wmbr-brand img { height: 42px; width: auto; } .wmbr-brand-name { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 18px; color: var(--wmbr-c-text); letter-spacing: -0.01em; line-height: 1.1; } .wmbr-brand-name small { display: block; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; color: var(--wmbr-c-muted); letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; } .wmbr-nav { display: flex; gap: .5rem; align-items: center; } .wmbr-nav a { color: var(--wmbr-c-text); font-size: 14px; font-weight: 500; padding: .5rem .9rem; border-radius: var(--wmbr-radius); transition: background .15s, color .15s; text-decoration: none; } .wmbr-nav a:hover { background: rgba(45, 90, 61, .08); text-decoration: none; color: var(--wmbr-c-text); } .wmbr-nav a.active { background: rgba(45, 90, 61, .12); color: var(--wmbr-c-primary-h); } .wmbr-nav a.wmbr-nav-cta { background: var(--wmbr-c-primary); color: #fff; padding: .55rem 1.1rem; } .wmbr-nav a.wmbr-nav-cta:hover { background: var(--wmbr-c-primary-h); color: #fff; } .wmbr-nav a.wmbr-nav-cta.active { background: var(--wmbr-c-primary-h); color: #fff; } /* -- Hamburger + drawer (mobile only) -------------------------- */ .wmbr-hamburger { display: none; background: none; border: 0; padding: .4rem; cursor: pointer; color: var(--wmbr-c-text); line-height: 1; border-radius: var(--wmbr-radius); } .wmbr-hamburger:hover { background: rgba(45, 90, 61, .08); } .wmbr-hamburger:focus-visible { outline: 2px solid var(--wmbr-c-primary); outline-offset: 2px; } .wmbr-drawer { position: fixed; inset: 0; z-index: 200; display: none; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .wmbr-drawer.open { display: block; } .wmbr-drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); animation: wmbr-drawer-fade .18s ease-out; } .wmbr-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 82vw); background: #fff; box-shadow: -12px 0 30px rgba(0,0,0,.15); display: flex; flex-direction: column; animation: wmbr-drawer-slide .22s ease-out; } .wmbr-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--wmbr-c-border); } .wmbr-drawer-title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 18px; color: var(--wmbr-c-text); } .wmbr-drawer-close { background: none; border: 0; padding: .35rem; cursor: pointer; color: var(--wmbr-c-muted); border-radius: var(--wmbr-radius); } .wmbr-drawer-close:hover { background: rgba(45, 90, 61, .08); color: var(--wmbr-c-text); } .wmbr-drawer-nav { display: flex; flex-direction: column; padding: .75rem 0; overflow-y: auto; } .wmbr-drawer-nav a { color: var(--wmbr-c-text); font-size: 17px; font-weight: 500; padding: .9rem 1.5rem; text-decoration: none; border-left: 3px solid transparent; transition: background .12s, border-color .12s; } .wmbr-drawer-nav a:hover { background: rgba(45, 90, 61, .06); text-decoration: none; } .wmbr-drawer-nav a.active { background: rgba(45, 90, 61, .08); border-left-color: var(--wmbr-c-primary); color: var(--wmbr-c-primary-h); } @keyframes wmbr-drawer-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes wmbr-drawer-slide { from { transform: translateX(100%); } to { transform: translateX(0); } } @media (max-width: 900px) { /* Hide the inline nav entirely on mobile; the hamburger is the single navigation surface. */ .wmbr-nav { display: none; } .wmbr-hamburger { display: inline-flex; align-items: center; justify-content: center; } } /* Desktop (>900px): force-hide the drawer and hamburger even when the drawer carries the .open class. Without this, resizing from mobile to desktop while the drawer is open leaves the drawer bleeding over the inline nav. */ @media (min-width: 901px) { .wmbr-drawer, .wmbr-drawer.open { display: none !important; } .wmbr-hamburger { display: none !important; } } /* ── Footer ───────────────────────────────────────────────────── */ .wmbr-footer { background: #1a1a1a; color: rgba(255, 255, 255, .75); padding: 4rem 0 2rem; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.6; } .wmbr-footer * { box-sizing: border-box; } .wmbr-footer a { color: rgba(255, 255, 255, .72); text-decoration: none; } .wmbr-footer a:hover { color: var(--wmbr-c-gold); text-decoration: none; } .wmbr-footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } @media (max-width: 700px) { .wmbr-footer-inner { padding: 0 1.25rem; } } .wmbr-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; } @media (max-width: 900px) { .wmbr-foot-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } } @media (max-width: 500px) { .wmbr-foot-grid { grid-template-columns: 1fr; } } .wmbr-foot-brand h4 { font-family: 'Fraunces', Georgia, serif; font-size: 22px; color: #fff; margin: 0 0 .75rem 0; font-weight: 600; } .wmbr-foot-brand p { font-size: 14px; line-height: 1.6; max-width: 300px; margin: 0 0 1.25rem 0; } .wmbr-foot-brand .wmbr-social { display: flex; gap: .75rem; } .wmbr-foot-brand .wmbr-social a { width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .75); transition: all .15s; } .wmbr-foot-brand .wmbr-social a:hover { background: var(--wmbr-c-gold); border-color: var(--wmbr-c-gold); color: #1a1a1a; } .wmbr-foot-col h5 { font-family: 'Fraunces', Georgia, serif; font-size: 16px; color: #fff; margin: 0 0 1rem 0; font-weight: 600; letter-spacing: .02em; } .wmbr-foot-col ul { list-style: none; margin: 0; padding: 0; } .wmbr-foot-col li { margin-bottom: .55rem; } .wmbr-foot-col a { font-size: 14px; } .wmbr-foot-bot { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 1.5rem; font-size: 13px; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: rgba(255, 255, 255, .55); } .wmbr-foot-pb { margin-top: .75rem; text-align: center; font-size: 12px; color: rgba(255, 255, 255, .38); letter-spacing: .02em; }