/* ════════════════════════════════════════════════════════════ kristofkarner.com — main.css A karnerkristof.hu téma vizuális nyelve, WordPress nélkül. ════════════════════════════════════════════════════════════ */ /* ── Reset ──────────────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ── Design tokens — light mode (default) ───────────────────── */ :root { --bg: #ffffff; /* ── ABLAK-FELÜLET ───────────────────────────────────────── A keretes, „ablakban lévő" tartalmak háttere. Eddig négyféle megoldás élt egymás mellett: volt, aminek csak kerete volt, volt, aminek `--bg-alt` háttere, volt, aminek `color-mix`-szel kevert, és volt, aminek semmije. Innentől egy érték viszi mindet. Ami NEM kap felületet: a táblázat és a vélemény-kártya. Egy vonalazott adatsor nem ablak, hanem a szövegfolyam része — négy kitöltött rácscella pedig egyetlen szürke táblává olvadna, és a hajszál-elválasztók eltűnnének benne. */ /* Semleges szürke: R=G=B, tehát tisztán a fekete és a fehér keveréke. Korábban #E9ECEF volt, amiben a kék hat egységgel a vörös fölött állt — az a hajlás Night Shift alatt is átütött, hidegkékre színezve az egész felületet. A világosság változatlan: az új érték ugyanazt a relatív luminanciát adja. */ /* HIDEG szürke, nem semleges. Kristóf kifejezetten ezt kérte, és megindokolta: erős night shift mellett dolgozik, tehát a meleg hajlást nem tudja megítélni — inkább menjen a biztos irányba. R 233 < G 236 < B 239: a kékes csatorna a legmagasabb, barnás árnyalata nincs. (Egy párhuzamos munkamenet ezt közben #ECECEC-re, tehát tisztán semlegesre írta át — az teljesíti a „ne legyen meleg" felét, a „legyen hideg" felét nem.) A világosság gyakorlatilag azonos, a kontrasztarányok tehát nem mozdulnak: a legszűkebb 4,84. */ --felulet: #E9ECEF; --fg: #000000; --fg-sub: #444444; /* #888888 volt — fehéren 3,54:1, tehát AA ALATT. Nem ízlés kérdése volt, hanem mérési hiba: a lap minden halk felirata megbukott vele. A #666666 fehéren 5,74, felületen 4,82 — mindkettő átmegy. */ --fg-muted: #666666; --border: rgba(0, 0, 0, 0.09); /* Apple-stílusú glass — sidebar és gombok */ --glass-bg: rgba(255, 255, 255, 0.82); --glass-blur: saturate(180%) blur(20px); /* Nav item hover glass (sötétebb a sidebar light glasson belül) */ --glass-item: rgba(0, 0, 0, 0.055); /* Egyetlen család viszi az egész oldalt. A --font-display és a --font-mono megmarad NÉVNEK, mert a szabályok jelentése más: az egyik szerkezeti címke, a másik gépi kimenet. Ha valamelyik később megint külön betűt kap, itt kell átírni, nem 40 helyen. A „Mono tartalek" a fonts.css-ben metrikára igazított Courier New — a betűcsere így nem töri újra a sorokat. Nem külső kérés. */ --font: 'IBM Plex Mono', 'Mono tartalek', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --font-display: 'IBM Plex Mono', 'Mono tartalek', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --font-mono: 'IBM Plex Mono', 'Mono tartalek', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --text-xs: 0.82rem; --text-sm: 0.95rem; --text-base: 1.05rem; --mertek: calc(var(--text-base) * 0.6 * 80); /* 1,3rem volt. A hosszú szövegek 13,1 és 20,8 képpont között szórtak — 1,59-szeres különbség KÉT BEKEZDÉS között. Innentől minden folyószöveg a `--text-base`, és ez a fok csak a cím alatti felvezetőé meg a h3-é marad. Monospace-nél a köztes fokozat külön is árt: a karakterrács osztása változik tőle, tehát két egymás alatti blokk függőleges oszlopai szétcsúsznak. */ --text-lg: 1.15rem; --text-xl: 1.7rem; /* --text-2xl törölve: sehol nem hivatkozott rá szabály. */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-6: 4rem; --space-8: 8rem; /* ── Oldalmargó — EGYETLEN arányos érték az egész honlapra ───── vw-alapú, hogy minden kijelzőn és minden page zoom-szinten ugyanakkora hányadot vigyen el a képernyőből. A clamp két vége nem ízlésbeli finomítás: az alsó a 320 pixeles kijelzőn tartja olvashatónak a sort, a felső akadályozza meg, hogy nagy monitoron a margó egye meg a tartalmat. Ami eddig hibás volt: négy különböző oldalmargó élt egymás mellett (container 8vw, 960 alatt fix 2rem, sidebar 1,5rem, footer 4rem), és 960 pixelnél a fő margó 8vw-ről fix 2rem-re ESETT. Page zoomkor a CSS-viewport szűkül, tehát a nagyítás átvitte az oldalt ezen a ponton — és a margó a nagyítás pillanatában a felére csökkent. Ezt látta a szem úgy, hogy a tartalom hozzáér a szélhez. Breakpointon innentől EGYIK margó sem ugrik. */ --margo: clamp(1.25rem, 5.4vw, 7rem); /* A sidebar keskeny sáv: benne ugyanez az érték szétfeszítené a tartalmat, ezért a saját szélességéhez mért, visszafogottabb pár. */ --margo-szuk: clamp(1rem, 2.1vw, 1.75rem); /* ── A menü függőleges térközei — a KÉPERNYŐ MAGASSÁGÁHOZ mérve ── Az oldalmargó `vw`-alapú, mert vízszintesen a szélesség a szűk keresztmetszet. A menüben fordítva: ott a MAGASSÁG fogy el. A sidebarban kilenc menüpont áll, fölöttük a monogram, alattuk a nyelvváltó — fix térközökkel ez 698 képpontot kért. Egy 1280×800-as laptopon a böngésző saját sávjai után ~640 marad, tehát az „Email" 26 képponttal a képernyő alá csúszott, és mivel a fejléc `overflow`-ja `visible` volt, oda nem is lehetett görgetni. Mobilon ugyanez: a nyitott panel 743 képpontos ablakot igényelt, egy 667-es iPhone-on tehát az alja levágódott. Ezért a térközök `vh`-ra vannak kötve. A `clamp` felső vége a korábbi fix értéket adja vissza, és 800 képpont fölött pontosan az is jön ki — ahol eddig sem volt baj, ott semmi nem változik. Alacsony ablakban viszont arányosan összébb húzódnak, és a menü kifér. A `dvh` a második sorban azért van külön, mert iOS 15.4 előtt nem létezik: ott az első deklaráció marad érvényben. Ahol viszont van, ott pontosabb — a `vh` a mobil böngészőkben a NAGY viewporthoz mér, tehát épp akkor ad túl nagy térközt, amikor a címsáv látszik és a hely tényleg kevés. */ --nav-koz: clamp(0.4rem, 2vh, 1rem); /* menüpontok között */ --nav-koz: clamp(0.4rem, 2dvh, 1rem); --nav-valt: clamp(0.6rem, 3vh, 1.5rem); /* csoporthatárnál */ --nav-valt: clamp(0.6rem, 3dvh, 1.5rem); --nav-jel: clamp(0.3rem, 1vh, 0.5rem); /* szoros sorok között */ --nav-jel: clamp(0.3rem, 1dvh, 0.5rem); --nav-logo: clamp(1rem, 8vh, 4rem); /* a monogram alatt */ --nav-logo: clamp(1rem, 8dvh, 4rem); --nav-pad: clamp(1rem, 4vh, 2rem); /* a fejléc pereme */ --nav-pad: clamp(1rem, 4dvh, 2rem); /* ── Keretes dobozok belső margója — szintén EGY érték ───────── Ugyanaz a történet, egy szinttel beljebb. A lapon tíz körbekeretezett vagy saját hátterű „ablak" van (adatlap, helyzet-blokk, tartalomjegyzék, jegyzet, vélemény, záró blokk, kód- és bizonyíték-blokk), és mindegyik MÁS vízszintes belső margót használt: 0, 16, 24 és 32 képpontot, három külön mobil felülírással. Egy táblázatnál javítva lett, a többinél nem. A legrosszabb eset az adatlap volt: a `padding: 0.6rem 0` miatt a szöveg 1 képpontra állt a saját keretétől — MINDEN eszközön, nem csak telefonon. A kereten belül nem volt hova lélegeznie a sornak. Innentől egyetlen arányos érték visz mindet, `--margo` mintájára: az arány marad, a lépték a kijelzőhöz igazodik. 375 pixelen 17, tableten 18, asztali méreten 32 képpont. Nem kell hozzá mobil felülírás, tehát nincs hol elveszni. (A TÁBLÁZAT cellái szándékosan kimaradnak: ott a vízszintes padding nem keret-margó, hanem oszlopköz.) */ --doboz-belso: clamp(1.05rem, 2.35vw, 2rem); --sidebar: 220px; /* bal oldali nav szélessége */ /* A hamburger ikon vonalvastagsága. Eredetileg a SZÖVEGES logó betűszárához volt mérve (IBM Plex Mono Regular, 0,089 em → 2,0 képpont 1,4rem-es logónál), mert a fejlécben a kettő egymás mellett áll. A logó azóta inline SVG monogram lett, és annak KÉT vonalvastagsága van: a tömör K szára 5,1 képpont, a vonalas K kerete 0,7. Egyetlen „ugyanolyan vastag" érték tehát már nincs — a 2 képpont szándékosan a kettő között áll, és a monogram össz-súlyához illik. Ha a tömör szárhoz kell igazítani, ez az egy sor változik. */ --logo-vonal: 2px; --divider: 1px solid var(--border); /* ── MOZGÁS: egy görbe, három tempó ────────────────────── Korábban tizenhat különböző időzítés volt a lapon, öt görbével — eseti döntések sora, nem rendszer. Monospace-nél ez feltűnőbb, mert a rács minden mozgást kimér: ha két szomszédos elem más ütemben vált, az nem árnyalat, hanem hiba. A tempót az dönti el, MIT csinál a mozgás: valasz — amit a kéz vár: szín, opacitás, visszajelzés allapot — állapotváltás: keret, kiemelés, csúszó jelölő felulet — nagy felület: nyílás, kirajzolás, betűrajz A görbe egyetlen: gyors indulás, hosszú kifutás. Az oldal nem kapkod — a hosszabb átmenet a nézésre hív, nem a kattintásra. */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --t-nyomas: 0.09s; /* a lenyomás pillanata — még „azonnalinak" érződik, de nincs kemény éle, amitől villanna */ --t-valasz: 0.18s; --t-allapot: 0.42s; --t-felulet: 0.62s; --transition: var(--t-allapot) var(--ease); /* ── KÉT szín ──────────────────────────────────────────── A weberna.hu arculatából örökölve. Hármat próbáltunk, kettő maradt — és nem ízlésből: a sárga fehér háttéren 1,4:1 kontrasztot ad, tehát vastag csíkként is olvashatatlan. A szereposztás egyszerű, és végig ez érvényes: KÉK — a szerkezet: minden vonal, keret, sarokjel, sorszám BÍBOR — a kiemelés: ami a lényeg, és amit a kurzor érint A kék az egyetlen, ami mindkét sémán megáll (3,9 / 5,0). A bíbor fehéren kiváló (8,2), sötéten világosítva jó. ──────────────────────────────────────────────────────── */ --brand-bibor: #8E245A; --brand-kek: #208BAC; --szin-szerkezet: #1E7A99; /* fehéren 4,9:1 — VONALRA */ /* Ugyanaz a kék SZÖVEGKÉNT egy árnyalattal mélyebb: a vonal 4,9-en elég (küszöb 3), a felirat viszont 4,5-öt kér, és felületen a világosabb változat 4,10-re esne. */ --szin-szerkezet-szoveg: #1B6E8B; --szin-kiemeles: #8E245A; /* fehéren 8,2:1 */ /* A rács színe — a szerkezeti kékből, nagyon halkan. */ --racs: rgba(30, 122, 153, 0.085); /* Vonalvastagságok. A terv vonalzóval készül: két érték van, és minden ezekből épül. Az első kiadás 2/3 px volt — Kristóf szerint „nem kivehető szemmel", ezért felment 3/5-re. Egy tervrajzon a vonal nem hajszál: látszania kell, hogy húzták. */ --vonal-1: 3px; --vonal-2: 5px; /* Régi nevek, amíg a többi szabály átáll — a rétegváltó és a diagram-kiemelés is a kiemelő színt kapja. */ --szin-melyseg: var(--szin-kiemeles); --szin-rendszer: var(--szin-kiemeles); --szin-jelen: var(--szin-szerkezet); /* ── A skála ───────────────────────────────────────────── A három szín egyetlen átmenetben, mindig ugyanabban a sorrendben. Egyszer telítetten (a sidebar jelében), és lehalkítva minden szekció-elválasztó vonalon — így a skála nem egy elszigetelt dísz, hanem az oldal gerincén fut végig. NINCS ÁTMENET. A színek tömör szakaszokban állnak egymás mellett, éles határral — ugyanaz az elv, mint a lekerekítés nélküli sarkoknál és a hajszálvonalaknál. Egy filmszalag kalibrációs sávja sem elmosott: külön kockák, éles vágással. A szegmenseket box-shadow adja, nem gradiens: egyetlen 18 pixeles doboz, mellette két másolat eltolva. Nulla új elem, nulla átmenet. ──────────────────────────────────────────────────────── */ --szegmens: 18px; } /* ── Dark mode — automatikus, device beállítás alapján ─────── */ @media (prefers-color-scheme: dark) { :root { --bg: #0a0a0a; --felulet: #1B1D1F; /* ugyanaz a hideg hajlás, mint világosban */ --szin-szerkezet-szoveg: #3BA6C7; /* sötétben a vonal-kék átmegy szövegnek is */ --fg: #f0f0f0; --fg-sub: #aaaaaa; --fg-muted: #888888; --border: rgba(255, 255, 255, 0.09); --glass-bg: rgba(10, 10, 10, 0.82); --glass-item: rgba(255, 255, 255, 0.09); /* Ugyanaz a két hue, a világosság a fekete háttérhez igazítva. A bíbor feketén 2,4:1 volna — világosítani kell; a kék bírja. */ --szin-szerkezet: #3BA6C7; /* feketén 6,8:1 */ --szin-kiemeles: #CF418A; /* feketén 4,5:1 */ --racs: rgba(59, 166, 199, 0.11); } } /* ── Éjszaka — ugyanaz a hely, más idő ─────────────────────── A sötét mód a KÉSZÜLÉK beállítását követi; ez a réteg a látogató ÓRÁJÁT. Este tíz és hajnali öt között az oldal lelassul és tompul. Nem másik design: ugyanaz a hely, később. A `data-ido="ejjel"` attribútumot a main.js teszi ki a -re. JS nélkül nem történik semmi — a lap teljes értékű marad. FONTOS: a napszak SOSEM írja felül a séma-választást. Aki világos módot állított be a gépén, az éjjel sem kap feketét — az az ő döntése, nem a miénk. Világosban csak a ritmus lassul, a szín tompul és a szemcse erősödik; a sötétet a napszak mélyíti tovább. ─────────────────────────────────────────────────────────── */ :root[data-ido="ejjel"] { --t-nyomas: 0.12s; --t-valasz: 0.26s; --t-allapot: 0.62s; --t-felulet: 0.90s; } /* Világosban: nincs séma-váltás, csak halkul a kontraszt. */ @media (prefers-color-scheme: light) { :root[data-ido="ejjel"] { --bg: #faf9f7; --fg-sub: #565656; --accent: #7a2b27; } } /* Sötétben: a napszak mélyíti, amit a séma már elkezdett. */ @media (prefers-color-scheme: dark) { :root[data-ido="ejjel"] { --bg: #060606; --felulet: #15171A; --fg: #e6e6e6; --fg-sub: #9a9a9a; --border: rgba(255, 255, 255, 0.07); --glass-bg: rgba(6, 6, 6, 0.86); --accent: #a8443d; } } /* ── Oldalak közti átúsztatás — natív, nulla JS ─────────────── */ @view-transition { navigation: auto; } /* ── A vágás — a keret áll, a kép cserélődik ────────────────── A lapváltás eddig a böngésző alapértelmezett keresztúsztatása volt, amiben a fix sidebar is benne úszott: a KERET villant, pedig mind a 44 lapon bájtra ugyanaz. Nevesítve kimarad a gyökér pillanatképéből, tehát mozdulatlan marad — csak a kép cserélődik. Az átmenet RÖVID, és ennek technikai oka van, nem ízlésbeli: a szemcse a body::after-en ül, tehát benne van a STATIKUS pillanatképben — az átmenet teljes hosszán a vetítőgép befagy. Egy szemcse-ciklus 0,5 s, ezért marad a teljes áttűnés 0,28 s-on. A lassú film nem attól lassú, hogy az átmenetei hosszúak, hanem hogy a gép egyenletesen jár. ─────────────────────────────────────────────────────────── */ :root { --vagas: 0.28s; /* a két kép EGYSZERRE úszik, nem egymás után */ --vagas-gorbe: cubic-bezier(0.22, 0.61, 0.36, 1); } /* Éjjel lassabb. A napszakot NEM a data-ido hozza ide: azt a defer-elt main.js teszi ki, ami az ÉRKEZŐ lapon később fut, mint ahogy ezek a szabályok feloldódnak. Ezért a RÉGI lap küldi át típusként — lásd a main.js pageswap-figyelőjét. */ :root:active-view-transition-type(ejjel) { --vagas: 0.36s; } /* A keret. Ez az egész lényege. */ .site-header { view-transition-name: keret; } /* HU→EN váltásnál a keret tartalma mégis változik (más feliratok). Akkor is a lap ütemén cserélődjön, ne a böngésző 0,25 s-án. */ ::view-transition-old(keret), ::view-transition-new(keret) { animation-duration: var(--vagas); animation-timing-function: var(--vagas-gorbe); } /* A kép ÁTÚSZIK. Korábban vágás volt: a régi lap kiúszott, jött egy üres kocka, és utána úszott be az új. Ez szándékos filmes gesztus volt, de a gyakorlatban pislogásnak látszott — a lap egy pillanatra eltűnt a kattintás után. Most a böngésző saját áttűnése fut, csak a mi ütemünkön: a két kép EGYSZERRE úszik, nincs üres kocka. A szemcse-korlát így is áll — a teljes átmenet 0,28 s, egy szemcse-ciklus alatt (0,5 s), tehát a befagyott vetítőgép nem látszik meg. */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--vagas); animation-timing-function: var(--vagas-gorbe); } /* ── Szemcse — hangulat, tartalom nélkül ───────────────────── Egyetlen inline SVG-zaj, néhány száz bájt, nulla függőség. A teljes felület fölött ül, de nem fog egeret. Olyan halvány, hogy tudatosan alig észlelhető — csak a "sablon statikus oldal" érzetet veszi el. Nyomtatásban és mozgásérzékenységnél kikapcsol. A szemcse MOZOG: a statikus szemcse textúra, a mozgó szemcse film. Nyolc lépés fél másodperc alatt, steps(1) időzítéssel — így ugrik, nem úszik, ahogy a vetített kép. Nem a mintát cseréljük, hanem a pozícióját toljuk el: egy fájl elég, és a réteg a helyén marad. ─────────────────────────────────────────────────────────── */ /* A háttérrács kikerült (2026-07-28, Kristóf): a „terv" jelleget a vonalak, keretek és sarokjelek adják — a rács ehhez már fölösleges réteg volt. A --racs token megmarad, mert a fejmező és az adatlap belső elválasztói használják. */ body::after { content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.028; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } @media (prefers-reduced-motion: no-preference) { /* A szemcse szándékosan KÍVÜL van a tempó-skálán: nem átmenet, hanem textúra. A steps(1) attól lépdel, nem folyik — ez a filmszalag viselkedése, és pont ettől nem látszik CSS-animációnak. */ body::after { animation: grain 0.5s steps(1) infinite; } } @keyframes grain { 0% { background-position: 0px 0px; } 12% { background-position: -13px 7px; } 25% { background-position: 9px -17px; } 37% { background-position: -21px -11px; } 50% { background-position: 17px 13px; } 62% { background-position: -7px 21px; } 75% { background-position: 23px -5px; } 87% { background-position: -17px -23px; } 100% { background-position: 0px 0px; } } @media (prefers-color-scheme: dark) { body::after { opacity: 0.045; } } /* Éjjel a szemcse erősebb — a rossz fényviszony a régi filmen is több zajt jelent. */ :root[data-ido="ejjel"] body::after { opacity: 0.062; } /* ── Fokozott kontraszt ────────────────────────────────────── A helyes válasz a „több kontrasztot" kérésre nem mélyebb szürke, hanem KEVESEBB RÉTEG: a felület eltűnik, a keretek erősödnek. */ @media (prefers-contrast: more) { :root { --felulet: var(--bg); --border: rgba(0, 0, 0, 0.45); } } @media (prefers-contrast: more) and (prefers-color-scheme: dark) { :root { --felulet: var(--bg); --border: rgba(255, 255, 255, 0.45); } } /* ── Papír ────────────────────────────────────────────────── Ezt a lapot NYOMTATJÁK. Nem a kezdőlapot: az impresszumot és az adatkezelési tájékoztatót, amikből papíron jogi dokumentum lesz. Négy dolog romlott el nyomtatáskor, mind mérve, WebKitben, A4-en: 1. SÖTÉT SÉMÁVAL A LAP OLVASHATATLAN. A böngésző a hátteret alapból nem nyomtatja — a papír fehér marad —, a szöveg viszont `rgb(240,240,240)` volt. Majdnem fehér szöveg fehér papíron. Ezért a papír MINDIG a világos séma tokenjeit kapja, akkor is, ha a látogató sötétben olvas. 2. A CSUKOTT LENYÍLÓK TARTALMA ELVESZETT. A kezdőlapról 309 szó, egy esettanulmányról 382 — a GYIK válaszai és a technikai kibontások. Aki kinyomtatta, a kérdéseket kapta meg, a válaszokat nem. 3. A SZAKASZOK FÉLIG ÁTTETSZŐN mentek papírra. Az előhívás scroll-vezérelt és `opacity: 0.48`-ról indul; papíron nincs görgetés, tehát mind a nyolc szakasz ott ragadt. 4. A FIX OLDALSÁV az első lap negyedét vitte el egy kattinthatatlan menüre, a további lapokon pedig csak a 182 képpontos üres margó maradt belőle. */ @media print { /* 1 — a papír világos, függetlenül attól, amit a látogató lát */ :root, :root[data-ido="ejjel"] { --bg: #ffffff; --felulet: #ffffff; --fg: #000000; --fg-sub: #333333; --fg-muted: #555555; --border: rgba(0, 0, 0, 0.28); --szin-szerkezet: #14607A; --szin-szerkezet-szoveg: #14607A; --szin-kiemeles: #8E245A; --racs: transparent; } body { background: #ffffff; color: #000000; } body::after { display: none; } /* 2 — a lenyílók tartalma papírra kerül, a nyíl nem. A gyerekekre hiába írunk `display: block`-ot: mérve, a gyerek MAGA látszik (114 képpont magas, `content-visibility: visible`), csak épp egy rejtett tárolóban ül. Nem a gyereket kell nyitni, hanem a tárolót — az `::details-content` pszeudoelemet. WebKit 26.5-ben működik. Ahol a böngésző még nem ismeri, ott figyelmen kívül hagyja: a lenyíló csukva marad, ahogy eddig is. */ details::details-content { content-visibility: visible !important; display: block !important; } details summary { list-style: none; cursor: auto; } details summary::marker, details summary::-webkit-details-marker { display: none; } /* 3 — semmi nem marad félúton egy animációban */ [class*="section-"], .case-diagram, .abra-mobil li, .ref-item, .doc-fact { opacity: 1 !important; transform: none !important; animation: none !important; clip-path: none !important; } /* 4 — a navigáció papíron dísz; a tartalom kapja a teljes lapot */ .site-header, .skip-link, .nav-lang, .ref-preview { display: none !important; } .site-main { margin-left: 0 !important; padding-left: 0; padding-right: 0; } /* Oldaltörés — a címsor ne szakadjon el attól, amit bevezet */ h1, h2, h3, h4, summary, .label { break-after: avoid; } tr, li, figure, blockquote, .doc-table, .case-situation, .case-diagram { break-inside: avoid; } p { orphans: 3; widows: 3; } /* A KÜLSŐ hivatkozás papíron cím nélkül értelmetlen — a belső nem, azt a látogató a saját lapján találja meg. Ezért csak a kifelé mutatók kapják meg a címüket. */ main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.82em; color: #555555; overflow-wrap: anywhere; } } /* ── Base ───────────────────────────────────────────────────── */ html { /* A gyökér betűméret 16 pixel marad egészen 1900-ig — ez a lap alaptempója, és minden rem-érték ebből származik. Az előző kísérlet (clamp 0,62vw-vel) már 1280 pixelen 20-ra vitte, ami az EGÉSZ lapot negyedével felnagyította: nem reszponzivitás volt, hanem nagyítás. Növekedés csak ott, ahol tényleg indokolt: 1900 pixel felett a nézőtávolság is nő, ott a 17-18 pixel olvashatóbb. A felső határ szándékosan alacsony. */ font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Az iOS Safari „text autosizing"-ja alapból BEKAPCSOLVA van, és a szöveget a saját ítélete szerint felnagyítja — blokkonként, eltérő mértékben. A dobozok, a rácsrések és a rajzok NEM nőnek vele: csak a betű. Egy szoros elrendezésben ettől a szöveg kifut a helyéről, és rácsúszik arra, ami mellette van. Ez a lap tetején a legérzékenyebb: a cím `line-height: 1`-gyel áll, tehát a betű már alapból öt-nyolc képponttal a saját során KÍVÜLRE rajzolódik, a portré aljáig pedig csak 24-28 képpont a tartalék — mérve, három eszközméreten. A `100%` nem a nagyítást tiltja: a látogató oldalnagyítása (Safari „aA" menü) és a rendszerszintű szövegméret továbbra is hat. Csak azt kapcsolja ki, hogy a böngésző MAGÁTÓL, kérés nélkül írja felül a tervezett méretet. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* ── Vízszintes túlcsordulás elleni két alapszabály ─────────── Ez a kettő együtt oldott meg egy 280 pixeles kijelzőn jelentkező hibát, ami a lapot vízszintesen görgethetővé tette. (1) A rács- és flex-elemek alapértelmezett `min-width: auto`-ja azt jelenti, hogy nem zsugorodnak a tartalmuk MINIMÁLIS szélessége alá. Egyetlen hosszú szó — e-mail-cím, webcím, összetett szó — így kifeszíti a rácsot a szülőjén túl, és onnantól az egész dokumentum szélesebb a képernyőnél. A `min-width: 0` engedi a zsugorodást. (2) A hosszú szó ettől még kilógna a saját sorából; az `overflow-wrap` engedélyezi a törést ott, ahol nincs szóköz. A `break-word` csak akkor tör, ha muszáj — a normál tördelést nem írja felül. */ :where(.about-grid, .hero-grid, .service-item, .ref-item, .ref-list, .testimonial-grid, /* ── A GALÉRIA JELENLEG NEM HASZNÁLT ───────────────────────── 2026-08-04: az esettanulmányokból kikerültek a képek — Kristóf maga készíti újra őket, és a kísérőszöveget együtt írjuk meg. A stílus SZÁNDÉKOSAN itt marad: a galéria vissza fog jönni, és a törlés–visszaírás csak zaj lenne. A régi képek megvannak a `forras/eset-kepek/` alatt — nem a `src/`-ben, tehát nem kerülnek ki. ─────────────────────────────────────────────────────────── */ .case-galeria-racs, .doc-facts div, .faq-item, .case-next) > * { min-width: 0; } /* A LÁBLÉC szándékosan kimarad a fenti listából. Ott a három blokk (copyright · rovatlinkek · nyilvántartási szám) egy sorban áll, és a `min-width: 0` engedné őket a saját tartalmuk alá zsugorodni — ettől tört két-három sorba mindegyik, pedig bőven volt hely. Itt épp az ellenkezője kell: a blokkok NE essenek szét, a lábléc pedig inkább csomagoljon, ha tényleg elfogy a hely. */ .site-footer { flex-wrap: wrap; column-gap: var(--space-4); } /* A `max-content` egymagában TÚLLŐ: a linksor max-content szélessége telefonon 425 px volt egy 375 pixeles kijelzőn, és ettől lett az egész lap oldalra húzható — a lábléc, nem az ábrák. A `min()` megtartja a „ne törj feleslegesen" viselkedést, de a szülő szélességénél megállítja. A linksor pedig kifejezetten tördelendő elem: neki nulla a minimuma. */ .site-footer > * { min-width: min(100%, max-content); } .site-footer > .footer-links { min-width: 0; } /* Asztali meret: a copyright marad elol, ahogy eddig is volt - a dokumentum-sorrendet a MOBIL igenye dontotte el (ott a rovat-linkek jonnek eloszor, mert azok visznek tovabb a lapon; az alairas legalul zar). Ezt itt egyetlen `order` forditja vissza, markup nelkul. */ /* A hatar 1024 es nem 700: harom csoport egy sorban kb. 684 kepponot ker, es az oldalsav plusz a margok levonasa utan ennyi csak 1010 pixel folott marad. Alatta a lablec harom savba rendezodik, ott pedig az alairas ALUL a helyes - tehat ott nem szabad elorehozni. */ @media (min-width: 1024px) { .site-footer > .footer-copy { order: -1; } } .footer-links { display: flex; flex-wrap: wrap; gap: 0.35rem var(--space-2); justify-content: center; } /* A lábléc egésze nagybetűs, az aláírás viszont nem: ott saját név áll, és a nagybetűsítés a „Kristóf" ékezeteit is átírja — a KRISTÓF sor kiabál, miközben a lábléc a leghalkabb eleme a lapnak. A rovatlinkek és a nyilvántartási szám maradnak nagybetűsek, azok címkék. */ .footer-copy { text-transform: none; letter-spacing: 0.01em; } body { overflow-wrap: break-word; } /* ── Görgethető sávok: a görgetés NEM láncolódik tovább ─────── Az ábra, a táblázat és a kódblokk vízszintesen görgethető sáv. Érintőn ezek végén a böngésző alapból TOVÁBBADJA a mozdulatot a lapnak — a látogató végighúzza az ábrát, és a lendület a lapot rántja oldalra. Kívülről ez pontosan úgy néz ki, mintha az egész oldal görgethető lenne vízszintesen; az `overflow-x: clip` sem véd ellene, mert az a MÉRETET korlátozza, nem a gesztust. A `contain` a sáv határánál megállítja a láncot: ami a sávban indul, a sávban is marad. Függőlegesen viszont nem szabad megfogni — az ujj gyakran az ábrán keresztül görgeti a lapot lefelé. */ .case-diagram, .doc-table-wrap, .case-code pre, .case-proof pre { overscroll-behavior-x: contain; } /* ── Kódblokk: tördelünk, nem görgetünk ───────────────────── A `pre-wrap` a MEGŐRZÖTT szóközöknél tör — a shell-parancsok és a PHP tele vannak velük, tehát a törés a legtöbb sornál természetes helyre esik. Az `anywhere` csak a szóköz nélküli, sávnál hosszabb tokent bontja meg. `clip` és nem `auto`: az `auto` néma visszaesést engedne, egy jövőbeli hosszú token újra görgethetővé tenné a sávot. A `clip` nem hoz létre görgetési kontextust, és a tördelés miatt sosem vág le semmit. A `letter-spacing` a `.doc-body`-ból öröklődne — display-tracking a kódban 12,8 képpanton rontja az 1/l és a ./, megkülönböztetését. */ .case-code pre, .case-proof pre { overflow-x: clip; white-space: pre-wrap; overflow-wrap: anywhere; letter-spacing: normal; hyphens: none; } /* És látszódjon is, hogy van még: a görgetősáv a lap saját színeivel, vékonyan. Árnyékkal is meg lehetne oldani („scroll shadow"), de ezen a lapon sehol nincs árnyék — egy lágy szürke sáv idegen test volna. A sávot viszont maga a rendszer rajzolja, és a színe a mienk. */ .case-diagram, .doc-table-wrap, .case-code pre, .case-proof pre { scrollbar-width: thin; scrollbar-color: var(--szin-szerkezet) transparent; } /* ── Vízszintes görgetés: sehol, semmilyen méreten ──────────── Az `overflow-x: clip` a `hidden`-nel szemben NEM hoz létre görgetési kontextust, tehát a `position: sticky` és a horgony-ugrás megmarad — csak épp nincs mit oldalra húzni. A html ÉS a body is megkapja: egyedül a html-en a böngészők egy része a body-ra propagálja és elveszti. */ html, body { overflow-x: clip; max-width: 100%; } /* Nagyon nagy kijelzőn a nézőtávolság is nő — csak ITT emelünk, és keveset. */ @media (min-width: 1900px) { html { font-size: 17px; } } @media (min-width: 2560px) { html { font-size: 18px; } } body { font-family: var(--font); background-color: var(--bg); color: var(--fg); line-height: 1.6; min-height: 100vh; } a { color: inherit; text-decoration: none; /* A hover nem csak az átlátszóságot mozgatja: a törzsszöveg linkjei SZÍNT és ALÁHÚZÁS-SZÍNT is váltanak (.doc-body a, .faq-a a, .doc-toc a, .shift-cta, .case-next-mail). Ezek eddig kimaradtak a listából, tehát átmenet nélkül ugrottak — a lap leggyakoribb interakciója volt az egyetlen, ami nem a lap óráján futott. */ transition: opacity var(--t-valasz) var(--ease), color var(--t-valasz) var(--ease), border-bottom-color var(--t-valasz) var(--ease); } a:hover { opacity: 0.45; } img { max-width: 100%; display: block; } /* Fókusz — billentyűzetes navigációhoz látható, egérrel nem */ :focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; } /* Ugrás a tartalomra — képernyőolvasónak és Tab-nak */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; padding: var(--space-2) var(--space-3); background: var(--bg); border: var(--divider); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; } .skip-link:focus { left: var(--space-2); top: var(--space-2); } /* ── Utility ────────────────────────────────────────────────── */ .text-muted { color: var(--fg-muted); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Kis uppercase label — szekciók felett */ /* A szekciócímke a terven egy JELÖLÉS: kék, és mérővonal fut mellette a sor végéig — mint a rajzon a méretezés. A vonal a maradék helyet tölti ki, tehát magától igazodik a címke hosszához. */ .label { display: flex; align-items: center; gap: var(--space-2); /* A sáv tartalmazhat hivatkozást is („Műhely · vissza a rovathoz"). Wrap nélkül a kettő egy sorba kényszerül: 320 képpontnál 200%-os szöveg-nagyítással a hivatkozás tizenhat képponttal kilógott a képernyőből — mérve, WebKitben, csak az ANGOL lapokon, mert a „back to the section" hosszabb a magyar megfelelőjénél. A `min-width: 0` nem jó megoldás rá: azzal a hivatkozás harmincöt képpontra préselődik és betűnként tördel. */ flex-wrap: wrap; row-gap: 0.15rem; font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--szin-szerkezet-szoveg); } .label::after { content: ''; flex: 1; height: 1px; background: var(--szin-szerkezet); opacity: 0.35; } /* ──────────────────────────────────────────────────────────── SIDEBAR NAV ─────────────────────────────────────────────────────────── */ .site-header { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar); z-index: 100; display: flex; flex-direction: column; padding: var(--nav-pad) var(--margo-szuk); /* VÉGÁLLÁS, nem a normál működés. A `--nav-*` térközök 560 képpontos ablakig kiférnek; ez alatt (nagyon alacsony ablak, felnagyított rendszerbetű, 200%-os page zoom) már a betűk maguk nem férnek el, és azokat nem szabad zsugorítani. Ilyenkor a menü görgethető — nem szép, de mindig elérhető. Az `overscroll-behavior` tartja, hogy a görgetés ne folytatódjon a lap törzsében, amikor a menü végére ér. */ overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; /* Apple liquid glass */ background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-right: var(--divider); } /* A logó inline SVG, nem szöveg: a currentColor miatt a világos és a sötét mód magától helyes, és nincs érte külön hálózati kérés. A betűbeállítások azért maradnak, mert a jel MELLETT a link szöveges tartalma (a képernyőolvasónak szánt aria-label) is ide öröklődne, ha valaha visszakerülne. */ .nav-logo { display: inline-block; font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.06em; line-height: 1; margin-bottom: var(--nav-logo); color: var(--fg); } /* A magasság a régi „KK" nagybetű-magasságához igazodik (1,4rem Bebas ≈ 1,02rem cap height), hogy a jel ugyanakkora optikai súllyal üljön a sarokban, mint a szöveg tette. A szélesség ebből adódik: a jel aránya 1,86 : 1, tehát ~1,9rem — bőven belefér a 180 pixeles oldalsávba is. */ /* A negatív jelnél a MEZŐ magassága a mérvadó, nem a betűké: a monogram a jel magasságának 84%-át tölti ki, a többi a körülötte futó keret. Ezért 1,21rem — így a betűk maguk ugyanakkorák maradnak (1,02rem), mint a korábbi nyitott jelnél és a szöveges „KK"-nál voltak. Enélkül a logó optikailag zsugorodna. */ .nav-logo .kk-mark { display: block; /* A monogram a lap egyetlen márkajele — 1,21rem-en alig volt nagyobb a menüpontok betűjénél. Arányos érték: a keskeny mobilsávon is elfér (56 képpontos fejléc), asztalin pedig végre jel, nem lábjegyzet. */ height: clamp(1.7rem, 2.6vw, 2.4rem); width: auto; overflow: visible; } .site-nav { display: flex; flex-direction: column; flex: 1; /* A flex-elemek alapból nem mennek a saját `min-content` magasságuk alá. Enélkül a nav akkor is a teljes tartalmát kérné, ha nincs rá hely — és így a benne lévő lista `overflow`-ja sosem lépne működésbe: a fejléc görögne helyette, a nyelvváltóval együtt. */ min-height: 0; position: relative; /* szükséges a sliding highlight-hoz */ } /* Sidebar alján — nyelvváltó + copy-email gomb */ .nav-bottom { margin-top: auto; padding-top: var(--nav-valt); /* NINCS elválasztó vonal. Az Írások/Műhely csoport fölött már fut egy hajszálvonal; egy másodikat közvetlenül alá tenni két vonalat ad száz képponton belül, ráadásul a kétszínű jel is elválaszt. Egy jel elég egy határhoz. */ display: flex; flex-direction: column; gap: var(--nav-koz); } /* ── Színjel — a három szín egy helyen ─────────────────────── A filmtekercs elején fut egy színkalibrációs sáv: nem a filmhez tartozik, hanem ahhoz, aki vetíti. Ez ugyanaz — szakmai jel, nem dísz, és jól megfér a szemcsével, ami szintén a filmből jön. A három szín a weberna.hu arculatából érkezik: itt jelennek meg telített értéken, egymás mellett, egyetlen 54 pixeles vonalban. Máshol az oldalon már csak külön-külön, jelentéssel. Pszeudoelem, tehát NULLA HTML-változás — a sidebar mind a negyvennégy lapon ott van, a jel velük együtt jelenik meg. ─────────────────────────────────────────────────────────── */ .nav-bottom::before { content: ''; display: block; width: calc(var(--szegmens) * 2); height: var(--vonal-2); margin-bottom: var(--space-1); /* Két tömör szakasz, éles határral — NEM átmenet. Egyetlen doboz plusz egy box-shadow-másolat. Kék a szerkezet, bíbor a kiemelés: ugyanaz a szereposztás, mint mindenhol máshol. */ background: var(--szin-szerkezet); box-shadow: calc(var(--szegmens) * 2) 0 0 var(--szin-kiemeles); } /* A jel SZÁNDÉKOSAN nem mozdul és nem reagál a kurzorra. Egy kalibrációs sáv sem villog: ott van, és kész. A mozgás elvonná a figyelmet arról, amiért a látogató jött. EGY kivétel: az első betöltéskor felépül — lásd a lap alján, a „VETÍTÉSINDÍTÁS" szakaszban. Egyszer, 0,6 másodperc, aztán soha. */ /* Közös mikro-tipográfia a sidebar aljára */ .copy-email, .nav-lang { font-family: var(--font); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); } /* „Email" — asztali oldalsávban kattintásra MÁSOL, a szöveg „Másolva"-ra vált; mobilon sima mailto-link. A jelölés mindkét esetben ugyanaz az ``, tehát JS nélkül is működik: a levelező megnyílik. Korábban `