/* ============================================================ * Hidrota DMNT — Header * Modern, responsive, animated. * ========================================================== */ .hidrota-header-wrap { position: relative; z-index: 50; width: 100%; } /* ----- Sticky (ALWAYS fixed at viewport top) ----- Single source of truth for sticky positioning. Works whether the wrap stays in its Elementor section OR JS has hoisted it to . */ .hidrota-header-wrap.hidrota-header--sticky { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 999 !important; } /* Inner header bar: static, controlled by wrap. Transitions for color/blur/padding. */ .hidrota-header-wrap.hidrota-header--sticky .hidrota-header { position: relative; transition: background-color .35s ease, padding .35s ease, backdrop-filter .35s ease; } /* ----- Overlay mode (only when NOT sticky) ----- When sticky is off but overlay is on, sit absolutely over the next section. */ .hidrota-header-wrap.hidrota-header--overlay:not(.hidrota-header--sticky) { position: absolute; top: 0; left: 0; right: 0; z-index: 50; } /* Default stuck appearance — solid dark glass. Widget colour control still wins via its inline selector; this ensures it always reads "black blur". */ .hidrota-header-wrap.hidrota-header--sticky .hidrota-header.is-stuck { background-color: rgba(0,0,0,0.55); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 2px 24px rgba(0,0,0,0.18); } /* Slightly stronger blur if the "Sticky Backdrop Blur" toggle is on. */ .hidrota-header-wrap.hidrota-header--blur .hidrota-header.is-stuck { backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); } /* Body padding-top placeholder for sticky + non-overlay so content doesn't slide under. JS writes --hidrota-header-h on . */ html.has-hidrota-sticky-header:not(.has-hidrota-overlay) body { padding-top: var(--hidrota-header-h, 88px); } /* ----- Top utility bar ------------------------------------- */ .hidrota-header__topbar { position: relative; z-index: 2; font-size: 13px; line-height: 1.4; } .hidrota-header__topbar-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 28px; flex-wrap: wrap; padding: 8px 40px; } .hidrota-header__topbar-item { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; } .hidrota-header__topbar-item i, .hidrota-header__topbar-item svg { font-size: 14px; width: 14px; height: 14px; } .hidrota-header__topbar-item:hover { opacity: .85; } /* ----- Main header bar ------------------------------------- */ .hidrota-header { position: relative; z-index: 1; width: 100%; } .hidrota-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; max-width: 1400px; margin: 0 auto; padding: 20px 40px; transition: padding .35s ease; } /* ----- Logo ----------------------------------------------- */ .hidrota-header__logo { display: inline-flex; align-items: center; line-height: 0; transition: transform .35s ease; } .hidrota-header__logo img { display: block; width: auto; height: auto; max-width: 160px; transition: max-width .35s ease; } .hidrota-header--shrink .hidrota-header.is-stuck .hidrota-header__logo img { max-width: 120px; } /* ----- Desktop nav ---------------------------------------- */ .hidrota-header__nav { flex: 1 1 auto; display: flex; justify-content: center; } .hidrota-header__nav > ul, .hidrota-header__menu-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .hidrota-header__nav a { position: relative; display: inline-block; color: #fff; text-decoration: none; font-weight: 600; letter-spacing: .04em; font-size: 18px; line-height: 1.3; padding: 6px 0; transition: color .25s ease; } .hidrota-header__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #d29464; transform: scaleX(0); transform-origin: center; transition: transform .3s ease; } .hidrota-header__nav a:hover::after, .hidrota-header__nav .current-menu-item > a::after, .hidrota-header__nav .current-menu-ancestor > a::after { transform: scaleX(1); } /* Submenu */ .hidrota-header__nav li { position: relative; } .hidrota-header__nav .sub-menu { list-style: none; padding: 12px 0; margin: 0; position: absolute; top: 100%; left: 0; min-width: 220px; background: rgba(20,20,20,.96); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease, visibility .25s ease; border-radius: 6px; box-shadow: 0 12px 32px rgba(0,0,0,.25); } .hidrota-header__nav li:hover > .sub-menu, .hidrota-header__nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .hidrota-header__nav .sub-menu a { display: block; padding: 10px 20px; font-weight: 500; letter-spacing: 0; } .hidrota-header__nav .sub-menu a::after { display: none; } /* ----- Actions: CTA + burger ------------------------------ */ .hidrota-header__actions { display: flex; align-items: center; gap: 16px; } .hidrota-header__cta { display: inline-flex; align-items: center; gap: 8px; background: #d29464; color: #fff; padding: 12px 24px; text-decoration: none; font-weight: 600; border-radius: 4px; transition: background-color .25s ease, transform .15s ease; } .hidrota-header__cta:hover { background: #b87a4e; transform: translateY(-1px); } .hidrota-header__cta:active { transform: translateY(0); } /* ----- Animated hamburger --------------------------------- */ .hidrota-header__burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: transparent; border: 0; padding: 0; cursor: pointer; } .hidrota-header__burger span { display: block; width: 24px; height: 2px; background: #fff; transition: transform .3s ease, opacity .25s ease, background-color .25s ease; transform-origin: center; } .hidrota-header__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hidrota-header__burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hidrota-header__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================ * Off-canvas mobile panel * ========================================================== */ .hidrota-header__backdrop { position: fixed; inset: 0; z-index: 998; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .3s ease; } .hidrota-header__backdrop.is-visible { opacity: 1; pointer-events: auto; } .hidrota-header__panel { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: auto !important; width: min(360px, 88vw) !important; height: 100vh !important; height: 100dvh !important; max-width: 100vw !important; z-index: 99999 !important; background: #141414 !important; color: #fff !important; transform: translateX(100%); transition: transform .4s cubic-bezier(.4,.0,.2,1); display: flex !important; flex-direction: column !important; /* Respect iOS notch + home indicator; add comfortable left/right room. */ padding: max(20px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)) 24px !important; box-shadow: -16px 0 32px rgba(0,0,0,.25); overflow-y: auto !important; overscroll-behavior: contain; visibility: hidden; pointer-events: auto; text-align: left !important; } .hidrota-header__panel.is-open { transform: translateX(0) !important; visibility: visible !important; } .hidrota-header__backdrop { position: fixed !important; inset: 0 !important; z-index: 99998 !important; } .hidrota-header__panel-head { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 24px; padding-bottom: 16px; gap: 16px; flex: 0 0 auto; border-bottom: 1px solid rgba(255,255,255,.08); } .hidrota-header__logo--panel img { max-width: 120px; } .hidrota-header__panel-close { position: relative; width: 44px; height: 44px; flex: 0 0 44px; background: transparent; border: 0; cursor: pointer; margin-right: -8px; /* nudge X away from panel edge for breathing room */ } .hidrota-header__panel-close span { position: absolute; left: 50%; top: 50%; width: 22px; height: 2px; background: #fff; transform-origin: center; margin-left: -11px; /* center the bar on the button */ } .hidrota-header__panel-close span:first-child { transform: translateY(-50%) rotate(45deg); } .hidrota-header__panel-close span:last-child { transform: translateY(-50%) rotate(-45deg); } .hidrota-header__panel-nav { margin: 8px 0 0; flex: 0 0 auto; display: block !important; } .hidrota-header__panel-nav ul { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 0 !important; } .hidrota-header__panel-nav li { list-style: none !important; display: block !important; } .hidrota-header__panel-nav li a { display: block !important; } .hidrota-header__menu-list--fallback li { list-style: none; } .hidrota-header__panel-nav a { display: block !important; padding: 14px 0 !important; color: #fff; text-decoration: none !important; text-align: left !important; font-weight: 600; font-size: 18px; border-bottom: 1px solid rgba(255,255,255,.06); transition: color .2s ease, padding-left .2s ease; } .hidrota-header__panel-nav a:hover { color: #d29464; padding-left: 6px; } .hidrota-header__panel-nav .sub-menu { list-style: none; margin: 4px 0 8px; padding: 0 0 0 16px; border-left: 2px solid rgba(255,255,255,.08); } .hidrota-header__panel-nav .sub-menu a { font-size: 16px; font-weight: 500; } .hidrota-header__cta--panel { margin-top: 16px; margin-bottom: 24px; flex: 0 0 auto; display: inline-flex !important; justify-content: center !important; align-items: center !important; align-self: center !important; width: auto !important; min-width: 200px; padding-top: 14px !important; padding-bottom: 14px !important; padding-left: 32px !important; padding-right: 32px !important; box-sizing: border-box; } .hidrota-header__panel-info { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 10px; font-size: 14px; } .hidrota-header__panel-info a, .hidrota-header__panel-info > span { display: inline-flex; align-items: center; gap: 10px; color: #ddd; text-decoration: none; } .hidrota-header__panel-info a:hover { color: #d29464; } .hidrota-header__panel-info i, .hidrota-header__panel-info svg { color: #d29464; width: 14px; height: 14px; font-size: 14px; } /* ============================================================ * Scroll lock when panel is open + horizontal overflow clip * ========================================================== */ body.hidrota-no-scroll { overflow: hidden; } /* The off-canvas panel sits at translateX(100%) (off-screen right) when closed. Some browsers extend the document width to include it, which shows up as a horizontal scrollbar — clip it. */ html, body { overflow-x: hidden; max-width: 100%; } /* ============================================================ * Animation: header slides down on first paint * ========================================================== */ @keyframes hidrota-header-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } .hidrota-header-wrap { animation: hidrota-header-in .55s ease both; } /* ============================================================ * Mobile cleanup * ========================================================== */ @media (max-width: 767px) { /* Hide the multi-line topbar on phones — info still appears inside the off-canvas mobile panel for reach. */ .hidrota-header__topbar { display: none; } /* Compact inner row */ .hidrota-header__inner { gap: 12px; padding-left: 16px !important; padding-right: 16px !important; } .hidrota-header__actions { gap: 8px; } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .hidrota-header-wrap, .hidrota-header__panel, .hidrota-header__backdrop, .hidrota-header__burger span, .hidrota-header__nav a::after, .hidrota-header__cta { transition: none; animation: none; } }