/* ================================================================ GOO.CSS — Gooey Drop hover effect for navbar tabs Reference: https://goo-drop.learnframer.site/ Each top-level nav tab that has a dropdown (Process, Services, Resources, Tools) gets a hidden two-blob "goo-drip" element below it. On hover, a small drop falls from the link and a puddle expands beneath it; an SVG #goo filter merges the two blobs smoothly into a liquid goo shape as they connect. The filter is scoped to the goo-drip element only, so nav-link text and dropdown-item text never get blurred. ================================================================ */ /* Hidden SVG sprite that hosts the #goo filter. Injected once into by goo.js and reused for the entire page. */ .goo-svg-host { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; } /* ---------------- Drip container (one per dropdown tab) ---------------- Sits absolutely beneath the .mega-nav-link, slightly inside the parent .has-mega-dropdown. Filter: url(#goo) merges the .drip and .puddle blobs into goo. */ .goo-drip { position: absolute; top: calc(100% - 4px); /* start tucked just under the link */ left: 50%; transform: translateX(-50%); width: 60px; height: 36px; pointer-events: none; opacity: 0; z-index: 0; filter: url(#goo); transition: opacity 0.18s ease 0.05s; } /* On hover/focus of the parent tab, fade in. The drop + puddle then animate via their own transitions for a "drip" feel. */ .has-mega-dropdown:hover .goo-drip, .has-mega-dropdown:focus-within .goo-drip { opacity: 1; transition-delay: 0s; } /* The two gooey blobs share base styles. */ .goo-drip .drip, .goo-drip .puddle { position: absolute; background: var(--primary, #4CAF50); border-radius: 50%; will-change: transform, width, height; } /* The drip — small bead that falls from the bottom of the nav-link. */ .goo-drip .drip { top: 0; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; transform: translateY(-2px) scale(0.6); transition: transform 0.35s cubic-bezier(0.55, 0.06, 0.68, 0.19); } .has-mega-dropdown:hover .goo-drip .drip, .has-mega-dropdown:focus-within .goo-drip .drip { transform: translateY(18px) scale(1); } /* The puddle — flat ellipse below that grows to catch the drip. */ .goo-drip .puddle { bottom: 4px; left: 50%; width: 8px; height: 6px; margin-left: -4px; transform: scale(0.4); transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s, width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s; } .has-mega-dropdown:hover .goo-drip .puddle, .has-mega-dropdown:focus-within .goo-drip .puddle { transform: scale(1); width: 32px; margin-left: -16px; } /* Make the parent nav-item the positioning context for the drip and ensure it doesn't clip the drip when it animates downward. */ .has-mega-dropdown { position: relative; overflow: visible; } /* The nav-link itself sits above the drip so the drip appears to emerge from underneath the link's rounded bottom edge. */ .has-mega-dropdown > .mega-nav-link { position: relative; z-index: 1; } /* Reduced motion: skip the drop animation, hide the drip entirely. */ @media (prefers-reduced-motion: reduce) { .goo-drip { display: none !important; } } /* Touch devices: there's no real hover, so suppress to avoid the drip stuck in some half-state when a tap focuses-and-leaves. */ @media (hover: none), (pointer: coarse) { .goo-drip { display: none !important; } } /* Dark mode tint — slightly brighter green so the goo reads on dark BG. */ body.dark-mode .goo-drip .drip, body.dark-mode .goo-drip .puddle { background: #6FCF70; }