/* AJTÓ — a rendszer három bejárati képernyője FoglalGo-arculatban. ============================================================================ MI EZ, ÉS MIÉRT KÜLÖN FÁJL (N22, 2026-08-27) A `/admin/belepes` és a `/admin/uj-jelszo` az egyetlen két lap, amit egy tulaj a rendszerből MÉG a belépés előtt lát. Eddig a régi admin kék arculatát viselték (`admin.css`: #2563eb gomb, rendszer-sans betű), miközben a weboldal, a foglalóoldal és a pult már a FoglalGo papírkrém-terrakotta nyelvén beszél. Magor kérése (2026-08-27): „a belépő lap még a RÉGI arculatot viseli — átöltöztessem?" → „1-a", vagyis igen. N25 (2026-08-27): HARMADIKKÉNT ide került az `/admin/aszf-elfogadas` is. Az nem belépés ELŐTT áll, hanem közvetlenül utána, a pult ELŐTT — a beléptetési út tehát nem tud a közepén arculatot váltani, pont a legérzékenyebb képernyőn (itt születik egy jogi elfogadás). A lap SZÖVEGÉT ez a kör nem érintette: csak a keret új. MIÉRT NEM AZ `admin.css`-BE ÍRTAM. Azt a fájlt a régi admin MIND A ~15 lapja tölti, és a felület BE VAN FAGYASZTVA. Egyetlen bájt módosítás ott a naptárt, a foglalásokat és a beállításokat is átfestené. Ez a fájl ezért külön áll, és MINDEN szabálya a `` gyökérosztály alá van kötve: ha valaki egyszer véletlenül rákötné egy régi lapra, nem tud átszivárogni. A BETÖLTÉSI SORREND MŰSZAKI DÖNTÉS, NEM ÍZLÉS: 1. /kozos/tokenek.css — a FoglalGo színek, betűk, térközök 2. /admin/admin.css — MARAD (lásd lentebb, miért) 3. /admin/ajto.css — ez a fájl A 2. lépés azért marad, mert (a) a `belepes.js` az `/admin/admin.js`-ből veszi az üzenet- és űrlapkezelőt, ami `admin.css`-beli osztályneveket (`uzenet`, `hiba`, `siker`) tesz a DOM-ba; (b) a `tesztek/ valto-lathatosag-es-a11y.teszt.js` őr kimondja, hogy ez a két lap az `admin.css`-t tölti és a `fresha.css`-t nem — ez a kapu tartja távol a megjelenés-váltókat a belépés előtti képernyőkről. NÉVÜTKÖZÉS, AMIRE FIGYELNI KELL: a `--sugar-kicsi` és a `--sugar-nagy` NÉV mindkét tokenkészletben létezik, más értékkel (admin: 9px/16px, közös: 6px/12px). A fenti sorrendben az `admin.css` értéke nyer. Ez a fájl ezért SAJÁT nevű sugár-tokeneket használ (`--ajto-sugar-*`) — így az érték attól független, melyik lap melyik készletet tölti be. ŐRÖK, AMIK EZT A LAPOT MÉRIK (megsértésük piros, nem szépséghiba): - tesztek/e2e/mobil.spec.js — 360x740-en nincs kilógás, minden űrlapmező betűje >= 16 px, minden koppintó-cél >= 24 px. - tesztek/e2e/belepes.setup.js, smoke.spec.js — `#email`, `#jelszo`, `#belepes button[type=submit]`. - tesztek/e2e/admin-kor.spec.js — látható `h1`, nulla megjelenés-váltó. - eszkozok/k16-admin-tipografia-meres.mjs — `h1`, `label`, `input[type=email|password]`, `.kuldes`, `.szoveg-gomb`. Ezért maradnak meg a régi osztálynevek (`kuldes`, `szoveg-gomb`) akkor is, ha a megjelenésük teljesen új. BETŰMÉRET: minden érték rem-ben (K-16). A böngésző betűméret-beállítása így érvényesül — px-ben megadva a lap némán figyelmen kívül hagyná. ========================================================================== */ .ajto { /* Saját nevű sugarak — lásd a fenti névütközés-jegyzetet. */ --ajto-sugar-mezo: 8px; --ajto-sugar-kartya: 14px; margin: 0; min-height: 100dvh; background: var(--szin-hatter, #FBF5E9); color: var(--szin-szoveg, #26241F); font-family: var(--betu-szoveg, system-ui, sans-serif); line-height: var(--sormagassag-alap, 1.55); -webkit-font-smoothing: antialiased; } /* A lap közepe. `min-height: 100dvh` a `.ajto`-n, itt csak a függőleges igazítás — így rövid kártyánál középen ül, hosszúnál (hibaüzenet + Turnstile) fentről indul és görgethető marad. */ .ajto .ajto-lap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ter-5, 1.25rem); min-height: 100dvh; padding: var(--ter-6, 1.5rem) var(--ter-4, 1rem) var(--ter-8, 2.5rem); } /* ---------- A FoglalGo névjegy a kártya fölött --------------------------- Egyben visszaút is a weboldalra: aki ide tévedt, egy koppintással kijut. SZÁNDÉKOSAN EGYETLEN hivatkozás áll itt: a WCAG 2.2 térköz-kivétele csak addig véd, amíg nincs mellette másik cél 24 px-en belül. */ .ajto .ajto-marka { display: inline-flex; align-items: center; gap: var(--ter-2, 0.5rem); padding: var(--ter-2, 0.5rem); border-radius: var(--ajto-sugar-mezo); font-family: var(--betu-cim, Georgia, serif); font-size: 1.375rem; font-weight: var(--vastagsag-felkover, 600); letter-spacing: var(--betukoz-cim, -0.015em); color: var(--szin-szoveg, #26241F); text-decoration: none; } .ajto .ajto-marka em { font-style: italic; color: var(--szin-marka, #D5583B); } .ajto .ajto-marka img { width: 1.875rem; height: auto; border-radius: var(--sugar-teljes, 999px); } .ajto .ajto-marka:hover em { color: var(--szin-akcio-hover, #AD3C22); } /* ---------- A kártya ---------------------------------------------------- */ /* A `.doboz.keskeny` osztály a HTML-ben marad (a régi admin kódja több helyen is számít rá), a megjelenését viszont innen kapja: azonos fajsúlyú szabály, és ez a fájl tölt később. */ .ajto .ajto-kartya { width: 100%; max-width: 25rem; /* 400px */ margin: 0; padding: var(--ter-7, 2rem) var(--ter-6, 1.5rem); background: var(--szin-felulet, #FFFCF4); border: 1px solid var(--szin-vonal, #EADFC8); border-radius: var(--ajto-sugar-kartya); box-shadow: none; } .ajto .ajto-kartya h1 { margin: 0; font-family: var(--betu-cim, Georgia, serif); font-size: 1.75rem; /* 28px */ font-weight: var(--vastagsag-felkover, 600); line-height: var(--sormagassag-cim, 1.25); letter-spacing: var(--betukoz-cim, -0.015em); color: var(--szin-szoveg, #26241F); } .ajto .ajto-alcim { margin: var(--ter-2, 0.5rem) 0 var(--ter-6, 1.5rem); font-size: var(--meret-alap, 0.9375rem); color: var(--szin-szoveg-halvany, #6F675A); } /* ---------- Űrlapmezők --------------------------------------------------- */ .ajto label { display: block; margin-bottom: var(--ter-4, 1rem); font-family: var(--betu-szoveg, system-ui, sans-serif); font-size: var(--meret-kicsi, 0.8125rem); font-weight: var(--vastagsag-felkover, 600); color: var(--szin-szoveg-masodlagos, #4B463C); } /* A `max(1rem, …)` NEM óvatoskodás, hanem a kör alapja: az iOS Safari MINDEN 16 px alatti mezőre ránagyít fókuszáláskor, és nem nagyít vissza — pont ezért nem tudott Magor telefonról belépni. Az `admin.css` ugyanezt `(pointer: coarse)` mögött adja, DE ez a szabály nagyobb fajsúlyú (`.ajto` + elem + attribútum), tehát felülírná — ezért kell itt is, feltétel nélkül. */ .ajto input[type=email], .ajto input[type=password], .ajto input[type=text] { display: block; width: 100%; margin: var(--ter-2, 0.5rem) 0 0; padding: 0 var(--ter-3, 0.75rem); min-height: 2.875rem; /* 46px — ujjal is pontosan eltalálható */ font-family: inherit; font-size: max(1rem, var(--meret-alap, 0.9375rem)); color: var(--szin-szoveg, #26241F); background: var(--szin-felulet, #FFFCF4); border: 1px solid var(--szin-vonal-eros, #D8CBAC); border-radius: var(--ajto-sugar-mezo); transition: border-color var(--atmenet-gyors, 120ms) var(--atmenet-ivelt, ease), box-shadow var(--atmenet-gyors, 120ms) var(--atmenet-ivelt, ease); } .ajto input[type=email]:hover, .ajto input[type=password]:hover, .ajto input[type=text]:hover { border-color: var(--szin-vonal-sotet, #B3A685); } .ajto input:focus-visible { outline: none; border-color: var(--szin-marka, #D5583B); box-shadow: 0 0 0 3px var(--szin-akcio-tint, #F8E3DC); } /* ---------- A fő gomb ---------------------------------------------------- */ /* A `.kuldes` osztály NEM cserélhető: a K-16 mérőszkript ezt keresi. */ .ajto .gomb.kuldes { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3rem; /* 48px */ margin-top: var(--ter-5, 1.25rem); padding: 0 var(--ter-5, 1.25rem); font-family: inherit; font-size: max(1rem, var(--meret-alap, 0.9375rem)); font-weight: var(--vastagsag-felkover, 600); color: var(--szin-akcio-szoveg, #FFFFFF); background: var(--szin-akcio, #C2482B); border: 1px solid transparent; border-radius: var(--ajto-sugar-mezo); cursor: pointer; transition: background-color var(--atmenet-gyors, 120ms) var(--atmenet-ivelt, ease); } .ajto .gomb.kuldes:hover { background: var(--szin-akcio-hover, #AD3C22); } .ajto .gomb.kuldes:disabled { opacity: 0.55; cursor: default; } /* ---------- Másodlagos művelet (elfelejtett jelszó) ---------------------- */ /* A gomb a saját sorában áll, és 44 px magas. Ez nem esztétika: a WCAG 2.2 AA (2.5.8) 24x24-et kér, és a magában álló célra a térköz-kivétel csak addig véd, amíg tényleg nincs mellette semmi. A 44 px az ujj mérete. */ .ajto .ajto-segito { margin: var(--ter-4, 1rem) 0 0; text-align: center; } .ajto .szoveg-gomb { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; /* 44px */ padding: 0 var(--ter-3, 0.75rem); font-family: inherit; font-size: var(--meret-alap, 0.9375rem); color: var(--szin-akcio, #C2482B); background: none; border: 0; border-radius: var(--ajto-sugar-mezo); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .ajto .szoveg-gomb:hover { color: var(--szin-akcio-hover, #AD3C22); } .ajto .szoveg-gomb:disabled { opacity: 0.5; cursor: default; } /* ---------- Turnstile ---------------------------------------------------- */ /* A widget 300 px széles beágyazott keret. A `max-width: 100%` és a középre igazítás nélkül egy szűk telefonon kilógna — az őr ezt pirosnak látná. */ .ajto #turnstile-widget { display: flex; justify-content: center; margin-top: var(--ter-4, 1rem); } .ajto #turnstile-widget:empty { margin-top: 0; } .ajto #turnstile-widget iframe { max-width: 100%; } /* ---------- Visszajelzés ------------------------------------------------- */ /* Az osztályneveket az `admin.js` `uzenetMutat()`-ja adja: `uzenet hiba`, `uzenet siker`. A szerepük nem szín-, hanem jelentésfüggő — ezért van keretük is, nemcsak háttérszínük (színvakság, erős kontrasztú mód). */ .ajto .uzenet { margin-top: var(--ter-4, 1rem); padding: var(--ter-3, 0.75rem) var(--ter-4, 1rem); font-size: var(--meret-alap, 0.9375rem); border: 1px solid transparent; border-radius: var(--ajto-sugar-mezo); } .ajto .uzenet.hiba { color: var(--szin-hiba, #A93226); background: var(--szin-hiba-tint, #F8E3DD); border-color: var(--szin-hiba, #A93226); } .ajto .uzenet.siker { color: var(--szin-siker-szoveg, #17453A); background: var(--szin-siker-tint, #E3EDE5); border-color: var(--szin-siker, #17453A); } /* ---------- A kártya alatti sor ------------------------------------------ */ /* A hivatkozás SZÁNDÉKOSAN mondatba ágyazott: így esik a WCAG 2.2 AA szövegbe-ágyazott kivétele alá, és nem kell köré 24 px-es dobozt húzni egy kétszavas link kedvéért. */ .ajto .ajto-lablec { margin: 0; max-width: 25rem; font-size: var(--meret-kicsi, 0.8125rem); line-height: var(--sormagassag-alap, 1.55); color: var(--szin-szoveg-halvany, #6F675A); text-align: center; } .ajto .ajto-lablec a { color: var(--szin-akcio, #C2482B); text-underline-offset: 3px; } /* ══════════════════════════════════════════════════════════════════════════ A SZÉLES KÁRTYA — az ÁSZF-elfogadó képernyő (N25, 2026-08-27) ══════════════════════════════════════════════════════════════════════════ A másik két ajtó egy rövid űrlap: 400 px pont elég neki. Ez a lap viszont egy TELJES SZERZŐDÉST mutat beágyazott keretben — ott a 400 px nem „letisztult", hanem olvashatatlan: a jogi szöveg 3-4 szavas sorokra törne. Ezért kap saját, széles változatot. Ez az EGYETLEN eltérés a három ajtó között; minden más (szín, betű, gomb, mező, fókusz) közös. */ .ajto .ajto-kartya--szeles { max-width: 52rem; /* 832px — a beágyazott ÁSZF kényelmesen olvasható */ } /* A beágyazott szerződés. A magasság SZÁNDÉKOSAN nem fix 420 px: telefonon az a képernyő több mint felét elvenné, és a gomb kicsúszna a látóterből. A `clamp` alsó határa (18rem) még mutat ~8 sort, a felső (26rem) asztalon adja a régi, kényelmes ablakot. */ .ajto .aszf-keret { display: block; width: 100%; height: clamp(18rem, 55vh, 26rem); margin-top: var(--ter-5, 1.25rem); background: var(--szin-felulet, #FFFCF4); border: 1px solid var(--szin-vonal-eros, #D8CBAC); border-radius: var(--ajto-sugar-mezo); } /* A két melléklet-link egy sorban. Mondatba ágyazott hivatkozások (WCAG 2.2 AA szövegkivétel), de a sormagasság itt szándékosan bőségesebb: telefonon a két link két külön sorba kerül, és ujjal is el kell tudni találni őket. */ .ajto .aszf-linkek { margin: var(--ter-3, 0.75rem) 0 0; font-size: var(--meret-alap, 0.9375rem); line-height: 1.9; color: var(--szin-szoveg-halvany, #6F675A); } .ajto .aszf-linkek a { color: var(--szin-akcio, #C2482B); text-underline-offset: 3px; } /* A D4 KIEMELT BLOKK. Az ÁSZF megjelenítési követelménye, hogy ez a felelősség-korlátozás KIEMELVE, a gomb FELETT álljon — tehát ez nem díszítés, hanem a jogi érvényesség egyik feltétele. A régi kinézete egy 2 px-es fekete keret volt; ez itt NEM halványabb nála, hanem hangosabb: ugyanaz a vastag keret, a márkaszínben, tintás háttérrel és a bal oldalon egy vaskos sávval. A `font-weight: 700` marad. */ .ajto .aszf-kiemelt { margin: var(--ter-5, 1.25rem) 0 0; padding: var(--ter-4, 1rem) var(--ter-4, 1rem) var(--ter-4, 1rem) var(--ter-5, 1.25rem); border: 2px solid var(--szin-marka, #D5583B); border-left-width: 6px; border-radius: var(--ajto-sugar-mezo); background: var(--szin-akcio-tint, #F8E3DC); font-size: var(--meret-alap, 0.9375rem); font-weight: 700; line-height: var(--sormagassag-alap, 1.55); color: var(--szin-szoveg, #26241F); } /* A gombfelirat itt egy egész mondat, tehát TÖRDELŐDIK. A közös `.gomb.kuldes` szabály flex + fix 3rem magasságra készült (egy szó), ezért ennek a lapnak külön kell kimondani, hogy több sor is elfér benne. */ .ajto .ajto-kartya--szeles .gomb.kuldes { padding-block: var(--ter-3, 0.75rem); line-height: 1.35; text-align: center; } /* A verzió-sor. A JS tölti fel (`Verzió: 2026-08-20`), üresen marad, ha a szerver nem ad verziót — ezért `:empty` esetén a térköze is eltűnik, különben egy láthatatlan sor tolná lejjebb az üzenetdobozt. */ .ajto .aszf-verzio { margin: var(--ter-3, 0.75rem) 0 0; font-size: var(--meret-kicsi, 0.8125rem); color: var(--szin-szoveg-halvany, #6F675A); text-align: center; } .ajto .aszf-verzio:empty { margin: 0; } /* ---------- Fókusz mindenhol -------------------------------------------- */ .ajto a:focus-visible, .ajto button:focus-visible { outline: 2px solid var(--szin-fokusz, #D5583B); outline-offset: 2px; } /* ---------- Szűk telefon ------------------------------------------------- */ /* A kártya a képernyő széléig ér. Nem dizájn-divat: a Turnstile keret 300 px széles, és 360 px-es telefonon a lap oldalpaddingja + a kártya paddingja együtt 296 px belső helyet hagyna — a keret kilógna. Így 328 px marad. */ @media (max-width: 26em) { .ajto .ajto-lap { padding-inline: 0; } .ajto .ajto-kartya { max-width: none; padding-inline: var(--ter-4, 1rem); border-inline: 0; border-radius: 0; } .ajto .ajto-lablec { padding-inline: var(--ter-4, 1rem); } } /* ---------- Kevesebb mozgás --------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .ajto * { transition-duration: 0ms !important; } } /* ---------- Erős kontrasztú mód ----------------------------------------- */ /* Windows nagy kontrasztú módban a háttérszínek eltűnnek. A kereteket `currentColor`-ra váltjuk, különben a mezők és a gomb kontúr nélkül maradnak, és a lap egyetlen szövegfolyammá esik szét. */ @media (forced-colors: active) { .ajto .ajto-kartya, .ajto input, .ajto .aszf-keret, .ajto .gomb.kuldes { border-color: currentColor; } /* A D4 blokk kiemeltsége JOGI követelmény: nagy kontrasztú módban a tintás háttér eltűnik, tehát a keretnek kell egyedül vinnie a kiemelést. */ .ajto .aszf-kiemelt { border-color: currentColor; } .ajto a:focus-visible, .ajto button:focus-visible, .ajto input:focus-visible { outline: 2px solid currentColor; } }