/********* Compiled - Do not edit *********/ :root{--color-primary:#ef443a;--color-secondary:#22282c;--color-gradient-start:#ffffff;--color-gradient-stop:#ffffff;}.woocommerce ul.products, .woocommerce-page ul.products{margin-left:-15px;margin-right:-15px;}.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{padding-left:15px;padding-right:15px;}body{font-family:Open Sans;font-weight:400;line-height:1.7em;font-size:1em;color:#3f3f3f;}body.single-post .blog-single-title{font-family:inherit;}body.single-post .content{font-family:Poppins;font-weight:400;color:#1c1c1c;}.h1,h1{font-family:Open Sans;font-weight:600;line-height:1.2em;letter-spacing:-1;font-size:52px;color:#181b31;}.h2,h2{font-family:Open Sans;font-weight:700;line-height:1.2em;letter-spacing:-1;font-size:40px;color:#181b31;}.h3,h3{font-family:Open Sans;font-weight:600;line-height:1.2em;font-size:32px;color:#181b31;}.h4,h4{font-family:Open Sans;font-weight:600;line-height:1.2em;font-size:25px;color:#181b31;}.h5,h5{font-family:Open Sans;font-weight:600;line-height:1.2em;font-size:21px;color:#181b31;}.h6,h6{font-family:Open Sans;font-weight:400;line-height:1.2em;font-size:18px;color:#181b31;}.main-header .navbar-brand{max-width:120px !important;}.titlebar-inner h1{}.titlebar-inner p{}.titlebar .titlebar-scroll-link{color:rgb(238, 32, 60);}section.vc_row{padding-right:5px;padding-left:5px;}@media ( min-width: 1200px ){.main-header .is-stuck{background:rgb(23, 23, 25) !important;}.mainbar-wrap.is-stuck .social-icon:not(.branded):not(.branded-text) a, .mainbar-wrap.is-stuck .header-module .ld-module-trigger, .mainbar-wrap.is-stuck .main-nav > li > a, .mainbar-wrap.is-stuck .ld-module-search-visible-form .ld-search-form input, .mainbar-wrap.is-stuck .header-module .lqd-custom-menu > li > a{color:rgb(255, 255, 255) !important;}.mainbar-wrap.is-stuck .mainbar-wrap.is-stuck .header-module .nav-trigger .bar{background-color:rgb(255, 255, 255) !important;}.mainbar-wrap.is-stuck .header-module .ld-module-trigger-icon, .mainbar-wrap.is-stuck .header-module .ld-module-trigger-txt{color:inherit !important;}.mainbar-wrap.is-stuck .ld-module-search-visible-form .ld-search-form input{border-color:rgb(255, 255, 255) !important;}.mainbar-wrap.is-stuck .social-icon:not(.branded):not(.branded-text) a:hover, .mainbar-wrap.is-stuck .main-nav > li > a:hover, .mainbar-wrap.is-stuck .header-module .lqd-custom-menu > li > a:hover{color:rgb(239, 67, 57) !important;}}@media screen and (max-width: 1199px){.main-header .navbar-header{background:rgb(255, 255, 255);}.main-header .ld-module-trigger, .main-header .ld-search-form .input-icon{color:rgb(239, 66, 59);}.main-header .nav-trigger .bar{background-color:rgb(239, 66, 59);}body[data-mobile-nav-style=classic] .navbar-collapse, body[data-mobile-nav-style=minimal] .navbar-collapse{background:rgba(255, 255, 255, 0.66);color:rgba(0, 0, 0, 0.4);}body[data-mobile-nav-style=modern]:before{background:rgb(255, 255, 255);}ul.nav.main-nav > li > a, ul.nav.main-nav > li > a:hover, .main-nav .children > li.active > a, .main-nav .children > li.current-menu-item > a, .main-nav .children > li.current-menu-ancestor > a, .main-nav .children > li:hover > a, .nav-item-children > li.active > a, .nav-item-children > li.current-menu-item > a, .nav-item-children > li.current-menu-ancestor > a, .nav-item-children > li:hover > a{color:inherit !important;}body[data-mobile-nav-style=modern] .navbar-collapse-clone ul .nav-item-children > li > a, body[data-mobile-nav-style=modern] .navbar-collapse-clone ul > li > a, body[data-mobile-nav-style=modern] .navbar-collapse-clone ul.nav.main-nav .nav-item-children > li > a, body[data-mobile-nav-style=modern] .navbar-collapse-clone ul.nav.main-nav > li > a, .main-nav > li{color:rgb(33, 40, 44);}[data-mobile-nav-style=modern] .navbar-collapse-clone ul .nav-item-children > li > a:hover, [data-mobile-nav-style=modern] .navbar-collapse-clone ul > li > a:hover, [data-mobile-nav-style=modern] .navbar-collapse-clone ul.nav.main-nav .nav-item-children > li > a:hover, [data-mobile-nav-style=modern] .navbar-collapse-clone ul.nav.main-nav > li > a:hover{color:inherit !important;}ul.nav.main-nav > li > a{border-color:rgb(33, 40, 44);}}@media (max-width: 1167px) { header.main-header, header.main-header-overlay, header.site-header, .mainbar-wp, .navbar-header { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; margin-top: 11px !important; margin-left: 3px !important; margin-right: 3px !important; } } /* ========================================== HLAVNÉ POZADIE WEBU DOMINANTNÁ ČIERNA + GRAFIT + ČERVENÝ AKCENT ========================================== */ body::before { content: ""; position: fixed; z-index: 0; inset: 0; background: /* ČervenĂ˝ akcent vÄžavo hore */ radial-gradient( circle at 8% 14%, rgba(239, 67, 57, 0.16) 0%, rgba(239, 67, 57, 0.045) 16%, transparent 34% ), /* VeÄžmi jemnĂ˝ červenĂ˝ odlesk vpravo dole */ radial-gradient( circle at 88% 82%, rgba(239, 67, 57, 0.055) 0%, transparent 27% ), /* MenĹĄie grafitovĂŠ svetlo vpravo hore */ radial-gradient( circle at 88% 20%, rgba(72, 84, 91, 0.19) 0%, rgba(34, 40, 44, 0.06) 18%, transparent 34% ), /* JemnĂŠ grafitovĂŠ svetlo dole */ radial-gradient( circle at 25% 88%, rgba(58, 68, 74, 0.12) 0%, transparent 30% ), /* HlbokĂĄ čierna v strede vpravo */ radial-gradient( circle at 66% 55%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.88) 26%, rgba(0, 0, 0, 0.40) 48%, transparent 65% ), /* DruhĂĄ čierna oblasĹĽ dole vÄžavo */ radial-gradient( circle at 20% 65%, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.52) 28%, transparent 55% ), /* DominantnĂ˝ čierny zĂĄklad */ linear-gradient( 145deg, #000000 0%, #020303 20%, #0b0e10 39%, #030404 56%, #000000 73%, #050607 88%, #000000 100% ); background-size: 135% 135%, 145% 145%, 140% 140%, 150% 150%, 135% 135%, 145% 145%, 100% 100%; pointer-events: none; animation: secureGlobalBackground 17s ease-in-out infinite alternate; } /* ========================================== POHYBLIVÁ AURORA ========================================== */ body::after { content: ""; position: fixed; z-index: 0; inset: -25%; background: /* KoncentrovanĂĄ červenĂĄ Ĺžiara */ radial-gradient( circle at 24% 34%, rgba(239, 67, 57, 0.13) 0%, rgba(239, 67, 57, 0.035) 15%, transparent 30% ), /* TlmenĂĄ grafitovĂĄ Ĺžiara */ radial-gradient( circle at 72% 60%, rgba(72, 84, 91, 0.15) 0%, rgba(34, 40, 44, 0.045) 17%, transparent 34% ), /* VeÄžkĂ˝ pohyblivĂ˝ čierny tieň */ radial-gradient( circle at 50% 72%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.82) 28%, rgba(0, 0, 0, 0.32) 48%, transparent 64% ); filter: blur(62px); opacity: 0.84; pointer-events: none; will-change: transform; animation: secureGlobalAurora 19s ease-in-out infinite alternate; } /* ========================================== POHYB ZÁKLADNÝCH SVETIEL ========================================== */ @keyframes secureGlobalBackground { 0% { background-position: 0% 5%, 100% 100%, 100% 5%, 15% 100%, 65% 55%, 15% 70%, center; } 50% { background-position: 22% 30%, 72% 65%, 72% 42%, 42% 70%, 48% 68%, 35% 45%, center; } 100% { background-position: 48% 54%, 38% 40%, 38% 76%, 70% 38%, 76% 42%, 55% 75%, center; } } /* ========================================== POMALÉ PLÁVANIE AURORY ========================================== */ @keyframes secureGlobalAurora { 0% { transform: translate3d(-5%, -4%, 0) rotate(-3deg) scale(1); } 50% { transform: translate3d(8%, 6%, 0) rotate(2deg) scale(1.07); } 100% { transform: translate3d(-1%, 11%, 0) rotate(-2deg) scale(0.98); } } /* WPBakery vkladĂĄ medzi prvky vlastnĂ˝ style element */ .section-label ~ .fancy-title { margin-top: 0 !important; padding-top: 0 !important; } .section-label ~ .fancy-title h1, .section-label ~ .fancy-title h2, .section-label ~ .fancy-title h3 { margin-top: 0 !important; padding-top: 0 !important; } .section-label span { font-family: inherit !important; } /* OdstrĂĄni prĂĄzdny ĂşvodnĂ˝ odsek pod nadpisom */ .section-label ~ .ld-fancy-heading > p.lqd-highlight-underline:first-child { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; } /* JednotnĂĄ medzera medzi hlavnĂ˝m nadpisom a textom */ .section-label ~ .fancy-title { margin-bottom: 28px !important; } /* ========================================== OPRAVA TMAVÉHO POZADIA NA MOBILE ========================================== */ @media (max-width: 767px) { html, body { background-color: #05080c !important; } #wrap, #content, .site-content, .main-content, .lqd-site-content, .lqd-site-content-wrap, .lqd-site-content-inner { background-color: transparent !important; background-image: none !important; } body::before, body::after { display: block !important; visibility: visible !important; pointer-events: none !important; } body::before { opacity: 1 !important; } body::after { opacity: 0.72 !important; } } /* GlobĂĄlne tmavĂŠ pozadie – desktop aj mobil */ html, body { background-color: #05080c !important; } #wrap, #content, .site-content, .main-content, .lqd-site-content, .lqd-site-content-wrap, .lqd-site-content-inner { background-color: transparent !important; } /* VynĂştenie animĂĄcie pozadia */ body::before { animation: secureGlobalBackground 14s ease-in-out infinite alternate !important; } body::after { animation: secureGlobalAurora 14s ease-in-out infinite alternate !important; } /* ========================================== AVE MODERN MOBILE MENU – BIELY TEXT ========================================== */ @media screen and (max-width: 1199px) { body[data-mobile-nav-style="modern"] .navbar-collapse-clone ul.nav.main-nav > li, body[data-mobile-nav-style="modern"] .navbar-collapse-clone ul.nav.main-nav > li > a, body[data-mobile-nav-style="modern"] .navbar-collapse-clone ul.nav.main-nav > li > a .link-txt, body[data-mobile-nav-style="modern"] .navbar-collapse-clone ul.nav.main-nav > li > a .txt { color: #ffffff !important; opacity: 1 !important; } /* Ĺ Ă­pka pri rozbaÄžovacom menu */ body[data-mobile-nav-style="modern"] .navbar-collapse-clone .submenu-expander, body[data-mobile-nav-style="modern"] .navbar-collapse-clone .submenu-expander i { color: rgba(255, 255, 255, 0.72) !important; } /* PoloĹžky podmenu */ body[data-mobile-nav-style="modern"] .navbar-collapse-clone .nav-item-children > li, body[data-mobile-nav-style="modern"] .navbar-collapse-clone .nav-item-children > li > a, body[data-mobile-nav-style="modern"] .navbar-collapse-clone .nav-item-children > li > a span { color: rgba(255, 255, 255, 0.82) !important; } /* AktĂ­vna poloĹžka a hover */ body[data-mobile-nav-style="modern"] .navbar-collapse-clone ul.nav.main-nav > li.current-menu-item > a, body[data-mobile-nav-style="modern"] .navbar-collapse-clone ul.nav.main-nav > li > a:hover { color: var(--secure-red, #ef4339) !important; } } /* ========================================== SECURE – GLOBÁLNE FARBY ========================================== */ :root { --secure-red: #ef4339; --secure-red-rgb: 239, 67, 57; } /* ========================================== Ĺ TÍTOK NAD NADPISOM ========================================== */ .section-label { display: inline-flex; align-items: center; gap: 11px; width: fit-content; margin-bottom: 18px; padding: 10px 15px; background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 8px; color: rgba(255, 255, 255, 0.88); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0.15em; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 25px rgba(0, 0, 0, 0.14); } .section-label span { color: var(--secure-red); font-size: 13px; text-shadow: 0 0 14px rgba(var(--secure-red-rgb), 0.55); } /* ========================================== TRUST Ĺ TÍTKY ========================================== */ .hero-trust-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; margin-bottom: 32px; } .hero-trust-badge { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 8px; color: rgba(255, 255, 255, 0.78); font-size: 13px; font-weight: 600; line-height: 1.2; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 22px rgba(0, 0, 0, 0.12); } .hero-trust-badge__icon { display: grid; flex: 0 0 19px; width: 19px; height: 19px; place-items: center; background: rgba(var(--secure-red-rgb), 0.15); border: 1px solid rgba(var(--secure-red-rgb), 0.34); border-radius: 50%; color: var(--secure-red); font-size: 10px; font-weight: 900; } /* ========================================== HERO TLAČIDLÁ ========================================== */ .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .hero-button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 15px 25px; border: 1px solid transparent; border-radius: 999px; font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none !important; transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .hero-button--primary { background: var(--secure-red); border-color: rgba(255, 255, 255, 0.14); color: #ffffff !important; box-shadow: 0 14px 32px rgba(var(--secure-red-rgb), 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.20); } .hero-button--secondary { background: rgba(255, 255, 255, 0.055); border-color: rgba(255, 255, 255, 0.14); color: #ffffff !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 30px rgba(0, 0, 0, 0.16); } .hero-button:hover { color: #ffffff !important; transform: translateY(-3px); } .hero-button--primary:hover { background: #ff4b41; box-shadow: 0 18px 40px rgba(var(--secure-red-rgb), 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22); } .hero-button--secondary:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.22); } /* ========================================== HOMEPAGE HERO ========================================== */ .home-hero { min-height: 820px; padding-top: 170px; padding-bottom: 110px; } .home-hero .home-hero__content > .vc_column-inner > .wpb_wrapper { max-width: 760px; } .home-hero__title { margin-bottom: 26px !important; } .home-hero__title h1 { max-width: 760px; margin: 0 !important; color: #ffffff !important; font-size: clamp(48px, 5.1vw, 78px) !important; font-weight: 700 !important; line-height: 1.02 !important; letter-spacing: -0.045em; } .home-hero__text { max-width: 680px; margin-bottom: 0 !important; } .home-hero__text, .home-hero__text p { color: rgba(255, 255, 255, 0.72) !important; font-size: 18px; line-height: 1.65; } /* ========================================== TABLET A MOBIL ========================================== */ @media (max-width: 1199px) { .home-hero { min-height: auto; padding-top: 145px; padding-bottom: 90px; } .home-hero__title h1 { font-size: clamp(45px, 6vw, 66px) !important; } } @media (max-width: 767px) { .home-hero { padding-top: 115px; padding-bottom: 70px; } .home-hero__title { margin-bottom: 20px !important; } .home-hero__title h1 { font-size: clamp(39px, 11vw, 52px) !important; line-height: 1.04 !important; } .home-hero__text, .home-hero__text p { font-size: 16px; line-height: 1.6; } .section-label { margin-bottom: 15px; padding: 9px 12px; font-size: 10px; } .hero-trust-badges { display: grid; grid-template-columns: 1fr; margin-top: 24px; margin-bottom: 28px; } .hero-trust-badge { width: fit-content; } .hero-actions { display: grid; grid-template-columns: 1fr; width: 100%; } .hero-button { width: 100%; } .home-hero__visual { margin-top: 55px; } } /* ========================================== OBMEDZENIE POHYBU ========================================== */ @media (prefers-reduced-motion: reduce) { .hero-button { transition: none; } } /* ========================================== HOMEPAGE – BEZPEČNOSTNÝ EKOSYSTÉM NOVÁ ČIERNO-ANTRACITOVÁ PALETA ========================================== */ .home-hero .home-hero__visual > .vc_column-inner > .wpb_wrapper { display: flex; align-items: center; justify-content: center; min-height: 650px; overflow: visible; } .secure-ecosystem { position: relative; width: 100%; max-width: 630px; height: 650px; isolation: isolate; } /* ========================================== AMBIENTNÉ SVETLO ========================================== */ .secure-ecosystem::before { content: ""; position: absolute; z-index: -2; top: 50%; left: 50%; width: 82%; aspect-ratio: 1 / 1; border-radius: 50%; background: radial-gradient( circle at 44% 45%, rgba(239, 67, 57, 0.11) 0%, rgba(239, 67, 57, 0.045) 30%, transparent 62% ), radial-gradient( circle at 67% 58%, rgba(255, 255, 255, 0.035) 0%, rgba(16, 17, 21, 0.08) 36%, transparent 68% ); filter: blur(24px); transform: translate(-50%, -50%); animation: secureAmbientGlow 6s ease-in-out infinite; } /* ========================================== ORBITÁLNE KRUHY ========================================== */ .secure-ecosystem__orbit { position: absolute; z-index: -1; top: 50%; left: 50%; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); } .secure-ecosystem__orbit--1 { width: 310px; height: 310px; border-color: rgba(239, 67, 57, 0.15); box-shadow: inset 0 0 34px rgba(239, 67, 57, 0.025), 0 0 30px rgba(239, 67, 57, 0.025); animation: secureOrbitPulse 5s ease-in-out infinite; } .secure-ecosystem__orbit--2 { width: 440px; height: 440px; border-style: dashed; border-color: rgba(255, 255, 255, 0.075); animation: secureOrbitRotate 30s linear infinite; } .secure-ecosystem__orbit--3 { width: 570px; height: 570px; border-color: rgba(255, 255, 255, 0.045); animation: secureOrbitPulseLarge 7s ease-in-out infinite; } /* ========================================== CENTRÁLNY PANEL ========================================== */ .secure-ecosystem__core { position: absolute; z-index: 3; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 270px; height: 270px; padding: 30px; background: radial-gradient( circle at 25% 15%, rgba(255, 255, 255, 0.075), transparent 42% ), linear-gradient( 145deg, rgba(24, 25, 30, 0.94) 0%, rgba(12, 13, 17, 0.94) 55%, rgba(5, 6, 8, 0.96) 100% ); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 32px; -webkit-backdrop-filter: blur(22px) saturate(120%); backdrop-filter: blur(22px) saturate(120%); box-shadow: 0 35px 75px rgba(0, 0, 0, 0.48), 0 0 48px rgba(239, 67, 57, 0.065), inset 0 1px 0 rgba(255, 255, 255, 0.10); text-align: center; transform: translate(-50%, -50%); animation: secureCoreFloat 6s ease-in-out infinite; } .secure-ecosystem__core > strong { display: block; margin-top: 20px; color: #ffffff; font-size: 20px; font-weight: 700; line-height: 1.2; } .secure-ecosystem__core > small { display: block; margin-top: 7px; color: rgba(255, 255, 255, 0.52); font-size: 12px; } /* ========================================== STAV SYSTÉMU ========================================== */ .secure-ecosystem__status { position: absolute; top: 17px; left: 50%; display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; background: rgba(3, 4, 6, 0.68); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 10px; color: rgba(255, 255, 255, 0.68); font-size: 10px; font-weight: 600; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transform: translateX(-50%); white-space: nowrap; } .secure-ecosystem__status-dot { width: 7px; height: 7px; background: #43d17d; border-radius: 50%; box-shadow: 0 0 0 4px rgba(67, 209, 125, 0.08), 0 0 12px rgba(67, 209, 125, 0.65); animation: secureStatusPulse 2s ease-in-out infinite; } /* ========================================== Ĺ TÍT ========================================== */ .secure-ecosystem__shield { position: relative; display: grid; width: 78px; height: 78px; place-items: center; background: radial-gradient( circle at 28% 18%, rgba(255, 255, 255, 0.08), transparent 38% ), linear-gradient( 145deg, rgba(239, 67, 57, 0.23), rgba(239, 67, 57, 0.075) ); border: 1px solid rgba(239, 67, 57, 0.38); border-radius: 24px; color: #ef4339; font-size: 34px; box-shadow: 0 18px 35px rgba(239, 67, 57, 0.14), 0 0 25px rgba(239, 67, 57, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.11); } .secure-ecosystem__check { position: absolute; right: -6px; bottom: -6px; display: grid; width: 27px; height: 27px; place-items: center; padding: 0; background: #43d17d; border: 3px solid #08090c; border-radius: 50%; color: #ffffff; font-size: 10px; line-height: 1; box-shadow: 0 0 0 4px rgba(67, 209, 125, 0.06), 0 0 16px rgba(67, 209, 125, 0.32); } /* ========================================== JEDNOTLIVÉ SLUĹ˝BY ========================================== */ .secure-ecosystem__node { position: absolute; z-index: 4; display: flex; align-items: center; gap: 12px; width: 215px; padding: 13px 15px; background: linear-gradient( 145deg, rgba(22, 23, 28, 0.82), rgba(5, 6, 9, 0.88) ); border: 1px solid rgba(255, 255, 255, 0.115); border-radius: 16px; -webkit-backdrop-filter: blur(17px) saturate(115%); backdrop-filter: blur(17px) saturate(115%); box-shadow: 0 20px 42px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.075); animation: secureNodeFloat 5s ease-in-out infinite; } .secure-ecosystem__node::after { content: ""; position: absolute; width: 7px; height: 7px; background: #ef4339; border-radius: 50%; box-shadow: 0 0 0 5px rgba(239, 67, 57, 0.08), 0 0 16px rgba(239, 67, 57, 0.46); animation: secureNodeSignal 3s ease-in-out infinite; } .secure-ecosystem__node-icon { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; background: linear-gradient( 145deg, rgba(239, 67, 57, 0.17), rgba(239, 67, 57, 0.07) ); border: 1px solid rgba(239, 67, 57, 0.28); border-radius: 12px; color: #ef4339; font-size: 15px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 8px 20px rgba(239, 67, 57, 0.055); } .secure-ecosystem__node-text { display: flex; flex-direction: column; min-width: 0; } .secure-ecosystem__node-text strong { color: #ffffff; font-size: 12px; font-weight: 700; line-height: 1.25; } .secure-ecosystem__node-text small { margin-top: 4px; color: rgba(255, 255, 255, 0.48); font-size: 10px; } /* ========================================== POZÍCIE SLUĹ˝IEB ========================================== */ .secure-ecosystem__node--camera { top: 70px; left: 0; animation-delay: -1s; } .secure-ecosystem__node--camera::after { right: -4px; bottom: 11px; } .secure-ecosystem__node--alarm { top: 135px; right: -5px; animation-delay: -2.4s; } .secure-ecosystem__node--alarm::after { left: -4px; bottom: 11px; } .secure-ecosystem__node--intercom { bottom: 135px; left: -5px; animation-delay: -3.2s; } .secure-ecosystem__node--intercom::after { top: 11px; right: -4px; } .secure-ecosystem__node--access { right: 0; bottom: 75px; animation-delay: -4.1s; } .secure-ecosystem__node--access::after { top: 11px; left: -4px; } /* ========================================== SPODNÁ NOTIFIKÁCIA ========================================== */ .secure-ecosystem__notification { position: absolute; z-index: 6; bottom: 12px; left: 50%; display: flex; align-items: center; gap: 11px; min-width: 235px; padding: 13px 16px; background: rgba(8, 17, 27, 0.76); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 15px; -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.30), 0 0 25px rgba(67, 209, 125, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.09); opacity: 0; transform: translate(-50%, 16px) scale(0.95); animation: secureNotification 8s ease-in-out infinite; } .secure-ecosystem__notification-icon { display: grid; flex: 0 0 32px; width: 32px; height: 32px; place-items: center; background: rgba(67, 209, 125, 0.14); border: 1px solid rgba(67, 209, 125, 0.28); border-radius: 10px; color: #43d17d; font-size: 12px; } .secure-ecosystem__notification > span:last-child { display: flex; flex-direction: column; } .secure-ecosystem__notification strong { color: #ffffff; font-size: 12px; } .secure-ecosystem__notification small { margin-top: 3px; color: rgba(255, 255, 255, 0.52); font-size: 10px; } /* ========================================== ANIMÁCIE ========================================== */ @keyframes secureAmbientGlow { 0%, 100% { opacity: 0.65; transform: translate(-50%, -50%) scale(0.95); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } } @keyframes secureOrbitRotate { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes secureOrbitPulse { 0%, 100% { opacity: 0.50; transform: translate(-50%, -50%) scale(0.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } } @keyframes secureOrbitPulseLarge { 0%, 100% { opacity: 0.42; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.75; transform: translate(-50%, -50%) scale(1.025); } } @keyframes secureCoreFloat { 0%, 100% { transform: translate(-50%, -50%) translateY(0); } 50% { transform: translate(-50%, -50%) translateY(-7px); } } @keyframes secureNodeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes secureNodeSignal { 0%, 100% { opacity: 0.45; transform: scale(0.82); } 50% { opacity: 1; transform: scale(1.12); } } @keyframes secureStatusPulse { 0%, 100% { opacity: 0.55; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } } @keyframes secureNotification { 0%, 57%, 100% { opacity: 0; transform: translate(-50%, 16px) scale(0.95); } 64%, 86% { opacity: 1; transform: translate(-50%, 0) scale(1); } 94% { opacity: 0; transform: translate(-50%, -7px) scale(0.98); } } /* ========================================== MOBIL ========================================== */ @media (max-width: 767px) { .home-hero .home-hero__visual > .vc_column-inner > .wpb_wrapper { min-height: 550px; } .secure-ecosystem { max-width: 390px; height: 540px; } .secure-ecosystem__core { width: 220px; height: 220px; padding: 22px; border-radius: 26px; } .secure-ecosystem__shield { width: 65px; height: 65px; border-radius: 20px; font-size: 27px; } .secure-ecosystem__core > strong { margin-top: 16px; font-size: 16px; } .secure-ecosystem__orbit--1 { width: 260px; height: 260px; } .secure-ecosystem__orbit--2 { width: 340px; height: 340px; } .secure-ecosystem__orbit--3 { display: none; } .secure-ecosystem__node { width: 174px; padding: 10px 11px; gap: 9px; border-radius: 14px; } .secure-ecosystem__node-icon { flex-basis: 32px; width: 32px; height: 32px; border-radius: 10px; font-size: 13px; } .secure-ecosystem__node-text strong { font-size: 10px; } .secure-ecosystem__node-text small { font-size: 9px; } .secure-ecosystem__node--camera { top: 32px; left: 0; } .secure-ecosystem__node--alarm { top: 106px; right: 0; } .secure-ecosystem__node--intercom { bottom: 108px; left: 0; } .secure-ecosystem__node--access { right: 0; bottom: 44px; } .secure-ecosystem__notification { bottom: -12px; min-width: 215px; padding: 11px 13px; } } /* ========================================== OBMEDZENIE POHYBU ========================================== */ @media (prefers-reduced-motion: reduce) { .secure-ecosystem::before, .secure-ecosystem__orbit, .secure-ecosystem__core, .secure-ecosystem__node, .secure-ecosystem__node::after, .secure-ecosystem__status-dot, .secure-ecosystem__notification { animation: none !important; } .secure-ecosystem__notification { opacity: 1; transform: translate(-50%, 0); } } /* ========================================== DESKTOP DROPDOWN MENU – GLASS EFEKT ========================================== */ @media (min-width: 1200px) { /* Rodič dropdownu */ .main-header .main-nav > li.menu-item-has-children { position: relative; } /* CelĂ˝ dropdown panel */ .main-header .main-nav > li.menu-item-has-children > .nav-item-children { min-width: 300px !important; padding: 12px !important; background: radial-gradient( circle at 12% 0%, rgba(239, 67, 57, 0.13) 0%, transparent 42% ), radial-gradient( circle at 100% 100%, rgba(255, 255, 255, 0.04) 0%, transparent 45% ), linear-gradient( 145deg, rgba(26, 25, 30, 0.94) 0%, rgba(12, 12, 16, 0.96) 55%, rgba(5, 6, 8, 0.98) 100% ) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 18px !important; -webkit-backdrop-filter: blur(34px) saturate(160%); backdrop-filter: blur(34px) saturate(160%); box-shadow: 0 32px 70px rgba(0, 0, 0, 0.55), 0 0 40px rgba(239, 67, 57, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.03) !important; overflow: hidden; } /* ČervenĂ˝ akcent hore */ .main-header .main-nav > li.menu-item-has-children > .nav-item-children::before { content: ""; position: absolute; width: 52px; height: 2px; top: 0; left: 22px; background: linear-gradient( 90deg, #ef4339, rgba(239, 67, 57, 0) ); box-shadow: 0 0 10px rgba(239, 67, 57, 0.50), 0 0 22px rgba(239, 67, 57, 0.20); } /* JednotlivĂŠ poloĹžky */ .main-header .main-nav .nav-item-children > li { margin: 0 !important; background: transparent !important; border: 0 !important; } .main-header .main-nav .nav-item-children > li > a { position: relative; display: flex !important; align-items: center !important; gap: 12px; min-height: 49px; padding: 12px 14px !important; border: 1px solid transparent !important; border-radius: 11px !important; background: transparent !important; color: rgba(255, 255, 255, 0.72) !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.35 !important; transition: color 0.28s ease, background 0.28s ease, border-color 0.28s ease, transform 0.28s ease !important; } /* Text poloĹžky */ .main-header .main-nav .nav-item-children > li > a .link-txt, .main-header .main-nav .nav-item-children > li > a .txt { color: inherit !important; } /* Hover poloĹžky */ .main-header .main-nav .nav-item-children > li > a:hover { transform: translateX(4px); background: rgba(255, 255, 255, 0.055) !important; border-color: rgba(255, 255, 255, 0.09) !important; color: #ffffff !important; } /* AktĂ­vna podstrĂĄnka */ .main-header .main-nav .nav-item-children > li.current-menu-item > a { background: rgba(239, 67, 57, 0.09) !important; border-color: rgba(239, 67, 57, 0.18) !important; color: #ffffff !important; } /* Skrytie nepotrebnĂ˝ch ĹĄĂ­pok v podmenu */ .main-header .main-nav .nav-item-children .submenu-expander { display: none !important; } } /* SluĹžby na desktope iba otvĂĄrajĂş dropdown */ @media (min-width: 1200px) { #menu-item-15857 > a { pointer-events: none !important; cursor: default !important; } } /* RodičovskĂĄ poloĹžka menu bez vlastnej strĂĄnky */ .main-nav > li.menu-item-has-children > a[href="#"] { cursor: default !important; } /* ========================================== FOOTER NAD GLOBÁLNYM POZADÍM ========================================== */ .main-footer, .site-footer, .lqd-site-footer, #footer, .secure-footer { position: relative !important; z-index: 5 !important; opacity: 1 !important; filter: none !important; } .secure-footer__inner { position: relative !important; z-index: 6 !important; opacity: 1 !important; filter: none !important; background: radial-gradient( circle at 7% 12%, rgba(239, 67, 57, 0.10) 0%, transparent 34% ), radial-gradient( circle at 90% 85%, rgba(255, 255, 255, 0.035) 0%, transparent 38% ), linear-gradient( 145deg, #1b1a20 0%, #15161b 52%, #0e1115 100% ) !important; } /* Zosvetlenie textov */ .secure-footer__column h3 { color: rgba(255, 255, 255, 0.92) !important; } .secure-footer__brand p { color: rgba(255, 255, 255, 0.68) !important; } .secure-footer__column > a:not(.secure-footer__cta), .secure-footer__column > span { color: rgba(255, 255, 255, 0.68) !important; } .secure-footer__contact .secure-footer__phone { color: #ffffff !important; } .secure-footer__trust { color: rgba(255, 255, 255, 0.76) !important; } .secure-footer__bottom p, .secure-footer__bottom a { color: rgba(255, 255, 255, 0.52) !important; } /* Tlačidlo musĂ­ zostaĹĽ jasne červenĂŠ */ .secure-footer .secure-footer__cta { opacity: 1 !important; background: #ef4339 !important; color: #ffffff !important; filter: none !important; } /* MOBIL – ZVÄČŠENIE CELÉHO KONTAJNERA LOGA */ @media (max-width: 767px) { body .lqd-mobile-sec .navbar-brand, body .lqd-mobile-sec .navbar-brand-inner, body .navbar-header .navbar-brand, body .mobile-header .navbar-brand, body .main-header .navbar-brand { transform: scale(1.55) !important; transform-origin: center center !important; overflow: visible !important; max-width: none !important; } } /* ========================================== DROPDOWN SLUĹ˝BY – ČISTÝ DIZAJN BEZ IKON ========================================== */ .main-nav :is(.sub-menu, .nav-item-children) > li > a { position: relative !important; display: flex !important; align-items: center !important; min-height: 54px; padding: 14px 16px !important; color: rgba(255, 255, 255, 0.76) !important; font-size: 14.5px !important; font-weight: 500 !important; text-decoration: none !important; transition: color 0.25s ease, background-color 0.25s ease, transform 0.25s ease; } /* Skrytie akĂ˝chkoÄžvek starĂ˝ch/poĹĄkodenĂ˝ch ikon zo ĹĄablĂłny */ .main-nav :is(.sub-menu, .nav-item-children) > li > a > i, .main-nav :is(.sub-menu, .nav-item-children) > li > a > .link-icon, .main-nav :is(.sub-menu, .nav-item-children) > li > a > .menu-icon, .main-nav :is(.sub-menu, .nav-item-children) > li > a > [class*="icon-"], .main-nav :is(.sub-menu, .nav-item-children) > li > a > [class^="icon-"] { display: none !important; } /* JemnĂ˝ červenĂ˝ bod pred textom namiesto ikony */ .main-nav :is(.sub-menu, .nav-item-children) > li > a::before { content: "" !important; flex: 0 0 6px; width: 6px; height: 6px; margin-right: 14px; background: rgba(239, 67, 57, 0.45); border-radius: 50%; box-shadow: 0 0 0 rgba(239, 67, 57, 0); transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; } /* Hover poloĹžky */ .main-nav :is(.sub-menu, .nav-item-children) > li > a:hover { color: #ffffff !important; background: rgba(255, 255, 255, 0.05) !important; border-radius: 12px !important; transform: translateX(4px); } .main-nav :is(.sub-menu, .nav-item-children) > li > a:hover::before { background: #ef4339; box-shadow: 0 0 8px rgba(239, 67, 57, 0.85), 0 0 18px rgba(239, 67, 57, 0.38); transform: scale(1.2); } /* AktĂ­vna podstrĂĄnka */ .main-nav :is(.sub-menu, .nav-item-children) > li.current-menu-item > a { color: #ffffff !important; background: rgba(239, 67, 57, 0.09) !important; border-radius: 12px !important; } .main-nav :is(.sub-menu, .nav-item-children) > li.current-menu-item > a::before { background: #ef4339; box-shadow: 0 0 12px rgba(239, 67, 57, 0.60); } /* ========================================== MOBILNÉ MENU ========================================== */ @media (max-width: 991px) { .main-nav :is(.sub-menu, .nav-item-children) > li > a { min-height: 58px; padding: 13px 16px !important; } } /* ========================================== PLYNULÉ SCROLLOVANIE (globálne, pre celý web) ========================================== */ html { scroll-behavior: smooth; } /* Rezerva, aby sa cieľová sekcia neschovala pod sticky menu */ [id] { scroll-margin-top: 120px; } /* Používatelia, ktorí preferujú menej pohybu, dostanú okamžitý skok */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ========================================== SECURE UI SYSTEM – SPOLOČNÝ ZÁKLAD Vkladať úplne na koniec globálneho CSS ========================================== */ :root { --secure-red: #ef4339; --secure-red-rgb: 239, 67, 57; --secure-black: #050506; --secure-surface: #111214; --secure-surface-soft: #18191b; --secure-text: #ffffff; --secure-text-muted: rgba(255, 255, 255, 0.68); --secure-text-soft: rgba(255, 255, 255, 0.52); --secure-border: rgba(255, 255, 255, 0.13); --secure-radius-panel: 30px; --secure-radius-card: 28px; --secure-radius-badge: 8px; --secure-radius-button: 999px; } /* Spoločný font a farby textu */ body { color: var(--secure-text); font-family: "Open Sans", sans-serif; } /* ========================================== ŠTÍTKY NAD NADPISMI ========================================== */ body :is( .section-label, .kamery-hero__label, .alarmy-hero__label, .bytovky-hero__label ) { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; color: rgba(255, 255, 255, 0.82); background: rgba(255, 255, 255, 0.045); border: 1px solid var(--secure-border); border-radius: var(--secure-radius-badge) !important; font-size: 11px; font-weight: 750; line-height: 1; letter-spacing: 0.15em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 26px rgba(0, 0, 0, 0.17); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } body :is( .section-label::before, .kamery-hero__label > span, .alarmy-hero__label > span, .bytovky-hero__label > span ) { background: var(--secure-red) !important; } /* Svetlé sekcie */ body :is( .bd-gallery .section-label, .secure-pricing .section-label ) { color: rgba(16, 17, 19, 0.72); background: rgba(255, 255, 255, 0.72); border-color: rgba(16, 17, 19, 0.12); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07); } /* ========================================== HERO – JEDNOTNÁ TYPOGRAFIA ========================================== */ body :is( .home-hero__title h1, .kamery-hero__content h1, .alarmy-hero__content h1, .bytovky-hero__content h1 ) { color: var(--secure-text) !important; font-size: clamp(52px, 5.7vw, 78px) !important; font-weight: 760 !important; line-height: 0.98 !important; letter-spacing: -0.052em !important; } body :is( .kamery-hero__content h1 span, .alarmy-hero__content h1 span, .bytovky-hero__content h1 span ) { color: rgba(255, 255, 255, 0.58); } body :is( .kamery-hero__intro, .alarmy-hero__intro, .bytovky-hero__intro ) { color: var(--secure-text-muted) !important; font-size: clamp(17px, 1.35vw, 21px) !important; line-height: 1.62 !important; } /* ========================================== HERO TLAČIDLÁ ========================================== */ body :is( .hero-button, .hero-button-primary, .hero-button-secondary, .kamery-hero__button, .alarmy-hero__button, .bytovky-hero__button ) { min-height: 54px; border-radius: var(--secure-radius-button) !important; font-size: 15px !important; font-weight: 720 !important; line-height: 1 !important; } body :is( .hero-button--primary, .hero-button-primary, .kamery-hero__button--primary, .alarmy-hero__button--primary, .bytovky-hero__button--primary ) { color: #fff !important; background: var(--secure-red) !important; border-color: rgba(255, 255, 255, 0.23) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 15px 34px rgba(var(--secure-red-rgb), 0.25) !important; } body :is( .hero-button--secondary, .hero-button-secondary, .kamery-hero__button--secondary, .alarmy-hero__button--secondary, .bytovky-hero__button--secondary ) { color: #fff !important; background: rgba(255, 255, 255, 0.045) !important; border-color: rgba(255, 255, 255, 0.16) !important; } /* ========================================== TRUST BODY / ODZNAKY ========================================== */ body :is( .hero-trust-badge, .hero-trust-item ) { border-radius: var(--secure-radius-badge) !important; } /* Ikona vo vnútri trust štítku zostáva kruhová. */ body .hero-trust-badge__icon { border-radius: 50% !important; } body .hero-trust-badge { color: rgba(255, 255, 255, 0.76) !important; font-size: 13px !important; font-weight: 600 !important; background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.11) !important; } /* ========================================== KARTY A PANELY ========================================== */ body :is( .camera-card, .secure-package, .secure-form-panel, .alarm-benefit-card, .bd-gallery__card ) { border-radius: var(--secure-radius-card) !important; } body :is( .secure-pricing, .secure-quote-form, .secure-footer__inner ) { border-radius: var(--secure-radius-panel) !important; } /* ========================================== FOOTER – JEDNA ČIERNA VERZIA PRE CELÝ WEB ========================================== */ body .secure-footer { background: #050506 !important; } body .secure-footer__inner { background: radial-gradient( circle at 0% 0%, rgba(var(--secure-red-rgb), 0.10) 0%, transparent 34% ), linear-gradient( 145deg, #131315 0%, #090a0b 56%, #050506 100% ) !important; border-color: rgba(255, 255, 255, 0.10) !important; } body .secure-footer__inner::before { opacity: 0.28 !important; } body :is( .secure-footer__brand p, .secure-footer__column > a:not(.secure-footer__cta), .secure-footer__column > span, .secure-footer__bottom p, .secure-footer__bottom a ) { color: rgba(255, 255, 255, 0.56) !important; } body .secure-footer__column h3, body .secure-footer__contact .secure-footer__phone { color: #fff !important; } /* ========================================== MOBIL ========================================== */ @media (max-width: 767px) { body :is( .home-hero__title h1, .kamery-hero__content h1, .alarmy-hero__content h1, .bytovky-hero__content h1 ) { font-size: clamp(39px, 12vw, 54px) !important; line-height: 1.01 !important; letter-spacing: -0.048em !important; } body :is( .kamery-hero__intro, .alarmy-hero__intro, .bytovky-hero__intro ) { font-size: 17px !important; line-height: 1.55 !important; } body :is( .hero-button, .hero-button-primary, .hero-button-secondary, .kamery-hero__button, .alarmy-hero__button, .bytovky-hero__button ) { width: 100%; min-height: 54px; } body .section-label, body .kamery-hero__label, body .alarmy-hero__label, body .bytovky-hero__label { font-size: 10px; } /* ========================================== HLAVNÉ MENU – MENŠIE ROZOSTUPY ========================================== */ @media (min-width: 1200px) { /* Zrušenie dodatočných medzier medzi položkami */ .main-header .main-nav { gap: 0 !important; } .main-header .main-nav > li { margin-right: 0 !important; margin-left: 0 !important; } /* Skutočný rozostup medzi textami */ .main-header .main-nav > li > a { padding-right: 13px !important; padding-left: 13px !important; } }