/* ========================================================================== KP Header — kuvamise variandid (kp_header_variant, väärtused 1–10) Iga variant lisab #kp-header'ile klassi kp-hv-{N}. Kuna Divi Teema Ehitaja võib #kp-navbar liigutada otse alla (vt frontend.js), on iga navbar/menüü reegel kirjutatud DUAL-SELEKTORIGA, täpselt samas mustris nagu ülejäänud frontend.css: #kp-header.kp-hv-N ..., body > #kp-navbar.kp-hv-N ... Ainult topbar-i puudutavad reeglid ei vaja seda, sest topbar ei liigu. Struktuurimuudatused (positsioon, laius, järjekord), mis võiksid mobiilis segada juba toimivat hamburger-menüüd, on piiratud @media(min-width:861px) sisse. ========================================================================== */ /* ── Variant 1: Klassikaline ────────────────────────────────────────────── Vaikimisi kuju (vt frontend.css baasreegleid) — siin midagi üle ei kirjutata. */ /* ── Variant 2: Keskjoondatud logo ──────────────────────────────────────── Menüü lüüakse JS-is (frontend.js) kaheks pooleks ja logo tõstetakse nende vahele — kõik kolm on siis reas #kp-nav sees (mitte logo peal hõljumas), nii et miski ei kattu. Vt frontend.js "KESKJOONDATUD LOGO — MENÜÜ SPLIT". overflow-x:hidden #kp-nav peal on turvavõrk: kui menüüpunkte on nii palju või ekraan nii kitsas, et pool menüüst + logo + CTA ei mahu kokku, lõikab see liigse osa puhtalt navi enda serva pealt ära — mitte ei jäta seda "Küsi pakkumist" nupu alla vedelema. */ @media (min-width: 861px) { #kp-header.kp-hv-2 #kp-nav, body > #kp-navbar.kp-hv-2 #kp-nav { justify-content: center !important; overflow-x: hidden !important; overflow-y: visible !important; } #kp-header.kp-hv-2 #kp-nav .kp-menu, body > #kp-navbar.kp-hv-2 #kp-nav .kp-menu { flex: 1 1 0 !important; min-width: 0 !important; } #kp-header.kp-hv-2 #kp-nav .kp-menu.kp-menu-half-left, body > #kp-navbar.kp-hv-2 #kp-nav .kp-menu.kp-menu-half-left { justify-content: flex-end !important; } #kp-header.kp-hv-2 #kp-nav .kp-menu.kp-menu-half-right, body > #kp-navbar.kp-hv-2 #kp-nav .kp-menu.kp-menu-half-right { justify-content: flex-start !important; } #kp-header.kp-hv-2 #kp-nav .kp-logo-link, body > #kp-navbar.kp-hv-2 #kp-nav .kp-logo-link { flex: 0 0 auto !important; position: static !important; margin: 0 20px !important; } #kp-header.kp-hv-2 .kp-nav .kp-menu > li > a, body > #kp-navbar.kp-hv-2 .kp-nav .kp-menu > li > a { padding: 0 10px !important; font-size: 15px !important; } } /* ── Variant 3: Ujuv pill-navigatsioon ──────────────────────────────────── Navbar ise jääb läbipaistvaks ribaks, sisemine "pill" hõljub selle sees ümarate nurkade ja varjuga. CTA-nuppu ei näidata — ainult logo, menüü ja otsing/hamburger, minimalistlikuma mulje jaoks. */ @media (min-width: 861px) { #kp-header.kp-hv-3 .kp-navbar, body > #kp-navbar.kp-hv-3 { background: transparent !important; box-shadow: none !important; border-bottom: none !important; } /* Base .kp-transparent.kp-scrolled reegel lööks navbari muidu kerimisel valgeks tagasi — variant 3-s peab navbar ise ALATI läbipaistev jääma, sest värvi/varju annab pill (.kp-navbar-inner), mitte navbar ise. */ #kp-header.kp-hv-3.kp-transparent.kp-scrolled .kp-navbar, body > #kp-navbar.kp-hv-3.kp-transparent.kp-scrolled { background: transparent !important; box-shadow: none !important; } #kp-header.kp-hv-3 .kp-navbar-inner, body > #kp-navbar.kp-hv-3 .kp-navbar-inner { max-width: 1100px !important; height: calc(var(--kp-navbar-h) - 20px) !important; margin: 0 auto !important; border-radius: 999px !important; background: #fff !important; box-shadow: 0 10px 30px rgba(0,0,0,.16) !important; padding: 0 12px 0 28px !important; } #kp-header.kp-hv-3.kp-transparent:not(.kp-scrolled) .kp-navbar-inner, body > #kp-navbar.kp-hv-3.kp-transparent:not(.kp-scrolled) .kp-navbar-inner { background: rgba(255,255,255,.16) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } #kp-header.kp-hv-3.kp-scrolled .kp-navbar-inner, body > #kp-navbar.kp-hv-3.kp-scrolled .kp-navbar-inner { background: #fff !important; } /* Logo + otsing/hamburger kasutavad PHP poolt lisatud fikseeritud navbar_h kõrgust — sundime need pilli enda (vähendatud) kõrgusega kokku, muidu jääksid kõrgemaks kui ümar riba. */ #kp-header.kp-hv-3 .kp-logo-link, body > #kp-navbar.kp-hv-3 .kp-logo-link, #kp-header.kp-hv-3 .kp-nav-right, body > #kp-navbar.kp-hv-3 .kp-nav-right { height: calc(var(--kp-navbar-h) - 20px) !important; } /* CTA-nupp eemaldatud sellest variandist täielikult */ #kp-header.kp-hv-3 .kp-cta-btn, body > #kp-navbar.kp-hv-3 .kp-cta-btn { display: none !important; } #kp-header.kp-hv-3 .kp-search-toggle, body > #kp-navbar.kp-hv-3 .kp-search-toggle { width: 30px !important; height: 30px !important; } } /* ── Variant 4: Klaasmorfism ─────────────────────────────────────────────── "Liquid glass" / neo-glassmorphism — hägustatud läbipaistev taust, mis laseb sisu selja taga aimata. Töötab hästi nii tavalises kui läbipaistvas režiimis. */ #kp-header.kp-hv-4 .kp-navbar, body > #kp-navbar.kp-hv-4 { background: rgba(255,255,255,.6) !important; backdrop-filter: blur(16px) saturate(160%) !important; -webkit-backdrop-filter: blur(16px) saturate(160%) !important; border-bottom: 1px solid rgba(255,255,255,.5) !important; box-shadow: 0 4px 24px rgba(0,0,0,.06) !important; } #kp-header.kp-hv-4.kp-transparent:not(.kp-scrolled) .kp-navbar, body > #kp-navbar.kp-hv-4.kp-transparent:not(.kp-scrolled) { background: rgba(255,255,255,.14) !important; border-bottom: 1px solid rgba(255,255,255,.28) !important; } #kp-header.kp-hv-4 .kp-topbar { background: rgba(0,0,0,.78) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; } /* ── Variant 5: Tume navigatsioon ───────────────────────────────────────── Süsimust/tumehall riba heleda tekstiga — 2026. aasta "dark mode as default" trend, sobib eriti hästi kontrastseks aktsendiga brändidele. */ #kp-header.kp-hv-5 .kp-topbar { background: #0d0d10 !important; } #kp-header.kp-hv-5 .kp-topbar-item, #kp-header.kp-hv-5 .kp-topbar-lang, #kp-header.kp-hv-5 .kp-topbar-lang-label, #kp-header.kp-hv-5 .kp-topbar-social-link { color: rgba(255,255,255,.85) !important; } #kp-header.kp-hv-5 .kp-navbar, body > #kp-navbar.kp-hv-5 { background: #0d0d10 !important; } /* Base .kp-transparent.kp-scrolled reeglil on kõrgem spetsiifilisus ja see lööks navbari muidu kerimisel valgeks tagasi — sunnime siin uuesti tumedaks. */ #kp-header.kp-hv-5.kp-transparent.kp-scrolled .kp-navbar, body > #kp-navbar.kp-hv-5.kp-transparent.kp-scrolled { background: #0d0d10 !important; } #kp-header.kp-hv-5 .kp-logo-text, body > #kp-navbar.kp-hv-5 .kp-logo-text { color: #fff !important; } #kp-header.kp-hv-5 .kp-nav .kp-menu > li > a, body > #kp-navbar.kp-hv-5 .kp-nav .kp-menu > li > a, #kp-header.kp-hv-5 .kp-nav .kp-menu > li > a:link, body > #kp-navbar.kp-hv-5 .kp-nav .kp-menu > li > a:link, #kp-header.kp-hv-5 .kp-nav .kp-menu > li > a:visited, body > #kp-navbar.kp-hv-5 .kp-nav .kp-menu > li > a:visited { color: rgba(255,255,255,.88) !important; } #kp-header.kp-hv-5 .kp-nav .kp-menu > li > a:hover, body > #kp-navbar.kp-hv-5 .kp-nav .kp-menu > li > a:hover, #kp-header.kp-hv-5 .kp-nav .kp-menu > li.current-menu-item > a, body > #kp-navbar.kp-hv-5 .kp-nav .kp-menu > li.current-menu-item > a { color: #fff !important; background: transparent !important; } #kp-header.kp-hv-5 .kp-nav .kp-menu > li > a:hover::before, body > #kp-navbar.kp-hv-5 .kp-nav .kp-menu > li > a:hover::before, #kp-header.kp-hv-5 .kp-nav .kp-menu > li.current-menu-item > a::before, body > #kp-navbar.kp-hv-5 .kp-nav .kp-menu > li.current-menu-item > a::before { background: rgba(255,255,255,.12) !important; } #kp-header.kp-hv-5 .kp-hamburger span, body > #kp-navbar.kp-hv-5 .kp-hamburger span, #kp-header.kp-hv-5 .kp-nav-close svg, body > #kp-navbar.kp-hv-5 .kp-nav-close svg { background: #fff !important; } #kp-header.kp-hv-5 .kp-search-toggle, body > #kp-navbar.kp-hv-5 .kp-search-toggle { background: rgba(255,255,255,.12) !important; } /* ── Variant 6: Rõhutatud CTA ───────────────────────────────────────────── Menüü taandub tagaplaanile (õhem, vaiksem), CTA-nupp muutub suureks, ümaraks ja varjuga rõhutatud tegevuskutseks. Konversioonile suunatud stiil. */ #kp-header.kp-hv-6 .kp-nav .kp-menu > li > a, body > #kp-navbar.kp-hv-6 .kp-nav .kp-menu > li > a { font-weight: 500 !important; font-size: 14px !important; letter-spacing: .01em !important; } #kp-header.kp-hv-6 .kp-cta-btn, body > #kp-navbar.kp-hv-6 .kp-cta-btn { padding: 12px 26px !important; font-size: 15px !important; border-radius: 999px !important; box-shadow: 0 8px 20px rgba(0,0,0,.18) !important; } @media (min-width: 861px) { #kp-header.kp-hv-6 .kp-cta-btn, body > #kp-navbar.kp-hv-6 .kp-cta-btn { transform: scale(1.06); } } /* ── Variant 7: Kaherealine rõhk ───────────────────────────────────────── Topbar muutub tumedaks kontaktribaks, navbar saab allääre-aktsendi ja jämedama menüüfondi — kaks selgelt eristuvat "korrust", nagu suuremad e-poe/ajakirjandusbrändid kasutavad. */ #kp-header.kp-hv-7 .kp-topbar { background: var(--kp-navy, #000000) !important; } #kp-header.kp-hv-7 .kp-topbar-item, #kp-header.kp-hv-7 .kp-topbar-lang, #kp-header.kp-hv-7 .kp-topbar-lang-label, #kp-header.kp-hv-7 .kp-topbar-social-link { color: rgba(255,255,255,.85) !important; } #kp-header.kp-hv-7 .kp-navbar, body > #kp-navbar.kp-hv-7 { border-top: 3px solid var(--kp-orange, #0089d0) !important; box-shadow: 0 6px 20px rgba(0,0,0,.07) !important; } #kp-header.kp-hv-7 .kp-nav .kp-menu > li > a, body > #kp-navbar.kp-hv-7 .kp-nav .kp-menu > li > a { font-size: 17px !important; font-weight: 800 !important; letter-spacing: .03em !important; } /* ── Variant 8: Kontaktriba allpool ────────────────────────────────────── Peamenüürida tõuseb kõige ülemiseks, kontaktriba (telefon/e-post/soc/keel) nihkub selle alla. Mõlemad on ikka position:fixed, ainult "top" väärtused vahetavad kohad — kõrguste summa (ja seega lehe sisu paigutus) ei muutu. Piiratud desktopile, sest mobiilis on topbar niikuinii peidus. */ @media (min-width: 861px) { #kp-header.kp-hv-8 .kp-navbar, body > #kp-navbar.kp-hv-8 { top: 0 !important; box-shadow: 0 2px 14px rgba(0,0,0,.08) !important; } #kp-header.kp-hv-8 .kp-topbar { top: var(--kp-navbar-h) !important; border-top: 1px solid rgba(0,0,0,.06); box-shadow: none !important; } body.admin-bar #kp-header.kp-hv-8 .kp-navbar, body.admin-bar > #kp-navbar.kp-hv-8 { top: 32px !important; } body.admin-bar #kp-header.kp-hv-8 .kp-topbar { top: calc(var(--kp-navbar-h) + 32px) !important; } } /* ── Variant 9: Tume menüü, riba all ───────────────────────────────────── Sama pööratud järjekord mis variant 8, aga peale selle on ülemine menüürida tume ja rõhutatud — kontaktriba jääb vaikselt selle alla, heledal taustal. */ @media (min-width: 861px) { #kp-header.kp-hv-9 .kp-navbar, body > #kp-navbar.kp-hv-9 { top: 0 !important; box-shadow: 0 2px 14px rgba(0,0,0,.08) !important; background: #0d0d10 !important; } #kp-header.kp-hv-9.kp-transparent.kp-scrolled .kp-navbar, body > #kp-navbar.kp-hv-9.kp-transparent.kp-scrolled { background: #0d0d10 !important; } #kp-header.kp-hv-9 .kp-topbar { top: var(--kp-navbar-h) !important; background: #f2f4f6 !important; border-top: 1px solid rgba(0,0,0,.06); box-shadow: none !important; } body.admin-bar #kp-header.kp-hv-9 .kp-navbar, body.admin-bar > #kp-navbar.kp-hv-9 { top: 32px !important; } body.admin-bar #kp-header.kp-hv-9 .kp-topbar { top: calc(var(--kp-navbar-h) + 32px) !important; } #kp-header.kp-hv-9 .kp-topbar-item, #kp-header.kp-hv-9 .kp-topbar-lang, #kp-header.kp-hv-9 .kp-topbar-lang-label { color: #333 !important; text-shadow: none !important; } #kp-header.kp-hv-9 .kp-logo-text, body > #kp-navbar.kp-hv-9 .kp-logo-text { color: #fff !important; } #kp-header.kp-hv-9 .kp-nav .kp-menu > li > a, body > #kp-navbar.kp-hv-9 .kp-nav .kp-menu > li > a, #kp-header.kp-hv-9 .kp-nav .kp-menu > li > a:link, body > #kp-navbar.kp-hv-9 .kp-nav .kp-menu > li > a:link, #kp-header.kp-hv-9 .kp-nav .kp-menu > li > a:visited, body > #kp-navbar.kp-hv-9 .kp-nav .kp-menu > li > a:visited { color: rgba(255,255,255,.88) !important; } #kp-header.kp-hv-9 .kp-nav .kp-menu > li > a:hover, body > #kp-navbar.kp-hv-9 .kp-nav .kp-menu > li > a:hover, #kp-header.kp-hv-9 .kp-nav .kp-menu > li.current-menu-item > a, body > #kp-navbar.kp-hv-9 .kp-nav .kp-menu > li.current-menu-item > a { color: #fff !important; background: transparent !important; } #kp-header.kp-hv-9 .kp-nav .kp-menu > li > a:hover::before, body > #kp-navbar.kp-hv-9 .kp-nav .kp-menu > li > a:hover::before, #kp-header.kp-hv-9 .kp-nav .kp-menu > li.current-menu-item > a::before, body > #kp-navbar.kp-hv-9 .kp-nav .kp-menu > li.current-menu-item > a::before { background: rgba(255,255,255,.12) !important; } } /* ── Variant 10: Diagonaalne "Kontakt" ──────────────────────────────────── Ühtne tume navbar. CTA-nuppu pole. Selle asemel on menüü VIIMANE punkt (tavaliselt "Kontakt") tõstetud tavavoost välja navbari paremasse serva, diagonaalselt lõigatud sinise taustaplokina — vt kasutaja soovi: "kontakt rõhutatakse ja see paikneb diagonaali peal, sinine taust diagonaalil". */ @media (min-width: 861px) { #kp-header.kp-hv-10 .kp-navbar, body > #kp-navbar.kp-hv-10 { background: #0d0d10 !important; } #kp-header.kp-hv-10.kp-transparent.kp-scrolled .kp-navbar, body > #kp-navbar.kp-hv-10.kp-transparent.kp-scrolled { background: #0d0d10 !important; } #kp-header.kp-hv-10 .kp-navbar-inner, body > #kp-navbar.kp-hv-10 .kp-navbar-inner { position: relative !important; overflow: visible !important; } /* Otsingunupp (nav-right) kolib logo kõrvale, et see ei kattuks navbari paremasse serva tõstetud diagonaalse "Kontakt" plokiga. */ #kp-header.kp-hv-10 .kp-logo-link, body > #kp-navbar.kp-hv-10 .kp-logo-link { order: 0 !important; } #kp-header.kp-hv-10 .kp-nav-right, body > #kp-navbar.kp-hv-10 .kp-nav-right { order: 1 !important; margin-left: 16px !important; margin-right: 12px !important; } #kp-header.kp-hv-10 #kp-nav, body > #kp-navbar.kp-hv-10 #kp-nav { order: 2 !important; } /* CTA-nupp eemaldatud täielikult */ #kp-header.kp-hv-10 .kp-cta-btn, body > #kp-navbar.kp-hv-10 .kp-cta-btn { display: none !important; } #kp-header.kp-hv-10 .kp-logo-text, body > #kp-navbar.kp-hv-10 .kp-logo-text { color: #fff !important; } #kp-header.kp-hv-10 .kp-nav .kp-menu > li > a, body > #kp-navbar.kp-hv-10 .kp-nav .kp-menu > li > a, #kp-header.kp-hv-10 .kp-nav .kp-menu > li > a:link, body > #kp-navbar.kp-hv-10 .kp-nav .kp-menu > li > a:link, #kp-header.kp-hv-10 .kp-nav .kp-menu > li > a:visited, body > #kp-navbar.kp-hv-10 .kp-nav .kp-menu > li > a:visited { color: rgba(255,255,255,.85) !important; } #kp-header.kp-hv-10 .kp-nav .kp-menu > li > a:hover, body > #kp-navbar.kp-hv-10 .kp-nav .kp-menu > li > a:hover, #kp-header.kp-hv-10 .kp-nav .kp-menu > li.current-menu-item > a, body > #kp-navbar.kp-hv-10 .kp-nav .kp-menu > li.current-menu-item > a { color: #fff !important; background: transparent !important; } #kp-header.kp-hv-10 .kp-nav .kp-menu > li > a:hover::before, body > #kp-navbar.kp-hv-10 .kp-nav .kp-menu > li > a:hover::before, #kp-header.kp-hv-10 .kp-nav .kp-menu > li.current-menu-item > a::before, body > #kp-navbar.kp-hv-10 .kp-nav .kp-menu > li.current-menu-item > a::before { background: rgba(255,255,255,.12) !important; } /* Jäta menüü tavavoole ruumi, et eelnevad punktid ei jääks viimase (nüüd navbari servast välja tõstetud) punkti taha peitu. */ #kp-header.kp-hv-10 .kp-nav .kp-menu, body > #kp-navbar.kp-hv-10 .kp-nav .kp-menu { padding-right: 160px !important; } /* Viimane menüüpunkt — tõstetud navbari paremasse serva, diagonaalselt lõigatud sinise taustaplokina, kogu navbari kõrguses. */ #kp-header.kp-hv-10 .kp-nav .kp-menu > li:last-child, body > #kp-navbar.kp-hv-10 .kp-nav .kp-menu > li:last-child { position: absolute !important; top: 0 !important; bottom: 0 !important; right: 0 !important; display: flex !important; align-items: stretch !important; } #kp-header.kp-hv-10 .kp-nav .kp-menu > li:last-child > a, body > #kp-navbar.kp-hv-10 .kp-nav .kp-menu > li:last-child > a { position: relative !important; height: 100% !important; display: flex !important; align-items: center !important; padding: 0 26px 0 40px !important; background: var(--kp-orange, #0089d0) !important; color: #fff !important; font-weight: 800 !important; font-size: 15px !important; letter-spacing: .02em !important; clip-path: polygon(40% 0, 100% 0, 100% 100%, 8% 100%) !important; } #kp-header.kp-hv-10 .kp-nav .kp-menu > li:last-child > a::after, body > #kp-navbar.kp-hv-10 .kp-nav .kp-menu > li:last-child > a::after { display: none !important; } #kp-header.kp-hv-10 .kp-nav .kp-menu > li:last-child > a:hover, body > #kp-navbar.kp-hv-10 .kp-nav .kp-menu > li:last-child > a:hover, #kp-header.kp-hv-10 .kp-nav .kp-menu > li:last-child.current-menu-item > a, body > #kp-navbar.kp-hv-10 .kp-nav .kp-menu > li:last-child.current-menu-item > a { color: #fff !important; filter: brightness(1.12); } } /* ========================================================================== STICKY / SCROLLED — navbar taust läheb MUSTAKS KÕIGIL VARIANTIDEL Kehtib olenemata sellest, kas läbipaistev režiim on sees või mitte — niipea kui #kp-header/#kp-navbar saab JS-ilt klassi "kp-scrolled", läheb taust mustaks ja tekst heledaks. Kirjutatud iga variandi kohta eraldi (mitte üldreeglina), et võita kõigi variantide endi (kõrgema spetsiifilisusega) taustareeglid — sh baasreegel, mis muidu läbipaistvas+ kerimise režiimis navbari valgeks lööks. Variant 3 erineb: seal on nähtav element pill (.kp-navbar-inner), mitte navbar ise, seega mustaks läheb pill. ========================================================================== */ #kp-header.kp-hv-1.kp-scrolled .kp-navbar, body > #kp-navbar.kp-hv-1.kp-scrolled, #kp-header.kp-hv-2.kp-scrolled .kp-navbar, body > #kp-navbar.kp-hv-2.kp-scrolled, #kp-header.kp-hv-4.kp-scrolled .kp-navbar, body > #kp-navbar.kp-hv-4.kp-scrolled, #kp-header.kp-hv-6.kp-scrolled .kp-navbar, body > #kp-navbar.kp-hv-6.kp-scrolled, #kp-header.kp-hv-7.kp-scrolled .kp-navbar, body > #kp-navbar.kp-hv-7.kp-scrolled, #kp-header.kp-hv-8.kp-scrolled .kp-navbar, body > #kp-navbar.kp-hv-8.kp-scrolled { background: #0d0d10 !important; box-shadow: 0 2px 14px rgba(0,0,0,.18) !important; border-bottom: none !important; } #kp-header.kp-hv-3.kp-scrolled .kp-navbar-inner, body > #kp-navbar.kp-hv-3.kp-scrolled .kp-navbar-inner { background: #0d0d10 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Menüüteksti, logo ja ikoonide värv heledaks samadel variantidel kerides — muidu jääks tume tekst musta tausta peale nähtamatuks. Variandid 5, 9, 10 on juba oma põhikujul tumeda taustaga heleda tekstiga, ei vaja siin midagi. */ #kp-header.kp-hv-1.kp-scrolled .kp-logo-text, body > #kp-navbar.kp-hv-1.kp-scrolled .kp-logo-text, #kp-header.kp-hv-2.kp-scrolled .kp-logo-text, body > #kp-navbar.kp-hv-2.kp-scrolled .kp-logo-text, #kp-header.kp-hv-3.kp-scrolled .kp-logo-text, body > #kp-navbar.kp-hv-3.kp-scrolled .kp-logo-text, #kp-header.kp-hv-4.kp-scrolled .kp-logo-text, body > #kp-navbar.kp-hv-4.kp-scrolled .kp-logo-text, #kp-header.kp-hv-6.kp-scrolled .kp-logo-text, body > #kp-navbar.kp-hv-6.kp-scrolled .kp-logo-text, #kp-header.kp-hv-7.kp-scrolled .kp-logo-text, body > #kp-navbar.kp-hv-7.kp-scrolled .kp-logo-text, #kp-header.kp-hv-8.kp-scrolled .kp-logo-text, body > #kp-navbar.kp-hv-8.kp-scrolled .kp-logo-text { color: #fff !important; } #kp-header.kp-hv-1.kp-scrolled .kp-nav .kp-menu > li > a, body > #kp-navbar.kp-hv-1.kp-scrolled .kp-nav .kp-menu > li > a, #kp-header.kp-hv-2.kp-scrolled .kp-nav .kp-menu > li > a, body > #kp-navbar.kp-hv-2.kp-scrolled .kp-nav .kp-menu > li > a, #kp-header.kp-hv-3.kp-scrolled .kp-nav .kp-menu > li > a, body > #kp-navbar.kp-hv-3.kp-scrolled .kp-nav .kp-menu > li > a, #kp-header.kp-hv-4.kp-scrolled .kp-nav .kp-menu > li > a, body > #kp-navbar.kp-hv-4.kp-scrolled .kp-nav .kp-menu > li > a, #kp-header.kp-hv-6.kp-scrolled .kp-nav .kp-menu > li > a, body > #kp-navbar.kp-hv-6.kp-scrolled .kp-nav .kp-menu > li > a, #kp-header.kp-hv-7.kp-scrolled .kp-nav .kp-menu > li > a, body > #kp-navbar.kp-hv-7.kp-scrolled .kp-nav .kp-menu > li > a, #kp-header.kp-hv-8.kp-scrolled .kp-nav .kp-menu > li > a, body > #kp-navbar.kp-hv-8.kp-scrolled .kp-nav .kp-menu > li > a { color: rgba(255,255,255,.88) !important; } #kp-header.kp-hv-1.kp-scrolled .kp-nav .kp-menu > li > a:hover, body > #kp-navbar.kp-hv-1.kp-scrolled .kp-nav .kp-menu > li > a:hover, #kp-header.kp-hv-1.kp-scrolled .kp-nav .kp-menu > li.current-menu-item > a, body > #kp-navbar.kp-hv-1.kp-scrolled .kp-nav .kp-menu > li.current-menu-item > a, #kp-header.kp-hv-2.kp-scrolled .kp-nav .kp-menu > li > a:hover, body > #kp-navbar.kp-hv-2.kp-scrolled .kp-nav .kp-menu > li > a:hover, #kp-header.kp-hv-2.kp-scrolled .kp-nav .kp-menu > li.current-menu-item > a, body > #kp-navbar.kp-hv-2.kp-scrolled .kp-nav .kp-menu > li.current-menu-item > a, #kp-header.kp-hv-3.kp-scrolled .kp-nav .kp-menu > li > a:hover, body > #kp-navbar.kp-hv-3.kp-scrolled .kp-nav .kp-menu > li > a:hover, #kp-header.kp-hv-3.kp-scrolled .kp-nav .kp-menu > li.current-menu-item > a, body > #kp-navbar.kp-hv-3.kp-scrolled .kp-nav .kp-menu > li.current-menu-item > a, #kp-header.kp-hv-4.kp-scrolled .kp-nav .kp-menu > li > a:hover, body > #kp-navbar.kp-hv-4.kp-scrolled .kp-nav .kp-menu > li > a:hover, #kp-header.kp-hv-4.kp-scrolled .kp-nav .kp-menu > li.current-menu-item > a, body > #kp-navbar.kp-hv-4.kp-scrolled .kp-nav .kp-menu > li.current-menu-item > a, #kp-header.kp-hv-6.kp-scrolled .kp-nav .kp-menu > li > a:hover, body > #kp-navbar.kp-hv-6.kp-scrolled .kp-nav .kp-menu > li > a:hover, #kp-header.kp-hv-6.kp-scrolled .kp-nav .kp-menu > li.current-menu-item > a, body > #kp-navbar.kp-hv-6.kp-scrolled .kp-nav .kp-menu > li.current-menu-item > a, #kp-header.kp-hv-7.kp-scrolled .kp-nav .kp-menu > li > a:hover, body > #kp-navbar.kp-hv-7.kp-scrolled .kp-nav .kp-menu > li > a:hover, #kp-header.kp-hv-7.kp-scrolled .kp-nav .kp-menu > li.current-menu-item > a, body > #kp-navbar.kp-hv-7.kp-scrolled .kp-nav .kp-menu > li.current-menu-item > a, #kp-header.kp-hv-8.kp-scrolled .kp-nav .kp-menu > li > a:hover, body > #kp-navbar.kp-hv-8.kp-scrolled .kp-nav .kp-menu > li > a:hover, #kp-header.kp-hv-8.kp-scrolled .kp-nav .kp-menu > li.current-menu-item > a, body > #kp-navbar.kp-hv-8.kp-scrolled .kp-nav .kp-menu > li.current-menu-item > a { color: #fff !important; background: transparent !important; } #kp-header.kp-hv-1.kp-scrolled .kp-nav .kp-menu > li > a:hover::before, body > #kp-navbar.kp-hv-1.kp-scrolled .kp-nav .kp-menu > li > a:hover::before, #kp-header.kp-hv-1.kp-scrolled .kp-nav .kp-menu > li.current-menu-item > a::before, body > #kp-navbar.kp-hv-1.kp-scrolled .kp-nav .kp-menu > li.current-menu-item > a::before, #kp-header.kp-hv-2.kp-scrolled .kp-nav .kp-menu > li > a:hover::before, body > #kp-navbar.kp-hv-2.kp-scrolled .kp-nav .kp-menu > li > a:hover::before, #kp-header.kp-hv-2.kp-scrolled .kp-nav .kp-menu > li.current-menu-item > a::before, body > #kp-navbar.kp-hv-2.kp-scrolled .kp-nav .kp-menu > li.current-menu-item > a::before, #kp-header.kp-hv-3.kp-scrolled .kp-nav .kp-menu > li > a:hover::before, body > #kp-navbar.kp-hv-3.kp-scrolled .kp-nav .kp-menu > li > a:hover::before, #kp-header.kp-hv-3.kp-scrolled .kp-nav .kp-menu > li.current-menu-item > a::before, body > #kp-navbar.kp-hv-3.kp-scrolled .kp-nav .kp-menu > li.current-menu-item > a::before, #kp-header.kp-hv-4.kp-scrolled .kp-nav .kp-menu > li > a:hover::before, body > #kp-navbar.kp-hv-4.kp-scrolled .kp-nav .kp-menu > li > a:hover::before, #kp-header.kp-hv-4.kp-scrolled .kp-nav .kp-menu > li.current-menu-item > a::before, body > #kp-navbar.kp-hv-4.kp-scrolled .kp-nav .kp-menu > li.current-menu-item > a::before, #kp-header.kp-hv-6.kp-scrolled .kp-nav .kp-menu > li > a:hover::before, body > #kp-navbar.kp-hv-6.kp-scrolled .kp-nav .kp-menu > li > a:hover::before, #kp-header.kp-hv-6.kp-scrolled .kp-nav .kp-menu > li.current-menu-item > a::before, body > #kp-navbar.kp-hv-6.kp-scrolled .kp-nav .kp-menu > li.current-menu-item > a::before, #kp-header.kp-hv-7.kp-scrolled .kp-nav .kp-menu > li > a:hover::before, body > #kp-navbar.kp-hv-7.kp-scrolled .kp-nav .kp-menu > li > a:hover::before, #kp-header.kp-hv-7.kp-scrolled .kp-nav .kp-menu > li.current-menu-item > a::before, body > #kp-navbar.kp-hv-7.kp-scrolled .kp-nav .kp-menu > li.current-menu-item > a::before, #kp-header.kp-hv-8.kp-scrolled .kp-nav .kp-menu > li > a:hover::before, body > #kp-navbar.kp-hv-8.kp-scrolled .kp-nav .kp-menu > li > a:hover::before, #kp-header.kp-hv-8.kp-scrolled .kp-nav .kp-menu > li.current-menu-item > a::before, body > #kp-navbar.kp-hv-8.kp-scrolled .kp-nav .kp-menu > li.current-menu-item > a::before { background: rgba(255,255,255,.12) !important; } #kp-header.kp-hv-1.kp-scrolled .kp-hamburger span, body > #kp-navbar.kp-hv-1.kp-scrolled .kp-hamburger span, #kp-header.kp-hv-2.kp-scrolled .kp-hamburger span, body > #kp-navbar.kp-hv-2.kp-scrolled .kp-hamburger span, #kp-header.kp-hv-3.kp-scrolled .kp-hamburger span, body > #kp-navbar.kp-hv-3.kp-scrolled .kp-hamburger span, #kp-header.kp-hv-4.kp-scrolled .kp-hamburger span, body > #kp-navbar.kp-hv-4.kp-scrolled .kp-hamburger span, #kp-header.kp-hv-6.kp-scrolled .kp-hamburger span, body > #kp-navbar.kp-hv-6.kp-scrolled .kp-hamburger span, #kp-header.kp-hv-7.kp-scrolled .kp-hamburger span, body > #kp-navbar.kp-hv-7.kp-scrolled .kp-hamburger span, #kp-header.kp-hv-8.kp-scrolled .kp-hamburger span, body > #kp-navbar.kp-hv-8.kp-scrolled .kp-hamburger span { background: #fff !important; }