/* * Liquid Glass header. * Moved out of the WPCode plugin on 2026-07-21. WPCode stored each snippet TWICE * (editable copy in post_content, runtime copy in the wpcode_snippets option), so * edits silently failed to take effect. This file is the single source of truth. * Enqueued from functions.php, versioned by filemtime. */ /* ===== Floating glass header ===== */ #grve-main-header { top: 16px !important; width: calc(100% - 48px) !important; max-width: 1200px !important; left: 0 !important; right: 0 !important; margin-left: auto !important; margin-right: auto !important; border-radius: 100px; border: 1px solid rgba(255,255,255,.5); -webkit-backdrop-filter: blur(8px) saturate(190%); backdrop-filter: blur(8px) saturate(190%); box-shadow: 0 16px 44px -18px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.6), inset 1px 1px 1px rgba(255,70,120,.14), inset -1px -1px 1px rgba(90,170,255,.16); } #grve-main-header.grve-light { background: rgba(18,32,26,.18) !important; border-color: rgba(255,255,255,.22); } #grve-main-header.grve-light .grve-logo img { filter: brightness(0) invert(1) !important; } #grve-main-header.grve-dark { background: rgba(255,255,255,.55) !important; border-color: rgba(255,255,255,.7); } #grve-main-header.grve-dark .grve-logo img { filter: brightness(0) !important; /* solid black: the artwork is already black */ } #grve-main-responsive-header { background: rgba(255,255,255,.6) !important; -webkit-backdrop-filter: blur(8px) saturate(180%); backdrop-filter: blur(8px) saturate(180%); } /* Top-level menu text */ #grve-main-header.grve-light .grve-menu a { color: #fff !important; } #grve-main-header.grve-dark .grve-menu a { color: #1f2a25 !important; } /* ===== Dropdown submenu — frosted glass ===== */ #grve-main-header .grve-menu .sub-menu { background-color: rgba(255,255,255,.92) !important; background-image: none !important; -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); border: 1px solid rgba(255,255,255,.7) !important; border-radius: 16px !important; box-shadow: 0 22px 50px -20px rgba(0,0,0,.4) !important; padding: 8px !important; } #grve-main-header .grve-menu .sub-menu li { background-color: transparent !important; border: none !important; } #grve-main-header #grve-main-menu .sub-menu a, #grve-main-header #grve-main-menu .sub-menu a .grve-item { color: #1f2a25 !important; border-radius: 10px !important; } #grve-main-header #grve-main-menu .sub-menu li.current-menu-item > a, #grve-main-header #grve-main-menu .sub-menu li.current_page_item > a, #grve-main-header #grve-main-menu .sub-menu a[aria-current="page"] { background: rgba(61,97,82,.14) !important; background-image: none !important; } #grve-main-header #grve-main-menu .sub-menu li:hover > a { background: rgba(61,97,82,.12) !important; background-image: none !important; } /* ===== Reusable liquid-glass utilities ===== */ .glass-card { background: rgba(255,255,255,.55) !important; -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%); border: 1px solid rgba(255,255,255,.6) !important; border-radius: 20px !important; box-shadow: 0 20px 50px -24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.7), inset 1px 1px 1px rgba(255,70,120,.12), inset -1px -1px 1px rgba(90,170,255,.14) !important; transition: transform .3s ease; } .glass-card:hover { transform: translateY(-4px); } .glass-card-dark { background: rgba(18,32,26,.92) !important; /* near-solid dark */ -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%); border: 1px solid rgba(255,255,255,.14) !important; border-radius: 20px !important; box-shadow: 0 20px 50px -24px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18) !important; } .glass-btn, .glass-btn .grve-button, a.glass-btn { background: rgba(255,255,255,.5) !important; -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%); border: 1px solid rgba(255,255,255,.6) !important; border-radius: 100px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 24px -12px rgba(0,0,0,.4) !important; transition: transform .25s ease; } .glass-btn:hover { transform: translateY(-2px); } /* ========================================================================== Dropdown refinements - 2026-07-21 Appended deliberately: later rules in this same file win over the originals above, so the intent of each change stays readable next to what it replaces. ========================================================================== */ /* 1. FOCUS VISIBILITY (WCAG 2.4.7). A Tab-focused menu link computed IDENTICALLY to an unfocused one - no outline, background, underline or shadow - so keyboard users could navigate the menu but never see where they were. :focus-visible keeps it invisible to mouse users. */ #grve-main-header .grve-menu a:focus-visible, #grve-main-header .grve-menu .sub-menu a:focus-visible { outline: 2px solid #EE3124 !important; outline-offset: 2px; border-radius: 8px; } /* The top bar sits over photography on the light skin, where red alone can vanish. */ #grve-main-header.grve-light .grve-menu > li > a:focus-visible { outline-color: #fff !important; box-shadow: 0 0 0 4px rgba(0, 41, 59, .45) !important; } /* 2. BRAND COLOUR. This snippet's palette was green - #1f2a25 text, rgba(61,97,82,...) hover, rgba(18,32,26,...) header tint - the same off-brand hue that rendered the logo green. The brand is navy #00293b / ink #23282c. */ #grve-main-header.grve-light { background: rgba(0, 41, 59, .20) !important; } #grve-main-header.grve-dark .grve-menu a { color: #23282c !important; } #grve-main-header #grve-main-menu .sub-menu a, #grve-main-header #grve-main-menu .sub-menu a .grve-item { color: #23282c !important; } #grve-main-header #grve-main-menu .sub-menu li:hover > a, #grve-main-header #grve-main-menu .sub-menu a:focus-visible { background: rgba(0, 41, 59, .09) !important; color: #00293b !important; } #grve-main-header #grve-main-menu .sub-menu li.current-menu-item > a, #grve-main-header #grve-main-menu .sub-menu li.current_page_item > a { background: rgba(0, 41, 59, .13) !important; color: #00293b !important; font-weight: 600 !important; } /* 3. THE HOVER PILL WAS FLOATING. Movedo gives submenu links margin:0 15px, which inside the 8px panel padding left 23px gutters - the highlight looked detached from the panel it sits in. Also 12px was small for a 250px panel. */ #grve-main-header .grve-menu .sub-menu li a { margin: 0 4px !important; padding: 11px 12px !important; font-size: 13px !important; line-height: 1.35 !important; } /* 4. PANEL DEPTH. 0 22px 50px -20px rgba(0,0,0,.4) was one heavy layer that muddied over light content. Two layers - a tight contact shadow plus a soft ambient one - read cleanly on both. The white-on-white border was invisible over light sections. */ #grve-main-header .grve-menu .sub-menu { padding: 6px !important; border: 1px solid rgba(0, 41, 59, .08) !important; box-shadow: 0 1px 2px rgba(0, 41, 59, .10), 0 16px 40px -16px rgba(0, 41, 59, .35) !important; } /* 5. AFFORDANCE. Nothing indicated that What We Offer and About Us even had dropdowns - they looked identical to the five plain links beside them. */ #grve-main-header .grve-menu > li.menu-item-has-children > a::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 8px; position: relative; top: -2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: .55; } /* 6. FADE IN AND OUT. Superfish toggles `display`, and display cannot be transitioned - which is why the panel could only ever appear and vanish instantly, and why an added CSS keyframe just fought jQuery's own opacity animation. Both submenus are position:absolute inside a position:relative parent (and there are no nested submenus), so keeping them permanently in the layout costs nothing. Visibility is driven from Superfish's .sfHover class instead, which CSS *can* transition - giving a real fade IN and OUT. The visibility delay on close is what lets the opacity finish before the panel stops hit-testing. jQuery's competing animation is switched off in fbc-a11y.php. */ #grve-main-header .grve-menu > li > ul.sub-menu { display: block !important; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; } #grve-main-header .grve-menu > li.sfHover > ul.sub-menu { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .2s ease, visibility 0s linear 0s; } @media (prefers-reduced-motion: reduce) { #grve-main-header .grve-menu > li > ul.sub-menu, #grve-main-header .grve-menu > li.sfHover > ul.sub-menu { transition: none; } }