.elementor-12803 .elementor-element.elementor-element-46cc9de{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:080px;--padding-bottom:0120px;--padding-left:0px;--padding-right:0px;}.elementor-12803 .elementor-element.elementor-element-804f616{--display:flex;--min-height:75vh;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;}.elementor-12803 .elementor-element.elementor-element-436f8b3 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0% 1% 0% 1%;}.elementor-12803 .elementor-element.elementor-element-97ef5cd > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-12803 .elementor-element.elementor-element-aa4d37b > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-12803 .elementor-element.elementor-element-9df8981 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-12803 .elementor-element.elementor-element-dca74ae > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-12803 .elementor-element.elementor-element-33cc1da > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-12803 .elementor-element.elementor-element-5b09280 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-12803 .elementor-element.elementor-element-46cc9de{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:60px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-12803 .elementor-element.elementor-element-804f616{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0%;--padding-bottom:0%;--padding-left:2%;--padding-right:2%;}}@media(min-width:768px){.elementor-12803 .elementor-element.elementor-element-46cc9de{--width:100%;}.elementor-12803 .elementor-element.elementor-element-804f616{--content-width:1400px;}}@media(max-width:1024px) and (min-width:768px){.elementor-12803 .elementor-element.elementor-element-46cc9de{--width:100%;}}@media(max-width:767px){.elementor-12803 .elementor-element.elementor-element-46cc9de{--min-height:100vh;--gap:2px 2px;--row-gap:2px;--column-gap:2px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:88px;--padding-left:0px;--padding-right:0px;}.elementor-12803 .elementor-element.elementor-element-804f616{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:110px;--padding-bottom:0px;--padding-left:10px;--padding-right:10px;}.elementor-12803 .elementor-element.elementor-element-436f8b3 > .elementor-widget-container{padding:0px 0px 0px 0px;}}/* Start custom CSS *//* ======================================================= MADAJA — GLOBÁLNA TRIEDA .madaja-atmosfera ======================================================= KOMPLETNÉ atmosférické pozadie pre ľubovoľnú tmavú sekciu: základný gradient + bodkovaný grid + vignette + aurora + stúpajúce častice. Jeden zdroj pravdy. INŠTALÁCIA: 1. Vlož do Site Settings → Custom CSS (globálne). NAHRÁDZA predošlú triedu .madaja-svetielka — ak si ju už vložil, zmaž ju, táto ju obsahuje. 2. Sekcii pridaj: Advanced → CSS Classes → madaja-atmosfera (hero kontajner AJ tmavá sekcia s kalkulačkou) 3. HERO: z Custom CSS hero kontajnera ZMAŽ VŠETKY doterajšie body.elementor-page-12803 bloky (základ, ::before auroru, ::after častice aj keyframes) — všetko teraz rieši táto trieda. Hero Custom CSS ostane prázdne. 4. Sekcia nesmie mať v Elementore nastavené vlastné Background (Style → Background → Classic/Gradient daj na None) — inak by prebilo pozadie triedy. 5. Rocket cache. ======================================================= */ /* ------------------------------------------------------- ZÁKLAD + GRID + VIGNETTE ------------------------------------------------------- */ .madaja-atmosfera { position: relative; overflow: hidden; background-color: #050810; background-image: radial-gradient( ellipse 75% 90% at 62% 45%, transparent 0%, rgba(5, 8, 16, 0.55) 45%, #050810 75% ), radial-gradient( rgba(120, 160, 255, 0.14) 1px, transparent 1.5px ), linear-gradient(180deg, #04060D 0%, #070C1A 55%, #050810 100%); background-size: 100% 100%, 26px 26px, 100% 100%; background-repeat: no-repeat, repeat, no-repeat; } /* Obsah sekcie nad atmosférou */ .madaja-atmosfera > * { position: relative; z-index: 2; } /* ------------------------------------------------------- AURORA (::before) ------------------------------------------------------- */ .madaja-atmosfera::before { content: ""; position: absolute; /* PEVNÁ výška vo viewport jednotkách — NIKDY nie odvodená od výšky kontajnera (inset: -25% spôsobovalo, že zmena výšky obsahu, napr. otvorenie accordionu, každý frame preškáľovala obrovskú blur vrstvu = sekanie). Aurora svieti v hornej časti kontajnera, hlbšie nesú atmosféru grid + častice. */ top: -40vh; left: -25%; right: -25%; height: 160vh; z-index: 0; background-image: radial-gradient( ellipse 30% 32% at 72% 34%, rgba(34, 129, 221, 0.30) 0%, rgba(34, 129, 221, 0.08) 55%, transparent 72% ), radial-gradient( ellipse 26% 28% at 18% 78%, rgba(90, 70, 220, 0.20) 0%, transparent 68% ), radial-gradient( ellipse 18% 20% at 46% 52%, rgba(60, 180, 235, 0.13) 0%, transparent 65% ); filter: blur(40px); animation: madajaAtmosferaAurora 32s ease-in-out infinite; will-change: transform; pointer-events: none; } @keyframes madajaAtmosferaAurora { 0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.85; } 33% { transform: translate(-3%, 4%) rotate(2.5deg) scale(1.08); opacity: 1; } 66% { transform: translate(3%, -3%) rotate(-2deg) scale(1.04); opacity: 0.92; } } /* ------------------------------------------------------- ČASTICE (::after) — rozsah 0–300vh, každý bod 2× (Y a Y+300vh) pre bezšvový loop ------------------------------------------------------- */ .madaja-atmosfera::after { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 2px; z-index: 1; border-radius: 50%; background: transparent; box-shadow: /* --- bližšie body --- */ 6vw 18vh 0 0 rgba(120, 170, 255, 0.42), 6vw 318vh 0 0 rgba(120, 170, 255, 0.42), 19vw 62vh 0 0 rgba(120, 170, 255, 0.32), 19vw 362vh 0 0 rgba(120, 170, 255, 0.32), 31vw 25vh 0 1px rgba(140, 190, 255, 0.40), 31vw 325vh 0 1px rgba(140, 190, 255, 0.40), 42vw 88vh 0 0 rgba(120, 170, 255, 0.35), 42vw 388vh 0 0 rgba(120, 170, 255, 0.35), 58vw 255vh 0 1px rgba(140, 190, 255, 0.38), 58vw 555vh 0 1px rgba(140, 190, 255, 0.38), 64vw 120vh 0 0 rgba(120, 170, 255, 0.33), 64vw 420vh 0 0 rgba(120, 170, 255, 0.33), 70vw 15vh 0 0 rgba(120, 170, 255, 0.30), 70vw 315vh 0 0 rgba(120, 170, 255, 0.30), 80vw 68vh 0 1px rgba(140, 190, 255, 0.36), 80vw 368vh 0 1px rgba(140, 190, 255, 0.36), 89vw 150vh 0 0 rgba(120, 170, 255, 0.34), 89vw 450vh 0 0 rgba(120, 170, 255, 0.34), 10vw 240vh 0 0 rgba(120, 170, 255, 0.38), 10vw 540vh 0 0 rgba(120, 170, 255, 0.38), 47vw 225vh 0 0 rgba(120, 170, 255, 0.30), 47vw 525vh 0 0 rgba(120, 170, 255, 0.30), 60vw 180vh 0 1px rgba(140, 190, 255, 0.35), 60vw 480vh 0 1px rgba(140, 190, 255, 0.35), 95vw 110vh 0 0 rgba(120, 170, 255, 0.32), 95vw 410vh 0 0 rgba(120, 170, 255, 0.32), 37vw 210vh 0 0 rgba(120, 170, 255, 0.36), 37vw 510vh 0 0 rgba(120, 170, 255, 0.36), 16vw 78vh 0 0 rgba(120, 170, 255, 0.34), 16vw 378vh 0 0 rgba(120, 170, 255, 0.34), 27vw 165vh 0 1px rgba(140, 190, 255, 0.38), 27vw 465vh 0 1px rgba(140, 190, 255, 0.38), 40vw 35vh 0 0 rgba(120, 170, 255, 0.32), 40vw 335vh 0 0 rgba(120, 170, 255, 0.32), 55vw 130vh 0 0 rgba(120, 170, 255, 0.35), 55vw 430vh 0 0 rgba(120, 170, 255, 0.35), 68vw 235vh 0 1px rgba(140, 190, 255, 0.37), 68vw 535vh 0 1px rgba(140, 190, 255, 0.37), 78vw 175vh 0 0 rgba(120, 170, 255, 0.33), 78vw 475vh 0 0 rgba(120, 170, 255, 0.33), 88vw 90vh 0 0 rgba(120, 170, 255, 0.36), 88vw 390vh 0 0 rgba(120, 170, 255, 0.36), /* --- NOVÉ body (hustejšie pole) --- */ 3vw 135vh 0 0 rgba(120, 170, 255, 0.34), 3vw 435vh 0 0 rgba(120, 170, 255, 0.34), 14vw 200vh 0 1px rgba(140, 190, 255, 0.38), 14vw 500vh 0 1px rgba(140, 190, 255, 0.38), 22vw 95vh 0 0 rgba(120, 170, 255, 0.33), 22vw 395vh 0 0 rgba(120, 170, 255, 0.33), 29vw 278vh 0 0 rgba(120, 170, 255, 0.35), 29vw 578vh 0 0 rgba(120, 170, 255, 0.35), 36vw 148vh 0 1px rgba(140, 190, 255, 0.36), 36vw 448vh 0 1px rgba(140, 190, 255, 0.36), 45vw 52vh 0 0 rgba(120, 170, 255, 0.32), 45vw 352vh 0 0 rgba(120, 170, 255, 0.32), 51vw 268vh 0 0 rgba(120, 170, 255, 0.36), 51vw 568vh 0 0 rgba(120, 170, 255, 0.36), 62vw 42vh 0 1px rgba(140, 190, 255, 0.37), 62vw 342vh 0 1px rgba(140, 190, 255, 0.37), 73vw 108vh 0 0 rgba(120, 170, 255, 0.33), 73vw 408vh 0 0 rgba(120, 170, 255, 0.33), 83vw 218vh 0 0 rgba(120, 170, 255, 0.35), 83vw 518vh 0 0 rgba(120, 170, 255, 0.35), 92vw 188vh 0 1px rgba(140, 190, 255, 0.36), 92vw 488vh 0 1px rgba(140, 190, 255, 0.36), 8vw 85vh 0 0 rgba(120, 170, 255, 0.31), 8vw 385vh 0 0 rgba(120, 170, 255, 0.31), /* --- vzdialenejšie body --- */ 13vw 105vh 0 -1px rgba(110, 160, 245, 0.22), 13vw 405vh 0 -1px rgba(110, 160, 245, 0.22), 26vw 140vh 0 -1px rgba(110, 160, 245, 0.20), 26vw 440vh 0 -1px rgba(110, 160, 245, 0.20), 48vw 170vh 0 -1px rgba(110, 160, 245, 0.24), 48vw 470vh 0 -1px rgba(110, 160, 245, 0.24), 53vw 42vh 0 -1px rgba(110, 160, 245, 0.20), 53vw 342vh 0 -1px rgba(110, 160, 245, 0.20), 75vw 195vh 0 -1px rgba(110, 160, 245, 0.22), 75vw 495vh 0 -1px rgba(110, 160, 245, 0.22), 85vw 285vh 0 -1px rgba(110, 160, 245, 0.24), 85vw 585vh 0 -1px rgba(110, 160, 245, 0.24), 93vw 35vh 0 -1px rgba(110, 160, 245, 0.18), 93vw 335vh 0 -1px rgba(110, 160, 245, 0.18), 23vw 265vh 0 -1px rgba(110, 160, 245, 0.22), 23vw 565vh 0 -1px rgba(110, 160, 245, 0.22), 35vw 292vh 0 -1px rgba(110, 160, 245, 0.20), 35vw 592vh 0 -1px rgba(110, 160, 245, 0.20), 72vw 250vh 0 -1px rgba(110, 160, 245, 0.22), 72vw 550vh 0 -1px rgba(110, 160, 245, 0.22), 44vw 245vh 0 -1px rgba(110, 160, 245, 0.22), 44vw 545vh 0 -1px rgba(110, 160, 245, 0.22), 57vw 78vh 0 -1px rgba(110, 160, 245, 0.20), 57vw 378vh 0 -1px rgba(110, 160, 245, 0.20), 66vw 158vh 0 -1px rgba(110, 160, 245, 0.23), 66vw 458vh 0 -1px rgba(110, 160, 245, 0.23), 79vw 28vh 0 -1px rgba(110, 160, 245, 0.20), 79vw 328vh 0 -1px rgba(110, 160, 245, 0.20), 90vw 262vh 0 -1px rgba(110, 160, 245, 0.22), 90vw 562vh 0 -1px rgba(110, 160, 245, 0.22), 18vw 32vh 0 -1px rgba(110, 160, 245, 0.21), 18vw 332vh 0 -1px rgba(110, 160, 245, 0.21), 12vw 55vh 0 -1px rgba(110, 160, 245, 0.22), 12vw 355vh 0 -1px rgba(110, 160, 245, 0.22); animation: madajaAtmosferaTok 96s linear infinite; will-change: transform; pointer-events: none; } @keyframes madajaAtmosferaTok { 0% { transform: translate(0, 0); } 15% { transform: translate(1.2vw, -45vh); } 32% { transform: translate(-0.8vw, -96vh); } 50% { transform: translate(1.8vw, -150vh); } 68% { transform: translate(-1.4vw, -204vh); } 85% { transform: translate(0.6vw, -255vh); } 100% { transform: translate(0, -300vh); } } /* ------------------------------------------------------- PRÍSTUPNOSŤ ------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .madaja-atmosfera::before, .madaja-atmosfera::after { animation: none; } } /* ------------------------------------------------------- MOBIL — jasnejšie častice, jednoduchšia aurora, stlmený grid s vignette vycentrovanou k obsahu ------------------------------------------------------- */ @media (max-width: 767px) { .madaja-atmosfera { background-image: radial-gradient( ellipse 100% 70% at 50% 35%, transparent 0%, rgba(5, 8, 16, 0.6) 40%, #050810 70% ), radial-gradient( rgba(120, 160, 255, 0.10) 1px, transparent 1.5px ), linear-gradient(180deg, #04060D 0%, #070C1A 55%, #050810 100%); background-size: 100% 100%, 24px 24px, 100% 100%; background-repeat: no-repeat, repeat, no-repeat; } .madaja-atmosfera::before { /* PEVNÁ vrstva 480vh (stále nezávislá od obsahu — fix sekania platí) so SIEDMIMI glow bodmi, ktoré sa pri scrollovaní striedajú zo strany na stranu. Statický glow = intenzita mierne zdvihnutá. */ background-image: radial-gradient( ellipse 55% 8% at 50% 5%, rgba(34, 129, 221, 0.30) 0%, transparent 70% ), radial-gradient( ellipse 45% 7% at 12% 20%, rgba(90, 70, 220, 0.20) 0%, transparent 68% ), radial-gradient( ellipse 50% 7% at 85% 34%, rgba(60, 180, 235, 0.17) 0%, transparent 68% ), radial-gradient( ellipse 48% 7% at 20% 50%, rgba(34, 129, 221, 0.22) 0%, transparent 68% ), radial-gradient( ellipse 45% 7% at 80% 65%, rgba(90, 70, 220, 0.18) 0%, transparent 68% ), radial-gradient( ellipse 50% 7% at 15% 80%, rgba(60, 180, 235, 0.17) 0%, transparent 68% ), radial-gradient( ellipse 48% 8% at 70% 94%, rgba(34, 129, 221, 0.20) 0%, transparent 68% ); filter: blur(30px); /* Statická aurora na mobile — drift je na malom displeji takmer nepostrehnuteľný a GPU (batéria, plynulosť scrollu) dostane trvalé voľno. Častice sa hýbu ďalej, atmosféra žije. */ animation: none; height: 480vh; top: -15vh; } .madaja-atmosfera::after { filter: brightness(1.6); } } /* Fialová gradient varianta pre podstránku PPC */ .gradient-text-ppc { background: linear-gradient(90deg, #C084FC, #A855F7, #8B5CF6, #7C3AED, #C084FC); background-size: 300%; animation: ppcNeonShift 6s ease-in-out infinite; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } @keyframes ppcNeonShift { 0% { background-position: 0%; } 50% { background-position: 100%; } 100% { background-position: 0%; } }/* End custom CSS */