/* ============================================================================= auth_v3.css — a BELÉPÉS (`login.php`) és a JELSZÓCSERE (`change_password.php`) megjelenése a mai (V3) nyelven. ----------------------------------------------------------------------------- MIÉRT LÉTEZIK EZ A FÁJL. A 2026-07-31-i egységesség-mérés szerint ez a két lap SOHA nem kapott saját megjelenést: csak a mindenkinek járó `style.css`-t. Így az ember sorrendben ezt látta: csupasz belépő → csupasz jelszócsere → meleg, zöld Kezdőlap. A belépés az EGYETLEN lap, amit MINDENKI lát MINDEN nap, és ez az ELSŐ képernyő a rendszerről; a jelszócsere pedig minden új kolléga első képernyője a belépés után. A szakadás pont ott volt, ahol a legdrágább. IGAZSÁGFORRÁS: `assets/v3-kit.css` (kártya, gomb, jegyzet-doboz, fókusz, térköz-, sugár- és szín-tokenek) + `docs/modules/w2-design-coherence/ DESIGN_SYSTEM_V3.md` (§3 tipográfia, §4 térköz, §5.4 gomb, §5.7 űrlap-mező). ELVEK, AMIKET EZ A FÁJL IS TART • Nyers színkód SEHOL — minden szín `var(--v3-*)`. Így a lap a világos és a sötét témát is követi, és egy jövőbeli token-javítás ide is beér. • A kártyát és a gombot NEM írjuk újra: a `.v3-card` / `.v3-card-pad` / `.v3-btn` / `.v3-btn-ghost` / `.v3-note` a KÖZÖS alapból jön. Itt csak az él, ami tényleg a két bejelentkező-lap sajátja (elrendezés, márkajel, mező). • A burok a `` — ezért fedi a meleg alap a TELJES képernyőt, nem csak egy dobozt a közepén. (A `data-v3` NEM kerülhet a ``-re: a kit sötét ága `html[data-theme=…] [data-v3]` alakú, ami leszármazottat vár — a ``-en ülő jelölőre nem illeszkedne, és a sötét mód néma maradna.) ============================================================================= */ /* ══════════════════════════════════════════════════════════════════════════ 1. A LAP — függőlegesen és vízszintesen középre, bőséges holttérrel ══════════════════════════════════════════════════════════════════════════ */ /* A `[data-v3]` már ad hátteret, tintát és betűt; itt csak az elrendezés és a teljes-képernyős magasság kell (a kit `min-height:100%`-ja a -n a magasságától függene, ezért itt `100vh`). */ body.auth3-page { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--v3-sp-6) var(--v3-sp-4); } /* Egy hasáb, olvasható szélességgel — a mező nem nyúlik a képernyő széléig. */ .auth3-box { width: 100%; max-width: 420px; } /* ══════════════════════════════════════════════════════════════════════════ 2. MÁRKAJEL — szerif név + halk mono alcím (a három betűszerepből kettő) ══════════════════════════════════════════════════════════════════════════ */ .auth3-brand { display: flex; align-items: baseline; justify-content: center; gap: var(--v3-sp-2); margin: 0 0 var(--v3-sp-5); } .auth3-brand-main { font-family: var(--v3-font-display); font-size: 30px; line-height: 1.1; font-weight: 500; letter-spacing: -.02em; color: var(--v3-ink); } .auth3-brand-sub { font-family: var(--v3-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .16em; color: var(--v3-text-4); } /* ══════════════════════════════════════════════════════════════════════════ 3. A KÁRTYA CÍME — szerif, mondatkezdő nagybetű (nem CSUPA NAGY) ══════════════════════════════════════════════════════════════════════════ */ .auth3-title { font-family: var(--v3-font-display); font-size: 22px; line-height: 1.25; font-weight: 500; letter-spacing: -.01em; color: var(--v3-ink); margin: 0 0 var(--v3-sp-5); } /* ══════════════════════════════════════════════════════════════════════════ 4. ŰRLAP — címke fölötte, 44px érintési cél, zöld fókusz (V3 §5.7) ══════════════════════════════════════════════════════════════════════════ */ .auth3-form { display: grid; gap: var(--v3-sp-4); } /* ⚠️ A MEZŐ, A CÍMKE ÉS A SZABÁLY-SZÖVEG NINCS ITT — ÉS EZ SZÁNDÉKOS. Ez a lap eredetileg megírta magának a `.auth3-field` / `.auth3-label` / `.auth3-input` / `.auth3-hint` szabályokat. Ugyanazokat megírta a Tudástár és a részletlap is, KÜLÖN — és HÁROM KÜLÖNBÖZŐ eredmény jött ki: 44 vs 40px magasság, 15 vs 14px betű, 10 vs 9px belső tér. Pontosan ez a „majdnem ugyanaz", amitől a felület nem egységes. Ezért a mező mostantól a KÖZÖS ALAPBAN él egyszer (`v3-kit.css`: `.v3-field` · `.v3-input` · `.v3-label` · `.v3-hint`), és ez a lap is azt használja. ÚJ MEZŐ-SZABÁLYT IDE NE ÍRJ. */ /* Hibaüzenet — a közös `.v3-note--crit` doboz, itt csak a margót nullázzuk. */ .auth3-error { margin: 0; } /* ══════════════════════════════════════════════════════════════════════════ 5. MŰVELETEK — laponként EGY elsődleges („tinta") gomb, mellette ghost ══════════════════════════════════════════════════════════════════════════ */ .auth3-submit { width: 100%; min-height: 44px; font-size: 14px; } .auth3-actions { display: flex; gap: var(--v3-sp-2); align-items: stretch; } .auth3-actions .auth3-submit { flex: 1; width: auto; } .auth3-actions .auth3-cancel { min-height: 44px; flex: none; } /* ══════════════════════════════════════════════════════════════════════════ 6. A KÁRTYA ALATT — elfelejtett jelszó + nyelvváltó ══════════════════════════════════════════════════════════════════════════ */ .auth3-foot { margin: var(--v3-sp-4) 0 0; text-align: center; font-size: 13.5px; } .auth3-link { color: var(--v3-text-2); text-decoration: none; } .auth3-link:hover { color: var(--v3-accent); text-decoration: underline; } .auth3-lang { margin: var(--v3-sp-2) 0 0; display: flex; align-items: center; justify-content: center; gap: var(--v3-sp-1); font-family: var(--v3-font-mono); font-size: 11.5px; color: var(--v3-text-4); } /* Érintési cél mobilon is: a nyelvváltó két apró szó, könnyű elvéteni. */ .auth3-lang-a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: var(--v3-r-menu); letter-spacing: .1em; color: var(--v3-text-3); text-decoration: none; } .auth3-lang-a:hover { color: var(--v3-ink); background: var(--v3-surface-muted); } /* Aktív nyelv: zöld — ez az egyetlen akcent-moment a lapon (állapot, nem dísz). */ .auth3-lang-a.is-on { color: var(--v3-accent); font-weight: 700; } /* ══════════════════════════════════════════════════════════════════════════ 7. KESKENY KÉPERNYŐ (390px-en is használható) ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 480px) { body.auth3-page { padding: var(--v3-sp-5) var(--v3-sp-3); align-items: flex-start; } .auth3-brand-main { font-size: 26px; } .auth3-title { font-size: 20px; margin-bottom: var(--v3-sp-4); } /* A két gomb egymás alá: 390px-en egymás mellett elvékonyodnának. */ .auth3-actions { flex-direction: column; } .auth3-actions .auth3-cancel { justify-content: center; } }