/* ============================================================= MEGA MENU — styling af selve menuen (paneler & dropdowns) ============================================================= */ /* ============================================================= MEGA MENU — "takeover": clip-path reveal + baggrundsplade ------------------------------------------------------------- Styres af menu-takeover.js (klasser: menu-is-active / mm-switching på .header, dropdown-active / mm-nearest på .e-n-menu-item). Panelet rulles ud/ind bag en hvid plade — ingen z-index-artefakt ved lukning. Testet live. Kun desktop (mobil = mobilmenu.js). REV. 2 — PERFORMANCE ------------------------------------------------------------- * will-change: opacity er FLYTTET fra #menu-page-overlay til #menu-page-overlay.is-visible. Før holdt browseren et compositor-lag på 100% x 100vh i GPU-hukommelse HELE TIDEN, også når menuen var lukket. Det kan presse en autoplay-video bag headeren ud af den hurtige afspilningssti, især på mobil. Nu oprettes laget kun mens overlayen faktisk animerer. * will-change: height på .header::after er FJERNET helt. height kan ikke komposites på GPU'en, så hint'et gjorde ingen nytte — det reserverede bare et lag uden gevinst. * --header-height sættes nu på :root af menu-takeover.js (før: på .header). #menu-page-overlay er et barn af og kunne derfor aldrig arve variablen fra headeren — den faldt altid tilbage til 0px. var() nedenfor er uændret; den slår nu bare op i :root og virker. ============================================================= */ /* Side-overlay (mørk baggrund) — diven oprettes af menu-takeover.js VIGTIGT: z-index skal ligge UNDER headerens (Elementor sticky = 99), ellers males den hvide plade + panelerne nedtonet oven på overlayen. (På referencens side havde headeren en højere z-index; her er den 99.) */ body:not(.elementor-editor-active) #menu-page-overlay { position: fixed; top: var(--header-height, 0px); left: 0; width: 100%; height: calc(100vh - var(--header-height, 0px)); background: rgba(0, 0, 0, 0.5); z-index: 90; opacity: 0; pointer-events: none; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); } body:not(.elementor-editor-active) #menu-page-overlay.is-visible { opacity: 1; pointer-events: auto; /* Kun mens overlayen er synlig — se rev. 2-noten ovenfor. */ will-change: opacity; } @media (min-width: 1025px) { /* Sikkerhed: løft headeren over overlayen når menuen er åben (i tilfælde af at header-z-index afviger fra 99 på en side) */ body:not(.elementor-editor-active) .header.menu-is-active { z-index: 999 !important; } /* Header-indhold over pladen */ body:not(.elementor-editor-active) .header:not(.elementor-sticky__spacer) > .e-con-inner { position: relative; z-index: 3; } /* Hvid baggrundsplade — ÉN sammenhængende flade der glider blødt i højden. Panelerne er gennemsigtige og ligger ovenpå, så ved skift mellem punkter er der ingen hvid "wipe" — kun pladen der resizer og indholdet der krydsfader. Pladen starter ved headerens TOP (top:0) og daekker BAADE header- baren og dropdownen som ÉN ubrudt hvid flade. Derfor: - hele pladen aabner/lukker som ét stykke (samme animation som foer), - der er INGEN "søm" mellem header og dropdown (intet møde-punkt), - ingen box-shadow-hack er noedvendig. */ body:not(.elementor-editor-active) .header::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 0; background: #fff; z-index: 1; border-radius: 0 0 16px 16px; pointer-events: none; transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1); } body:not(.elementor-editor-active) .header.menu-is-active::after { /* Fuld hoejde: fra headerens top til dropdownens bund. */ height: var(--menu-dropdown-height); /* Blød, KUN nedadgaaende skygge (negativ spread) — kaster intet opad, saa der aldrig kan opstaa en kant/søm nogen steder. */ box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.12); } /* Panelerne — placeres uniformt lige UNDER headeren (top:100% af nav.e-n-menu, som fylder headerens højde og følger den fikserede header ved scroll), i fuld bredde via Elementors stretch. Så ligger de oven på hinanden samme sted (skift kan krydsfade) og under headeren — ikke i toppen af siden. Gennemsigtige: den hvide baggrund kommer fra ::after-pladen ovenfor. */ body:not(.elementor-editor-active) .header:not(.elementor-sticky__spacer) .e-n-menu-content { position: absolute !important; top: 100% !important; left: var(--stretch-left, 0) !important; width: var(--stretch-width, 100%) !important; background-color: transparent !important; border: none !important; box-shadow: none !important; /* SYNC MED PLADEN: panelet ligger med top ved headerens underkant (top:100% = 80px), mens pladen (::after) starter ved headerens TOP (y=0). For at panelets afsloerede UNDERKANT altid rammer samme y-position som pladens underkant (= --menu-dropdown-height * e), klippes bunden med selve dropdown-hoejden i PX (ikke procent): synlig underkant (viewport) = 80 + (panelH - inset) = 80 + ((D-80) - D(1-e)) = D*e hvilket er praecis pladens underkant. Derfor ingen "understeg". Fallback 100% bruges kun i hviletilstand (var ikke sat endnu). */ clip-path: inset(0 0 var(--menu-dropdown-height, 100%) 0); pointer-events: none; transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; } body:not(.elementor-editor-active) .header:not(.elementor-sticky__spacer) .e-n-menu-item.dropdown-active .e-n-menu-content { clip-path: inset(0 0 0px 0); pointer-events: auto; } /* Ved skift mellem punkter: hold alle paneler afsløret (clip-path låst åben), så kun indholdet krydsfader og pladen resizer — ingen clip-"wipe". */ body:not(.elementor-editor-active) .header.mm-switching:not(.elementor-sticky__spacer) .e-n-menu-content { clip-path: inset(0 0 0px 0) !important; } /* Neutralisér Elementors egen .e-con-animation */ body:not(.elementor-editor-active) .header:not(.elementor-sticky__spacer) .e-n-menu-content > .e-con { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; background: transparent !important; background-color: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } /* Tving indhold synligt (override Elementors display:none) */ body:not(.elementor-editor-active) .header:not(.elementor-sticky__spacer) .e-n-menu-content .e-con, body:not(.elementor-editor-active) .header:not(.elementor-sticky__spacer) .e-n-menu-content .e-con-inner { display: flex !important; } /* Indhold fader ind (første åbning) */ body:not(.elementor-editor-active) .header:not(.elementor-sticky__spacer) .e-n-menu-content .e-con-inner { opacity: 0; transition: opacity 0.2s ease-in-out; } body:not(.elementor-editor-active) .header:not(.elementor-sticky__spacer) .e-n-menu-item.dropdown-active .e-n-menu-content .e-con-inner { opacity: 1; transition: opacity 0.25s ease-in-out 0.25s; will-change: opacity; } /* Skift mellem punkter: hurtigere sekventiel fade */ body:not(.elementor-editor-active) .header.mm-switching:not(.elementor-sticky__spacer) .e-n-menu-content .e-con-inner { transition: opacity 0.2s ease-in-out !important; } body:not(.elementor-editor-active) .header.mm-switching:not(.elementor-sticky__spacer) .e-n-menu-item.dropdown-active .e-n-menu-content .e-con-inner { transition: opacity 0.12s ease-in-out 0.2s !important; } } /* Ensartet cursor i hele menuen (undgår blink når musen krydser elementer) */ body:not(.elementor-editor-active) .e-n-menu-heading, body:not(.elementor-editor-active) .e-n-menu-item, body:not(.elementor-editor-active) .e-n-menu-title, body:not(.elementor-editor-active) .e-n-menu-title-container, body:not(.elementor-editor-active) .e-n-menu-title-text, body:not(.elementor-editor-active) .e-n-menu-dropdown-icon { cursor: pointer !important; } @media (prefers-reduced-motion: reduce) { body:not(.elementor-editor-active) .header, body:not(.elementor-editor-active) .header::after, body:not(.elementor-editor-active) .header .e-n-menu-content, body:not(.elementor-editor-active) .header .e-n-menu-content .e-con-inner, body:not(.elementor-editor-active) #menu-page-overlay { transition: none !important; } } /* === Hover-farve på mega-menu punkter === */ .mega-box .menu-header .elementor-heading-title, .mega-box5 .menu-header .elementor-icon-list-text { transition: color 0.3s ease; } .mega-box:hover .menu-header .elementor-heading-title, .mega-box5:hover .menu-header .elementor-icon-list-text { color: #0032FF; } /* === Titel-layout === */ .e-n-menu-title { justify-content: space-between; } /* ============================================================= TABLET & MOBIL — dropdown-styling ============================================================= */ @media (max-width: 1024px) { .e-n-menu-wrapper .e-n-menu-heading .e-n-menu-item .e-n-menu-title { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; } span.e-n-menu-title-text { font-weight: 600 !important; } .e-n-menu-wrapper .e-n-menu-heading .e-n-menu-item .e-n-menu-title .e-n-menu-dropdown-icon { margin-left: auto !important; } .e-n-menu-dropdown-icon svg, .e-n-menu-dropdown-icon i, .e-n-menu-dropdown-icon .elementor-screen-only { display: none !important; } .e-n-menu-dropdown-icon .e-n-menu-dropdown-icon-opened, .e-n-menu-dropdown-icon .e-n-menu-dropdown-icon-closed { display: none !important; } .e-n-menu-dropdown-icon[aria-expanded="false"] .e-n-menu-dropdown-icon-closed { display: inline-flex !important; padding: 3px !important; background-color: #f2f2f2 !important; border-radius: 100px; align-items: center !important; justify-content: center !important; } .e-n-menu-dropdown-icon[aria-expanded="true"] .e-n-menu-dropdown-icon-opened { display: inline-flex !important; padding: 3px !important; background-color: #f2f2f2 !important; border-radius: 100px; align-items: center !important; justify-content: center !important; } .e-n-menu-dropdown-icon-closed::after, .e-n-menu-dropdown-icon-opened::after { content: '' !important; display: inline-block !important; width: 20px !important; height: 20px !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; background-image: url('/wp-content/uploads/2025/06/down.svg') !important; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; } .e-n-menu-dropdown-icon-closed::after { transform: rotate(0deg) !important; } .e-n-menu-dropdown-icon-opened::after { transform: rotate(90deg) !important; } }