/* ========================================================================== header.css — Sticky Glass Header Part of the Romain Recovery theme stylesheet. ========================================================================== */ /* ========================================================================== 12. Header Sticky & Glass ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(0, 0, 0, 0.07); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(255, 255, 255, 0.25); border-bottom: 1px solid var(--accent-20); color: #FFFFFF; } /* Force light text/links inside dark header */ .site-header, .site-header a, .site-header .wp-block-site-title a, .site-header .wp-block-navigation a { color: #FFFFFF !important; } .site-header .wp-block-site-title a:hover, .site-header .wp-block-navigation a:hover { color: var(--wp--preset--color--accent) !important; } .site-header .wp-block-button__link { color: var(--wp--preset--color--contrast) !important; } /* ========================================================================== Header — hidden while hero is visible JS (header-visibility.js) toggles .hero-in-view on . ========================================================================== */ .site-header { transition: opacity 0.4s ease; } .hero-in-view .site-header { opacity: 0; pointer-events: none; } @media (max-width: 768px) { .site-header { display: none !important; } }