/* ========================================================================= ZYMA MLUE — hero A lap sötét, teljes szélességű képre épül; a szöveg a bal oldali, lesötétített sávban ül. A régi ciánkék hero (fénypillér + morph-cím + dock) a git-történetben marad: `git show HEAD:apps/website/style.css`. ========================================================================= */ /* ---------- Betűtípusok ---------- Két önhosztolt variable font, magyarra szűkítve: apps/website/betuk/ (előállítás és indoklás: betuk/OLVASSEL.md). Miért nem Montserrat: a logó Montserrat-kontúrokból van kiszedve, és az arculat ki is mondja, hogy „Montserrat csak a logóban van". Ha az egész lap is Montserrat, a szólogó nem jel többé, hanem „a bekezdés, csak vastagabban" — ráadásul a 900-as, verzál, POZITÍV trackingű logó és egy 800-as, kevert, NEGATÍV trackingű címsor ugyanazon az optikai tengelyen ülne (lásd lentebb a --gutter kommentjét: a bal él szándékosan közös). Két majdnem-azonos betű egymás mellett a legrosszabb tipográfiai állapot. */ @font-face { font-family: "Familjen Grotesk"; src: url("betuk/familjen-grotesk-hu.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "Instrument Sans"; src: url("betuk/instrument-sans-hu.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } /* Metrikára illesztett tartalék. A `swap` alatt egy pillanatra a rendszerbetű látszik; ezek az értékek gondoskodnak róla, hogy a csere ne mozdítsa el az elrendezést. Számítás: size-adjust = a webfont x-magassága osztva az Ariálé- val (0,5186); az ascent/descent a webfont saját hhea-értéke ugyanezzel a size-adjusttal elosztva. Familjen Grotesk — x 0,500 · asc 1,025 · desc 0,225 (upm 1200) Instrument Sans — x 0,510 · asc 0,970 · desc 0,250 (upm 1000) */ @font-face { font-family: "Familjen tartalék"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 96.42%; ascent-override: 106.3%; descent-override: 23.33%; line-gap-override: 0%; } @font-face { font-family: "Instrument tartalék"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 98.35%; ascent-override: 98.63%; descent-override: 25.42%; line-gap-override: 0%; } :root { /* A címsoré a groteszk, minden másé a semleges szövegbetű. A mikroszöveg (eyebrow, logófal-címke) is a szövegbetűt kapja, és ennek mérési oka van: az Instrument Sansban a nagybetűs Ő már 12 px-en két külön foltként olvasható, a Montserratban csak 18 px-től — az eyebrow pedig 12,16 px. */ --cim: "Familjen Grotesk", "Familjen tartalék", system-ui, sans-serif; --szoveg: "Instrument Sans", "Instrument tartalék", system-ui, sans-serif; /* HÁROM ALAPTÓNUS, KÉT ALAKBAN. A `-rgb` végű token nem szín, hanem nyers komponenslista — ebből származik a tömör szín (`rgb(...)`) ÉS az összes áttetsző változata (`rgba(..., alfa)`). Enélkül a lapon 27 helyen állt beégetve a háttér (sötétítések, vignetta, panelek), 17 helyen a márkakék (izzások, gomb-árnyékok, chip-keretek, állapotjelzés) és 2 helyen a szövegszín: egy márkaszín-csere tizenhét helyen nem futott volna végig. Ugyanez a minta él a --feny-nél is, csak az régebbi, ezért nincs rajta a szuffixum. Miért nem `color-mix(in srgb, var(--brand) 28%, transparent)`: ugyanezt tudja, de (1) egy öt megállós színátmenetben olvashatatlanul hosszú, (2) ez a fájl a --feny-nél már a komponenslistás mintát használja, tehát az a meglévő konvenció, és (3) ahol a motor nem ismeri a `color-mix`-et, ott az EGÉSZ deklaráció elesik — a hero sötétítése például nyom nélkül eltűnne, és a szöveg olvashatatlanul maradna a fotón. Az `rgba(var(--x), alfa)` ilyet nem tud: ahol a custom property megy, ott ez is megy. */ --bg-rgb: 5, 7, 11; --bg: rgb(var(--bg-rgb)); --ink-rgb: 244, 248, 252; --ink: rgb(var(--ink-rgb)); --ink-dim: rgba(var(--ink-rgb), 0.72); /* AZ --ink-faint NEM SZÖVEGSZÍN. A lap sötét felületein 4,1 és 4,2 közötti kontrasztot ad, vagyis mindig a WCAG 2.2 AA 1.4.3 által kért 4,5:1 alatt — ezt négy külön mérés mondta ki négy külön helyen, és mind a négy --ink-dim-re cserélte (a nyelvválasztó, a csevegő állapotsora, a logófal címkéje és a beviteli mező helyőrzője). Ma egyetlen élő használata van, és az DÍSZ: a gépelő-jelző pontjainak háttere. Aki szöveget akar halkítani, az --ink-dim-et vegye, vagy a betűsúlyt csökkentse. */ --ink-faint: rgba(var(--ink-rgb), 0.44); --brand-rgb: 22, 184, 243; --brand: rgb(var(--brand-rgb)); --brand-deep: #0a8fd8; /* A MÁRKAKÉK SZÖVEGKÉNT — külön token, mert a kéknek két szerepe van, és a kettő két külön kontraszt-követelmény alá esik. Sötét módban egybeesnek, világosban szétválnak; ez a token az a hely, ahol szétválhatnak. FELÜLETKÉNT (--brand) a kék alá mindig --brand-tinta kerül, és az a pár 8,29:1 — a lap tónusától FÜGGETLENÜL, hiszen mindkét szín a gombon BELÜL van. Ezért a --brand mindkét témában ugyanaz marad: az elsődleges gomb, a csevegő-avatar, a saját buborék és a küldés-gomb egy képpontot sem változik. SZÖVEGKÉNT viszont a lap háttere a párja, és ott a két téma nem egyforma: sötét alapon a --brand 8,82:1, világoson 2,14:1 — a WCAG 2.2 AA 1.4.3 által kért 4,5:1-nek alig a fele, sőt a nagy szövegre engedett 3:1-et sem éri el, tehát még a főcím „AI erejével" sora sem úszná meg. A világos változat ezért UGYANAZ a kék, csak OKLCH-ban sötétítve (L 0,735 → 0,534), változatlan C és H mellett: 4,51:1. Nem másik szín, hanem ugyanannak a színnek a világos papírra való változata. A fókuszgyűrű is ezt kapja, nem a --brand-et. Az nem szöveg, de a WCAG 2.2 AA 1.4.11 hármas kontrasztot kér rá a szomszédos felülettel szemben — világos alapon a --brand ott is elbukna, és pont a billentyűzetes látogató veszítené el az egyetlen tájékozódási pontját. */ --brand-szoveg: var(--brand); /* A márkakék FELÜLETEKRE kerülő sötét tinta: skip-link, elsődleges gomb, chatbot-avatar, saját buborék, küldés-gomb — öt helyen ugyanaz a szín állt beégetve. Nem a --bg: az a lap háttere (5, 7, 11), ez pedig kékebb és világosabb (4, 18, 27) — a kék felületen így ül meg, ahelyett hogy lyuknak látszana benne. */ --brand-tinta: #04121b; /* A hero képén a két alak között felizzó fény melegsárga-narancs. A jelvény ezt tükrözi vissza (nem a márkakéket) — így nem külön elem a képen, hanem a fény visszaverődése. */ --feny: 255, 176, 106; --feny-szoveg: #ffd3a6; /* A csevegő „Elérhető" állapotpontja: a lap egyetlen zöldje. Komponenslista, mert a pont tömören, a körülötte ülő halo 16%-on viszi ugyanazt. A siker visszajelzése ATTÓL FÜGGETLEN, és szándékosan márkakék marad (lásd a .masol[data-allapot="kesz"] szabályát) — ez a token nem „a zöld siker", hanem egyetlen állapotjelző lámpa. */ --elerheto-rgb: 61, 220, 151; /* A csevegő rendszer-üzenetének (hiba, sapka) kerete. Sötét alapon a szín világos vége válik ki; a világos téma a saját blokkjában fordítja meg. */ --jelzes-keret: rgba(255, 128, 128, 0.38); /* A FOLT: az a szín, amit a lap a SAJÁT felületére ken, hogy elváljon tőle. Sötét alapon ez fehér (fény hozzáadva), világoson sötétkék tinta (árnyék hozzáadva) — a lap tizenkilenc helyén állt beégetve `rgba(255, 255, 255, α)` alakban: keretek, üveg-panelek, elválasztók, hover-felületek, a csevegő minden sávja. Egyetlen komponenslista, tehát a témaváltás mind a tizenkilencen egyszerre fut végig. A világos érték nem tiszta fekete (0, 0, 0), hanem a márka hűvös kékje felé tinktált (12, 30, 46). Tiszta fekete egy kékre hangolt majdnem-fehéren piszkos szürkének látszik, mert a folt hidegebb hátteret melegebb szürkévé old — ugyanaz a hiba, mint a semleges szürke szöveg színes háttéren. NEM MINDEN FEHÉR FOLT. Ami a FOTÓRA világít, az fényforrás, nem felület: a fül lencséjének magja (.hero__fulfeny::before) és a körülötte ülő halo beégetve marad, mert azok `screen`-nel a robot képére kevernek, és a kép mindkét témában ugyanaz. Egy fényforrást témázni értelmetlen. */ --folt-rgb: 255, 255, 255; --line: rgba(var(--folt-rgb), 0.09); --glass: rgba(var(--folt-rgb), 0.045); /* A csevegő saját felülete. Nem a --bg: a panel a lap fölött lebeg, tehát látszania kell rajta — sötét módban ezért kékebb és világosabb a lapnál (9, 13, 20 a lap 5, 7, 11-éhez képest), az indító hoverén még egy fokkal (12, 18, 27). Világos módban a viszony megfordul: ott a lap a tört fehér, a lebegő panel pedig a TISZTA fehér, vagyis a panel a világosabb. */ --panel-rgb: 9, 13, 20; --panel-emelt-rgb: 12, 18, 27; /* Vetett árnyék. Sötét alapon majdnem tiszta fekete, mert ott az árnyéknak csak mélyítenie kell; világoson viszont a tiszta fekete koszos szürke karikát rajzol a panel köré — ezért ott a márka kékjébe hajló, jóval halványabb tinta (0,5 → 0,10). A világos felület árnyéka nem sötétebb ugyanabból, hanem KEVESEBB belőle. */ --arnyek-nagy: rgba(0, 0, 0, 0.5); --arnyek-kozep: rgba(0, 0, 0, 0.4); /* A fejléc külső margója és belső paddingje. A hero szövegoszlop bal éle ezek összege — így a logó és a főcím pontosan egy vonalban indul. */ --gutter: clamp(1rem, 2.6vw, 2rem); --pad: clamp(1.1rem, 1.8vw, 1.6rem); /* A böngésző saját felületei: görgetősáv, szövegkijelölés, a beviteli mező alapértelmezett rajza. Enélkül a világos lapon SÖTÉT görgetősáv maradna — egy témaváltás, ami a lap szélén nem fut végig, nem kész témaváltás. */ color-scheme: dark; } /* ========================================================================= VILÁGOS MÓD A sötét a lap alapállapota, és ez a fájlban is így van: minden fenti érték a sötét változat, a világos pedig EGY blokk felülírás. Ennek két oka van. 1. Ha a stíluslap magától nem tud betölteni témát, a lap a megtervezett állapotában áll — nem a fele-úton. A `data-tema` attribútumot a lapok fejlécében álló, festés ELŐTT lefutó szkript teszi ki; ha az bármiért elmarad, a látogató a sötét lapot kapja, nem villanást. 2. Egy tokenkészlet, egy hely. A `prefers-color-scheme` médiafeltételt is kiszolgálni CSS-ből azt jelentené, hogy ez a huszonhárom sor kétszer áll a fájlban (médiafeltétel nem lehet szelektor, tehát nem vonható össze) — és a CLAUDE.md „egy döntés, egy hely" szabálya pont ezt tiltja. A rendszerbeállítást ezért a fejléc-szkript olvassa ki, egyszer. MI VÁLTOZIK ÉS MI NEM. A hero FOTÓJA nem változik: a lap sötét látványát nem a kép adja, hanem a rá boruló sötétítés (.hero__scrim), az pedig végig `rgba(var(--bg-rgb), α)`-ból van. Ha a --bg-rgb majdnem-fehérre vált, ugyanaz a színátmenet ugyanabban a geometriában világos fátyollá válik: a szöveg oldalán letakarja a képet, a jobb oldalon átenged. A jelenet így nem másik kép lesz, hanem ugyanaz a kép másik napszakban. Ezért marad érintetlen a két vászon is (a találkozás fénye és a kurzor-rács): mindkettő a FOTÓRA kever, nem a lap hátterére, és a sötétítés fölöttük van a DOM-ban. A bemenetük tehát mindkét témában bitre ugyanaz. ========================================================================= */ :root[data-tema="vilagos"] { color-scheme: light; /* A háttér hűvös, a márka kékje felé tinktált tört fehér — OKLCH 0,976 / 0,008 / 242, vagyis pontosan a sötét --ink tükörképe (0,977 / 0,007 / 248). A lap két tónusa így nem két külön szín, hanem egy tengely két vége. NEM KRÉM. A meleg, homokos majdnem-fehér (OKLCH L 0,84–0,97, C < 0,06, H 40–100) ma a generált oldalak alapértelmezése; a PRODUCT.md külön anti-referenciaként nevezi meg. Egy égbolt-fotóra épülő, kék márkájú lapon a semleges vagy hideg tört fehér amúgy is az egyetlen helyes válasz: a meleg tinta a fotó kék felhőivel szemben azonnal piszkosnak látszana. */ --bg-rgb: 243, 248, 252; /* A tinta ugyanennek a tengelynek a másik vége: hűvös, majdnem-fekete. Kontraszt a háttéren 17,6:1 (a sötét mód 18,9:1-éhez képest), az --ink-dim 0,72-es alfája pedig 7,35:1-et ad — mindkettő bőven a WCAG 2.2 AA 4,5:1 fölött, tehát az --ink-dim alfáján nem kell változtatni. Ez a token szándékosan ugyanaz a szám marad mindkét témában: ha egyszer a 0,72 mind a két irányban átmegy a mérésen, kétfelé állítani csak új hibaforrás. */ --ink-rgb: 11, 18, 26; --folt-rgb: 12, 30, 46; /* Ugyanaz a kék, OKLCH-ban sötétítve: L 0,735 → 0,534, a C és a H érintetlen. 4,51:1 a háttéren. Az indoklás a --brand-szoveg definíciójánál áll. */ --brand-szoveg: #0079b0; /* A meleg fény szövegként. A sötét lapon ez világos barack (#ffd3a6, 14,5:1), világoson ugyanannak a fénynek a sötét vége: égetett borostyán. A jelvény kerete és háttere marad `rgba(var(--feny), α)`, tehát a MELEG folt ugyanott és ugyanolyan marad — csak a betű sötétedik bele. AZ ÉRTÉK NEM A LAP HÁTTERÉHEZ VAN MÉRETEZVE, HANEM A JELVÉNYÉHEZ, és ez a különbség egy bukást ért. A felirat nem a tört fehéren ül, hanem a saját meleg tintáján (a .eyebrow::before 0,16-os kitöltésén), ami sötétebb is, melegebb is a lapnál. Az első jelölt (#a8600a) a lap hátterén szabályos 4,52:1-et adott — a jelvényen mérve viszont csak 3,65-öt, vagyis pont ott bukott, ahol a szöveg ténylegesen áll. Ez az érték a MÉRT hátterekhez van igazítva: 6,30:1 a lapon, 5,09:1 a jelvény legrosszabb képpontján. */ --feny-szoveg: #8a4c08; /* Az állapotlámpa 3:1-re sötétítve (a sötét módban 8,4:1 volt). Nem szöveg, de jelentést hordozó grafikai elem, tehát a WCAG 2.2 AA 1.4.11 vonatkozik rá; a világos zöld tiszta fehéren 1,8:1-et adott, vagyis nem lámpa lett volna, hanem egy alig látható pötty. */ --elerheto-rgb: 0, 164, 100; /* Ugyanaz a jelzés a tiszta fehér panelen: a világos piros ott 1,9:1-et adna a fehérrel szemben, vagyis gyakorlatilag nem lenne keret. A sötét vég nagyobb fedéssel kb. 2,7:1 — nem szövegkontraszt, de látható él. */ --jelzes-keret: rgba(176, 32, 32, 0.55); /* A lebegő panel világos módban a TISZTA fehér: a lap tört fehér, tehát a panel fölé emelkedik, nem beleolvad. Sötét módban ez fordítva van. */ --panel-rgb: 255, 255, 255; --panel-emelt-rgb: 255, 255, 255; --arnyek-nagy: rgba(12, 38, 64, 0.16); --arnyek-kozep: rgba(12, 38, 64, 0.13); /* A vonal és az üveg alfája NEM ugyanaz a két témában, és ez nem ízlés: azonos alfánál a sötét folt világos alapon nehezebbnek látszik, mint a világos folt sötét alapon (a szem a világosból kivont fényre érzékenyebb, mint a hozzáadottra). A hajszálvonal ezért kap többet (0,09 → 0,12, hogy egyáltalán legyen éle a tört fehéren), az üveg-kitöltés pedig kevesebbet (0,045 → 0,032, hogy a nyelvválasztó pirulája ne szürke doboz legyen). */ --line: rgba(var(--folt-rgb), 0.12); --glass: rgba(var(--folt-rgb), 0.032); } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { background-color: var(--bg); color: var(--ink); font-family: var(--szoveg); overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { max-width: 100%; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 0.75rem 1.1rem; border-radius: 0 0 10px 0; background: var(--brand); color: var(--brand-tinta); font-weight: 700; text-decoration: none; } .skip-link:focus { left: 0; } :where(a, button):focus-visible { outline: 2px solid var(--brand-szoveg); outline-offset: 3px; border-radius: 6px; } /* ---------- Hero váz ---------- */ /* `overflow: clip`, nem `hidden` — és ennek mérhető oka van. A `hidden` GÖRGETŐDOBOZT csinál: a felhasználó nem tudja görgetni (nincs görgetősáv), a böngésző viszont igen. Az ugrólink a `
`-t fókuszálja, a focus() pedig minden görgethető őst a látótérbe hoz — így a hero doboza BELÜLRŐL elgörgött, és a fejléc teteje véglegesen levágódott. Mérve 1440x900-on: az ugrólink Enterje után hero.scrollTop 0-ról 34-re ment, a .nav teteje 32-ről -2-re, és sem az egérgörgő, sem a window.scrollTo(0,0) nem hozta vissza. 320x568-on 200%-os szövegnagyításnál a szólogó doboza teljes egészében a vágóél fölé került, vagyis nyom nélkül eltűnt. A `clip` ugyanúgy vág, de nem hoz létre görgetődobozt: ugyanezzel a méréssel a scrollTop 0 marad, a nav teteje 32, a fókusz továbbra is a main-en. A hiba nem ennek a körnek a számlájára ment (HEAD-en ugyanez 34 px volt, ott a #hero-cim horgony váltotta ki), de a javítása ide tartozik. A `hidden` MARAD alatta tartaléknak: a `clip` Chrome 90 / Firefox 81 / Safari 16 óta megy, ahol nem, ott az ismeretlen érték eldobja a második deklarációt, és marad a régi viselkedés — vágás igen, a fenti mellékhatással. Ez rosszabb, mint a clip, de sokkal jobb, mint vágás nélkül: a dekor-rétegek szándékosan túlnyúlnak a nézeten. */ .hero { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; overflow: hidden; overflow: clip; } /* A flex ma nem igazít semmit: minden gyerek abszolút pozíciójú. Azért marad, mert a találkozás fényének doboza (lásd „A találkozás fénye: NINCS") CSAK flexszel volt középre hozható — transformmal nem —, és ha valaha visszajön, ennek itt kell lennie. Üres flex-konténer nem kerül semmibe. */ .hero__media { position: absolute; inset: 0; z-index: 0; display: flex; justify-content: center; /* Ha a hero.jpg még nincs a helyén, ez marad alatta — nem lesz üres fehér folt. */ background: radial-gradient(120% 90% at 78% 45%, rgba(var(--brand-rgb), 0.28), transparent 62%), radial-gradient(80% 70% at 30% 30%, rgba(120, 90, 60, 0.22), transparent 60%), var(--bg); } /* ---------- Háttér-rétegek ---------- Minden réteg abszolút pozíciójú, és kizárólag transform/opacity mozog rajta — így az animáció nem okoz újratördelést, és a GPU viszi. A rétegsorrendet a DOM-sorrend adja (égbolt → ember → AI → sötétítés → vignetta). */ .hero__layer { position: absolute; pointer-events: none; } /* NINCS `will-change` egyetlen háttér-rétegen sem, mert egyik sem animál többé. Korábban a .hero__layer-en ült, vagyis mindegyiken — de a `will-change: transform` nem kérés, hanem utasítás: a böngésző saját GPU-textúrát nyit az elemnek, és ott is tartja. Statikus rétegen ez tiszta veszteség: textúra- memória és egy plusz kompozitálandó réteg azért, hogy soha ne mozduljon. Ha valaha új animált háttér-réteg kerül ide, a `will-change` KIZÁRÓLAG arra az egy rétegre menjen, ne vissza a .hero__layer-re. */ /* A telefonon rejtett rétegek ``-be vannak csomagolva, hogy le se töltődjenek (a miértje az index.html-ben, a .hero__szereplok fölött). Maga a `` viszont nem létezhet dobozként: a .hero__szereplok belsejében a benne lévő réteg abszolút pozíciója kerülhetne más viszonyítási pontra, a .hero__media pedig flex-konténer — ott egy extra sorban maradó gyerek elmozdítaná a középre igazítottakat. (Ma nincs ilyen gyerek, a találkozás fénye volt az; a szabály attól még kell, mert a burkoló maga LENNE az.) A `display: contents` a dobozfából kiveszi a burkolót, és a gyerek -et a helyén hagyja — a rétegek tehát pontosan úgy viselkednek, mintha a picture ott sem lenne. A kapcsolati lapok háttere ugyanezt kapja, más okból: ott a `` nem a mobil-letöltés miatt van, hanem hogy a csökkentett mozgást kérő látogató a mintázat mozdulatlan változatát kapja (az `` külön kép-dokumentum, oda a gazdalap beállítása nem megy át). A burkolónak ott sincs dolga a dobozfában: a .lap__halozat abszolút pozíciójú, a viszonyítási pontja a .lap__hatter. */ .hero__media picture, .hero__szereplok picture, .lap__hatter picture { display: contents; } /* Égbolt: kitölti a hero-t. A transform NEM stílus, hanem a KOMPOZÍCIÓ. Az állandó −2,6%-os X-eltolás a képet balra húzza, hogy a jobb szélén lévő mély kék égbolt is beférjen; a nagyítás pedig ennek a tartaléka, hogy az eltolás ne hozza a kép szélét a keretbe (1.075-nél oldalanként 3,49% a ráhagyás, a kimozdulás 1,075 × 2,6% = 2,80% — elfér). Miért nem `object-position`: a legtöbb valódi desktop-nézet a böngészőkeret miatt 16:9-nél SZÉLESEBB, ott a `cover` szélességre méretez — vízszintesen nincs mit pásztázni, az object-position nem csinál semmit. A transform viszont a nagyítás tartalékából dolgozik, tehát minden képarányon ugyanúgy hat. EZÉRT NEM TÖRÖLHETŐ, csak befagyasztható. Volt itt egy 46 s-es `eg-uszas` úszás (1.075/−2,6% → 1.115/−3,7%); a fenti érték szó szerint annak a `from` állapota. A jelenet szereplői ehhez a 2,80%-hoz vannak igazítva (lásd a .hero__szereplok elemeit), hogy a kezek a fényrobbanáson maradjanak — aki ezeken a számokon változtat, a szereplőkön is változtat. MIÉRT ÁLL. Ez volt az UTOLSÓ animált réteg a fényvászon ALATT, és a screen-keverés ára ezen múlt: amíg bármi mozgott a vászon mögött, a böngészőnek képkockánként újra kellett laposítania a hátteret, hogy legyen mivel kevernie. Állóképnél ezt egyszer megteszi és gyorsítótárazza. Cserébe a jelenet elvesztette a lassú „lélegzését" — ez tudatos csere volt, nem elfelejtett animáció. AZ OKA VISZONT MEGSZŰNT: a fényvászon 2026-08-03-án kiesett (lásd „A találkozás fénye: NINCS"), tehát nincs többé mit laposítani. Ha a jelenet újra lélegezni akar, EZ a legolcsóbb hely, ahonnan elindulni — a régi `eg-uszas` végállapota 1.115 / −3,7% volt. Nem hoztuk vissza automatikusan: a mostani kérés a lassulás megszüntetése volt, nem a mozgás visszaadása. Nincs rajta `will-change` sem: az saját GPU-textúrát nyittatna és tartatna egy soha nem mozduló réteghez. */ .hero__layer--eg { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% center; transform: scale(1.075) translate3d(-2.6%, 0, 0); } /* ---------- Úszó felhők: NINCSENEK ---------- Volt itt három, majd kettő, most egy sem — a rétegek teljesítmény miatt kiestek. Amit tudtak: ugyanannak az égboltnak átlátszó kivágatai feküdtek a háttérfotón, egymáshoz képest eltérő ütemben úszva, és a mélységet a sebességkülönbségük adta. Amibe kerültek: rétegenként egy teljes képernyős, MASZKOLT, végtelenítve animált GPU-textúra. A maszk külön festési fázisba kényszerítette őket, a fölöttük ülő fényvászon screen-keverése miatt pedig képkockánként újra kellett laposítani az egészet — vagyis kétszer fizettek. Cserébe a saját, korábbi mérésük szerint mindhárom réteg EGYÜTT is csak +1,16 szürkeszintet tett a képre. (A második tétel azóta elévült: a fényvászon sincs meg — lásd „A találkozás fénye: NINCS". A maszkolt, teljes képernyős textúra ára viszont marad, tehát a réteg így sem olcsó.) A kivétel ára lemérve (1440×900, azonos képkocka, a kétrétegű állapothoz képest): 1,72/255 átlagos eltérés, a képpontok 7,1%-a tér el 8/255-nél többet, a legnagyobb eltérés 54/255 — miközben ugyanannak a beállításnak a két futása közt 0,01%. Tehát valódi, de finom veszteség: az égbolt felső harmada lett egy árnyalattal tisztább. A generátor (tools/felho-retegek.py) és a nyers források megmaradtak, tehát a réteg visszahozható. Ahhoz kell: a .hero__felho szabály a maszkkal, a rétegenkénti opacity + animation, a hozzá tartozó @keyframes, a markup MINDKÉT lapon (index.html és en/index.html), és a 560 px alatti elrejtés. */ /* A jelenet közös koordinátarendszere. 16:9, a hero magasságához kötve, de legalább teljes szélességű — pont úgy viselkedik, mint az égbolt-réteg object-fit: cover-je, ezért a benne lévő százalékos pozíciók a háttérhez képest nem csúsznak el, ha változik a képarány. Ezen a geometrián osztozott a találkozás fényének doboza is, más középre- hozással; az a réteg kiesett (lásd lent). */ .hero__szereplok { position: absolute; top: 0; bottom: 0; left: 50%; height: 100%; aspect-ratio: 16 / 9; min-width: 100%; transform: translateX(-50%); } /* ---------- A találkozás fénye: NINCS ---------- Az ujjhegyek közti résben egy WebGL-vászon ült (.hero__fenymezo > .hero__feny, rajzolta az apps/website/hero-feny.js), és a fotón állóképként világító rést keltette életre: a fény a résből kifelé, a sötétebb égboltra futott ki. A szereplők ELŐTT állt a DOM-ban, hogy a kezek kitakarják — a fény mögülük sütött elő. 2026-08-03-án kiesett, mert a lap érezhetően lassú lett tőle. AMIBE KERÜLT. Ez volt a hero egyetlen képkockánként újrarajzolt GPU-munkája: egy végtelenített rAF-hurok, benne egy fraktális zaj-shader, a jelenet ~58×72%-át lefedő vásznon, 1,75-ig menő eszköz-képpontarányon. Ehhez jött a `mix-blend-mode: screen` ára: a keverés miatt a böngésző nem tarthatta külön rétegen a vásznat, hanem képkockánként össze kellett laposítania a mögötte lévő HÁTTERET is, hogy legyen mivel kevernie. Ez a keverés vitte magával a jelenet többi mozgását is: előbb a három úszó felhőréteget (lásd „Úszó felhők: NINCSENEK"), majd az égbolt 46 s-es úszását (lásd .hero__layer--eg „MIÉRT ÁLL") — mindkettőt azért fagyasztottuk be, hogy a laposításnak ne legyen mit újraszámolnia. A vászon eltűntével ez a kényszer megszűnt: ha kell újra mozgás a heróba, MOST már az égbolt úszása a legolcsóbb hely, ahonnan elvenni valamit — nem ez a vászon. MI MARADT HELYETTE. A rés fénye a háttérfotóé (hero/hatter*.jpg), ami eleve majdnem fehér az ujjhegyek körül — a vászon ezért is csak KIFELÉ tudott dolgozni. A veszteség a résből kinyúló, lassan gomolygó fátyol; maga a fényrobbanás megmarad. VISSZAHOZÁS. A shader, a hangolt paraméterek és a hangolólap a git-ben vannak, a 2026-08-03 előtti állapotban: `apps/website/hero-feny.js` és `tools/hero-feny-proba.html`. Ahhoz kell: a két fájl visszaállítása, a `
` markup MINDKÉT lapon (index.html és en/index.html, az égbolt-réteg UTÁN, a .hero__szereplok ELŐTT), a script-tag mindkét lapon, a lenti két szabály, és a 560 px alatti elrejtés. A két szabály, ahogy volt: .hero__fenymezo { .hero__feny { position: relative; position: absolute; flex: 0 0 auto; left: 57.6%; top: 43.5%; pointer-events: none; display: block; height: 100%; width: 58.5%; height: 72.5%; aspect-ratio: 16 / 9; transform: translate(-50%, -50%); min-width: 100%; mix-blend-mode: screen; } } A doboz furcsa alakjának két oka volt, és visszahozáskor mindkettő újra érvényes: (1) NEM tolható transformmal középre (ahogy a szereplők doboza), mert a transform saját rétegcsoportot nyit, és a vászon screen-keverése akkor csak a dobozon belülre látna — az égbolt, amivel keverni akar, kívül maradna; ezért igazította a .hero__media flex-e. (2) Sorban maradó elem, z-index NÉLKÜL: így a festési sorrendben a DOM-beli helye szerint került a pozicionált testvérek közé (égbolt után, szereplők elé), új rétegcsoport nyitása nélkül — ettől takarták ki a kezek. A vászon a mért érintkezési pontra volt húzva: az ember ujjhegye a közös rendszerben 57,3%-nál, a robotté 57,9%-nál, azonos magasságban — a rés közepe 57,6% / 46,9%. A függőleges közép ennél magasabb (43,5%), hogy a fénycsóva fölfelé nyíljon, a rés a fény alsó harmadába kerüljön. ÉS AMIT NE PRÓBÁLJ ÚJRA: a screen-keverés leváltása `source-over`-re. Papíron egybeesnek, ahol a fény semleges vagy a háttér sötét — screen: eredmény = s + h·(1−s) csatornánként source-over: eredmény = s + h·(1−a) a = max(s.r, s.g, s.b) — de a shader a tanh UTÁN szoroz `erosseg`-gel (2,0), tehát az alfa széles sávon 1-re telítődik, és ott a sima rárajzolás nem hozzáad, hanem KITAKARJA a világos égboltot: a finom fátyolból tömör, tejfehér csóva lesz lila beütéssel. Lemérve (1440×900, csökkentett mozgás, azonos képkocka): a képpontok 7,7%-a tér el 8/255-nél többet, a legnagyobb eltérés 77/255, miközben ugyanannak a beállításnak a két futása közt 0,01%. A különbség pontosan ott van, ahol a jelenet lakik: a fényes égen. */ /* Áramkör-mintázat a robot mögött. 16:9, tehát pontosan fedi a közös rendszert és vele együtt az égbolt-réteget is. A rajz generált SVG (tools/gen-halozat.mjs): a nyomvonalak a bal harmadon elhalnak, ezért a szöveg alatt nincs mit kitakarni. Itt NINCS animáció, és ez szándékos. Korábban a réteg egészének opacitása pulzált — egy amúgy is halvány rajzon az nem mozgásnak látszott, hanem lassú tónusváltásnak, vagyis gyakorlatilag semminek. A mozgás helyette magába az SVG-be került: a fájl -ként töltődik be, ott szkript nem fut, deklaratív animáció viszont igen — így minden nyomvonalnak és csomópontnak saját üteme lehet. A réteg tehát állandó opacitáson ül, és a rajz mozog magától; a `prefers-reduced-motion` kezelése is odabent van. */ .hero__layer--halozat { inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; } /* A méretek szélesség-alapúak, a pozíciók a közös rendszerhez képest. A számok mérésből jönnek: a háttér fénypontja az 59,4% / 44,5% pontban van, az ember ujjhegye a saját alakja jobb szélén, a magasság 33,8%-ánál, a robot ujjhegye a saját bal szélén, az 54,4%-ánál. Innen adódik, hogy a két ujj a fényben találkozzon, azonos magasságban: az érintkezés az 57,3% (ember) és az 57,9% (robot) közötti résben, mindkettőnél a 46,9%-os magasságban. A rés a mért 1920 px-es keretben ~20 px — az ember jobb szélének utolsó, halvány ujjhegy-pixeleitől a robot kinyújtott ujjáig. A régi 59,1 / 60,7 helyett azért ennyi, mert az égbolt is 2,8%-kal balra ment (lásd az eg-uszas keyframe-et) — a jelenet együtt mozdult, hogy a kezek a fényrobbanáson maradjanak. Az ember bal alsó sarokba van horgonyozva (`bottom: 0`), mert a kivágás alján megvilágított comb fut ki: ha nem ér le a hero aljáig, a vágás vízszintes élként látszana meg az égen. Ezért a kicsinyítése egyben lefelé is tolja az ujjhegyét — innen a 44,1% helyett a 46,9%. A háttér fényrobbanása nagy és lágy, ekkora elmozdulást elnyel. (A WebGL-fény doboza is utána ment, amíg volt — lásd „A találkozás fénye: NINCS".) Ez a horgony egyben a magyarázat arra, hogy MIÉRT NEM LEBEG. Volt rajta egy 9 másodperces függőleges úsztatás (`lebegés`), de a `bottom: 0` mellett az fölemelte a hero aljáról: a ciklus felénél ~9 px-es sáv nyílt alatta, és ott a comb kivágásának vízszintes éle kilátszott az égre. Egy alsó élére állított alak nem lebeghet. */ .hero__layer--ember { left: 8.7%; bottom: 0; width: 48.6%; height: auto; /* A forgatás közepe az UJJHEGY (a kép jobb széle, a magasság 33,8%-a) — nem a doboz közepe. Így a 2°-os előredőlés a törzset mozgatja a kéz körül, a kéz viszont marad, szemben a robotéval. Fejmagasságban ez ~10 px jobbra és ~13 px fölfelé, vagyis maga a dőlés is emel — a translateY már csak ~2 px-et tesz hozzá (1920 px széles keretre mérve). A százalék a KÉP saját magasságához szól, nem a heróéhoz: 1% ≈ 8,7 px 1920-nál, kisebb kereten arányosan kevesebb — ezért marad együtt a jelenet minden méretben. Az ára egy ferde hézag a kép alsó élénél: a bal alsó sarok a dőléstől ~33 px-rel emelkedik (1080 px magas keretnél), plusz az emelés. Ez a sáv a legsötétebb scrim alatt, a háttér sziklájára esik — lemérve nem látszik. Jobbra haladva a hézag nullához tart, tehát a comb alatt, ahol kiütne, gyakorlatilag nincs. Ezért mehet ez a `bottom: 0` horgony mellett, a `lebegés` viszont nem mehetett: az egyenletesen emelte az egész alsó élt. A tartalék nem végtelen: −2,5%-ig lemérve tiszta az él, afölött újra ellenőrizni kell. */ transform-origin: 100% 33.8%; transform: translateY(-0.27%) rotate(2deg); } /* A szélessége arányaiban jóval többet esett (51,9% → 36%), mint az emberé (51,2% → 48,6%), és ennek geometriai oka van. Az ujjhegy a jelenet közös rendszerében rögzített pont, a robot pedig onnan jobbra terül el — minél nagyobb, annál messzebb kerül a törzse a képkeret jobb szélén túlra. 51,9%-nál a keret a MELLKASNÁL vágott, és a kar mintha egy lebegő mellkas-darabból nőtt volna ki. 36%-nál a váll, a mellvért és a csípőig a teljes törzs benne van — a kar egy testből nyúlik elő, ahogy az eredeti jelenetben (hero/teljes-jelenet.jpg). A maszk teszi ezt egyáltalán lehetségessé. A forráskép jobb széle KEMÉNY vágás: a törzs ott egyszerűen véget ér. Eddig ez nem látszott, mert a kép széle a kereten kívülre esett — de pont ez kötötte meg a méretet: a robot nem lehetett keskenyebb, mint a 100% és az ujjhegy közti táv, különben 16:9-es (vagy szélesebb) kijelzőn előbukkant a vágásél. A maszk ezt a néhány százaléknyi sávot ködbe oldja, tehát a méret innentől szabad — és a hatás éppen az, amit a jelenet állít: a gép nem véget ér, hanem az égbe vész. A vágásél a 86%-nál kezd elhalni; a bal 86% (fej, kar, mellvért, törzs) érintetlen. Mellékhatás: a robot feje így az emberének 0,63-szerese (az eredeti jelenetben 0,77, a korábbi beállításban 0,85). Ez nem hiba — a gép távolabb kerül, ami éppen az „égből nyúlik ki” hatást erősíti. A robotról is lekerült a `lebegés`. Az elmozdulás a saját magasságának százalékában volt megadva (1,7%), a két alak viszont nagyon eltérő magas — az ember 14,5 px-et úszott, a robot csak 7,4-et, ráadásul más ütemben (9 s / 12 s, eltolt fázissal). Az ujjhegyek közti rés így 9,4 px-et hullámzott a 31 px-es távolságon: a kezek nem együtt lélegeztek, hanem elcsúsztak egymás mellett. Amikor ez a döntés született, a mozgást a háttér úszása és a felhőrétegek vitték tovább — azóta mindkettő kiesett (lásd „Úszó felhők: NINCSENEK" és a .hero__layer--eg „MIÉRT ÁLL"). A jelenet tehát ma teljesen áll: mozgás csak az áramkör-mintázatban (saját, fájlon belüli animáció), a fül fénypontjában és az egérre gyulladó rácsban van. A `lebegés` elhagyásának INDOKA viszont nem évült el — ha valaha visszajön mozgás a heróba, a két alakot akkor sem szabad külön ütemben úsztatni, mert a rés megint hullámozni kezdene. */ .hero__layer--ai { left: 57.9%; top: 24%; width: 36%; height: auto; -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, #000 86%, transparent 100%); } /* ---------- A fül lencséjének fénypontja ---------- A robot fülében ülő objektív a fotón halott, sötét üveg. Ez a réteg gyújtja meg — ugyanaz a gondolat volt, mint a találkozás fényénél: nem új elemet teszünk a jelenetbe, hanem egy MEGLÉVŐ részletet keltünk életre. A fény azóta kiesett, ez a réteg maradt: két CSS-kulcskocka, nem shader-hurok. NEM AZ EGÉSZ FÜL VILÁGÍT. Egyetlen fénypont ül a lencse pupillájában, és a fénye onnan terjed kifelé — a szerkezetet (gyűrűk, foglalat, csillanás) a fotó rajzolja, nem ez a réteg. Az első változat a teljes fület befedte: abból nem izzó lencse lett, hanem egy kék korong a fej oldalán. A POZÍCIÓ mérésből jön, és a robot rétegéhez van kötve. A pupilla közepe a saját képén (hero/ai.webp, 1189×781) a 735 / 106 pixel, vagyis 61,8% / 13,6%. Átszámolva a szereplők közös 16:9-es rendszerébe: a réteg 57,9%-nál kezdődik és 36% széles, a magassága ugyanitt 42,0% (36% × 781/1189 × 16/9) — a fénypont tehát a 80,2% / 29,7% pontban van. Ha a .hero__layer--ai bármelyik száma mozdul, ezt a kettőt is újra kell számolni; egyedül a jobb széli maszk független tőle, az a 86%-nál kezdődik, jóval a fül mögött. A MÉRET a fül saját geometriájából adódik, a közös doboz szélességéhez mérve: pupilla sugár 11 px → 0,33% lencseüveg sugár 30 px → 0,91% a fül foglalata sugár 58 px → 1,76% ← ezt NEM érheti el a fény A mag ezért 0,68% átmérőjű (a pupilla), a halo pedig 2,6% — a felvillanás csúcsán (1,14-es nagyítás) 1,48%-os sugár, vagyis a lencseüveg pereme fölött valamivel, de a foglalaton belül. Ennyi a „picit kifelé”. Miért `screen`. A fény nem festék: fekete üvegre a sima rárajzolás szürke pacniként ülne rá, és eltakarná a lencse saját rajzát. A screen HOZZÁAD, tehát a gyűrűk és a csillanás átütnek az izzáson. A keverés a szereplők dobozán belül marad (a .hero__szereplok transformja rétegcsoportot nyit) — ez itt nem korlát, a folt egésze a robot fején van. Miért KÉT ÜTEM, és melyik mit csinál. A FELVILLANÁS a haloé (5,2 s), a nyugodt lélegzet a ponté (7,4 s) — és ez a felosztás nem cserélhető fel. Fordítva volt először, és lemérve nem működött: a pont 1600 px-es ablakban mindössze ~7 px, a halo viszont annak a tizenötszörös felülete, tehát a szemnek a halo A folt. Ha az villog lassan, a pont felvillanása belevész, és a kettő eredője egyetlen, lomha lüktetés lesz. A látható tömegnek kell villannia. A pont ezért állandó fényforrás marad, alig érzékelhető lélegzettel: egy izzószál nem kapcsolgat. Egyik réteg sem alszik ki teljesen (0,22 és 0,55 az alsó pont). */ .hero__fulfeny { position: absolute; left: 80.2%; top: 29.7%; width: 2.6%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; /* `closest-side`: a 100%-os megálló pontosan a doboz szélén van, tehát a gradiens a saját keretén belül hal el — a `farthest-corner` alapérték a sarkokig nyúlna, és a folt széle a doboz élén elvágva látszana. */ background: radial-gradient( circle closest-side, rgba(196, 240, 255, 0.88) 0%, rgba(var(--brand-rgb), 0.54) 28%, rgba(var(--brand-rgb), 0.2) 58%, rgba(var(--brand-rgb), 0) 100% ); mix-blend-mode: screen; pointer-events: none; animation: ful-villanas 5.2s ease-in-out infinite; will-change: opacity, transform; } /* Maga a fénypont: a pupilla mérete, fehér maggal. Ez az egyetlen kemény elem — innen jön a fény, a halo már csak a szóródása. */ .hero__fulfeny::before { content: ""; position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient( circle closest-side, rgba(255, 255, 255, 1) 0%, rgba(214, 244, 255, 0.9) 34%, rgba(var(--brand-rgb), 0.42) 68%, rgba(var(--brand-rgb), 0) 100% ); animation: ful-mag 7.4s ease-in-out infinite alternate; } /* A felvillanás görbéje. A ciklus nagyobbik felét alacsonyan tölti (a lencse ilyenkor csak halványan izzik), 62%-nál rövid csúcsra fut, aztán lágyan esik vissza. Ez a különbség a felvillanás és a szimpla pulzálás között: az utóbbi ide-oda ingásnak látszik, ez viszont eseménynek. Ezért NEM `alternate`: az szükségképpen szimmetrikus (a le-út ugyanaz a görbe visszafelé), márpedig egy felvillanás nem szimmetrikus — gyorsan gyullad, lassabban hal el. A KIFELÉ ERŐSÖDÉS a nagyításban van, nem csak az opacitásban: a szóródás 0,48-ról 1,14-re nő, vagyis a fény erősödve tényleg messzebbre ér. A csúcson a sugara ~1,48% — a lencseüveg peremén túl, de a foglalat 1,76%-át még mindig nem éri el. A 5,2 s és a pont 7,4 s-a nem egész számú többszöröse egymásnak: a két görbe lenyomata csak ~37 másodpercenként esik egybe, tehát a szem nem talál benne ritmust. */ @keyframes ful-villanas { 0% { opacity: 0.22; transform: translate(-50%, -50%) scale(0.48); } 46% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.56); } 62% { opacity: 1; transform: translate(-50%, -50%) scale(1.14); } 74% { opacity: 0.82; transform: translate(-50%, -50%) scale(0.98); } 100% { opacity: 0.22; transform: translate(-50%, -50%) scale(0.48); } } /* A pont csak lélegzik: ő a fényforrás, nem az esemény. */ @keyframes ful-mag { from { opacity: 0.55; transform: translate(-50%, -50%) scale(0.88); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } } /* Kurzor-rács: a robot mögötti mezőben az egér alatt cellák gyulladnak ki. A vászon a szereplők közös rendszerében ül, a bal széle pontosan a robot ujjhegyénél (58,2%) — a kéz ennél balrább nem ér el, tehát a szöveges oldalra nem lóghat át. A kör alakú hatósugarat és a perem elhalkulását a hero-racs.js számolja; a rajz a hatósugáron kívül elfogy. A canvas helyettesített elem: `width: auto` mellett a saját belső méretét venné fel, ezért a szélessége itt explicit (58,2% + 41,8% = a doboz jobb széle). Egeret nem fog — a mutatót a szkript a .hero-n hallgatja, mert idefönt már ott a sötétítés és a vignetta. */ .hero__racs { position: absolute; left: 58.2%; top: 0; display: block; width: 41.8%; height: 100%; pointer-events: none; } /* Vízszintes sötétítés: balra tömör, jobbra teljesen átlátszó. Ez teszi olvashatóvá a szöveget anélkül, hogy az egész képet lefátyoloznánk. MIÉRT VAN A SZÁZALÉKOK ALATT ABSZOLÚT PADLÓ. A megállók a nézet szélességének arányában álltak, a szövegoszlop viszont FIX: a .hero__lead legföljebb 31rem (496 px) széles, a bal behúzása pedig legföljebb 57,6 px (gutter + pad), tehát a bekezdés jobb széle sosem megy 553,6 px-en túl. Keskenyebb ablakban ez a fix doboz a nézetnek egyre nagyobb SZÁZALÉKA, és kicsúszik a sötétítés alól: 1024 px-en a bekezdés jobb vége már oda ért, ahol az alfa csak ~0,25, és pont ott áll a fotó legvilágosabb felhője. Mérve (glif-maszkos kontraszt, kizárólag a betűk alatti valódi háttérképpontokra, a legrosszabb képpont): 961 px-en 1,57:1, 1024-en 1,83:1, 1100-on 2,16:1, 1180-on 3,02:1, 1280-on 4,24:1 — vagyis 961-től 1300 tájáig végig a WCAG 2.2 AA 1.4.3 által kért 4,5:1 ALATT. 960 px-en és alatta nincs baj: ott a „Reszponzív" blokk függőleges sötétítésre vált. A `max(P%, Xpx)` ezt töréspont nélkül intézi. Az X pontosan az az érték, amit UGYANAZ a százalék 1440 px-en ad (22% = 316,8 px, 36% = 518,4 px, 52% = 748,8 px, 68% = 979,2 px). 1440-től fölfelé tehát a százalék nyer, és a széles nézet képpontra a régi marad; alatta a sötétítés nem szűkül tovább, hanem megáll azon a fizikai szélességen, amit a szövegoszlop megkíván. Ugyanazzal a méréssel a legrosszabb képpont mostantól 4,72:1 (1100 px) és 6,08:1 (1440 px) között van, tehát végig az AA-küszöb fölött. A `max()` nem új támogatási küszöb: a --gutter és a --pad `clamp()`-je ugyanazt a szintet kívánja, tehát ahol ez elesne, ott a lap elrendezése amúgy sem állna össze — nem kell alá tartalék-deklaráció. */ .hero__scrim { position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(var(--bg-rgb), 0.97) 0%, rgba(var(--bg-rgb), 0.9) max(22%, 316.8px), rgba(var(--bg-rgb), 0.7) max(36%, 518.4px), rgba(var(--bg-rgb), 0.3) max(52%, 748.8px), rgba(var(--bg-rgb), 0) max(68%, 979.2px) ); } /* Függőleges lezárás: a fejléc mögé és a lap aljára is kell egy kis tónus. */ .hero__vignette { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(var(--bg-rgb), 0.66) 0%, rgba(var(--bg-rgb), 0) 22%, rgba(var(--bg-rgb), 0) 58%, rgba(var(--bg-rgb), 0.78) 100% ); } /* VILÁGOS MÓDBAN A FELSŐ SÁV ERŐSEBB — és ez nem a világos téma külön kedve, hanem a fedés kétirányú aszimmetriája. Ugyanaz az alfa majdnem-FEKETÉVEL sokkal gyorsabban viszi el a saját végpontjáig a középtónusú képpontot, mint majdnem-FEHÉRREL: a szem világos felé összenyomott válasza miatt a fehér fátyolnak durván kétszer annyi kell ugyanahhoz az elváláshoz. Ezért nem elég a --bg-rgb átbillentése ott, ahol a szöveg közvetlenül a fotón ül. MÉRVE (glif-maszkos kontraszt, kizárólag a betűk alatti valódi háttérképpontokra, a legrosszabb képpont, 11 nézetszélességen): a fejléc vezérlői a fotó felső sávján ülnek, és a sötét mód ott 4,94–5,29-et hoz — a világos viszont ugyanezzel a geometriával 3,70 és 4,32 közé esett, végig a WCAG 2.2 AA 1.4.3 által kért 4,5:1 ALATT. BETŰSZÍNNEL EZ NEM MENTHETŐ. A fejléc alatt átfutó sötét felhőn (rgb 96, 90, 82) még a tömör --ink is csak 2,7:1-et ad. Ahol a háttér középtónusú, ott nincs olyan tinta, amelyik átmegy — a HÁTTERET kell megváltoztatni. MIÉRT KÉPPONT ÉS NEM SZÁZALÉK a két felső megálló. A fejléc magassága FIX (a --gutter margó plusz a ~50 px-es sáv, együtt ~82 px), a százalék viszont a nézet MAGASSÁGÁHOZ szól: 1200 px magas ablakban a fejléc a 6,8%-nál véget ér, 600 px-esben csak a 13,7%-nál. Százalékkal tehát vagy a magas ablakban mosnánk el fölöslegesen a kép harmadát, vagy az alacsonyban maradna fedetlenül a fejléc alsó fele. A 88 px minden nézetben pontosan a fejléc alja, a 240 px pedig az a táv, amin belül a fátyol nyom nélkül elfogy. Ugyanaz a gondolat, mint a .hero__scrim `max(P%, Xpx)` padlójánál. A veszteség kicsi, mert a kép teteje eleve világos égbolt: ott a fehér fátyolnak nincs mit elvennie. Az alsó megálló változatlan — oda nem kerül szöveg. */ :root[data-tema="vilagos"] .hero__vignette { background: linear-gradient( 180deg, rgba(var(--bg-rgb), 0.95) 0, rgba(var(--bg-rgb), 0.9) 88px, rgba(var(--bg-rgb), 0) 240px, rgba(var(--bg-rgb), 0) 58%, rgba(var(--bg-rgb), 0.8) 100% ); } /* ---------- A lezárás: a jelenet leülepedése a lábléc alá ---------- A hero 100dvh magas, a lábléc utána jön, a lap SAJÁT hátterén — a kettő között eddig vágóél volt. Mérve (CIE L*, 1440x900, a teljes sorszélességen, az utolsó hero-sor és az első lábléc-sor között): sötét mód átlag ΔL* 0,92 p95 4,48 max 5,94 — 4,7× világos mód átlag ΔL* 8,87 p95 15,83 max 16,52 — 39,8× (Az „×" a fölötte lévő 40 képpontsor átlagos sorváltásához viszonyít: annyi, ahányszorosa a varrat egy SZOKÁSOS soréltnek ugyanazon a fotón.) Világosban ez szó szerint egy vonal a képernyőn: a felhők 82 L*-on állnak, a lap háttere 97,3-on, és a kettő ugyanabban a képpontsorban ér össze. A látogató nem azt látja, hogy a jelenet véget ér, hanem hogy el van vágva. MIÉRT KÜLÖN RÉTEG, ÉS NEM A .hero__vignette ALSÓ MEGÁLLÓJA. A vignetta 0,78-on zárul, tehát elvben csak 1-re kellene vinni. Csakhogy a vignetta az EGÉSZ hero magasságára van kifeszítve: a 22% és az 58% közötti része a fejléc és a szöveg kontrasztjához van hangolva (lásd ott a méréseket), és bármelyik alsó megálló mozdítása azt a görbét is átírja. Ez a réteg egyetlen dolgot csinál — a lap aljának utolsó néhány száz képpontját —, és a magassága képpontban van megadva, nem a hero arányában. Egy döntés, egy hely. MIÉRT PSZEUDÓELEM, ÉS NEM ÚJ MARKUP. A két kezdőlap szerkezetének egy az egyben azonosnak kell maradnia (CLAUDE.md), és ezt kézzel kell fenntartani — nincs rá eszköz. Egy `::after` MINDKETTŐN egyszerre jelenik meg, tehát ez az egyetlen alakja a változtatásnak, ami definíció szerint nem tud szétcsúszni. Az akadálymentességi fába sem kerül bele, tehát `aria-hidden` sem kell rá. MIÉRT KILENC MEGÁLLÓ ÉS NEM KETTŐ. Két megállóval a fátyol meredeksége a sáv tetején 0-ról UGRIK a végleges értékre. A szem nem a fényerőre érzékeny, hanem a változásának a változására — a Mach-sávok pontosan ott jelennek meg, ahol a meredekség törik. A kilenc megálló a 3t²−2t³ görbét (smoothstep) rajzolja ki, amelynek a meredeksége MINDKÉT végén nulla: a sáv észrevétlenül indul és észrevétlenül áll meg. MÉRVE, A FOTÓ NÉLKÜL (a jelenet helyén tömör középtónus, |d²L*| a sáv felső élének öt sorára, soronkénti átlaggal — így nem a szemcse mérődik): smoothstep 0,0000 két megálló, egyenesen 0,0403 MAGÁN A FOTÓN a különbség ebbe belevész: ott a szemcse saját |d²L*|-ja 0,63, és a sáv éle ehhez képest 1,09× (smoothstep), illetve 1,13× (egyenes) — vagyis a kép zaja mindkettőt eltakarja. A kilenc megálló tehát nem ezt a lapot menti meg, hanem az az alak, amelyik akkor is helyes marad, ha a fotó egyszer kicserélődik, vagy ha a sáv a felhőtlen, sima égboltra kerül. Ugyanaz az egyetlen színátmenet, ugyanannyi festés — nincs miért a rosszabbat választani. MIÉRT ÁLL MEG A TELJES FEDÉS 86%-NÁL. Az utolsó 14% szándékosan tömör lapháttér (900 px magas nézeten ~30 px): ez a garancia, hogy törtpixeles nézetmagasságon, 1,25-ös rendszernagyításon vagy dvh-ugráskor se maradjon egyetlen fotó-sor sem a varratnál. Nem tartalék, hanem az, ami a lábléc körüli levegőt adja. MÉRVE, A JAVÍTÁS UTÁN, ugyanazzal a módszerrel: 1440x900-on MINDKÉT témában átlag ΔL* 0,00 (p95 0,00, max 0,00). Végigsöpörve MINDKÉT kezdőlapon, 16 nézetméreten (320x568-tól 1920x1080-ig, plusz a clamp két vége: 1440x500 → 150 px-es sáv és 1440x1400 → 300 px) és mindkét témában — 64 kombináció — a legrosszabb varrat átlag ΔL* 0,07, max 0,35. Az a 0,35 EGYETLEN 8 bites kódérték 97 L* körül, vagyis a kvantálás padlója: alá menni nincs hova. A varrat nem halkabb lett, hanem megszűnt. (A söprés a lábléc `rise-in` belépője UTÁN mér — 0,42 s késleltetés + 0,7 s. Aki korábban kap képet, a félig beúszott láblécet méri, és 0,16-ig terjedő ál-varratot kap. Nem a sáv hibája, de a mérésnek tudnia kell róla.) SÁVOSODÁS NINCS, TEHÁT ZAJRÉTEG SEM KELL. A kapcsolati lap ugyanezért tart egy `.lap__zaj`-t: nagy, kis kontrasztú átmenet 8 biten csíkokat rajzol. Itt a sáv a FOTÓRA kerül, aminek van saját szemcséje — mérve a szomszédos sorok átlagos különbsége a sáv területén 0,55 → 0,59 (sötét) és 0,50 → 0,56 (világos), azaz a sáv a meglévő zaj alatt marad. Egy réteggel kevesebb. A SÁV MAGA NEM TAKAR EL SEMMIT: a `z-index: 0` a .hero__media fölé teszi, de a `.hero__inner` (z-index: 1) alá — a logófal és a gombok érintetlenül ülnek fölötte. Mérve (glif-maszkos kontraszt a „MÁR BÍZNAK BENNÜNK" feliraton, 1280, 1440 és 1920 px-en, a sáv nélkül → sávval): sötétben 8,84 → 8,84 · 8,01 → 7,86 · 8,01 → 8,01, világosban 6,42 → 6,52 · 5,76 → 5,74 · 5,77 → 5,77. Vagyis a legnagyobb elmozdulás 0,15, mindkét irányban, és minden érték a WCAG 2.2 AA 4,5:1 fölött marad. A sáv a mért kontrasztokhoz nem nyúlt hozzá. HA VALAHA SZEKCIÓ KERÜL A HERO ÉS A LÁBLÉC KÖZÉ, EZT ÚJRA KELL GONDOLNI. A sáv azt az egy varratot oldja fel, ami MA ott van: hero → lábléc, mindkettő a lap hátterén. Egy közbeékelt szekcióval a jelenet nem a láblécbe ülepedne le, hanem egy új blokk tetejébe — a lezárás akkor vagy annak a szekciónak a hátteréhez igazodik, vagy oda költözik. A `.hero::after` nem általános „szekcióvég-elhalványítás", hanem EZ a lezárás. (A hero egyébként is csak a két kezdőlapon van meg; a másik hat lapon ez a szabály nem illeszkedik.) FÉNY A HORIZONTON. A tömör lezárás önmagában halott felület lenne — ezért ül a sávban egy ellipszis a márkakékből, ami a jobb felső sarok áramkör-mintázatát és a robot oldalát folytatja lefelé. A geometriája úgy van megválasztva, hogy a sáv MINDKÉT élén nulla legyen: a középpontja a sáv 52%-án áll, a függőleges sugara 55%, a szín pedig a sugár 75%-ánál elfogy — a legközelebbi él is 0,87 normalizált távolságra van, a 0,75-ös nullpont mögött. Mérve a sáv felső és a hero utolsó sorában a fény nélküli változathoz képest: ΔE76 max 0,0000 mindkét témában. A fény tehát nem hozhat létre új élt sem fölül, sem alul — zárt folt a fátyol belsejében. AZ ALFA EGYETLEN SZÁM, MINDKÉT TÉMÁRA, ÉS EZ MÉRÉS EREDMÉNYE. Itt kézenfekvő lett volna a .hero__vignette aszimmetriáját megismételni (ott a világos módnak erősebb fátyol kell), de a fényre az nem áll: 0 / 0,09 / 0,16-tal végignézve a 0,16 világosban szürkéskék foltként ült meg a logófal alatt, sötétben pedig sávvá vastagodott — a 0,09 mindkettőben ugyanaz a halk pára. Amit a két téma MÁSHOGY mutat, az nem az alfa, hanem a mérőszám: a folt járuléka 0,09-en sötétben ΔE76 átlag 1,58 (p95 6,26), világosban 1,16 (p95 4,26) — és ez a különbség CSAK a felületé, nem a rétegé. Ugyanaz a döntés, egy helyen. */ .hero::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; z-index: 0; height: clamp(150px, 24vh, 300px); pointer-events: none; background: radial-gradient( 60% 55% at 58% 52%, rgba(var(--brand-rgb), 0.09), rgba(var(--brand-rgb), 0) 75% ), linear-gradient( 180deg, rgba(var(--bg-rgb), 0) 0%, rgba(var(--bg-rgb), 0.043) 11%, rgba(var(--bg-rgb), 0.156) 21%, rgba(var(--bg-rgb), 0.316) 32%, rgba(var(--bg-rgb), 0.5) 43%, rgba(var(--bg-rgb), 0.684) 54%, rgba(var(--bg-rgb), 0.844) 65%, rgba(var(--bg-rgb), 0.957) 75%, rgba(var(--bg-rgb), 1) 86%, rgba(var(--bg-rgb), 1) 100% ); } /* ---------- Fejléc ---------- */ /* A SORTÖRÉS NEM DÍSZ, HANEM A NYELVVÁLTÓ ELÉRHETŐSÉGE. A fejléc egy sorban 373,8 px-et kíván: 195,8 px logó (a soros szólogó márkaminimuma 20 px magasan) + 24 px térköz + 86,8 px HU/EN pirula, plusz a behúzások (2 × 16 px gutter és 2 × 17,6 px pad). 320 px-en ebből 252,8 px a hely, tehát a pirula jobb széle 340 px-nél van — 20 px-re a kereten kívül. A hero vágása (ma `overflow: clip`, akkor `hidden`) ezt levágta, a body `overflow-x: hidden`-je miatt pedig görgetősáv sem jelent meg: a nyelvváltó nem volt megközelíthető. Ez WCAG 2.2 AA 1.4.10 (Reflow) bukás, és a lapnak ez az EGYETLEN nyelvváltási módja — elrejteni tehát nem lehet, csak elférővé tenni. MIÉRT NINCS HOZZÁ TÖRÉSPONT. Volt: egy `@media (max-width: 360px)`, ami viszont csak a kapcsolati lapra szólt (`.lap .nav`) — a kezdőlapokon tehát semmi nem védett. A 360-as szám ráadásul nem a valódi küszöb volt: a pirula jobb széle 340,2 px-nél áll, tehát a NÉZETBŐL 340 px alatt kezdett kilógni (340-en 0,2 px, 320-on 20,2 px). 341 és 373 között a fejléc tartalma már csak a saját jobb behúzásába (gutter + pad) lógott bele, a nézetből nem — csúnya volt, de nem vágott. A `flex-wrap: wrap` ugyanezt szám nélkül intézi: a böngésző pontosan ott tör, ahol a tartalom tényleg nem fér el, és magától követi, ha a logó, a pirula vagy a betű mérete változik. Törve a pirula a logó alá, vele azonos bal élre csúszik — ugyanaz a kép, amit a kapcsolati lap eddig is mutatott. A térköz emellett fluid lett: `clamp(0.75rem, 4vw, 1.5rem)`, vagyis 320-on 12,8 px, 375-től 15 px, 600 px fölött a régi 24 px. Ettől az egysoros igény 373,8-ról ~365 px-re esik, tehát a 375 px-es iPhone SE-n 10,2 px tartalék marad — annyi, hogy a betűcsere (`font-display: swap`) alatti pár tized pixel se billentse át törésbe, oda-vissza ugráltatva a fejlécet. A `justify-content: space-between` mellett ez a szám széles nézetben nem látszik: ott a szabad hely úgyis a két szélre nyomja a logót és az akciókat. Mérve 370 px-től végig marad tartalék (370-nél 5,4 px, 380-tól 15 px fölött, 561-től és 961-től a visszatérő fejléc-elemekkel együtt is 68 px fölött). A törés pontos helye 365 px: 364-en még két sor, 365-től egy. Ez tehát NEM csak a legszűkebb telefonokat érinti — a 360 px-es androidos portré, ami a legelterjedtebb mobilszélesség, szintén a kétsoros fejlécet kapja. Így szándékos: 360-on egy sorban a pirula a fejléc behúzásába lógna. A sorköz (0,55rem) értelemszerűen csak tört fejlécben él. */ .nav { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.55rem clamp(0.75rem, 4vw, 1.5rem); /* Nincs üveg-panel: a fejléc közvetlenül a hero-képen ül. A behúzás ugyanaz marad (gutter + pad), így a logó egy vonalban áll a hero szövegével. */ margin: var(--gutter) var(--gutter) 0; padding: 0.55rem var(--pad); } .nav__logo { display: block; flex: 0 0 auto; } /* A soros szólogó legkisebb megengedett magassága 20 px (brand/OLVASSEL.md). */ .nav__logo img { display: block; height: 20px; width: auto; } /* A szólogó világos módban megfordul — ugyanaz a művelet és ugyanaz az ok, mint a partnerek logófalánál. A zyma-mlue-sor-feher.svg egyetlen ``, tiszta `fill="#FFFFFF"`-fel; az `invert(1)` tehát pontosan #000000-t csinál belőle, vagyis PONTOSAN a brand/zyma-mlue-sor.svg-t, az arculat saját sötét változatát. Nem közelítés: ugyanaz a geometria, ugyanaz a szín, amit az arculat világos alapra előír. Kontraszt a tört fehéren 20,4:1. Ezért nem szállítunk második képfájlt. A szólogót a tools/gen-wordmark.mjs generálja, és két külön példány a lapon azzal járna, hogy egy újragenerálás után az egyik frissül, a másik csendben elavul — a logó pedig az a pont, ahol ezt senki nem venné észre, mert mindkettő „jól néz ki". Egy forrás, egy művelet. */ :root[data-tema="vilagos"] .nav__logo img { filter: invert(1); } /* JELENLEG NINCS A MARKUPBAN. A négy készülő szekció (Szolgáltatások, Munkáink, Rólunk, Árak) kikerült mindkét kezdőlap fejlécéből, amíg nincs mögöttük tartalom — az indoklás az index.html fejlécénél áll. Ez a szabály és az alatta lévő --keszul blokk SZÁNDÉKOSAN marad: a visszahozás így markup-kérdés, és a lenti mért kontraszt-indoklás nem vész el a git-történetben. */ .nav__links { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem); } .nav__link { color: var(--ink-dim); font-size: 0.92rem; font-weight: 500; text-decoration: none; transition: color 0.18s ease; } .nav__link:hover { color: var(--ink); } /* Készülő szekció a fejlécben. A lap fejlesztés alatt van, tehát a menü nem navigál sehova — de attól még megmutatja, mi épül. A megkülönböztetés HÁRMAS, és egyik lába sem elég önmagában: • halványabb tónus (a szemnek), • nincs mutató-váltás és nincs hover-válasz (az egérnek), • „(hamarosan)" utótag a .csak-olvasonak osztállyal (a felolvasónak). Csak a szín nem lenne elég: a WCAG 1.4.1 szerint az információt nem hordozhatja egyedül a szín, és aki nem látja a tónuskülönbséget, annak ugyanúgy tudnia kell, hogy ez a tétel még nem elérhető. A TÓNUS NEM --ink-faint, hanem saját, mért érték. A halvány token ma azért nincs egyetlen látható szövegen sem, mert 4,5:1 alatt marad a hero fölött (lásd a definíciójánál a figyelmeztetést). A 0,58-as alfa glif-maszkos méréssel (csak a jól fedett képpontok, deviceScaleFactor 2): 1440 px Szolgáltatások 10,24 Munkáink 9,23 Rólunk 8,09 Árak 5,26 1024 px Szolgáltatások 10,97 Munkáink 10,60 Rólunk 9,71 Árak 8,30 A legrosszabb eset tehát 5,26:1 az „Árak"-on 1440 px-en, mert az áll a legvilágosabb fotórész alatt. A 4,5:1 fölött van, de ez a legszűkebb tartalék a lapon: ha a hero fotója cserélődik, EZT kell először újramérni. A :hover FELÜLÍRÁSA NEM ELHAGYHATÓ, és ez volt az első változat hibája. A .nav__link:hover specifitása (0,2,0) veri a .nav__link--keszul-ét (0,1,0), tehát a készülő tétel mérve 0,58-ról 1,0-ra gyulladt ki az egér alatt, fényesebbre, mint amilyen egy ÉLŐ link nyugalomban (0,72). Vagyis pont az hívott kattintásra, ami nem kattintható. A tónus-tartás ezért ugyanolyan fontos, mint maga a halványabb tónus. */ .nav__link--keszul { color: rgba(var(--ink-rgb), 0.58); cursor: default; } /* ÉS TÉNYLEG EZ VOLT AZ ELSŐ, AMIT ÚJRA KELLETT MÉRNI. A fenti bekezdés azt írja, hogy ez a lap legszűkebb tartaléka, és hogy a hero hátterének változásakor ezzel kell kezdeni — a világos mód pedig pontosan ezt csinálja a háttérrel. Ugyanaz a 0,58 világos oldalon 4,43:1-et adott (mérve hét nézetszélességen, 4,43 és 4,48 között), vagyis hajszállal a WCAG 2.2 AA 1.4.3 küszöbe ALATT. Nem a fátyol hibája: a mért háttér ott már rgb(237, 241, 244), tehát gyakorlatilag a tiszta lapszín — az alfa kevés. A 0,62 nem kerekítés, hanem visszamérés: az az érték, amelyik a SÖTÉT mód mért 5,05:1-ét reprodukálja a világos lapon (5,06:1). A két téma így nem „mindkettő átmegy", hanem ugyanolyan olvasható. És megmarad, amiért ez a token egyáltalán létezik: 0,62 továbbra is jóval halkabb az élő linkek 0,72-es --ink-dim-jénél (5,06 a 7,35-höz), tehát a készülő tétel világos módban is halványabb marad, nem lesz belőle álruhás link. */ :root[data-tema="vilagos"] .nav__link--keszul { color: rgba(var(--ink-rgb), 0.62); } .nav__link--keszul:hover { color: rgba(var(--ink-rgb), 0.58); } .nav__actions { display: flex; align-items: center; gap: clamp(0.75rem, 1.6vw, 1.5rem); flex: 0 0 auto; } /* ---------- Nyelvválasztó ---------- Két kódot mutat egyszerre, nem legördülőt: két nyelvnél a lenyíló egy fölösleges kattintás, és elrejti azt az egyetlen információt, amiért a vezérlő létezik — hogy van magyar is. A pirula-keret azért kell, hogy a HU/EN ne olvasódjon a menü további két tételének; a fejléc többi eleme szándékosan keret nélküli. Az inaktív nyelv --ink-dim, nem --ink-faint: a halvány tónus a hero sötét sávján 3,9:1-et adna, az AA-küszöb alatt. A --ink-dim ugyanaz az érték, amin a menülinkek is ülnek — a vezérlő így nem hangosabb a menünél. */ .nav__nyelv { display: flex; align-items: center; gap: 0.15rem; padding: 0.2rem; border: 1px solid var(--line); border-radius: 999px; background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .nav__nyelv-opt { padding: 0.26rem 0.6rem; border-radius: 999px; color: var(--ink-dim); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; transition: color 0.18s ease, background-color 0.18s ease; } .nav__nyelv-opt:hover { color: var(--ink); } .nav__nyelv-opt[aria-current] { background: rgba(var(--folt-rgb), 0.1); color: var(--ink); } /* A globális fókuszgyűrű 6 px-es sarkot ad — pirulán az sarkosnak látszana. */ .nav__nyelv-opt:focus-visible { border-radius: 999px; } /* ---------- Téma-kapcsoló ---------- A fejléc jobb szélén, a nyelvválasztó mellett: mindkettő ugyanaz a fajta vezérlő — nem navigál, hanem beállít, hogyan nézzen ki ez a lap. Ezért veszi át a pirula rajzát is (1 px --line keret, --glass kitöltés, 8 px homály), csak körré zárva, mert egyetlen ikont tart, nem két feliratot. MIÉRT `hidden` A MARKUPBAN. A kapcsoló JS nélkül nem csinál semmit, egy néma gomb pedig ezen a lapon tiltott (lásd a fejléc „nem ``" indoklását az index.html-ben): a látogató megnyomja, nem történik semmi, és onnantól a lap többi állítását sem hiszi el. A `tema.js` első dolga levenni a `hidden`-t — pontosan az a minta, amivel a csevegő indítógombja is él. Ha a szkript elmarad, a vezérlő meg sem jelenik, a lap pedig a sötét alapállapotában áll, ami ép állapot, nem hiányos. A 34 px szándékosan több a WCAG 2.2 AA 2.5.8 által kért 24×24-nél: a nyelvválasztó pirulája is ekkora magas, és a kettő egymás mellett áll. */ .tema { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--ink-dim); cursor: pointer; transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease; } /* A `hidden` attribútum alapból `display: block`-ot ad, amit a fenti `grid` felülírna — a gomb tehát a szkript nélkül is látszana. Ugyanaz a csapda, mint a .chatbot__indito-nál, ugyanaz a megoldás. */ .tema[hidden] { display: none; } .tema:hover { border-color: rgba(var(--folt-rgb), 0.22); background: rgba(var(--folt-rgb), 0.1); color: var(--ink); } .tema:focus-visible { border-radius: 999px; } /* A KÉT IKON EGY CELLÁBAN ÜL, nem cserélődik. Ha a szkript írná át az SVG-t, a váltás ugrás lenne; így viszont az egyik kifordul, a másik be — a gomb maga is elvégzi kicsiben azt, amit a lap nagyban. Melyik látszik: MINDIG AZ, AMI TÖRTÉNNI FOG. Sötét módban a nap (kattints a világosért), világosban a hold. Így a rajz és a gomb neve ugyanazt mondja („Váltás világos módra"), nem kettőt. */ .tema__ikon { grid-area: 1 / 1; width: 17px; height: 17px; transition: opacity 0.26s ease, transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1); } .tema__ikon--hold { opacity: 0; transform: rotate(-65deg) scale(0.45); } :root[data-tema="vilagos"] .tema__ikon--nap { opacity: 0; transform: rotate(65deg) scale(0.45); } :root[data-tema="vilagos"] .tema__ikon--hold { opacity: 1; transform: none; } /* ---------- A téma-váltás átmenete ---------- A régi és az új állapot közé a böngésző View Transitions API-ja tesz egy pillanatképet, és az ÚJ képet egy téglalap alakú maszk nyitja ki a gomb közepéből a nézet széléig. A geometriát a tema.js számolja (a gomb középpontja és a négy nézet-sarok távolsága), ez a blokk csak a keretet adja hozzá. MIÉRT `animation: none`. A böngésző alapból ÁTTŰNÉSSEL cseréli a két pillanatképet, és a csoportra `mix-blend-mode: plus-lighter`-t tesz. Mindkettő ellenünk dolgozna: az áttűnés alatt a két téma egymásra keveredve egy szürke köztes állapoton menne át, a plus-lighter pedig ÖSSZEADNÁ a két kép fényét, vagyis a sötétből világosba váltás közepén a lap kifehéredne. Ezért mindkét pillanatkép mozdulatlan és normál keverésű: a mozgás kizárólag a maszké. A `z-index` azért kell, mert az új képnek a régi FÖLÖTT kell nyílnia. Fordítva a maszk azt vágná ki, ami már úgyis alul van, és nem történne semmi látható. */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-old(root) { z-index: 0; } ::view-transition-new(root) { z-index: 1; } /* Az összehúzott kezdőállapot CSS-ből van rögzítve, nem csak a JS-animációból. A pillanatkép elkészülte és az animáció első képkockája között van egy rés, és ott a Firefox az ÚJ képet egy villanásnyira maszk nélkül festi ki — vagyis a téma átvált, aztán visszaugrik a nyíló téglalapba. A `--tema-vago-kezdet` ezt a rést tömi be: a maszk már azelőtt összehúzva áll, hogy az animáció elindulna. Az attribútumot és a változót a tema.js teszi ki és veszi le. */ :root[data-tema-valtas]::view-transition-new(root) { clip-path: var(--tema-vago-kezdet); } /* ---------- Hero tartalom ---------- */ /* Ez a doboz a `
` maga (index.html · en/index.html), nem egy köré húzott burkoló: a `flex: 1` így ugyanazon az elemen marad, ami eddig is a hero flex-oszlopának magasságát kitöltötte. Az elemcsere ezért látványban nulla: a stíluslapban NÉGY elem-szelektor van összesen — `*`, `html, body`, `body` és `img` —, és egyik sem célozza a main, a section, a div, a p vagy a h1-h6 elemeket. (A `*` reset a margót és a paddingot amúgy is mindenkiről leveszi, ezért nem hozott magával alapértelmezett behúzást sem a main, sem a h2.) A következő elemcserénél ezt a négyet kell újra végignézni, nem elhinni, hogy nincs elem-szelektor. */ .hero__inner { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1.6rem; max-width: 42rem; padding: 3.5rem calc(var(--gutter) + var(--pad)); } /* Az ugrólink célja `tabindex="-1"`-es — a fókuszgyűrű egy fél képernyős szövegoszlop körül nem információ, hanem zaj. A fókusz maga megvan (a következő Tab innen folytatja), csak nem rajzoljuk. Ikertestvére a kapcsolati lapon a `.kapcs:focus`; ha az egyik változik, a másik is. */ .hero__inner:focus { outline: none; } /* A jelvénynek nincs saját kerete: a keretet és a hátteret a ::before rajzolja, amire jobbra kifutó maszk kerül — így a blokk jobb oldala beleolvad a képbe, miközben a felirat végig teljes erővel olvasható marad. A jobb oldali padding nagyobb, hogy legyen mibe elhalványulnia a szöveg vége után is. */ .eyebrow { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 0.55rem; align-self: flex-start; padding: 0.5rem 2.3rem 0.5rem 0.8rem; color: var(--feny-szoveg); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .eyebrow::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 1px solid rgba(var(--feny), 0.4); border-radius: 999px; background: linear-gradient( 90deg, rgba(var(--feny), 0.16) 0%, rgba(var(--feny), 0.05) 100% ); -webkit-mask-image: linear-gradient( 90deg, #000 38%, rgba(0, 0, 0, 0.45) 74%, transparent 100% ); mask-image: linear-gradient( 90deg, #000 38%, rgba(0, 0, 0, 0.45) 74%, transparent 100% ); } /* Vonalas ikon, ezért nagyobb a szövegnél: 18 px alatt az agy tekervényei összeolvadnak. */ .eyebrow__icon { flex: 0 0 auto; width: 18px; height: 18px; color: rgb(var(--feny)); } /* A 600-as súly szándékos, nem óvatosság. Két oka van. A logó 900-on él, és a címsornak alatta kell maradnia, hogy a szólogó legyen a lap legnehezebb eleme. A másik: harminc AI/tech márka arculatából huszonkilenc 700 alatt tartja a display-súlyt, a fele 400-on vagy az alatt — a 800 hangosabb volt az egész szektornál. A sorköz 1,06 — ez mérés, nem ízlés. A magyar nagybetűs ékezet (Á Ő Ű) a cap-height fölé nyúlik, és a Familjen Groteskben 1,029 alatt fizikailag összeér a fenti sor leszálló szárával (gy, j, p); a +0,03 optikai ráhagyás. Montserratnál ez a küszöb 1,14 lett volna — a régi 1,04 csak azért nem ütközött, mert a mostani szöveg első két sorában véletlenül nincs egyetlen leszálló szár sem. A copy viszont szabadon változhat. */ .hero__title { font-family: var(--cim); font-size: clamp(2.35rem, 5.2vw, 4.4rem); font-weight: 600; line-height: 1.06; letter-spacing: -0.028em; } /* A három sor kézzel van tördelve; ha valamelyik mégsem fér ki (nagyon nagy betűméret, más nyelv), a balance legalább szimmetrikusan töri meg. */ .hero__line { display: block; text-wrap: balance; } /* A kiemelt sor TÖMÖR márkakék, nem gradiens. Volt itt egy `linear-gradient(92deg, var(--brand) 8%, #8bdeff 92%)` + `background-clip: text`, és három dolgot rontott el egyszerre: 1. A szöveg színe a sor VÍZSZINTES helyétől függött, nem a jelentésétől — a copy hosszának változása némán átszínezte a mondatot. 2. A festék forrása egy kép volt, nem egy szín, tehát a `color` `transparent` maradt: ahol a `background-clip: text` nem megy át (nyomtatás, kényszerített színmód, régi motor), ott a sor ELTŰNIK. Emiatt kellett alá egy `@supports not (…)` tartalék `#4fc9ff`-fel — vagyis a lap harmadik, sehol máshol nem használt kékje. 3. A gradiens jobb vége (#8bdeff) nem a márkakék: a lap három szín helyett ötöt vitt, ebből kettőt csak ezen az egy soron. A csere nem visz kontrasztot. Mérve, KIZÁRÓLAG a glifek alatti valódi háttérképpontokra (a sor nem tömör alapon ül, hanem a lesötétített fotón): 1440 px-en 8,50:1 a medián és 8,20:1 a rosszabbik 5%, 1024-en 8,48 / 8,14, 390 px-en 5,33 / 4,81, 320-on 5,06 / 4,90. A legrosszabb eset tehát 4,8:1 — a nagy szövegre előírt 3:1 bőven fölött, sőt a normál szövegre kért 4,5:1-en is túl. (A gradiens világos vége ennél magasabbat adott, de csak a sor jobb szélén; a bal vége ugyanez a 8,2 volt.) A tartalék-blokk a gradienssel együtt ment — tömör `color`-t minden motor kirajzol, nincs mit kivédeni. A padding/margó pár MARAD. Ami a sort levágta, az nem a gradiens volt, hanem a FESTŐDOBOZ mérete: a sor doboza a line-height-ból (1,06em) adódik, ami kevesebb, mint amennyit a betű ténylegesen elfoglal. Chromiumban mérve felül 4 px, alul 2 px hiányzott — az „AI erejével" sorban a j farka csonkult, és bármilyen Ő Ű Á a fejéből veszített volna. A padding megnöveli ezt a dobozt a teljes betűmagasságra, az azonos méretű negatív margó pedig visszaveszi a helyfoglalást: a nettó elrendezés-hatás NULLA, a sorköz nem változik. Ezért nem is kellett hozzányúlni — a védelem ott marad, ahová bármilyen dobozra festő effekt (háttér, keret, maszk, aláhúzás) újra beleütközne. */ .hero__line--accent { padding-block: 0.16em; margin-block: -0.16em; color: var(--brand-szoveg); } /* A 31rem-es oszlop Montserrattal 61,8 karaktert adott soronként — a 65–75-ös ideális sáv alatt. Instrument Sansszal ugyanez 67,7, tehát a szélesség most már pontosan jó, nem kell hozzányúlni. A break-word biztosíték: a magyar kettőzött kétjegyű mássalhangzókat (asszony, hosszú, könnyű) a böngésző elvi okból egyáltalán nem töri el — helyesen, mert a szabály betűbeszúrást kívánna —, így viszont szűk oszlopban kilógnának. Az elválasztás csak mobilon kapcsol be, lásd a média-lekérdezést. */ .hero__lead { max-width: 31rem; color: var(--ink-dim); font-size: clamp(1rem, 1.1vw, 1.1rem); font-weight: 400; line-height: 1.65; overflow-wrap: break-word; } .hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 0.4rem; } /* ---------- Gombok ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.95rem 1.5rem; border: 1px solid transparent; border-radius: 12px; font-family: inherit; font-size: 0.95rem; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 0.16s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .btn svg { width: 17px; height: 17px; transition: transform 0.16s ease; } .btn:hover svg { transform: translateX(3px); } .btn--sm { padding: 0.6rem 1.1rem; font-size: 0.88rem; } /* Sötét betű a márkakéken — ez a kombináció bőven WCAG AA fölött van, a fehér-a-kéken nem lenne az. */ .btn--primary { background: linear-gradient(135deg, #3fcbff 0%, var(--brand) 55%, var(--brand-deep) 100%); color: var(--brand-tinta); box-shadow: 0 14px 34px rgba(var(--brand-rgb), 0.26); } .btn--primary:hover { transform: translateY(-1px); box-shadow: 0 18px 40px rgba(var(--brand-rgb), 0.36); } .btn--ghost { border-color: rgba(var(--folt-rgb), 0.2); background: rgba(var(--folt-rgb), 0.06); color: var(--ink); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .btn--ghost:hover { border-color: rgba(var(--folt-rgb), 0.38); background: rgba(var(--folt-rgb), 0.11); } /* ---------- Partner-sor ---------- */ /* A logófal kitör a hero 42rem-es szövegoszlopából: nyolc partner a szövegsáv szélességébe zsúfolva hangsúlytalan marad, pedig ez a lap egyetlen valódi bizonyítéka. A blokk a bal élhez van horgonyozva (a .hero__inner paddingja adja), és jobbra ugyanakkora margót hagyva fut ki — így szűk nézetben sem lóg a képernyőn túl, nem a .hero overflow-jára van bízva a levágás. A szövegoszlop marad 42rem: a sorhossz olvashatósága nem ennek a blokknak a dolga. */ .proof { position: relative; isolation: isolate; margin-top: clamp(1.5rem, 5vh, 3.5rem); width: min(58rem, calc(100vw - 2 * (var(--gutter) + var(--pad)))); } /* A szélesebb fal jobb vége már a kép világos részére, a sziklák és a köd elé ér — ott a 0,72-es fehér logó elveszne. Ez a réteg ad alá talajt: NEM doboz, hanem lágy folt, amely minden irányban a semmibe fut (radiális átmenet, kemény él nélkül) — a logófal doboz nélküli elve így sértetlen marad. Az `isolation: isolate` kell hozzá, különben a z-index: -1 a hero háttere alá csúszna és eltűnne (ugyanaz a fogás, mint a .csatorna--elso fényénél). */ .proof::before { content: ""; position: absolute; z-index: -1; inset: -4.5rem -8rem -4.5rem calc(-1 * (var(--gutter) + var(--pad))); /* A sugarak egymáshoz vannak igazítva, nem szemre: a függőleges sugár (64%) azért kisebb a doboz felénél, hogy az átmenet a 72%-os stopnál MÁR a dobozon belül nullába érjen. Nagyobb sugárnál a doboz széle vágná el egy megmaradt ~0,3-as alfánál, és a hero közepén halvány vízszintes él jelenne meg. Jobbra ugyanez: 13% + 72% < 100%. Balra a doboz a képernyő széléig ér, ott nincs mit elvágni. Az arányok százalékosak, tehát a szabály töréspont-független — a telefonos, egysoros falra is áll. */ background: radial-gradient( 112% 64% at 13% 50%, rgba(var(--bg-rgb), 0.74) 0%, rgba(var(--bg-rgb), 0.36) 42%, rgba(var(--bg-rgb), 0) 72% ); pointer-events: none; } /* --ink-dim, NEM --ink-faint. Ez a harmadik hely, ahol ugyanaz a mérés dől el ugyanúgy (lásd a .nav__nyelv-et és a .chatbot__allapot-ot): a halvány tónus 11,52 px-en a hero sötétített fotóján 4,11:1-et ad, a WCAG 2.2 AA 1.4.3 kért 4,5:1 ALATT — és ez nem határeset, hanem a teljesen fedett glif-képpontok MINDEGYIKE ott van (mérve 4,10 és 4,18 között, magyarul és angolul is). A --ink-dim ugyanezen a háttéren 9,7:1-et ad. Aki halkítani akarja a feliratot, azt a betűsúllyal vagy a mérettel tegye, ne az áttetszőséggel. A NAGYBETŰSÍTÉS KIZÁRÓLAG CSS. A forrásban mondatkezdő nagybetűvel áll („Már bíznak bennünk"), és így is kell maradnia: a Chrome a hozzáférhető nevet a RENDERELT szövegből számolja, tehát a felolvasó címsor-listájában már most is „MÁR BÍZNAK BENNÜNK" szerepel. Ha a HTML-be írnánk nagybetűvel, ugyanez maradna, viszont a szöveg forrása is olvashatatlanná válna. */ .proof__label { color: var(--ink-dim); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; } /* A fal két lapot tart egymáson: mindkét lap ugyanabba a rácscellába kerül. Így a doboz magasságát a magasabbik lap adja — abszolút pozicionálással ez fix magasságot kívánna, ami szűk nézetben, tördelt sornál elcsúszna. Egérrel a fal fölött a lapozás megáll, hogy a kiszemelt logóra rá lehessen kattintani. */ .proof__fal { display: grid; margin-top: 1.1rem; } /* A :focus-within NEM stílus-kozmetika, hanem hibajavítás. A rejtett lap `visibility: hidden`-t kap, és amikor a FÓKUSZÁLT linket tartó lap fordul rejtettre, a fókusz visszaesik a document.body-ra: a billentyűzetes látogató elveszíti a helyét a lapon, a következő Tab a lap elejéről indul újra. Mérve (mozgással, nem `reduce` alatt): az első partnerlinkre állva a document.activeElement 4-5 másodperc múlva BODY lett, és az is maradt. Ez WCAG 2.2 A 2.4.3 (Fókusz-sorrend). A hover-szünet ezen nem segített, mert Tabbal nincs hover. Ez egyben megadja a 2.2.2 (Szünet, leállítás, elrejtés) által kért szünet-mechanizmust is a billentyűzetnek. Érintésre viszont továbbra sincs: ott sem hover, sem fókusz nem áll elő pusztán attól, hogy a látogató nézi a falat. A tiszta megoldás a lapozás elhagyása lenne — mind a nyolc logó egyszerre, két sorban; az elrendezés készen áll, a lenti `prefers-reduced- motion` ág pontosan ezt csinálja. Az a fal magasságát növeli, tehát tulajdonosi döntés. */ .proof__fal:hover .proof__logos, .proof__fal:focus-within .proof__logos { animation-play-state: paused; } /* Logófal: háttér nélkül, egy sorban, azonos optikai magassággal és a tagok között függőleges elválasztóval. Az elválasztó a második elemtől kezdve minden elem elé kerül, azonos margóval mindkét oldalon — így a térköz végig egyforma. A `grid-area: 1 / 1` teszi a két lapot egymásra; mindkettő kifeszül a cellában, ezért az eltérő magasságú logók lapról lapra ugyanazon a középvonalon maradnak. */ .proof__logos { grid-area: 1 / 1; justify-self: start; display: flex; flex-wrap: wrap; align-items: center; list-style: none; animation: proof-lapozas 16s linear infinite both; } /* A második lap fél ciklussal késik — így nyolc másodpercig az egyik, nyolcig a másik áll a falon. */ .proof__logos + .proof__logos { animation-delay: 8s; } /* 16 s ciklus, lapváltás a felénél; a 2,5% (0,4 s) az átúszás. A rejtett lap `visibility: hidden`, hogy a linkjei kiessenek a tab-sorrendből. */ @keyframes proof-lapozas { 0% { opacity: 0; visibility: hidden; } 2.5%, 47.5% { opacity: 1; visibility: visible; } 50%, 100% { opacity: 0; visibility: hidden; } } .proof__logos li { display: flex; align-items: center; } .proof__logos li + li::before { content: ""; flex: 0 0 auto; width: 1px; height: 34px; margin: 0 clamp(1.1rem, 4.9vw, 4.6rem); background: rgba(var(--folt-rgb), 0.18); } .proof__logos a { display: flex; align-items: center; } /* Magasság- és szélesség-korlát együtt: a széles szólogók a szélességbe, a tömbszerűek a magasságba ütköznek. A közös magasság önmagában NEM ad azonos optikai súlyt: a nyolc partnerből négy szólogó (3–5,4 : 1), négy pedig tömb vagy álló jel. Egyetlen 38 px-es magasságkorláton a szólogó 132 px-es sávot fest, a tömb 37 px-es foltot, az álló Origo 15 px-es csíkot — az utóbbi kettő így nem partner a falon, hanem szennyeződés. Ezért három osztály van, alak szerint: minél zömökebb a jel, annál magasabb dobozt kap, hogy a BEFESTETT TERÜLETE közelítsen a szólogók területéhez. */ .proof__logos img { display: block; width: auto; height: auto; max-height: 34px; max-width: 152px; object-fit: contain; opacity: 0.72; transition: opacity 0.2s ease; } /* VILÁGOS MÓDBAN A LOGÓFAL MEGFORDUL. A Partnerek/mono/ nem „világos változat", hanem EGYSZÍNŰ változat: mind a hét PNG minden látható képpontja pontosan 255,255,255 (lemérve), a rajzot kizárólag az alfa-csatorna hordozza; a herold.svg egyetlen kitöltése #ebe9e9. Tört fehér lapon ez nyolc üres hely lett volna a lap egyetlen bizonyítéka helyett. Az `invert(1)` ezen a készleten nem trükk, hanem a pontos művelet: az alfát nem bántja, az egyetlen RGB-értéket meg átviszi a másik végpontba (255 → 0, #ebe9e9 → #141414). Új fájl nem kell hozzá, és nem is lenne jobb: egy külön sötét készlet ugyanezt a nyolc alfa-maszkot tárolná még egyszer, azzal a kockázattal, hogy a kettő idővel szétcsúszik. A 0,72-es opacitás MARAD, és így pont a tükörképe önmagának: fehér 0,72-en a sötét lapon és fekete 0,72-en a világoson ugyanaz a szürke súly. */ :root[data-tema="vilagos"] .proof__logos img { filter: invert(1); } /* Tömbszerű jelek (Rambo 1,3:1, Bronto és Rábabrill ~1:1): a szólogó-magasság másfélszerese — ettől lesz belőlük is 50–70 px széles folt. */ .proof__logos img.proof__logo--tomb { max-height: 52px; } /* Az Origo jele álló téglalap (kb. 1:3,7): még ezen a magasságon is csak 17 px széles. Ennél magasabb doboz nem segítene — a sor magasságát ő adná, és a fal rendeződne köré. A vékony vonalrajza így is könnyebb marad a tömör szólogóknál; ez a jel alakjából következik, nem hiba. */ .proof__logos img.proof__logo--allo { max-height: 64px; } .proof__logos li:hover img { opacity: 1; } /* ========================================================================= KAPCSOLAT (kapcsolat.html · en/contact.html) A lap egyetlen mondanivalója: „írj ide". Nincs űrlap, tehát a lap nem gyűjt, hanem irányít — és pontosan egy elsődleges csatornája van. A SZÍNSZEREPEK MEG VANNAK CSERÉLVE a heróhoz képest. Ott a márkakék hordoz (címsor, gomb, áramkör), és a meleg találkozás-fény díszít (eyebrow). Itt fordítva: a meleg fény izzik az e-mail-cím mögül, a kék pedig kizárólag az interakcióé (hover, fókusz, a másolás visszajelzése). Ugyanaz a két szín, cserélt szerepben — ez köti össze a két lapot anélkül, hogy a hero megismétlése lenne. A hero fotós jelenete NEM jön át: 537 kB, és az a lap sajátja. Ami átjön, az az áramkör-mintázat (már generált vektor, jó eséllyel gyorsítótárból) és a fény — halkabban. ========================================================================= */ .lap { position: relative; display: flex; flex-direction: column; /* Felülírja a globális `html, body { height: 100% }`-et: a lap nőhet a tartalommal, de sosem kevesebb egy képernyőnél. */ height: auto; min-height: 100vh; min-height: 100dvh; } /* ---------- Háttér-rétegek ---------- */ /* `fixed`, nem `absolute`: szűk nézetben a tartalom túlnyúlik a képernyőn, és az abszolút réteg elgörögne a szöveg alól — a lap alja tiszta feketévé válna. */ .lap__hatter { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } /* Ugyanaz a fájl, mint a heróban, feleakkora erővel. A rajz fényforrása a jobb szélen túl van (a generátor 2611 px-nél, a 2560-as vászon mellett), tehát jobbról balra halkul el magától; a maszk ezt még korábban levágja, hogy a címsor és az e-mail-cím teljesen tiszta mezőn üljön. */ .lap__halozat { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; -webkit-mask-image: linear-gradient(90deg, transparent 28%, #000 76%); mask-image: linear-gradient(90deg, transparent 28%, #000 76%); } /* VILÁGOS MÓDBAN A MINTA MAGA SÖTÉTEDIK, nem az opacitása nő. Az áramkör-rajz a lap EGYETLEN olyan képi eleme, amelyik a téma felületén ül, nem fotón — a heróban ugyanez a fájl a háttérképre kerül, ami mindkét témában azonos, ezért ott nincs dolgunk vele. Itt viszont a rajz világoskék (`#16B8F3` és `#7FDBFF` gradiensek), tíz csomópontja pedig tiszta fehér: tört fehér lapon a fehér csomópontok nyom nélkül eltűnnek, a világosabb kék pedig majdnem. MÉRVE (a minta járuléka CIE L*-ban, a rajz teljes mezőjén: kép a lapról, majd ugyanaz a réteg elrejtve, és a kettő különbsége a rajz maga): sötét mód átlag ΔL* 1,44 p95 5,35 fedés 12,6% világos, változatlanul 0,75 2,27 10,3% Vagyis a minta feleakkora súllyal olvasódott, a csúcsértéke pedig negyedannyi volt. Ez a szűrő a MÉRT egyezésre van beállítva: átlag ΔL* 1,44 — ugyanaz a szám, mint sötétben. A p95 4,67-en marad az 5,35 helyett, és ez nem hangolás kérdése: a sötét mód csúcsait a FEHÉR csomópontok adják, amelyek majdnem-fekete alapon 19 L*-ot ugranak. Világos lapon ilyen csúcs fizikailag nem állítható elő anélkül, hogy a csomópontokból kemény sötét pöttyök lennének — a rajz halk háttérből grafikai elemmé válna. MIÉRT A SZŰRŐ ÉS NEM AZ OPACITÁS. Az opacitás emelése a világoskéket is, a fehéret is csak közelebb hozza a laphoz, a fehéret pedig SEMMIVEL — ami fehér, az tört fehéren emelt opacitáson is láthatatlan marad. A `brightness` viszont minden csatornát leszoroz, tehát a fehér csomópontokból középszürke lesz: a fénypontból árnyékpont, ami világos felületen pontosan a helyes megfelelője. A `saturate` azt a telítettséget adja vissza, amit a leszorzás elvesz. És ezért marad az `opacity` érintetlenül: az 560 px-es szabály szándékosan 0,34-re veszi, mert telefonon a rajz a szöveg mögé kerül. Ha ez a szelektor opacitást írna, a nagyobb fajsúlya (0,2,1 a 0,1,0 ellen) felülírná azt a döntést — a minta pont ott erősödne fel, ahol halkulnia kell. */ :root[data-tema="vilagos"] .lap__halozat { filter: brightness(0.44) saturate(1.4); } /* Két sötétítés egy elemben: vízszintesen a szöveges oldalt tömöríti, függőlegesen a fejléc mögé és a lap aljára tesz tónust — ugyanaz a logika, mint a hero scrim + vignetta párosánál. */ .lap__scrim { position: absolute; inset: 0; background: linear-gradient( 102deg, rgba(var(--bg-rgb), 0.97) 0%, rgba(var(--bg-rgb), 0.9) 34%, rgba(var(--bg-rgb), 0.66) 68%, rgba(var(--bg-rgb), 0.58) 100% ), linear-gradient( 180deg, rgba(var(--bg-rgb), 0.5) 0%, rgba(var(--bg-rgb), 0) 24%, rgba(var(--bg-rgb), 0) 60%, rgba(var(--bg-rgb), 0.72) 100% ); } /* Nagy, kis kontrasztú színátmenetek 8 bites kijelzőn sávosodnak (látható csíkok a fény peremén). Egy csempézett zajréteg ezt megtöri. A minta beágyazott SVG, tehát nem kér külön letöltést. */ .lap__zaj { position: absolute; inset: 0; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23z)'/%3E%3C/svg%3E"); } /* ---------- Váz ---------- */ .kapcs { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; padding: clamp(2rem, 6vh, 4.5rem) calc(var(--gutter) + var(--pad)); } /* A fény szándékosan túllóg a szövegoszlopon (ettől fénylik, nem foltlik) — de a lap jobb szélén ez mérve 51 px-es vízszintes görgetést okozott 768 px-en. A `clip` levágja, ÉS — a `hidden`-nel ellentétben — nem nyit görgetőkonténert, tehát a függőleges folyás és a fókuszgyűrűk érintetlenek maradnak. A hero ugyanezt a `.hero { overflow: hidden }`-nel oldja meg, ott az egész jelenet kivágandó; itt csak a vízszintes tengely az. */ .kapcs { overflow-x: clip; } /* Az ugrólink célja `tabindex="-1"`-es — a fókuszgyűrű egy egész képernyős dobozon nem információ, hanem zaj. A fókusz maga megvan, csak nem rajzoljuk. */ .kapcs:focus { outline: none; } /* Balra zárt, nem középre: a hero szövegoszlopa is a logó bal élénél indul (lásd a --gutter kommentjét), és ez a lap ugyanabból a vonalból dolgozik. Az arány 1,55 : 1 — az e-mail-cím kap helyet, a jobb hasáb szűk marad, hogy a benne lévő szöveg mértéke 45–70 karakter között maradjon. */ .kapcs__racs { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; gap: clamp(2rem, 5vw, 5.5rem); width: 100%; max-width: 76rem; } /* ---------- Bal hasáb: a megszólítás ---------- */ /* A sorköz 1,08, nem a hero 1,06-ja: ott a cím kézzel van tördelve, itt a `balance` dönti el, hol törik. A „gy" és a „ty" leszálló szára bármelyik sor végére kerülhet egy ékezetes betű fölé, ezért nagyobb a ráhagyás. */ .kapcs__cim { max-width: 16ch; font-family: var(--cim); font-size: clamp(2.05rem, 4.6vw, 3.8rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.028em; text-wrap: balance; } .kapcs__lead { max-width: 34rem; margin-top: 1.15rem; color: var(--ink-dim); font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.65; text-wrap: pretty; overflow-wrap: break-word; } /* ---------- Csatornák ---------- Nem hármas kártyarács (az a sablon-reflex), hanem rangsorolt lista: a hierarchiát a méret, a súly és a szín adja. Az e-mail-cím a lap legnagyobb eleme, a telefonszám nagyjából feleakkora, a LinkedIn halk egysoros. */ .csatornak { display: flex; flex-direction: column; gap: clamp(0.6rem, 1.6vh, 1.1rem); margin-top: clamp(1.8rem, 4.5vh, 3rem); list-style: none; } /* `isolation: isolate` nélkül a z-index: -1-es fény a lap háttere ALÁ kerülne, és eltűnne. Így viszont saját rétegcsoport nyílik: a fény a listaelem tartalma mögé, de a lap háttere elé fest. */ .csatorna--elso { position: relative; isolation: isolate; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.55rem 1.1rem; } /* A találkozás fénye, a lap saját változatában: itt nem két ujjhegy között gyullad ki, hanem az e-mail-cím mögött — ott, ahová a látogató üzenete megy. A `filter: blur` a színátmenet peremét is elmossa, így a folt nem ellipszisnek látszik, hanem fénynek. */ .csatorna--elso::before { content: ""; position: absolute; left: -16%; top: 50%; z-index: -1; width: 132%; aspect-ratio: 5 / 3; background: radial-gradient( 50% 50% at 33% 50%, rgba(var(--feny), 0.26) 0%, rgba(var(--feny), 0.1) 40%, transparent 72% ), radial-gradient(34% 40% at 29% 50%, rgba(var(--feny), 0.2) 0%, transparent 70%); filter: blur(20px); transform: translateY(-50%); animation: feny-lelegzet 11s ease-in-out infinite alternate; pointer-events: none; } @keyframes feny-lelegzet { from { opacity: 0.68; transform: translateY(-50%) scale(0.95); } to { opacity: 1; transform: translateY(-50%) scale(1.05); } } /* `inline-flex` + `min-height`: érintésre mindkét cím eléri a 44 px-et anélkül, hogy a betűméret vagy a sorköz torzulna. Emiatt nem `background-size`-zal rajzolt aláhúzás van (az a 44 px-es doboz aljára esne, messze a szövegtől), hanem valódi `text-decoration` átlátszó színnel — az a szöveg alatt marad, bárhogy nő a doboz. */ .csatorna__ertek { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-family: var(--cim); font-size: clamp(1.5rem, 3.4vw, 2.9rem); font-weight: 600; line-height: 1.14; letter-spacing: -0.022em; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.16em; overflow-wrap: break-word; transition: color 0.18s ease, text-decoration-color 0.22s ease; } .csatorna__ertek:hover { color: var(--brand-szoveg); text-decoration-color: var(--brand-szoveg); } /* Táblázatos számjegyszélesség: a telefonszám így nem „ugrál" optikailag. */ .csatorna__ertek--tel { color: var(--ink-dim); font-size: clamp(1.15rem, 1.9vw, 1.6rem); letter-spacing: -0.008em; font-variant-numeric: tabular-nums; } .csatorna--halk { margin-top: 0.15rem; } .csatorna__link { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; color: var(--ink-dim); font-size: 0.98rem; font-weight: 500; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.22em; transition: color 0.18s ease, text-decoration-color 0.22s ease; } .csatorna__link:hover { color: var(--ink); text-decoration-color: rgba(var(--folt-rgb), 0.4); } .csatorna__nyil { flex: 0 0 auto; width: 15px; height: 15px; transition: transform 0.16s ease; } .csatorna__link:hover .csatorna__nyil { transform: translate(2px, -2px); } /* ---------- Másoló gomb ---------- A markupban `hidden`; a kapcsolat.js csak akkor veszi le, ha a vágólap-API tényleg elérhető (biztonságos kontextus). Halott vezérlő nem marad a lapon. */ .masol { display: inline-flex; align-items: center; gap: 0.42rem; min-height: 44px; padding: 0 0.9rem; border: 1px solid rgba(var(--folt-rgb), 0.18); border-radius: 999px; background: var(--glass); color: var(--ink-dim); font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease; } .masol:hover { border-color: rgba(var(--folt-rgb), 0.34); background: rgba(var(--folt-rgb), 0.1); color: var(--ink); } /* A sikeres másolás az egyetlen hely a lapon, ahol a márkakék felületet kap — az interakció visszajelzése, nem dísz. */ .masol[data-allapot="kesz"] { border-color: rgba(var(--brand-rgb), 0.5); background: rgba(var(--brand-rgb), 0.12); color: var(--brand-szoveg); } /* A hiba a fény melegét viszi, nem pirosat: ez nem baleset, hanem „csináld kézzel". A --feny-szoveg a sötét alapon 12,9:1. */ .masol[data-allapot="hiba"] { border-color: rgba(var(--feny), 0.5); background: rgba(var(--feny), 0.12); color: var(--feny-szoveg); } /* A három felirat és a két ikon egymásra van tornyozva ugyanabba a rácscellába: a gomb szélességét így a leghosszabb felirat adja, és az állapotváltás NEM méretezi át — nem lök a soron, nem ugrik az elrendezés. */ .masol__ikonok, .masol__feliratok { display: grid; } .masol__ikonok > *, .masol__feliratok > * { grid-area: 1 / 1; justify-self: center; transition: opacity 0.16s ease; } .masol__ikon { width: 16px; height: 16px; } /* A feliratok közül alapból csak az „alap" látszik. Az IKON viszont csak a sikernél cserélődik pipára: hibánál a másolás-ikon marad, különben a gomb bal oldalán egy 16 px-es üres folt tátongana. */ .masol__ikon--kesz, .masol__felirat--kesz, .masol__felirat--hiba, .masol[data-allapot] .masol__felirat--alap, .masol[data-allapot="kesz"] .masol__ikon--alap { opacity: 0; } .masol[data-allapot="kesz"] .masol__felirat--kesz, .masol[data-allapot="kesz"] .masol__ikon--kesz, .masol[data-allapot="hiba"] .masol__felirat--hiba { opacity: 1; } /* Csak képernyőolvasónak. A gomb felirata is átvált, de a felirat cseréje önmagában nem mindenhol hangzik el. */ .csak-olvasonak { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---------- Jobb hasáb: ki válaszol ---------- */ .kapcs__mellek { display: flex; flex-direction: column; gap: clamp(1.3rem, 3vh, 2rem); max-width: 30rem; padding-top: clamp(0.4rem, 3vh, 2.4rem); } .valaszol { display: flex; align-items: center; gap: 0.95rem; } /* 192 px-es forrásból 62 px: a 3× a retina-kijelzőt is fedezi. A 95 kB-os avatar.png helyett 12 kB-os JPEG — a képen nincs átlátszóság, tehát a PNG csak fizetség volt semmiért. */ .valaszol__kep { flex: 0 0 auto; width: 62px; height: 62px; border: 1px solid rgba(var(--folt-rgb), 0.16); border-radius: 50%; object-fit: cover; } .valaszol__nev { font-family: var(--cim); font-size: 1.06rem; font-weight: 600; letter-spacing: -0.012em; } .valaszol__szerep { margin-top: 0.14rem; color: var(--ink-dim); font-size: 0.9rem; } .valaszol__mondat { color: var(--ink-dim); font-size: 0.98rem; line-height: 1.62; text-wrap: pretty; } /* Felső vonal, nem oldalsáv: a hasáb tetején elválaszt, nem díszít. */ .mitirj { border-top: 1px solid var(--line); padding-top: clamp(1.1rem, 2.6vh, 1.7rem); } .mitirj__cim { font-family: var(--cim); font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; } .mitirj__lista { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.85rem; color: var(--ink-dim); font-size: 0.95rem; line-height: 1.58; list-style: none; } .mitirj__lista li { position: relative; padding-left: 1.05rem; } /* A pont a fény színét viszi tovább — ugyanaz a meleg, mint az e-mail mögött. */ .mitirj__lista li::before { content: ""; position: absolute; left: 0; top: 0.66em; width: 5px; height: 5px; border-radius: 50%; background: rgba(var(--feny), 0.8); } .mitirj__lista b { color: var(--ink); font-weight: 600; } /* ---------- Lábléc ---------- Impresszum szándékosan nincs: a törzsadatok (székhely, adószám, cégjegyzékszám) a cégbejegyzésig nem léteznek, kitalált adat pedig nem megy ki. Pótlandó, nem kutatandó. */ /* A szövegdoboz magától 18 px magas volna; a WCAG 2.2 AA célmérete (2.5.8) 24×24 px. A `min-height` ezt megadja anélkül, hogy a fejléc sorát növelné. */ .nav__vissza { display: inline-flex; align-items: center; min-height: 24px; } .lablec { position: relative; z-index: 1; padding: 1.2rem calc(var(--gutter) + var(--pad)) clamp(1.3rem, 3vh, 2rem); color: var(--ink-dim); font-size: 0.85rem; } /* A jogi linkek (impresszum, adatkezelési tájékoztató) minden lap láblécében. Nincs globális `a`-szabály, ezért itt kell kimondani: a link a lábléc halk színét örökli, az aláhúzás jelzi, hogy él. */ .lablec a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .lablec a:hover { color: var(--ink); } /* ========================================================================= DEMÓ CHATBOT (.chatbot · chatbot.js) A hero jobb alsó negyede a robot alatt üresen maradt — ide kerül majd a saját AI-asszisztensünk. Ez EGYELŐRE CSAK LÁTVÁNY: a beszélgetés be van drótozva a markupba, a beviteli mező `readonly`, a gyorsválaszok és a küldés-gomb `disabled`, semmi nem megy hálózatra. A cél az, hogy a végleges felület helye, mérete és tömege már most pontos legyen. A demó-jelleg NEM CSAK LÁTVÁNY: a mező `aria-describedby`-jal a lábjegyzetre mutat, a halott gombok pedig `disabled`-ek, tehát a tab-sorrendből is kiesnek (a miértje a markupban). A stíluslap ennek az egy dolognak tartozik: ne ígérjen kattintást ott, ahol nincs — ezért `cursor: default` mindhárom vezérlőn, és ezért csak élő gombon van rávilágítás. Fixed pozíciójú és a `` közvetlen gyereke, nem a heróé. Két oka van: a hero `overflow: hidden`-je így nem játszik bele, és a blokk változtatás nélkül átemelhető a többi lapra, amikor élesedik. A színszerepek: a bot buborékai üvegesek (a felület a látogatóé), a saját üzenet viszi a márkakéket. Fordítva a panel egy nagy kék folt lenne a hero kék oldalán, pont ott, ahol az áramkör-mintázat amúgy is a legsűrűbb. ========================================================================= */ .chatbot { position: fixed; right: var(--gutter); /* A --suti-eltolas alapból nincs kitéve, tehát a `0px` tartalék érvényes, és a csevegő a megszokott helyén ül. Szűk nézetben, amíg a süti-sáv kint van, a sáv magasságával emelkedik fölé — az indoklás a fájl végén, „A sáv és a csevegő találkozása" blokkban. */ bottom: calc(var(--gutter) + var(--suti-eltolas, 0px)); transition: bottom 0.28s cubic-bezier(0.22, 0.61, 0.36, 1); /* A fejléc 3-on ül (.nav); a csevegő mindenek fölött, de a skip-link (100) alatt marad. A süti-sáv (5) egyetlen kivétel: a döntést kérő sávot a csevegő panelje nem takarhatja el. */ z-index: 4; display: flex; flex-direction: column; align-items: flex-end; gap: 0.7rem; /* A DOBOZ nem fog kattintást, csak a benne ülő vezérlők. 560 px alatt a doboz balról is ki van feszítve (lásd a lenti média-lekérdezést), de csukott panel mellett csak a 166 px-es indítógomb látszik belőle: a maradék ~130 px átlátszó sáv elnyelte az alatta lévő partnerlogó kattintását. Mérve 320x720-on az „Edina Tour Guide" link mintapontjainak 75%-a, 360x780-on a „Pannon Sportpark" 100%-a a semmire ment; ezzel a két sorral 0%-ra, illetve a látható gomb alatti valódi átfedésre esik. */ pointer-events: none; } .chatbot__panel, .chatbot__indito { pointer-events: auto; } /* A `hidden`-t a chatbot.js teszi ki, és az `inline-flex` felülírná a böngésző alapértelmezett `[hidden] { display: none }` szabályát — ezért kell külön. */ .chatbot__indito[hidden] { display: none; } .chatbot__panel { width: min(21rem, calc(100vw - 2 * var(--gutter))); overflow: hidden; border: 1px solid var(--line); border-radius: 20px; /* Nem a --glass: az a fejléc pirulájának való, itt a mögötte lévő fotó átütne a szövegen. Majdnem tömör panel, épp annyi átlátszósággal, hogy az égbolt kékje még megsejlik benne. ÉS EZÉRT NINCS `backdrop-filter`. Volt rajta egy blur(18px) saturate(1.1), de a fenti háttér 90–94%-ban átlátszatlan: a mögötte elmosott képből 6–10% jutott át, vagyis a hatás gyakorlatilag nem látszott. Az ára viszont teljes volt — a panel `fixed`, a hero fölött ül, tehát a böngésző képkockánként elmosta mögötte a folyamatosan animáló hátteret, ~136 000 képponton. Ez a lap messze legnagyobb felületű backdrop-filtere volt. A kicsiken (.nav__nyelv, .btn--ghost) SZÁNDÉKOSAN marad a blur: azok háttere 4,5–6%-os, ott az elmosás végzi az érdemi munkát, a felületük pedig elenyésző. A szabály tehát nem „a backdrop-filter rossz", hanem „nagy felületen, majdnem tömör háttér mögött nincs értelme". */ background: linear-gradient( 180deg, rgba(var(--panel-rgb), 0.9) 0%, rgba(var(--bg-rgb), 0.94) 100% ); box-shadow: 0 24px 60px var(--arnyek-nagy), inset 0 1px 0 rgba(var(--folt-rgb), 0.06); transform-origin: 100% 100%; animation: chatbot-be 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; } /* A nyílás a gomb sarkából indul (transform-origin), így a panel abból nő ki, amire a látogató kattintott — nem a semmiből úszik be. */ @keyframes chatbot-be { from { opacity: 0; transform: translateY(14px) scale(0.96); } } /* ---------- Panel fejléc ---------- */ .chatbot__fej { display: flex; align-items: center; gap: 0.65rem; padding: 0.85rem 0.9rem; border-bottom: 1px solid var(--line); background: rgba(var(--folt-rgb), 0.03); } .chatbot__avatar { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(140deg, var(--brand), var(--brand-deep)); /* Ugyanaz a sötét tinta, ami a skip-linken és a márkakék felületeken ül. */ color: var(--brand-tinta); box-shadow: 0 6px 18px rgba(var(--brand-rgb), 0.28); } .chatbot__avatar svg { width: 18px; height: 18px; } .chatbot__kilet { display: flex; flex-direction: column; gap: 0.1rem; margin-right: auto; } .chatbot__nev { font-family: var(--cim); font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; } /* --ink-dim, nem --ink-faint: 0,72 rem-en a halvány tónus a 4,5:1-es küszöb alatt lenne — ugyanaz a mérés, mint a nyelvválasztónál. */ .chatbot__allapot { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--ink-dim); font-size: 0.72rem; } .chatbot__allapot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--elerheto-rgb)); box-shadow: 0 0 0 3px rgba(var(--elerheto-rgb), 0.16); } /* A pötty alapból azt mondja: „itt vagyok, válaszolok". Amíg a panel tájékoztató állapotban áll, ez nem igaz — és így a lap egyetlen olyan jelzése lenne, ami mást állít, mint a mellette álló szöveg. A zöld glória is lekerül: a semleges tónus ugyanaz a --ink-faint, ami a gépelő-pontoké. Információt egyedül NEM hordoz (WCAG 1.4.1): a „Fejlesztés alatt" felirat mondja ki, amit a tónus csak megerősít. */ .chatbot__allapot--csend::before { background: var(--ink-faint); box-shadow: none; } .chatbot__zar { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--ink-dim); cursor: pointer; transition: color 0.18s ease, background-color 0.18s ease; } .chatbot__zar:hover { background: rgba(var(--folt-rgb), 0.08); color: var(--ink); } .chatbot__zar svg { width: 16px; height: 16px; } /* ---------- Üzenetek ---------- A lista az aljára van görgetve (chatbot.js), tehát a beszélgetés eleje felfelé kifut a dobozból. A maszk ezt az élt oldja fel: vágásél helyett elhalványulás — ugyanaz a fogás, mint az eyebrow keretén. Nélküle a legfelső buborék félbevágva ül a doboz tetején, és az hibának látszik, nem előzménynek. */ .chatbot__uzenetek { display: flex; flex-direction: column; gap: 0.5rem; max-height: 15rem; overflow-y: auto; padding: 0.95rem 0.9rem; list-style: none; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%); mask-image: linear-gradient(180deg, transparent 0%, #000 12%); } .chatbot__uzenet { max-width: 84%; padding: 0.55rem 0.8rem; border-radius: 14px; font-size: 0.87rem; line-height: 1.5; text-wrap: pretty; } /* Az egyik sarok mindig visszahúzódik — ez mutatja meg, ki beszél, a szín nélkül is. */ .chatbot__uzenet--bot { align-self: flex-start; border: 1px solid var(--line); border-bottom-left-radius: 5px; background: rgba(var(--folt-rgb), 0.055); } .chatbot__uzenet--en { align-self: flex-end; border-bottom-right-radius: 5px; background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: var(--brand-tinta); font-weight: 500; } .chatbot__uzenet--gepel { display: inline-flex; align-items: center; gap: 0.28rem; padding: 0.72rem 0.85rem; } .chatbot__pont { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); animation: chatbot-gepel 1.25s ease-in-out infinite; } .chatbot__pont:nth-child(2) { animation-delay: 0.16s; } .chatbot__pont:nth-child(3) { animation-delay: 0.32s; } @keyframes chatbot-gepel { 0%, 60%, 100% { opacity: 0.28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } /* ---------- Gyorsválaszok ---------- INNENTŐL A LÁBJEGYZETIG (és lent az „Élő réteg" blokk java) JELENLEG NINCS MARKUP-PÁRJA. A csevegőpanel tájékoztató állapotban áll: egyetlen üzenetet tart, gyorsválaszok, beviteli mező, küldés-gomb és lábjegyzet nélkül, és a kezdőlapok az élő réteget (chatbot-elo.js) sem töltik be. Az indoklás az index.html csevegő-blokkjánál áll. Ezek a szabályok azért maradnak, mert a bot napokon belül visszakerül, és akkor a visszaélesítés markup-kérdés lesz, nem stílus-régészet. A gépelő-jelző (.chatbot__pont, fent) ugyanebbe a csoportba tartozik. */ .chatbot__gyors { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 0.9rem 0.85rem; } .chatbot__chip { padding: 0.34rem 0.7rem; border: 1px solid rgba(var(--brand-rgb), 0.34); border-radius: 999px; background: rgba(var(--brand-rgb), 0.09); color: var(--ink); font-family: inherit; font-size: 0.78rem; /* Nem `pointer`: a chipek `disabled`-ek, amíg a csevegő demó — a mutató alakja ne ígérjen kattintást ott, ahol nem történik semmi. A .chatbot__mezo és a .chatbot__kuld ugyanezért `default`; élesedéskor mindhárom együtt vált. A szín szándékosan marad --ink: a böngésző szürkítése (`GrayText`) itt nem éri el a szabályt, és nem is kell — a chipek a demó tartalmának részei, olvashatónak kell maradniuk. */ cursor: default; transition: background-color 0.18s ease, border-color 0.18s ease; } /* Csak élő gombon világít rá. Ma egyik chip sem `:enabled`, tehát ez a szabály a demóban nem fut le — a `disabled` levételekor viszont magától visszakapcsol, nem kell rá emlékezni. */ .chatbot__chip:enabled:hover { border-color: rgba(var(--brand-rgb), 0.55); background: rgba(var(--brand-rgb), 0.18); } .chatbot__chip:focus-visible { border-radius: 999px; } /* ---------- Beviteli sor ---------- A mező `readonly`, tehát a fókuszgyűrű a SORON ül, nem a mezőn: a demóban a sor az, ami vezérlőnek látszik. Ha élesedik, a `readonly` lekerül, és ez a szabály változatlanul jó marad. A `:focus-within` a küldés-gomb `disabled`-je után is működik: a soron belül a mező marad az egyetlen fókuszálható elem, és a keret pont akkor gyullad ki, amikor a felolvasó a lábjegyzetet is felolvassa (aria-describedby). */ .chatbot__sor { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.7rem 0.5rem 0.9rem; border-top: 1px solid var(--line); background: rgba(var(--folt-rgb), 0.025); } .chatbot__sor:focus-within { outline: 2px solid var(--brand-szoveg); outline-offset: -2px; } .chatbot__mezo { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font-family: inherit; font-size: 0.86rem; cursor: default; } /* A helyőrző is szöveg, tehát ugyanaz a 4,5:1 vonatkozik rá. --ink-faint-tel 4,18:1-et adott (13,76 px, 400-as súly, a panel saját felületén) — és ez a szám FÜGGETLEN attól, mi van a panel mögött, mert a panel háttere 0,94-es alfájú: nem az animált fotó ingadozása, hanem állandó bukás. --ink-dim-mel 9,4:1. Azért maradt sokáig láthatatlan, mert a helyőrző sem az innerText-ben, sem az elem textContent-jében nincs benne: a DOM-bejáró kontraszt-mérők egyszerűen nem látják. Aki ilyet ír, vegye be a placeholder, a value és a title attribútumot is. */ .chatbot__mezo::placeholder { color: var(--ink-dim); } .chatbot__mezo:focus { outline: none; } .chatbot__kuld { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: linear-gradient(140deg, var(--brand), var(--brand-deep)); color: var(--brand-tinta); cursor: default; } .chatbot__kuld svg { width: 16px; height: 16px; } /* Nem apróbetűs kimentés, hanem a demó kimondása: aki ideír, tudja meg, hogy még nem válaszol semmi. */ .chatbot__labjegyzet { padding: 0 0.9rem 0.75rem; background: rgba(var(--folt-rgb), 0.025); color: var(--ink-dim); font-size: 0.7rem; } /* ---------- Indítógomb ---------- */ .chatbot__indito { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.62rem 1rem 0.62rem 0.72rem; border: 1px solid rgba(var(--brand-rgb), 0.4); border-radius: 999px; /* 0,72 helyett 0,82, és nincs mögötte blur(10px). Ugyanaz a mérlegelés, mint a panelnél: a gomb a hero fölött `fixed`, tehát az elmosás képkockánként újraszámolt volna egy folyamatosan animáló hátteret — a 72%-os fedés mögül viszont alig látszott belőle valami. A tömörebb háttér ugyanazt a szövegkontrasztot adja, mozgó ár nélkül. */ background: rgba(var(--panel-rgb), 0.82); box-shadow: 0 12px 30px var(--arnyek-kozep); color: var(--ink); font-family: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease; } .chatbot__indito:hover { transform: translateY(-2px); border-color: rgba(var(--brand-rgb), 0.7); background: rgba(var(--panel-emelt-rgb), 0.85); } .chatbot__indito:focus-visible { border-radius: 999px; } .chatbot__indito svg { width: 20px; height: 20px; color: var(--brand-szoveg); } /* A globális nullázás egy `infinite` animációt nem megállít, hanem villogtat (lásd a prefers-reduced-motion blokk indoklását) — a gépelő pontok tehát a nevüket vesztik, és félerőn állnak ki. */ @media (prefers-reduced-motion: reduce) { .chatbot__pont { opacity: 0.55; animation-name: none; } } /* Telefonon a panel a rendelkezésre álló szélességet kapja (a doboz balról is ki van feszítve), az indítógomb viszont a jobb sarokban marad. Az üzenetlista alacsonyabb: a hero szövegéből így kevesebbet takar. */ @media (max-width: 560px) { .chatbot { right: 0.85rem; bottom: calc(0.85rem + var(--suti-eltolas, 0px)); left: 0.85rem; } .chatbot__panel { width: 100%; } .chatbot__uzenetek { max-height: 11rem; } } /* ---------- Élő réteg (chatbot-elo.js) ---------- A markup a demó-állapot; ezeket a szabályokat az élő réteg init-je kapcsolja be azzal, hogy a gyökérre felteszi a .chatbot--elo osztályt és leveszi a tiltásokat. JS nélkül egyik sem fut, a demó kurzor-döntései érvényesek. MOST EGYIK SEM FUT: a kezdőlapok nem töltik be a chatbot-elo.js-t, a panel tájékoztató állapotban áll. A blokk a helyén marad — a bot visszakapcsolása egy szkript-sor és a panel vezérlőinek visszatétele, ide nem kell nyúlni. */ /* A gépelő-jelző `
  • ` display-t kap a demó-szabályból (inline-flex), ami a `hidden` attribútum natív elrejtését felülírná — ki kell mondani. */ .chatbot__uzenet--gepel[hidden] { display: none; } /* Élesben a vezérlők ígérhetnek kattintást — a demó `cursor: default`-ja csak az `:enabled` állapotban fordul át, tehát a tiltott (küldés közbeni) gombon visszavált magától. */ .chatbot--elo .chatbot__chip:enabled, .chatbot--elo .chatbot__kuld:enabled { cursor: pointer; } .chatbot--elo .chatbot__mezo { cursor: text; } /* Linkek a buborékokban (hibaüzenet elérhetőségei, adatkezelési link a consent-buborékban): a buborék színét öröklik, aláhúzással. */ .chatbot__uzenet a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* Az élő réteg a lábjegyzetbe adatkezelési linket tesz, és oda a fenti buborék-szabály nem ér el (globális link-szabály pedig nincs). */ .chatbot__labjegyzet a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* Rendszer-üzenet (hiba, sapka): bot-buborék, halkan piros kerettel — a szín nem az egyetlen jelzés, a szöveg mondja ki a bajt (WCAG 1.4.1), a keret tehát kísérő jelzés, nem az információ hordozója. A --jelzes-keret témánként külön érték, mert ugyanaz a szín a két témában nem ugyanazt csinálja: a sötét panelen (9, 13, 20) a világos piros kiválik, a világos mód TISZTA FEHÉR paneljén viszont majdnem nyomtalan lenne — ott a jelzés a szín sötét vége felől jön, nagyobb fedéssel. */ .chatbot__uzenet--rendszer { border-color: var(--jelzes-keret); } /* A consent-buborék gombja: a chip formáját veszi át, de erősebb töltéssel — ez az egyetlen továbbvivő út, látszania kell. */ .chatbot__consent-gomb { display: block; margin-top: 0.55rem; padding: 0.4rem 0.85rem; border: 1px solid rgba(var(--brand-rgb), 0.5); border-radius: 999px; background: rgba(var(--brand-rgb), 0.16); color: var(--ink); font-family: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease; } .chatbot__consent-gomb:hover { border-color: rgba(var(--brand-rgb), 0.75); background: rgba(var(--brand-rgb), 0.26); } .chatbot__consent-gomb:focus-visible { border-radius: 999px; } /* ---------- Belépő animáció ---------- */ @keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .nav, .eyebrow, .hero__title, .hero__lead, .hero__cta, .proof { animation: rise-in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; } .nav { animation-delay: 0.05s; } .eyebrow { animation-delay: 0.15s; } .hero__title { animation-delay: 0.22s; } .hero__lead { animation-delay: 0.32s; } .hero__cta { animation-delay: 0.4s; } .proof { animation-delay: 0.5s; } /* A kapcsolati lap ugyanezt a belépőt kapja, ugyanazzal a ritmussal — a .nav szabálya fölötte már érvényes, azt nem kell megismételni. Az ütem szűkebb (0,1 → 0,38 s), mert itt négy blokk van, nem hat. */ .kapcs__cim, .kapcs__lead, .csatornak, .kapcs__mellek, .lablec { animation: rise-in 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; } .kapcs__cim { animation-delay: 0.1s; } .kapcs__lead { animation-delay: 0.18s; } .csatornak { animation-delay: 0.26s; } .kapcs__mellek { animation-delay: 0.34s; } .lablec { animation-delay: 0.42s; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; } /* A fenti nullázás önmagában nem elég egy `infinite alternate` animációnál: 0,001 ms-os ciklusidővel a fény nem megáll, hanem képkockánként véletlen állapotba ugrik — vagyis villog, ami pont annak a rosszabb változata, amit a beállítás ki akart kapcsolni. Ezért itt a nevet is elvesszük, és a fény a teljes erején áll ki. */ .csatorna--elso::before { opacity: 1; transform: translateY(-50%); animation-name: none; } /* Ugyanez a fül lencséjére: a két lélegző réteg `infinite alternate`, tehát a nullázott ciklusidő itt is villogássá fajulna — pont abból lenne a legrosszabb fajta, amit a beállítás kikapcsolni akart. A név elvételével a lencse a két ütem közötti, nyugodt középállapotban ég tovább. */ .hero__fulfeny { opacity: 0.52; transform: translate(-50%, -50%); animation-name: none; } .hero__fulfeny::before { opacity: 0.78; transform: translate(-50%, -50%); animation-name: none; } /* A logófal nem lapozhat, viszont a fenti nullázás a keyframe végállapotán hagyná mindkét lapot (rejtve) — ezért itt a lapozás teljesen kikapcsol, és a két lap egyszerre, egymás alatt áll ki. */ .proof__fal { gap: 0.7rem; } .proof__logos { grid-area: auto; opacity: 1; visibility: visible; animation-name: none; } } /* ---------- Reszponzív ---------- */ @media (max-width: 960px) { /* 960 px alatt a szekciók sora kikerül a fejlécből, hogy szűk kijelzőn csak a szólogó, a nyelvváltó és a CTA maradjon. A PÁRJA MÁR NEM ITT VAN. Eddig a másodlagos „Kapcsolat" szöveglink (.nav__link--quiet) is ebben a szabályban rejtőzött el; az a link azóta megszűnt, mert ugyanoda vitt, mint mellette a gomb, és a gomb vette át a feliratát. Nem elrejtve él tovább, hanem nincs — a szelektorban hagyni olyan osztályt, amit egyetlen lap sem használ, kósza szabály. A .nav__links maga egyelőre szintén nincs a markupban (lásd a definíciójánál fent), de az visszajön: ez a sor akkor változtatás nélkül fogja fogadni. */ .nav__links { display: none; } /* Egy hasáb: a megszólítás, alatta a „ki válaszol". A középre igazítás kikapcsol — ha a tartalom magasabb a képernyőnél, a középre húzott flex-gyerek teteje levágódna, és oda nem lehet visszagörgetni. */ .kapcs { align-items: flex-start; } .kapcs__racs { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 6vh, 3rem); } .kapcs__mellek { max-width: 38rem; padding-top: clamp(1.5rem, 4vh, 2.2rem); border-top: 1px solid var(--line); } /* Egy hasábban a fény kerete a teljes lapszélesség, nem egy 1,55fr-es oszlopé — a 132% ott már a képernyőn túlra nyúlna, és a levágott pereme éles élként látszana meg. */ .csatorna--elso::before { left: -6%; width: 112%; } .hero__inner { max-width: none; padding-top: 2.5rem; padding-bottom: 2.5rem; } .hero__layer--eg { object-position: 58% center; } /* Szűk nézetben nincs külön beállítás: a közös 16:9-es doboz ugyanúgy túllóg a széleken, mint a háttérkép, tehát a jelenet együtt mozog vele. */ /* Szűk nézetben a kép mögé kerül a szöveg, ezért felülről-lefelé sötétítünk. */ .hero__scrim { background: linear-gradient( 180deg, rgba(var(--bg-rgb), 0.62) 0%, rgba(var(--bg-rgb), 0.82) 45%, rgba(var(--bg-rgb), 0.92) 100% ); } /* Ugyanaz az aszimmetria, mint a .hero__vignette-nél, csak itt fáj a legjobban: szűk nézetben a szöveg a kép KÖZEPÉN áll, nem a lesötétített bal sávban, tehát nincs mögötte más, csak ez a fátyol. A 0,62-es felső megálló sötét módban bőven elég (a jelvény ott 12,9:1), világoson viszont mérve 2,39:1-et adott 900 px-en és 2,44-et 768-on — a lap legrosszabb két értéke az egész mérésben. A 0,88 az a legkisebb felső alfa, amivel a jelvény és a főcím minden mért szélességen átmegy; a másik két megálló ehhez van hangolva, hogy a színátmenet ne törjön meg. A kép ettől a szöveg mögött majdnem tiszta háttérré válik — de szűk nézetben úgyis a szöveg a jelenet, a fotó ott már csak tónus. Telefonon (560 px alatt) a szereplők amúgy sem töltődnek le. */ :root[data-tema="vilagos"] .hero__scrim { background: linear-gradient( 180deg, rgba(var(--bg-rgb), 0.88) 0%, rgba(var(--bg-rgb), 0.94) 45%, rgba(var(--bg-rgb), 0.97) 100% ); } } @media (max-width: 560px) { /* Telefonon a két alak a szöveg mögé szorulna, felismerhetetlen sötét foltként — ott az égbolt önmagában erősebb. EZ A SZABÁLY CSAK A RAJZOLÁST INTÉZI. A `display: none` a töltést nem állítja meg: amikor ez a mérés készült, 500 px-en a böngésző az ember- és ai-kivágatot, a halozat.svg-t és az akkor még meglévő két felhőréteget is lehúzta — együtt ~421 kB, amiből egy pixel sem látszik. (A felhőrétegek azóta kiestek, lásd „Úszó felhők: NINCSENEK"; a mérés tanulsága viszont nem évült el, csak a végösszege lett kisebb.) A töltést az index.html ``-jei zárják ki, UGYANEZZEL a 560 px-es töréssel. A kettőnek együtt kell mozdulnia: ha itt változik a töréspont, ott is át kell írni — az áramkör-mintázatnál KÉT ``-ban, mert a csökkentett mozgásos változat is ezt a határt tükrözi (`(not (max-width: 560px))`). Mérve: 500 px-en egyik SVG sem töltődik le, sem `reduce` alatt, sem anélkül. */ .hero__layer--ember, .hero__layer--ai, .hero__layer--halozat, .hero__racs { display: none; } /* A fül lencséje a robottal együtt megy: nélküle egy magában lebegő kék folt maradna az égen. Töltése nincs, tehát ide, a rajzoláshoz tartozik. */ .hero__fulfeny { display: none; } /* A soros szólogó 20 px magasan 196 px széles (ez a brand-minimum), a fejléc-CTA már nem fér mellé. Nem baj: a hero két gombja közvetlenül alatta van. Mobilmenü a következő körben, a többi szekcióval. A nyelvválasztó viszont marad: az a mobilmenőre nem várhat, mert nélküle az angol lapra egyáltalán nincs út telefonról. A HU/EN pirula ~76 px, a logó mellett kifér. ÉS MARAD A TÉMA-KAPCSOLÓ IS, ugyanabból az okból. Egy mobilmenü mögé rejtett témaváltó nem halasztás, hanem elvétel: telefonon a legerősebb ok váltani (napfényben olvashatatlan sötét lap, vagy este a világos), és pont ott lenne a legnehezebb megtalálni. A gomb 34 px, a pirula ~76 px, a szólogó 196 px — 390 px-es nézetben a --gutter és a --pad levonása után is elfér a három egymás mellett, mérve 22 px tartalékkal. Ha valaha szűk lesz, a mobilmenü hozza a nyelvválasztót és a kapcsolót EGYÜTT, vagy egyiket sem. */ .nav__actions > :not(.nav__nyelv):not(.tema) { display: none; } .hero__title { font-size: clamp(2rem, 9vw, 2.7rem); } /* Szűk oszlopban a magyar hosszú szavak csúnya lyukakat hagynak a sor végén (ugyanannyi karakter, de ~18%-kal kevesebb szó, tehát kevesebb törési pont). A Chromium magyar elválasztó-mintája jó — de csak `lang="hu"` mellett, ami az index.html-ben megvan. A 8/4/4 megakadályozza a kétbetűs csonkokat. Az `en/index.html`-en ugyanez a szabály fut, csak a `lang="en"` miatt az angol mintával — és ott is elsül: 390 px-en a „business" busi-ness-re törik (8 betű, 4+4 — épp megüti mind a három küszöböt). Ez szándékos, nem mellékhatás: az angol szöveg ugyanabban a szűk oszlopban ül, tehát ugyanaz a lyuk-probléma állna elő nélküle. Ha az elválasztás mégis csak magyarul kellene, a szabályt `:lang(hu)`-ra kell szűkíteni. */ .hero__lead { hyphens: auto; hyphenate-limit-chars: 8 4 4; } .hero__cta { flex-direction: column; align-items: stretch; } .btn { justify-content: center; } /* Tördelt sorban az elválasztó a sor elejére kerülne — ott inkább térköz. */ .proof__logos { gap: 1rem 1.5rem; } .proof__logos li + li::before { display: none; } .proof__logos img { max-height: 26px; max-width: 108px; } /* A kisebb alapmagassághoz a zömök jelek doboza is arányosan zsugorodik — az arányuk viszont marad, különben telefonon esnének vissza foltnak. */ .proof__logos img.proof__logo--tomb { max-height: 40px; } .proof__logos img.proof__logo--allo { max-height: 48px; } } /* ---------- Reszponzív — kapcsolat ---------- Saját blokk, nem a hero 560-as blokkjába ékelve: a két lap szűk nézete független egymástól, és a fájl így marad diffelhető, ha bármelyik változik. */ @media (max-width: 560px) { /* A „Kezdőlap" kiesik — a `.nav__actions > :not(.nav__nyelv)` szabály (a hero 560-as blokkjában) automatikusan elviszi, mert a link most már ott ül. A visszavezető út nem vész el: a logó maga is a kezdőlapra visz, ezt az `aria-label` ki is mondja. */ /* Az áramkör NEM esik ki, és ez tudatos. A hero 560-as blokkjának saját mérése szerint a `display: none` csak a rajzolást spórolja meg, a töltést nem — a 70 kB-ot a böngésző így is lehúzza. Ha egyszer fizetünk érte, jobb, ha látszik: keskeny nézetben az oldalirányú maszk helyett a keretezés dolgozik, a mintázat sűrű jobb oldalát hozza a lap mögé. */ .lap__halozat { object-position: 74% center; opacity: 0.34; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%); mask-image: linear-gradient(180deg, transparent 0%, #000 34%); } /* Egy hasábban a vízszintes sötétítésnek nincs értelme: a szöveg a lap teljes szélességét elfoglalja, tehát fentről lefelé tömörítünk — ugyanaz a váltás, mint a hero scrimjénél. */ .lap__scrim { background: linear-gradient( 180deg, rgba(var(--bg-rgb), 0.6) 0%, rgba(var(--bg-rgb), 0.84) 46%, rgba(var(--bg-rgb), 0.93) 100% ); } /* Ugyanaz az elválasztás, mint a hero leadjén, ugyanabból az okból: a szűk oszlopban a hosszú magyar szavak lyukakat hagynának a sor végén. A minta `lang`-függő, az mindkét lapon ki van téve. */ .kapcs__lead, .valaszol__mondat, .mitirj__lista { hyphens: auto; hyphenate-limit-chars: 8 4 4; } /* A fény a keskeny hasábban túlnyúlna a lap szélén, és elvágva már nem fénynek látszana, hanem foltnak. Szűkebb keret. */ .csatorna--elso::before { left: -8%; width: 116%; } } /* A fejléc szűk nézetben tört sorba megy — a szabály töréspont nélkül, a `.nav` alapdeklarációjában él (lásd ott a hosszú indoklást). Korábban itt állt egy `@media (max-width: 360px)` blokk, de csak a kapcsolati lapra (`.lap .nav`), és rossz küszöbbel: a kezdőlapon ugyanez a túllógás javítatlan maradt. */ /* ========================================================================= JOGI OLDALAK (impresszum · adatkezelési tájékoztató · imprint · privacy) Egyhasábos, olvasásra szedett prózalap a kapcsolat-lap háttere és fejléce alatt. A tipográfia a meglévő tokenekből áll össze (--cim, --szoveg, --ink-dim), új szín vagy betű nincs. A `[kitöltendő]` placeholderek a cégbejegyzés utáni kézi pótlásra várnak — a lap addig piszkozat, élesbe nem mehet (docs/runbook/chatbot.md go-live checklist). */ .jogi { position: relative; z-index: 1; max-width: 46rem; margin: 0 auto; padding: clamp(1.5rem, 4vh, 3.2rem) var(--pad, 1.2rem) 3rem; } .jogi h1 { font-family: var(--cim); font-size: clamp(1.8rem, 3.6vw, 2.7rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.028em; text-wrap: balance; } .jogi h2 { margin-top: 2.2rem; font-family: var(--cim); font-size: clamp(1.15rem, 1.9vw, 1.45rem); font-weight: 600; line-height: 1.2; } .jogi p, .jogi li { margin-top: 0.8rem; color: var(--ink-dim); font-size: 0.98rem; line-height: 1.65; text-wrap: pretty; overflow-wrap: break-word; } .jogi ul { padding-left: 1.2rem; } .jogi li { margin-top: 0.45rem; } .jogi li::marker { color: var(--ink-dim); } /* A kiemelt sor (pl. az adatkezelő neve) teljes tintát kap, a többi halkabb — a hierarchiát itt is a szín adja, nem doboz. */ .jogi b { color: var(--ink); font-weight: 600; } .jogi a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .jogi a:hover { color: var(--ink); } /* A placeholder látványban is placeholder: senki ne olvassa kész adatnak. */ .jogi .kitoltendo { padding: 0.05rem 0.4rem; border: 1px dashed rgba(var(--brand-rgb), 0.55); border-radius: 6px; color: var(--ink); } .jogi .verzio { margin-top: 2.6rem; font-size: 0.85rem; } /* ========================================================================= SÜTI-SÁV (.suti · suti.js) A lap bal alsó sarkában ülő tájékoztató sáv. A rajza szándékosan a csevegő paneljéé: ugyanaz a lebegő üveg-felület, ugyanaz a 20 px-es lekerekítés, ugyanaz a vetett árnyék. A két elem az alsó sáv két vége, és ha kétféle panel-nyelvet beszélnének, a lap alja két külön termékből összerakottnak látszana. A GOMBOK A LAP SAJÁT GOMBRENDSZERÉBŐL JÖNNEK (.btn .btn--sm .btn--primary / .btn--ghost), nem saját rajzból. Egy süti-sáv az a felület, amit a legtöbb lapon egy külső szolgáltató fecskendez be, és pont ezért az a felület, ami a leggyakrabban idegen test — itt egyetlen új gombforma sincs. MIÉRT BALRA. A jobb alsó sarok foglalt: ott ül a csevegő. Két lebegő doboz egymáson a lap legrosszabb pillanata volna, ráadásul pont az elsőn. Ahol viszont a kettő nem fér el egymás mellett, ott a sáv NEM ugrik el, hanem a csevegőt emeli maga fölé (`--suti-eltolas`) — a sávot a látogató becsukja, a csevegő marad, tehát a mozduló elem a maradó. ========================================================================= */ .suti { position: fixed; left: var(--gutter); bottom: var(--gutter); /* A csevegő 4-en ül, az ugrólink 100-on. A sáv a kettő között: a csevegő panelje nem takarhatja el a döntést, az ugrólink viszont mindent visz. */ z-index: 5; width: min(28rem, calc(100vw - 2 * var(--gutter))); padding: 1.05rem 1.15rem 1.1rem; border: 1px solid var(--line); border-radius: 20px; /* Ugyanaz a majdnem-tömör felület, mint a csevegő panelje, és ugyanazért: alatta a hero fotója fut, azon egy áttetsző dobozban a szöveg olvashatatlan lenne. `backdrop-filter` itt sincs — az indoklás a .chatbot__panel-nél. */ background: linear-gradient( 180deg, rgba(var(--panel-rgb), 0.94) 0%, rgba(var(--bg-rgb), 0.97) 100% ); box-shadow: 0 24px 60px var(--arnyek-nagy), inset 0 1px 0 rgba(var(--folt-rgb), 0.06); color: var(--ink); /* A lap belépő koreográfiája 0,05 és 0,5 s között fut le (.nav … .proof). A sáv utána érkezik: amíg a hero felépül, ne versenyezzen vele semmi. A görbe és a mozdulat a lapé, nem külön nyelv. */ animation: rise-in 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) 0.9s backwards; } /* A `

    `, mert a sáv a `` legelején áll: egy valódi címsor a lap `

    `-e elé kerülne, és a jogi lapokon h2 → h1 sorrend lenne belőle. A megnevezett `
    ` jelzőpontként így is megtalálható (aria-labelledby). Az indoklás bővebben a suti.js fejlécében. */ .suti__cim { font-family: var(--cim); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; } .suti__szoveg { margin-top: 0.4rem; color: var(--ink-dim); font-size: 0.84rem; line-height: 1.55; text-wrap: pretty; } .suti__gombok { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.95rem; } /* A sáv gombjai egy szűk dobozban ülnek, nem a hero szélességében: a .btn alapértelmezett 0,95 rem-es szövege és 1,5 rem-es oldalpaddingja itt két sorba törné a hármast. A .btn--sm ezt már megoldja, a sugár viszont a panelhez tartozik, nem a heróhoz. */ .suti .btn { border-radius: 10px; } /* ---------- A kinyíló részletező ---------- */ .suti__reszletek { margin-top: 0.95rem; padding-top: 0.85rem; border-top: 1px solid var(--line); /* A teljes lista 1440x900-on 420 px köré jön ki, tehát a 27 rem-es plafon asztali gépen NEM vág le semmit: a törlés-gomb görgetés nélkül elérhető. Az 52vh csak az alacsony ablakot (fekvő telefon, kis laptop) fogja meg, ahol a sáv különben kitolódna a képernyőről. Ott a lista görgethető, nem a lap. */ max-height: min(52vh, 27rem); overflow-y: auto; overscroll-behavior: contain; } /* Az osztályt a suti.js teszi ki, amíg VAN mit görgetni lefelé (a `scrollHeight` CSS-ből nem kérdezhető). Enélkül a levágott lista pontosan úgy néz ki, mint egy véget ért lista — és a görgetősávot elrejtő rendszereken (macOS, telefon) semmi nem mondaná meg a különbséget. */ .suti__reszletek--vagott { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 2.4rem), transparent 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 2.4rem), transparent 100%); } /* ---------- A tételes leltár (natív
    ) ---------- Harmadik szint: a döntés (kapcsolók) és a cselekvés (törlés) elöl marad, a bizonyíték egy kattintással lejjebb. Az indoklás és a mért számok a suti.js `tetelekEpit` függvényénél. */ .suti__leltar { margin-top: 0.95rem; } /* A `summary` sorát a lap saját nyila viszi, nem a böngésző háromszöge: a natív jelölő rendszerenként más alakú és más helyen ül, és a Safari sajátját színezni sem lehet. A viselkedés natív marad (kattintás, Enter, Space, `aria-expanded` nélkül) — csak a rajz a miénk. */ .suti__alcim { display: flex; align-items: center; gap: 0.4rem; color: var(--ink); font-size: 0.78rem; font-weight: 600; cursor: pointer; list-style: none; } .suti__alcim::-webkit-details-marker { display: none; } /* Egy 90 fokot forduló szögletes zárójel: csukva jobbra mutat, nyitva lefelé. A `currentColor` miatt a témaváltással együtt mozdul. */ .suti__alcim::before { content: ""; flex: 0 0 auto; width: 0.42rem; height: 0.42rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 0.18s ease; } .suti__leltar[open] > .suti__alcim::before { transform: rotate(45deg); } /* A `summary` a globális `:where(a, button)` fókuszszabályon kívül esik. */ .suti__alcim:focus-visible { outline: 2px solid var(--brand-szoveg); outline-offset: 3px; border-radius: 6px; } .suti__lista { margin-top: 0.5rem; list-style: none; } /* A tételek kategóriánként csoportosulnak, amint egynél több aktív kategória van (vagyis hozzájárulás-módban). A csoportcím köti össze a fenti kapcsolót az alatta álló tételekkel — enélkül a lista azt sugallná, hogy minden tétel ott ül a gépen, pedig a hozzájáruláshoz kötöttek csak azután jelennek meg. Az `--alcim`-mal azonos méret és súly szándékos: a bevezető („Amit a böngésződ tárol:") és a csoportcímek egy szinten állnak, a hierarchiát a behúzás nélküli lista adja, nem egy harmadik betűméret. */ .suti__csoport { margin-top: 1rem; color: var(--ink); font-size: 0.78rem; font-weight: 600; } .suti__csoport:first-of-type { margin-top: 0.65rem; } /* „ · csak a hozzájárulásoddal" — ugyanabban a sorban, halkabban és normál súllyal. Nem külön bekezdés: a feltétel a cím RÉSZE, nem lábjegyzet utána. */ .suti__csoport-jel { color: var(--ink-dim); font-weight: 400; } .suti__tetel { padding: 0.55rem 0; border-top: 1px solid var(--line); color: var(--ink-dim); font-size: 0.79rem; line-height: 1.5; } .suti__tetel:first-child { border-top: 0; padding-top: 0; } .suti__tetel b { color: var(--ink); font-weight: 600; } /* A technikai kulcs és a tárolás fajtája. A hierarchiát a MÉRET és a SÚLY adja, nem egy harmadik, halványabb szín: az --ink-faint a lap felületein 4,5:1 alatt van (lásd a definícióját), tehát szövegnek nem használható. */ .suti__meta { display: block; margin-top: 0.15rem; color: var(--ink-dim); font-size: 0.72rem; } .suti__jog { margin-top: 0.75rem; font-size: 0.78rem; } .suti__jog a { color: var(--ink-dim); text-decoration: underline; text-underline-offset: 2px; } .suti__jog a:hover { color: var(--ink); } /* ---------- Kategória-kapcsolók (csak hozzájárulás-módban) ---------- Ma egyetlen nem kötelező kategória sincs bekapcsolva, tehát ezek a szabályok nem festenek semmit. Nem halott kód: a suti.js deklarációjában egyetlen `aktiv: true` élesíti az egészet, és azon a napon a rajz már készen áll. */ .suti__kapcsolo { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.55rem 0; border-top: 1px solid var(--line); cursor: pointer; } .suti__kapcsolo:first-child { border-top: 0; padding-top: 0; } .suti__jelolo { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; margin-top: 0.1rem; accent-color: var(--brand); cursor: pointer; } .suti__jelolo:disabled { cursor: default; } /* A globális fókuszszabály `:where(a, button)`-re szól, jelölőnégyzetre nem — ki kell mondani, különben pont a billentyűzetes látogató nem látja, hol áll. */ .suti__jelolo:focus-visible { outline: 2px solid var(--brand-szoveg); outline-offset: 3px; } .suti__kapcsolo-szoveg { display: block; font-size: 0.79rem; line-height: 1.5; } .suti__kapcsolo-szoveg b { color: var(--ink); font-weight: 600; } .suti__kapcsolo-mit { display: block; color: var(--ink-dim); } .suti__ment { margin-top: 0.8rem; } /* ---------- Törlés ---------- */ .suti__torles { margin-top: 0.9rem; padding-top: 0.85rem; border-top: 1px solid var(--line); } /* Nem `.btn--ghost`: az a lap elsődleges gombja mellett álló MÁSODIK út, ez viszont egy visszavonhatatlan, lapot újratöltő művelet a részletező alján. Halkabb keret, nincs üveg-töltés, nincs elmosás. */ .suti__torol { padding: 0.45rem 0.85rem; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--ink); font-family: inherit; font-size: 0.79rem; font-weight: 600; cursor: pointer; transition: border-color 0.18s ease, background-color 0.18s ease; } .suti__torol:hover { border-color: rgba(var(--folt-rgb), 0.3); background: rgba(var(--folt-rgb), 0.05); } .suti__magyarazat { margin-top: 0.5rem; color: var(--ink-dim); font-size: 0.72rem; line-height: 1.5; } /* ---------- A lábléc visszahívó gombja ---------- Gombként viselkedik, linkként néz ki: a láblécben három jogi hivatkozás mellett áll, és a negyediknek nem lehet más a rajza csak azért, mert technikailag nem navigál. A `.lablec a` szabályát tükrözi. */ .lablec__suti { border: 0; padding: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .lablec__suti:hover { color: var(--ink); } /* ---------- A sáv és a csevegő találkozása ---------- Széles nézetben nincs mit intézni: a sáv 28 rem-je balra, a csevegő indítógombja (166 px) vagy csukott panelje jobbra, közöttük bőven marad hely. Szűkülve viszont a sáv a `min()` miatt a teljes szélességet felveszi, és valahol átér a jobb sarokba. A határ számolható: 28 rem (448 px) + 1 rem hézag + a 166 px-es indítógomb + kétszer a --gutter (2x16 px) = 662 px. A 720-as töréspont ezt kerekíti fölfelé, hogy a betűméret-változásból adódó pár képpont se csússzon bele. A CSEVEGŐ MOZDUL, NEM A SÁV. A sávot a látogató pár másodperc múlva becsukja, a csevegő viszont a lap tartós eleme — a mozgás azt illeti, ami elmúlik. A --suti-magassag-ot a suti.js méri (ResizeObserver), mert a sáv magassága a szövegtől, a tördeléstől és a nyitott részletezőtől függ. */ @media (max-width: 719px) { /* CSUKOTT SÁV: a csevegő pontosan a sáv fölé emelkedik. A magasságot a suti.js méri, és szándékosan CSAK csukott állapotban frissíti. */ :root[data-suti] { --suti-eltolas: calc(var(--suti-magassag, 0px) + 0.7rem); } /* NYITOTT RÉSZLETEZŐ: a sáv a képernyő kétharmadára nő, és ilyenkor nem kikerüljük a csevegőt, hanem elvesszük. Volt egy köztes változat, ami plafonnal (42vh) próbálta megfogni az emelést. 320x780-on mérve megbukott: a sáv teteje 409-nél állt, az indítógomb alja 439-nél, vagyis 30 képponton átfedtek — mert ezen a szélességen már a CSUKOTT sáv is 357 px magas, ami több, mint a plafon. Egy plafon, ami néha átenged, nem plafon. A `display: none` itt nem szegényítés, hanem a tisztességesebb állapot: az elem a fókuszsorból is kiesik, tehát nem lesz belőle takart fókusz (WCAG 2.2 AA 2.4.11) — egy `visibility`- vagy `opacity`-alapú rejtés pont ezt a hibát hagyná bent. A látogató becsukja a részletezőt, és a csevegő ott van, ahol volt. */ :root[data-suti="reszletek"] .chatbot { display: none; } } /* ---------- Reszponzív — süti-sáv ---------- */ @media (max-width: 560px) { /* A csevegő 560 alatt 0,85 rem-re húzódik a szélektől; a sáv ugyanoda, hogy a két doboz éle egy vonalban álljon. */ .suti { left: 0.85rem; right: 0.85rem; bottom: 0.85rem; width: auto; } /* Telefonon a lista szélesebb (nincs 28 rem-es plafon), tehát ugyanaz a szöveg kevesebb sorba fut, de a képernyő is alacsonyabb — az arány, nem a rem-plafon a mérvadó. */ .suti__reszletek { max-height: 44vh; } /* Egy hasábban a három gomb egymás alatt teljes szélességű: a 320 px-es nézetben a „Csak a szükséges" felirat mellé nem fér oda a párja, és két egyenlő súlyú válaszból nem lehet egy fél soros meg egy egész soros. */ .suti__gombok { flex-direction: column; align-items: stretch; } .suti .btn { justify-content: center; } }