/* ========================================================== HUBOVÉ EXTRAKTY — HLAVIČKA Konsolidovaný súbor pre Apollo Classic šablónu ========================================================== Verzia: 2.10 v2.10 zmeny (oproti v2.9): - Motto pill štýl: biela kapsula (rgba 0.94) s tmavým textom (#2c1810), 14px, padding 5/16, border-radius 14 Vždy čitateľné bez ohľadu na farbu gradientu pod ňou. - Text-shadow odstránený z motta (pill nepotrebuje halo) v2.9 zmeny: - Top bar pozadie: SUNSET GRADIENT cez ::before pseudo - Halo text-shadow na texty v top bare (linky, email, EUR/SK) - Soc ikony tmavšie pozadie (rgba 0,0,0,0.35) v2.8: EUR/jazyk späť do top baru bez ikon, soc ikony do .container, animovaný motto, media queries v2.7: presun soc/EUR, search roztiahnutý, šípky skryté v2.6: top bar antracit, menu bar biele pill tlačidlá v2.0: clean rebuild ========================================================== */ /* ========================================================== CSS PREMENNÉ ========================================================== */ :root { /* Top lišta - background transparent, gradient cez ::before pseudo (v2.9) Toto rieši infinite loop z MutationObserver: - JS forcuje background-color: transparent (žiadna zmena = žiadny re-trigger) - Gradient renderuje pseudo-element ktorý Apollo JS nevidí */ --nf-topbar-bg: transparent; --nf-topbar-text: #ffffff; --nf-topbar-hover: #c8e6a0; /* Soc ikony v desktop headeri */ --nf-soc-bg: #f1f5f4; --nf-soc-icon: #1A1A1A; --nf-soc-border: #e2e8e6; --nf-soc-hover-bg: #5a8a00; --nf-soc-hover-icon: #ffffff; /* Menu */ --nf-menu-text: #1B3A1A; /* v2.6: bola #ffffff */ --nf-menu-hover-bg: #307400; /* v2.6: bola rgba(255,255,255,0.15) */ --nf-menu-hover-text: #ffffff; --nf-menubar-bg: #ffffff; /* v2.6: bola #2c4220 (biele pozadie) */ --nf-menubar-border: #e5e0d2; /* v2.6: nová - jemné dvojité línie */ --nf-menu-btn-bg: #f5f3ec; /* v2.6: nová - béžové pill tlačidlá */ /* Megamenu panel */ --nf-mega-bg: #ffffff; --nf-mega-border: #E5E7EB; --nf-mega-shadow: 0 12px 28px rgba(0,0,0,0.10); --nf-mega-item-text: #1F2937; --nf-mega-item-hover: #5a8a00; --nf-mega-item-line: #F3F4F6; --nf-mega-icon-size: 80px; --nf-mega-icon-gap: 20px; /* Mobilné menu */ --he-green: #3d5a2a; --he-green-deep: #2c4220; --he-green-soft: #edf0e3; --he-green-soft-border: #c5cdb0; --he-bg-card: #f5f3ec; --he-bg-card-hover: #ebe7d9; --he-text: #1f1f1f; --he-arrow: #9a9a9a; --he-tag-border: #d4d0c0; } /* ========================================================== DESKTOP (min-width: 768px) ========================================================== */ @media (min-width: 768px) { /* ============================================= 1) TOP LIŠTA (z originálu nf-topbar.css 1:1) ============================================= */ /* v2.3: kompaktnejšie EUR/jazyk tlačidlá (cca 24–28 px výška) */ .top-navigation-bar .languagesMenu__header, .top-navigation-bar .languagesMenu__header--actual, .top-navigation-bar .languagesMenu__flags { padding: 4px 10px !important; font-size: 12px !important; line-height: 1.2 !important; height: auto !important; min-height: 0 !important; border-radius: 4px !important; } .top-navigation-bar .languagesMenu__header--actual, .top-navigation-bar .languagesMenu__flags { border: 1px solid rgba(255,255,255,0.25) !important; background: transparent !important; color: var(--nf-topbar-text) !important; } body .top-navigation-bar, body .top-navigation-bar:hover, body.opened-menu .top-navigation-bar, body.submenu-visible .top-navigation-bar, body.navigation-window-visible .top-navigation-bar, body[class*="opened"] .top-navigation-bar, body[class*="visible"] .top-navigation-bar, html body .top-navigation-bar { background-color: var(--nf-topbar-bg) !important; background-image: none !important; transition: none !important; position: relative !important; z-index: 9999 !important; } /* v2.9: SUNSET GRADIENT cez ::before pseudo-element Apollo JS nevidí pseudo-elementy, takže žiadne preflashovanie ani MutationObserver loop. */ .top-navigation-bar::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: linear-gradient(90deg, #507696 0%, #C89E7F 35%, #F1C08E 60%, #EACAA7 80%, #E7B27A 100%) !important; pointer-events: none !important; z-index: 0 !important; } /* Obsah top baru nad gradientom */ .top-navigation-bar > * { position: relative !important; z-index: 1 !important; } .top-navigation-bar .top-navigation-menu, .top-navigation-bar .top-navigation-menu a, .top-navigation-bar .top-navigation-menu span, .top-navigation-bar .top-navigation-menu li, .top-navigation-bar .top-navigation-bar-menu, .top-navigation-bar .top-navigation-bar-menu a, .top-navigation-bar .top-navigation-bar-menu span, .top-navigation-bar .top-navigation-bar-menu li, .top-navigation-bar .top-navigation-tools, .top-navigation-bar .top-navigation-tools span, .top-navigation-bar .top-navigation-tools a { color: var(--nf-topbar-text) !important; /* v2.9: halo shadow pre čitateľnosť na svetlej béžovej časti gradientu */ text-shadow: 0 0 3px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.5) !important; } /* v2.9: halo shadow aj na kontakt klon, motto a EUR/SK */ .top-navigation-bar .nf-contact-clone, .top-navigation-bar .nf-contact-clone *, .top-navigation-bar .nf-topbar-motto, .top-navigation-bar .languagesMenu__header--actual, .top-navigation-bar .languagesMenu__flags { text-shadow: 0 0 3px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.5) !important; } .top-navigation-bar .top-navigation-menu a:hover, .top-navigation-bar .top-navigation-bar-menu a:hover { color: var(--nf-topbar-hover) !important; text-decoration: none !important; } .top-navigation-bar .responsive-tools a { color: var(--nf-topbar-text) !important; fill: var(--nf-topbar-text) !important; } /* Currency dropdown */ .top-navigation-bar .dropdown > span { color: var(--nf-topbar-text) !important; opacity: 0.85 !important; } .top-navigation-bar .dropdown > button, .top-navigation-bar .dropdown #topNavigationDropdown { background: transparent !important; color: var(--nf-topbar-text) !important; border: 1px solid rgba(255,255,255,0.25) !important; padding: 3px 10px !important; border-radius: 4px !important; } .top-navigation-bar .dropdown > button:hover { background: rgba(255,255,255,0.1) !important; border-color: rgba(255,255,255,0.4) !important; } .top-navigation-bar .dropdown-menu { background-color: var(--nf-topbar-bg) !important; border: 1px solid rgba(255,255,255,0.15) !important; } .top-navigation-bar .dropdown-menu li a { color: var(--nf-topbar-text) !important; } .top-navigation-bar .dropdown-menu li a:hover { background: rgba(255,255,255,0.1) !important; color: var(--nf-topbar-text) !important; } /* Kontakt v top bare (Zákaznícka podpora + email) — v2.2 fix Apollo defaultne renderuje .project-email ako bielu kapsulu s ikonou — na modrom pozadí pôsobí ako "bublina". Prebíjame to plochou typografiou, biely text. */ .top-navigation-bar .top-navigation-contacts { background: transparent !important; color: var(--nf-topbar-text) !important; } .top-navigation-bar .top-navigation-contacts strong { color: var(--nf-topbar-text) !important; font-weight: 600 !important; margin-right: 6px !important; } .top-navigation-bar .top-navigation-contacts .project-email, .top-navigation-bar .top-navigation-contacts a.project-email { background: transparent !important; background-color: transparent !important; color: var(--nf-topbar-text) !important; padding: 0 !important; margin: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; text-decoration: none !important; } .top-navigation-bar .top-navigation-contacts .project-email::before, .top-navigation-bar .top-navigation-contacts .project-email::after { /* skryť prípadnú obálku/ikonu z Apollo defaultu */ display: none !important; } .top-navigation-bar .top-navigation-contacts .project-email span { color: var(--nf-topbar-text) !important; text-decoration: none !important; } .top-navigation-bar .top-navigation-contacts .project-email:hover { color: var(--nf-topbar-hover) !important; text-decoration: underline !important; } .top-navigation-bar .top-navigation-contacts .project-email:hover span { color: var(--nf-topbar-hover) !important; } /* Language menu */ .top-navigation-bar .languagesMenu__flags { background: transparent !important; color: var(--nf-topbar-text) !important; border: 1px solid rgba(255,255,255,0.25) !important; padding: 3px 10px !important; border-radius: 4px !important; } .top-navigation-bar .languagesMenu__flags:hover { background: rgba(255,255,255,0.1) !important; } /* ============================================= 2) STRED HLAVIČKY — NEMENÍME Apollo default layout. Žiadne moje pravidlá. Search, email a tlačidlá budú fungovať ako pôvodne. ============================================= */ /* (úmyselne prázdne) */ /* ============================================= 3) SOC IKONY V TOP BARE (v2.8) JS injectHeaderSocialIcons() vkladá do .container. Layout cez flex order (vpravo, vedľa EUR/SK). ============================================= */ .top-navigation-bar .container .nf-header-social { display: flex !important; gap: 8px !important; align-items: center !important; order: 999 !important; flex: 0 0 auto !important; margin-left: 0 !important; width: auto !important; } .top-navigation-bar .nf-header-social-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; border-radius: 50% !important; /* v2.9: tmavšie pozadie pre kontrast na svetlej béžovej časti */ background: rgba(0,0,0,0.35) !important; color: #ffffff !important; text-decoration: none !important; transition: background 0.25s ease, transform 0.25s ease !important; flex-shrink: 0 !important; padding: 0 !important; line-height: 0 !important; border: none !important; } .top-navigation-bar .nf-header-social-link:hover { background: rgba(0,0,0,0.55) !important; color: #ffffff !important; transform: translateY(-1px) !important; } .top-navigation-bar .nf-header-social-link svg { width: 14px !important; height: 14px !important; display: block !important; fill: currentColor !important; } /* ============================================= 3b) EUR/JAZYK V TOP BARE (v2.8) Decentný textový štýl, bez ikon, bez bordera. Layout: order 998 - vedľa soc ikon. ============================================= */ .top-navigation-bar .container .top-navigation-tools--language { order: 998 !important; flex: 0 0 auto !important; margin-left: auto !important; margin-right: 12px !important; width: auto !important; display: flex !important; align-items: center !important; gap: 6px !important; } .top-navigation-bar .top-navigation-tools--language .languagesMenu { display: flex !important; align-items: center !important; gap: 6px !important; } /* Skryť ikony pri EUR/SK (sú v ::before pseudo) */ .top-navigation-bar .languagesMenu__header--actual::before, .top-navigation-bar .languagesMenu__flags::before { display: none !important; content: none !important; } /* Decentný text bez bordera */ .top-navigation-bar .languagesMenu__header--actual, .top-navigation-bar .languagesMenu__flags { border: none !important; background: transparent !important; color: rgba(255,255,255,0.75) !important; padding: 4px 8px !important; font-size: 12px !important; font-weight: 500 !important; flex-shrink: 0 !important; white-space: nowrap !important; transition: color 0.2s ease !important; } .top-navigation-bar .languagesMenu__header--actual:hover, .top-navigation-bar .languagesMenu__flags:hover { color: #ffffff !important; } .top-navigation-bar .languagesMenu__header--actual .caret { opacity: 0.6 !important; margin-left: 4px !important; } /* ============================================= 3c) ANIMOVANÝ MOTTO V STREDE TOP BARU (v2.8) JS vytvára element .nf-topbar-motto. Viditeľný len na PC (≥1200px). Na tabletoch (768-1199) sa namiesto motta zobrazí kontakt klon. ============================================= */ .top-navigation-bar .nf-topbar-motto { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; /* v2.10: pill štýl - biela kapsula s tmavým textom Vždy čitateľné bez ohľadu na farbu gradientu pod ňou. */ color: #2c1810 !important; background: rgba(255,255,255,0.94) !important; padding: 5px 16px !important; border-radius: 14px !important; font-size: 14px !important; font-weight: 600 !important; white-space: nowrap !important; pointer-events: none !important; letter-spacing: 0.2px !important; text-shadow: none !important; } /* Pod 1200px: skry motto, zobraz kontakt klon */ @media (max-width: 1199px) { .top-navigation-bar .nf-topbar-motto { display: none !important; } } /* Nad 1200px: skry kontakt klon, zobraz motto */ @media (min-width: 1200px) { .top-navigation-bar .nf-contact-clone { display: none !important; } } /* Pod 992px: skry linky (Ako nakupovať/Certifikáty) aby sa email v strede neprekrýval s nimi */ @media (max-width: 991px) { .top-navigation-bar .top-navigation-menu { display: none !important; } } /* ============================================= 3d) SEARCH BAR ROZTIAHNUTÝ (v2.7) Keď sa soc ikony presunuli inde, search dostane viac priestoru v strednej hlavičke. ============================================= */ #header .search, #header .search-form-wrapper { flex: 1 1 auto !important; max-width: none !important; } /* ============================================= 3e) ŠÍPKY V MENU BARE SKRYŤ (v2.7) Apollo defaultne pridáva a ::after dropdown indikátor. Pri pill tlačidlách sú rušivé. ============================================= */ #navigation .menu-level-1 > li > a::after, #navigation .menu-level-1 > li > a > .submenu-arrow, #navigation .menu-level-1 > li > a span.submenu-arrow, #navigation .menu-level-1 > li > a > i, #navigation .menu-level-1 > li > a > svg { display: none !important; } /* ============================================= 4) MENU BAR (z originálu nf-menu.css 1:1) ============================================= */ #navigation, nav#navigation, #navigation .navigation-in, .header-bottom { background: var(--nf-menubar-bg) !important; background-color: var(--nf-menubar-bg) !important; border-top: 1px solid var(--nf-menubar-border) !important; border-bottom: 1px solid var(--nf-menubar-border) !important; } body, html { overflow-x: clip !important; } /* Pozícia pre absolútne pozicovaný megamenu panel */ #navigation .menu-level-1 > li { position: relative !important; } /* Skryť Apollo "VIAC" v menu bare */ #navigation > .menu-helper, #navigation .menu-level-1 > li.menu-helper, #navigation > [data-testid="hamburgerMenu"] { display: none !important; } /* Hlavné položky menu - pill tlačidlá (v2.6) */ #navigation .menu-level-1 > li > a { background-color: var(--nf-menu-btn-bg) !important; color: var(--nf-menu-text) !important; padding: 8px 18px !important; margin: 8px 4px !important; font-size: 14px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; text-decoration: none !important; border-radius: 8px !important; transition: background 0.2s ease, color 0.2s ease !important; } #navigation .menu-level-1 > li > a > b { color: var(--nf-menu-text) !important; font-weight: 600 !important; } #navigation .menu-level-1 > li > a:hover, #navigation .menu-level-1 > li.exp > a, #navigation .menu-level-1 > li:hover > a, #navigation .menu-level-1 > li > a:hover > b, #navigation .menu-level-1 > li.exp > a > b, #navigation .menu-level-1 > li:hover > a > b { background-color: var(--nf-menu-hover-bg) !important; color: var(--nf-menu-hover-text) !important; } /* ============================================= 5) MEGAMENU PANEL — default skrytý, hover open ============================================= */ #navigation .menu-level-2 { display: none !important; } #navigation .menu-level-1 > li:hover > .menu-level-2, #navigation .menu-level-1 > li.exp > .menu-level-2 { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; grid-auto-flow: row !important; gap: 4px 28px !important; padding: 28px 36px !important; background: var(--nf-mega-bg) !important; border: 1px solid var(--nf-mega-border) !important; border-radius: 10px !important; box-shadow: var(--nf-mega-shadow) !important; width: 1100px !important; max-width: 90vw !important; max-height: none !important; height: auto !important; position: absolute !important; top: 100% !important; left: 0 !important; margin-top: 0 !important; list-style: none !important; z-index: 1000 !important; } /* Hover bridge — neviditeľný pás medzi tlačidlom a panelom */ #navigation .menu-level-1 > li:hover > .menu-level-2::before, #navigation .menu-level-1 > li.exp > .menu-level-2::before { content: '' !important; position: absolute !important; top: -14px !important; left: 0 !important; right: 0 !important; height: 14px !important; background: transparent !important; pointer-events: auto !important; } /* ============================================= 6) APOLLO "VŠETKY KATEGÓRIE" — skryť Apollo vkladá
  • v paneli ============================================= */ #navigation .menu-level-2 > li.menu-item-category, .menu-level-2 > li.menu-item-category, li.menu-item-category { display: none !important; visibility: hidden !important; position: absolute !important; left: -9999px !important; width: 0 !important; height: 0 !important; overflow: hidden !important; } /* ============================================= 7) POLOŽKA MEGAMENU — flex (ikona vľavo + text vpravo) ============================================= */ #navigation .menu-level-2 > li:not(.menu-item-category) { display: flex !important; align-items: center !important; gap: var(--nf-mega-icon-gap) !important; padding: 12px 0 !important; margin: 0 !important; background: transparent !important; border: none !important; border-bottom: 1px solid var(--nf-mega-item-line) !important; list-style: none !important; min-height: auto !important; height: auto !important; width: auto !important; max-width: none !important; min-width: 0 !important; overflow: visible !important; white-space: normal !important; position: static !important; } /* ============================================= 8) IKONY KATEGÓRIÍ — slot 80 px vľavo Vlastné ikony zobrazí, placeholder folder.svg skryje ============================================= */ #navigation .menu-level-2 > li > a.menu-image { display: flex !important; align-items: center !important; justify-content: center !important; width: var(--nf-mega-icon-size) !important; height: var(--nf-mega-icon-size) !important; min-width: var(--nf-mega-icon-size) !important; flex-shrink: 0 !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; text-decoration: none !important; } #navigation .menu-level-2 > li > a.menu-image img { display: block !important; width: 100% !important; height: 100% !important; max-width: var(--nf-mega-icon-size) !important; max-height: var(--nf-mega-icon-size) !important; object-fit: contain !important; border: none !important; border-radius: 0 !important; } /* Skryť LEN placeholder folder.svg (slot zachová priestor) */ #navigation .menu-level-2 > li > a.menu-image:has(img[data-src*="folder.svg"]), #navigation .menu-level-2 > li > a.menu-image:has(img[src*="folder.svg"]) { visibility: hidden !important; } /* ============================================= 9) WRAPPER DIV S TEXTOM — pravá strana ============================================= */ #navigation .menu-level-2 > li > div { display: block !important; flex: 1 !important; padding: 0 !important; margin: 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; overflow: visible !important; white-space: normal !important; } /* ============================================= 10) TEXT podpoložky ============================================= */ #navigation .menu-level-2 > li > div > a, #navigation .menu-level-2 > li > a:not(.menu-image) { display: block !important; padding: 4px 0 !important; color: var(--nf-mega-item-text) !important; font-size: 14px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.4 !important; text-decoration: none !important; border: none !important; transition: color 0.2s ease, padding-left 0.2s ease !important; background: transparent !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; width: 100% !important; max-width: none !important; min-width: 0 !important; word-break: normal !important; overflow-wrap: normal !important; } #navigation .menu-level-2 > li > div > a > span, #navigation .menu-level-2 > li > a > span { display: inline !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; width: auto !important; max-width: none !important; word-break: normal !important; overflow-wrap: normal !important; } #navigation .menu-level-2 > li > div > a:hover, #navigation .menu-level-2 > li > a:not(.menu-image):hover { color: var(--nf-mega-item-hover) !important; padding-left: 4px !important; background: transparent !important; } /* ============================================= 11) ÚROVEŇ 3 (has-third-level) ============================================= */ #navigation .menu-level-2 > li.has-third-level > div > .menu-level-3, #navigation .menu-level-2 > li.has-third-level .menu-level-3, #navigation .menu-level-3 { display: block !important; padding: 2px 0 4px 0 !important; margin: 0 !important; list-style: none !important; width: 100% !important; max-width: none !important; overflow: visible !important; } #navigation .menu-level-2 > li.has-third-level .menu-level-3 li, #navigation .menu-level-3 li { padding: 0 !important; margin: 0 !important; list-style: none !important; width: auto !important; max-width: none !important; overflow: visible !important; white-space: normal !important; background: transparent !important; border: none !important; display: list-item !important; } #navigation .menu-level-2 > li.has-third-level .menu-level-3 li a, #navigation .menu-level-3 li a { display: block !important; padding: 2px 0 2px 10px !important; color: #6B7280 !important; font-size: 13px !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.4 !important; text-decoration: none !important; border: none !important; background: transparent !important; transition: color 0.2s ease !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; width: auto !important; max-width: none !important; word-break: normal !important; overflow-wrap: normal !important; } #navigation .menu-level-3 li a > span { display: inline !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } #navigation .menu-level-2 > li.has-third-level .menu-level-3 li a:hover, #navigation .menu-level-3 li a:hover { color: var(--nf-mega-item-hover) !important; } /* ============================================= 12) MOBILE-ONLY prvky — skryť na desktope ============================================= */ .he-social-icons, .he-social-icon { display: none !important; } } /* ========================================================== MOBILE (max-width: 767px) Z originálu mobile-menu.css 1:1 ========================================================== */ @media (max-width: 767px) { .nf-header-social { display: none !important; } /* Hamburger tlačidlo */ .toggle-window[data-target="navigation"], [data-testid="hamburgerMenu"] { background-color: var(--he-bg-card) !important; border: 0.5px solid var(--he-tag-border) !important; border-radius: 8px !important; box-shadow: none !important; color: var(--he-green) !important; transition: background-color 0.2s ease, color 0.2s ease; } .toggle-window[data-target="navigation"] i, .toggle-window[data-target="navigation"] .text, [data-testid="hamburgerMenu"] i, [data-testid="hamburgerMenu"] .text { color: var(--he-green) !important; } body.navigation-window-visible .toggle-window[data-target="navigation"], body.navigation-window-visible [data-testid="hamburgerMenu"] { background-color: var(--he-green-deep) !important; border-color: var(--he-green-deep) !important; color: var(--he-bg-card) !important; } body.navigation-window-visible .toggle-window[data-target="navigation"] i, body.navigation-window-visible [data-testid="hamburgerMenu"] i { color: var(--he-bg-card) !important; } body.navigation-window-visible .toggle-window[data-target="navigation"]::before, body.navigation-window-visible [data-testid="hamburgerMenu"]::before { content: "\e921" !important; font-family: "apollo" !important; color: var(--he-bg-card) !important; } /* Panel menu */ #navigation, nav#navigation { background: #ffffff; } /* Hlavné kategórie — pill karty */ .navigation-in > ul { padding: 12px 0 8px; } .navigation-in > ul > li { margin: 0 15px 8px; border-bottom: 0; background: var(--he-bg-card); border-radius: 10px; position: relative; transition: background-color 0.2s ease; } .navigation-in > ul > li > a { display: block; padding: 16px 50px 16px 18px; background: transparent; color: var(--he-text); font-weight: 500; font-size: 15px; text-transform: none; text-decoration: none; letter-spacing: 0; line-height: 1.3; position: relative; } .navigation-in > ul > li > a > b { font-weight: 500; text-transform: none !important; letter-spacing: 0 !important; color: var(--he-text); } .navigation-in > ul > li:hover { background-color: var(--he-bg-card-hover); } .navigation-in > ul > li.exp { background-color: var(--he-bg-card-hover); } .navigation-in > ul > li.exp > a, .navigation-in > ul > li.exp > a > b { color: var(--he-green-deep); } #navigation li a .submenu-arrow { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--he-arrow); font-size: 10px; transition: color 0.2s ease, transform 0.25s ease; } .navigation-in > ul > li.exp .submenu-arrow { color: var(--he-green); transform: translateY(-50%) rotate(180deg); } .navigation-in ul.menu-level-2 a { text-transform: none !important; letter-spacing: 0 !important; } .navigation-in ul.menu-level-2 a:hover { color: var(--he-green); } #navigation a:hover { color: var(--he-green); } /* Spodok menu — kontaktná karta */ .navigation-in-bottom { margin: 16px 15px 12px; padding: 16px 14px; background: var(--he-green-soft); border-radius: 10px; border: none; text-align: left; display: flex; flex-direction: column; gap: 10px; } .navigation-in-bottom .top-navigation-contacts { order: 1; } .navigation-in-bottom > a[href^="mailto:"], .navigation-in-bottom > a[href^="tel:"] { order: 1; } .navigation-in-bottom .he-social-icons { order: 2; } .navigation-in-bottom .top-navigation-bar-menu { order: 3; } .navigation-in-bottom .navigationActions { order: 3; } /* Email + telefón */ .navigation-in-bottom a[href^="mailto:"], .navigation-in-bottom a[href^="tel:"] { display: flex; align-items: center; gap: 10px; color: #1a2812 !important; font-size: 14px; font-weight: 600; text-decoration: none; padding: 2px 0; } .navigation-in-bottom a[href^="mailto:"]:hover, .navigation-in-bottom a[href^="tel:"]:hover { color: var(--he-green) !important; } .navigation-in-bottom a[href^="mailto:"]::before { content: ""; width: 16px; height: 16px; flex-shrink: 0; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; } .navigation-in-bottom a[href^="tel:"]::before { content: ""; width: 16px; height: 16px; flex-shrink: 0; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; } .navigation-in-bottom a[href^="mailto:"] > i, .navigation-in-bottom a[href^="tel:"] > i { display: none; } /* Soc ikony v mobile menu */ .he-social-icons { display: flex; justify-content: center; gap: 8px; padding-top: 12px; margin-top: 4px; border-top: 0.5px solid var(--he-green-soft-border); } .he-social-icon { width: 42px; height: 42px; border-radius: 50%; background: #ffffff; border: 1px solid; display: flex; align-items: center; justify-content: center; text-decoration: none !important; transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.15s ease; background-repeat: no-repeat; background-position: center; background-size: 20px 20px; } .he-social-icon:hover { transform: translateY(-2px); } .he-social-tg { border-color: #229ED9; background-image: url("data:image/svg+xml;utf8,"); } .he-social-tg:hover { background-color: #229ED9; background-image: url("data:image/svg+xml;utf8,"); } .he-social-fb { border-color: #1877F2; background-image: url("data:image/svg+xml;utf8,"); } .he-social-fb:hover { background-color: #1877F2; background-image: url("data:image/svg+xml;utf8,"); } .he-social-ig { border-color: #E4405F; background-image: url("data:image/svg+xml;utf8,"); } .he-social-ig:hover { border-color: #d62976; background-image: url("data:image/svg+xml;utf8,"), linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%); } .he-social-tt { border-color: #1a1a1a; background-image: url("data:image/svg+xml;utf8,"); } .he-social-tt:hover { background-color: #1a1a1a; background-image: url("data:image/svg+xml;utf8,"); } .he-social-yt { border-color: #FF0000; background-image: url("data:image/svg+xml;utf8,"); } .he-social-yt:hover { background-color: #FF0000; background-image: url("data:image/svg+xml;utf8,"); } /* Sekundárne linky — pills */ #navigation ul.navigationActions, .navigation-in-bottom ul.top-navigation-bar-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; padding: 0; margin: 6px 0 2px; background: transparent; } #navigation ul.navigationActions > li, .navigation-in-bottom ul.top-navigation-bar-menu > li { background: transparent; border: none; margin: 0; padding: 0; } #navigation ul.navigationActions > li > a, .navigation-in-bottom ul.top-navigation-bar-menu > li > a { display: inline-block; font-size: 12px; padding: 6px 12px; border: 0.5px solid var(--he-tag-border); border-radius: 999px; color: var(--he-text); background: #ffffff; font-weight: 500; text-transform: none; letter-spacing: 0; text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } #navigation ul.navigationActions > li > a:hover, .navigation-in-bottom ul.top-navigation-bar-menu > li > a:hover { color: #ffffff !important; background: var(--he-green) !important; border-color: var(--he-green) !important; } }