/* ============================================================================= TEMA — PROJEKTENKENT EZT CSERELED. Csak szin/szinvilag. Semmi meret vagy layout. A markaszineket es a semleges retegeket allitod at; minden komponens koveti. ============================================================================= */ :root { /* ---------- Marka-paletta (projekt-specifikus) ---------- */ --brand-indigo: #6366f1; --brand-cyan: #22d3ee; --brand-violet: #a855f7; --brand-pink: #e879f9; --brand-green: #22c55e; /* elenk, egyertelmu zold (yes/aktiv szemantika: pipa, elo-statusz) */ --brand-amber: #f59e0b; --color-primary: var(--brand-indigo); --color-primary-rgb: 99, 102, 241; --color-primary-contrast: #ffffff; --accent: var(--color-primary); /* szekcionkent felulirhato: .section--cyan stb. */ /* A --brand-green FELBONTASA rgba()-hoz (pl. pulse-glow) — a ket erteket EGYUTT valtoztasd. 2026-07-26-ig ez nyersen allt az app.css-ben: temavaltasnal a pulzalo pont a REGI zolddel vilagitott volna (a tools/check_brand_value.py hibaosztalya, csak zoldben). */ --brand-green-rgb: 34, 197, 94; /* ---------- MARKA-FELULETEN allo elemek (gradiens-sav, brand-jel, on-brand gomb) ---------- Ezek SZANDEKOSAN nem valtanak sotet temara: a marka-gradiens mindket temaban azonos, ezert a rajta ulo szinek is allandoak. */ --color-on-brand: #ffffff; --color-on-brand-dim: rgba(255, 255, 255, 0.88); --color-on-brand-text: #10131a; /* sotet szoveg a FEHER (on-brand) gombon */ --color-on-brand-text-strong: #000000; /* ugyanennek hover-allapota */ --glass-1: rgba(255, 255, 255, 0.06); /* uveg-retegek sotet/brand hatteren (lp-stage) */ --glass-2: rgba(255, 255, 255, 0.015); /* Marka-fenyu arnyekok (a primary-bol szarmaznak -> temavaltaskor egyutt valtanak). */ --shadow-glow: 0 8px 24px rgba(var(--color-primary-rgb), 0.35); --shadow-glow-hover: 0 14px 34px rgba(var(--color-primary-rgb), 0.5); --shadow-accent-hover: 0 18px 50px color-mix(in srgb, var(--accent) 26%, transparent); /* ---------- Szemantikus (EGY forras — a Tabler is EBBOL kap erteket, lasd a hidat lent) ---- TULAJDONOSI DONTES (2026-07-27): a szemantikus negyes a Tabler ERTEKEIRE allt be, mert a felulet DOMINANS resze (alertek, gombok, validacios keret, badge-ek) mar azt mutatta — igy az egysegesites latvany-elmozdulas NELKUL tortent. Elotte a ket keszlet PARHUZAMOSAN elt (sajat #dc2626 vs Tabler #d63939 piros), tehat nem volt egyetlen ertek, amit a grafikus atirhatott volna: a marka-hex "fel-marka" hibaosztalyanak szin-valtozata. Mostantol ITT irod at, es a Tabler-komponensek is kovetik. Az `-rgb` parok az alfas hasznalathoz kellenek (rgba(var(--x-rgb), .1)) — a hexszel EGYUTT valtoztatandok. */ --color-success: #2fb344; --color-success-rgb: 47, 179, 68; --color-warning: #f59f00; /* = --brand-amber: a ketto SZANDEKOSAN azonos hang */ --color-warning-rgb: 245, 159, 0; --color-danger: #d63939; --color-danger-rgb: 214, 57, 57; --color-info: #4299e1; --color-info-rgb: 66, 153, 225; /* ---------- VILAGOS tema (belso, uzleti felulet: atlathato, tiszta) ---------- */ --bg: #f5f7fb; --surface: #ffffff; --surface-2: #eef1f6; --border: #e4e7ec; --text: #101828; --text-muted:#5b6472; --heading: #0b1220; --overlay: rgba(10, 15, 30, 0.60); /* modal/backdrop sotetites — mindket teman sotet reteg */ /* Marka-szignatura: EGYETLEN, koherens gradiens (indigo -> violet) minden identitas-elemre (hero grad-text, elsodleges CTA-k, CTA-sav, marka-jel). A grad-cool (indigo -> cyan) a masodlagos "adat" mikro-akcent (pl. demo-oszlopok) — igy a szinvilag ertelmes, nem katyvasz. */ --grad-brand: linear-gradient(120deg, var(--brand-indigo), var(--brand-violet)); --grad-cool: linear-gradient(120deg, var(--brand-indigo), var(--brand-cyan)); } /* ---------- SOTET tema (landing: wow, szines, mozgalmas) ---------- A landing ala kerul. Ugyanaz a marka, sotet retegen. A [data-bs-theme="dark"] szelektor is ide kotve: igy a alatt a Tabler-valtozok (:root mapping lent) mar a sotet ertekekre oldodnak fel. */ [data-bs-theme="dark"], .page-dark { --bg: #0a0f1e; --bg-2: #0f1526; --surface: rgba(255, 255, 255, 0.045); --surface-2: rgba(255, 255, 255, 0.02); --border: rgba(255, 255, 255, 0.09); --text: #dfe5f2; --text-muted:#aab4cc; --heading: #f2f5fc; } /* Per-szekcio akcentszin (keret-primitivek). A LANDING ezekbol TUDATOSAN csak a ket szignatura-hangot (indigo, violet) valtogatja -> koherens ritmus, nem szivarvany. A green/ amber a landingen CSAK szemantika (aktiv/fuggoben, pipa/x), nem szekcio-dekoracio. */ .section--indigo { --accent: var(--brand-indigo); } .section--cyan { --accent: var(--brand-cyan); } .section--violet { --accent: var(--brand-violet); } .section--green { --accent: var(--brand-green); } .section--pink { --accent: var(--brand-pink); } .section--amber { --accent: var(--brand-amber); } /* Semleges melyseg-sav: a szekciokat NEM eltero szinnel, hanem finom melyseggel valasztjuk el (vilagos temán sotet, sotet temán vilagos, halvany lift) — hue-semleges, ezert koherens. */ .section--band { background: color-mix(in srgb, var(--text) 3%, transparent); } /* ---------- Tabler valtozok rakotese a temara ---------- */ :root { --tblr-primary: var(--color-primary); --tblr-primary-rgb: var(--color-primary-rgb); --tblr-body-bg: var(--bg); --tblr-body-color: var(--text); --tblr-border-color: var(--border); --tblr-font-sans-serif: var(--font-body); --tblr-body-font-family: var(--font-body); --tblr-body-font-size: 1rem; /* min 16px — Tabler 14px alapot feluliruk */ --tblr-border-radius: var(--radius-md); --tblr-card-border-radius: var(--radius-lg); /* SZEMANTIKUS NEGYES — a hid, ami miatt EGY forras van (2026-07-27). Enelkul a Tabler komponensei (alert, badge, btn-danger, validacios keret) a SAJAT szineiket hasznaltak, a mi CSS-unk a sajatjait: ket kulonbozo piros/zold ugyanazon a lapon, es a temat cserelo grafikus csak a felet tudta atallitani. A `-lt` (vilagos) valtozatokat a Tabler EBBOL a hexbol szarmaztatja (merve: a `bg-danger-lt` hattere a danger-szin 10%-os alfaja), az `-rgb` par pedig az `rgba(...)` alaku hasznalathoz kell — ezert MINDKETTOT atkotjuk. */ --tblr-danger: var(--color-danger); --tblr-danger-rgb: var(--color-danger-rgb); --tblr-success: var(--color-success); --tblr-success-rgb: var(--color-success-rgb); --tblr-warning: var(--color-warning); --tblr-warning-rgb: var(--color-warning-rgb); --tblr-info: var(--color-info); --tblr-info-rgb: var(--color-info-rgb); }