:root { /* --- DIMENSIONS & COLORS --- */ --header-height: 100px; --beige-50: #faf8f5; --beige-100: #f0ebe3; --beige-200: #e5ddd0; --beige-300: #d4c9b5; --beige-400: #b8a689; --neutral-900: #1a1a1a; --neutral-700: #404040; --neutral-600: #666666; --neutral-500: #888888; --clr-text-primary: #1a1a1a; --clr-primary-500: #b8a689; --clr-primary-600: #a39175; --clr-neutral-100: #faf8f5; --clr-neutral-300: #e5ddd0; --clr-white: #ffffff; --fs-nav: 14px; --fs-normal: 16px; --fs-sm: 14px; --lh-normal: 1.5; --lh-none: 1; --size-1: 0.25rem; --size-2: 0.5rem; --size-3: 0.75rem; --size-4: 1rem; --radius-md: 4px; --ls-wide: 0.1em; --ls-normal: 0; --fw-semibold: 600; } /* ========================================= 1. THEME STYLES ========================================= */ .btn { display: inline-block; padding: var(--size-2) var(--size-4); font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-normal); line-height: var(--lh-normal); letter-spacing: var(--ls-wide); text-align: center; text-decoration: none; border: 1px solid; border-radius: var(--radius-md); transition: background-color 0.3s ease, color 0.3s ease; min-width: 150px; } @media(width >=768px) { .btn { min-width: 260px; } } .btn.btn--neutral { background-color: transparent; color: var(--clr-text-primary); border-color: var(--clr-primary-500); } .btn.btn--neutral:hover { background-color: var(--clr-neutral-300); } .btn.btn--primary { border-color: var(--clr-primary-500); background-color: var(--clr-primary-500); } .btn.btn--primary:hover { background-color: var(--clr-primary-600); } @media (max-width: 981px) { .btn { font-size: var(--fs-sm); padding: var(--size-2) var(--size-3); } } @media(width <=768px) { .custom-logo { width: 50px; height: 50px; } .site-header { padding-block: 8px; } } /* Footer */ .footer { background-color: var(--clr-neutral-100); } .footer * { text-align: center; } .footer__group { width: fit-content; margin: 0 auto; } .footer__heading { font-weight: var(--fw-semibold); } .footer ul { list-style: none; padding: 0; } .footer ul li { line-height: var(--lh-normal); } .footer ul li a { text-decoration: none; font-size: var(--fs-sm); line-height: var(--lh-normal); letter-spacing: var(--ls-normal); color: var(--neutral-600); } .footer__contact li a { color: var(--clr-primary-500); } .footer__stars { color: var(--clr-primary-500); } .rating-stars { width: 100px; display: inline-block; } .footer__ctas a { font-size: var(--fs-sm); line-height: var(--lh-none); } .footer__rating-text p:first-child { margin-bottom: var(--size-1); } .footer__bottom { align-items: flex-end; } /* ========================================= 2. STICKY HEADER & FIXED SIDEBAR ========================================= */ .site-header { z-index: 4; } /* Sticky header: fixed to top, slides in/out based on scroll direction. The header uses `transform: translateY(...)` for the slide animation, which would normally make it the containing block for any position:fixed descendant (and shrink the mobile menu to the header's tiny bounds). That is handled in JS by portal-reparenting .mobile-menu, .mobile-menu-overlay, and .mobile-search to on init — so they sit outside the header's containing block and anchor to the viewport instead. */ .site-header.is-sticky { position: fixed; top: 0; left: 0; width: 100%; z-index: 10000; background-color: var(--clr-white, #ffffff); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .site-header.is-sticky.header-hidden { transform: translateY(-100%); } .site-header.is-sticky.header-visible { transform: translateY(0); box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08); } /* Placeholder to prevent content jump when header becomes fixed */ .header-placeholder { display: none; } .header-placeholder.active { display: block; } /* Fixed sidebar: always visible, 45px from left edge, no shadow */ .fixed-sidebar { left: 45px !important; box-shadow: none !important; } .fixed-sidebar * { box-shadow: none !important; } @media (max-width: 1179px) { body.mega-menu-open .fixed-sidebar, body.mega-menu-open .fixed-sidebar-right { z-index: 0 !important; } .fixed-sidebar__mobile-cta { transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); background-color: #ffffff; padding: 10px; border-radius: 12px; } .fixed-sidebar__mobile-cta.cta-hidden { transform: translateY(150%) !important; } .fixed-sidebar__chat { transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .fixed-sidebar__chat.chat-shifted { transform: translateY(var(--chat-shift, 0px)) !important; } } /* Scroll-up button & chat: 45px from right edge, no shadow */ .scroll-to-top, #scroll-to-top, #scrollToTopBtn, .back-to-top, .scrolltop { right: 45px !important; } #scrollToTopBtn { width: 35px !important; height: 35px !important; } .chat-button, .chat-widget, [class*="chat-btn"], [class*="whatsapp-btn"] { right: 45px !important; box-shadow: none !important; } /* ========================================= 3. MEGA MENU STYLES ========================================= */ /* --- WRAPPER --- */ .lucerne-menu-wrapper { flex-grow: 1; display: flex; justify-content: flex-end; align-items: center; font-family: var(--font-body); } .desktop-header-layout { display: none; flex-direction: column; width: 100%; } @media (min-width: 1180px) { /* 12-column grid — override theme's flex-group */ .site-header .flex-group, .site-header .flex-group[data-justify] { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 16px; padding-inline: clamp(20px, 7.3vw, 140px); box-sizing: border-box; max-width: 1920px; width: 100%; margin-inline: auto; align-items: center; justify-content: unset; flex-wrap: unset; gap: 16px; } .site-header .site-branding { grid-column: 1 / 3; } .site-header .site-branding .custom-logo { width: auto; height: 70px; object-fit: contain; } .lucerne-menu-wrapper { grid-column: 3 / -1; } .desktop-header-layout { display: flex; } .mobile-menu, .mobile-menu-overlay, .mobile-menu-btn { display: none !important; } } /* --- TOP BAR --- */ .lucerne-top-bar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; } .top-bar-left { display: flex; align-items: center; gap: 15px; } .cta-btn { display: flex; align-items: center; min-height: 27px; gap: 8px; background-color: #BAAE92; color: var(--neutral-900); padding: 3px 18px; border-radius: 9px; text-decoration: none; font: normal normal 600 14px/18px Montserrat; text-transform: initial; letter-spacing: 0; transition: all 0.2s ease; } .cta-btn:hover { background-color: #a89b7e; color: var(--neutral-900); } .top-bar-right { display: flex; align-items: center; gap: clamp(20px, 6vw, 120px); } .contact-icons, .user-actions { display: flex; gap: 15px; align-items: center; } /* --- HEADER SEARCH (expanding input) --- */ .header-search { position: relative; display: flex; align-items: center; } .header-search__toggle { background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; color: var(--beige-400); transition: color 0.2s; } .header-search__toggle:hover { color: var(--neutral-900); } .header-search__form { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; width: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease; background: #fff; border-radius: 25px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); border: 1px solid transparent; } .header-search.is-open .header-search__form { width: 300px; opacity: 1; pointer-events: auto; border-color: var(--beige-400, #BAAE92); } .header-search__input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; padding: 8px 14px; font-size: 14px; font-family: var(--font-body, sans-serif); color: var(--neutral-900, #1a1a1a); } .header-search__input::placeholder { color: var(--clr-neutral-400, #999); } .header-search__submit { flex-shrink: 0; background: none; border: none; padding: 6px 10px; cursor: pointer; display: flex; align-items: center; color: var(--beige-400, #BAAE92); transition: color 0.2s; } .header-search__submit:hover { color: var(--neutral-900, #1a1a1a); } /* Hide the toggle icon when search is open */ .header-search.is-open .header-search__toggle { opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .top-bar-right a { color: var(--beige-400); transition: color 0.2s; display: flex; align-items: center; text-decoration: none; } .top-bar-right a:hover { color: var(--neutral-900); } .top-bar-right svg { width: 25px; height: 25px; } /* --- NAV BAR --- */ .lucerne-nav-bar { display: flex; justify-content: space-between; align-items: center; padding-top: 5px; } .desktop-nav { display: flex; gap: clamp(15px, 2.5vw, 50px); align-items: center; } .nav-item { background: none; border: none; color: var(--neutral-700); text-decoration: none; text-transform: uppercase; font-weight: 500; cursor: pointer; padding: 10px 0 0px 0; letter-spacing: 1px; position: relative; display: flex; align-items: center; gap: 5px; transition: color 0.25s ease; font: normal normal 500 var(--fs-normal)/var(--lh-normal) var(--font-heading); } .nav-item:hover, .nav-item.active { color: var(--beige-400); font-weight: 600; } /* Triangle Indicator - only on items with mega menu (data-menu) */ .nav-item[data-menu]::after { content: ''; position: absolute; bottom: -120%; z-index: 9999999; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 15px solid #ffffff; opacity: 0; transition: opacity 0.2s ease; filter: drop-shadow(0 6px 3px rgba(0, 0, 0, 0.05)); } .nav-item::before { content: ""; position: absolute; bottom: 0px; left: 0; width: 0; height: 2px; background-color: var(--beige-400); transition: width 0.3s ease; } .nav-item:hover::before, .nav-item.active::before { width: 100%; } .nav-item[data-menu]:hover::after, .nav-item[data-menu].active::after { opacity: 1; } .secondary-nav .nav-item { color: var(--neutral-900); } .secondary-nav .nav-item:hover, .secondary-nav .nav-item.active { color: var(--beige-400); } /* Current-page highlighting (independent of hover/open .active) */ .nav-item.is-current { color: var(--beige-400); font-weight: 600; } .nav-item.is-current::before { width: 100%; } .secondary-nav .nav-item.is-current { color: var(--beige-400); } .menu-link.is-current { color: var(--beige-400); background-color: transparent; } .menu-link.is-current { min-width: auto; } /* Section divider line — gold, premium feature, toggled per menu item. Width 100% of the .menu-list which itself is sized to its content, so the divider matches the width of the longest item in the column. */ .menu-divider { list-style: none; height: 1px; background-color: #BAAE92 !important; margin: 8px 0; padding: 0; border: none; width: 100%; align-self: stretch; } /* The first divider inside a column needs to be absolutely positioned so it doesn't push the column's first content item down (which would misalign columns visually). It sits over the small top padding instead. */ .menu-column .menu-list .menu-divider:first-child, .level-3-container .menu-list .menu-divider:first-child { position: absolute; left: 0; top: 0; width: 100%; margin: 0; } .menu-column .menu-list, .level-3-container .menu-list { position: relative; } .mobile-menu-divider { margin: 12px 20px; } .menu-link.is-current::after { width: 100%; } .mobile-nav-item.is-current { color: #333333; } /* --- MEGA MENU BASE --- */ .mega-menu-container { position: static; } /* Add this to your CSS */ .mega-menu.no-transition { transition: none !important; max-height: 0 !important; opacity: 0 !important; } /* Header needs to be above mega menu for the "behind header" effect */ .desktop-header-layout { position: relative; z-index: 10001; background-color: inherit; } .lucerne-nav-bar { position: relative; z-index: 10001; } .mega-menu { position: absolute; top: 100%; left: 0; width: 100%; background-color: rgba(255, 255, 255, 0.90); z-index: 9999; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05); border: none !important; outline: none !important; border-top: none !important; /* FIX: Replaced clip-path with max-height to avoid gap artifact */ max-height: 0; overflow: hidden; opacity: 1; visibility: visible; transition: max-height 0.65s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } /* Ensure no colored borders from external styles */ .mega-menu, .mega-menu-content { border-top-color: transparent !important; } /* Ensure consistent background throughout mega menu */ .mega-menu * { background-color: transparent; } /* Invisible buffer zone to bridge nav item and mega menu */ .mega-menu::before { content: ''; position: absolute; top: -20px; left: 0; width: 100%; height: 20px; background: transparent; border: none !important; } .mega-menu.active { max-height: 700px; pointer-events: auto; } /* DEFAULT CONTENT - Primary menus */ .mega-menu-content { max-width: none; margin: 0; padding: 40px 24px; box-sizing: border-box; width: 100%; background: transparent; /* padding-left is set by JS to align with BRUST */ } /* --- SECONDARY MEGA MENU FIX (JS ALIGN) --- */ .secondary-mega-menu .mega-menu-content { max-width: none !important; width: 100%; margin: 0; padding-top: 30px; padding-bottom: 30px; padding-right: 20px; /* padding-left added via JS to align with KOSTEN */ min-height: auto; display: block; background: transparent; } .secondary-mega-menu .menu-sections-wrapper { display: inline-block; /* Takes only needed width */ width: auto; min-width: 250px; } /* Hide header for secondary */ .secondary-mega-menu .menu-section-header { display: none; } /* --- COMMON MENU STYLES (PRIMARY) --- */ .menu-section-header { display: flex; align-items: center; gap: 15px; text-decoration: none; outline: none; border: none; padding-bottom: 20px; } .menu-section-header:hover .menu-section-title { color: var(--beige-400); } .menu-section-header:hover .section-icon img { opacity: 0.75; } .section-icon img { padding: 10px; object-fit: contain; transition: opacity 0.2s ease; } .menu-section-title { font: normal normal 500 16px/22px Open Sans; color: var(--neutral-900); text-transform: capitalize; margin: 0; transition: color 0.2s ease; &:focus-visible { outline: none; } } .menu-sections-wrapper { display: flex; align-items: flex-start; gap: 20px; width: 100%; } .menu-column { flex: 0 1 33.33%; min-width: 0; } .menu-column.col-level-3-wrapper { flex: 0 1 20%; } .menu-list { list-style: none; padding: 0; margin: 0; line-height: 1; } /* High-specificity override to beat the theme's `column-count` rule on `.mega-menu-content:not(:has(.has-submenu)) .col-level-2 > .menu-list:has(> li:nth-child(18))`. Force a single vertical column. */ .lucerne-menu-wrapper .mega-menu-container .mega-menu .mega-menu-content .col-level-2 > .menu-list, .lucerne-menu-wrapper .mega-menu-container .mega-menu .mega-menu-content .col-level-3-wrapper > .menu-list, .lucerne-menu-wrapper .mega-menu-container .mega-menu .mega-menu-content .col-level-4-wrapper > .menu-list { column-count: 1 !important; columns: 1 !important; column-width: auto !important; width: fit-content !important; max-width: 100% !important; } /* Vertical scroll on the COLUMN itself (not the inner list) so the scrollbar sits at the column's edge and is reliably visible. The cap matches the mega-menu's usable height (700px max-height − ~80px padding) so the scrollbar only appears when the list is genuinely too tall to fit. */ .lucerne-menu-wrapper .mega-menu-container .mega-menu .mega-menu-content .menu-column.col-level-2, .lucerne-menu-wrapper .mega-menu-container .mega-menu .mega-menu-content .menu-column.col-level-3-wrapper, .lucerne-menu-wrapper .mega-menu-container .mega-menu .mega-menu-content .menu-column.col-level-4-wrapper { max-height: 620px !important; overflow-y: auto !important; overflow-x: hidden !important; scrollbar-width: auto; scrollbar-color: var(--beige-400) var(--beige-100); } .lucerne-menu-wrapper .mega-menu-container .mega-menu .menu-column::-webkit-scrollbar { width: 8px; } .lucerne-menu-wrapper .mega-menu-container .mega-menu .menu-column::-webkit-scrollbar-thumb { background: var(--beige-400); border-radius: 4px; } .lucerne-menu-wrapper .mega-menu-container .mega-menu .menu-column::-webkit-scrollbar-track { background: var(--beige-100); border-radius: 4px; } .menu-link { display: flex; align-items: center; gap: 8px; padding: 10px 0px; color: var(--neutral-700); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 16px; font-weight: 500; line-height: 22px; transition: color 0.2s; background: none; border: none; width: fit-content; min-width: 100%; text-align: left; cursor: pointer; position: relative; white-space: nowrap; } /* Arrow next to text by default, moves to end on hover/active */ .menu-link.has-submenu { justify-content: flex-start; } .menu-link.has-submenu svg { transition: margin-left 0.25s ease; } .menu-link.has-submenu.active svg { margin-left: auto; } .menu-link::after { content: ""; position: absolute; bottom: 6px; left: 0; width: 0; height: 1px; background-color: var(--beige-400); transition: width 0.3s ease; } .menu-link:hover { color: var(--beige-400); background-color: transparent; } .menu-link.active { color: var(--beige-400); background-color: transparent; } /* Underline only on active (click), not on hover */ .menu-link.active::after { width: 100%; } /* Level 3 column - smaller font + tighter spacing */ .col-level-3-wrapper .menu-link { font-size: 14px; line-height: 20px; padding: 7px 0; } /* Level 4 column - even smaller + tighter spacing */ .col-level-4-wrapper .menu-link { font-size: 14px; line-height: 20px; padding: 6px 0; } /* "Zur Übersicht" link inside L3/L4 sub-containers */ .submenu-overview-link { display: flex; align-items: center; gap: 6px; padding: 8px 0 12px; margin-bottom: 4px; color: var(--beige-400); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--beige-200); transition: color 0.2s; } .submenu-overview-link:hover { color: var(--neutral-900); } .submenu-overview-parent { font-weight: 400; text-transform: none; font-size: 13px; color: var(--neutral-600); } .submenu-overview-link:hover .submenu-overview-parent { color: var(--neutral-900); } /* LEVEL 3 & 4 VISIBILITY FIX */ .level-3-container, .level-4-container { display: none; width: 100%; animation: slideRight 0.4s ease-out; } .level-3-container.active, .level-4-container.active { display: block !important; } @keyframes slideRight { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } } .menu-link.simple-link { font-size: 14px; } .menu-link.simple-link:hover { color: var(--beige-400); } .menu-p-top { margin-top: 30px; } @media (max-width: 1179px) { .menu-p-top { margin-top: 0; } } /* --- MOBILE MENU --- */ @media (max-width: 1179px) { .mobile-menu-btn { display: flex; flex-direction: column; gap: 6px; background: none; border: none; cursor: pointer; margin-left: auto; z-index: 1001; } .mobile-menu-btn span { width: 26px; height: 2px; background-color: #707070; transition: 0.3s; } .mobile-menu-btn.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); } .mobile-menu-btn.active span:nth-child(2) { opacity: 0; transform: scaleX(0); background-color: transparent; } .mobile-menu-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); } .mobile-menu { position: fixed; top: var(--menu-top, var(--header-height)); bottom: 0; left: 0; width: 100%; /* top + bottom defines the area — browser computes the height to exactly the visible viewport, which auto-tracks iOS Safari's address-bar state. */ background-color: var(--beige-50); z-index: 99999; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); } #mobile-main { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ } #mobile-main::-webkit-scrollbar { display: none; } /* Chrome, Safari and Opera */ .mobile-menu.active { transform: translateX(0); } .mobile-menu-content { position: relative; height: 100%; width: 100%; overflow: hidden; display: flex; flex-direction: column; } /* Panels */ .mobile-panel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #E6E0CE; transform: translateX(100%); transition: transform 0.3s ease-in-out; overflow-y: auto; z-index: 10; display: flex; flex-direction: column; padding-bottom: 50px; } #mobile-main { transform: translateX(0); z-index: 1; } .mobile-menu.active #mobile-main { padding-bottom: 0; } .mobile-panel.active { transform: translateX(0); z-index: 20; background: #E6E0CE; } /* Social Footer */ .mobile-social-footer { display: flex; gap: 10px; padding: 30px 20px; align-items: start; justify-content: end; } .mobile-social-footer a { color: var(--beige-400); display: flex; transition: color 0.2s; } .mobile-social-footer a:hover { color: var(--neutral-900); } .mobile-social-footer img, .mobile-social-footer svg { width: 30px; height: 30px; } .mobile-social-footer img.kontakt-icon-footer { width: 38px; height: 35px; } .mobile-social-header { display: none; } /* Mobile Links */ .mobile-nav { display: flex; flex-direction: column; } .mobile-nav-item { display: flex; justify-content: end; align-items: center; gap: 20px; padding: 15px 20px; color: var(--neutral-700); text-decoration: none; font: normal normal 500 19px/23px 'Open Sans'; border-bottom: 1px solid rgba(0, 0, 0, 0.05); width: 100%; background: none; border-left: none; border-right: none; border-top: none; text-align: left; cursor: pointer; transition: background 0.2s; background: #E6E0CE; } .mobile-nav-item:active { background-color: var(--beige-100); } .mobile-nav-item.is-current { font: normal normal 600 19px/23px 'Open Sans'; } .nav-text-wrap { text-align: right; } /* Accordion */ .mobile-accordion-wrapper { border-bottom: 1px solid #fff; } .mobile-accordion-toggle { border-bottom: none; } .mobile-accordion-toggle:not(.level-3-item):not(.sub-item) { padding: 5px 20px; } /* Slide-panel (L2) items: tighter so more fit within the viewport */ .mobile-panel:not(#mobile-main) .mobile-nav-item { padding-left: 20px; padding-right: 20px; padding-top: 9px; padding-bottom: 9px; font: normal normal 500 15px/19px 'Open Sans'; position: relative; } .mobile-panel:not(#mobile-main) .mobile-nav-item.level-3-item { font: normal normal normal 15px/20px 'Open Sans'; padding-top: 8px; padding-bottom: 8px; } .mobile-panel:not(#mobile-main) .mobile-nav-item.sub-item { font: normal normal 400 14px/18px 'Open Sans'; padding-top: 0; padding-bottom: 0; } .mobile-panel:not(#mobile-main) .mobile-nav-item.sub-item.is-current, .mobile-panel:not(#mobile-main) .mobile-nav-item.level-3-item.is-current { font-weight: 700; } /* No borders on slide-panel items (level-3 & sub-items) or their wrappers */ .mobile-panel:not(#mobile-main) .mobile-nav-item, .mobile-panel:not(#mobile-main) .mobile-accordion-wrapper, .mobile-panel:not(#mobile-main) .mobile-accordion-toggle { border-bottom: none; border-top: none; } .mobile-accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; display: grid; gap: 15px; } .mobile-accordion-toggle.active + .mobile-accordion-content { margin-bottom: 30px; } .mobile-accordion-toggle.level-3-item.active + .mobile-accordion-content { margin-top: 10px; } .mobile-accordion-content .btn, .mobile-panel .mobile-nav .btn { justify-self: end; min-width: 272px; } .mobile-nav-item.sub-item { font: normal normal normal 15px/20px Open Sans; padding-top: 0; padding-bottom: 0; border-bottom: none; } .mobile-nav-item.level-3-item { border-bottom: none; } .mobile-nav-item.sub-item.is-current { font: normal normal 600 15px/20px Open Sans; text-decoration: underline; } .mobile-nav-item.level-3-item { font: normal normal normal 15px/20px Open Sans; } .mobile-nav-item.level-3-item.is-current { font: normal normal 600 15px/20px Open Sans; text-decoration: underline; } .mobile-panel:not(#mobile-main) .mobile-nav-item.mobile-accordion-toggle.level-3-item.active, .mobile-panel:not(#mobile-main) .mobile-nav-item.mobile-accordion-toggle.level-3-item.active .nav-text-wrap { font: normal normal 600 15px/20px 'Open Sans'; } .nav-right-wrap { display: flex; align-items: center; gap: 10px; } .chevron { transform: rotate(90deg); transition: transform 0.3s ease; } .mobile-accordion-toggle.active .chevron { transform: rotate(-90deg); } .mobile-secondary-vertical { margin-top: 48px; gap: 15px; } .mobile-nav.mobile-secondary-vertical .mobile-nav-item { padding: 0px 23px !important; } .mobile-secondary-vertical .mobile-nav-item { border-bottom: none; } .mobile-nav.mobile-secondary-vertical .btn { margin-right: 23px; width: fit-content; margin-left: auto; } /* Hide the right-wrap (icon/chevron column) inside the secondary mobile menu and add spacing between accordion sub-items so they breathe like the design. */ .mobile-secondary-vertical .nav-right-wrap { display: none; } .mobile-secondary-vertical .mobile-accordion-content { gap: 20px; padding-top: 10px; } /* Mirror the .mobile-panel .mobile-nav-item.sub-item .nav-text-wrap rule explicitly on the secondary menu so the sub-items match the primary menu's body font (Open Sans). The theme's selector `.mobile-nav.mobile-secondary-vertical .mobile-nav-item .nav-text-wrap` forces font-family: inherit, so we use !important here to beat it. */ .mobile-nav.mobile-secondary-vertical .mobile-nav-item.sub-item .nav-text-wrap, .mobile-nav.mobile-secondary-vertical .mobile-nav-item.level-3-item .nav-text-wrap { text-transform: none; font-family: var(--font-body, 'Open Sans') !important; color: var(--clr-neutral-800); font-weight: 400; text-align: right; } .mobile-nav.mobile-secondary-vertical .mobile-nav-item.sub-item.is-current .nav-text-wrap, .mobile-nav.mobile-secondary-vertical .mobile-nav-item.level-3-item.is-current .nav-text-wrap { font-weight: 600; } /* Same fix for L1 toggles (PREISE/KLINIK) — they should use Montserrat. */ .mobile-nav.mobile-secondary-vertical .mobile-nav-item[data-level="1"]:not(.sub-item):not(.mobile-overview-link) > .nav-text-wrap { font-family: var(--font-heading, 'Montserrat') !important; font-weight: 600; } .mobile-menu-header { padding: 5px 20px 38px; display: flex; flex-direction: column-reverse; gap: 15px; } .back-button { background: transparent; border: none; display: flex; align-items: center; gap: 8px; font: normal normal 600 15px/20px Open Sans; text-transform: none; color: var(--clr-text-primary); cursor: pointer; padding: 0; } .mobile-menu-title { font: normal normal 600 19px/23px var(--font-heading, 'Montserrat'); text-transform: uppercase; color: var(--neutral-900); } .mobile-menu-title.is-current { font: normal normal 600 19px/23px var(--font-heading, 'Montserrat'); color: #333333; } .mobile-header-icon img { width: 40px; height: 40px; background-color: var(--beige-200); border-radius: 50%; object-fit: contain; } .mobile-header-title-wrapper { display: flex; align-items: center; gap: 15px; justify-content: end; flex-direction: row; } .mobile-menu-overlay { position: fixed; top: var(--menu-top, var(--header-height)); bottom: 0; left: 0; width: 100vw; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(2px); z-index: 99990; display: none; opacity: 0; transition: opacity 0.3s; } .mobile-menu-overlay.active { display: block; opacity: 1; } .mobile-nav-item img { width: 40px; height: 40px; } .mobile-overview-link { color: #333333; font-weight: 600; font-size: 14px; text-decoration: none; } .mobile-overview-link.is-current { text-decoration: underline; } .mobile-overview-link svg { flex-shrink: 0; color: #333333; } .mobile-overview-link:active { color: var(--neutral-900); } .mobile-secondary-vertical .mobile-accordion-wrapper { border-bottom: 0; } /* Moderni CSS sa Nesting-om */ .mobile-panel { .mobile-nav-item { /* Stilovi za tekst unutar itema */ .nav-text-wrap { font-family: var(--font-body, 'Open Sans'); text-transform: uppercase; } /* Koristimo "&" da ciljamo isti element (.mobile-nav-item) koji ima i klasu .sub-item */ &.sub-item .nav-text-wrap { /* 'none' prikazuje tekst tačno kako je napisan u HTML-u (bez uppercase) */ text-transform: none; font-family: var(--font-body); color: var(--clr-neutral-800); /* Opciono: drugačija boja za sub-iteme */ font-weight: 400; /* Opciono: obično sub-itemi imaju tanji font */ text-align: right; } &.sub-item.is-current .nav-text-wrap, &.level-3-item.is-current .nav-text-wrap { font-weight: 600; } &.level-3-item .nav-text-wrap { text-transform: none; font-family: var(--font-body); color: var(--clr-neutral-800); font-weight: 400; text-align: right; } &.mobile-overview-link .nav-text-wrap, &.mobile-panel-title .nav-text-wrap { text-transform: none; } /* All L1 items (primary AND secondary, toggles + simple anchors) use the heading font so primary and secondary menus look consistent. Excludes overview links and sub-items which are deeper levels. */ &[data-level="1"]:not(.sub-item):not(.mobile-overview-link) > .nav-text-wrap { font-family: var(--font-heading, 'Montserrat'); font-weight: 600; } } } } /* --- MOBILE SEARCH DROPDOWN (toggled by .search-trigger) --- Anchored at top: 0, hidden offscreen by `translateY(-100%)`. When opened, it slides down to just below the site header so the header stays visible (translateY equals the header offset stored in --menu-top). */ .mobile-search { position: fixed; top: 0; left: 0; right: 0; z-index: 100001; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); transform: translateY(-100%); transition: transform 0.25s ease; padding: 14px 16px; display: none; /* Mobile only — shown via the breakpoint below */ } @media (max-width: 1179px) { .mobile-search { display: block; } } .mobile-search.is-open { /* Slide down by the header's height so the dropdown sits just below it. */ transform: translateY(var(--menu-top, var(--header-height))); } /* When the mobile menu is open, push the mobile search behind it so the menu's full-viewport overlay isn't interrupted at the top. */ body.mega-menu-open .mobile-search { z-index: 1 !important; } .mobile-search__form { display: flex; align-items: center; gap: 10px; max-width: 720px; margin: 0 auto; } .mobile-search__icon { color: var(--beige-400, #baae92); flex-shrink: 0; } .mobile-search__input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-size: 16px; /* 16px prevents iOS zoom-on-focus */ color: #2d2d2d; padding: 10px 2px; } .mobile-search__submit, .mobile-search__close { background: none; border: none; cursor: pointer; display: flex; align-items: center; padding: 8px; color: #555756; } .mobile-search__submit { color: var(--beige-400, #baae92); } .mobile-search__close { font-size: 28px; line-height: 1; color: #999; } /* --- MOBILE HEADER ICONS (PHONE, WHATSAPP, SEARCH, ACCOUNT) --- */ .mobile-header-icons { display: none; /* Hide on Desktop */ } @media (max-width: 1179px) { .mobile-header-icons { display: flex; align-items: center; gap: 15px; margin-left: auto; /* Push to right */ margin-right: 20px; /* Space before the Hamburger button */ } .mob-icon { color: var(--beige-400); display: flex; align-items: center; text-decoration: none; transition: color 0.2s; } .mob-icon:hover { color: var(--neutral-900); } .mob-icon svg { width: 22px; height: 22px; } /* Adjust Mobile Menu Button to fit next to icons */ .mobile-menu-btn { margin-left: 0; /* Reset margin since icons are pushing it */ z-index: 100001; /* Ensure above overlay */ } /* Ensure Header title in Mega Menu is clickable styling */ .menu-section-header { text-decoration: none; cursor: pointer; } .menu-section-header:hover .menu-section-title { color: var(--beige-400); } } /* ============================================ MENU ITEM BADGE / FLAG Ribbon shape: arrow point on the left, V notch on the right. Coloured via the per-item "Badge Farbe" admin field. Shape stays sharp at any text length because chevron depth is a fixed pixel value, not a percentage. ============================================ */ .menu-badge { --badge-bg: #555756; --badge-chevron: 7px; display: inline-flex; align-items: center; justify-content: center; margin-left: 8px; padding: 4px 14px 4px 16px; background-color: var(--badge-bg); color: #fff; font-size: 11px; font-weight: var(--fw-semibold); line-height: 1.2; letter-spacing: 0.04em; text-transform: none; white-space: nowrap; vertical-align: middle; clip-path: polygon( var(--badge-chevron) 0, 100% 0, calc(100% - var(--badge-chevron)) 50%, 100% 100%, var(--badge-chevron) 100%, 0 50% ); } .menu-badge--primary { --badge-bg: var(--beige-400); } .menu-badge--dark { --badge-bg: var(--neutral-900); } /* Override the blanket `.mega-menu * { background-color: transparent }` rule so badges inside the mega menu actually paint their fill colour. Without this, the L2/L3/L4 badges are invisible (transparent shape + white text on the light mega-menu background). */ .mega-menu .menu-badge { background-color: var(--badge-bg); } /* Hide the badge once the item's sub-panel is showing (.active is added on .level-2-link / .level-3-link when L3/L4 opens). */ .menu-link.active .menu-badge { display: none; } /* ============================================ MEGA MENU: MANY-LEAVES LAYOUT When an L2 list contains only leaf items (no L3/L4 submenus anywhere) AND has many items, reclaim the empty L3/L4 column space and flow the L2 items into multiple columns so the menu doesn't grow excessively tall. Scoped via :has() so menus with L2->L3->L4 structure are completely untouched. ============================================ */ /* If no item in this mega menu has a sub-level, the L3/L4 wrappers will always be empty -- hide them and let col-level-2 take the full width. */ .mega-menu-content:not(:has(.has-submenu)) .col-level-2 { flex: 1 1 100%; } .mega-menu-content:not(:has(.has-submenu)) .col-level-3-wrapper, .mega-menu-content:not(:has(.has-submenu)) .col-level-4-wrapper { display: none; } /* Flow L2 items into 2 columns when there are 11+ items */ .mega-menu-content:not(:has(.has-submenu)) .col-level-2 > .menu-list:has(> li:nth-child(11)) { column-count: 2; column-gap: 40px; } /* ...and 3 columns when there are 18+ items */ .mega-menu-content:not(:has(.has-submenu)) .col-level-2 > .menu-list:has(> li:nth-child(18)) { column-count: 3; column-gap: 30px; } /* Keep each link intact -- never split a menu item across columns */ .mega-menu-content:not(:has(.has-submenu)) .col-level-2 > .menu-list > li { break-inside: avoid; } /* Mobile: different flag shape (V-notch left, rounded right) rendered via SVG mask, sat on its own row beneath the title via a 2-row grid. */ @media (max-width: 1179px) { .menu-badge { font-size: 10px; padding: 4px 14px 4px 16px; /* Replace desktop clip-path with the mobile shape */ clip-path: none; -webkit-mask-image: url("data:image/svg+xml;utf8,"); -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-image: url("data:image/svg+xml;utf8,"); mask-size: 100% 100%; mask-repeat: no-repeat; } /* Let rows with a badge wrap when there isn't enough horizontal space, instead of squeezing the title. Keeps the original flex alignment. */ .mobile-nav-item:has(> .menu-badge) { flex-wrap: wrap; row-gap: 3px; column-gap: 20px; } /* Keep title + chevron together on row 1; force the badge to row 2 by inserting a zero-height pseudo-element that fills the row. */ .mobile-nav-item:has(> .menu-badge) > :not(.menu-badge):not(.nav-text-wrap) { order: 1; } .mobile-nav-item:has(> .menu-badge)::after { content: ''; flex-basis: 100%; height: 0; order: 2; } .mobile-nav-item:has(> .menu-badge) > .menu-badge { order: 3; } }