/* =========================================================================== KLARO -- LEADGAP MARKA-TEMA A klaro.min.css UTAN toltendo be. A Klaro 0.7.21 stiluslapja CSS-valtozokkal dolgozik (var(--dark1, #333) mintaban), tehat a temazas TULNYOMORESZT valtozo-allitas -- nem szelektor- haboru. Amit itt felulirunk szelektorral, az csak az, amire nincs valtozo. FONTOS a valtozokrol: a Klaro NEM deklaralja oket sehol, csak HASZNALJA (fallbackkel). Ezert kell nekunk deklaralni -- a .klaro gyokerelemre teve a savka es a modal minden gyereke orokli. A tokenek a leadgap brand-tokenekbol jonnek (accent #E6007E, ink #0F1729, r=8px, Inter / Plus Jakarta Sans). A var(...) fallbackok azert vannak, hogy ez a fajl a boncolas appon KIVUL (Base44 fooldal) is valtozatlanul mukodjon, ahol a :root tokenek nincsenek definialva. =========================================================================== */ .klaro { /* --- betuk es geometria ------------------------------------------------ */ --font-family: var(--sans, 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif); --title-font-family: var(--display, 'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, sans-serif); --font-size: 15px; --border-radius: var(--r, 8px); --border-width: 1px; --border-style: solid; --notice-max-width: 520px; /* --- alap: a markanak megfelelo sotet kartya --------------------------- */ /* FEKETE, nem sotet-navy (Klara, 2026-08-21, live-nezet utan). A leadgap lablece is fekete, tehat a savka igy ul bele a lap aljara. */ --dark1: #000000; /* a savka es a modal hattere */ --dark2: #33405C; /* semleges gombhatter + valaszto-vonalak */ --dark3: #94A3B8; /* halvany leiro-szoveg */ --light1: #FFFFFF; /* fo szoveg a sotet karyan */ --light2: rgba(255, 255, 255, .28); --light3: #94A3B8; --white3: #FFFFFF; /* a kapcsolo gombja */ --button-text-color: #FFFFFF; /* --- akcent: a Klaro zoldje HELYETT a marka-magenta -------------------- */ --green1: var(--accent, #E6007E); /* Elfogadom + bekapcsolt kapcsolo */ --green2: #F0489F; /* masodlagos akcent (kotelezo kapcsolok) */ --green3: #FF9ACF; /* fokusz-derenges */ --blue1: #33405C; /* "info" gomb: semleges, ne kek */ --blue2: #46567A; --box-shadow-color: rgba(230, 0, 126, .55); } /* --- Ami valtozoval nem allithato ---------------------------------------- */ /* KERET ES ARNYEK -- NEZETENKENT MAS, mert a notice ket KULONBOZO alakot vesz fel. A Klaro sajat stiluslapja szerint (merve): 1024 px FELETT a notice egy jobb-also KARTYA (right/bottom 20px, max-width a --notice-max-width-bol, sajat arnyekkal), 1024 px ALATT teljes szelessegu CSIK. Ket kulonbozo alakhoz ket kulonbozo arnyek kell: a csiknak FELFELE (mert alul a kepernyo szele van), a kartyanak korbe. Ez a szabaly korabban GLOBALIS volt, es a felfele-arnyekot a kartyara is rahuzta. */ @media (max-width: 640px) { .klaro .cookie-notice:not(.cookie-modal-notice) { border: 1px solid rgba(255, 255, 255, .10); box-shadow: 0 -12px 40px rgba(15, 23, 41, .28); } } @media (min-width: 641px) { .klaro .cookie-notice:not(.cookie-modal-notice) { border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 18px 48px rgba(15, 23, 41, .38); } } /* TABLET-PORTRE IS KARTYA (Klara dontese, 2026-09-03). A Klaro sajat kartya-szabalyai csak 1024 px FELETT lepnek eletbe -- ott lentebb teljes szelessegu csikot tervezett. A vendor stiluslapjat NEM irom at (az a frissiteskor ugyis elveszne); helyette itt ismetlem meg ugyanazokat az ertekeket a 641-1023 px savra, a Klaro sajat valtozoival, hogy egy helyen (a --notice-* valtozoknal) maradjon allithato. Igy a hatar egysegesen: 640 px-ig teljes szelessegu also lap, folotte kartya. */ @media (min-width: 641px) and (max-width: 1023px) { .klaro .cookie-notice:not(.cookie-modal-notice) { position: fixed; right: var(--notice-right, 20px); left: var(--notice-left, auto); bottom: var(--notice-bottom, 20px); top: var(--notice-top, auto); max-width: var(--notice-max-width, 520px); border-radius: var(--border-radius, 8px); } } /* A tajekoztato-link a savkaban es a modalban: markaszin + alahuzas. A specificitas SZANDEKOSAN egyezik a Klaro sajat "cookie-notice p a" szintjevel es utana all a sorban -- ezert nyer. */ .klaro .cookie-notice p a, .klaro .cookie-modal p a, .klaro .cookie-notice .cm-link, .klaro .cookie-modal .cm-link { color: var(--accent, #E6007E); text-decoration: underline; text-underline-offset: 2px; } .klaro .cookie-notice p a:hover, .klaro .cookie-modal p a:hover, .klaro .cookie-notice .cm-link:hover { color: #FFFFFF; } /* Gombok: nagyobb tapfelulet es a marka betuvastagsaga. */ .klaro .cookie-notice .cm-btn, .klaro .cookie-modal .cm-btn { font-weight: 600; padding: 10px 18px; } .klaro .cookie-notice .cm-btn.cm-btn-success:hover, .klaro .cookie-modal .cm-btn.cm-btn-success:hover { background-color: #C40069; } /* Az ELUTASITAS nem "veszelyes muvelet": egy opt-in savkaban ez a ket egyenrangu valasztas egyike. Semleges keret, nem piros, nem tomor. */ .klaro .cookie-notice .cm-btn.cm-btn-danger, .klaro .cookie-modal .cm-btn.cm-btn-danger { background-color: transparent; border: 1px solid rgba(255, 255, 255, .28); } .klaro .cookie-notice .cm-btn.cm-btn-danger:hover, .klaro .cookie-modal .cm-btn.cm-btn-danger:hover { background-color: rgba(255, 255, 255, .10); } /* Billentyuzet-fokusz. A savka minden eleme fokuszalhato, es a Klaro alap fokuszjelzese sotet hatteren alig latszik. */ .klaro .cookie-notice .cm-btn:focus-visible, .klaro .cookie-modal .cm-btn:focus-visible, .klaro .cookie-notice a:focus-visible, .klaro .cookie-modal a:focus-visible { outline: 2px solid var(--accent, #E6007E); outline-offset: 2px; } /* --- KAPCSOLOK: legyenek LATHATOK ----------------------------------------- A Klaro alap-kapcsoloja kikapcsolt allapotban vilagosszurke (#f2f2f2) feher gombbal -- fekete hatteren ez egy alaktalan folt, a be/ki allapot nem kulonbozik eleggé (merve a renderelt ablakon: mindket allapot rgb(242,242,242) hatteru volt). Ezert: KIKAPCSOLVA halvany magenta kitoltes + magenta keret, BEKAPCSOLVA tomor magenta. A keretet SZANDEKOSAN inset box-shadow adja, nem border: a gomb (::before) pozicioja pixelre ki van szamolva a Klaro CSS-eben, egy valodi keret elcsusztatna. A box-shadow nem valtoztat a geometrian. A szelektorok PONTOSAN a Klaro sajatjait tukrozik (azonos suly), es ez a fajl kesobb jon -- ezert nyer. */ .klaro .cookie-modal .cm-list-label .slider, .klaro .cookie-notice .cm-list-label .slider { background-color: rgba(230, 0, 126, .20); box-shadow: inset 0 0 0 2px var(--accent, #E6007E); } .klaro .cookie-modal .cm-list-label .slider::before, .klaro .cookie-notice .cm-list-label .slider::before { background-color: var(--accent, #E6007E); } .klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider, .klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider { background-color: var(--accent, #E6007E); box-shadow: inset 0 0 0 2px var(--accent, #E6007E); } .klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before, .klaro .cookie-notice .cm-list-input:checked + .cm-list-label .slider::before { background-color: #FFFFFF; } /* A "mindig szukseges" es a felig-kapcsolt allapot: ugyanaz a csalad, halkitva, hogy ne latsszon aktiv valasztasnak. */ .klaro .cookie-modal .cm-list-input.required:checked + .cm-list-label .slider { background-color: rgba(230, 0, 126, .45); box-shadow: inset 0 0 0 2px rgba(230, 0, 126, .45); } /* A "Klaro" kredit: nem tuntetem el (BSD-3, a szerzoi jog megtartasa korrekt), csak halkitom. */ .klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by { opacity: .5; } .klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by a { color: rgba(255, 255, 255, .7); } /* MOBIL-BIZTONSAG (2026-09-03) -- csak vedohalo, layout-atrendezes nelkul. */ .klaro .cookie-notice:not(.cookie-modal-notice) { box-sizing: border-box; /* A max-width: 100% ITT VOLT, es EZ VOLT A DESKTOP-REGRESSZIO OKA (2026-09-03): magasabb specificitassal felulirta a Klaro sajat --notice-max-width: 520px erteket, ezert a jobb-also KARTYA helyett teljes szelessegu csik lett asztalon. Most a mobil blokkba kerult, ahol a teljes szelesseg a kivant viselkedes -- 640 px felett a Klaro alap kartyaja jon vissza. */ /* Elobb a regi mertekegyseg (minden bongeszo erti), utana a KIS viewport -- amelyik bongeszo ismeri az svh-t, az a masodikat hasznalja. A kulonbseg pont a mobil eszkoztar magassaga: a vh a NAGY (eszkoztar nelkuli) viewportot meri, tehat cimsor-latszo allapotban tul nagyot enged. */ max-height: 85vh; max-height: 80svh; overflow-y: auto; overscroll-behavior: contain; } /* --------------------------------------------------------------------------- A VALODI TELEFONON MERT HIBA (Klara kepe, 2026-09-03 13:57): a gomboknak csak a FELSO ele latszott -- a savka alja a rendszer-navigacios sav (Android also gombsor) MOGE esett. Az ok nem a savka magassaga: a position:fixed; bottom:0 a LAYOUT viewport aljahoz kot, az pedig benyulik a rendszersav moge. Ezt a headless meres nem tudja reprodukalni, mert ott nincs bongeszo-keret -- ezert nem a merest hiszem el, hanem TARTALEKOT hagyok: a savka alja ala 72 px + a keszulek sajat biztonsagi savja kerul, igy a gombok akkor is a lathato teruleten belul maradnak, ha az also savot a bongeszo eltakarja. A tartalek megnovelne a savka magassagat, ezert mobilon EGYSZERRE tomoritek is: kisebb betu, szorosabb sorkoz, kevesebb belso margo. --------------------------------------------------------------------------- */ /* A GOMB-VEDOHALO NEM SZELESSEG, HANEM BEVITELI MOD kerdese (2026-09-03, tablet-kor). A telefonon azert vagodtak le a gombok, mert a rendszer-navigacios sav a layout viewport aljara ul -- ez MINDEN erintos keszuleken igy van, a tableten is, nem csak 640 px alatt. Ezert a tartalek feltetele "erintos ES legfeljebb tablet-szeles", nem a puszta szelesseg. Egy 1024 px-re huzott ASZTALI ablak (pointer: fine) igy nem kap felesleges 72 px-es uresjaratot, egy 768 px-es tablet viszont igen. MERVE: tableten enelkul csak 16 px allt a gombok alatt -- ugyanannyi, mint a telefonon a hiba elott. */ @media (max-width: 1024px) and (pointer: coarse) { .klaro .cookie-notice:not(.cookie-modal-notice) { max-height: 85vh; max-height: 80svh; padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } } .klaro .cookie-notice *, .klaro .cookie-modal .cm-modal * { box-sizing: border-box; } .klaro .cookie-notice p, .klaro .cookie-notice .cn-body { overflow-wrap: anywhere; } @media (max-width: 480px) { .klaro .cookie-modal .cm-modal { max-width: 100%; max-height: 88vh; overflow-y: auto; } } /* --- "Bezárom" fallback a savka jobb-felso sarkaban (2026-09-03) ---------- A savka TETEJE mindig latszik, ezert ide kerul a menekulo-ut. Gomb-elem, hogy billentyuzetrol is elerheto legyen, de link-kinezettel (alahuzva), ahogy Klara kerte. A 44 px-es tap-target a mobil minimum. */ .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body { position: relative; } /* ASZTALON A BEZÁROM NEM KELL, ES CSUNYA IS (merve: a full-width savon a jobb felso sarokban lebegett, elszakadva a tartalomtol). Ott a ket gomb mindig latszik, tehat nincs mitol menekulni. Ezert alapbol REJTETT, es CSAK a mobil media query kapcsolja be -- a gomb a DOM-ban marad, csak nem jelenik meg. Ez a szabaly 2026-09-03-i desktop-regresszio javitasa: az elso valtozatban a pozicionalas globalis volt, ezert asztalon is hatott. */ .klaro .lg-bezarom { display: none; } /* =========================================================================== VIZSZINTES BIZTONSAG (2026-09-03, Klara masodik telefon-kepe) A savka jobb oldala levagodott: a "Bezárom" utolso betuje, az "Elfogadom" jobb szele es a szoveg jobb szelei a kepen kivulre estek. AZ OK, es ezert NEM a savka szelesseget allitom: a fooldal maga szelesebb a kepernyonel (merve: 404 vs 390, kisebb keszuleken 388 vs 360). A savka position:fixed, tehat a LAYOUT viewporthoz igazodik -- vagyis a mar kitagult szelesseghez. A savka szelesseget CSS-bol nem lehet a lathato savhoz kotni, mert a lathato sav merete a lapnak nem ismert. AMIT VISZONT LEHET: a TARTALMAT behuzni annyira, hogy a tulcsordulas melle is a lathato savon belul vegzodjon. Ezert a jobb oldali behuzas SZANDEKOSAN nagyobb a balnal (aszimmetrikus), es a betut/sorkozt tomoritjuk, hogy a behuzas ne noveljen sokat a savka magassagan. A szam: a legrosszabb mert tulcsordulas 28 px (360-as kepernyon), ezert a jobb oldali tartalek 44 px -- az meg 28 px eltunese mellett is hagy ~16 px-t. =========================================================================== */ @media (max-width: 640px) { /* Telefonon a teljes szelesseg a kivant alak (Klara igy hagyta jova). */ .klaro .cookie-notice:not(.cookie-modal-notice) { max-width: 100%; } /* A jobb oldali NAGY behuzas es a betu-tomorites a fooldal vizszintes tulcsordulasa miatt kellett. Klara 2026-09-03-an megszuntette a tulcsordulast (fuggetlenul visszamerve: 390/360/320 px-en 0 px), ezert a kompenzacio VISSZAVEVE -- szimmetrikus margo es olvashato betumeret. */ .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body { padding: 14px 14px 8px; font-size: 14px; line-height: 1.45; } .klaro .cookie-notice .cm-link { margin-bottom: 2px; } /* A cimsor melletti hely a Bezárom-nak; a gomb maga is beljebb kerul. */ .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body > *:first-child { padding-right: 96px; } /* ITT kapcsol be a Bezárom -- csak mobilon. */ .klaro .lg-bezarom { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 6px; right: 6px; min-width: 44px; min-height: 44px; padding: 8px 10px; background: none; border: 0; cursor: pointer; font: inherit; font-size: 14px; line-height: 1.2; color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; } .klaro .lg-bezarom:hover { color: var(--accent, #E6007E); } .klaro .lg-bezarom:focus-visible { outline: 2px solid var(--accent, #E6007E); outline-offset: 2px; border-radius: 4px; } /* A gomb-tomorites is a vizszintes beferesert volt; visszaveve normal meretre. */ .klaro .cookie-notice .cm-btn { padding: 11px 15px; } }