/* OHS Header — all layout/theme control (Elementor provides the elements/divs). Targets stable element IDs (.elementor-element-ohsrow / -ohsact) + widget classes. NO hard values: colours = kit palette var(--e-global-color-*); spacing = var(--ohs-space-*). */ /* ---- Announcement bar (content from [ohs_announce] shortcode) ---- */ .ohs2-announce .elementor-widget-container { text-align:center; font-size:var(--e-global-typography-secondary-font-size); font-weight:var(--e-global-typography-secondary-font-weight); letter-spacing:0.04em; color:var(--e-global-color-text); } .ohs2-announce p { margin:0; } .ohs2-announce u { text-decoration:underline; text-underline-offset:2px; } /* announcement bar toggled off in OHS Theme Options */ body.ohs-no-announce .elementor-element-ohsann, body.ohs-no-announce .ohs2-mm-announce { display:none !important; } /* ---- Nav row: CSS grid 1fr auto 1fr => nav is perfectly page-centered ---- */ .elementor-element-ohsrow { display:grid !important; grid-template-columns:1fr auto 1fr; align-items:center; padding:var(--ohs-space-md) var(--ohs-page-x); background-color:color-mix(in srgb, var(--e-global-color-clr_white) 90%, transparent); } .elementor-element-ohsrow > .ohs2-logo { justify-self:start; } .elementor-element-ohsrow > .ohs2-nav { justify-self:center; } .ohs2-nav .elementor-nav-menu { display:flex !important; gap:var(--ohs-space-xl); flex-wrap:nowrap !important; } .ohs2-nav .elementor-nav-menu li { margin:0 !important; } .elementor-element-ohsact { display:flex !important; flex-direction:row !important; justify-content:flex-end !important; align-items:center !important; gap:var(--ohs-space-sm); padding:0 !important; } .elementor-element-ohsact > .elementor-widget > .elementor-widget-container { padding:0 !important; margin:0 !important; } /* ---- Logo (inline SVG wordmark) ---- */ .ohs2-logo .ohs2-logo-link { display:block; line-height:0; } .ohs2-logo svg { width:270px; height:auto; display:block; } .ohs2-logo svg path { fill:var(--e-global-color-text) !important; } /* Logo slides up + fades in when the mobile menu opens — same motion as the nav items */ @keyframes ohsLogoFade { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } } body.ohs2-menu-open .ohs2-logo svg { animation:ohsLogoFade .45s cubic-bezier(.22,.61,.36,1) backwards; } @media (prefers-reduced-motion: reduce) { body.ohs2-menu-open .ohs2-logo svg { animation:none; } } .ohs2-logo .elementor-widget-container { line-height:0; } /* ---- Header intro: subtle staggered fade-down of the header items, but ONLY on the first page view of the session. The `.ohs-header-intro` flag is added to in just once (sessionStorage), so navigating around the site doesn't replay it. `backwards` fill keeps each item hidden through its delay so the stagger reads cleanly. Pure CSS; gated for reduced-motion too. ---- */ @keyframes ohsHeaderIn { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion: no-preference) { .ohs-header-intro .ohs2-announce, .ohs-header-intro .ohs2-logo, .ohs-header-intro .ohs2-nav .menu-item, .ohs-header-intro .ohs2-phone, .ohs-header-intro .ohs2-langsw, .ohs-header-intro .ohs2-burger { animation: ohsHeaderIn .6s cubic-bezier(.22,.61,.36,1) backwards; } .ohs-header-intro .ohs2-announce { animation-delay:.05s; } .ohs-header-intro .ohs2-logo { animation-delay:.12s; } .ohs-header-intro .ohs2-nav .menu-item:nth-child(1) { animation-delay:.22s; } .ohs-header-intro .ohs2-nav .menu-item:nth-child(2) { animation-delay:.28s; } .ohs-header-intro .ohs2-nav .menu-item:nth-child(3) { animation-delay:.34s; } .ohs-header-intro .ohs2-nav .menu-item:nth-child(4) { animation-delay:.40s; } .ohs-header-intro .ohs2-nav .menu-item:nth-child(5) { animation-delay:.46s; } .ohs-header-intro .ohs2-phone { animation-delay:.34s; } .ohs-header-intro .ohs2-langsw { animation-delay:.40s; } .ohs-header-intro .ohs2-burger { animation-delay:.18s; } } /* Safety net: no intro animation inside the Elementor editor. */ body.elementor-editor-active .ohs2-announce, body.elementor-editor-active .ohs2-logo, body.elementor-editor-active .ohs2-nav .menu-item, body.elementor-editor-active .ohs2-phone, body.elementor-editor-active .ohs2-langsw, body.elementor-editor-active .ohs2-burger { animation:none !important; opacity:1 !important; transform:none !important; } /* ---- Nav (nav-menu widget; override the primary-global default) ---- */ .ohs2-nav .elementor-nav-menu { flex-wrap:nowrap !important; } .ohs2-nav .elementor-item { font-size:var(--e-global-typography-text-font-size) !important; font-weight:var(--e-global-typography-text-font-weight) !important; letter-spacing:0.04em !important; color:var(--e-global-color-text) !important; white-space:nowrap !important; padding:0 !important; line-height:1.2 !important; } /* Hover: animated underline on the hovered link; dim the siblings so the hovered item stands out. The :hover-on-item rule matches the dim selector's specificity + an extra :hover, so the hovered item correctly stays full. */ .ohs2-nav .elementor-item { position:relative; transition:opacity .25s ease !important; } .ohs2-nav .elementor-item::after { content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left center; transition:transform .25s cubic-bezier(.22,.61,.36,1); } .ohs2-nav .elementor-nav-menu:hover .elementor-item { opacity:.4; } .ohs2-nav .elementor-nav-menu:hover .elementor-item:hover { opacity:1; } .ohs2-nav .elementor-item:hover::after { transform:scaleX(1); } /* ---- Phone icon ---- */ .ohs2-phone .elementor-icon-wrapper, .ohs2-phone .elementor-icon { display:flex !important; align-items:center !important; line-height:0 !important; } .ohs2-phone svg, .ohs2-phone i { width:16px !important; height:16px !important; fill:var(--e-global-color-text) !important; color:var(--e-global-color-text) !important; display:block !important; } /* ---- Language dropdown ([ohs_lang]) ---- */ .ohs2-langsw { position:relative; display:inline-flex; align-items:center; outline:none; line-height:1; cursor:pointer; } .ohs2-langsw-current { display:inline-flex; align-items:center; gap:var(--ohs-space-xs); font-size:var(--e-global-typography-text-font-size); letter-spacing:0.04em; color:var(--e-global-color-text); line-height:1; } .ohs2-langsw-caret { width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid var(--e-global-color-text); display:inline-block; transition:transform .2s ease; } .ohs2-langsw:hover .ohs2-langsw-caret, .ohs2-langsw:focus-within .ohs2-langsw-caret { transform:rotate(180deg); } .ohs2-langsw-menu { position:absolute; top:100%; right:0; margin:10px 0 0; padding:6px 0; list-style:none; background:var(--e-global-color-clr_white); min-width:60px; box-shadow:0 6px 20px color-mix(in srgb, var(--e-global-color-text) 10%, transparent); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .18s, transform .18s, visibility .18s; z-index:9999; } .ohs2-langsw:hover .ohs2-langsw-menu, .ohs2-langsw:focus-within .ohs2-langsw-menu { opacity:1; visibility:visible; transform:none; } .ohs2-langsw-menu a { display:block; padding:7px 16px; font-size:var(--e-global-typography-text-font-size); color:var(--e-global-color-text); text-decoration:none; } .ohs2-langsw-menu a:hover { color:var(--e-global-color-primary); background:var(--e-global-color-clr_cream); } /* ---- Hamburger icon (shown <=1024); becomes the close (✕) when menu open ---- */ /* Fixed width so the hamburger (28px) ↔ close (22px) swap doesn't resize the actions column and nudge the logo. Icons stay centered within it. */ .ohs2-burger { display:none; width:30px; align-items:center; justify-content:center; background:transparent !important; border:0 !important; box-shadow:none !important; cursor:pointer; padding:0 !important; } .ohs2-burger-open, .ohs2-burger-close { display:flex; align-items:center; justify-content:center; line-height:0; } .ohs2-burger-close { display:none; } body.ohs2-menu-open .ohs2-burger-open { display:none; } body.ohs2-menu-open .ohs2-burger-close { display:flex; } .ohs2-burger-open svg { width:28px !important; height:auto !important; display:block; } .ohs2-burger-close svg { width:22px !important; height:22px !important; display:block; } .ohs2-burger svg path { fill:var(--e-global-color-text) !important; } /* ---- Mobile full-screen menu ([ohs_mobile_menu]) — matches design comp ---- */ /* The real header (announcement + logo) stays on top (higher z-index); the overlay sits below it and is content-padded to clear it — so the announcement and logo are NOT duplicated inside the menu. JS relocates .ohs2-mm to . */ .elementor-element-ohsann, .elementor-element-ohsrow { position:relative; z-index:9999; } /* Header is a global overlay on EVERY page: absolutely positioned over the page's top hero/banner. Only the lime announcement bar is solid; the nav row is transparent so the hero behind it shows through. Sits above the body-level mobile overlay (z:9990). Each page's first section must be a hero/banner tall enough (and padded) to sit under it — home is 100vh, inner pages are shorter. */ .elementor-location-header { position:absolute; top:0; left:0; right:0; width:100%; z-index:9999; } /* Background just fades/appears in place — no slide (items animate instead) */ .ohs2-mm { position:fixed; inset:0; background:var(--e-global-color-clr_white); z-index:9990; display:flex; flex-direction:column; justify-content:space-between; padding:118px 0 var(--ohs-space-lg); opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; overflow-y:auto; } body.ohs-no-announce .ohs2-mm { padding-top:76px; } body.ohs2-menu-open .ohs2-mm { opacity:1; visibility:visible; } body.ohs2-menu-open { overflow:hidden; } /* Staggered reveal: each item slides up from below, one after another. Base (closed) = below + transparent; open = in place. Delays only on open, so closing resets them together instantly. */ .ohs2-mm-nav .ohs2-mm-menu li, .ohs2-mm-social, .ohs2-mm-lang, .ohs2-mm-copy { opacity:0; transform:translateY(28px); transition:opacity .45s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.22,.61,.36,1); } body.ohs2-menu-open .ohs2-mm-nav .ohs2-mm-menu li, body.ohs2-menu-open .ohs2-mm-social, body.ohs2-menu-open .ohs2-mm-lang, body.ohs2-menu-open .ohs2-mm-copy { opacity:1; transform:none; } /* stagger order top→bottom: nav items, social, lang, copy */ body.ohs2-menu-open .ohs2-mm-menu li:nth-child(1) { transition-delay:.06s; } body.ohs2-menu-open .ohs2-mm-menu li:nth-child(2) { transition-delay:.12s; } body.ohs2-menu-open .ohs2-mm-menu li:nth-child(3) { transition-delay:.18s; } body.ohs2-menu-open .ohs2-mm-menu li:nth-child(4) { transition-delay:.24s; } body.ohs2-menu-open .ohs2-mm-menu li:nth-child(5) { transition-delay:.30s; } body.ohs2-menu-open .ohs2-mm-menu li:nth-child(6) { transition-delay:.36s; } body.ohs2-menu-open .ohs2-mm-social { transition-delay:.42s; } body.ohs2-menu-open .ohs2-mm-lang { transition-delay:.48s; } body.ohs2-menu-open .ohs2-mm-copy { transition-delay:.54s; } @media (prefers-reduced-motion: reduce) { .ohs2-mm-nav .ohs2-mm-menu li, .ohs2-mm-social, .ohs2-mm-lang, .ohs2-mm-copy { transition:none; transform:none; opacity:1; } } .ohs2-mm-nav { width:100%; max-width:600px; margin:0 auto; padding:0 24px; } .ohs2-mm-menu { list-style:none; margin:0; padding:0; } .ohs2-mm-menu li { margin:0; } .ohs2-mm-menu li a { display:block; font-size:var(--ohs-fs-mm, 1.5rem); font-weight:500; color:var(--e-global-color-text); text-decoration:none; text-align:center; padding:var(--ohs-space-md) 0; border-bottom:1px solid var(--e-global-color-clr_lightolive); } .ohs2-mm-menu li:last-child a { border-bottom:none; } .ohs2-mm-menu li a:hover { color:var(--e-global-color-primary); } .ohs2-mm-social { display:flex; gap:var(--ohs-space-sm); justify-content:center; } .ohs2-mm-social a { line-height:0; color:var(--e-global-color-text); } .ohs2-mm-social a:hover { color:var(--e-global-color-primary); } .ohs2-mm-lang { font-size:var(--ohs-fs-mm-lang, 1.25rem); display:flex; gap:var(--ohs-space-sm); align-items:center; justify-content:center; color:var(--e-global-color-text); } .ohs2-mm-lang a { color:var(--e-global-color-text); text-decoration:none; padding:var(--ohs-space-xs) 0; } .ohs2-mm-lang a:hover { color:var(--e-global-color-primary); } .ohs2-mm-copy { font-size:var(--e-global-typography-accent-font-size); color:var(--e-global-color-text); text-align:center; } /* ---- Responsive: <=1024 hide desktop nav/phone/lang, show hamburger ---- */ @media (max-width:1024px){ .ohs2-nav, .ohs2-phone, .ohs2-lang { display:none !important; } .ohs2-burger { display:flex; } .elementor-element-ohsrow { grid-template-columns:1fr auto; padding-left:24px !important; padding-right:24px !important; } .ohs2-logo svg { width:190px; } } @media (min-width:1025px){ .ohs2-mm-wrap, .ohs2-mm { display:none !important; } }