/* ════════════════════════════════════════════════════════════════════════════ fpe-ui3.css — UI 3. kör, vizuális hibajavítás, 2026-07-31 ──────────────────────────────────────────────────────────────────────────── ADDITÍV RÉTEG. Az A/B/C/D körök fájljaihoz (fpe-temak.css, fpe-ui2b.*, fpe-ui2c.*, fpe-ui2d.*, fpe-arany.*) egyetlen karakterrel sem nyúl hozzá. A kör visszavonható ennek a fájlnak a sorával együtt. Betöltési sorrend: KÖZVETLENÜL a fpe-temak.css UTÁN. Ez azért kell, mert a téma-réteg néhány szabálya (pl. html[data-theme="light"] .hook) magasabb specificitású, mint egy sima .fpe-video-blokk .hook lenne — lásd 2. szakasz. MIT NEM CSINÁL: nem ír át jogi/compliance szöveget, nem nyúl számítási logikához, nem ad értéket a 9 nem deklarált globális változónak (--gold, --purple, --blue, --red, --text-dim, --radius-lg, --accent-glow, --tw-shadow-color) — azok továbbra is Andrásra várnak. Az --accent-light csak a videóblokk hatókörében kap értéket, globálisan NEM. ════════════════════════════════════════════════════════════════════════════ */ /* ══ 1. A .fpe-video-blokk ZÁRT TOKEN-KÉSZLETE ═══════════════════════════════ MÉRT GYÖKÉROK. A fpe-ui2c.css:182 a videóblokknak csak SZÖVEG-tokeneket ad (--text-primary/-secondary/-muted, --border). FELÜLETI tokent nem. A blokkon belüli elemek viszont a lap globális --card / --bg-card értékét használják, ami világos módban #ffffff. Így feher kártya kapott világos (a blokktól örökölt) szöveget: .hero-counter (befektetes-kalkulator) #fff + #e8ecf5 = 1,18:1 .reader-count (csok-kalkulator) #fff + #e8ecf5 = 1,18:1 .reader-count (babavaro-kalkulator) #fff + #f5f7fb = 1,07:1 .gf-risk-row (mind a 9 kalkulátor) #fff + #f5f7fb = 1,07:1 .gf-advisor-block (mind a 9 kalkulátor) #fff + #f5f7fb = 1,07:1 .stat-box (auto-kalkulator) #fff + #f5f7fb = 1,07:1 .sel-btn (nem aktív) (auto-kalkulator) #eef1f7 + #e8ecf5 = 1,05:1 A javítás ezért TOKEN-SZINTŰ, nem elemenkénti: a blokk saját, sötét felületi készletet kap. Áttetsző fehér a blokk saját hátterén — így a felület a videó/állókép fölött is „emelt kártyának" látszik, nem tömör foltnak. ⚠️ SZÁNDÉKOSAN NEM írjuk felül a --bg és --bg-input tokent: azokat a beviteli mezők használják (input{background:var(--bg)}), és azok a mezők ma helyesen fehérek, sötét szöveggel (mérve 16,11:1). Egy vak felülírás pont azokat rontaná el. */ .fpe-video-blokk { --card: rgba(255, 255, 255, 0.07); --card2: rgba(255, 255, 255, 0.11); --bg-card: rgba(255, 255, 255, 0.07); --bg-card-hover: rgba(255, 255, 255, 0.13); --bg-elevated: rgba(255, 255, 255, 0.13); --surface: rgba(255, 255, 255, 0.07); --surface-2: rgba(255, 255, 255, 0.11); /* Csak ITT kap értéket. A 45-ös log 5. pontja szerint a globális érték tartalmi döntés, az Andrásé marad. A blokkon belül viszont ma egy ÉRVÉNYTELEN var() miatt a szín az öröklött világosra esik vissza, és fehér kártyán fehér lesz — ezt kell megszüntetni. */ --accent-light: #cfe4f5; } /* Néhány elem tömör hexet ír a markupban/inline CSS-ben, nem tokent — azokat a token-készlet nem éri el. Ezek a mért, feher felületű esetek. */ .fpe-video-blokk .gf-risk-row, .fpe-video-blokk .gf-advisor-block, .fpe-video-blokk .stat-box, .fpe-video-blokk .hero-counter, .fpe-video-blokk .reader-count { background: var(--card); border: 1px solid var(--border); } /* ── 1/b. Akcentus-színek a blokk SAJÁT felületein ────────────────────────── A világos mód akcentusa (--accent-text #175a90) a blokk sötét felületein 2,2–2,7:1. A 43-as log döntése szerint a nyers médián a világos márkakék (#75b8e7) sem menthető (≈2,6:1 a legvilágosabb kockán) — ezért az akcentust CSAK ott cseréljük, ahol az elem a blokk saját, tömör chipjén/kártyáján ül, nem közvetlenül a videón. ⚠️ MÉRT TANULSÁG (a kör közben): egy akcentus-TOKEN átírása a hatókörön belül nem csak az ELŐTÉR-használatot írja át, hanem a HÁTTÉR-használatot is. Az első verzióm a .gf-advisor-block és a .badge-bennfentes elemre is ráengedte a cserét — ott viszont ezek a tokenek HÁTTÉRSZÍNEK (.gf-advisor-avatar{background:var(--accent)} a shared.css:199-ben, .badge-bennfentes{background:var(--danger)}), így a világosabb akcentus világos korongot csinált fehér szöveggel: 3,15 → 2,15:1, illetve 6,54 → 2,97:1. Ezért a lista CSAK olyan elemeket tartalmaz, ahol ezek a tokenek szövegszínként szolgálnak. */ .fpe-video-blokk :is(.tag, .badge, .chip, .hero-counter, .reader-count, .stat-box, .sel-btn) { --accent-text: #75b8e7; --accent: #75b8e7; --accent2: #75b8e7; --success: #5fd39a; --danger: #ec7063; --warn: #e8b552; --warning: #e8b552; } /* ── 1/c. A pirula tördelése ──────────────────────────────────────────────── A .hero-counter display:inline-flex, ezért a benne lévő önálló flex-elemmé válik, és mobilon külön sorba törik („…mennyibe kerül | valójában | az | autód"). A pirula tartalma egyetlen szövegfolyam — nem flex-tartalom. */ .fpe-video-blokk .hero-counter, .fpe-video-blokk .reader-count { display: inline-block; text-align: center; max-width: 100%; } .fpe-video-blokk .hero-counter > *, .fpe-video-blokk .reader-count > * { display: inline; } /* ⚠️ …de a tisztán dekoratív, méretezett dobozok maradjanak dobozok. A befektetes-kalkulator pirulájában egy 8x8 px-es, villogó `.counter-dot` ül; szöveg nincs benne, ezért `display: inline`-ként NULLA SZÉLESSÉGŰRE zsugorodott és eltűnt. A kontraszt-mérés ezt nem foghatta meg (nincs szövege) — az előtte/utána képpáron látszott meg. */ .fpe-video-blokk .hero-counter > [class*="dot"], .fpe-video-blokk .reader-count > [class*="dot"], .fpe-video-blokk .hero-counter > :is(svg, img), .fpe-video-blokk .reader-count > :is(svg, img) { display: inline-block; vertical-align: middle; } /* ══ 2. „FELÚJÍTVA IS, MEG NEM IS" — SPECIFICITÁS-ÜTKÖZÉSEK ═════════════════ 2/a. A .hook a fpe-temak.css:266 miatt sötét szöveget kap: html[data-theme="light"] .hook { color: var(--text); } → #1c2033 A hero .hook viszont a videóblokkban, sötét háttéren ül: MÉRVE 1,20:1 — gyakorlatilag olvashatatlan. 5 oldalon: adovisszaterites, egeszsegbiztositas, eletbiztositas, hitelkivaltas, lakashitel. A téma-szabály specificitása (0,2,1) nagyobb, mint egy sima .fpe-video-blokk .hook (0,2,0) — ezért kell ide a html[data-theme] előtag, ami (0,3,1)-re emeli. Ez a javítás LÉNYEGE: nem új érték, hanem a meglévő videóblokk-palettát végre érvényre juttatjuk. A kiemelés a 43-as log döntését követi: a videó fölött a hierarchiát a MÉRET és a VASTAGSÁG viszi, nem a szín (a márkakék ott 2,6:1 lenne). Ezért a strong világos marad, csak vastagabb. */ html[data-theme] .fpe-video-blokk .hook, html[data-theme] .fpe-video-blokk .hook li { color: #e8ecf5; } html[data-theme] .fpe-video-blokk .hook strong { color: #f5f7fb; font-weight: 700; } /* 2/b. A lapozók egységes felfüggesztési pontja. A fpe-ui2b.css:260 a .top-nav és .nav-wrap elemet már a főnav alá tolja (top: var(--fpe-fonav-h)). A .page-nav egyszerűen kimaradt ebből a listából — ezért ült top:0-n, a főnav (z-index 500) alatt, z-index 100-zal. A forrás-javítás a befektetes-kalkulator.html-ben van (ott egy konkrét hibás érték egy konkrét sorban); ez itt a rendszerszintű biztosíték. */ .page-nav, .nav-bar[style*="sticky"], .fpe-lapozo--felso { top: var(--fpe-fonav-h, 52px); } /* ══ 3. ALSÓ LAPOZÓ (fpe-ui3.js építi) ══════════════════════════════════════ MÉRT LELTÁR — a 20 többoldalas oldalból: · 5 oldalon a lapozó CSAK FELÜL van → ide kerül alsó lapozó (HVCO4, HVCO5, babavaro-, csok-, befektetes-kalkulator) · 9 oldalon a lapozó a képernyő ALJÁN lebeg (position:fixed) → marad · 5 oldalon a lapozó már a tartalom folyamában, a lépés végén → marad (HVCO2, HVCO6, HVCO9, HVCO10, HVCO_FedezetTerkep) Az alsó lapozó a TARTALOM FOLYAMÁBAN ül (nem fixed, nem sticky), ugyanaz a komponens, ugyanaz a felirat, és NEM tartalmaz új lapozó-logikát: a gombjai a MEGLÉVŐ felső lapozó gombjait kattintják. Így a showPage/goToPage/gotoPage háromféle elnevezése (43-as log) érdektelen marad. */ .fpe-lapozo--also { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 34px auto 8px; padding: 16px 0 4px; border-top: 1px solid var(--border, rgba(128, 128, 128, 0.25)); position: static !important; /* soha ne legyen fixed/sticky */ } .fpe-lapozo--also .fpe-lapozo-allapot { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted, #5a6273); flex: 1 1 auto; text-align: center; } .fpe-lapozo--also button { flex: 0 0 auto; min-height: 44px; /* 2.1-es irányelv: 44 px tap-terület */ min-width: 44px; } .fpe-lapozo--also button[disabled], .fpe-lapozo--also button[aria-disabled="true"] { opacity: 0.45; cursor: default; } @media (max-width: 520px) { .fpe-lapozo--also { gap: 8px; } .fpe-lapozo--also .fpe-lapozo-allapot { order: -1; flex-basis: 100%; } } /* Nyomtatásban a felső lapozó már ma eltűnik; az alsó is tűnjön el. */ @media print { .fpe-lapozo--also { display: none !important; } } .print-mode .fpe-lapozo--also { display: none !important; } /* ══ 4. MÉRT, LÁTHATATLAN SZÖVEGEK A VIDEÓBLOKKON KÍVÜL ═════════════════════ Ezek nem a videóblokk hibái, de ugyanaz a hibaosztály: egy szín olyan felületre került, amire nem mérték be. Csak azokat javítom, ahol a HELYES érték a meglévő design-nyelvből következik (nincs új márkaszín-döntés). Ami színválasztást igényelne, az a 49-es log 6. szakaszába került. */ /* 4/a. HVCO1 — Tailwind-maradvány: .text-blue-900 (#1e3a8a) a sötét lapon. MÉRVE 1,61:1. A lap saját, deklarált akcentusa a helyes érték. */ html[data-theme="dark"] .text-blue-900, body .text-blue-900 { color: var(--accent2, #75b8e7); } /* 4/b. HVCO6 — stílus nélküli : a böngésző alapértelmezett #0000EE-je a sötét lapon. MÉRVE 1,98:1. A lap többi linkje az akcentust viszi. */ .section-text > a:not([class]), .section-card a:not([class]), p > a:not([class]) { color: var(--accent2, var(--accent, #75b8e7)); } /* 4/c. konyv-beszeljunk-rola — a nyitható bizalmi blokk feliratának színe (#3b4356) a sötét lapon 1,88:1. Ez COMPLIANCE-szöveghez tartozó vezérlő; a szöveg egyetlen karaktere sem változik, csak olvashatóvá válik. */ .fpe-nyithato-cim, .fpe-nyithato > summary, summary.fpe-nyithato-cim { color: var(--text-secondary, #e8ecf5); } /* 4/d. Cikkek — a figyelmeztető doboz aranya a krémszínű felületen 1,53–2,09:1. A D1 kör módszerét követem: a HUE marad, a világosság csökken, amíg AA-t ad. ⚠️ CSAK VILÁGOS MÓDBAN. Az első verzióm hatókör nélkül állt itt, és a sötét HVCO4-en ugyanez a #7a5209 2,45:1-re rontotta a warning-boxot. A data-theme="light" pontosan a világos lapokon van jelen (mérve: 9 kalkulátor + 7 cikk + adatkezelesi-tajekoztato), a sötét lapokon nincs attribútum — tehát ez pontos hatókör, nem közelítés. */ html[data-theme="light"] .warning-box, html[data-theme="light"] .warning-box strong { color: #7a5209; } html[data-theme="light"] .warning-box a { color: #6b4a08; } /* 4/e. egeszsegbiztositas — .layer-num (#95a5a6) a #e5e8e8 rétegen 2,08:1. Ugyanaz a szürke, sötétebb világossággal: #5c6b6c → 4,79:1. */ html[data-theme="light"] .layer-num { color: #5c6b6c; } /* 4/f. HVCO3 — .step-num fehér szám a #f39c12 (--warning) korongon 2,19:1. A narancs marad (ez a lap jelzőszíne), a szám sötét lesz: 7,34:1. ⚠️ Attribútum-szelektor, mert a koszonom.html-en is van .step-num, ott viszont sötét (--bg-card-hover) a korong — az első, hatókör nélküli verzióm ott 1,09:1-re rontotta. Ez a szelektor csak azt az egy korongot éri el, ami tényleg a jelzőszínt hordozza. */ .step-num[style*="--warning"], .step-num[style*="--success"] { color: #2a1e04; } /* 7,34:1 ill. 5,90:1 */ /* ══ 5. MOZGÁS ══════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .fpe-lapozo--also, .fpe-lapozo--also * { transition: none !important; animation: none !important; } }