/* ============================================================================= 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: 0 8px 24px rgba(var(--color-primary-rgb), 0.35); transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); } .btn-grad:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(var(--color-primary-rgb), 0.5); } .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); 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: #fff; } .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); } /* A nav CTA-ja: a fenti szurke szin-szabaly specifikusabb volt a .btn-grad-nal, ezert a Belepes-gomb szovege elveszett a vilagos gradiensen (2026-08-18 hibajavitas). */ .lp-navlinks a.btn-grad, .lp-navlinks a.btn-grad:hover { color: var(--color-primary-contrast); } .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); } /* Tulajdonosi keres (2026-08-18): a FEJLEC menupontjai es a Belepes-gomb betumerete egyezzen a lablec (t-small / --fs-1) meretevel. Csak a fejlecre (.lp-nav) szol — a hero CTA-ja es a lablec sajat merete valtozatlan. */ .lp-nav .lp-navlinks a { font-size: var(--fs-1); } .lp-nav .lp-navlinks .lang-switcher .form-select { font-size: var(--fs-1); } .lp-nav .lp-navlinks a.btn-grad { font-size: var(--fs-1); padding: 0.55rem 1rem; } /* 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; padding-top: clamp(5.5rem, 7vw, 7rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); } .aurora { position: absolute; inset: -20% -10% auto -10%; height: 120%; z-index: 0; pointer-events: none; filter: blur(12px); } .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; } /* Ket hasab: balra a szoveg, jobbra a kicsinyitett elo haromszog — egyutt egy kepernyon (tulajdonosi keres 2026-08-18). 991px alatt egyhasabos, kozepre zart. */ .lp-hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: clamp(var(--sp-lg), 4vw, var(--sp-2xl)); align-items: center; min-height: min(calc(100svh - 9rem), 52rem); } .lp-hero .t-hero { max-width: 14ch; font-size: clamp(2.5rem, 2.6vw + 1.4rem, 3.55rem); } .lp-hero .t-lead { max-width: 44ch; margin-top: var(--sp-connected); } .lp-cta { display: flex; gap: var(--sp-sm); flex-wrap: wrap; margin-top: var(--sp-unconnected); } .lp-badges { display: flex; gap: var(--sp-md); flex-wrap: wrap; margin-top: var(--sp-block); color: var(--text-muted); } @media (max-width: 991px) { .lp-hero { text-align: center; } .lp-hero .container { grid-template-columns: 1fr; min-height: 0; gap: var(--sp-lg); } .lp-hero .t-hero, .lp-hero .t-lead { margin-inline: auto; } .lp-cta, .lp-badges { justify-content: center; } } .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, rgba(255,255,255,0.06), rgba(255,255,255,0.015)); 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: 4px 4px 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(34,197,94,0.6); animation: pulse 1.8s infinite; } @keyframes pulse { 70% { box-shadow: 0 0 0 0.6rem rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,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: 0 18px 50px color-mix(in srgb, var(--accent) 26%, transparent); } .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: #fff; 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); } /* 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(18px); 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); } /* ============================================================ 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; } /* ============================================================ 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. */ .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); color: var(--heading); } .app-rail__brand .brand-mark { width: 1.8rem; height: 1.8rem; } .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); } /* ------------------------------------------------------------- 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 */ .lp-stage-bar i:nth-child(1) { background: #ff5f57; } .lp-stage-bar i:nth-child(2) { background: #febc2e; } .lp-stage-bar i:nth-child(3) { background: #28c840; } .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: #fff; color: #10131a; } .btn-on-brand:hover { background: #fff; color: #000; } /* CTA sav: a cimsor/lead feher, inline nelkul */ .cta-band .t-title { color: #fff; } .cta-band .t-lead { color: rgba(255, 255, 255, 0.88); 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. */ .lp-messages { padding-top: clamp(6.5rem, 10vw, 9rem); } .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); 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