/* ====================================================================== HALLOWEEN — a bolt szezonális témája (október 24. – november 2.) MIT ÉRINT ÉS MIT NEM. A téma a fejlécet, a láblécet és a főoldal ajánlósávját öltözteti át; a TERMÉKKÁRTYÁKAT, AZ ÁRAKAT ÉS A KÉSZLET-JELZŐKET szándékosan nem. Két okból: 1. A készlet nyelve tanult: a zöld „kapható", a piros „elfogyott". Ezt egy évben tíz napra átszínezni azt jelentené, hogy a visszatérő vásárló épp a vásárlás pillanatában nem érti, mit lát. 2. A kártyák fotói maguk a FONALAK — száz különböző színben. Egy narancs kártyakeret minden második fotóval ütne. A logó ugyanezért marad a fehér fő sávban: a zöld körjelvény érintetlen, a dísz köré épül, nem rá. BETÖLTÉS: a header.tpl csak akkor tölti be, ha a téma aktív (HALLOWEEN_ACTIVE — lásd az `unnep` osztályt), és a build.py KIVETEL listájában áll, tehát a minden lapra kimenő csomagba nem kerül bele. A szabályok ettől függetlenül `html.halloween` alatt vannak: ha a fájl egyszer mégis a csomagba kerülne, akkor sem színez át semmit magától. A style.css és a bolt.css UTÁN töltődik, tehát felülírhatja őket. ====================================================================== */ html.halloween { /* A téma négy színe. A zöld arculati változókat NEM írjuk felül: a bolt többi része (gombok, jelzők, linkek) változatlanul azokból dolgozik, és a téma levételekor nem marad utána semmi. */ --hw-lila: #2E1A47; /* éjlila: a fejléc sávja és a lábléc */ --hw-lila-mely: #1B0F2B; /* az átmenet mélyülő vége */ --hw-szoveg: #EDE4F5; /* szöveg a lila hátereken — kontraszt 12,6 */ /* A tök két narancsa. MIÉRT KETTŐ: a világosabbon (#E8701A) a fehér felirat csak 3,1-es kontrasztot ad, ami a WCAG 4,5-ös küszöbe alatt van. Ezért a világos narancs DÍSZ (felület, sáv, ikon) sötét felirattal (4,8), a mély narancs pedig ott áll, ahol fehér szöveg vagy gomb kell (5,2). */ --hw-narancs: #E8701A; --hw-narancs-mely: #C2410C; --hw-narancs-halk: #FFF3E8; /* halvány háttér, pl. az ajánlósáv alja */ } /* ---------------------------------------------------------------------- A LAP KERETE A style.css a html/body-nak áttetsző ZÖLDET ad: nagy képernyőn ez az a keskeny sáv, ami a tartalom-doboz két oldalán látszik. Zölden hagyva a lila fejléc mellett odébb csúszott színfoltként ült ott. ---------------------------------------------------------------------- */ html.halloween, html.halloween body { background-color: #3A2456; } /* ---------------------------------------------------------------------- KÖZLEMÉNY-SÁV Csak a TÁJÉKOZTATÓ sáv (nyitvatartás, hír) veszi fel a téma színét. A FIGYELMEZTETŐ sáv marad piros: az zárvatartást és szállítási szünetet jelent, és a piros a jelentése, nem a díszítése — ugyanaz a megfontolás, ami miatt a készlet-jelzőkhöz sem nyúlunk. A sáv lilája világosabb a fejlécénél, különben a kettő egyetlen nagy folttá olvadna össze. Kontraszt a fehér felirattal: 13,2. ---------------------------------------------------------------------- */ html.halloween .kozlemeny-tajekoztatas { background: #3D2459; } /* ---------------------------------------------------------------------- FEJLÉC — csak a felső információs sáv A fő sáv (logó, menü, kereső, kosár) FEHÉR marad: ott vásárol a látogató, és a zöld logó a fehéren ül jól. A téma az információs sávban jelenik meg, plusz egy narancs vonal a fejléc alján. ---------------------------------------------------------------------- */ html.halloween .fejlec-info { background: var(--hw-lila-mely); background-image: linear-gradient(90deg, var(--hw-lila-mely) 0%, var(--hw-lila) 30%, var(--hw-lila) 70%, var(--hw-lila-mely) 100%); position: relative; /* Az `overflow: hidden` SZÁNDÉKOSAN nincs itt: a pókoknak le KELL lógniuk a sáv alá, a fehér fő sávba — ott látszanak igazán, és a megrendelő is lógó pókot kért. A pókhálót ez nem engedi ki, mert az háttérkép, azt a böngésző az elem dobozára vágja. */ } /* A két sarok-pókháló. NAGYOBBRA NŐTT (2026-09-30): 74 → 132 képpont, és már nem áll meg a lila sáv alján, hanem BELELÓG a fehér fő sávba. A megrendelő kérése: „a többi oldalon elég ha látványosabb, nagyobb pókhálók lennének" — a 74 képpontos hálóból a 34 képpontos sávban csak egy csík látszott. Hogy a fehér sávon is látható maradjon, a háló vonala GRADIENS: a lila részen világos, a fehéren sötétlila. Egy SVG-n belül ez a `stroke` gradiense — két külön réteg (egy világos + egy sötét) ugyanezt csak kétszeres méretben és egy fölösleges elemmel tudná. Pszeudoelem, tehát nem kell hozzá üres
a sablonba, és a képernyőolvasó sem találkozik vele. */ html.halloween .fejlec-info::before, html.halloween .fejlec-info::after { content: ""; position: absolute; top: 0; width: 132px; height: 132px; pointer-events: none; background-repeat: no-repeat; background-size: 132px 132px; background-image: url('data:image/svg+xml;utf8,'); } /* ---------------------------------------------------------------------- A LÓGÓ PÓK A megrendelő kérése (2026-09-12): „a pókhálóból lehetne egy lógó pók (kicsi pók csak), ami a pókfonálon fel-le jár." FELÉPÍTÉS: az elem MAGA a fonál (::before), a pók a végén ül (::after), és az egész együtt mozog föl-le. Azért így, és nem a fonál magasságát animálva, mert a `transform` a kártyaváltásból megy — a `height` animálása minden képkockán újratördelné a fejlécet. HELY: mérve a fejléc asztalon 70 és 1210 képpont között hordja a tartalmat (logó … belépés), tehát a 0-70 és az 1210-1280 sáv szabad. A pók ezért a képernyő SZÉLÉHEZ tapad, nem a tartalom-konténerhez: így keskenyebb ablakban sem csúszik a logó alá. ---------------------------------------------------------------------- */ html.halloween .hw-pok { position: absolute; top: 0; width: 32px; height: 34px; /* a fonál hossza a sáv tetejétől a pókig */ pointer-events: none; z-index: 2; /* a sáv tartalma fölött, de a menü alatt */ /* NAGYOBB ÉS FÜRGÉBB (2026-09-30): 22 → 32 képpont, 4,5 → 2,4 másodperc. A megrendelő kérése: „csak a halloween oldalra szeretném őket, de ott lehetnek fürgébbek és nagyobbak is". Egy lapon, ahol a pók az egyetlen mozgó elem, ez már látvány, nem zaj. */ animation: hw-pok-jar 2.4s ease-in-out infinite; } /* A FONÁL. Két szín egy szálban: a lila sávon világos, a fehér sávba érve sötét — különben a felső fele láthatatlan lenne, az alsó meg kilógna fehéren a fehéren. A váltás a sáv alsó pereme környékén van. */ html.halloween .hw-pok::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background: linear-gradient(to bottom, rgba(237, 228, 245, .75) 0%, rgba(237, 228, 245, .75) 62%, rgba(27, 15, 43, .55) 72%, rgba(27, 15, 43, .55) 100%); } /* A PÓK a fonál végén. Sötét test, fehér szemekkel — a fehér fő sávon ül, ott a sötét a jól látható. */ html.halloween .hw-pok::after { content: ""; position: absolute; top: 100%; left: 0; width: 32px; height: 28px; background-repeat: no-repeat; background-size: contain; background-image: url('data:image/svg+xml;utf8,'); } /* A JÁRÁS. 18 képpont út: az első változat szellemeinél a megrendelő azt mondta, „nehéz észrevenni, hogy mozognak" — egy dísz vagy látható mozgást végez, vagy ne mozogjon egyáltalán. A két pók ELTÉRŐ ütemben és fázisban jár, különben egyszerre bukkannának le, ami gépiesen hat. */ @keyframes hw-pok-jar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(34px); } } html.halloween .hw-pok-bal { left: 14px; } html.halloween .hw-pok-jobb { right: 14px; animation-duration: 3.2s; animation-delay: -1.4s; } /* Telefonon a bal pók elmarad: ott a hamburger gomb van a bal szélen. A jobb pók a logó és a kosár KÖZÖTTI üres helyre költözik (mérve 128-290 képpont egy 390 képpontos telefonon), és mélyebbre lóg, mert ott nincs alatta semmi. Enélkül telefonon csak a lila szín utalt a témára (a megrendelő észrevétele). */ @media (max-width: 991px) { html.halloween .hw-pok-bal { display: none; } html.halloween .hw-pok-jobb { right: auto; left: 42%; /* A fonál a lila sáv ALJÁRÓL indul, nem a tetejéről: telefonon a sáv egyetlen sornyi szöveg („Személyes átvétel: …"), és a felülről induló szál keresztülvágott rajta. Így a szöveg érintetlen, a pók pedig a fehér sávban, a logó és a kosár közötti üres helyen lóg. */ top: 100%; height: 26px; } } html.halloween .fejlec-info::before { left: 0; } html.halloween .fejlec-info::after { right: 0; transform: scaleX(-1); /* a jobb sarokban tükrözve */ } /* A sáv tartalma a hálók FÖLÖTT áll. A .container itt a Bootstrapé, saját z-index nélkül a pszeudoelem a szöveg alá vagy fölé kerülése a forrás sorrendjén múlna. */ html.halloween .fejlec-info > .container { position: relative; z-index: 1; } /* A fejléc alján narancs vonal a szürke helyett: egyetlen képpontnyi jel, de ez köti össze a lila sávot a lap többi részével. */ html.halloween .navbar-default { border-bottom-color: var(--hw-narancs); } /* ---------------------------------------------------------------------- LÁBLÉC Itt van tér a díszre: a lábléc alján senki nem vásárol, viszont minden lapon ott van. A zöld átmenet helyére éjlila kerül, a tetejére pókháló-sor, és a záró sorba egy tök meg egy szellem. A `.navbar-inverse` azért van itt, mert a style.css egyetlen szabályban színezi a kettőt (`.navbar-inverse, footer`) — ha csak a footert írnánk felül, a lap többi sötétzöld sávja szétesne a lilától. ---------------------------------------------------------------------- */ html.halloween .navbar-inverse, html.halloween footer { background-color: var(--hw-lila-mely); background-image: linear-gradient(160deg, var(--hw-lila) 0%, var(--hw-lila-mely) 100%); } html.halloween footer.lablec { position: relative; color: #C9BCD8; /* Hely a pókháló-sornak a lábléc tetején. */ padding-top: 40px; } /* Alul hely a záró sor alá csúsztatott tök+szellem dísznek. A --ragados-sav a termékoldal ragadós vásárló-sávjának mért magassága (a fonalda.js írja, sáv nélküli lapon 0) — ezt megtartjuk, csak hozzáadunk. 767 képpont alatt a dísz amúgy is elmarad, ott a plusz hely csak üresen állna. */ @media (min-width: 768px) { html.halloween footer.lablec { padding-bottom: calc(78px + var(--ragados-sav, 0px)); } } /* Pókháló-sor a lábléc felső peremén, végig. Ismétlődő minta, tehát minden képernyőszélességen kitölti. */ html.halloween footer.lablec::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 26px; pointer-events: none; background-repeat: repeat-x; background-position: top center; background-size: 120px 26px; background-image: url('data:image/svg+xml;utf8,'); } /* A lábléc linkjei: a style.css zöldes fehérje (#DCE7DE) a lila háttéren koszos zöldnek látszik. Az !important azért kell, mert az eredeti szabály is azzal íródott (`footer a`). Kontraszt: 12,6. */ html.halloween footer a { color: var(--hw-szoveg) !important; } html.halloween footer a:hover, html.halloween footer a:focus { color: #FFFFFF !important; } /* A záró sor két lakója: egy faragott tök és egy szellem. A lábléc legalján ülnek, a jogi sor mellett — ahol semmit nem takarnak. */ html.halloween .lablec-zaro { position: relative; } html.halloween .lablec-zaro::before { content: ""; position: absolute; /* A Fonalda Tündér gombja ugyanitt, a jobb alsó sarokban ül, és a tök félig alá csúszott. A --tunder-jobb a gomb MÉRT távolsága a jobb széltől (a fonalda.js írja, a tartalom széléhez igazítva, resize-ra is); a 104 képpont a gomb szélessége és egy térköz. Kikapcsolt Tündérnél a dísz csak beljebb ül, takarás akkor sincs. */ right: calc(var(--tunder-jobb, 20px) + 104px); /* A ZÁRÓ SOR ALÁ, NEM MELLÉ (2026-09-30, a megrendelő jelezte: „lábléc kicsit fura így" — a tök és a szellem a telefonszámra feküdt). Az ok mérve: 1200 képpont fölött a záró sor egy sorba fér, és a dísz mellette elfér. 768 és 1100 között viszont KÉT sorba tördelődik, a szöveg megnyúlik, és belefut a díszbe — 1024-en a szöveg 873-ig ért, a dísz 715-nél kezdődött. Szélesség szerint hangolni törékeny lenne (a záró sor tartalma a CMS-ből jön, bármikor hosszabb lehet), ezért a dísz kikerül a szöveg sávjából: a lábléc alsó paddingjában ül, ahol semmi más nincs. */ bottom: -52px; width: 116px; height: 44px; pointer-events: none; background-repeat: no-repeat; background-position: right bottom; background-size: auto 42px; background-image: url('data:image/svg+xml;utf8,'); } /* Telefonon a záró sor szűk: a dísz a szöveg alá kerülne. Ott elmarad. */ @media (max-width: 767px) { html.halloween .lablec-zaro::before { display: none; } /* A fejléc pókhálói is kisebbek: a keskeny sávban a 74 képpontos háló az információs sáv feléig ér, és a szöveg olvashatatlanná válik alatta. */ html.halloween .fejlec-info::before, html.halloween .fejlec-info::after { width: 46px; background-size: 46px 46px; } } /* ---------------------------------------------------------------------- A FŐOLDAL HALLOWEEN-AJÁNLÓJA A narancssárga fonalak sávja. A szekció a főoldal saját rácsát és kártyáit használja (.fo-kartyak, termekkartya.tpl) — a téma csak a keretet adja hozzá, hogy a kártyák maguk ugyanúgy nézzenek ki, mint a lap többi részén. ---------------------------------------------------------------------- */ html.halloween .hw-ajanlo { position: relative; overflow: hidden; /* Alul külön tér a szellemeknek. MIÉRT: a kártyák rácsa `z-index: 1` pozicionált doboz, ami a SAJÁT TERÜLETÉN mindent eltakar — a hézagokat is. A szellemek eredetileg a rács magasságában úsztak, és emiatt egy képpontnyi sem látszott belőlük (a megrendelő kétszer is jelezte, hogy „alig látszanak" — nem az átlátszóság volt a baj, hanem hogy takarva voltak). Itt, a rács ALATT szabadon látszanak. */ padding-bottom: 104px; background: var(--hw-lila-mely); background-image: radial-gradient(circle at 15% 120%, rgba(232, 112, 26, .30) 0%, rgba(232, 112, 26, 0) 45%), radial-gradient(circle at 85% -20%, rgba(232, 112, 26, .22) 0%, rgba(232, 112, 26, 0) 40%), linear-gradient(160deg, var(--hw-lila) 0%, var(--hw-lila-mely) 100%); color: var(--hw-szoveg); } /* A szekció fejlécének szövegei a sötét háttérre. A főoldal `.fo-sotet` osztálya ugyanezt teszi a zöld sávnál; itt a lila változat. */ html.halloween .hw-ajanlo .fo-cim { color: #FFFFFF !important; } html.halloween .hw-ajanlo .fo-ravezeto { color: #C7B4DC; } html.halloween .hw-ajanlo .fo-mind { color: var(--hw-narancs); } html.halloween .hw-ajanlo .fo-mind:hover, html.halloween .hw-ajanlo .fo-mind:focus { color: #FFAE6B; } /* A szekció fejléce fölé egy tök kerül, a cím mellé. */ html.halloween .hw-ajanlo .fo-fej { position: relative; z-index: 1; } html.halloween .hw-ajanlo .fo-kartyak { position: relative; z-index: 1; } /* Két lebegő szellem a háttérben, a kártyák MÖGÖTT. Nagyon halványak: a sáv hangulatát adják, nem a figyelmet viszik el. */ html.halloween .hw-ajanlo::before, html.halloween .hw-ajanlo::after { content: ""; position: absolute; pointer-events: none; background-repeat: no-repeat; background-size: contain; /* Az út idáig: .16 → .22 → .34. A megrendelő mindkét korábbi értéknél azt mondta, hogy „alig látszanak" — a lila háttéren a fehér szellem sokkal többet bír el, mint hittem, és a kártyák fotóit ennyi sem viszi el: a szellemek a kártyák MÖGÖTT úsznak, a sáv üres részein. */ opacity: .34; background-image: url('data:image/svg+xml;utf8,'); animation: hw-lebeg 7s ease-in-out infinite; } html.halloween .hw-ajanlo::before { left: 5%; bottom: 6px; width: 76px; height: 95px; } html.halloween .hw-ajanlo::after { right: 7%; bottom: 14px; width: 60px; height: 75px; animation-delay: -3.5s; animation-duration: 8s; } /* A LEBEGÉS. 14 képpontról 30-ra nőtt az út, a billenés ±3 fokról ±7-re. A megrendelő szava: „nehéz azt is észrevenni, hogy mozognak" — egy dísz vagy látható mozgást végez, vagy ne mozogjon egyáltalán. A pálya vízszintesen is elmozdul, mert a tisztán függőleges ingázás liftszerű; a kis oldalirányú kitérés teszi úszássá. */ @keyframes hw-lebeg { 0%, 100% { transform: translate(0, 0) rotate(-7deg); } 35% { transform: translate(7px, -18px) rotate(2deg); } 50% { transform: translate(4px, -30px) rotate(7deg); } 75% { transform: translate(-5px, -14px) rotate(0deg); } } /* Telefonon a sáv keskenyebb, és a két szellem összeérne a lap közepén: a bal marad, a jobb elmarad. */ @media (max-width: 640px) { html.halloween .hw-ajanlo { padding-bottom: 86px; } html.halloween .hw-ajanlo::after { display: none; } html.halloween .hw-ajanlo::before { left: 50%; margin-left: -34px; width: 68px; height: 85px; } } /* A tök a szekció címe mellett. Inline elem a sablonban, mert a cím szövegével együtt kell tördelődnie. */ html.halloween .hw-tok { display: inline-block; width: 42px; height: 36px; margin-right: 10px; vertical-align: -8px; background-repeat: no-repeat; background-size: contain; background-position: center bottom; /* A faragott, világító tök — ugyanaz a rajz, mint a nagy tököké, csak kicsiben. Korábban egy egyszerűbb, beágyazott változat állt itt; a megrendelő hiányolta a tököt a témából (2026-09-30), ezért kapott rendes, bordázott testet és világító arcot, és 30-ról 42 képpontra nőtt. */ background-image: url(/images/oszi/tok-vilagito.svg); } /* ---------------------------------------------------------------------- MOZGÁS-ÉRZÉKENYSÉG Aki a rendszerében kikapcsolta a mozgást (vesztibuláris panasz, figyelemzavar), annál a szellemek egyszerűen állnak. A bolt máshol is így jár el (bolt.css, ai_assistant.css). ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html.halloween .hw-ajanlo::before, html.halloween .hw-ajanlo::after, html.halloween .hw-pok { animation: none; } } /* ====================================================================== ŐSZI LEVELEK (2026-09-30) A megrendelő kérése: „látványosabb, az ősz színeivel, őszi falevelekkel, de igazi falevél képekkel, olyannal, ami mobilon is jól néz ki." MIÉRT RAJZOLT LEVÉL, ÉS NEM FOTÓ: a megrendelő választása, miután elé tettem a hármat (szabad licencű fotó / saját kép / rajz). A rajz minden képernyőn éles marad — telefonon is, ahol a kétszeres képpontsűrűség egy fotót elmosna —, egyenként 1,2 kB, és nincs mögötte licenckérdés egy kereskedelmi oldalon. A négy levél önálló fájl (`images/oszi/`), tehát bármikor kicserélhető fotóra anélkül, hogy a CSS-hez hozzá kellene nyúlni. HOL JELENNEK MEG: a SÖTÉT felületeken — a fejléc sávjában, az ajánlósávban, a láblécen és a halloween lapon. A fehér tartalom fölé szándékosan nem kerülnek: ott a termékfotókra feküdnének rá. ====================================================================== */ html.halloween .hw-levelek { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } html.halloween .hw-levelek i { position: absolute; display: block; background-repeat: no-repeat; background-position: center; background-size: contain; /* A lengés: a levél nem ESIK, hanem áll a szélben. A hulló levél végigfutna a lapon, és a szem minden mozdulatát követni akarná — vásárlás közben ez zavaró. Így viszont ott van, él, és a tekintet elengedi. */ animation: hw-level-leng 9s ease-in-out infinite; transform-origin: 50% 0; } /* A négy levélrajz szétosztva. A méret és a hely a BEFOGLALÓ szekciótól függ (lásd alább), itt csak az marad meg, melyik levél melyik. */ html.halloween .hw-levelek i:nth-child(1) { background-image: url(/images/oszi/level-juhar-narancs.svg); } html.halloween .hw-levelek i:nth-child(2) { background-image: url(/images/oszi/level-bukk-arany.svg); } html.halloween .hw-levelek i:nth-child(3) { background-image: url(/images/oszi/level-tolgy-rozsda.svg); } html.halloween .hw-levelek i:nth-child(4) { background-image: url(/images/oszi/level-juhar-voros.svg); } html.halloween .hw-levelek i:nth-child(5) { background-image: url(/images/oszi/level-bukk-arany.svg); } /* Eltérő ütem és fázis, különben az öt levél egyszerre billenne — attól gépies lesz, nem szeles. */ html.halloween .hw-levelek i:nth-child(1) { animation-duration: 9s; animation-delay: -1s; } html.halloween .hw-levelek i:nth-child(2) { animation-duration: 11s; animation-delay: -4s; } html.halloween .hw-levelek i:nth-child(3) { animation-duration: 8s; animation-delay: -6s; } html.halloween .hw-levelek i:nth-child(4) { animation-duration: 12s; animation-delay: -2s; } html.halloween .hw-levelek i:nth-child(5) { animation-duration: 10s; animation-delay: -7s; } @keyframes hw-level-leng { 0%, 100% { transform: translate(0, 0) rotate(-12deg); } 30% { transform: translate(8px, 6px) rotate(6deg); } 60% { transform: translate(-5px, 12px) rotate(14deg); } 80% { transform: translate(4px, 4px) rotate(-4deg); } } /* ── A fejléc sávjában: KÉT apró levél, a pókhálók mellett ───────────── */ html.halloween .fejlec-info .hw-levelek i { width: 22px; height: 22px; opacity: .85; } html.halloween .fejlec-info .hw-levelek i:nth-child(1) { left: 86px; top: 4px; } html.halloween .fejlec-info .hw-levelek i:nth-child(2) { right: 92px; top: 6px; width: 18px; height: 18px; } /* A maradék három ebben a keskeny sávban nem férne el. */ html.halloween .fejlec-info .hw-levelek i:nth-child(n+3) { display: none; } /* ── Az ajánlósávban és a halloween lapon: mind az öt, nagyban ───────── */ html.halloween .hw-ajanlo .hw-levelek i:nth-child(1) { left: 3%; top: 12%; width: 54px; height: 54px; } html.halloween .hw-ajanlo .hw-levelek i:nth-child(2) { left: 22%; bottom: 8%; width: 40px; height: 40px; } html.halloween .hw-ajanlo .hw-levelek i:nth-child(3) { right: 4%; top: 18%; width: 60px; height: 60px; } html.halloween .hw-ajanlo .hw-levelek i:nth-child(4) { right: 26%; bottom: 6%; width: 46px; height: 46px; } html.halloween .hw-ajanlo .hw-levelek i:nth-child(5) { left: 46%; top: 4%; width: 34px; height: 34px; } /* ── A láblécen: három levél a pókháló-sor alatt ─────────────────────── */ html.halloween footer.lablec .hw-levelek i { width: 34px; height: 34px; opacity: .9; } html.halloween footer.lablec .hw-levelek i:nth-child(1) { left: 6%; top: 30px; } html.halloween footer.lablec .hw-levelek i:nth-child(2) { right: 12%; top: 22px; width: 26px; height: 26px; } html.halloween footer.lablec .hw-levelek i:nth-child(3) { left: 38%; top: 26px; width: 30px; height: 30px; } html.halloween footer.lablec .hw-levelek i:nth-child(n+4) { display: none; } /* ── Telefon ─────────────────────────────────────────────────────────── */ @media (max-width: 640px) { /* Az ajánlósávban a kártyák teljes szélességet kapnak, ezért a levelek a sáv PEREMÉRE húzódnak, és kevesebb marad belőlük: öt apró levél egy 390 képpontos képernyőn már pötty, nem dísz. */ html.halloween .hw-ajanlo .hw-levelek i:nth-child(1) { left: 2%; top: 8%; width: 40px; height: 40px; } html.halloween .hw-ajanlo .hw-levelek i:nth-child(2) { display: none; } html.halloween .hw-ajanlo .hw-levelek i:nth-child(3) { right: 2%; top: 14%; width: 44px; height: 44px; } html.halloween .hw-ajanlo .hw-levelek i:nth-child(4) { right: 6%; bottom: 4%; width: 36px; height: 36px; } html.halloween .hw-ajanlo .hw-levelek i:nth-child(5) { display: none; } html.halloween footer.lablec .hw-levelek i:nth-child(3) { display: none; } /* A fejléc sávja telefonon egyetlen sornyi szöveg — ott csak a jobb oldali levél fér el a pókháló és a szöveg közé. */ html.halloween .fejlec-info .hw-levelek i:nth-child(1) { display: none; } html.halloween .fejlec-info .hw-levelek i:nth-child(2) { right: 48px; top: 5px; width: 16px; height: 16px; } } /* ====================================================================== A KÉT LEBEGŐ SZELLEM — az EGÉSZ lapon (2026-09-30) A megrendelő kérése: „a 2 szellem elég, de a szellemek lebeghetnek az egész oldalon, bár ne túl zavaróan." HOL: a lap KÉT SZÉLÉN, a tartalom-dobozon KÍVÜL. Mérve 1280 képpontos ablakban a doboz 55 és 1225 között áll, tehát kétoldalt 55 képpont lila keret marad — pont egy szellemnyi. Ott semmit nem takarnak, és mivel a réteg a képernyőhöz van rögzítve, görgetés közben végig ott úsznak. MIÉRT CSAK 1280 KÉPPONT FÖLÖTT: keskenyebb ablakban nincs ilyen keret, a tartalom a lap széléig ér. Ott a szellem a termékfotókra feküdne — ez volna a „túl zavaró". Alatta marad a régi megoldás: a két szellem az ajánlósáv alján úszik (lásd feljebb). NE TÚL ZAVARÓAN: 16-20 másodperces kör (a sávbeli szellemek 6-8-at kapnak), és .30 fedettség. Ami végig a képernyőn van, annak lassabbnak kell lennie, mint aminek a látogató legörget mellette. ====================================================================== */ html.halloween .hw-szellemek { display: none; } @media (min-width: 1280px) { html.halloween .hw-szellemek { display: block; position: fixed; inset: 0; pointer-events: none; /* A tartalom fölött, de jóval a fejléc (100000) és a Tündér alatt. */ z-index: 3; } html.halloween .hw-szellemek i { position: absolute; display: block; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url('data:image/svg+xml;utf8,'); opacity: .30; } html.halloween .hw-szellemek i:nth-child(1) { left: 7px; top: 22%; width: 42px; height: 53px; animation: hw-szellem-uszik 17s ease-in-out infinite; } html.halloween .hw-szellemek i:nth-child(2) { right: 7px; top: 58%; width: 38px; height: 48px; animation: hw-szellem-uszik 21s ease-in-out infinite; animation-delay: -9s; } /* Az ajánlósáv saját szellemei elmaradnak: kettő elég a lapon, és a megrendelő is kettőt kért. A sáv alsó tere viszont megmarad — ott úsznak a levelek. */ html.halloween .hw-ajanlo::before, html.halloween .hw-ajanlo::after { display: none; } } @keyframes hw-szellem-uszik { 0%, 100% { transform: translate(0, 0) rotate(-5deg); } 25% { transform: translate(10px, -46px) rotate(4deg); } 50% { transform: translate(-4px, -88px) rotate(-3deg); } 75% { transform: translate(8px, -40px) rotate(6deg); } } /* Mozgás-érzékenység: a levelek és a szellemek is megállnak. */ @media (prefers-reduced-motion: reduce) { html.halloween .hw-levelek i, html.halloween .hw-szellemek i { animation: none; } } /* ====================================================================== A TÖKÖK (2026-09-30) A megrendelő szava: „Tudod mi hiányzik még, ami a halloween jellemzője? Hát a tök!" — igaza volt: addig egyetlen 30 képpontos ikon képviselte, a szekció címe mellett. A tök ugyanabban a díszrétegben utazik, mint a levelek (hw_levelek.tpl), csak `` elemként. Így ahol dísz van, ott tök is lehet, és egyetlen include szolgálja ki mind a négy helyszínt — a hol-és-mekkora itt dől el. KÉT RAJZ VAN: a faragott, belülről VILÁGÍTÓ tök a sötét (lila) felületekre való — ott a sárga arc világít; a FARAGATLAN a fehér háttérre, ahol a világító arc kontraszt híján csak piszkos foltnak látszana. ====================================================================== */ html.halloween .hw-levelek b { position: absolute; display: block; background-repeat: no-repeat; background-position: center bottom; background-size: contain; background-image: url(/images/oszi/tok-vilagito.svg); /* A tök nem leng, mint a levél — az a földön ül. Csak a világítása lélegzik, nagyon lassan: ettől lesz élő, anélkül hogy mozogna. */ animation: hw-tok-vilagit 4.5s ease-in-out infinite; } @keyframes hw-tok-vilagit { 0%, 100% { opacity: 1; filter: none; } 50% { opacity: .93; filter: brightness(1.12); } } /* ── A fejléc sávjában NINCS tök ────────────────────────────────────── Kipróbáltam, és a 34 képpontos sáv tele van szöveggel: a tök ráfeküdt a „Dunakeszi, Fő út 121." feliratra. A pókháló áttetsző, az elfér mögötte — egy tömör tök nem. A fejléc díszét a nagy háló, a levelek (és a halloween lapon a pókok) viszik. */ html.halloween .fejlec-info .hw-levelek b { display: none; } /* ── Az ajánlósávban és a halloween lapon: NAGY tök a bal alsó sarokban. Itt van rá hely: a sáv alsó sávját a szellemeknek és a leveleknek úgyis kihagytuk. ─────────────────────────────────────────────────── */ html.halloween .hw-ajanlo .hw-levelek b { left: 2.5%; bottom: 4px; width: 92px; height: 80px; } /* ── A láblécen nincs külön tök: ott a záró sor saját tök+szellem dísze ül (lásd feljebb), két tök egymás mellett sok volna. ─────────────── */ html.halloween footer.lablec .hw-levelek b { display: none; } @media (max-width: 640px) { /* Telefonon a nagy tök a kártyák alá csúszna: kisebb, és a sarokba húzva. */ html.halloween .hw-ajanlo .hw-levelek b { left: 2%; bottom: 2px; width: 62px; height: 54px; } } @media (prefers-reduced-motion: reduce) { html.halloween .hw-levelek b { animation: none; } } /* ====================================================================== A FEJLÉC FELIRATA A NAGYOBB HÁLÓ FÖLÖTT A háló 132 képpontosra nőtt, és így a „Dunakeszi, Fő út 121." meg az ügyfélszolgálati sor MÖGÉ is benyúlik. A megrendelő ezt látta és jónak mondta — a háló tehát marad. Számolva viszont: ahol a fehér felirat egy háló-VONALRA esik, ott a vonal (#EDE4F5, 0,78 fedettség a lila fölött) világos szürkévé keveri a hátteret, és a kontraszt 18,3-ról 1,9-re zuhan. A vonalak vékonyak, tehát ez a felirat kis részét éri — de pont egy betű szárára esve az a betű eltűnik. A megoldás nem a háló gyengítése, hanem egy szűk, sötét árnyék a felirat köré: a betű így a saját hátterét hozza magával, bármi is van mögötte. A háló látványából semmit nem vesz el. ====================================================================== */ html.halloween .fejlec-info, html.halloween .fejlec-info a, html.halloween .fejlec-info span { text-shadow: 0 0 3px rgba(27, 15, 43, .95), 0 1px 2px rgba(27, 15, 43, .85); }