/* ===== Glassy header (works for your fixed header with #site-header) ===== */ #site-header{ /* glass background */ background-color: rgba(255,255,255,0.65); -webkit-backdrop-filter: saturate(120%) blur(10px); backdrop-filter: saturate(120%) blur(10px); /* separator + initial (very light) shadow */ border-bottom: 1px solid rgba(255,255,255,0.90); box-shadow: 0 0 0 rgba(0,0,0,0); /* polish */ transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease; will-change: backdrop-filter, background-color, box-shadow; } /* Stronger look once scrolled (JS toggles .is-scrolled) */ #site-header.is-scrolled{ background-color: rgba(255,255,255,0.50); box-shadow: 0 10px 28px rgba(0,0,0,0.22); border-bottom-color: rgba(255,255,255,0.85); } /* Dark mode glass */ @media (prefers-color-scheme: dark){ #site-header{ background-color: rgba(30,41,59,0.70); /* slate-800-ish */ border-bottom-color: rgba(255,255,255,0.15); } #site-header.is-scrolled{ background-color: rgba(30,41,59,0.60); box-shadow: 0 10px 28px rgba(0,0,0,0.45); border-bottom-color: rgba(255,255,255,0.22); } } :root{ --header-h: 0px; /* will be set by JS */ --header-extra-offset: 10px; /* your requested bump */ } /* Apply to all in-page anchor targets */ [id]{ scroll-margin-top: calc(var(--header-h) + var(--header-extra-offset)); } /* (optional) be explicit for common targets in your site */ #hero-form, #contact-form { scroll-margin-top: calc(var(--header-h) + var(--header-extra-offset)); } /* Make sure this file loads AFTER Tailwind in */