/* ============================================================================= APP.CSS — a tokenek + tema folott. Minden ertek tokenre/temara hivatkozik. Nincs szabadon irt szin/meret; nincs inline stilus. Uj vizualis dontes -> token. ============================================================================= */ /* ---------------------------------------------------------------- Alap reset */ *, *::before, *::after { box-sizing: border-box; } /* overflow-x: clip a GYOKEREN (nem a body-n!): megvedi a vizszintes scrolltol, de a -val ellentetben NEM tori a body-gyerek position:sticky-t (a landing .lp-nav). A body barmilyen nem-'visible' overflow-ja (meg a 'clip' is) a viewport-propagacio miatt elrontja a sticky-t. */ /* scroll-padding-top: a horgony-navigacio (#features stb.) a FIXED nav ALA gorgessen, ne alaja. */ html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 5rem; } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-2); line-height: var(--lh-body); color: var(--text); background: var(--bg); /* NINCS overflow-x a body-n: az elrontana a body-gyerek position:sticky-t (a landing .lp-nav). A vizszintes-scroll vedelem a overflow-x:clip-jen van (lasd fent). */ -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } /* KULCSSZABALY: a H-tag NEM hatarozza meg a kinezetet. A cimsorok semlegesek, a stilust mindig a .t-* osztaly adja. Igy barmi lehet barmilyen, a szemantika (SEO/AI) es a design szetvalik. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; line-height: inherit; margin: 0; color: inherit; } p { margin: 0; } a { color: inherit; text-decoration: none; } /* ------------------------------------------------ Tipografia OSZTALYOK (5 param) Minden osztaly definialja: clamp meret, sortav, betukoz, text-decoration, szin. */ .t-eyebrow { font-family: var(--font-display); font-size: var(--fs-1); line-height: var(--lh-snug); letter-spacing: var(--ls-eyebrow); text-decoration: none; color: var(--accent); font-weight: 700; text-transform: uppercase; } .t-hero { font-family: var(--font-display); font-size: var(--fs-7); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); text-decoration: none; color: var(--heading); font-weight: 700; text-wrap: balance; } .t-display { font-family: var(--font-display); font-size: var(--fs-6); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); text-decoration: none; color: var(--heading); font-weight: 700; text-wrap: balance; } .t-title { font-family: var(--font-display); font-size: var(--fs-5); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); text-decoration: none; color: var(--heading); font-weight: 700; text-wrap: balance; } .t-subtitle { font-family: var(--font-display); font-size: var(--fs-4); line-height: var(--lh-heading); letter-spacing: var(--ls-normal); text-decoration: none; color: var(--heading); font-weight: 600; text-wrap: balance; } .t-lead { font-family: var(--font-body); font-size: var(--fs-3); line-height: var(--lh-body); letter-spacing: var(--ls-normal); text-decoration: none; color: var(--text-muted); font-weight: 400; text-wrap: pretty; } .t-body { font-family: var(--font-body); font-size: var(--fs-2); line-height: var(--lh-body); letter-spacing: var(--ls-normal); text-decoration: none; color: var(--text); font-weight: 400; text-wrap: pretty; } .t-small { font-family: var(--font-body); font-size: var(--fs-1); line-height: var(--lh-snug); letter-spacing: var(--ls-normal); text-decoration: none; color: var(--text-muted); font-weight: 400; } .t-label { font-family: var(--font-body); font-size: var(--fs-1); line-height: var(--lh-snug); letter-spacing: var(--ls-wide); text-decoration: none; color: var(--text); font-weight: 600; } .measure { max-width: var(--measure); } .grad-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } /* --------------------------------------------------------------- Layout raccs Hierarchia: body (100vw) > .section (full width, sajat hatter) > .container (site-width). */ .container { width: 100%; max-width: var(--site-width); margin-inline: auto; padding-inline: var(--container-pad); } .section { position: relative; padding-block: var(--section-pad); } .section--full > .container { max-width: none; } /* teljes szelesseg, ha a design keri */ .stack > * + * { margin-top: var(--sp-connected); } /* osszetartozo tartalom */ .stack-lg > * + * { margin-top: var(--sp-unconnected); } /* nem osszetartozo */ .section-head { text-align: center; margin-inline: auto; max-width: 60ch; margin-bottom: var(--sp-block); } .section-head > * + * { margin-top: var(--sp-connected); } /* ------------------------------------------------------------------ Gombok */ .btn-grad { display: inline-flex; align-items: center; gap: var(--sp-2xs); font-family: var(--font-display); font-weight: 700; color: var(--color-primary-contrast); background: var(--grad-brand); border: 0; border-radius: var(--radius-md); padding: 0.85rem 1.4rem; box-shadow: var(--shadow-glow); transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); } .btn-grad:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow-hover); } .btn-ghost { display: inline-flex; align-items: center; gap: var(--sp-2xs); font-family: var(--font-display); font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.85rem 1.4rem; transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .btn-ghost:hover { border-color: var(--accent); transform: translateY(-2px); } /* Zold variansa a kiemelt arazas-gombnak: UGYANAZ a gomb-forma (btn-ghost), csak a szin zold (tulajdonosi dontes: egyseges gomb-stilus, ne mas formaju/kitoltesu kiemeles). Tokenbol. */ .btn-ghost--green { color: var(--brand-green); border-color: color-mix(in srgb, var(--brand-green) 55%, var(--border)); } .btn-ghost--green:hover { border-color: var(--brand-green); } /* ============================================================ LANDING (WOW) */ .page-dark { background: var(--bg); color: var(--text); } /* Uveg-navigacio */ /* FIXED (nem sticky!): a landing menu SOHA nem tunhet el gorgeteskor. A sticky-t egyes bongeszok os-overflow eseten elrontjak; a fixed a viewporthoz rogzul, fuggetlenul az osok overflow-jatol (a cookie-sav is fixed -> bizonyitottan mukodik). A hero padding-top ad helyet alatta. */ .lp-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(160%) blur(12px); /* ceox-raw-ok: blur = effekt-geometria, nem layout-meret */ border-bottom: 1px solid var(--border); } .lp-nav .container { display: flex; align-items: center; justify-content: space-between; padding-block: var(--sp-sm); } .lp-brand { display: inline-flex; align-items: center; gap: var(--sp-2xs); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3); color: var(--heading); } .lp-brand .dot { width: 2rem; height: 2rem; display: inline-grid; place-items: center; border-radius: var(--radius-sm); background: var(--grad-brand); color: var(--color-on-brand); } .lp-navlinks { display: flex; align-items: center; gap: var(--sp-md); } /* A menupontok MINDIG ikonnal (gyar-default): inline-flex az ikon+szoveg igazitashoz. */ .lp-navlinks a { display: inline-flex; align-items: center; gap: var(--sp-3xs); color: var(--text-muted); font-weight: 600; } .lp-navlinks a:hover { color: var(--heading); } .lp-navlinks a svg, .lp-navlinks a .ico { width: 1.1em; height: 1.1em; flex: none; } /* A landing nav nyelvvaltoja PONTOSAN akkora betuvel, mint a tobbi menupont (--fs-2). A Tabler form-select-sm 12px-et adna; itt feluliruk + a magassagot a betumerethez igazitjuk. */ .lp-navlinks .lang-switcher .form-select { font-size: var(--fs-2); height: auto; line-height: var(--lh-snug); padding-block: var(--sp-3xs); } /* Hero: elo, mozgo hatter + gradiens cim */ /* padding-top megnovelve: a FIXED nav alatt kezdodjon a hero-tartalom (a nav ~4rem magas). */ .lp-hero { position: relative; overflow: hidden; text-align: center; padding-top: clamp(6.5rem, 10vw, 9rem); padding-bottom: clamp(4rem, 9vw, 8rem); } .aurora { position: absolute; inset: -20% -10% auto -10%; height: 120%; z-index: 0; pointer-events: none; filter: blur(12px); /* ceox-raw-ok: blur = effekt-geometria */ } .aurora::before, .aurora::after { content: ""; position: absolute; border-radius: 50%; opacity: 0.55; mix-blend-mode: screen; } .aurora::before { width: 46rem; height: 46rem; left: 4%; top: -12%; background: radial-gradient(circle at 30% 30%, var(--brand-indigo), transparent 60%); animation: floatA 14s var(--ease) infinite alternate; } .aurora::after { width: 42rem; height: 42rem; right: 2%; top: -6%; background: radial-gradient(circle at 60% 40%, var(--brand-violet), transparent 60%); animation: floatB 18s var(--ease) infinite alternate; } .lp-hero .container { position: relative; z-index: 1; } .lp-hero .t-hero { margin-inline: auto; max-width: 20ch; } .lp-hero .t-lead { margin-inline: auto; max-width: 46ch; margin-top: var(--sp-connected); } .lp-cta { display: flex; gap: var(--sp-sm); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-unconnected); } .lp-badges { display: flex; gap: var(--sp-md); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-block); color: var(--text-muted); } .lp-badges span { display: inline-flex; align-items: center; gap: var(--sp-3xs); } /* Elo demo-kartya a heroban (mozgo, szines — nincs raszterkep, tiszta CSS/SVG) */ .lp-stage { position: relative; z-index: 1; margin: var(--sp-block) auto 0; max-width: 56rem; border-radius: var(--radius-xl); border: 1px solid var(--border); background: linear-gradient(180deg, var(--glass-1), var(--glass-2)); box-shadow: var(--shadow-lg); overflow: hidden; } .lp-stage-bar { display: flex; align-items: center; gap: var(--sp-2xs); padding: var(--sp-xs) var(--sp-sm); border-bottom: 1px solid var(--border); } .lp-stage-bar i { width: 0.7rem; height: 0.7rem; border-radius: 50%; display: inline-block; } .lp-stage-body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-sm); padding: var(--sp-md); } .lp-metric { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-sm); background: var(--surface); } .lp-metric .n { font-family: var(--font-display); font-size: var(--fs-5); font-weight: 700; color: var(--heading); } .lp-bars { display: flex; align-items: flex-end; gap: 0.5rem; height: 5rem; margin-top: var(--sp-xs); } .lp-bars i { flex: 1; border-radius: var(--radius-xs) var(--radius-xs) 0 0; background: var(--grad-cool); animation: rise var(--dur-3) var(--ease) both; } @keyframes rise { from { transform: scaleY(0.05); transform-origin: bottom; } } .pulse-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--brand-green); box-shadow: 0 0 0 0 rgba(var(--brand-green-rgb), 0.6); animation: pulse 1.8s infinite; } @keyframes pulse { 70% { box-shadow: 0 0 0 0.6rem rgba(var(--brand-green-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--brand-green-rgb), 0); } } /* Glow-kartyak: per-szekcio akcenttel vilagitanak (mint a referencian) */ .glow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--sp-md); } .glow-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-md); background: var(--surface); transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } .glow-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: var(--shadow-accent-hover); } .glow-ico { width: 3rem; height: 3rem; display: inline-grid; place-items: center; border-radius: var(--radius-md); color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); margin-bottom: var(--sp-sm); } .glow-ico svg { width: 1.5rem; height: 1.5rem; } /* FAQ accordion — progressziv

: Bootstrap JS nelkul is nyilik (a vendorolt tabler.min.js nem tartalmaz Bootstrap JS-t, a data-bs-toggle collapse halott lenne). A kartya- kinezet a glow-kartyak nyelven (surface + border + radius), a nyil a details[open] allapotban CSS-sel fordul. Minden ertek tokenbol. */ .faq-list { display: grid; gap: var(--sp-2xs); } .faq-item { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; transition: border-color var(--dur-1) var(--ease); } .faq-item[open] { border-color: color-mix(in srgb, var(--accent) 55%, transparent); } .faq-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); padding: var(--sp-sm) var(--sp-md); cursor: pointer; list-style: none; } .faq-summary::-webkit-details-marker { display: none; } /* regi WebKit default nyil ki */ .faq-question { font-family: var(--font-display); font-size: var(--fs-3); line-height: var(--lh-heading); font-weight: 600; color: var(--heading); text-wrap: balance; } .faq-chevron { flex: none; color: var(--text-muted); transition: transform var(--dur-1) var(--ease); } .faq-item[open] .faq-chevron { transform: rotate(180deg); } .faq-summary:hover .faq-chevron { color: var(--accent); } .faq-answer { padding: 0 var(--sp-md) var(--sp-sm); color: var(--text-muted); } /* Arazas: a Tabler pricing-TABLE (osszehasonlito matrix) a landing sotet glow-szinvilagahoz. Huen a Tabler-blokkhoz: table-bordered (halvany fuggoleges+vizszintes osztas), kozepre igazitott pipa/x, CSAK a kiemelt oszlop gombja kulonleges, tfoot-ban ismet a gombok. */ .pricing-table.table { color: var(--text); background: transparent; margin: 0; } /* Alap: MINDEN cella kozepre (ar-oszlopok: nev, ar, gomb, pipa/x). Kivetel: az intro (elso fejlec-cella) es a feature-nev (elso oszlop) balra igazitva. */ .pricing-table th, .pricing-table td { border: 1px solid var(--border); vertical-align: middle; text-align: center; } .pricing-table thead td { vertical-align: top; padding: var(--sp-md); } .pricing-table .pricing-intro, .pricing-table .pricing-feature { text-align: left; white-space: normal; } .pricing-intro .t-body { color: var(--text-muted); margin-top: var(--sp-2xs); max-width: 34ch; } .pricing-col { min-width: 12rem; } .pricing-col .t-eyebrow { color: var(--heading); } /* oszlopnev FEHER */ .pricing-price { font-family: var(--font-display); font-weight: 700; line-height: var(--lh-tight); } .pricing-table .pricing-price { font-size: var(--fs-5); color: var(--heading); } /* ar FEHER */ .pricing-period { color: var(--text-muted); margin-bottom: var(--sp-sm); } .pricing-table .btn-ghost { width: 100%; justify-content: center; } .pricing-table .subheader { color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: var(--fs-1); font-weight: 700; background: var(--surface); text-align: left; padding: var(--sp-2xs) var(--sp-md); } .pricing-table tbody td { padding: var(--sp-xs) var(--sp-md); } .pricing-feature { color: var(--text); } .pricing-table tfoot td { padding: var(--sp-md); border-bottom: 0; } /* A pipa/x SZINE a WRAPPER spanen (tokenbol) — igy MINDEN kornyezetben zold/tompa, fuggetlenul attol, hogy a {% tabler_icon %} inline SVG-t adott (dev/preview, van vendor_src forras) vagy webfont -re esett vissza (eles: az SVG-forras nincs a deployban). A currentColor mindket markupban oroklodik; a korabbi `.pricing-yes svg`-only szabaly a webfont-agat kihagyta, ezert az ELES oldalon nem voltak zoldek a pipak. */ .pricing-yes { color: var(--brand-green); } .pricing-no { color: var(--text-muted); opacity: 0.45; } /* Az ikon inline-block, hogy a cella text-align:center TENYLEG kozepre tegye (a globalis `svg{display:block}` reset kulonben balra rakja); a webfont-ag meretet a .ti kapja. */ .pricing-yes svg, .pricing-yes .ico, .pricing-no svg, .pricing-no .ico { width: 1.2rem; height: 1.2rem; display: inline-block; } .pricing-yes .ti, .pricing-no .ti { font-size: 1.2rem; } .pricing-value { font-weight: 700; color: var(--heading); } /* CTA sav */ .cta-band { border-radius: var(--radius-xl); padding: clamp(2.5rem, 5vw, 4rem); text-align: center; color: var(--color-on-brand); background: var(--grad-brand); box-shadow: var(--shadow-lg); } /* Cookie-hozzajarulasi sav — fixen alul, temaadaptiv (vilagos+sotet), csak tokenbol */ .cookie-consent { position: fixed; inset: auto 0 0 0; z-index: 100; padding: var(--sp-sm); pointer-events: none; } .cookie-consent__inner { pointer-events: auto; max-width: var(--site-width); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-sm) var(--sp-md); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-sm) var(--sp-md); box-shadow: var(--shadow-lg); } .cookie-consent__text { flex: 1 1 22rem; margin: 0; color: var(--text); } .cookie-consent__text a { color: var(--accent); text-decoration: underline; } .cookie-consent__actions { display: flex; gap: var(--sp-sm); flex-wrap: wrap; } /* App-oldalon (van ikon-sav): a FIX cookie-sav ne takarja a rail Kilepes-gombjat, se a tartalom aljat (utolso tablasor). A margin-left a rail szelessegevel told el a savot; a padding-bottom CSAK amikor a sav tenyleg latszik (nincs meg consent-dontes) tart fenn also helyet. */ body:has(.app-rail) .cookie-consent__inner { margin-left: calc(var(--rail-w, 4.5rem) + var(--sp-md)); } body:has(.cookie-consent) .app-content { padding-bottom: calc(var(--sp-md) + 6rem); } /* ============================================================ MOBIL ALSO NAVIGACIO (6/M) A hovelyk termeszetes zonaja a kepernyo ALJA; a bal felso sarok a legnehezebben elerheto pont. Mobilon (<=790px) ezert az ikon-sav ALULRA kerul, tab-bar alakban — a rail es a sav KOLCSONOSEN kizarja egymast, egy kepernyon sose latszik mindketto. RETEG: a sav a rail helyet veszi at, ezert a rail tokenjet hasznalja (nem talalunk ki ujat). ERINTES: min. 44px magas elem (WCAG 2.5.8). SAFE-AREA: az iPhone home-indikatora ala nem csuszhat a tartalom. GORGETES: natv overflow-x + scroll-snap — soprésre jar, DE minden cel sima link is marad. */ .app-tabbar { display: none; } @media (max-width: 790px) { /* A rail eltunik — helyette az also sav. A shell igy egyszeru fuggoleges folyam lesz. */ .app-shell .app-rail { display: none; } /* ERINTESI MINIMUM MINDENHOL (alkotmany 6/M-B: "minden interaktiv elem legalabb 44x44 CSS-px ... a gombokra, a nav-elemekre, a tabla-akciokra es a bezaro ikonokra is all"). 2026-07-27-ig ez CSAK a tab-barra teljesult: a Tabler alap `.btn` es `.form-control` 40px magas, tehat a TELJES belso felulet es minden urlap a torveny alatt volt — merve 390x844-en (Fiok-oldal 5/5 gomb, regisztracio mezoi es gombja: mind 40px). A kapu is vak volt ra: a mobil E2E kizarolag az `.app-tabbar__item`-et merte. A `min-height` (nem `height`) SZANDEKOS: a tobbsoros/nagyobb vezerlok tovabb nohetnek. */ .btn, .form-control, .form-select, .form-selectgroup-label { min-height: var(--tap-min); } /* A gomb tartalma fuggolegesen kozepre — a min-height kulonben felulra tolna a szoveget. */ .btn { display: inline-flex; align-items: center; justify-content: center; } .app-tabbar { display: flex; position: fixed; inset: auto 0 0 0; z-index: var(--z-rail); background: var(--surface); border-top: 1px solid var(--border); /* A home-indikator ala ne csusszon a tartalom (iPhone). */ padding-bottom: env(safe-area-inset-bottom, 0px); overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .app-tabbar::-webkit-scrollbar { display: none; } .app-tabbar__item { flex: 1 0 auto; min-width: 4.5rem; /* WCAG 2.5.8: legalabb 44x44 CSS-px erintesi terulet (token: tokens.css --tap-min). */ min-height: var(--tap-min); scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3xs); padding: var(--sp-2xs) var(--sp-xs); background: none; border: 0; color: var(--text-muted); text-decoration: none; font-size: var(--fs-1); line-height: 1.1; } .app-tabbar__item .ti { font-size: var(--fs-3); } .app-tabbar__item.is-active { color: var(--accent); } .app-tabbar__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* A tartalom alja NE kerulhessen a sav ala (alkotmany 6/M-D). A `.app-shell` prefix NEM diszites: a lentebbi "App finomitas" blokk `.app-content { padding-block: var(--sp-md) }` szabalya AZONOS specificitasu es KESOBB all a fajlban, ezert 2026-07-27-ig NEMAN felulirta ezt — a tartalom also terkoze 24px volt, miközben a sav 54px magas, tehat a Kilepes-gomb belelogott a savba (merve 390x844-en). A meres nelkul ez lathatatlan maradt volna: a mobil E2E csak a vizszintes tullogast es a sav pozíciojat nezte, a TAKARAST nem. */ .app-shell .app-content { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px)); } /* A cookie-sav az also nav FOLE csuszik, nem RA (alkotmany 6/M-D): a ket sav egyszerre is lathato lehet, es a jogi dontest semmi nem takarhatja el. A rail-eltolas mobilon ertelmetlen (nincs rail), ezert azt is visszavonjuk. */ body:has(.app-tabbar) .cookie-consent { bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px)); } body:has(.app-rail) .cookie-consent__inner { margin-left: 0; } body:has(.cookie-consent) .app-shell .app-content { padding-bottom: calc(4.25rem + 8rem + env(safe-area-inset-bottom, 0px)); } } /* Styleguide belso menu — a Tabler preview-menu mintajara csoportositva. Csak a doc-shellben letezik; a valos app-navigaciohoz semmi koze. Tokenbol, sajat osztalyokkal. */ .sg-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--sp-md); padding: var(--sp-md); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .sg-menu__group { display: flex; flex-direction: column; gap: var(--sp-3xs); } .sg-menu__group .t-label { margin: 0 0 var(--sp-3xs); color: var(--text-muted); } .sg-menu a { color: var(--text); text-decoration: none; font-size: var(--fs-1); } .sg-menu a:hover, .sg-menu a:focus-visible { color: var(--accent); text-decoration: underline; } /* A fix .lp-nav ala gorduljon a horgony, ne alá. */ html { scroll-padding-top: 5rem; } /* ============================================================ Toast (felugro ertesites) SAJAT implementacio, tokenbol. MIERT nem a Tabler .toast: a vendorolt tabler.min.js NEM tartalmaz Bootstrap JS-t (window.bootstrap undefined), tehat a .toast VISELKEDESE nem letezik — es a .toast CSS-szabalyok meglete a vendor buildben sem garantalt (van precedens hianyzo Tabler-osztalyokra: .pricing-*, .hero-*). Igy a megjelenest is mi adjuk. HELY: jobb felul. Alul a cookie-sav ul (jogi dontes — nem takarhato), balra a rail Kilepes-gombja. A landing/legal/docs fix navja ala a --toast-top told le. */ .toast-stack { position: fixed; top: var(--toast-top, var(--sp-sm)); right: var(--sp-sm); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--sp-2xs); width: min(26rem, calc(100vw - 2 * var(--sp-sm))); /* A konteneri live-regio MINDIG a DOM-ban ul (uresen is) — a kepernyoolvaso csak igy olvassa fel a kesobb erkezo uzenetet. Ezert nem foghatja el a kattintast. */ pointer-events: none; } body.page-dark { --toast-top: 5rem; } /* landing/legal/docs: a FIX nav ala */ .toast-item { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--sp-2xs); padding: var(--sp-xs) var(--sp-sm); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 4px solid var(--toast-accent, var(--border)); /* ceox-raw-ok: szinjelzo sav vastagsaga — dekorativ konstans */ border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: var(--fs-1); line-height: var(--lh-snug); transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } .toast-item.is-leaving { opacity: 0; transform: translateX(0.75rem); } .toast-item__icon { font-size: var(--fs-3); line-height: 1; color: var(--toast-accent, var(--text-muted)); } .toast-item__body { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .toast-item__close { flex: 0 0 auto; background: none; border: 0; padding: 0 var(--sp-3xs); color: var(--text-muted); cursor: pointer; font-size: var(--fs-2); line-height: 1; } .toast-item__close:hover, .toast-item__close:focus-visible { color: var(--text); } .toast-success { --toast-accent: var(--color-success); } .toast-danger { --toast-accent: var(--color-danger); } .toast-warning { --toast-accent: var(--color-warning); } .toast-info { --toast-accent: var(--color-info); } .toast-secondary { --toast-accent: var(--text-muted); } @media (max-width: 790px) { .toast-stack { left: var(--sp-2xs); right: var(--sp-2xs); width: auto; } } /* Scroll-reveal — PROGRESSZIV: alapban LATHATO. Csak akkor rejtjuk el az animaciohoz, ha a JS aktiv (.js-reveal a -en). Igy no-JS es a keresok/AI is latjak a tartalmat. */ .js-reveal .reveal { opacity: 0; transform: translateY(var(--reveal-shift)); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .js-reveal .reveal.in { opacity: 1; transform: none; } @keyframes floatA { to { transform: translate(4%, 6%) scale(1.08); } } @keyframes floatB { to { transform: translate(-5%, 4%) scale(1.12); } } /* ============================================================ Reszponziv tablazat Szabaly: min cellaszelesseg ~60% desktop; X-tengelyen scroll. A sticky fejlec a tabla SAJAT, fuggolegesen gorgetheto kontenereben ertelmezett: a .table-scroll.table-sticky max-height + overflow-y scrollportot ad, a thead top:0-val ahhoz ragad. */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); } .table-scroll > table { min-width: 44rem; } /* cellak nem preselodnek ossze */ .table-scroll th, .table-scroll td { white-space: nowrap; } .table-scroll.table-sticky { max-height: var(--table-max-h); overflow-y: auto; } .table-sticky thead th { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--surface); } /* ---- KARTYAS MOBIL TABLA (.table-cards, <=790px) -------------------------------------- Az UZLETI listak (ugyfelek, szamlak) mobilon kartyava allnak: EGY tablazat, EGY DOM — nincs duplikalt "mobil markup", tehat nem tud a ketto szetcsuszni, es a kepernyoolvaso sem hallja ketszer. A fejlec a cellakba koltozik: minden `` a sajat cimkejet a `::before`-bol kapja (a cimke forrasa a NEZET `columns` listaja) — igy SEMMI nem tunik el (alkotmany M/F: rejtes helyett atrendezes). A `.table-scroll` X-scrollja itt ertelmetlen: a `min-width`-et es a `nowrap`-ot is oldjuk, kulonben a kartya tulnyulna a viewporton. Szakmai osszehasonlito tablanal (ahol a sorok EGYMAS MELLETT ertelmesek) NE ezt hasznald: `mobile="scroll"` -> marad az X-scroll. */ @media (max-width: 790px) { .table-cards { overflow-x: visible; } /* a kartya nem log ki: nincs mit gorgetni */ .table-cards > table { min-width: 0; } .table-cards thead { display: none; } /* a cimke a cellakba koltozott, nem veszett el */ .table-cards table, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: auto; } .table-cards tr { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-xs) var(--sp-sm); margin-bottom: var(--sp-2xs); } .table-cards td { border: 0; padding: var(--sp-3xs) 0; white-space: normal; } /* A Tabler `.card-table` az ELSO/UTOLSO oszlopnak extra oldal-paddingot ad (a kartya belso margojahoz igazitja) — kartya-modban ez az elso cella cimkejet beljebb tolna, mint a tobbit. A `[data-label]` + `:first-child` egyutt magasabb specificitas, ezert a vendor-szabalytol FUGGETLENUL nyer (a tabler.min.css retegezetlen: a @layer sorrend itt nem dontene). */ .table-cards td[data-label]:first-child, .table-cards td[data-label]:last-child { padding-inline: 0; } .table-cards td[data-label] { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); } .table-cards td[data-label]::before { content: attr(data-label); color: var(--text-muted); font-size: var(--fs-1); flex: 0 0 auto; } .table-cards td.text-end { text-align: left; } /* a flex mar a sor vegere tolja az erteket */ } /* ============================================================ MODAL (Tabler markup, Bootstrap JS nelkul) A vendorolt tabler.min.js NEM tartalmaz Bootstrap JS-t: a lathatosagot a .show osztaly adja (app.js initModals), a sotetito backdrop MAGA a .modal elem hattere (igy a dialoguson kivuli kattintas zar, kulon backdrop-elem nelkul). A hatter-gorgetest a html.modal-lock tiltja — a -en, SOHA nem a body-n (a body overflow elrontana a body-gyerek position:sticky-t, lasd frontend/layout.md). RETEG: a modal a z-index skala TETEJE (--z-modal) — szandekosan a rail/menu FOLE. A backdrop (maga a .modal hattere) BLUR-oz: a hatarain tuli ALAP kepernyoreszek (a menut is beleertve) homalyba kerulnek (--overlay szinreteg + --overlay-blur homalyositas). */ .modal.show { display: block; background: var(--overlay); backdrop-filter: blur(var(--overlay-blur)); -webkit-backdrop-filter: blur(var(--overlay-blur)); z-index: var(--z-modal); } /* A dialogus KARTYA-szeru: hatar + sugar + arnyek + felszin — mind tokenbol (a Tabler-defaultot a keret sajat ertekeire rogzitjuk, hogy szandekos merete/hatara legyen; a kozepre-igazitast a markup .modal-dialog-centered adja, a max-szelesseg a Tabler .modal- modositokbol). */ .modal .modal-content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } html.modal-lock { overflow: hidden; } /* BOTTOM SHEET (`variant="sheet"`) — CSAK MOBILON mas: a lap alulrol csuszik fel, a hovelyk zonajaban. Desktopon SZANDEKOSAN valtozatlan kozepre zart dialogus marad: ott az also lap nem nyer semmit, viszont elszakadna a megszokott modal-nyelvtol. A mukodes (Escape, backdrop, fokusz-csapda, overlay-verem, vissza-gomb) valtozatlanul az app.js initModals-e — ez tisztan megjelenitesi valtozat. */ @media (max-width: 790px) { .modal-sheet.show .modal-dialog { position: fixed; inset: auto 0 0 0; /* also elre feszitve */ margin: 0; max-width: none; } .modal-sheet .modal-content { /* Csak a FELSO sarkok kerekek: a lap a kepernyo aljabol "no ki". */ border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; /* A tartalom sose logjon a kepernyo folé; hosszabb lap belul gorget. `dvh`, mert a mobil bongeszo eltuno cimsora a `vh`-t hazuggá teszi (alkotmany 6/M-C). */ max-height: 85dvh; overflow-y: auto; /* iPhone home-indikator: a zaro gombsor ne kerulhessen ala. */ padding-bottom: env(safe-area-inset-bottom, 0px); } /* Fogantyu: vizualis jelzes, hogy ez egy also lap. Dekoracio — a zaras a gombbal/backdroppal tortenik (a lehuzas-gesztus kulon kor lenne, es az M/E szerint sose lehet az EGYETLEN ut). */ .modal-sheet .modal-header::before { content: ""; position: absolute; top: var(--sp-2xs); left: 50%; transform: translateX(-50%); width: 2.25rem; height: 0.25rem; border-radius: var(--radius-pill); background: var(--border); } .modal-sheet .modal-header { position: relative; padding-top: var(--sp-md); } } /* ============================================================ ENTRANCE (anonim auth-chrome + fizetesi kor) qwiz-stilusu belepo (kornyezeti alkotmany 9.): a kartya MOGOTT a landing sotet hattere latszik (a .page-dark szin-scope + aurora), egy blur-retegen at; a kartya kozepre zart, VILAGOS Tabler- kartya marad (a Tabler-valtozok a gyokeren, vilagos temaval oldodnak fel — a .page-dark csak a SAJAT tokenjeinket forditja sotetre, azt is csak a kartyan KIVULI chrome-szovegekhez). Feher-semmiben lebego auth-kartya TILOS. Markup: .page.page-center.page-dark.entrance > .entrance__bg (aurora + ::after blur-fatyol) + .entrance__content (a kartya retege). */ .entrance { position: relative; overflow: hidden; } .entrance__bg { position: absolute; inset: 0; pointer-events: none; } /* Blur-fatyol a hatter FELETT, a kartya ALATT: a backdrop-filter a mogotte kirajzolt retegeket (aurora + sotet alap) homalyositja — a meglevo --overlay-blur tokennel, JS nelkul. */ .entrance__bg::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 30%, transparent); backdrop-filter: blur(var(--overlay-blur)); -webkit-backdrop-filter: blur(var(--overlay-blur)); } .entrance__content { position: relative; z-index: 1; } /* A kartyan KIVULI chrome-szovegek a sotet hatterhez igazodnak (a .page-dark scope tokenjei). */ .entrance .navbar-brand { color: var(--heading); } .entrance__hint { color: var(--text-muted); } .entrance__hint a { color: var(--heading); } /* Vedoreteg: a kartya betu-szine a GYOKER (vilagos) Tabler-ertekbol jon, ne a .page-dark scope vilagos --text tokenjebol orokoljon (vilagos szoveg vilagos kartyan = olvashatatlan). */ .entrance .card { color: var(--tblr-body-color); } /* ============================================================ FULEK (Tabler nav-tabs, app.js initTabs) A tabler.min.js NEM tartalmaz Bootstrap JS-t: a fulvaltast az initTabs vegzi (.active + aria). Az inaktiv panel rejtve — sajat, tokenmentes megjelenites-szabaly (csak display), hogy ne a vendor .tab-pane osztalyra tamaszkodjunk. */ [data-tab-panel]:not(.active) { display: none; } /* A tab BELSO (panel) terulete a kartyanal SZURKEBB retegen ul (--surface-2 — mindket szinmodban definialt: vilagoson szurkebb, soteten melyebb) — finom hatter-elkulonites, mint a Tabler admin-sablon Tabs-oldalan. A panel a fulsor also vonalahoz simul (a markupban a .tab-content NEM kap kulon terkozt), a felso sarkai ezert szogletesek; az aktiv ful hattere a panellel azonos retegre valt, igy vizualisan osszeer a fullel. */ [data-tabs] .tab-content { background: var(--surface-2); border-radius: 0 0 var(--radius-md) var(--radius-md); padding: var(--sp-sm) var(--sp-md); } /* Az aktiv ful szoveg-szine is tokenbol (--heading): a Tabler sotet-modu aktiv-szine a vilagos panel-hatterhez keszult — a mi surface-2 hatterunkon kontraszt-vesztes lenne. */ [data-tabs] .nav-tabs .nav-link.active { background-color: var(--surface-2); color: var(--heading); } /* ============================================================ VARAZSLO (tobblepeses urlap, app.js initWizard) Kliens-oldali lepegetes CSAK megjelenites — a mervado validacio szerver-oldali. Az inaktiv lepes rejtve (csak display), az aktivat az initWizard .active-kal jeloli. */ [data-wizard] [data-step]:not(.active) { display: none; } /* ============================================================ ONBOARDING (pay-first kor kepernyoi) SZELESEBB, szellosebb kartya a keskeny Tabler .container-tight (~30rem) helyett: a pay-first kor MINDEN kepernyoje (register-varazslo, checkout_success/cancel, register_complete) ezt hasznalja, igy az egyseges 6-lepeses stepper vegig azonos szelessegen ul, es a mezok kapnak levegot. A site-width korlaton (layout.md) belul marad; mobilon a kartya-padding visszafogva a stepper 6 lepesenek. Az entrance-hatter (blur + aurora) valtozatlanul mogotte szol. */ .onboarding-card { width: 100%; max-width: 40rem; } @media (max-width: 790px) { .onboarding-card .card-md > .card-body { padding: var(--sp-md); } } /* ACCOUNT-FIRST (2026-07): a stepper FIX 5 lepes (Csomag/Fiok/Ceg/Osszegzes/E-mail ellenorzes) — a fizetes mar nem a regisztracios kor resze, ezert a korabbi csomag-fuggo rovidites (.onboarding-steps--free + .step-onboarding--pay) es a hozza tartozo JS-toggle megszunt. */ /* Ikon: mindig SVG, aktualis szinnel */ .ico { width: 1.25rem; height: 1.25rem; display: inline-block; vertical-align: -0.15em; stroke: currentColor; fill: none; } /* ============================================================ APP SHELL (ikon-sav) Tiszta, minimal belso keret: keskeny, osszecsukhato ikon-sav + fluid munkaterulet. Csak tokenbol; a sav szelessege lokalis valtozobol (--rail-w / --rail-w-open). A nyitott/csukott allapotot a .is-open osztaly vezerli (UI-ONLY app.js, localStorage). IGAZITAS: a shell flex-sor — a rail flex-basisa a --rail-w/--rail-w-open, a .app-main pedig KOZVETLENUL a rail jobb szele utan folyik. Igy a tartalom bal szele MINDIG a rail aktualis (csukott/nyitott) jobb szelehez igazodik, kulon margo-szamitas nelkul; a .is-open valtas a rail szelesseget (es vele a tartalom kezdopozíciojat) egyutt animalja. */ /* A BELSO (tomor) tipusskala — kulon selektorban, hogy a /styleguide/ is meg tudja mutatni. A styleguide `.doc-shell`-ben fut (16->18px torzs), tehat enelkul az "elo referencia" HAZUDNA: mas meretet mutatna, mint amit a valos belso kepernyokon lat a felhasznalo. */ .app-shell, .type-compact { /* ---------- BELSO TIPUSSKALA: a torzs 14px, es az EGESZ skala egy fokkal lejjebb csuszik. TULAJDONOSI DONTES (2026-07-26) — felulirja a project/DO_NOT_CHANGE.md korabbi "a torzs 16->18px nem alkukepes" kikoteset, KIZAROLAG a belso (app-shell) feluleten. MIERT: a belso resz adat-suru munkafelulet (tablazatok, urlapok, KPI-k), ott a tomorebb szedes tobb informaciot mutat egy kepernyon. A LANDING es az auth/entrance kepernyok ERINTETLENEK — ott marad a 16->18px olvasas-optimalizalt torzs. A skala EGYUTT csuszik: ha csak a torzs menne 14-re, a kotelezo oldalfejlec alcime (.t-lead) 4-8px-cel a torzs FOLE ugrana, es a belso kepernyok szetesnenek. A skala ALJA marad 14px (--fs-1): ennel kisebb szoveg nincs (frontend/typography.md). Kovetkezmeny, amivel egyutt elunk: a torzs es a masodlagos szoveg egy meretre kerul — a kulonbseget a SZIN es a SULY adja (.t-small: --text-muted, .t-label: 600). ---------- */ --fs-2: 0.875rem; /* 14px torzs (volt: 16->18) */ --fs-3: clamp(1rem, 0.875rem + 0.25vw, 1.125rem); /* 16->18 (a globalis --fs-2) */ --fs-4: clamp(1.125rem, 0.875rem + 0.5vw, 1.375rem); /* 18->22 (a globalis --fs-3) */ --fs-5: clamp(1.375rem, 1rem + 0.75vw, 1.75rem); /* 22->28 (a globalis --fs-4) */ --fs-6: clamp(1.75rem, 1.125rem + 1.25vw, 2.375rem); /* 28->38 (a globalis --fs-5) */ --fs-7: clamp(2.25rem, 1.125rem + 2.25vw, 3.375rem); /* 36->54 (a globalis --fs-6) */ /* A Tabler komponensek (kartya, tabla, gomb, form-control) SAJAT levert hasznalnak — a tokent onmagaban nem kovetik. Enelkul a szoveg 14px lenne, a Tabler-vezerlok 16px. */ --tblr-body-font-size: 0.875rem; /* A `body` a shellen KIVUL van, tehat a globalis --fs-2-bol szamolt PX-et orokitene ide. Ezert a shellen ujra fel kell venni a (mar felulirt) tokent. */ font-size: var(--fs-2); } .app-shell { --rail-w: 4.5rem; --rail-w-open: 15rem; display: flex; align-items: stretch; min-height: 100vh; min-height: 100dvh; background: var(--bg); } .app-rail { flex: 0 0 var(--rail-w); width: var(--rail-w); display: flex; flex-direction: column; gap: var(--sp-2xs); padding: var(--sp-xs) var(--sp-2xs); background: var(--surface); border-right: 1px solid var(--border); position: sticky; top: 0; height: 100vh; height: 100dvh; /* 'visible' (nem hidden), hogy a rail aljan nyilo fiok-popover (dropup) ne vagodjon le. A feliratok csukott savban amugy is width:0-ra csukodnak (.app-rail__label), a nav sajat overflow-y-t kezel, igy sem vizszintes, sem fuggoleges tullogas nem keletkezik. */ overflow: visible; /* RETEG: a rail a legmagasabb NORMAL reteg (--z-rail) — a tartalom SOHA nem takarja. A fiok-popover meg felette (--z-rail-flyout); egyedul a modal kerul foleje (--z-modal). */ z-index: var(--z-rail); transition: flex-basis var(--dur-2) var(--ease), width var(--dur-2) var(--ease); } .app-shell.is-open .app-rail { flex-basis: var(--rail-w-open); width: var(--rail-w-open); } /* NINCS flex-wrap (tulajdonosi dontes, 2026-07): a brand + toggle EGY sorban marad — a toggle a menu mellett/tetejen ul, nem torik a rail masodik (feher) savjaba. */ .app-rail__head { display: flex; align-items: center; gap: var(--sp-2xs); padding: var(--sp-2xs); min-height: 3rem; } .app-rail__brand { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border-radius: var(--radius-md); background: var(--grad-cool); color: var(--color-on-brand); font-size: var(--fs-4); } .app-rail__brandname { font-family: var(--font-display); font-weight: 700; color: var(--heading); } .app-rail__toggle { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; margin-left: auto; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-muted); cursor: pointer; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .app-rail__toggle:hover { background: var(--surface-2); color: var(--heading); } .app-rail__nav { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--sp-3xs); overflow-y: auto; overflow-x: hidden; } .app-rail__foot { margin-top: auto; padding-top: var(--sp-2xs); border-top: 1px solid var(--border); } .app-rail__foot form { margin: 0; } .app-rail__item { display: flex; align-items: center; gap: var(--sp-2xs); width: 100%; padding: var(--sp-3xs); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-muted); cursor: pointer; text-align: left; font-family: var(--font-body); font-size: var(--fs-2); transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); } .app-rail__item:hover { background: var(--surface-2); color: var(--heading); } .app-rail__item.is-active { background: rgba(var(--color-primary-rgb), 0.12); color: var(--color-primary); } .app-rail__ico { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; font-size: var(--fs-3); } .app-rail__item--danger { color: var(--color-danger); } .app-rail__item--danger:hover { background: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-danger); } /* A feliratok csak nyitott savban latszanak; csukva a keskeny ikon-sav marad. */ .app-rail__label { white-space: nowrap; overflow: hidden; opacity: 0; width: 0; transition: opacity var(--dur-1) var(--ease); } .app-shell.is-open .app-rail__label { opacity: 1; width: auto; } /* Fiok-menu a rail aljan (fogaskerek + user nev -> kilepes popover). */ .app-rail__foot.dropup { position: relative; } .app-rail__username { font-weight: 600; color: var(--heading); } /* Explicit dropup-pozicionalas: Bootstrap JS/Popper NINCS, ezert a .dropup nem helyezne a trigger FOLE — kezzel tesszuk a foot fole (bottom:100%), balra igazitva. A .show (tabler.min.css) adja a megjelenitest (display:block). */ .app-rail__dropdown { position: absolute; bottom: calc(100% + var(--sp-3xs)); left: 0; top: auto; margin: 0; min-width: 13rem; padding: var(--sp-3xs); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); background: var(--surface); z-index: var(--z-rail-flyout); } .app-rail__dropdown form { margin: 0; } .app-rail__menuitem { display: flex; align-items: center; gap: var(--sp-2xs); width: 100%; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); cursor: pointer; text-decoration: none; font-family: var(--font-body); font-size: var(--fs-2); } .app-rail__menuitem:hover, .app-rail__menuitem:focus { background: var(--surface-2); color: var(--heading); } .app-rail__menuitem .app-rail__ico { width: 2rem; height: 2rem; font-size: var(--fs-3); } .app-rail__signout { color: var(--color-danger); } .app-rail__signout:hover, .app-rail__signout:focus { background: color-mix(in srgb, var(--color-danger) 12%, transparent); color: var(--color-danger); } .app-main { flex: 1 1 auto; min-width: 0; } /* Tartalom-kontener (kornyezeti alkotmany 5/A, tulajdonosi dontes 2026-07): a munkaterulet a rail jobb szelenel KEZDODIK (flex-sor), a tartalom pedig a Tabler .container-xl szabalyai szerint, auto-margoval ul a munkateruleten (max-width az olvashatosagert). A korabbi "margin-inline: 0" balra-tapasztas VISSZAVONVA — a kiegyensulyozott, konteneres elrendezes a vegleges. */ .app-content { padding-block: var(--sp-md); } /* A PIPA MINDIG NEGYZET, sose kor. A globalis --tblr-border-radius (12px, theme.css) a ~20px-es checkboxot koronggá kerekitene; itt visszafogjuk. A radio (type=radio) marad kor. */ .form-check-input[type="checkbox"] { border-radius: var(--radius-xs); } /* URLAP-CIMKEK: EGY meret, a TOKEN-skalarol. Ket kulonbozo forras utkozott egy urlapon belul: - a mezocimke (.form-label, .form-hint, .form-label-description) a Tabler sajat 0.875rem-et (14px) hasznalta — ez a keret 16px-es MINIMUMA ALATT van (--fs-1, tokens.css: "MIN: torzs-kicsi, cimke"), tehat a vendor csendben alavagott a sajat tipografiankank; - a checkbox-cimke (.form-check-label) viszont a TORZS meretet orokolte (--fs-2, 16->18px). Igy EGY kartyan belul a "Remember me on this device" lathatoan nagyobb volt a folotte levo "Email or username" cimkenel (2026-07-26, tulajdonosi eszrevetel). Mindketto a token-skalara kerul: egyseges 16px, es teljesul a "min 16px" szabaly is. Erinti az OSSZES urlapot — belepes, regisztracio, 2FA, jelszo-reset, app-urlapok. */ .form-label, .form-label-description, .form-check-label, .form-hint { font-size: var(--fs-1); } /* HIBA-GYURU AZ INPUT-GROUP-ON: a jelszo-mezok a szem-ikonnal egy `.input-group`-ban ulnek, es a Tabler az `is-invalid` piros keretet CSAK a mezore teszi — a mezo harom oldalt piros lett, a negyediken (az ikon fele) szurke, a szem-ikon doboza pedig vegig szurke maradt. Toredezett jelzes. A gyurut a csoport EGESZERE huzzuk (`:has()`, mint a cookie-savnal), es SZANDEKOSAN a Tabler sajat valtozojabol — igy pontosan azonos a piros a mezoevel (a keret `--color-danger`-e MAS arnyalat: #dc2626 vs #d63939 — a szemantikus szinek Tabler-hidja meg hianyzik, kulon feladat). */ .input-group:has(> .form-control.is-invalid) > .input-group-text, .input-group:has(> .form-control.is-invalid) > .form-control.is-invalid { border-color: var(--tblr-form-invalid-border-color); } /* ------------------------------------------------------------- App finomitas */ .app-eyebrow { color: var(--accent); } .icon-box { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: rgba(var(--color-primary-rgb), 0.10); color: var(--color-primary); } .icon-box--sm { width: 2rem; height: 2rem; } .icon-box--md { width: 2.25rem; height: 2.25rem; } /* Demo-stage szinei/meretek — nth-child, hogy NE kelljen inline style */ /* A harom "macOS ablakgomb" potty a demo-ablak dekoracioja — SZANDEKOSAN a valodi macOS szinek, nem marka-szinek (a felismerhetoseg a lenyeg), ezert nem tokenizaljuk. */ .lp-stage-bar i:nth-child(1) { background: #ff5f57; } /* ceox-raw-ok: macOS close-gomb szine */ .lp-stage-bar i:nth-child(2) { background: #febc2e; } /* ceox-raw-ok: macOS minimize-gomb szine */ .lp-stage-bar i:nth-child(3) { background: #28c840; } /* ceox-raw-ok: macOS zoom-gomb szine */ .lp-bars i:nth-child(1) { height: 42%; } .lp-bars i:nth-child(2) { height: 64%; } .lp-bars i:nth-child(3) { height: 48%; } .lp-bars i:nth-child(4) { height: 82%; } .lp-bars i:nth-child(5) { height: 66%; } .lp-bars i:nth-child(6) { height: 96%; } /* Apro, ujrahasznos utility-k (elore felvett class-ok, nem inline) */ .text-brand-green { color: var(--brand-green); } .text-brand-amber { color: var(--brand-amber); } /* Szinminta (style guide galeria) */ .sw { height: 3rem; border-radius: var(--radius-md); border: 1px solid var(--border); } .sw-primary { background: var(--color-primary); } .sw-accent { background: var(--brand-violet); } .sw-cyan { background: var(--brand-cyan); } .sw-success { background: var(--color-success); } .sw-warning { background: var(--color-warning); } .sw-danger { background: var(--color-danger); } .sw-info { background: var(--color-info); } .sw-surface-2 { background: var(--surface-2); } .sw-muted { background: var(--text-muted); } .type-row { display: flex; align-items: baseline; gap: var(--sp-md); flex-wrap: wrap; } .type-row .tag { font-family: var(--font-mono); color: var(--text-muted); font-size: var(--fs-1); } .narrow { max-width: 52rem; margin-inline: auto; } .btn-on-brand { background: var(--color-on-brand); color: var(--color-on-brand-text); } .btn-on-brand:hover { background: var(--color-on-brand); color: var(--color-on-brand-text-strong); } /* CTA sav: a cimsor/lead feher, inline nelkul */ .cta-band .t-title { color: var(--color-on-brand); } .cta-band .t-lead { color: var(--color-on-brand-dim); margin-inline: auto; } .cta-band .lp-cta { margin-top: var(--sp-unconnected); } /* Landing lablec */ .lp-footer { padding-block: var(--sp-block); } .lp-footer .container { display: flex; flex-wrap: wrap; gap: var(--sp-sm); justify-content: space-between; align-items: center; border-top: 1px solid var(--border); padding-top: var(--sp-md); } @media (max-width: 790px) { .lp-navlinks { gap: var(--sp-sm); } .lp-navlinks a:not([class]) { display: none; } /* mobilon a horgony-linkek rejtve, CTA marad */ .lp-stage-body { grid-template-columns: 1fr; } } /* ---------------------------------------------------------- Dokumentum-nezo Elso lepesek + ASZF + Adatvedelmi: a landing (etalon) stilusaban — page-dark szekcio, marka-tipografia, es MINDEN markdown-elem tokenbol stilizalva (link, kod-blokk, inline kod, tablazat, idezet, ol/ul, hr, h1-h6). A .doc-shell ad helyet a fix .lp-nav alatt — a styleguide fo-kontenere is ezt hasznalja (ugyanaz a fix nav takarna a tartalmat). */ .doc-shell { padding-top: clamp(6.5rem, 10vw, 9rem); } .doc-kicker { display: block; margin-bottom: var(--sp-xs); } /* Landing globalis uzenetek (pl. tetlensegi kileptetes): a fix .lp-nav ALATT jelenjenek meg. A wrapper CSAK akkor renderel, ha van uzenet (a template {% if messages %} feltetele), ezert a padding sosem tolja el feleslegesen a hero-t. */ .legal-content { font-size: var(--fs-2); line-height: var(--lh-body); color: var(--text); } .legal-content > :first-child { margin-top: 0; } .legal-content h1 { font-family: var(--font-display); font-size: var(--fs-6); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 var(--sp-md); background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } .legal-content h2 { font-family: var(--font-display); font-size: var(--fs-5); font-weight: 700; color: var(--heading); margin: var(--sp-md) 0 var(--sp-sm); padding-top: var(--sp-sm); border-top: 1px solid var(--border); } .legal-content h3 { font-family: var(--font-display); font-size: var(--fs-4); font-weight: 600; color: var(--heading); margin: var(--sp-md) 0 var(--sp-xs); } .legal-content h4 { font-family: var(--font-display); font-size: var(--fs-3); font-weight: 700; color: var(--heading); margin: var(--sp-sm) 0 var(--sp-3xs); } .legal-content h5, .legal-content h6 { font-size: var(--fs-2); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--heading); margin: var(--sp-sm) 0 var(--sp-3xs); } .legal-content p { margin: 0 0 var(--sp-sm); color: var(--text); } .legal-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .legal-content a:hover { color: var(--heading); } .legal-content strong { color: var(--heading); font-weight: 700; } .legal-content em { color: var(--text-muted); } .legal-content ul, .legal-content ol { margin: 0 0 var(--sp-sm); padding-left: 1.5rem; } .legal-content li { margin: 0 0 var(--sp-3xs); color: var(--text); } .legal-content li::marker { color: var(--accent); } .legal-content hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-md) 0; } .legal-content blockquote { margin: 0 0 var(--sp-sm); padding: var(--sp-xs) var(--sp-sm); border-left: 3px solid var(--accent); /* ceox-raw-ok: idezet-sav vastagsaga — dekorativ konstans */ background: var(--surface); border-radius: var(--radius-sm); color: var(--text-muted); } /* Inline kod + kod-blokk (a getting-started tele van ```-fenced blokkal) */ .legal-content code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 0.12em 0.4em; color: var(--heading); } .legal-content pre { margin: 0 0 var(--sp-sm); padding: var(--sp-sm); background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-md); overflow-x: auto; } .legal-content pre code { background: transparent; border: 0; padding: 0; color: var(--text); font-size: var(--fs-1); line-height: 1.6; } /* Tablazat — X-scroll keskeny kepernyon */ .legal-content table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 var(--sp-sm); font-size: var(--fs-1); } .legal-content th, .legal-content td { text-align: left; padding: var(--sp-2xs) var(--sp-xs); border-bottom: 1px solid var(--border); } .legal-content th { color: var(--heading); font-weight: 700; background: var(--surface); } /* HTMX toltesjelzo — SAJAT peldany: a base.html htmx-configja includeIndicatorStyles:false-szal tiltja a HTMX inline