/* STRANDVEJR.DK MENU - SLIDE IND FRA HØJRE */ /* ========================================================= THEME-VARIABLER (matcher data-theme på ) ========================================================= */ html[data-theme="dark"] { --sv-menu-bg: #14283c; --sv-menu-bg-sub: rgba(0,0,0,0.22); --sv-menu-text: #ffffff; --sv-menu-border: rgba(255,255,255,0.15); --sv-menu-hover: rgba(255,255,255,0.12); --sv-menu-backdrop: rgba(0,0,0,0.45); } html[data-theme="light"] { --sv-menu-bg: #ffffff; --sv-menu-bg-sub: rgba(20,40,60,0.06); --sv-menu-text: #0b1a2b; --sv-menu-border: rgba(20,40,60,0.12); --sv-menu-hover: rgba(20,40,60,0.08); --sv-menu-backdrop: rgba(0,0,0,0.22); } /* Navbar */ #nordicnav { position: relative; z-index: 10001; } /* Navbar header - hamburger til højre */ #nordicnav .navbar-header { display: flex !important; justify-content: flex-end !important; align-items: center !important; width: 100% !important; padding: 0 !important; } #nordicnav #subname { display: none !important; } #nordicnav .navbar-toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 10px 12px !important; margin: 0 !important; background: transparent !important; border: 1px solid rgba(255,255,255,0.3) !important; border-radius: 6px !important; cursor: pointer !important; min-width: 44px !important; min-height: 44px !important; } /* ========================================================= MENU PANEL - SLIDE IND FRA HØJRE ========================================================= */ #nordicnav .navbar-collapse { position: fixed !important; display: block !important; top: 0 !important; right: -350px !important; /* START: skjult til højre */ bottom: 0 !important; width: 320px !important; max-width: 85vw !important; height: 100vh !important; background: var(--sv-menu-bg) !important; background-color: var(--sv-menu-bg) !important; box-shadow: -2px 0 20px rgba(0,0,0,0.5) !important; overflow-y: auto !important; transition: right 0.3s ease !important; z-index: 10000 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } /* ÅBEN: slide ind til højre kant */ #nordicnav .navbar-collapse.in { right: 0 !important; } /* Menu header (X-knap og titel) */ .navbar-collapse-header { position: sticky !important; top: 0 !important; background: var(--sv-menu-bg) !important; background-color: var(--sv-menu-bg) !important; padding: 16px 20px !important; border-bottom: 1px solid var(--sv-menu-border) !important; display: flex !important; justify-content: space-between !important; align-items: center !important; z-index: 10 !important; } .navbar-collapse-title { color: var(--sv-menu-text) !important; font-size: 16px !important; font-weight: 500 !important; } .navbar-close { background: var(--sv-menu-hover) !important; border: 1px solid var(--sv-menu-border) !important; border-radius: 6px !important; width: 36px !important; height: 36px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--sv-menu-text) !important; cursor: pointer !important; font-size: 18px !important; } /* Menu items */ #nordicnav .navbar-nav { display: block !important; visibility: visible !important; opacity: 1 !important; float: none !important; margin: 0 !important; padding: 0 !important; width: 100% !important; list-style: none !important; } #nordicnav .navbar-nav > li { display: block !important; visibility: visible !important; opacity: 1 !important; float: none !important; width: 100% !important; border-bottom: 1px solid var(--sv-menu-border) !important; margin: 0 !important; padding: 0 !important; } #nordicnav .navbar-nav > li.vis-touch { display: none !important; } /* Links */ #nordicnav .navbar-nav > li > a { display: flex !important; visibility: visible !important; opacity: 1 !important; align-items: center !important; justify-content: space-between !important; padding: 14px 20px !important; color: var(--sv-menu-text) !important; background: transparent !important; text-decoration: none !important; font-size: 15px !important; font-weight: 400 !important; transition: all 0.2s !important; } #nordicnav .navbar-nav > li > a:hover { background: var(--sv-menu-hover) !important; padding-left: 24px !important; } /* Dropdown caret (pil) */ #nordicnav .dropdown .caret { display: inline-block !important; margin-left: auto !important; border: none !important; width: 0 !important; height: 0 !important; border-left: 5px solid transparent !important; border-right: 5px solid transparent !important; border-top: 5px solid var(--sv-menu-text) !important; transition: transform 0.2s !important; } #nordicnav .dropdown.open .caret { transform: rotate(180deg) !important; } /* Dropdown menu (undermenu) */ #nordicnav .dropdown-menu { position: static !important; float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: var(--sv-menu-bg-sub) !important; display: none !important; max-height: 0 !important; overflow: hidden !important; transition: max-height 0.3s ease !important; } #nordicnav .dropdown.open > .dropdown-menu { display: block !important; max-height: 1000px !important; padding: 8px 0 !important; } /* Dropdown items */ #nordicnav .dropdown-menu > li { display: block !important; visibility: visible !important; opacity: 1 !important; border: 0 !important; } #nordicnav .dropdown-menu > li > a { display: block !important; padding: 12px 20px 12px 40px !important; font-size: 14px !important; color: var(--sv-menu-text) !important; background: transparent !important; text-decoration: none !important; transition: all 0.2s !important; } #nordicnav .dropdown-menu > li > a:hover { background: var(--sv-menu-hover) !important; padding-left: 44px !important; } /* ========================================================= BACKDROP (mørk baggrund bag menuen) ========================================================= */ #sv-menu-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--sv-menu-backdrop); z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } #sv-menu-backdrop.is-active { opacity: 1; pointer-events: auto; } html.sv-menu-open body { overflow: hidden !important; } /* ========================================================= DESKTOP: dropdown under hamburger (ikke fullscreen) ========================================================= */ @media (min-width: 1045px) { #nordicnav .navbar-collapse { position: absolute !important; top: 100% !important; right: 15px !important; left: auto !important; bottom: auto !important; height: auto !important; max-height: none !important; overflow: visible !important; width: 360px !important; max-width: 520px !important; transition: none !important; box-shadow: 0 12px 30px rgba(0,0,0,0.35) !important; /* Skjul når lukket */ display: none !important; } #nordicnav .navbar-collapse.in { display: block !important; right: 15px !important; } .navbar-collapse-header { position: relative !important; } } /* ========================================================= RESPONSIV - bredde tilpasning ========================================================= */ @media (max-width: 480px) { #nordicnav .navbar-collapse { width: 85vw !important; max-width: 300px !important; } } @media (min-width: 481px) and (max-width: 1044px) { #nordicnav .navbar-collapse { width: 320px !important; } } /* ========================================================= DEAKTIVER NORDIC.CSS HOVER-LOGIK ========================================================= */ /* Stop nordic.css hover fra at vise dropdown-menu */ #nordicnav .dropdown:hover > .dropdown-menu, #nordicnav .dropdown:hover > ul.dropdown-menu { visibility: hidden !important; opacity: 0 !important; display: none !important; } /* Dropdown vises KUN når .open er sat */ #nordicnav .dropdown.open > .dropdown-menu, #nordicnav .dropdown.open > ul.dropdown-menu { visibility: visible !important; opacity: 1 !important; display: block !important; } /* Grundtilstand: skjult */ #nordicnav .dropdown > .dropdown-menu, #nordicnav .dropdown > ul.dropdown-menu { visibility: hidden !important; opacity: 0 !important; display: none !important; transition: none !important; -webkit-transition: none !important; -moz-transition: none !important; } /* Ekstra sikkerhed i desktop media query */ @media (min-width: 992px) { #nordicnav .dropdown:hover > .dropdown-menu, #nordicnav .dropdown:hover > ul.dropdown-menu { visibility: hidden !important; opacity: 0 !important; display: none !important; } #nordicnav .dropdown.open > .dropdown-menu, #nordicnav .dropdown.open > ul.dropdown-menu { visibility: visible !important; opacity: 1 !important; display: block !important; } } /* Dark theme baggrund */ [data-theme="dark"] #nordicnav .navbar-collapse, [data-theme="dark"] .navbar-collapse-header { background: #0a0e14 !important; background-color: #0a0e14 !important; } /* Print: skjul menu */ @media print { #nordicnav, .navbar-toggle, #sv-menu-backdrop { display: none !important; } } /* ========================================================= HAMBURGER ALIGNMENT MED CONTAINER - HØJRE SIDE Sikrer hamburger flugter med indholdscontainer på alle skærme ========================================================= */ /* Container har typisk 15px padding på små skærme */ #nordicnav .container { padding-left: 15px !important; padding-right: 15px !important; } #nordicnav .navbar-header { padding-left: 0 !important; padding-right: 0 !important; } #nordicnav .navbar-toggle { margin-left: auto !important; margin-right: 0 !important; } /* Større skærme: container får mere padding */ @media (min-width: 768px) { #nordicnav .container { padding-left: 15px !important; padding-right: 15px !important; } } @media (min-width: 992px) { #nordicnav .container { padding-left: 15px !important; padding-right: 15px !important; } } @media (min-width: 1200px) { #nordicnav .container { padding-left: 15px !important; padding-right: 15px !important; } } /* ========================================================= CARET (PIL) - STØRRE KLIKBART OMRÅDE ========================================================= */ /* Gør caret nemmere at klikke på - især mobil */ #nordicnav .dropdown .caret { position: relative; padding: 8px 12px !important; margin-right: -12px !important; cursor: pointer; } /* Større hit-area på mobil */ @media (max-width: 768px) { #nordicnav .dropdown .caret { padding: 10px 15px !important; margin-right: -15px !important; } }