/* ═══════════════════════════════════════════════════════════════════════════ fpe-kgfb.css — a KGFB-segédlet bekötésének additív rétege Létrehozva: 2026-08-01 · Breznai András · breznaiandras.com MIT OLD MEG ─────────── A `kgfb-kisokos.html` eddig szigetként állt: nem töltötte be a közös rétegeket, és nem volt rajta főnav. A bekötéssel két geometriai ütközés keletkezett, és az index.html kapott egy új sávot. Ez a fájl KIZÁRÓLAG ezt a hármat rendezi. 🔴 EGYETLEN KORÁBBI RÉTEGET SEM ÍR FELÜL a saját hatókörén kívül. Nem nyúl a fpe-consent.js hozzájárulás-logikájához, a fpe-ui2b.css főnavjához, sem az érdekmúlás-panel (`.em-*`) stílusaihoz. VISSZAVONÁS ─────────── Töröld a sorokat a kgfb-kisokos.html-ből és az index.html-ből. A KGFB-lap fejléce visszaáll stickyre (és újra a főnav alá csúszik), az index demo-sávja pedig stílus nélküli blokk lesz. ═══════════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────────── 1. KGFB-LAP — A LAP SAJÁT FEJLÉCE NEM MARADHAT STICKY MÉRVE (Chrome, 2026-08-01, görgetett állapot): .fpe-fonav sticky, top 0, z-index 500, magasság 57 px header sticky, top 0, z-index 50, magasság 81 px (390 px-en) Vagyis a két sáv PONTOSAN egymáson ült, és a főnav (z 500) teljesen eltakarta a lap fejlécét (z 50). Két megoldás volt: (a) a fejléc top-ját a főnav magasságára tolni → 57 + 81 = 138 px állandó króm 390 × 844-en, a képernyő 16,4 %-a. Két teljes szélességű sötét sáv egymás alatt, kétszer kiírt márkanévvel. (b) a fejléc statikussá tétele → 57 px állandó króm, pontosan annyi, mint a másik 37 oldalon. (b) lett. Indok: a főnav mostantól ELLÁTJA a fejléc navigációs szerepét, a telefonszám pedig a lap tetején és a főnav „Kapcsolat" pontján keresztül továbbra is elérhető, a lebegő „Kötés" gomb pedig végig látszik. ─────────────────────────────────────────────────────────────────────────── */ body > header.sticky { position: static; } /* ─────────────────────────────────────────────────────────────────────────── 1/b. KGFB-LAP — A FEJLÉC 320 px-EN TÚLCSORDULT (KORÁBBI HIBA) 🔴 EZ NEM ENNEK A KÖRNEK A HIBÁJA. Mérve mindkét állapotban, azonos eredménnyel — a 2026-08-02-i, bekötés ELŐTTI fájlon is: 320 × 720 → document.scrollWidth 360 px, clientWidth 320 px a kilógó elem: a fejléc telefonszám-gombja (left 233 → right 360) A logó + a kétsoros cím + a 44 px magas telefongomb egyszerűen nem fér ki 320 px-en egy sorban, és a telefonszám `white-space: nowrap`. Azért kerül mégis ide, mert az 55-ös prompt 6. pontja NÉVSZERINT követeli meg a „0 vízszintes túlcsordulás 320 és 390 px-en" mérést, és enélkül a kör nem zárható le igazoltan. A javítás additív és megfordítható: 360 px alatt a fejléc sora tördelhet, a telefongomb második sorba kerül. A markup, a szöveg és a telefonszám érintetlen. ─────────────────────────────────────────────────────────────────────────── */ @media (max-width: 360px) { body > header > div { flex-wrap: wrap; } body > header > div > a[href^="tel:"] { width: 100%; justify-content: center; } } /* ─────────────────────────────────────────────────────────────────────────── 2. KGFB-LAP — A LEBEGŐ „KÖTÉS" GOMB ÉS A COOKIE-SÁV A fpe-consent.js bekötésével megjelent a jobb alsó sarokban a cookie-doboz (mérve 390 px-en: 147 px magas, majdnem teljes szélességű). A lap saját `.floating-cta`-ja ugyanoda, `bottom: 1rem`-re ült — takarásba került. 🔴 2026-08-03: EZ AZ ÜTKÖZÉS MEGSZŰNT. A KGFB-lapról kikerült a fpe-consent.js (58-as vault-log, A0), tehát nincs többé cookie-doboz, ami elé emelni kellene a gombot. A `.fpe-fix-bottom` horog CSS-szabályát maga a fpe-consent.js injektálta futásidőben — a szkript nélkül a szabály sem létezik, így az itteni `--fpe-fix-gap` beállítás holt kód lett. Ezért a szabály törölve, és a `.fpe-fix-bottom` osztály is lekerült a gombról. A `.floating-cta` visszaült a saját, lapon belüli `bottom: calc(1rem + env(safe-area-inset-bottom, 0px))` értékére — ez számszerűen ugyanaz, amit a --fpe-fix-gap vitt, tehát a gomb helye nem mozdult. Ha valaha visszakerül ide consent-réteg, ez a blokk a mintája. ─────────────────────────────────────────────────────────────────────────── */ /* ─────────────────────────────────────────────────────────────────────────── 3. INDEX.HTML — „PRÓBÁLD KI" DEMO-SÁV A hero és az orbitális kerék KÖZÖTT ül. SZÁNDÉKOSAN nem úgy néz ki, mint a HVCO-kártyák és nem úgy, mint a kerék: ez nem a hatodik ajánlat, hanem egyetlen, kipróbálható dolog. Ezért: · vízszintes elrendezés (a kártyák függőlegesek), · arany hajszálkeret + halk arany derengés (a kártyák kékek), · nincs ikon-kör, nincs badge, nincs „→" nyílsor a címben. A sáv NEM lebeg (alul már ül a Kapcsolat-widget és a cookie-sáv) és nincs a kerékben (András döntése). ─────────────────────────────────────────────────────────────────────────── */ .kgfb-demo { --kgfb-arany: #d9a544; max-width: 940px; margin: 0 auto; padding: 26px 24px; border-radius: 18px; border: 1px solid rgba(217, 165, 68, 0.34); background: linear-gradient(180deg, rgba(217, 165, 68, 0.07), rgba(217, 165, 68, 0.02)), var(--card, #161a2c); box-shadow: 0 12px 32px -18px rgba(0, 0, 0, 0.6); display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } /* Bal oldali, függőleges arany jel. Nem ikon: a lap tele van ikonokkal, egy újabb csak zajt adna. Ez a sáv „ez más, mint a többi" jele. */ .kgfb-demo-jel { flex: 0 0 auto; width: 3px; align-self: stretch; min-height: 54px; border-radius: 3px; background: linear-gradient(180deg, var(--kgfb-arany), rgba(217, 165, 68, 0.15)); } .kgfb-demo-szoveg { flex: 1 1 380px; min-width: 0; } .kgfb-demo-cim { font-size: 1.12rem; font-weight: 800; line-height: 1.3; color: var(--text-primary, #e8eaf0); margin: 0 0 7px; } .kgfb-demo-leiras { font-size: 0.92rem; line-height: 1.62; color: var(--text-secondary, #aeb4c9); margin: 0; } .kgfb-demo-leiras + .kgfb-demo-leiras { margin-top: 8px; } .kgfb-demo-gomb { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 12px 24px; border-radius: 10px; border: 1px solid var(--kgfb-arany); background: transparent; color: var(--kgfb-arany); font-size: 0.95rem; font-weight: 800; text-decoration: none; white-space: nowrap; transition: background .18s ease, color .18s ease, box-shadow .18s ease; -webkit-tap-highlight-color: transparent; } .kgfb-demo-gomb:hover, .kgfb-demo-gomb:focus-visible, .kgfb-demo-gomb.fpe-arany-tap { background: var(--kgfb-arany); color: #1a1d2e; box-shadow: 0 0 20px rgba(217, 165, 68, 0.28); outline: none; } .kgfb-demo-gomb svg { width: 16px; height: 16px; flex: 0 0 auto; } /* Világos módban (data-theme="light") az arany szöveg 4,5:1 alatt lenne a világos háttéren, ezért ott a sötétebb arany viszi a szöveget. Ugyanaz a megoldás, mint a fpe-arany.css-ben. */ html[data-theme="light"] .kgfb-demo { background: linear-gradient(180deg, rgba(217, 165, 68, 0.10), rgba(217, 165, 68, 0.03)), var(--card, #ffffff); } html[data-theme="light"] .kgfb-demo-gomb { color: #8a6410; border-color: #8a6410; } html[data-theme="light"] .kgfb-demo-gomb:hover, html[data-theme="light"] .kgfb-demo-gomb:focus-visible, html[data-theme="light"] .kgfb-demo-gomb.fpe-arany-tap { background: #8a6410; color: #ffffff; } /* 560 px alatt a gomb teljes szélességű lesz — a 320 px-es nézeten a „Megnézem a KGFB-segédletet" felirat különben kilógna. Mérve. */ @media (max-width: 620px) { .kgfb-demo { padding: 20px 18px; gap: 16px; } .kgfb-demo-jel { width: 100%; height: 3px; min-height: 0; align-self: auto; flex-basis: 100%; } .kgfb-demo-gomb { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .kgfb-demo-gomb { transition: none; } }