/* ========================================================================= ESTATIC — MEGAMENU (desktop, inline + panele „na tle") NOWY plik. Port mockupu megamenu-warmglass v4 do motywu estatic2024. System: Geist · navy #05172F · gold #B89B65 oszczędnie · PŁASKO (radius 0–2px). Zasada: desktop = inline nav + ciemne frosted panele; mobile = bez zmian (istniejący #mobile_button_burger + #noveo_mega_menu zostają jak były). Reuse danych: ACF Options `kolumny_menu` (każda kolumna => 1 pozycja top-level). ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@200;300;400;500;600&display=swap'); :root{ --mm-navy:#05172F; --mm-gold:#B89B65; --mm-gold-light:#C9AE7A; --mm-gold-deep:#7A6336; --mm-on:#fff; --mm-on-2:rgba(255,255,255,.74); --mm-on-3:rgba(255,255,255,.5); --mm-line:rgba(255,255,255,.12); --mm-fg2:#475569; --mm-fg3:#64748B; --mm-ease:cubic-bezier(.22,1,.36,1); --mm-sans:'Geist',-apple-system,'Segoe UI',sans-serif; } /* ---- domyślnie: nav schowany, burger działa (mobile / < 900px) ---- */ .primary-nav{ display:none; } .pn-panels{ display:none; } /* ========================== DESKTOP ( >= 900px ) ========================= */ @media (min-width:900px){ /* burger znika, inline nav się pojawia */ #banner_top #mobile_button_burger{ display:none !important; } #banner_top .left{ width:auto; } #banner_top .left .primary-nav{ display:flex; align-items:center; gap:2px; font-family:var(--mm-sans); } /* Logo Z LEWEJ (intuicyjniej niż wyśrodkowane): [logo][nav] ............ [social][CTA] */ #banner_top .wrapper{ justify-content:flex-start; gap:clamp(30px,3.2vw,52px); } #banner_top .center{ order:0; flex:0 0 auto; } #banner_top .left{ order:1; } #banner_top .right{ order:2; margin-left:auto; } .pn-panels{ display:block; } /* --- pozycje top-level (triggery) — typografia premium, spokojna --- */ .pn-item{ position:relative; } .pn-trigger{ font-family:var(--mm-sans); font-weight:450; font-size:14.5px; letter-spacing:.012em; color:var(--mm-navy); background:none; border:0; cursor:pointer; padding:10px 15px; display:inline-flex; align-items:center; gap:7px; position:relative; transition:color .2s var(--mm-ease); } .pn-chev{ width:7px; height:7px; border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor; transform:rotate(45deg) translateY(-1px); opacity:.5; transition:transform .25s var(--mm-ease); } .pn-trigger::after{ content:""; position:absolute; left:15px; right:15px; bottom:-26px; height:2px; background:var(--mm-gold); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--mm-ease); z-index:101; } .pn-trigger:hover{ color:var(--mm-gold-deep); } .pn-item.active .pn-trigger{ color:var(--mm-gold-deep); } .pn-item.active .pn-trigger::after{ transform:scaleX(1); } .pn-item.active .pn-chev{ transform:rotate(225deg) translateY(-1px); opacity:.9; } /* --- nad ciemnym, przezroczystym hero (front page) => biały tekst --- */ #banner_top.fixed_banner:not(.scroll) .pn-trigger{ color:#fff; } #banner_top.fixed_banner:not(.scroll) .pn-item:hover .pn-trigger, #banner_top.fixed_banner:not(.scroll) .pn-item.active .pn-trigger{ color:var(--mm-gold-light); } /* --- panele: pełna szerokość, CIEMNE frosted „na tle”, płaskie --- */ .pn-panel{ position:fixed; left:0; right:0; top:var(--pn-top,112px); z-index:95; background:rgba(6,19,37,.97); border-bottom:1px solid rgba(184,155,101,.3); box-shadow:0 30px 50px -30px rgba(0,0,0,.7); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .26s var(--mm-ease), visibility .26s; } .pn-panel.open{ opacity:1; visibility:visible; pointer-events:auto; } .pn-panel .pn-inner{ padding:30px 0 30px; } .pn-panel .pn-label{ display:block; font-family:var(--mm-sans); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--mm-gold-light); margin-bottom:18px; } /* lista linków (ACF Menu =>