.fl-node-q7wb3fcijuhe .fl-row-content { max-width: 1400px; } .fl-node-q7wb3fcijuhe > .fl-row-content-wrap { padding-top:20px; } @media ( max-width: 768px ) { .fl-node-q7wb3fcijuhe.fl-row > .fl-row-content-wrap { padding-right:20px; padding-bottom:0px; padding-left:20px; } } .fl-builder-content-79 .fl-node-phrx54zg9fkl { display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: nowrap; gap: 10px; } :where( .fl-builder-content-79 .fl-node-phrx54zg9fkl > :not( .fl-block-overlay, .fl-drop-target ) ) { padding-top: 0px; } .fl-node-phrx54zg9fkl.fl-module-box { margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; } /* Base logo styles */ .fl-node-4gjzemqp3a2c .fm-site-logo { display: block; line-height: 0; position: relative; z-index: 99999; /* Ensure logo appears above menu overlay */ } .fl-node-4gjzemqp3a2c .fm-site-logo-link { display: inline-block; line-height: 0; } .fl-node-4gjzemqp3a2c .fm-site-logo-img { display: inline-block; height: auto; } /* Hide logo entirely when overlay is active (Don't Show option) */ body.no-scroll .fl-node-4gjzemqp3a2c .hide-on-overlay, html.no-scroll .fl-node-4gjzemqp3a2c .hide-on-overlay { visibility: hidden; opacity: 0; } /* Admin notice when no logo */ .fl-node-4gjzemqp3a2c .fm-site-logo-notice { padding: 10px; background: #f0f0f0; border: 1px dashed #ccc; color: #666; font-size: 12px; text-align: center; } .fl-node-4gjzemqp3a2c .fm-site-logo-img { width: 150px; } .fl-node-4gjzemqp3a2c .fm-site-logo { text-align: left; } /** * FM Main Menu Module — Global (non-instance-scoped) baseline CSS * * These rules do NOT reference a BB node ID and are safe to load * unconditionally via BB's css/frontend.css auto-include path. * They provide a fallback structure so the menu is never completely * unstyled even when the per-instance cache (frontend.css.php output) * is stale, missing, or rebuilding. * * All node-specific colors, sizes, visibility breakpoints, and * toggle variants continue to live in includes/frontend.css.php. */ /* ========================================================================== Scroll lock (iOS fix) Must be global — applied to /, cannot be node-scoped. ========================================================================== */ html.no-scroll, body.no-scroll { overflow: hidden; height: 100%; width: 100%; } html.no-scroll { scroll-behavior: auto; } /* ========================================================================== Toggle container baseline ========================================================================== */ .fm-menu-toggle { z-index: 99; cursor: pointer; } .toggle-switch-container { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; } .menu-icons { position: relative; z-index: 99; } /* ========================================================================== Full-screen menu baseline — hidden-by-default state The is-open class and sizing are still per-instance via frontend.css.php, but the fixed positioning and hidden default must always be present so the menu never renders as an inline block when the instance CSS is missing. Both classes are always present on the overlay element (see frontend.html.php). ========================================================================== */ .full-screen-menu.full-screen-toggle { position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; visibility: hidden; pointer-events: none; z-index: 9; width: 100vw; } /* ========================================================================== List-style reset — ensures no browser-default bullets even without per-instance CSS. fm-menu-nav rules in frontend.css.php are scoped and take precedence; these are the baseline fallback. ========================================================================== */ .fm-menu-nav, .fm-menu-nav ul, .fm-menu-nav li { list-style: none; margin: 0; padding: 0; } /* ========================================================================== UIkit Replacement Utility Classes (scoped to this BB node) Uses BB global breakpoints instead of hardcoded values. ========================================================================== */ /* fm-hidden-m: hidden above medium breakpoint (mobile-only content) */ @media (min-width: 993px) { .fl-node-4c5brh2eiops .fm-hidden-m { display: none !important; } } /* fm-hidden-l: hidden above large breakpoint */ @media (min-width: 993px) { /* At medium, still visible */ } @media (min-width: 1200px) { .fl-node-4c5brh2eiops .fm-hidden-l { display: none !important; } } /* fm-hidden-always: always hidden */ .fl-node-4c5brh2eiops .fm-hidden-always { display: none !important; } /* fm-visible-m: visible only above medium breakpoint */ .fl-node-4c5brh2eiops .fm-visible-m { display: none !important; } @media (min-width: 993px) { .fl-node-4c5brh2eiops .fm-visible-m { display: block !important; } } /* fm-visible-l: visible only above large breakpoint */ .fl-node-4c5brh2eiops .fm-visible-l { display: none !important; } @media (min-width: 1200px) { .fl-node-4c5brh2eiops .fm-visible-l { display: block !important; } } /* fm-visible-s: visible only above small/responsive breakpoint */ .fl-node-4c5brh2eiops .fm-visible-s { display: none !important; } @media (min-width: 769px) { .fl-node-4c5brh2eiops .fm-visible-s { display: block !important; } } /* fm-flex, fm-flex-middle: flexbox utilities */ .fl-node-4c5brh2eiops .fm-flex { display: flex; } .fl-node-4c5brh2eiops .fm-flex-middle { align-items: center; } /* ========================================================================== Typography, spacing, and alignment (Module Settings) Generated first so base CSS can override structure only, not values ========================================================================== */ /* ========================================================================== Regular (Inline Desktop) Menu Styles ========================================================================== */ .fl-node-4c5brh2eiops .fm-menu-container ul { padding-inline-start: 0; } /* Remove list styles */ .fl-node-4c5brh2eiops .regular-menu-container .fm-menu-nav, .fl-node-4c5brh2eiops .regular-menu-container .fm-menu-nav ul { list-style: none; } /* Display menu items inline */ .fl-node-4c5brh2eiops .regular-menu-container .fm-menu-nav > li { display: inline-block; position: relative; padding-bottom: 6px; } .fl-node-4c5brh2eiops .regular-menu-container .fm-menu-nav > li > a { display: block; text-decoration: none; } .fl-node-4c5brh2eiops .regular-menu-container .fm-menu-nav .sub-menu > li { text-align: right; } /* Invisible bridge between parent item and submenu to prevent hover gap */ .fl-node-4c5brh2eiops .regular-menu-container .fm-menu-nav > li.fm-has-submenu.fm-submenu-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; /* extend slightly below the li's padding-bottom */ height: 18px; /* generous bridge area */ z-index: 9998; } /* Position REGULAR Submenu */ .fl-node-4c5brh2eiops .regular-menu-container .fm-menu-nav ul { position: absolute; top: calc(100% - 2px); /* slight overlap to eliminate hover gap */ left: 0; min-width: 200px; display: none; /* hidden by default; JS toggles class to show */ opacity: 0; /* fade-in enhancement */ transform: none; transition: opacity .18s ease-in-out; pointer-events: none; /* avoid accidental hovers while hidden */ z-index: 9999; } .fl-node-4c5brh2eiops .regular-menu-container .fm-menu-nav li.fm-submenu-active > ul { display: block; opacity: 1; pointer-events: auto; } /* Ensure the inline menu can show dropdowns beyond container bounds */ .fl-node-4c5brh2eiops .regular-menu-container, .fl-node-4c5brh2eiops .regular-menu-container .fm-menu-container { overflow: visible; } .fl-node-4c5brh2eiops .regular-menu-container .fm-menu-nav ul li { display: block; } .fl-node-4c5brh2eiops .regular-menu-container .fm-menu-nav ul li a { display: block; text-decoration: none; } /* ========================================================================== Mobile / Toggle Menu Styles ========================================================================== */ /* Full Screen Container - Hidden by default, animated on open */ .fl-node-4c5brh2eiops .full-screen-menu { background: var(--fm_mobile_menu_bg_color); width: 100vw; padding: 0; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 9; /* Hidden state (default) */ opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; } /* Open state - visible with fade-in */ .fl-node-4c5brh2eiops .full-screen-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; } /* Menu item stagger animation keyframes */ @keyframes fmMenuItemIn { from { opacity: 0; transform: translateY(-15px); } to { opacity: 1; transform: translateY(0); } } /* Menu items hidden until overlay opens */ .fl-node-4c5brh2eiops .full-screen-menu .fm-menu-nav > li { opacity: 0; transform: translateY(-15px); } /* Staggered animation on open */ .fl-node-4c5brh2eiops .full-screen-menu.is-open .fm-menu-nav > li { animation: fmMenuItemIn 0.4s ease forwards; } .fl-node-4c5brh2eiops .full-screen-menu.is-open .fm-menu-nav > li:nth-child(1) { animation-delay: 0.05s; } .fl-node-4c5brh2eiops .full-screen-menu.is-open .fm-menu-nav > li:nth-child(2) { animation-delay: 0.1s; } .fl-node-4c5brh2eiops .full-screen-menu.is-open .fm-menu-nav > li:nth-child(3) { animation-delay: 0.15s; } .fl-node-4c5brh2eiops .full-screen-menu.is-open .fm-menu-nav > li:nth-child(4) { animation-delay: 0.2s; } .fl-node-4c5brh2eiops .full-screen-menu.is-open .fm-menu-nav > li:nth-child(5) { animation-delay: 0.25s; } .fl-node-4c5brh2eiops .full-screen-menu.is-open .fm-menu-nav > li:nth-child(6) { animation-delay: 0.3s; } .fl-node-4c5brh2eiops .full-screen-menu.is-open .fm-menu-nav > li:nth-child(7) { animation-delay: 0.35s; } .fl-node-4c5brh2eiops .full-screen-menu.is-open .fm-menu-nav > li:nth-child(8) { animation-delay: 0.4s; } /* Accessibility: Reduced Motion */ @media (prefers-reduced-motion: reduce) { .fl-node-4c5brh2eiops .full-screen-menu { transition: none; } .fl-node-4c5brh2eiops .full-screen-menu .fm-menu-nav > li { animation: none; opacity: 1; transform: none; } } /* Remove list styles */ .fl-node-4c5brh2eiops .full-screen-menu .fm-menu-nav, .fl-node-4c5brh2eiops .full-screen-menu .fm-menu-nav ul, .fl-node-4c5brh2eiops .full-screen-menu .fm-submenu li, .fl-node-4c5brh2eiops .fm-menu-nav .sub-menu li { list-style: none; padding: 0; margin: 0; min-width: 200px; } /* Display menu items as blocks (mobile layout) */ .fl-node-4c5brh2eiops .full-screen-menu .fm-menu-nav > li { display: block; position: relative; } /* Position submenu on full screen menu */ .fl-node-4c5brh2eiops .full-screen-menu .fm-has-submenu ul { position: relative; background-color: transparent; top: 0; min-width: 200px; left: 0; opacity: 0; transform: scaleY(0.9); transform-origin: top center; transition: opacity .4s ease-in-out, transform .4s ease-in-out, max-height .4s ease-in-out; max-height: 0; overflow: hidden; will-change: max-height, transform, opacity; } .fl-node-4c5brh2eiops .full-screen-menu .fm-submenu-active ul { opacity: 1; transform: scaleY(1); max-height: 1000px; overflow: hidden; } .fl-node-4c5brh2eiops .full-screen-menu .fm-menu-nav .sub-menu li { background: transparent; text-indent: 15px; padding-bottom: 6px; } .fl-node-4c5brh2eiops .fm-menu-nav .sub-menu > li a { background: transparent; } /* ========================================================================== Image + Split Layout ========================================================================== */ .fl-node-4c5brh2eiops .image-and-menu-container { margin: auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100vh; } .fl-node-4c5brh2eiops .full-screen-menu-image { background-image: url('https://pub-5eb85158743e4826828b22f07895bf50.r2.dev/library/hannah-busing-FF049vNP1eg-unsplash-scaled-1-aac2eeae3f.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; display: block; opacity: 1; position: relative; z-index: 1; grid-row: 1 / 2; grid-column: 1 / 2; } .fl-node-4c5brh2eiops .fm-menu-with-image-flex-container { display: flex; padding: 20px; padding-top: 100px; box-sizing: border-box; justify-content: center; align-items: center; width: 100%; max-width: none; min-height: 100vh; position: relative; z-index: 2; grid-column: 2 / 3; grid-row: 1 / 2; justify-self: center; align-self: center; } /* Image layout: stack on small screens (uses BB responsive breakpoint) */ @media (max-width: 768px) { .fl-node-4c5brh2eiops .image-and-menu-container { display: flex; flex-direction: column; } .fl-node-4c5brh2eiops .full-screen-menu-image { display: none; } .fl-node-4c5brh2eiops .fm-menu-with-image-flex-container { flex-grow: 1; } } /* Standard full-screen (no image) menu container */ .fl-node-4c5brh2eiops .fm-menu-flex-container { display: flex; flex-direction: column; width: 100%; max-width: none; padding: 20px; height: 100vh; padding-top: 100px; box-sizing: border-box; justify-content: center; align-items: center; } .fl-node-4c5brh2eiops .full-screen-menu .fm-menu-container { height: auto; max-height: calc(100vh - 140px); position: relative; margin-top: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; padding-top: 40px; padding-bottom: 40px; transition: none; } .fl-node-4c5brh2eiops .fm-menu-wrapper { position: relative; } /* Gradient fades at top/bottom of scrollable menu */ .fl-node-4c5brh2eiops .full-screen-menu .fm-menu-wrapper::before { position: absolute; content: ""; left: 0; right: 0; height: 40px; z-index: 2; pointer-events: none; top: 0; background: linear-gradient(to bottom, var(--fm_mobile_menu_bg_color), transparent); } .fl-node-4c5brh2eiops .full-screen-menu .fm-menu-wrapper::after { position: absolute; content: ""; left: 0; right: 0; height: 40px; z-index: 2; pointer-events: none; bottom: 0; background: linear-gradient(to top, var(--fm_mobile_menu_bg_color), transparent); } /* Hide scrollbar for WebKit */ .fl-node-4c5brh2eiops .full-screen-menu .fm-menu-container::-webkit-scrollbar { width: 0; height: 0; display: none; } /* ========================================================================== Toggle / Switch Controls ========================================================================== */ .fm-menu-toggle { z-index: 99; } .toggle-switch-container { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; } .menu-icons { position: relative; z-index: 99; } /* Button reset for toggle-one (now a