/** * Közös háttér-témák - Octopus 2.0 * * Véletlenszerű/öröklött háttér-témák a bejelentkezés és a titkosítás-feloldás * oldalakhoz. A kapja a tema-ur / tema-viz / tema-csillag / tema-aurora * osztályt; a markup-ot az includes/hatter_temak.php állítja elő. * * Régi iPad Safari (iOS 9.3.5): -webkit- prefixek, nincs flexbox gap, CSS-változók OK. */ /* Témára hangolt akcentus (alap = kék űr-téma) */ :root { --akcent: #3498db; --akcent-sotet: #2980b9; --akcent-vil: #5dade2; --akcent-glow: rgba(52, 152, 219, 0.30); } /* Témánkénti akcentus-felülírás (descendant szabályok öröklik) */ body.tema-viz { --akcent: #1ba9c4; --akcent-sotet: #157f95; --akcent-vil: #4fd0e0; --akcent-glow: rgba(27, 169, 196, 0.30); } body.tema-csillag { --akcent: #6f8fd6; --akcent-sotet: #4f6dba; --akcent-vil: #9db4ec; --akcent-glow: rgba(111, 143, 214, 0.30); } body.tema-aurora { --akcent: #1fb5ad; --akcent-sotet: #15837e; --akcent-vil: #6fe3c4; --akcent-glow: rgba(31, 181, 173, 0.30); } /* Pozícionálási kontextus + a dekorelemek ne okozzanak görgetést */ body[class*="tema-"] { position: relative; overflow: hidden; } /* === Háttér-témák === */ body.tema-ur { background-image: /* távoli halvány bolygó/köd jobbra lent */ radial-gradient(circle at 84% 80%, rgba(90, 130, 210, 0.12) 0%, rgba(90, 130, 210, 0.05) 7%, rgba(90, 130, 210, 0) 15%), radial-gradient(ellipse at top, #0e1830 0%, #070b14 62%); } body.tema-viz { background-image: linear-gradient(to bottom, #0c3a5a 0%, #072c48 30%, #04182b 65%, #020c17 100%); } /* Űr-téma: lebegő kék fényfoltok */ body.tema-ur::before, body.tema-ur::after { content: ''; position: absolute; border-radius: 50%; -webkit-filter: blur(70px); filter: blur(70px); z-index: -1; pointer-events: none; } /* Víz-téma: felülről beszűrődő fény */ body.tema-viz::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 65%; background: radial-gradient(ellipse at 50% -15%, rgba(120, 200, 240, 0.20), rgba(120, 200, 240, 0) 72%); z-index: -1; pointer-events: none; } /* Víz-téma: lassan vándorló fény-kausztika a felső vízrétegben */ body.tema-viz::after { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 55%; background: radial-gradient(ellipse at 32% 0%, rgba(130, 215, 240, 0.10), rgba(130, 215, 240, 0) 60%); z-index: -1; pointer-events: none; -webkit-animation: vizKausztika 14s ease-in-out infinite; animation: vizKausztika 14s ease-in-out infinite; } @keyframes vizKausztika { 0%, 100% { -webkit-transform: translateX(-8%); transform: translateX(-8%); opacity: 0.6; } 50% { -webkit-transform: translateX(10%); transform: translateX(10%); opacity: 1; } } /* Halvány zaj-réteg a gradiens-sávozódás (banding) eltüntetésére */ .zaj-reteg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none; opacity: 0.11; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23z)'/%3E%3C/svg%3E"); } body.tema-ur::before { width: 460px; height: 460px; background: rgba(52, 152, 219, 0.35); top: -120px; left: -100px; animation: hatterLelegzes 9s ease-in-out infinite; } body.tema-ur::after { width: 520px; height: 520px; background: rgba(41, 128, 185, 0.28); bottom: -160px; right: -120px; animation: hatterLelegzes 11s ease-in-out infinite; animation-delay: -3s; } @keyframes hatterLelegzes { 0%, 100% { opacity: 0.45; -webkit-transform: scale(1); transform: scale(1); } 50% { opacity: 0.8; -webkit-transform: scale(1.18); transform: scale(1.18); } } /* === Víz-téma: buborékok === */ .buborekok { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none; overflow: hidden; } .buborek { position: absolute; bottom: -40px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.55), rgba(170, 215, 240, 0.12) 60%, rgba(170, 215, 240, 0) 72%); border: 1px solid rgba(255, 255, 255, 0.10); } @keyframes buborekFel { 0% { -webkit-transform: translateY(0) translateX(0); transform: translateY(0) translateX(0); opacity: 0; } 12% { opacity: 0.8; } 88% { opacity: 0.65; } 100% { -webkit-transform: translateY(-108vh) translateX(24px); transform: translateY(-108vh) translateX(24px); opacity: 0; } } /* Egyenként eltérő hely, méret, tempó és indítás — természetes, szórt hatás */ .buborek:nth-child(1) { left: 8%; width: 9px; height: 9px; -webkit-animation: buborekFel 15s linear -2s infinite; animation: buborekFel 15s linear -2s infinite; } .buborek:nth-child(2) { left: 20%; width: 14px; height: 14px; -webkit-animation: buborekFel 19s linear -8s infinite; animation: buborekFel 19s linear -8s infinite; } .buborek:nth-child(3) { left: 33%; width: 6px; height: 6px; -webkit-animation: buborekFel 12s linear -5s infinite; animation: buborekFel 12s linear -5s infinite; } .buborek:nth-child(4) { left: 47%; width: 11px; height: 11px; -webkit-animation: buborekFel 17s linear -11s infinite; animation: buborekFel 17s linear -11s infinite; } .buborek:nth-child(5) { left: 60%; width: 7px; height: 7px; -webkit-animation: buborekFel 13s linear -1s infinite; animation: buborekFel 13s linear -1s infinite; } .buborek:nth-child(6) { left: 71%; width: 16px; height: 16px; -webkit-animation: buborekFel 21s linear -14s infinite; animation: buborekFel 21s linear -14s infinite; } .buborek:nth-child(7) { left: 83%; width: 8px; height: 8px; -webkit-animation: buborekFel 14s linear -6s infinite; animation: buborekFel 14s linear -6s infinite; } .buborek:nth-child(8) { left: 91%; width: 12px; height: 12px; -webkit-animation: buborekFel 18s linear -10s infinite; animation: buborekFel 18s linear -10s infinite; } .buborek:nth-child(9) { left: 27%; width: 5px; height: 5px; -webkit-animation: buborekFel 11s linear -7s infinite; animation: buborekFel 11s linear -7s infinite; } /* === Csillag-téma: mélyűr, finom lilás derengéssel === */ body.tema-csillag { background-color: #020206; background-image: radial-gradient(ellipse at 28% 22%, rgba(72, 56, 130, 0.20), rgba(72, 56, 130, 0) 55%), radial-gradient(ellipse at 76% 72%, rgba(40, 64, 130, 0.16), rgba(40, 64, 130, 0) 55%), radial-gradient(ellipse at center, #0a0a18 0%, #050510 55%, #020206 100%); } /* Statikus, távoli halvány csillagmező */ body.tema-csillag::before { content: ''; position: fixed; top: 0; left: 0; width: 2px; height: 2px; border-radius: 50%; background: transparent; z-index: -1; box-shadow: 60px 120px rgba(255, 255, 255, 0.6), 180px 340px rgba(255, 255, 255, 0.4), 240px 80px rgba(255, 255, 255, 0.7), 360px 500px rgba(255, 255, 255, 0.35), 420px 220px rgba(255, 255, 255, 0.55), 540px 380px rgba(255, 255, 255, 0.45), 640px 120px rgba(255, 255, 255, 0.6), 720px 560px rgba(255, 255, 255, 0.3), 820px 300px rgba(255, 255, 255, 0.5), 900px 460px rgba(255, 255, 255, 0.4), 1020px 160px rgba(255, 255, 255, 0.65), 1120px 520px rgba(255, 255, 255, 0.35), 1220px 280px rgba(255, 255, 255, 0.5), 1320px 420px rgba(255, 255, 255, 0.4), 1440px 100px rgba(255, 255, 255, 0.6), 1540px 360px rgba(255, 255, 255, 0.45), 1640px 540px rgba(255, 255, 255, 0.3), 1740px 240px rgba(255, 255, 255, 0.55), 140px 600px rgba(255, 255, 255, 0.35), 460px 660px rgba(255, 255, 255, 0.4), 880px 700px rgba(255, 255, 255, 0.3), 1300px 640px rgba(255, 255, 255, 0.35), 1600px 680px rgba(255, 255, 255, 0.3), 80px 460px rgba(255, 255, 255, 0.4), 200px 540px rgba(255, 255, 255, 0.35), 340px 280px rgba(255, 255, 255, 0.3), 500px 140px rgba(255, 255, 255, 0.45), 680px 420px rgba(255, 255, 255, 0.3), 780px 200px rgba(255, 255, 255, 0.5), 960px 600px rgba(255, 255, 255, 0.3), 1080px 360px rgba(255, 255, 255, 0.4), 1180px 120px rgba(255, 255, 255, 0.55), 1380px 560px rgba(255, 255, 255, 0.3), 1500px 220px rgba(255, 255, 255, 0.45), 1700px 400px rgba(255, 255, 255, 0.35), 1820px 600px rgba(255, 255, 255, 0.3); } .csillagok { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none; overflow: hidden; } .csillag { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.6); } /* Váltakozó erősségű pislákolás */ @keyframes pislogEros { 0%, 100% { opacity: 0.25; -webkit-transform: scale(0.8); transform: scale(0.8); } 50% { opacity: 1; -webkit-transform: scale(1.15); transform: scale(1.15); } } @keyframes pislogHalk { 0%, 100% { opacity: 0.08; } 50% { opacity: 0.5; } } .csillag:nth-child(1) { top: 12%; left: 10%; -webkit-animation: pislogEros 4s ease-in-out -1s infinite; animation: pislogEros 4s ease-in-out -1s infinite; } .csillag:nth-child(2) { top: 22%; left: 80%; -webkit-animation: pislogHalk 6s ease-in-out -2s infinite; animation: pislogHalk 6s ease-in-out -2s infinite; } .csillag:nth-child(3) { top: 35%; left: 25%; width: 3px; height: 3px; -webkit-animation: pislogEros 5s ease-in-out -3s infinite; animation: pislogEros 5s ease-in-out -3s infinite; } .csillag:nth-child(4) { top: 8%; left: 55%; -webkit-animation: pislogHalk 7s ease-in-out -1s infinite; animation: pislogHalk 7s ease-in-out -1s infinite; } .csillag:nth-child(5) { top: 48%; left: 90%; -webkit-animation: pislogEros 4.5s ease-in-out -2.5s infinite; animation: pislogEros 4.5s ease-in-out -2.5s infinite; } .csillag:nth-child(6) { top: 60%; left: 15%; width: 3px; height: 3px; -webkit-animation: pislogEros 6s ease-in-out -4s infinite; animation: pislogEros 6s ease-in-out -4s infinite; } .csillag:nth-child(7) { top: 70%; left: 70%; -webkit-animation: pislogHalk 5.5s ease-in-out -1.5s infinite; animation: pislogHalk 5.5s ease-in-out -1.5s infinite; } .csillag:nth-child(8) { top: 82%; left: 40%; -webkit-animation: pislogEros 4s ease-in-out -3s infinite; animation: pislogEros 4s ease-in-out -3s infinite; } .csillag:nth-child(9) { top: 18%; left: 45%; -webkit-animation: pislogHalk 6.5s ease-in-out -2s infinite; animation: pislogHalk 6.5s ease-in-out -2s infinite; } .csillag:nth-child(10) { top: 30%; left: 65%; width: 3px; height: 3px; -webkit-animation: pislogEros 5s ease-in-out -0.5s infinite; animation: pislogEros 5s ease-in-out -0.5s infinite; } .csillag:nth-child(11) { top: 42%; left: 8%; -webkit-animation: pislogHalk 7s ease-in-out -3.5s infinite; animation: pislogHalk 7s ease-in-out -3.5s infinite; } .csillag:nth-child(12) { top: 55%; left: 50%; -webkit-animation: pislogEros 4.5s ease-in-out -2s infinite; animation: pislogEros 4.5s ease-in-out -2s infinite; } .csillag:nth-child(13) { top: 65%; left: 30%; -webkit-animation: pislogHalk 6s ease-in-out -1s infinite; animation: pislogHalk 6s ease-in-out -1s infinite; } .csillag:nth-child(14) { top: 75%; left: 85%; width: 3px; height: 3px; -webkit-animation: pislogEros 5.5s ease-in-out -4s infinite; animation: pislogEros 5.5s ease-in-out -4s infinite; } .csillag:nth-child(15) { top: 88%; left: 62%; -webkit-animation: pislogHalk 6.5s ease-in-out -2.5s infinite; animation: pislogHalk 6.5s ease-in-out -2.5s infinite; } .csillag:nth-child(16) { top: 14%; left: 33%; -webkit-animation: pislogEros 4s ease-in-out -1.5s infinite; animation: pislogEros 4s ease-in-out -1.5s infinite; } .csillag:nth-child(17) { top: 27%; left: 92%; -webkit-animation: pislogHalk 7s ease-in-out -3s infinite; animation: pislogHalk 7s ease-in-out -3s infinite; } .csillag:nth-child(18) { top: 50%; left: 72%; -webkit-animation: pislogEros 5s ease-in-out -2s infinite; animation: pislogEros 5s ease-in-out -2s infinite; } .csillag:nth-child(19) { top: 78%; left: 20%; -webkit-animation: pislogHalk 6s ease-in-out -0.5s infinite; animation: pislogHalk 6s ease-in-out -0.5s infinite; } .csillag:nth-child(20) { top: 90%; left: 48%; width: 3px; height: 3px; -webkit-animation: pislogEros 4.5s ease-in-out -3s infinite; animation: pislogEros 4.5s ease-in-out -3s infinite; } /* Hullócsillagok — ritkán, hosszú szünetekkel suhannak át */ .hullocsillag { position: fixed; width: 130px; height: 2px; border-radius: 2px; background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95)); box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.45); opacity: 0; z-index: 0; pointer-events: none; } .hullocsillag.h1 { top: 10%; left: 8%; -webkit-animation: hullas1 9s ease-in -3s infinite; animation: hullas1 9s ease-in -3s infinite; } .hullocsillag.h2 { top: 6%; left: 55%; -webkit-animation: hullas2 14s ease-in -9s infinite; animation: hullas2 14s ease-in -9s infinite; } @keyframes hullas1 { 0% { opacity: 0; -webkit-transform: translate(0, 0) rotate(20deg); transform: translate(0, 0) rotate(20deg); } 2% { opacity: 1; } 11% { opacity: 0; -webkit-transform: translate(440px, 160px) rotate(20deg); transform: translate(440px, 160px) rotate(20deg); } 100% { opacity: 0; -webkit-transform: translate(440px, 160px) rotate(20deg); transform: translate(440px, 160px) rotate(20deg); } } @keyframes hullas2 { 0% { opacity: 0; -webkit-transform: translate(0, 0) rotate(32deg); transform: translate(0, 0) rotate(32deg); } 1.5% { opacity: 1; } 9% { opacity: 0; -webkit-transform: translate(520px, 320px) rotate(32deg); transform: translate(520px, 320px) rotate(32deg); } 100% { opacity: 0; -webkit-transform: translate(520px, 320px) rotate(32deg); transform: translate(520px, 320px) rotate(32deg); } } /* === Aurora-téma: északi fény === */ body.tema-aurora { background-color: #03060e; background-image: radial-gradient(ellipse at 50% 120%, rgba(20, 60, 80, 0.45), rgba(20, 60, 80, 0) 60%), linear-gradient(to bottom, #05101c 0%, #040a14 55%, #02060e 100%); } /* Halvány csillagmező az aurora-égen */ body.tema-aurora::after { content: ''; position: fixed; top: 0; left: 0; width: 2px; height: 2px; border-radius: 50%; background: transparent; z-index: -1; box-shadow: 80px 70px rgba(255, 255, 255, 0.5), 220px 140px rgba(255, 255, 255, 0.35), 380px 90px rgba(255, 255, 255, 0.45), 520px 200px rgba(255, 255, 255, 0.3), 660px 110px rgba(255, 255, 255, 0.5), 820px 170px rgba(255, 255, 255, 0.35), 980px 80px rgba(255, 255, 255, 0.45), 1140px 210px rgba(255, 255, 255, 0.3), 1300px 130px rgba(255, 255, 255, 0.5), 1460px 90px rgba(255, 255, 255, 0.4), 1620px 190px rgba(255, 255, 255, 0.3), 1760px 120px rgba(255, 255, 255, 0.45), 160px 260px rgba(255, 255, 255, 0.3), 600px 300px rgba(255, 255, 255, 0.3), 1080px 320px rgba(255, 255, 255, 0.3), 1540px 280px rgba(255, 255, 255, 0.3); } .aurora-mezo { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none; overflow: hidden; } .aurora-savo { position: absolute; top: -20%; left: -30%; width: 160%; height: 75%; border-radius: 45%; -webkit-filter: blur(48px); filter: blur(48px); opacity: 0.5; } .aurora-savo.a1 { background: linear-gradient(110deg, rgba(31, 181, 141, 0) 10%, rgba(31, 181, 141, 0.55) 45%, rgba(46, 196, 208, 0.35) 70%, rgba(31, 181, 141, 0) 92%); -webkit-animation: auroraHullam1 16s ease-in-out infinite; animation: auroraHullam1 16s ease-in-out infinite; } .aurora-savo.a2 { top: 5%; height: 60%; opacity: 0.4; background: linear-gradient(95deg, rgba(46, 196, 208, 0) 15%, rgba(46, 196, 208, 0.45) 50%, rgba(80, 150, 220, 0.30) 78%, rgba(46, 196, 208, 0) 95%); -webkit-animation: auroraHullam2 22s ease-in-out infinite; animation: auroraHullam2 22s ease-in-out infinite; } .aurora-savo.a3 { top: 12%; height: 50%; opacity: 0.3; background: linear-gradient(120deg, rgba(110, 227, 196, 0) 20%, rgba(110, 227, 196, 0.35) 55%, rgba(31, 181, 141, 0) 90%); -webkit-animation: auroraHullam1 19s ease-in-out infinite; animation: auroraHullam1 19s ease-in-out infinite; -webkit-animation-delay: -6s; animation-delay: -6s; } @keyframes auroraHullam1 { 0%, 100% { -webkit-transform: translateX(-6%) skewX(-8deg) scaleY(1); transform: translateX(-6%) skewX(-8deg) scaleY(1); } 50% { -webkit-transform: translateX(8%) skewX(6deg) scaleY(1.15); transform: translateX(8%) skewX(6deg) scaleY(1.15); } } @keyframes auroraHullam2 { 0%, 100% { -webkit-transform: translateX(7%) skewX(7deg) scaleY(1.1); transform: translateX(7%) skewX(7deg) scaleY(1.1); } 50% { -webkit-transform: translateX(-7%) skewX(-7deg) scaleY(0.95); transform: translateX(-7%) skewX(-7deg) scaleY(0.95); } } /* === Betöltő-fátyol: feketéből világosodik be az oldal === */ @keyframes oldalVilagosodas { from { opacity: 1; } to { opacity: 0; } } .betolto-fatyol { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #000; z-index: 100; pointer-events: none; -webkit-animation: oldalVilagosodas 1.2s ease-out forwards; animation: oldalVilagosodas 1.2s ease-out forwards; } /* === Akadálymentesség: kevesebb mozgás === */ @media (prefers-reduced-motion: reduce) { body.tema-ur::before, body.tema-ur::after, body.tema-viz::after, .buborek, .csillag, .hullocsillag, .aurora-savo, .betolto-fatyol { -webkit-animation: none !important; animation: none !important; } .betolto-fatyol { opacity: 0; } }