/* ══════════════════════════════════════════════════════════════════════════ fpe-ui2b.css — UI 2. kör / B blokk: globális komponensek Létrehozva: 2026-07-26 · Breznai András · breznaiandras.com MIT TARTALMAZ (a 39_UI_Elem_Leltar pontszámaival): 1. Felső navigáció (2.3) — .fpe-fonav 2. Kapcsolat-widget diszkrétebb — .qc-* / #quick-callback-btn (2.1) 3. Kártya-hierarchia 3 szinten — .fpe-szint-1 / -2 / -3 (2.7) 4. Lábléc-tipográfia — footer / .disclaimer (2.4) 5. Űrlap-visszajelzés — .fpe-urlap-* (2.6) 6. Belépő scroll-animáció — .fpe-be (7.1) BETÖLTÉSI HELY: a fpe-arany.css UTÁN és a fpe-temak.css ELŐTT. - fpe-arany.css marad az "utolsó szó" a gomb-megerősítésen (ez a fájl egyetlen gomb-hover/active szabályt sem ír), - fpe-temak.css marad az "utolsó szó" a mód-függő tokeneken. MIÉRT NEM shared.css: 16 oldal (7 cikk, cheatbook, index, konyv, 3 köszönő, idopontfoglalas, uzenet, lakashitel) NEM tölti be a shared.css-t — ezért volt bennük inline .qc-* másolat. Ez a lap mind a 38 oldalon ott van (a 404.html szándékos kivétel, lásd a 42-es logot), ezért a .qc-* réteg itt ÖNHORDÓ: nem felülírás, hanem teljes definíció. MOZGÁS: minden animáció lekapcsol prefers-reduced-motion alatt. NO-JS: egyetlen szabály sem rejt el tartalmat alapállapotban — a .fpe-be osztályt a fpe-ui2b.js teszi ki futásidőben, tehát ha a JS nem fut le, minden látszik. ────────────────────────────────────────────────────────────────────── */ :root { /* A globális nav magassága. A JS a valós magasságra írja át, hogy a horgony-görgetés (scroll-margin-top) pontos legyen. */ --fpe-fonav-h: 52px; /* Az arany megerősítés-nyelv szándékosan mód-független (lásd fpe-arany.css fejlécét): ez "jó irány"-jel, nem felület-szín. */ --fpe-arany: #d9a544; } /* ══ 1. FELSŐ NAVIGÁCIÓ (39-es fájl 2.3) ═════════════════════════════════ Sticky és NEM fixed. Fixed esetén mind a 38 oldalon külön kellene helyet foglalni (body padding-top), és minden oldal más törzs-osztályt használ (.app, .wrap, .pages-container, .container…). Sticky elem a normál folyamban ül, tehát a hely magától megvan — nulla oldal-specifikus kompenzáció, nulla esély elcsúszott hero-ra. z-index 500: a #theme-toggle (99999) és a Kapcsolat-widget (99998) FÖLÖTT marad, a nav viszont az oldalak saját fix sávjai (z-index 100) fölé kerül. ────────────────────────────────────────────────────────────────────── */ .fpe-fonav { position: sticky; top: 0; z-index: 500; /* 🔴 NEM dísz. Két oldal ``-ja flex-konténer (koszonom-visszahivas, koszonom-konyv), és ott a nav flex-elemként a tartalmára zsugorodott: mérve 134 px lett 390 helyett, ezért a márkanév és a hamburger két sorba tört (109 px magas sáv). A `flex:0 0 auto` + `width:100%` ezt zárja ki. (`align-self:stretch` NEM jó ide: sor-irányú flexben a magasságot nyújtaná — próbáltuk, 1784 px magas nav lett belőle.) */ width: 100%; flex: 0 0 auto; background: var(--nav-veil, rgba(13,15,26,0.97)); border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.08)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: 'Inter', Inter, system-ui, -apple-system, sans-serif; } .fpe-fonav-belso { max-width: 960px; margin: 0 auto; min-height: 52px; padding: 6px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .fpe-fonav-marka { font-size: 13.5px; font-weight: 800; letter-spacing: .01em; color: var(--text-primary, #fff); text-decoration: none; margin-right: auto; /* Tap target: a sáv teljes magassága */ display: flex; align-items: center; min-height: 44px; -webkit-tap-highlight-color: transparent; } .fpe-fonav-marka span { font-weight: 500; color: var(--text-muted, #a3abb9); margin-left: 6px; } .fpe-fonav-marka:hover, .fpe-fonav-marka:focus-visible { color: var(--accent-text, #75b8e7); outline: none; } .fpe-fonav-menu { list-style: none; margin: 0; padding: 0; display: flex; /* A `flex-direction: row` KIÍRVA szükséges, nem alapértelmezésre hagyva: az adatkezelesi-tajekoztato.html `ul, ol { display:flex; flex-direction: column }` szabálya a saját stíluslapján ül. A `display`-t a mi (0,1,0)-s szelektorunk felülírja, a `flex-direction`-t viszont nem írtuk — attól a menü függőlegesen állt, 153 px magas sávban. Mérve. */ flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 4px; } /* Az `li`-t is nullázni kell. Az adatkezelesi-tajekoztato.html (jogi szöveg, sok felsorolás) globális `li` szabálya külön margót és `list-style`-t ad — attól a menü 153 px magas, háromsoros sávvá nőtt. Mérve. */ .fpe-fonav-menu li { margin: 0; padding: 0; list-style: none; display: block; } .fpe-fonav-menu li::before, .fpe-fonav-menu li::marker { content: none; } .fpe-fonav-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid transparent; font-size: 13px; font-weight: 700; color: var(--text-secondary, #b0b8c8); text-decoration: none; white-space: nowrap; transition: color .2s, background .2s, border-color .2s, box-shadow .2s; -webkit-tap-highlight-color: transparent; } /* ARANY MEGERŐSÍTÉS — a :active NEM opcionális: érintőképernyőn nincs hover, és a forgalom többsége mobil (20_UI_Design_Iranyelvek 3. pont). */ .fpe-fonav-menu a:hover, .fpe-fonav-menu a:focus-visible, .fpe-fonav-menu a:active, .fpe-fonav-menu a.fpe-arany-tap { color: var(--text-primary, #fff); border-color: var(--fpe-arany); background: rgba(217,165,68,.12); box-shadow: 0 0 0 1px rgba(217,165,68,.35); outline: none; } /* Az épp megnyitott oldal menüpontja. Nem link-tiltás, csak jelzés. */ .fpe-fonav-menu a[aria-current="page"] { color: var(--text-primary, #fff); background: var(--tint-surface-2, rgba(255,255,255,0.06)); } /* A hamburger a MARKUP-ban hidden — a JS veszi le róla, amikor át tudja venni a menü kezelését. Így JS nélkül soha nem marad elérhetetlen menü. */ .fpe-fonav-kapcsolo { display: none; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-strong, rgba(120,170,215,0.58)); background: transparent; color: var(--text-secondary, #b0b8c8); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .2s, background .2s, border-color .2s, box-shadow .2s; } .fpe-fonav-kapcsolo[hidden] { display: none !important; } .fpe-fonav-kapcsolo:hover, .fpe-fonav-kapcsolo:focus-visible, .fpe-fonav-kapcsolo:active, .fpe-fonav-kapcsolo.fpe-arany-tap { color: var(--text-primary, #fff); border-color: var(--fpe-arany); background: rgba(217,165,68,.12); box-shadow: 0 0 0 1px rgba(217,165,68,.35); outline: none; } .fpe-fonav-vonal, .fpe-fonav-vonal::before, .fpe-fonav-vonal::after { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; } .fpe-fonav-vonal { position: relative; } .fpe-fonav-vonal::before { content: ''; position: absolute; top: -5px; } .fpe-fonav-vonal::after { content: ''; position: absolute; top: 5px; } /* ── Mobil ── A töréspont 560px: a három menüpont ("Elemzőeszközök", "Olvasnivalók", "Kapcsolat") + a márkanév együtt ~470 px, tehát 560 alatt már törne. A .fpe-fonav--js osztályt a JS teszi a navra; enélkül (JS nélkül) a menü egyszerűen második sorba tördelődik, és minden pont elérhető marad. */ @media (max-width: 560px) { .fpe-fonav-belso { gap: 8px; } .fpe-fonav-marka { font-size: 13px; } .fpe-fonav-marka span { display: none; } /* JS NÉLKÜL: a menü marad, csak sorba tördelve. */ .fpe-fonav-menu { flex-wrap: wrap; gap: 2px; width: 100%; } .fpe-fonav-menu a { padding: 0 10px; font-size: 12.5px; } /* JS-SEL: lenyíló panel. */ .fpe-fonav--js .fpe-fonav-kapcsolo { display: flex; } .fpe-fonav--js .fpe-fonav-menu { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 6px 0 10px; border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.08)); margin-top: 2px; } .fpe-fonav--js.fpe-fonav--nyitva .fpe-fonav-menu { display: flex; } .fpe-fonav--js .fpe-fonav-menu a { min-height: 48px; font-size: 14px; padding: 0 12px; } } /* Horgony-görgetés: a #tools / #olvasnivalok cél ne bújjon a sáv alá. */ html { scroll-padding-top: calc(var(--fpe-fonav-h, 52px) + 12px); } :target { scroll-margin-top: calc(var(--fpe-fonav-h, 52px) + 12px); } /* ── A már meglévő, viewporthoz rögzített vezérlők a nav ALÁ csúsznak ── Ezek a szabályok kizárólag POZICIONÁLT elemre hatnak; ahol ugyanez az osztály a normál folyamban ül (pl. a 6 HVCO in-flow `.top-nav` sávja), ott a `top` tulajdonságnak nincs hatása. Ezért lehet egy globális sor 4 oldal-specifikus javítás helyett. .top-nav — HVCO3, auto-kalkulator (position:fixed, cím + Nyomtatás + oldalszámláló). A saját `.pages-container{padding-top:60px}` helyfoglalása pont a sáv magassága, tehát a lejjebb csúszás után is pontosan illeszkedik. .nav-wrap — HVCO5, csok-kalkulator (position:sticky, Előző/Következő). Két sticky sáv egymás alatt: a globális felül, a lépteto alatta. .print-btn— 8 oldal, position:fixed;top:14px;z-index:200 — a nav (500) különben eltakarná a Nyomtatás gombot. */ .top-nav, .nav-wrap { top: var(--fpe-fonav-h, 52px); } .print-btn { top: calc(var(--fpe-fonav-h, 52px) + 10px); } @media print { .fpe-fonav { display: none !important; } .top-nav, .nav-wrap { top: 0; } .print-btn { top: 14px; } } /* ══ 2. KAPCSOLAT-WIDGET — DISZKRÉTEBB ALAPHELYZET (39-es fájl 2.1) ═══════ VOLT: tömör kék gradiens pirula fehér felirattal — a lap egyetlen olyan eleme, ami nem az oldal design-nyelvét beszélte, hanem külön rendszernek látszott. LETT: a kártyákkal azonos felület + keret, halk szöveg; a HANGSÚLYT a megerősítés adja (arany keret + halo hoveren/tapre), nem az alapállapot. AMI NEM VÁLTOZOTT: a méret. A pirula 44px magas maradt, mobilon 48px-es kör — a tap target sehol nem csökkent. A menü nyitás/zárás logikája (toggleContactMenu / closeContactMenu) érintetlen. ────────────────────────────────────────────────────────────────────── */ #quick-contact-wrap { position: fixed; bottom: 18px; left: 18px; z-index: 99998; } #quick-callback-btn { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 16px; border-radius: 50px; border: 1px solid var(--qc-border, rgba(52,152,219,0.30)); background: var(--qc-bg, #1a1d2e); color: var(--qc-text, #e8eaf0); font-family: inherit; font-weight: 700; font-size: 13px; text-decoration: none; cursor: pointer; box-shadow: 0 4px 16px var(--qc-shadow, rgba(0,0,0,0.28)); -webkit-tap-highlight-color: transparent; transition: border-color .2s, background .2s, box-shadow .2s, color .2s, transform .15s; } #quick-callback-btn svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .85; } /* Arany megerősítés — hover ÉS tap/fókusz. */ #quick-callback-btn:hover, #quick-callback-btn:focus-visible, #quick-callback-btn:active, #quick-callback-btn.fpe-ut-tap { border-color: var(--fpe-arany); background: rgba(217,165,68,.14); color: var(--qc-title, #fff); box-shadow: 0 0 0 1px rgba(217,165,68,.40), 0 0 20px rgba(217,165,68,.35); outline: none; } #quick-callback-btn:hover svg, #quick-callback-btn:focus-visible svg, #quick-callback-btn:active svg { opacity: 1; } #quick-callback-btn:hover { transform: translateY(-1px); } #quick-callback-btn:active, #quick-callback-btn.fpe-ut-tap { transform: scale(.97); } .qc-menu { position: absolute; bottom: 60px; left: 0; width: 260px; background: var(--qc-bg, #1a1d2e); border: 1px solid var(--qc-border, rgba(52,152,219,0.3)); border-radius: 14px; box-shadow: 0 8px 28px var(--qc-shadow, rgba(0,0,0,0.45)); padding: 8px; display: flex; flex-direction: column; gap: 4px; animation: qc-be .18s ease; } /* 2026-07-26-i javítás — NE ÍRD FELÜL: a hidden attribútumot a display:flex felülírta, ezért a panel nyitva indult. */ .qc-menu[hidden] { display: none; } .qc-option { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--qc-text, #e8eaf0); border: 1px solid transparent; transition: background .15s, border-color .15s, box-shadow .15s; -webkit-tap-highlight-color: transparent; } .qc-option:hover, .qc-option:focus-visible, .qc-option:active, .qc-option.fpe-ut-tap { background: rgba(217,165,68,.12); border-color: rgba(217,165,68,.45); outline: none; } .qc-option:hover .qc-text strong, .qc-option:focus-visible .qc-text strong, .qc-option:active .qc-text strong { color: #f3dfb0; } .qc-icon { font-size: 20px; flex-shrink: 0; } .qc-text strong { display: block; font-size: 13px; font-weight: 700; color: var(--qc-title, #fff); transition: color .15s; } .qc-text small { display: block; font-size: 11px; color: var(--qc-sub, #8892a4); margin-top: 1px; } @keyframes qc-be { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Nyitáskor a gomb eltűnik, és a menü a helyére csúszik (2026-07-22). */ #quick-contact-wrap.nyitva #quick-callback-btn { display: none; } #quick-contact-wrap.nyitva .qc-menu { bottom: 0; } /* A nyitó gomb eltűnik, ezért kell egyértelmű kiút. Teljes szélesség, 44px+. */ .qc-close { display: block; width: 100%; min-height: 44px; margin: 4px 0 0; padding: 12px; border: none; border-top: 1px solid var(--qc-divider, rgba(255,255,255,0.08)); background: none; color: var(--qc-sub, #8892a4); font-family: inherit; font-size: 12px; font-weight: 600; text-align: center; cursor: pointer; border-radius: 0 0 10px 10px; } .qc-close:hover { background: var(--qc-close-hover, rgba(255,255,255,0.06)); color: var(--qc-title, #fff); } .qc-close:focus-visible { outline: 2px solid var(--qc-focus, #75b8e7); outline-offset: -2px; } @media (max-width: 640px) { #quick-contact-wrap { bottom: 14px; left: 14px; } /* Kör alak — 48×48 px, tehát a 44px-es minimum FÖLÖTT marad. */ #quick-callback-btn { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%; } #quick-callback-btn span { display: none; } #quick-callback-btn svg { width: 20px; height: 20px; } .qc-menu { bottom: 58px; } } @media (prefers-reduced-motion: reduce) { .qc-menu { animation: none; } #quick-callback-btn { transition: border-color .2s, background .2s, box-shadow .2s, color .2s; } #quick-callback-btn:hover, #quick-callback-btn:active, #quick-callback-btn.fpe-ut-tap { transform: none; } } @media print { #quick-contact-wrap { display: none !important; } } /* ══ 3. KÁRTYA-HIERARCHIA — 3 SZINT (39-es fájl 2.7) ═════════════════════ A probléma: 140 `.card` előfordulás, mind azonos háttér/keret/sarok — ezért semmi nem látszik fontosabbnak a másiknál. 1. ALAP (.fpe-szint-1) — nincs kártya-króm: se háttér, se keret. 2. KIEMELT (.fpe-szint-2) — a MAI kártya. Ez az alapértelmezés, ezért NEM definiálunk rá semmit: minden mai .card automatikusan 2. szint. Az osztály csak dokumentációs célból létezik (lásd lent). 3. DÖNTÉSI (.fpe-szint-3) — arany keret + halvány arany glow. MIÉRT NEM ÍRJUK FELÜL A 2. SZINTET: a 38-as (1. kör) log az összes felületszínt WCAG AA-ra mérte be. Ha a kiemelt szint kinézete elmozdul, az a mérés érvényét veszti. A hierarchiát az 1. és a 3. szint hozza létre. ────────────────────────────────────────────────────────────────────── */ /* ── 1. szint: a kártya-króm lekerül, a szöveg marad. A kettőzött osztálynév (0,2,0) azért kell, mert az oldalak `.card` szabálya (0,1,0) mellett a `.section-card .card` alakú, magasabb súlyú definíciók is előfordulnak. */ .fpe-szint-1.fpe-szint-1 { background: none; border: none; box-shadow: none; border-radius: 0; padding-left: 0; padding-right: 0; } /* Ahol a kártya bal oldali accent-csíkot vitt (pl. pull-quote), ott az a csík HORDOZZA a jelentést — megmarad, csak a doboz tűnik el körüle. */ .fpe-szint-1--csik.fpe-szint-1--csik { border-left: 3px solid var(--accent, #3498db); padding-left: 16px; } /* ── 2. szint: szándékosan üres. Lásd a fenti indoklást. */ .fpe-szint-2 { /* = az oldal saját .card megjelenése, változatlanul */ } /* ── 3. szint: DÖNTÉSI. Arany keret + halvány glow. Az arany itt is mód-független: ugyanaz a "jó irány"-jel, mint a gombokon. A glow szándékosan halvány (0,13 alfa) — a kontraszt-hordozó a KERET. */ .fpe-szint-3.fpe-szint-3 { border: 1px solid rgba(217,165,68,.55); box-shadow: 0 0 0 1px rgba(217,165,68,.16), 0 0 28px rgba(217,165,68,.13); } /* Ha a döntési blokk eredetileg vastagabb accent-keretet vitt (.gf-form-card 2px --accent), az arany is 2px legyen — különben "elvékonyodik". */ .gf-form-card.fpe-szint-3.fpe-szint-3 { border-width: 2px; } /* A 3. szint felirata/címe is arany, hogy ne csak a keret hordozza a jelzést. Sötétben világos arany, világosban a sötétített --accent-gold (5,69:1). */ .fpe-szint-3 .fpe-szint-3-cimke { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--accent-gold, #d9a544); margin-bottom: 10px; } html:not([data-theme="light"]) .fpe-szint-3 .fpe-szint-3-cimke { color: #e8c274; } @media print { .fpe-szint-3.fpe-szint-3 { box-shadow: none; border: 1px solid #999; } } /* ══ 4. LÁBLÉC — VIZUÁLISAN HALKABB (39-es fájl 2.4) ═════════════════════ 🔴 A TARTALOM JOGILAG KÖTELEZŐ — egyetlen szó sem változott. Kizárólag méret, térköz, sortáv és szín. A színek WCAG AA-ra maradnak mérve: --text-muted sötétben 5,71:1 a #0f1220-on, világosban 5,61:1. ────────────────────────────────────────────────────────────────────── */ /* A `footer` ELEM-szelektor szándékos: a 13 lábléc négyféle mélységben ül (body közvetlen gyereke, `` után, a bizalmi blokk ``-je után, a `.wrap`-en belül). Egy `body > footer` alak a többségüket kihagyná. A site-on nincs beágyazott, kártyán belüli `