/* ======================================== BURGERMENU – fælles for alle sider Linkes i på alle sider EFTER sidens egen CSS ======================================== */ /* @font-face { font-family: "Olive Display"; src: url("OliveDisplay-ExtraLight.otf") format("opentype"); font-weight: 200; font-style: normal; font-display: swap; } */ /* ======================================== BURGER-KNAP (kun synlig på mobil) ======================================== */ .burger-toggle { display: none; width: 44px; height: 44px; padding: 0; flex-direction: column; align-items: flex-end; justify-content: center; gap: 7px; border: 0; background: transparent; cursor: pointer; } .burger-line { display: block; width: 26px; height: 0; border-top: 2px solid #111118; border-radius: 2px; } .burger-line:nth-child(1) { width: 26px; } .burger-line:nth-child(2) { width: 15px; } .burger-line:nth-child(3) { width: 21px; } /* ======================================== MOBIL-MENU (skjult helt på desktop) ======================================== */ .mobile-menu { display: none; max-height: 0; overflow: hidden; width: 100%; transition: max-height 550ms cubic-bezier(0.22, 1, 0.36, 1); } .mobile-menu.is-open { max-height: 600px; } .mobile-menu-inner { position: relative; overflow: hidden; display: grid; place-items: center; padding: 0 24px 32px; } .mobile-menu-shape { grid-area: 1 / 1; z-index: 0; width: min(320px, 100%); height: auto; opacity: 0.5; pointer-events: none; } .mobile-menu-nav { grid-area: 1 / 1; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; padding: 0 0 0 24px; } .mobile-nav-link { color: #111118; font-family: "Olive Display", sans-serif; font-size: clamp(2rem, 9vw, 2.6rem); font-weight: 200; line-height: 1.4; text-decoration: none; transition: color 200ms ease; } .mobile-nav-link:hover { color: #eb36ef; } /* Aktiv side vises i pink/lilla */ .mobile-nav-link.active { color: #eb36ef; } /* ======================================== MOBIL ======================================== */ @media (max-width: 650px) { .main-nav { display: none; } .site-header { display: flex; flex-wrap: wrap; justify-content: flex-end; padding: 16px 20px 0; background-color: transparent; /* Ved lukning: vent 300ms, fade derefter ud over 250ms */ transition: background-color 250ms ease 300ms; } .site-header:has(.mobile-menu.is-open) { background-color: #f9f9f9; /* Ved åbning: fade ind med det samme */ transition: background-color 200ms ease; } .burger-toggle { display: flex; } .mobile-menu { display: block; } }