/* arculat11.css: az AiGent 2026 Brand Identity 1.1 lekepezo retege a B-oldal 15 lapjahoz (2026-10-08, 10. kor). Forras: shared/brand11/tokens.css (a csomag tokens.css-enek erintetlen masolata) es a csomag lib/aigent.css mintai. Az aigent.css-t nem toltjuk be (globalisan mellekhatasos), csak a mintait vesszuk at a meglevo szelektorokra. Betoltes: brand11/assets/fonts/fonts.css, brand11/tokens.css, arculat11.css, mozgas.css, a lap sajat stilusai utan. Tema: a html data-ag-theme attributuma a data-theme tukre (head boot-szkript es site.js), statikus alapja "light". A regi sotet felulirasok :root[data-theme="dark"] .x alakuak, ezert a komponensszabalyok itt :root[data-ag-theme] elotaggal allnak: azonos fajlagossagnal a kesobbi, vagyis ez a reteg dont. Mozgas (ido, gorbe, elmozdulas) itt nincs, az a mozgas.css-e. Szin, meret, ido csak tokenbol; ahol attetszo valtozat kell, color-mix a tokenbol. */ /* Aurora-tartalek (11. kor): a gradienses recepthez az alabbi sor kommentjet kell levenni (lasd 8. szakasz es aurora-gradiens.css). */ /* @import url("aurora-gradiens.css"); */ /* ===================== 1. a meglevo valtozok a szemantikus tokenekre ===================== */ :root{color-scheme:light} :root[data-theme="dark"]{color-scheme:dark} :root,:root[data-theme="dark"]{ --bg:var(--ag-bg); --surface:var(--ag-surface); --card:var(--ag-surface); --ink:var(--ag-text-1); --ink-2:var(--ag-text-2); --ink-3:var(--ag-text-3); --line:var(--ag-line); --line-2:var(--ag-line-strong); --p1:var(--ag-color-aurora-blue); --p2:var(--ag-color-aurora-lavender); --p3:var(--ag-color-aurora-peach); --aurora:var(--ag-color-aurora-gradient); --shadow:var(--ag-card-shadow); --shadow-lg:var(--ag-card-shadow); --glow:var(--ag-card-shadow); --radius:var(--ag-radius-card); --pill:var(--ag-radius-pill); --sans:var(--ag-font-sans); --mono:var(--ag-font-mono); --maxw:var(--ag-layout-web-container); --gut:var(--ag-layout-web-page-x); --sec:var(--ag-layout-web-section-y); } /* ===================== 2. alap: torzsszoveg, grain, fejlec, logo ===================== */ body{font-size:var(--ag-type-body-size);line-height:var(--ag-type-body-lh)} /* teljes oldalas grain (brand-rules 4.: feTurbulence, 160 px csempe, 4%, minden reteg felett) */ :root[data-ag-theme] body::after{opacity:var(--ag-effect-grain-opacity);mix-blend-mode:normal; background-image:url("brand11/assets/backgrounds/grain.svg");background-size:var(--ag-effect-grain-tile) var(--ag-effect-grain-tile)} :root[data-ag-theme] .hdr{background:color-mix(in srgb,var(--ag-bg) 82%,transparent);border-bottom-color:var(--ag-line)} /* kanoni lockup inline (brand-rules 2.: -kent a Arialra valt). Mindket kanoni valtozat a lapon, a tema dont. */ .brand .lg,.foot-brand .lg{display:block;line-height:0} .brand .lg svg{display:block;width:104px;height:32px} .foot-brand .lg svg{display:block;width:98px;height:30px} .lg--white{display:none!important} :root[data-theme="dark"] .lg--ink{display:none!important} :root[data-theme="dark"] .lg--white{display:block!important} @media (max-width:980px){.brand .lg svg{width:91px;height:28px}} /* ===================== 3. tipografia (tokens.json type) ===================== */ /* hos-cimek: h1 token */ :root[data-ag-theme] :is(.h5a h1,.vi-hero h1,.h1,.ph-hero h1){font-family:var(--ag-type-h1-family);font-weight:var(--ag-type-h1-weight); font-size:var(--ag-type-h1-size);line-height:var(--ag-type-h1-lh);letter-spacing:var(--ag-type-h1-ls)} /* szakaszcimek: h2 token, sorhossz 21em */ :root[data-ag-theme] :is(.h2,.cta-band h2,.hk-zaro h2,.prose-wrap>.wrap>h2){font-family:var(--ag-type-h2-family);font-weight:var(--ag-type-h2-weight); font-size:var(--ag-type-h2-size);line-height:var(--ag-type-h2-lh);letter-spacing:var(--ag-type-h2-ls);max-width:var(--ag-layout-web-measure-h2)} /* szakaszszintu h3: h3 token */ :root[data-ag-theme] :is(.cgroup h3,.svc h3,.mv-i h3,.tier-name){font-family:var(--ag-type-h3-family);font-weight:var(--ag-type-h3-weight); font-size:var(--ag-type-h3-size);line-height:var(--ag-type-h3-lh);letter-spacing:var(--ag-type-h3-ls)} /* a definicio-mondat merete a h3-e, a sulya szovegsuly marad */ :root[data-ag-theme] .def{font-size:var(--ag-type-h3-size);line-height:1.3;letter-spacing:var(--ag-type-h3-ls)} /* kis kartyacimek: csak a suly es a betukoz */ :root[data-ag-theme] :is(.flow h3,.steps3 h3,.tl h3,.probs h3,.mod h4 b,.prob h3,.val h3,.chan h3,.drv h3,.fee h3,.lep h3,.pgroup h3,.auth-card h1,.facts2 h3,.how-i h3){ font-weight:600;letter-spacing:var(--ag-type-h3-ls)} /* lead: lead token, text-2, sorhossz 33em; a VI szakasz-alcime (.h2 utan) ugyanez a szerep */ :root[data-ag-theme] :is(.lead,.legal-lead,.h2+.sub){font-size:var(--ag-type-lead-size);line-height:var(--ag-type-lead-lh); color:var(--ag-text-2);max-width:var(--ag-layout-web-measure-lead)} /* hosszu olvasnivalo: body token */ :root[data-ag-theme] :is(.prose p,.prose li,.intro2 p){font-size:var(--ag-type-body-size);line-height:var(--ag-type-body-lh)} /* kicker: mono, nagybetu, .18em. Szine mindket temaban text-2: vilagosan a text-3 kis betun 3,1:1 (brand-rules 3.2), sotetben a text-3 sima alapon 4,7:1, de az aurora-folt folott (amely a szomszed szakaszba is atfolyik) merve 3,3:1. */ :root[data-ag-theme] :is(.eyebrow,.kicker){font-family:var(--ag-type-kicker-family);font-weight:var(--ag-type-kicker-weight); font-size:var(--ag-type-kicker-size);line-height:var(--ag-type-kicker-lh);letter-spacing:var(--ag-type-kicker-ls);text-transform:uppercase;color:var(--ag-text-2)} /* a kartyan beluli kicker a kartya szinet orokli (sotet szolgaltataskartya) */ :root[data-ag-theme] .svc .eyebrow{color:inherit} /* ===================== 4. terkoz (tokens.json layout.web) ===================== */ :root[data-ag-theme] :is(.eyebrow,.kicker)+:is(.h2,h1,.h1){margin-top:var(--ag-layout-web-kicker-gap)} :root[data-ag-theme] :is(h1,.h1,.h2)+:is(.lead,.legal-lead,.sub){margin-top:var(--ag-layout-web-lead-gap)} :root[data-ag-theme] :is(.h2,.lead,.sub,.twin-head)+:is(.svc2,.tw,.flow,.tl,.probs,.prices,.faq,.chan,.cmp-wrap,.how,.values,.trust,.team,.mv,.drivers,.shots,.cgroup,.steps3){ margin-top:var(--ag-layout-web-block-gap)} :root[data-ag-theme] :is(.svc2,.price2,.mv,.how,.values,.fees,.hk-tiers){gap:var(--ag-layout-web-grid-gap)} :root[data-ag-theme] :is(.mod,.val,.mv-i,.how-i,.drv,.fee){padding:var(--ag-layout-web-card-pad)} /* ===================== 5. kartyak: vilagosan felulet, 1 px vonal, 16 px, lagy arnyek; sotetben arnyek nelkul ===================== */ :root[data-ag-theme] :is(.card,.mod,.probs li,.flow li,.cred-tiles li,.tw-card,.faq details,.prices,.example,.c-card,.legal-doc,.tier){box-shadow:var(--ag-card-shadow)} :root[data-ag-theme] .mod.soon{box-shadow:none} /* sotetben az uveg-kitoltes (fill-card) a sima kartyakon; az aurora-keretes (gradiens szegelyu) kartyak nem attetszok */ :root[data-theme="dark"] :is(.mod:not(.soon),section.twin .flow li:not(.core),.probs li){background:var(--ag-fill-card)} /* uveg-kartya aurora-kerettel: a belseje a tema felulete */ :root[data-ag-theme] .glass{background:linear-gradient(color-mix(in srgb,var(--ag-surface) 88%,transparent),color-mix(in srgb,var(--ag-surface) 88%,transparent)) padding-box,var(--ag-color-aurora-gradient) border-box} /* ===================== 6. gombok: osztaly es szerep marad ===================== */ :root[data-ag-theme] :is(.btn-ink,.btn-top,main .btn-primary,.nav a.m-only.m-cta){background:var(--ag-text-1);color:var(--ag-bg)} :root[data-ag-theme] .btn-glass{background:var(--ag-fill-card);border:1px solid var(--ag-line-strong);color:var(--ag-text-1)} :root[data-ag-theme] .btn-aurora{color:var(--ag-color-paper-ink-1)} :root[data-ag-theme] :is(.seg button.is-active,.seg button[aria-pressed="true"]){background:var(--ag-text-1);color:var(--ag-bg)} @media (hover:hover) and (pointer:fine){ :root[data-ag-theme] :is(.btn-line,.btn-glass,main .btn-ghost,main .btn-ghost-dark,.lr-btn,.theme-toggle,a.c-card,.hk-csat-opt):hover{border-color:var(--ag-accent)} } /* fokusz: 2 px accent, 3 px eltartas; a logosor eleme a gorgeto sav belsejeben marad (kulonben a sav levagna) */ :root[data-ag-theme] :focus-visible{outline:2px solid var(--ag-accent);outline-offset:3px} :root[data-ag-theme] .lr-item:focus-visible{outline-offset:-2px} :root[data-ag-theme] .hk-csat-opt:focus-within{outline-color:var(--ag-accent)} :root[data-ag-theme] :is(.f-input,.hk-mezo input):focus{border-color:var(--ag-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--ag-accent) 22%,transparent)} :root[data-ag-theme] .prose a{text-decoration-color:var(--ag-accent)} /* ===================== 7. termekablak: fulek a tema szineivel (meret es mozgas valtozatlan) ===================== */ :root[data-ag-theme] .tw-tabs{background:color-mix(in srgb,var(--ag-text-1) 6%,var(--ag-surface))} :root[data-ag-theme] .tw-tab[aria-selected="true"]{background:var(--ag-text-1);color:var(--ag-bg)} :root[data-ag-theme] .tw-tabs--ind .tw-tab[aria-selected="true"]{background:transparent;color:var(--ag-text-2)} :root[data-ag-theme] .tw-ind{background:var(--ag-text-1)} :root[data-ag-theme] .tw-ind-l{color:var(--ag-bg)} :root[data-ag-theme] .demo-tag{color:var(--ag-tag-demo)} :root[data-ag-theme] .demo-tag::before{border-color:currentColor} /* ===================== 8. aurora: az 1. dia fenypárja (aigent.css .ag-aurora recept, tokenekbol) ===================== */ /* Feluletenkent egy par: kek bal fent, barack jobb lent, mindketto felig a feluleten kivul; 1440 alatt .75, 768 alatt .5. Teljes szelessegu szakasz: a folt a gyoker negativ retegeben all (nincs isolation, nincs overflow), igy minden tartalom es minden teli hatteru szakasz (feher sav, lablec, kartyak) alatta marad. Fuggolegesen lagyan atfolyik a szomszed szakaszba, ezert nincs eles vagasi vonal a szakaszhataron; vizszintesen a main overflow-x:clip-je vagja. Keretezett felulet (zaro sav, HK zaro, Rolunk motto): a folt a doboz sajat retegeben, a lekerekitett dobozra vagva. Elmosas (11. kor, Tomi dontese 2026-10-10, d2 „Brandbook-elmosas”): a csomag receptje (lib/aigent.css 13-27): teli korong (border-radius 50%, a token szine), filter: blur(elmosas x meretarany), a tokenek meretevel, helyevel, atlatszatlansagaval. Sajat reteg (transform: translateZ(0)): a WebKit a filtert festeskor szamolja; sajat reteg nelkul minden ujrafestesnel ujra. Merve (11. kor, meres.py, WebKit es Chromium 4x lassitassal, motoronkent 3 futas; kihagyott kocka = 25 ms-nal hosszabb): sajat reteg nelkul WebKitben foodali gorgetes 112/250, fulvaltas 32/274, hover 15/259; translateZ(0)-val 0 mindenhol (3 futas), will-change: transform-mal 3 futasbol egyben a lenyilonal 2/189, Chromiumban mindket valtozat 0-1 kocka/futas, a festesi ido a gradienses tartalekeval azonos szinten (foodali gorgetes 22-25 ms). Reszletek: MUNKAALLAPOT 11. kor. A 2. lepes elore kiszamolt gradiense tartalek: shared/aurora-gradiens.css, bekapcsolas a fajl elejen az @import sorral. */ :root[data-ag-theme] :is(.hero,.vi-hero,.ph-hero,.auth,.tw-sec,section.twin,section.caps,.band.wash){position:relative;isolation:auto;overflow:visible} :root[data-ag-theme] :is(.cta-band,.hk-zaro,.motto.wash){position:relative;isolation:isolate;overflow:hidden;clip-path:inset(0 round var(--ag-radius-card))} :root[data-ag-theme] :is(.hero,.vi-hero,.ph-hero,.auth,.tw-sec,section.twin,section.caps,.band.wash,.cta-band,.hk-zaro,.motto.wash){--ag-aurora-scale:1} @media (max-width:1439px){:root[data-ag-theme] :is(.hero,.vi-hero,.ph-hero,.auth,.tw-sec,section.twin,section.caps,.band.wash,.cta-band,.hk-zaro,.motto.wash){--ag-aurora-scale:.75}} @media (max-width:767px){:root[data-ag-theme] :is(.hero,.vi-hero,.ph-hero,.auth,.tw-sec,section.twin,section.caps,.band.wash,.cta-band,.hk-zaro,.motto.wash){--ag-aurora-scale:.5}} :root[data-ag-theme] :is(.hero,.vi-hero,.ph-hero,.auth,.tw-sec,section.twin,section.caps,.band.wash,.cta-band,.hk-zaro,.motto.wash)::before, :root[data-ag-theme] :is(.hero,.vi-hero,.ph-hero,.auth,.tw-sec,section.twin,section.caps,.band.wash,.cta-band,.hk-zaro,.motto.wash)::after{ content:"";position:absolute;inset:auto;border-radius:50%;pointer-events:none;z-index:-1;opacity:var(--ag-aurora-opacity); transform:translateZ(0)} :root[data-ag-theme] :is(.hero,.vi-hero,.ph-hero,.auth,.tw-sec,section.twin,section.caps,.band.wash,.cta-band,.hk-zaro,.motto.wash)::before{ width:calc(var(--ag-effect-aurora-a-size) * var(--ag-aurora-scale));height:calc(var(--ag-effect-aurora-a-size) * var(--ag-aurora-scale)); left:calc(var(--ag-effect-aurora-a-left) * var(--ag-aurora-scale));top:calc(var(--ag-effect-aurora-a-top) * var(--ag-aurora-scale)); background:var(--ag-effect-aurora-a-color);filter:blur(calc(var(--ag-effect-aurora-a-blur) * var(--ag-aurora-scale)))} :root[data-ag-theme] :is(.hero,.vi-hero,.ph-hero,.auth,.tw-sec,section.twin,section.caps,.band.wash,.cta-band,.hk-zaro,.motto.wash)::after{ width:calc(var(--ag-effect-aurora-b-size) * var(--ag-aurora-scale));height:calc(var(--ag-effect-aurora-b-size) * var(--ag-aurora-scale)); right:calc(var(--ag-effect-aurora-b-right) * var(--ag-aurora-scale));bottom:calc(var(--ag-effect-aurora-b-bottom) * var(--ag-aurora-scale)); background:var(--ag-effect-aurora-b-color);filter:blur(calc(var(--ag-effect-aurora-b-blur) * var(--ag-aurora-scale)))} /* teljes szelessegu szakaszok: a pasztell mosas helyett a tema alapja es a fenypár */ :root[data-ag-theme] :is(section.twin,section.caps,.band.wash){background:none} /* keretezett aurora-feluletek: a tema alapja, vekony vonal, a szoveg a tema szineivel (eddig fix sotet, pasztell alapra) */ :root[data-ag-theme] :is(.cta-band,.hk-zaro,.motto.wash){background:var(--ag-bg);border:1px solid var(--ag-line);color:var(--ag-text-1)} :root[data-ag-theme] :is(.cta-band p,.hk-zaro>div>p:not(.eyebrow)){color:var(--ag-text-2)} :root[data-ag-theme] .hk-zaro-kapcs a{color:var(--ag-text-1)} :root[data-ag-theme] .hk-zaro .hk-form{background:var(--ag-surface);border:1px solid var(--ag-line);color:var(--ag-text-1);box-shadow:var(--ag-card-shadow)} /* ===================== 9. abrak: graf- es grafikonszinek szerep szerint (brand-rules 3.5, 3.6) ===================== */ :root[data-ag-theme] .flow li:not(:last-child)::after{background:var(--ag-g-edge)} :root[data-ag-theme] .flow li:not(:last-child)::before{border-left-color:var(--ag-g-head)} :root[data-ag-theme] :is(.tl .num,.lep .sz){border-color:var(--ag-chart-mark)} :root[data-ag-theme] .tl li:last-child .num{border-color:var(--ag-text-1)} /* HK utemezes (.tl4): a negy szakasz a brandbook sorrendi skalaja, seq-1..4 (Tomi dontese 2026-10-10, d4 „Brandbook: 1-4”). A tokenek temafuggok (vilagos: chart-light-seq, sotet: chart-dark-seq), ezert kulon sotet szabaly nem kell. Tomi tudja, hogy a vilagos seq-1 es a sotet seq-4 a kartya alapjan 3:1 alatt marad (merve: _atadas/abra_kontraszt.py). */ :root[data-ag-theme] .tl4-bar i{opacity:1} :root[data-ag-theme] .tl4-bar i:nth-child(1){background:var(--ag-chart-seq-1)} :root[data-ag-theme] .tl4-bar i:nth-child(2){background:var(--ag-chart-seq-2)} :root[data-ag-theme] .tl4-bar i:nth-child(3){background:var(--ag-chart-seq-3)} :root[data-ag-theme] .tl4-bar i:nth-child(4){background:var(--ag-chart-seq-4)} /* hirdeteskezeles, problemakepek: a teli pasztell helyett kis aurora-kitoltes a kartya feluleten (brand-rules 3.3), a vonalak a tema szovegszinevel, igy sotetben is olvashatok (eddig sotetben a kozepes tonusu pasztellen a fokuszszin 1,3:1 volt). A „Vak meres” kep mini oszlopdiagramja a fokusz szinen (a markup valtozatlan, a 2. path az oszlopsor). */ :root[data-ag-theme] .prob-pic{background:linear-gradient(140deg,color-mix(in srgb,var(--ag-color-aurora-blue) 18%,var(--ag-surface)), color-mix(in srgb,var(--ag-color-aurora-lavender) 16%,var(--ag-surface)) 55%,color-mix(in srgb,var(--ag-color-aurora-peach) 18%,var(--ag-surface)))} :root[data-ag-theme] .prob-pic svg{stroke:var(--ag-text-1)} :root[data-ag-theme] :is(.prob-pic svg .tele,.prob-pic svg text){fill:var(--ag-text-1)} :root[data-ag-theme] .probs .prob:nth-child(4) .prob-pic svg path:nth-of-type(2){stroke:var(--ag-chart-focus)} /* osszehasonlito tabla: a kiemelt oszlop accent-alapu */ :root[data-ag-theme] .cmp .pcol{background:color-mix(in srgb,var(--ag-accent) 7%,transparent)} :root[data-ag-theme] .cmp thead .pcol{background:linear-gradient(180deg,color-mix(in srgb,var(--ag-accent) 16%,transparent),color-mix(in srgb,var(--ag-accent) 7%,transparent))} /* ===================== 10. haromszog-motivum (10. kor 4. lepes, 2026-10-09) ===================== */ /* Az eloadas „A mukodesi res” diajanak piramisa szoveg nelkul (_atadas/motivum_generalo.py -> brand11/motivum-haromszog*.svg, aurora-tokenek, vilagosban halkan, sotetben az eredeti szinek visszafogottan). Statikus dekoracio a foodal „Mi az a digitalis iker?” savjaban, a jobb also sarok szabad tereben. A szakasz ::before/::after-je az aurora-par, ezert hatterkep-reteg a szakaszon (az aurora alatta marad, a tartalom folotte; kattintast nem fog). A fajlagossag (0,4,1) a 8. szakasz es a csendes.css background:none-ja (0,4,0) folott all, ezert az opciokban is megmarad. Csak 1440 px-tol: ott a szoveg a lap kozepetol fix tavolsagra all (.wrap), a motivum kozepe a kozeptol +602 px-re, az alja 8 px-re a szakasz aljatol; keskenyebben nincs eleg szabad hely szoveg melle. Merve: _atadas/motivum_teszt.py (szovegre eso keppont 0, HU/EN, Chromium/WebKit, 390-1920). */ @media (min-width:1440px){ html:root[data-ag-theme] section.band.twin{background-image:url("brand11/motivum-haromszog.svg");background-repeat:no-repeat; background-size:220px auto;background-position:calc(50% + 602px) calc(100% - 8px)} html:root[data-theme="dark"][data-ag-theme] section.band.twin{background-image:url("brand11/motivum-haromszog-sotet.svg")} } /* ===================== 11. hos: nagy cim es halozat-hatter (11. kor, Tomi dontese 2026-10-10) ===================== */ /* Tomi (valasztasok.json d1, „Nagy cim”): „A Halozat hatteret szeretnem a nagy cimessel kombinalni. Telefonos nezetben a Halozat legyen!” Ezert: 768 px-tol a hos-focim a display tokent kapja (a B_opcio_nagycim megoldasa, shared/opciok/nagycim.css), 767 px-ig a 3. szakasz h1 tokenje marad (a Halozat valtozat telefonos nezete); a halo-hatter minden szelessegen (a B_opcio_halozat megoldasa, shared/opciok/halozat.css). Az opciok fajljai archivkent maradnak, a fo B nem tolti be oket. A szabalyok az opciok ertekeivel; a nagycim telefonos korlatja (min(display, 12.4vw)) 768 px-tol hatastalan (12.4vw >= 95 px > 88 px), ezert itt a token all; a bejelentkezo kartya cime ugyanigy 52 px. */ @media (min-width:768px){ /* kiegyensulyozott tores (text-wrap: balance): angolul enelkul 768-1440 kozott egy szo maradna a sor vegen (merve, 10. kor) */ :root[data-ag-theme] :is(.h5a h1,.vi-hero h1,.h1,.ph-hero h1,.auth-card h1){ font-family:var(--ag-type-display-family);font-weight:var(--ag-type-display-weight); font-size:var(--ag-type-display-size);line-height:var(--ag-type-display-lh);letter-spacing:var(--ag-type-display-ls); text-wrap:balance} /* Bejelentkezes: a cim egy 460 px-es kartyaban all, a vw-vel novekvo meret ott kilogna; a display token also erteke */ :root[data-ag-theme] .auth-card h1{font-size:52px} } /* Halo: az eloadas nyito (preshow) csomoponthaloja ALLOKEPKENT, halkan a hosok hattereben (fooldal .hero, VI .vi-hero, belso .ph-hero, bejelentkezes .auth). Kep: brand11/halo-vilagos.svg es halo-sotet.svg (_atadas/halo_generalo.py: tokens.json network-ertekek, seed 7; vilagosban az el a levendula olvashato valtozata, a reteg .9, sotetben a csomag erteke, .5). 1 SVG-egyseg = 1 CSS px, a kep a hos tetejen kozepre igazitva. NINCS animacio. Reteg: a hos ::before/::after-je az aurora-par, ezert a hos egyetlen .wrap gyermekenek ::before-ja (mind a 15 lapon szabad, a .wrap statikus, igy az inset:0 a hos dobozara feszul). z-index:-1 a hos nem lezart retegeben: az aurora mellett, minden tartalom alatt; kattintast nem fog. Maszk (ket reteg, metszet): (1) vizszintesen a szoveg alatt halvanyitva (alfa .35), teljes erovel csak ott, ahol nincs szoveg; (2) a hos aljan 96 px alatt elfogy (az also 4 px mar ures), hogy ne legyen eles vagas a kovetkezo szakasznal. A szoveg a .wrap tartalmi dobozaban all, amely 1202 px folott a lap kozepetol fix tavolsagra van (merve: kozep +-577 px, 1280-on +-584 px), ezert a maszk a kozephez mert. A display meretu cimmel (768 px-tol) a belso hosok cime is a doboz jobb szeleig erhet (merve: kozep + 573 px), ezert a halvany sav a tartalmi dobozt 16 px-szel meghaladja (11. kor; a Halozat opcioban +380/+500 es +-560/+-660 volt, a szoveg bal szele es a nagy cim jobb vege ott az atmeneti savba esett): altalanos belso hos: bal oldalt vegig halvany, jobbra halvany kozep + 600 px-ig, teljes kozep + 700 px-tol; fooldal, VI, bejelentkezes, HK- es demo-urlap: halvany kozep +-600 px-en belul, teljes +-700 px-en kivul. 980 px alatt egy oszlop: vegig halvany. Merve (a szovegsorok alatt a reteg ereje legfeljebb .35): _atadas/vegleges/halo_szoveg_teszt.py. */ :root[data-ag-theme] :is(.hero,.vi-hero,.ph-hero,.auth)>.wrap::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:url("brand11/halo-vilagos.svg") 50% 0/1920px 1080px no-repeat; --h-vizsz:linear-gradient(90deg,rgb(0 0 0/.35) calc(50% + 600px),#000 calc(50% + 700px)); --h-alja:linear-gradient(180deg,#000 calc(100% - 100px),transparent calc(100% - 4px)); -webkit-mask-image:var(--h-vizsz),var(--h-alja);-webkit-mask-composite:source-in; mask-image:var(--h-vizsz),var(--h-alja);mask-composite:intersect} :root[data-theme="dark"][data-ag-theme] :is(.hero,.vi-hero,.ph-hero,.auth)>.wrap::before{background-image:url("brand11/halo-sotet.svg")} /* teljes szelessegu szoveg vagy urlap; fajlagossag (0,5,1) a :has() miatt, a fenti (0,4,1) folott */ :root[data-ag-theme] :is(.hero,.vi-hero,.auth,.hk-hero,.ph-hero:has(>.form-shell))>.wrap::before{ --h-vizsz:linear-gradient(90deg,#000 calc(50% - 700px),rgb(0 0 0/.35) calc(50% - 600px),rgb(0 0 0/.35) calc(50% + 600px),#000 calc(50% + 700px))} @media (max-width:980px){ /* fajlagossag (0,5,2): mindket fenti szabaly folott */ html:root[data-ag-theme] :is(.hero,.vi-hero,.ph-hero,.auth,.ph-hero:has(>.form-shell))>.wrap::before{--h-vizsz:linear-gradient(rgb(0 0 0/.35),rgb(0 0 0/.35))} } /* 13. esemenysav (2026-10-11): elo eloadas visszaszamlaloja a fejlec folott (site.js). Vilagos temaban fekete feher betuvel, sotetben forditva. Az egesz sav egy link. Balra datum, kozepen cim, jobbra szamlalo (szam, alatta felirat). Telefonon a cim felul, alatta datum es szamlalo. A zold csak az elo allapotot jeloli (a markakonyv egyetlen funkcionalis zoldje). */ .esav{background:#17171C;color:#fff;border-bottom:1px solid rgba(255,255,255,.08);position:relative;z-index:51} .esav-a{display:block;color:#fff;text-decoration:none;transition:background-color var(--mz-hover,150ms) var(--mz-hover-ki,ease-out)} .esav-a:hover{background:#24242B} .esav-a:focus-visible{outline:2px solid #fff;outline-offset:-5px;border-radius:8px} .esav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:20px;min-height:62px;padding-top:10px;padding-bottom:10px} .esav-datum{justify-self:start;font-family:var(--mono);font-size:13.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.94);white-space:nowrap} .esav-cim{justify-self:center;text-align:center;font-weight:600;font-size:18px;letter-spacing:-.015em} .esav-jobb{justify-self:end;display:flex;align-items:center;gap:16px} .esav-szeg{display:flex;flex-direction:column;align-items:center;min-width:28px;line-height:1} .esav-szam{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;font-size:21px} .esav-cimke{margin-top:5px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)} .esav-elo{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase} .esav-dot{width:8px;height:8px;border-radius:50%;background:var(--live,oklch(0.68 0.16 155));box-shadow:0 0 0 0 rgba(46,160,90,.55);animation:esav-pulzus 1.8s ease-out infinite} @keyframes esav-pulzus{0%{box-shadow:0 0 0 0 rgba(46,160,90,.55)}70%{box-shadow:0 0 0 7px rgba(46,160,90,0)}100%{box-shadow:0 0 0 0 rgba(46,160,90,0)}} @media (max-width:760px){ .esav-in{grid-template-columns:1fr auto;grid-template-areas:"cim cim" "datum jobb";row-gap:8px;min-height:0;padding-top:10px;padding-bottom:10px} .esav-cim{grid-area:cim;font-size:16.5px}.esav-datum{grid-area:datum;font-size:12.5px}.esav-jobb{grid-area:jobb;gap:12px} .esav-szam{font-size:18px} .esav-tz{display:none} } @media (max-width:380px){.esav-in{column-gap:12px}.esav-jobb{gap:10px}.esav-datum{letter-spacing:.08em;font-size:12px}} /* sotet temaban forditott (Tomi, 2026-10-11): vilagos sav fekete betuvel */ :root[data-ag-theme="dark"] .esav{background:#FAFAF8;color:#17171C;border-bottom-color:rgba(23,23,28,.10)} :root[data-ag-theme="dark"] .esav-a{color:#17171C} :root[data-ag-theme="dark"] .esav-a:hover{background:#EDEDE8} :root[data-ag-theme="dark"] .esav-a:focus-visible{outline-color:#17171C} :root[data-ag-theme="dark"] .esav-datum{color:rgba(23,23,28,.88)} :root[data-ag-theme="dark"] .esav-cimke{color:rgba(23,23,28,.62)} @media (prefers-reduced-motion:reduce){.esav-dot{animation:none}.esav-a{transition:none}} @media print{.esav{display:none}} /* kepzokozpont-menu-2026-10-18: Képzőközpont menüpont miatt, mérve 1000/1101/1200/1321 px-en, túlcsordulás 0 */ .hdr .nav>a,.hdr .nav>.dd>button,.hdr-right>*{white-space:nowrap} @media (min-width:981px) and (max-width:1320px){.hdr .nav>a,.hdr .nav>.dd>button{font-size:15px;padding-left:7px;padding-right:7px}.hdr-right{gap:4px}.hdr-right a{font-size:15px}} @media (min-width:981px) and (max-width:1100px){.hdr-right .lang{display:none}}