/* ==========================================================================
Halloween-téma
--------------------------------------------------------------------------
Szezonális réteg az offolda-modern.css fölött, az őszi téma helyett két
napra (controller::IDOSZAKOS_TEMAK). Ugyanúgy épül, mint az őszi: a modern
réteg színváltozóit állítja át, a sablonokhoz nem nyúl, és minden
szabálya a body.tema-halloween alá van kötve.
Ami benne van: éjlila és tökszínű arculat, holdas ég denevérekkel (sötét
módban csillagokkal), a tartalom két felső sarkában pókháló, belőlük
lógó pókok, a képernyőn átrepülő szellemek (ezeket a js/tema-halloween.js
rakja ki), a menü alján és a lábléc tetején világító tökök.
A kontraszt mindenhol legalább akkora, mint az alap arculatban: a link
(#C2410C) 5,0:1 a felületen (az eredeti 4,4:1), a halvány szöveg a
háttér legsötétebb lila részén is 3,4:1 (az eredeti 2,9:1).
========================================================================== */
body.tema-halloween {
--marka: #C2410C; /* mély tökszín */
--marka-vilagos: #F07A1A;
--marka-sotet: #962F06;
--marka-halvany: rgba(232, 112, 26, 0.13);
--hatter: #F1EBF8;
--felulet: #FDFBFF;
--felulet-emelt: #FFFFFF;
--felulet-halvany: #F3EDF9;
--szoveg: #221630; /* éjlila */
--szoveg-halk: #54456F;
--szoveg-halkabb: #6B5C84;
--keret: #E7DEF2;
--keret-eros: #D2C4E5;
--arnyek-s: 0 1px 2px rgba(50, 25, 80, .07), 0 4px 16px rgba(110, 60, 170, .10);
--arnyek-m: 0 2px 6px rgba(50, 25, 80, .08), 0 10px 28px rgba(110, 60, 170, .16);
--arnyek-l: 0 4px 12px rgba(50, 25, 80, .10), 0 16px 48px rgba(50, 25, 80, .14);
/* csak a téma használja */
--hw-ikon: #CF5A14;
--hw-lila: #6E3FA0;
--hw-menu-teto: #E8E0F5;
--hw-menu-alj: #FBEBDF;
--hw-szam-veg: #7A3FA8;
--hw-halo: rgba(62, 40, 92, .42);
--hw-fonal: rgba(48, 30, 72, .6);
--hw-pok-szin: #1E1428;
--hw-pok-lab: #1E1428;
--hw-pok-kontur: #1E1428;
/* a sötét képek (pl. a pályázati fejléc) előtt is látsszon */
--hw-pok-fenye: drop-shadow(0 0 1.5px rgba(255, 255, 255, .8));
--hw-szellem-kontur: #A693C9;
--hw-szellem-arnyek: drop-shadow(0 6px 8px rgba(60, 30, 100, .26));
--hw-denever: rgba(44, 26, 66, .72);
--hw-hold-x: 86%;
--hw-hold-y: 20%;
--hw-hold-meret: 104px;
--hw-halo-meret: 190px;
--hw-halo-bal: calc(var(--hw-halo-meret) * .78);
}
body.tema-halloween.dark {
--marka: #FF9B3D;
--marka-vilagos: #FFC170;
--marka-sotet: #E8761E;
--marka-halvany: rgba(255, 155, 61, 0.16);
--hatter: #0E0A17;
--felulet: #1A1426;
--felulet-emelt: #221A31;
--felulet-halvany: #2A2139;
--szoveg: #F2EBFA;
--szoveg-halk: #C6B7DA;
--szoveg-halkabb: #A694BE;
--keret: #33284A;
--keret-eros: #4A3C66;
--arnyek-s: 0 1px 2px rgba(0, 0, 0, .45);
--arnyek-m: 0 2px 6px rgba(0, 0, 0, .50), 0 8px 24px rgba(0, 0, 0, .40);
--arnyek-l: 0 4px 12px rgba(0, 0, 0, .55), 0 16px 48px rgba(0, 0, 0, .50);
--hw-ikon: #F59A45;
--hw-lila: #C79BFF;
--hw-menu-teto: #120D20;
--hw-menu-alj: #26152C;
--hw-szam-veg: #C79BFF;
--hw-halo: rgba(226, 216, 250, .40);
--hw-fonal: rgba(232, 222, 252, .6);
--hw-pok-szin: #2B1F3D;
--hw-pok-lab: #B9A6D9;
--hw-pok-kontur: #B9A6D9;
--hw-pok-fenye: drop-shadow(0 0 3px rgba(200, 180, 255, .4));
--hw-szellem-kontur: transparent;
--hw-szellem-arnyek: drop-shadow(0 0 10px rgba(225, 215, 255, .55));
--hw-denever: #0A0612;
}
@media (max-width: 991px) {
body.tema-halloween {
--hw-hold-x: 80%;
--hw-hold-y: 23%;
--hw-hold-meret: 76px;
--hw-halo-meret: 140px;
}
}
@media (max-width: 575px) {
body.tema-halloween { --hw-halo-meret: 108px; }
}
/* --------------------------------------------------------------------------
Háttér: holdas ég
--------------------------------------------------------------------------
Világosban alkonyat: fent lila ég, lefelé halványuló pára, a horizonton
tökszínű derengés. Sötétben éjszaka csillagokkal; a csillagok lefelé
elfogynak (egy, az ég színével egyező, lefelé átlátszatlanná váló réteg
takarja őket). A hold a body::before, előtte a denevérek a body::after —
mindkettő a tartalom mögött, a viewporthoz rögzítve.
A kártyák, táblázatok és diagramok saját, tömör felületen ülnek, így a
háttér az olvashatóságukat nem érinti.
-------------------------------------------------------------------------- */
body.tema-halloween {
background-image:
radial-gradient(circle at var(--hw-hold-x) var(--hw-hold-y),
rgba(255, 250, 232, .9) 0, rgba(255, 240, 205, .5) 7%, rgba(240, 220, 255, 0) 24%),
linear-gradient(180deg, transparent 68%, rgba(240, 140, 60, .10) 86%, rgba(232, 112, 26, .22) 100%),
linear-gradient(180deg, #CBBAE6 0%, #DACEEF 22%, #EBE3F5 48%, #F5EDF3 72%, #FAE4D3 100%);
background-attachment: fixed;
}
body.tema-halloween.dark {
background-image:
radial-gradient(circle at var(--hw-hold-x) var(--hw-hold-y),
rgba(255, 240, 190, .30) 0, rgba(255, 225, 150, .12) 7%, transparent 24%),
linear-gradient(180deg, transparent 72%, rgba(232, 112, 26, .09) 90%, rgba(232, 112, 26, .17) 100%),
linear-gradient(180deg, rgba(28, 18, 48, 0) 32%, rgba(28, 18, 48, .9) 62%, #28152F 84%, #331A2A 100%),
url("data:image/svg+xml;utf8,"),
linear-gradient(180deg, #08060F 0%, #110B20 30%, #1C1230 60%, #28152F 84%, #331A2A 100%);
}
/* A hold: krémszínű korong néhány halvány kráterrel, körülötte derengés. */
body.tema-halloween::before {
content: "";
position: fixed;
left: var(--hw-hold-x);
top: var(--hw-hold-y);
width: var(--hw-hold-meret);
height: var(--hw-hold-meret);
margin: calc(var(--hw-hold-meret) / -2) 0 0 calc(var(--hw-hold-meret) / -2);
border-radius: 50%;
pointer-events: none;
z-index: -1;
background:
radial-gradient(circle at 33% 31%, rgba(200, 180, 130, .42) 0, rgba(200, 180, 130, .42) 7%, transparent 10%),
radial-gradient(circle at 62% 57%, rgba(200, 180, 130, .34) 0, rgba(200, 180, 130, .34) 11%, transparent 14%),
radial-gradient(circle at 38% 71%, rgba(200, 180, 130, .30) 0, rgba(200, 180, 130, .30) 5%, transparent 8%),
radial-gradient(circle at 71% 29%, rgba(200, 180, 130, .26) 0, rgba(200, 180, 130, .26) 4%, transparent 7%),
radial-gradient(circle at 38% 34%, #FFFDF2 0, #FFF2C9 60%, #F1DCA0 100%);
box-shadow: 0 0 36px 6px rgba(255, 242, 205, .65), 0 0 110px 26px rgba(255, 232, 175, .28);
}
body.tema-halloween.dark::before {
box-shadow: 0 0 40px 10px rgba(255, 236, 170, .40), 0 0 140px 40px rgba(255, 220, 140, .16);
}
/* Három denevér: a nagy a hold előtt, a másik kettő tőle jobbra fent — a
hold bal oldalán túl egyik sem nyúlik, mert ott, a lap közepe felé, a
bevezető szövegek állnak, és a sötét denevér a sötét betűvel összefolyna.
A doboz a holdra van központozva (a hold a rajzon (110, 80), 50 egység
sugarú). */
body.tema-halloween::after {
content: "";
position: fixed;
left: calc(var(--hw-hold-x) - var(--hw-hold-meret) * 1.1);
top: calc(var(--hw-hold-y) - var(--hw-hold-meret) * .8);
width: calc(var(--hw-hold-meret) * 2.2);
height: calc(var(--hw-hold-meret) * 1.6);
pointer-events: none;
z-index: -1;
background-color: var(--hw-denever);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
animation: hw-denever 7s ease-in-out infinite alternate;
}
body.tema-halloween.tema-animacio-ki::after { animation: none; }
@keyframes hw-denever {
from { transform: translate(0, 0); }
to { transform: translate(-10px, -7px); }
}
body.tema-halloween ::selection { background: rgba(240, 130, 40, .32); }
/* --------------------------------------------------------------------------
Oldalmenü: fent éjlila, lefelé tökszínű derengés, az alján három tök
-------------------------------------------------------------------------- */
body.tema-halloween .oldalmenu {
background: linear-gradient(180deg, var(--hw-menu-teto) 0%, var(--felulet) 30%, var(--hw-menu-alj) 100%);
}
body.tema-halloween .menu-elem .fa,
body.tema-halloween .menu-csoport-fej > span .fa { color: var(--hw-ikon); }
body.tema-halloween .menu-elem.aktiv .fa { color: inherit; }
body.tema-halloween .menu-elem.aktiv {
background: linear-gradient(90deg, rgba(232, 112, 26, .22), rgba(110, 63, 160, .06));
}
/* A tökök az őszi ág helyén: a menüpontok után jönnek, és a flex
margin-top: auto tartja lent őket — ha nincs hely, a menüvel együtt
görgethetők, így sosem takarnak el menüpontot. A rajz saját aránya
260×93; a faragásuk lassan, gyertyafényként pislákol. */
body.tema-halloween .oldalmenu-tartalom {
display: flex;
flex-direction: column;
}
body.tema-halloween .oldalmenu-tartalom::after {
content: "";
flex: 0 0 auto;
align-self: center;
box-sizing: border-box;
width: 232px;
height: 99px;
padding-top: var(--terkoz-m);
margin-top: auto;
background: url(../images/tema-halloween/tokok.svg) center bottom / contain no-repeat;
background-origin: content-box;
animation: hw-pislog 3.6s linear infinite;
}
body.tema-halloween.tema-animacio-ki .oldalmenu-tartalom::after { animation: none; }
@keyframes hw-pislog {
0%, 100% { filter: brightness(1); }
18% { filter: brightness(1.07); }
21% { filter: brightness(.97); }
40% { filter: brightness(1.04); }
58% { filter: brightness(1); }
61% { filter: brightness(1.09); }
64% { filter: brightness(1.01); }
82% { filter: brightness(1.05); }
}
body.tema-halloween.dark .oldalmenu-tartalom::after {
filter: drop-shadow(0 0 8px rgba(255, 160, 50, .35));
animation-name: hw-pislog-sotet;
}
@keyframes hw-pislog-sotet {
0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 160, 50, .35)) brightness(1); }
18% { filter: drop-shadow(0 0 11px rgba(255, 170, 60, .45)) brightness(1.07); }
21% { filter: drop-shadow(0 0 7px rgba(255, 160, 50, .30)) brightness(.97); }
40% { filter: drop-shadow(0 0 10px rgba(255, 165, 55, .40)) brightness(1.04); }
61% { filter: drop-shadow(0 0 12px rgba(255, 175, 60, .48)) brightness(1.09); }
82% { filter: drop-shadow(0 0 9px rgba(255, 165, 55, .40)) brightness(1.05); }
}
/* A menü alján lévő kapcsoló ikonja: szellem a falevél helyett (a Font
Awesome 4-ben nincs szellem, ezért maszkolt rajz). */
body.tema-halloween .tema-animacio-gomb .fa::before {
content: "";
display: inline-block;
width: 13px;
height: 15px;
vertical-align: -2px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* --------------------------------------------------------------------------
Címek: a középre zárt főcím alá díszvonal, középen kis faragott tökkel
-------------------------------------------------------------------------- */
body.tema-halloween h1.text-center::after {
content: "";
display: block;
width: 168px;
height: 22px;
margin: 10px auto 0;
background: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
body.tema-halloween.dark h1.text-center::after {
background-image: url("data:image/svg+xml;utf8,");
}
/* --------------------------------------------------------------------------
Számcsempék: pókháló a jobb felső sarokban, a szám tökszínből lilába hajlik
-------------------------------------------------------------------------- */
body.tema-halloween .szam-csempe {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right top;
background-size: 46px 46px;
}
body.tema-halloween.dark .szam-csempe {
background-image: url("data:image/svg+xml;utf8,");
}
body.tema-halloween .szam-csempe:hover { border-color: var(--marka-vilagos); }
body.tema-halloween .szam-csempe .szam {
background: linear-gradient(120deg, var(--marka) 25%, var(--hw-szam-veg) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
body.tema-halloween .szam-csempe .szam-utotag { -webkit-text-fill-color: var(--szoveg-halk); }
/* --------------------------------------------------------------------------
Gombok és sávok
-------------------------------------------------------------------------- */
body.tema-halloween .btn-danger,
body.tema-halloween .btn-primary,
body.tema-halloween .btn-info {
background: linear-gradient(180deg, #D4520F 0%, var(--marka) 100%);
}
body.tema-halloween .btn-danger:hover, body.tema-halloween .btn-primary:hover, body.tema-halloween .btn-info:hover,
body.tema-halloween .btn-danger:focus, body.tema-halloween .btn-primary:focus, body.tema-halloween .btn-info:focus {
background: var(--marka-sotet);
}
/* Sötétben a tökszínű gomb világos, ezért a felirata sötét: fehérrel csak
2,2:1 volna a kontraszt, így 8,7:1. */
body.tema-halloween.dark .btn-danger,
body.tema-halloween.dark .btn-primary,
body.tema-halloween.dark .btn-info {
background: linear-gradient(180deg, #FFB25C 0%, var(--marka) 100%);
color: #1E1206;
}
body.tema-halloween.dark .btn-danger:hover, body.tema-halloween.dark .btn-primary:hover, body.tema-halloween.dark .btn-info:hover,
body.tema-halloween.dark .btn-danger:focus, body.tema-halloween.dark .btn-primary:focus, body.tema-halloween.dark .btn-info:focus {
background: var(--marka-vilagos);
color: #1E1206;
}
body.tema-halloween.dark .kviz-ajanlo-gomb,
body.tema-halloween.dark .kviz-ajanlo-gomb:hover,
body.tema-halloween.dark .kviz-ajanlo-gomb:focus,
body.tema-halloween.dark .kviz-ful.aktiv,
body.tema-halloween.dark .select2-results .select2-highlighted {
color: #1E1206 !important;
}
/* A halvány fülsor kijelölt eleme keretes, a háttere a sötét felület: ott
a felirat marad tökszínű (az őszi témánál derült ki, hogy enélkül a
fenti szabály a háttérbe festené). */
body.tema-halloween.dark .kviz-fulek-halvany .kviz-ful.aktiv {
color: var(--marka) !important;
}
body.tema-halloween .kviz-ajanlo {
background: linear-gradient(90deg, rgba(240, 130, 40, .20), rgba(110, 63, 160, .08));
}
/* --------------------------------------------------------------------------
Szófelhő: a ritka szó halvány tök, a gyakori mély éjlila. A világosság
egy irányba lép, tehát a szín és a méret ugyanazt mondja.
-------------------------------------------------------------------------- */
body.tema-halloween #szofelho .highcharts-point.szo-1 { fill: #F2A65A; }
body.tema-halloween #szofelho .highcharts-point.szo-2 { fill: #E0701A; }
body.tema-halloween #szofelho .highcharts-point.szo-3 { fill: #B4470F; }
body.tema-halloween #szofelho .highcharts-point.szo-4 { fill: #6E3FA0; }
body.tema-halloween #szofelho .highcharts-point.szo-5 { fill: #3B1E5A; }
body.tema-halloween.dark #szofelho .highcharts-point.szo-1 { fill: #4E2F6B; }
body.tema-halloween.dark #szofelho .highcharts-point.szo-2 { fill: #7D4E9E; }
body.tema-halloween.dark #szofelho .highcharts-point.szo-3 { fill: #C8641A; }
body.tema-halloween.dark #szofelho .highcharts-point.szo-4 { fill: #F08A2C; }
body.tema-halloween.dark #szofelho .highcharts-point.szo-5 { fill: #FFC46B; }
/* --------------------------------------------------------------------------
Mobil fejléc: kis tök a cím mellett
-------------------------------------------------------------------------- */
body.tema-halloween .mobilfejlec-cim::after {
content: "";
display: inline-block;
width: 17px;
height: 16px;
margin-left: 6px;
vertical-align: -2px;
background: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* --------------------------------------------------------------------------
Lábléc: a tökök ülnek a tetején, bal oldalt (jobbra a link van)
-------------------------------------------------------------------------- */
body.tema-halloween footer {
position: relative;
margin-top: 36px;
}
body.tema-halloween footer::before {
content: "";
position: absolute;
left: var(--terkoz-m);
bottom: calc(100% - 4px);
width: 132px;
height: 48px;
pointer-events: none;
z-index: 1;
background: url(../images/tema-halloween/tokok.svg) left bottom / contain no-repeat;
}
/* --------------------------------------------------------------------------
Pókhálók és lógó pókok (a js/tema-halloween.js rakja ki őket)
A réteg a tartalom fölött, de az oldalmenü, a mobil fejléc, a legördülők,
a felugró ablakok és a Shadowbox (999) alatt van, és nem fogja meg az
egeret. A hálók a tartalom két felső sarkában feszülnek: nagy kijelzőn
nyitott menü mellett a menü széle a bal fal, kis kijelzőn a mobil
fejléc alja a mennyezet.
-------------------------------------------------------------------------- */
body.tema-halloween .hw-diszlet {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 0;
pointer-events: none;
z-index: 990;
transition: left 200ms ease;
}
@media (min-width: 992px) {
body.tema-halloween:not(.menu-zarva):not(.menu-nelkul) .hw-diszlet,
body.tema-halloween:not(.menu-zarva):not(.menu-nelkul) .hw-szellemek { left: var(--menu-szelesseg); }
}
@media (max-width: 991px) {
body.tema-halloween:not(.menu-nelkul) .hw-diszlet { top: var(--mobilfejlec-magassag); }
}
/* A pályázati, a régi pályázati és a puzzle-lapokon nincs háló és pók:
ott a fotó, illetve a kirakó a lényeg (ugyanezért nem hullott ott a
levél sem). A sablon ezekre a lapokra a tema-csendes osztályt teszi. */
body.tema-halloween.tema-csendes .hw-diszlet { display: none; }
body.tema-halloween .hw-halo {
position: absolute;
top: 0;
width: var(--hw-halo-meret);
height: var(--hw-halo-meret);
}
/* A bal háló kisebb: a tartalom bal felső sarkában gyakran szöveg kezdődik
(a kvízajánló, a lap címe), a jobb sarok többnyire üres. */
body.tema-halloween .hw-halo-bal { left: 0; width: var(--hw-halo-bal); height: var(--hw-halo-bal); }
body.tema-halloween .hw-halo-jobb { right: 0; transform: scaleX(-1); }
body.tema-halloween .hw-halo-rajz {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
body.tema-halloween .hw-halo-rajz path {
fill: none;
stroke: var(--hw-halo);
stroke-width: 1.15;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
/* A pók a háló 45 fokos küllőjéről lóg (a vászon 35,4%-ánál). A fonal a
saját hosszának töredékéig (--rov) húzódik vissza és teljes hosszáig
(--max) ereszkedik le; a fonal nyúlása és a pók süllyedése ugyanazzal az
ütemmel megy, ezért a pók mindig a fonal végén marad. Az egész inga
módjára leng a felfüggesztési pont körül. */
body.tema-halloween .hw-pok {
position: absolute;
top: calc(var(--hw-halo-meret) * .354);
width: 28px;
--max: 120px;
--rov: .28;
--ido: 11s;
--kes: -2s;
}
body.tema-halloween .hw-pok-bal {
top: calc(var(--hw-halo-bal) * .354);
left: calc(var(--hw-halo-bal) * .354 - 14px);
--max: 96px;
--rov: .4;
--ido: 9s;
--kes: -6s;
}
body.tema-halloween .hw-pok-jobb {
right: calc(var(--hw-halo-meret) * .354 - 14px);
}
@media (max-width: 991px) {
body.tema-halloween .hw-pok { --max: 110px; }
body.tema-halloween .hw-pok-bal { --max: 70px; }
}
/* Telefonon a bal pók elmarad: a keskeny tartalomban a sor eleji szövegre
lógna. */
@media (max-width: 575px) {
body.tema-halloween .hw-pok-bal { display: none; }
}
body.tema-halloween .hw-pok-leng {
position: relative;
transform-origin: 50% 0;
animation: hw-pok-leng 4.6s ease-in-out infinite alternate;
}
body.tema-halloween .hw-pok-bal .hw-pok-leng { animation-duration: 3.8s; animation-delay: -1.5s; }
body.tema-halloween .hw-pok-fonal {
position: absolute;
top: 0;
left: 13.5px;
width: 1px;
height: var(--max);
background: var(--hw-fonal);
box-shadow: 1px 0 rgba(255, 255, 255, .35);
transform-origin: 50% 0;
transform: scaleY(var(--rov));
animation: hw-pok-fonal var(--ido) ease-in-out var(--kes) infinite;
}
body.tema-halloween .hw-pok-alak {
position: absolute;
top: -4px;
left: 0;
width: 28px;
height: 29.4px;
transform: translateY(calc(var(--max) * var(--rov)));
animation: hw-pok-ereszkedik var(--ido) ease-in-out var(--kes) infinite;
}
body.tema-halloween .hw-pok-rajz {
display: block;
width: 100%;
height: 100%;
overflow: visible;
filter: var(--hw-pok-fenye);
}
body.tema-halloween .hw-pok-test {
fill: var(--hw-pok-szin);
stroke: var(--hw-pok-kontur);
stroke-width: 1.1;
}
body.tema-halloween .hw-pok-labak path {
fill: none;
stroke: var(--hw-pok-lab);
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
body.tema-halloween .hw-pok-labak {
transform-box: view-box;
transform-origin: 20px 22px;
animation: hw-pok-lab .8s ease-in-out infinite alternate;
}
body.tema-halloween .hw-pok-labak-jobb { animation-direction: alternate-reverse; }
/* Le — lóg egy kicsit — vissza, gyorsabban — pihen. */
@keyframes hw-pok-fonal {
0%, 14% { transform: scaleY(var(--rov)); }
52%, 64% { transform: scaleY(1); }
84%, 100% { transform: scaleY(var(--rov)); }
}
@keyframes hw-pok-ereszkedik {
0%, 14% { transform: translateY(calc(var(--max) * var(--rov))); }
52%, 64% { transform: translateY(var(--max)); }
84%, 100% { transform: translateY(calc(var(--max) * var(--rov))); }
}
@keyframes hw-pok-leng {
from { transform: rotate(-4deg); }
to { transform: rotate(4deg); }
}
@keyframes hw-pok-lab {
from { transform: rotate(-5deg); }
to { transform: rotate(5deg); }
}
/* Kikapcsolt animációnál a pók egy helyben lóg, a fonala rövid végén. */
body.tema-halloween.tema-animacio-ki .hw-pok-leng,
body.tema-halloween.tema-animacio-ki .hw-pok-fonal,
body.tema-halloween.tema-animacio-ki .hw-pok-alak,
body.tema-halloween.tema-animacio-ki .hw-pok-labak { animation: none; }
/* --------------------------------------------------------------------------
Szellemek (a js/tema-halloween.js reptet ki őket, a böngésző animációs
felületével; itt csak a megjelenésük és a lebegésük van)
-------------------------------------------------------------------------- */
body.tema-halloween .hw-szellemek {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
pointer-events: none;
z-index: 990;
transition: left 200ms ease;
}
body.tema-halloween .hw-szellem {
position: absolute;
top: 0;
left: 0;
will-change: transform, opacity;
}
body.tema-halloween .hw-szellem-lebeg {
width: 100%;
height: 100%;
animation: hw-szellem-lebeg 2s ease-in-out infinite alternate;
}
body.tema-halloween .hw-szellem-rajz {
display: block;
width: 100%;
height: 100%;
overflow: visible;
filter: var(--hw-szellem-arnyek);
}
body.tema-halloween .hw-szellem-balra .hw-szellem-rajz { transform: scaleX(-1); }
body.tema-halloween .hw-szellem-kontur {
stroke: var(--hw-szellem-kontur);
stroke-width: 2.4;
stroke-linejoin: round;
}
@keyframes hw-szellem-lebeg {
from { transform: translateY(-6px); }
to { transform: translateY(6px); }
}
/* Csökkentett mozgásnál a szellemek el sem indulnak (a JS nézi), a kapcsoló
sem kell; a pókok a modern réteg „* { animation: none }" szabálya miatt
állnak. Az ::before/::after elemekre az nem hat, azokat itt állítjuk meg. */
@media (prefers-reduced-motion: reduce) {
body.tema-halloween .hw-szellemek, body.tema-halloween .tema-animacio-gomb { display: none !important; }
body.tema-halloween .oldalmenu-tartalom::after,
body.tema-halloween::after { animation: none !important; }
}
@media print {
body.tema-halloween .hw-diszlet,
body.tema-halloween .hw-szellemek { display: none !important; }
}