/* ================= Vars (fallbacks). ACF schemes override on ================= */ :root{ --header-h: 80px; /* FIXED HEADER HEIGHT */ --header-bg-initial: transparent; /* over hero */ --header-bg-sticky: #ffffff; /* after scroll */ --link-initial: #FFF6F5; /* nav link color over hero */ --link-sticky: #1C0403; /* nav link color when sticky */ --logo-fill-init: #FFF6F5; --logo-fill-stick: #1C0403; /* Accent stays for legacy bits; schemes will override as needed */ --accent: #FF8971; --accent-contrast: #2B0E0C; --accent-hover: color-mix(in oklab, var(--accent) 86%, black); --container-max: 1440px; --shadow: 0 6px 20px rgba(0,0,0,.06); } /* Mobile drawer buttons: always brown, any scheme */ .mobile-drawer{ --btn-ghost-text: #1C0403; --btn-ghost-border: #1C0403; --btn-ghost-bg-hover: color-mix(in oklab, #1C0403 8%, white); --btn-active-bg: #1C0403; --btn-active-text: #FFF6F5; --btn-active-border: #1C0403; --btn-active-bg-hover: color-mix(in oklab, #1C0403 88%, black); --btn-focus-ring: color-mix(in oklab, #1C0403 35%, white); } /* ====== Row container (width) – keep your .p-6 for padding ====== */ .container-1440{ max-width: var(--container-max); margin: 0 auto; } /* ================= Fixed full-width header over hero ================= */ .site-header{ position: fixed !important; top: 0; left: 0; right: 0; z-index: 9999; height: var(--header-h); background: var(--header-bg-initial) !important; /* ensure transparent on load */ border-bottom: 1px solid transparent; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; } /* ===== Inner row: centered, capped at 1440, no side padding ===== */ .site-header .header-bar{ box-sizing: border-box; width: 100%; /* responsive */ max-width: 1440px; /* cap, not fixed width */ margin: 0 auto; /* center row */ height: var(--header-h); display: grid; grid-template-columns: 1fr auto 1fr; /* left | logo | right */ align-items: center; gap: 0; background: transparent !important; padding-inline: 0 !important; } /* ---- Kill Hello theme's 1140px cap on the header/footer wrappers ---- */ .page-header .entry-title, .site-footer .footer-inner, .site-footer:not(.dynamic-footer), .site-header .header-inner, .site-header:not(.dynamic-header), body:not([class*=elementor-page-]) .site-main{ max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0; } /* Groups to container edges; logo stays truly centered */ .header-left{ justify-self: start; display:flex; align-items:center; gap:20px; min-width:0; } .primary-nav{ justify-self: end; min-width:0; } .site-logo{ justify-self: center; display:inline-flex; align-items:center; } /* Logo coloring/sizing */ .site-logo svg *{ fill: var(--logo-fill-init); transition: fill .2s ease; } /* PNG fallback */ .site-logo .logo--light{ display:block; height:36px; } .site-logo .logo--dark { display:none; height:36px; } /* Keep the logo perfectly centered and never taller than the bar */ .site-logo{ height: 100%; display: grid; /* centers reliably regardless of intrinsic size */ place-items: center; } .site-logo svg, .site-logo img{ display: block; height: 80px; width: auto; vertical-align: middle; /* avoid baseline shift */ } /* ================= Nav ================= */ .menu{ list-style:none; margin:0; padding:0; display:flex; gap:32px; } .menu a{ color: var(--link-initial); text-decoration:none; transition: color .2s ease, opacity .2s ease, text-decoration-color .2s ease; font-family: var(--e-global-typography-accent-font-family), Sans-serif; font-size: 14px; font-weight: var(--e-global-typography-accent-font-weight); text-transform: var(--e-global-typography-accent-text-transform); line-height: var(--e-global-typography-accent-line-height); } .menu a:hover{ color: var(--link-initial); opacity:.85; text-decoration: underline; text-underline-offset: 4px; } /* ===================== BUTTON SYSTEM (Advisors / Conference) ===================== */ /* Tokens (schemes set these) */ :root{ --btn-active-bg: var(--accent); --btn-active-text: var(--accent-contrast); --btn-active-border: var(--accent); --btn-active-bg-hover: color-mix(in oklab, var(--accent) 88%, black); --btn-ghost-text: var(--accent); --btn-ghost-border: var(--accent); --btn-ghost-bg-hover: color-mix(in oklab, var(--accent) 8%, white); --btn-focus-ring: color-mix(in oklab, var(--accent) 45%, white); --btn-active-border-hover: var(--btn-active-border); } /* Map tokens to the two visual variants; support legacy .hk-switch classes */ .hk-switch{ -webkit-appearance: none; appearance: none; display:inline-flex; align-items:center; justify-content:center; min-width: 10ch; height: 38px; padding: 0 36px; border-radius: 0; border: 1px solid var(--btn-ghost-border); background: transparent; color: var(--btn-ghost-text); text-decoration:none; font-family: var(--e-global-typography-accent-font-family), Sans-serif; font-size: var(--e-global-typography-accent-font-size, 14px); font-weight: var(--e-global-typography-accent-font-weight, 500); text-transform: var(--e-global-typography-accent-text-transform, uppercase); line-height: var(--e-global-typography-accent-line-height, 1); transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; } /* Ghost (outline) */ .hk-switch--ghost:hover{ background: var(--btn-ghost-bg-hover); } /* Filled */ .hk-switch--active{ background: var(--btn-active-bg); color: var(--btn-active-text); border-color: var(--btn-active-border); } .hk-switch--active:hover{ background: var(--btn-active-bg-hover); border-color: var(--btn-active-border-hover); /* NEW */ } /* Focus ring */ .hk-switch:focus-visible{ outline: none; box-shadow: 0 0 0 2px var(--btn-focus-ring); } /* ================= Sticky state (added by JS) ================= */ .site-header.is-stuck{ background: var(--header-bg-sticky) !important; border-bottom-color: rgba(0,0,0,.06); box-shadow: var(--shadow); } .site-header.is-stuck .menu a{ color: var(--link-sticky); } .site-header.is-stuck .site-logo svg *{ fill: var(--logo-fill-stick); } /* PNG swap when sticky */ .site-header.is-stuck .site-logo .logo--light{ display:none; } .site-header.is-stuck .site-logo .logo--dark { display:block; } .site-header.is-stuck .nav-toggle{ color: var(--link-sticky) !important; } /* ================= Mobile ================= */ .nav-toggle{ display:none; /* hidden on desktop */ position:absolute; right: 24px; top:50%; transform: translateY(-50%); width:46px; height:34px; border:0; background:transparent; cursor:pointer; color: var(--link-initial); } .nav-toggle span{ display:block; height:2px; margin:6px 0; background: currentColor; } .mobile-drawer{ position: fixed; inset: 0 0 0 auto; width: 80%; max-width: 420px; transform: translateX(100%); transition: transform .25s ease; background: var(--header-bg-sticky); box-shadow: -10px 0 30px rgba(0,0,0,.15); z-index: 10001; /* above header */ padding: 24px; } .mobile-drawer.open{ transform: translateX(0); } .drawer-menu{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:16px; } .drawer-menu a{ color: var(--link-sticky); text-decoration:none; font-size:16px; } .drawer-buttons{ display:flex; gap:12px; } body.drawer-open::before{ content:""; position:fixed; inset:0; background: rgba(0,0,0,.5); z-index: 10000; } /* ===== Responsive header visibility ===== */ /* === MOBILE-FIRST BASELINE (<1024px) === */ /* Below 1024px: logo centered + hamburger right; hide buttons & full nav */ .header-left{ display: none !important; } .primary-nav{ display: none !important; } .nav-toggle{ display: block !important; } .site-header .header-bar{ display: flex !important; /* center the logo */ align-items: center !important; justify-content: center !important; position: relative !important; height: var(--header-h); } /* Keep logo centered; pin hamburger to right */ .site-logo{ margin: 0 auto !important; } .nav-toggle{ position: absolute !important; right: 16px; top: 50%; transform: translateY(-50%); width: 48px; height: 40px; } /* === MID RANGE (1024–1199px) === */ /* Show buttons, logo, hamburger (no full nav). Grid for layout. */ @media (min-width: 1024px) and (max-width: 1199.98px){ .header-left{ display: flex !important; } .primary-nav{ display: none !important; } .nav-toggle{ display: block !important; } .site-header .header-bar{ display: grid !important; grid-template-columns: 1fr auto 1fr !important; /* left | logo | right */ align-items: center !important; } /* Hamburger in flow on the right cell */ .nav-toggle{ position: static !important; transform: none !important; justify-self: end !important; width: 46px; height: 34px; } } /* === DESKTOP (≥1200px) === */ /* Show buttons, logo, full nav; hide hamburger; keep grid */ @media (min-width: 1200px){ .header-left{ display: flex !important; } .primary-nav{ display: flex !important; } .nav-toggle{ display: none !important; } .site-header .header-bar{ display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; } } /* Keep nav link color the same on hover in the header */ .site-header .menu a:hover, .site-header .menu a:active { color: var(--link-initial); } .site-header.is-stuck .menu a:hover, .site-header.is-stuck .menu a:active { color: var(--link-sticky); } /* Button text colors on hover */ .site-header .hk-switch--ghost:hover { color: var(--btn-ghost-text); } .site-header .hk-switch--active:hover { color: var(--btn-active-text); } /* ================= Schemes from ACF (body gets scheme-*) ================= */ /* DEFAULT (coral on dark) */ .scheme-default{ --header-bg-initial: transparent; --header-bg-sticky: #2B0E0C; --link-initial: #FFF6F5; --link-sticky: #FFF6F5; --logo-fill-init: #FF8971; --logo-fill-stick: #FF8971; /* Buttons */ --btn-active-bg: #FF8971; --btn-active-text: #2B0E0C; --btn-active-border: #FF8971; --btn-active-bg-hover: color-mix(in oklab, #FF8971 86%, black); --btn-ghost-text: #FF8971; --btn-ghost-border: #FF8971; --btn-ghost-bg-hover: color-mix(in oklab, #FF8971 8%, white); --btn-focus-ring: color-mix(in oklab, #FF8971 45%, white); } /* JADE (mint on deep green) */ .scheme-jade{ --header-bg-initial: transparent; --header-bg-sticky: #0F322E; --link-initial: #FFF6F5; --link-sticky: #FFF6F5; --logo-fill-init: #52BBAC; --logo-fill-stick: #52BBAC; /* Buttons */ --btn-active-bg: #CFE7DA; /* mint fill */ --btn-active-text: #0F322E; /* deep jade text */ --btn-active-border: #CFE7DA; --btn-active-bg-hover: color-mix(in oklab, #CFE7DA 86%, black); --btn-ghost-text: #CFE7DA; --btn-ghost-border: #CFE7DA; --btn-ghost-bg-hover: color-mix(in oklab, #CFE7DA 8%, white); --btn-focus-ring: color-mix(in oklab, #CFE7DA 45%, white); } /* WHITE (light UI) */ .scheme-white{ --header-bg-initial: transparent; --header-bg-sticky: #FFF6F5; --link-initial: #FFF6F5; --link-sticky: #1C0403; --logo-fill-init: #FFF6F5; --logo-fill-stick: #1C0403; /* Buttons */ --btn-active-bg: #FFF6F5; /* warm-white fill */ --btn-active-text: #1C0403; --btn-active-border: #FFF6F5; --btn-active-bg-hover: color-mix(in oklab, #FFF6F5 85%, #1C0403); --btn-ghost-text: #FFF6F5; --btn-ghost-border: #FFF6F5; --btn-ghost-bg-hover: color-mix(in oklab, #1C0403 8%, white); --btn-focus-ring: color-mix(in oklab, #1C0403 35%, white); } /* White scheme: make buttons brown when sticky */ .scheme-white .site-header.is-stuck{ /* Ghost (outline) becomes brown text/border */ --btn-ghost-text: #1C0403; --btn-ghost-border: #1C0403; --btn-ghost-bg-hover: color-mix(in oklab, #1C0403 8%, white); /* Filled becomes brown fill with light text */ --btn-active-bg: #1C0403; --btn-active-text: #FFF6F5; --btn-active-border: #1C0403; --btn-active-bg-hover: color-mix(in oklab, #1C0403 88%, black); /* Focus ring tuned for brown */ --btn-focus-ring: color-mix(in oklab, #1C0403 35%, white); } /* White scheme hover tweak (non-sticky only) */ .scheme-white .site-header:not(.is-stuck) .hk-switch--active:hover, .scheme-white .site-header:not(.is-stuck) .hk-switch--ghost:hover { color: #1C0403 !important; /* darker text on hover */ } /* =============================== GREEN (light UI variant) =============================== */ .scheme-green{ --header-bg-initial: transparent; --header-bg-sticky: #FFF6F5; /* light when stuck (same feel as white) */ --link-initial: #FFF6F5; /* over hero */ --link-sticky: #1C0403; /* brown when sticky */ --logo-fill-init: #C5EB9C; /* mint logo over hero */ --logo-fill-stick: #1C0403; /* brown logo when sticky */ /* Buttons (non-sticky defaults) */ --btn-active-bg: #FFF6F5; /* filled */ --btn-active-text: #577046; /* dark green text */ --btn-active-border: #FFF6F5; --btn-active-bg-hover: #C5EB9C; /* bright green hover */ --btn-active-border-hover:#C5EB9C; /* ← green border on hover */ --btn-ghost-text: #FFF6F5; /* ghost */ --btn-ghost-border: #FFF6F5; --btn-ghost-bg-hover: #C5EB9C; --btn-focus-ring: color-mix(in oklab, #577046 35%, white); } /* Match your "white scheme hover tweak" pattern (non-sticky only) */ .scheme-green .site-header:not(.is-stuck) .hk-switch--active:hover, .scheme-green .site-header:not(.is-stuck) .hk-switch--ghost:hover{ color:#577046 !important; /* darker green text on hover */ border-color: #C5EB9C !important; /* green border on hover */ } /* Ensure active button hover border uses the token everywhere */ .site-header .hk-switch--active:hover{ border-color: var(--btn-active-border-hover, var(--btn-active-border)); } /* When sticky, revert to the DEFAULT brown scheme (exactly like your white block) */ .scheme-green .site-header.is-stuck{ /* Ghost → brown */ --btn-ghost-text: #1C0403; --btn-ghost-border: #1C0403; --btn-ghost-bg-hover: color-mix(in oklab, #1C0403 8%, white); /* Filled → brown */ --btn-active-bg: #1C0403; --btn-active-text: #FFF6F5; --btn-active-border: #1C0403; --btn-active-bg-hover: color-mix(in oklab, #1C0403 88%, black); /* Focus ring matches brown */ --btn-focus-ring: color-mix(in oklab, #1C0403 35%, white); } /* =============================== PURPLE (light UI variant) =============================== */ .scheme-purple{ --header-bg-initial: transparent; --header-bg-sticky: #FFF6F5; /* light background when stuck */ --link-initial: #FFF6F5; --link-sticky: #1C0403; --logo-fill-init: #C3E3FF; --logo-fill-stick: #1C0403; /* Buttons — Active (filled) */ --btn-active-bg: #FFF6F5; /* white background */ --btn-active-text: #454E72; /* dark purple text */ --btn-active-border: #FFF6F5; --btn-active-bg-hover: #C3E3FF; /* bright purple hover bg */ --btn-active-border-hover: #C3E3FF; /* bright purple border on hover */ /* Buttons — Ghost (outline) */ --btn-ghost-text: #FFF6F5; /* white text */ --btn-ghost-border: #FFF6F5; /* white border */ --btn-ghost-bg-hover: #C3E3FF; /* bright purple hover */ --btn-focus-ring: color-mix(in oklab, #454E72 35%, white); } /* Hover tweaks (non-sticky only) */ .scheme-purple .site-header:not(.is-stuck) .hk-switch--active:hover, .scheme-purple .site-header:not(.is-stuck) .hk-switch--ghost:hover { color: #454E72 !important; /* dark purple text */ border-color: #C3E3FF !important; /* bright purple border */ } /* Ensure active button hover border token applies globally */ .site-header .hk-switch--active:hover{ border-color: var(--btn-active-border-hover, var(--btn-active-border)); } /* When sticky, revert to the default brown scheme (same as green/white) */ .scheme-purple .site-header.is-stuck{ /* Ghost → brown */ --btn-ghost-text: #1C0403; --btn-ghost-border: #1C0403; --btn-ghost-bg-hover: color-mix(in oklab, #1C0403 8%, white); /* Filled → brown */ --btn-active-bg: #1C0403; --btn-active-text: #FFF6F5; --btn-active-border: #1C0403; --btn-active-bg-hover: color-mix(in oklab, #1C0403 88%, black); /* Focus ring tuned for brown */ --btn-focus-ring: color-mix(in oklab, #1C0403 35%, white); } /* =============================== RED (light UI variant) =============================== */ .scheme-red{ --header-bg-initial: transparent; --header-bg-sticky: #FFF6F5; /* light background when stuck */ --link-initial: #FFF6F5; --link-sticky: #1C0403; --logo-fill-init: #FF8971; --logo-fill-stick: #1C0403; /* Buttons — Active (filled) */ --btn-active-bg: #FFF6F5; /* white background */ --btn-active-text: #AD2D28; /* dark red text */ --btn-active-border: #FFF6F5; --btn-active-bg-hover: #1C0403; /* dark red background */ --btn-active-border-hover:#1C0403; /* dark red border on hover */ /* Buttons — Ghost (outline) */ --btn-ghost-text: #FFF6F5; /* white text */ --btn-ghost-border: #FFF6F5; /* white border */ --btn-ghost-bg-hover: #1C0403; /* dark red background on hover */ --btn-focus-ring: color-mix(in oklab, #AD2D28 35%, white); } /* Hover tweaks (non-sticky only) */ .scheme-red .site-header:not(.is-stuck) .hk-switch--active:hover, .scheme-red .site-header:not(.is-stuck) .hk-switch--ghost:hover { color: #FFF6F5 !important; /* white text on hover */ background: #1C0403 !important; /* dark red background */ border-color: #1C0403 !important; /* dark red border */ } /* Ensure active button hover border token applies globally */ .site-header .hk-switch--active:hover{ border-color: var(--btn-active-border-hover, var(--btn-active-border)); } /* When sticky, revert to the default brown scheme (same as other variants) */ .scheme-red .site-header.is-stuck{ /* Ghost → brown */ --btn-ghost-text: #1C0403; --btn-ghost-border: #1C0403; --btn-ghost-bg-hover: color-mix(in oklab, #1C0403 8%, white); /* Filled → brown */ --btn-active-bg: #1C0403; --btn-active-text: #FFF6F5; --btn-active-border: #1C0403; --btn-active-bg-hover: color-mix(in oklab, #1C0403 88%, black); /* Focus ring tuned for brown */ --btn-focus-ring: color-mix(in oklab, #1C0403 35%, white); } /* =============================== CONFERENCE JADE (light UI variant) =============================== */ .scheme-conferencejade{ --header-bg-initial: transparent; --header-bg-sticky: #FFF6F5; /* light background when stuck */ --link-initial: #FFF6F5; --link-sticky: #1C0403; --logo-fill-init: #A2E2DA; --logo-fill-stick: #1C0403; /* Buttons — Active (filled) */ --btn-active-bg: #FFF6F5; /* white background */ --btn-active-text: #3E8A81; /* dark jade text */ --btn-active-border: #FFF6F5; --btn-active-bg-hover: #3E8A81; /* dark jade background */ --btn-active-border-hover:#3E8A81; /* dark jade border on hover */ /* Buttons — Ghost (outline) */ --btn-ghost-text: #FFF6F5; /* white text */ --btn-ghost-border: #FFF6F5; /* white border */ --btn-ghost-bg-hover: #3E8A81; /* dark jade background on hover */ --btn-focus-ring: color-mix(in oklab, #3E8A81 35%, white); } /* Hover tweaks (non-sticky only) */ .scheme-conferencejade .site-header:not(.is-stuck) .hk-switch--active:hover, .scheme-conferencejade .site-header:not(.is-stuck) .hk-switch--ghost:hover { color: #FFF6F5 !important; /* white text on hover */ background: #3E8A81 !important; /* dark jade background */ border-color: #3E8A81 !important; /* dark jade border */ } /* Ensure active button hover border token applies globally */ .site-header .hk-switch--active:hover{ border-color: var(--btn-active-border-hover, var(--btn-active-border)); } /* When sticky, revert to the default brown scheme (same as other variants) */ .scheme-conferencejade .site-header.is-stuck{ /* Ghost → brown */ --btn-ghost-text: #1C0403; --btn-ghost-border: #1C0403; --btn-ghost-bg-hover: color-mix(in oklab, #1C0403 8%, white); /* Filled → brown */ --btn-active-bg: #1C0403; --btn-active-text: #FFF6F5; --btn-active-border: #1C0403; --btn-active-bg-hover: color-mix(in oklab, #1C0403 88%, black); /* Focus ring tuned for brown */ --btn-focus-ring: color-mix(in oklab, #1C0403 35%, white); } /* ===== Ensure hero truly sits under header (no phantom white strip) ===== */ body .elementor-section:first-of-type{ margin-top:0 !important; } /* Make sure nothing else is adding margins/padding */ .header-left{ justify-self: start; margin-left: 0 !important; } .primary-nav{ justify-self: end; margin-right: 0 !important; } .menu{ margin: 0 !important; padding: 0 !important; } /* --- Anti-Overflow Patch (keep at very end) --- */ /* 0) Never allow horizontal overflow */ html, body { max-width: 100%; overflow-x: clip; } /* 'clip' fixes iOS rubber-band */ /* 1) Header + row can never exceed the viewport */ .site-header, .site-header * { box-sizing: border-box; } .site-header { inset-inline: 0; width: 100%; } .site-header .header-bar { width: 100%; max-width: 1440px; margin-inline: auto; } /* 2) Mobile drawer must not contribute to page width */ .mobile-drawer{ position: fixed; top: 0; right: 0; bottom: 0; left: auto; /* anchor to right, no left edge */ width: min(80vw, 420px); /* bound to viewport */ transform: translateX(100%); /* off-canvas without affecting layout */ will-change: transform; overflow-y: auto; } .mobile-drawer.open{ transform: translateX(0); } /* 3) Elementor “stretched” sections & angled backgrounds often overflow */ .elementor-section, .elementor-container, .elementor { overflow-x: clip; } .elementor-section.elementor-section-stretched{ width: 100% !important; left: 0 !important; right: 0 !important; } /* 4) Any 100vw element inside the page should not exceed the viewport */ *[style*="100vw"]{ max-width: 100%; } /* 5) Media cannot blow out layout */ img, svg, video{ max-width: 100%; height: auto; } /* 6) Remove any stray horizontal padding on the header row */ .site-header .header-bar.p-6{ padding-inline: 0 !important; } /* Put overlay below header */ body.drawer-open::before{ z-index: 10900 !important; /* dimmer sits under header/drawer */ } /* --- Z order: drawer above overlay & header --- */ body.drawer-open::before{ z-index: 10900 !important; pointer-events: auto; } .site-header{ z-index: 11000 !important; } .mobile-drawer{ z-index: 11001 !important; } /* --- Drawer look & layout --- */ :root{ --drawer-w: 380px; /* max width */ --drawer-bg: color-mix(in oklab, var(--header-bg-sticky) 96%, transparent); --drawer-sep: color-mix(in oklab, var(--link-sticky) 12%, transparent); --drawer-shadow: 0 24px 60px rgba(0,0,0,.35); } @media (max-width: 480px){ :root{ --drawer-w: 88vw; } } .mobile-drawer{ position: fixed !important; top: 0; right: 0; bottom: 0; left: auto; width: min(var(--drawer-w), 88vw); transform: translateX(100%); transition: transform .28s cubic-bezier(.22,.61,.36,1); display: flex; flex-direction: column; background: var(--drawer-bg); backdrop-filter: blur(8px) saturate(110%); border-left: 1px solid var(--drawer-sep); box-shadow: var(--drawer-shadow); padding: 20px 22px; overflow-y: auto; } .mobile-drawer.open{ transform: translateX(0); } /* header row inside drawer (close button only) */ .drawer-header{ display:flex; align-items:center; justify-content:flex-end; min-height: var(--header-h); margin: -20px -22px 4px; /* flush with panel edges */ padding: 0 14px; border-bottom: 1px solid var(--drawer-sep); } .drawer-close{ background:none; border:0; font-size: 28px; line-height: 1; color: #1C0403 !important; cursor:pointer; padding: 6px 8px; } /* menu list */ .drawer-menu{ list-style:none; margin: 8px 0 0; padding: 0; display:flex; flex-direction:column; } .drawer-menu a{ display:block; padding: 14px 4px; text-decoration:none; color: #1C0403 !important; text-decoration:none; transition: color .2s ease, opacity .2s ease, text-decoration-color .2s ease; font-family: var(--e-global-typography-accent-font-family), Sans-serif; font-size: 14px; font-weight: var(--e-global-typography-accent-font-weight); text-transform: var(--e-global-typography-accent-text-transform); line-height: var(--e-global-typography-accent-line-height); } .drawer-menu li + li a{ border-top: 1px solid var(--drawer-sep); } .drawer-menu a:hover{ opacity:.85; } /* buttons live at the bottom as a tidy 2-up */ .drawer-buttons{ margin-top: auto; /* push to bottom */ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 16px; border-top: 1px solid var(--drawer-sep); } .drawer-buttons .hk-switch{ width: 100%; justify-content:center; } /* keep the bar clean on mobile */ @media (max-width: 1023.98px){ .header-left{ display:none !important; } .primary-nav{ display:none !important; } .nav-toggle{ display:block !important; } .site-header .header-bar{ display:flex !important; align-items:center !important; justify-content:center !important; position:relative !important; height: var(--header-h); } .site-logo{ margin:0 auto !important; } .nav-toggle{ position:absolute !important; right:16px; top:50%; transform:translateY(-50%); width:48px; height:40px; } } /* scheme-friendly tweaks (optional – inherit your existing vars) */ .scheme-white{ --drawer-bg: color-mix(in oklab, #FFF6F5 98%, transparent); --drawer-sep: rgba(28,4,3,.12); } /* Make sure Elementor button styles don't override */ .site-header .nav-toggle{ -webkit-appearance: none; appearance: none; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; min-width: auto !important; line-height: 0 !important; color: var(--link-initial) !important; /* bars use currentColor */ display: block; /* ensure it's not treated as inline */ position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 32px; height: 40px; cursor: pointer; z-index: 11002; /* above header content */ } /* Sticky color swap */ .site-header.is-stuck .nav-toggle{ color: var(--link-sticky) !important; } /* The three bars */ .nav-toggle__bar{ display: block; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transition: transform .22s ease, opacity .22s ease; } .nav-toggle__bar + .nav-toggle__bar{ margin-top: 6px; } /* ====== Burger -> X when drawer is open ====== */ :root{ /* Dark brown for the open state (override per scheme if desired) */ --burger-open: #1C0403; } /* Ensure smooth transform */ .nav-toggle__bar{ transform-origin: 50% 50%; transition: transform .22s ease, opacity .18s ease, background-color .18s ease; } /* Color swap while open (beats sticky/light states) */ body.drawer-open .site-header .nav-toggle{ color: var(--burger-open) !important; } /* Bar morph into X */ body.drawer-open .nav-toggle__bar:nth-child(1){ transform: translateY(8px) rotate(45deg); } body.drawer-open .nav-toggle__bar:nth-child(2){ opacity: 0; } body.drawer-open .nav-toggle__bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); } /* Optional: slightly thicker bars for a nicer X on high-DPI */ @media (min-resolution: 2dppx){ .nav-toggle__bar{ height: 2.25px; } } /* (Optional) if your schemes need a different “open” color, set it here */ .scheme-default{ --burger-open: #1C0403; } /* deep brown */ .scheme-jade{ --burger-open: #FFF6F5; } /* if you prefer light on dark */ .scheme-white{ --burger-open: #1C0403; } /* brown on light UI */