/* CHFE Frontend Styles */ /* ---- Template wrapper ---- */ .chfe-template-wrap { width: 100%; } /* ---- Template reveal ---- */ /* * No visibility hiding needed: print_template_css_inline() already injects * Elementor's CSS inline in , so there is no flash of unstyled content. * Keeping the wrapper always visible is simpler and more resilient. */ /* ---- Sticky header ---- */ .chfe-sticky-header { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; transition: box-shadow .25s ease, padding .25s ease; will-change: box-shadow; } /* When WP admin bar is visible it occupies the top of the viewport. Offset the sticky header so it sits below it, not under it. */ .admin-bar .chfe-sticky-header { top: 32px; } @media screen and ( max-width: 782px ) { .admin-bar .chfe-sticky-header { top: 46px; } } /* Scrolled state — adds shadow; padding shrink via JS class */ .chfe-sticky-header.chfe-scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.15); } /* Reduce section/container padding when scrolled — logo size stays untouched */ .chfe-sticky-header.chfe-scrolled .elementor-section, .chfe-sticky-header.chfe-scrolled .e-con { transition: padding .25s ease; padding-top: 6px !important; padding-bottom: 6px !important; } /* * Sentinel: a zero-content block inserted by JS immediately after the sticky * header. Its height mirrors the header height so page content does not jump. * JS uses ResizeObserver to keep it in sync as the header shrinks/grows. */ .chfe-sticky-sentinel { display: block; visibility: hidden; pointer-events: none; /* height set dynamically by JS */ } /* ---- Navigation menu ---- */ .chfe-nav { position: relative; } .chfe-nav-wrap > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } /* Horizontal */ .chfe-nav-wrap.layout-horizontal > ul { flex-direction: row; } /* Vertical */ .chfe-nav-wrap.layout-vertical > ul { flex-direction: column; } /* Dropdown toggle layout — menu hidden until .chfe-menu-open */ .chfe-nav-wrap.layout-dropdown > ul { flex-direction: column; display: none; } .chfe-nav-wrap.layout-dropdown.chfe-menu-open > ul { display: flex; } /* Nav links */ .chfe-nav-wrap a { display: block; text-decoration: none; transition: color .2s ease, background-color .2s ease; } /* Sub-menus */ .chfe-nav-wrap ul ul { list-style: none; margin: 0; padding: 0; position: absolute; top: 100%; left: 0; min-width: 180px; display: none; z-index: 9000; box-shadow: 0 4px 16px rgba(0,0,0,.12); } .chfe-nav-wrap > ul > li { position: relative; } .chfe-nav-wrap > ul > li:hover > ul { display: block; } /* ---- Hamburger button ---- */ .chfe-hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; width: 36px; height: 36px; background: none; border: none; cursor: pointer; padding: 4px; gap: 5px; } .chfe-hamburger span { display: block; width: 22px; height: 2px; background-color: #333; border-radius: 2px; transition: transform .25s ease, opacity .25s ease; } /* Animated X when active */ .chfe-hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .chfe-hamburger.is-active span:nth-child(2) { opacity: 0; } .chfe-hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* * Mobile overlay display (hamburger visibility, the fullscreen overlay * itself, and the close button) is generated per-widget as an inline *