@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Open+Sans:wght@400;600&display=swap'); /* ══════════════════════════════════════════════════════════════ SZÍNPALETTA – VILÁGOS ("windowsos") + SÖTÉT (eredeti navy+piros) ────────────────────────────────────────────────────────────── Kettős rendszer: 1) ALAPÉRTELMEZETT: a :root a VILÁGOS tokeneket adja, DE a `@media (prefers-color-scheme: dark)` felülírja SÖTÉTRE, ha a látogató böngészője/rendszere sötét módot kér – tehát automatikusan alkalmazkodik, JS nélkül is. 2) KÉZI FELÜLBÍRÁLÁS: a / "dark"> attribútum (a js/theme.js állítja be, localStorage-ban megjegyezve) MINDIG felülír mindent – ha a látogató a kapcsolóval választott, az számít, nem a rendszerbeállítás. Szemantikus nevek (ezeket használd ÚJ kódban): --bg / --surface / --surface-2 → háttér, kártyalap, halvány sáv --text / --text-soft / --text-muted / --text-faint → szövegszintek --border / --border-strong → keretek --accent* → a kiemelő szín (világosban kék, sötétben piros – lásd lent) --err-* / --warn-* → hiba/figyelmeztetés (MINDIG piros/ sárga, a márka-színtől függetlenül) --shadow-sm / --shadow / --shadow-md → lágy „lebegő lap" árnyékok A régi token-nevek (--red, --glass, --white stb.) MEGMARADTAK és át vannak irányítva az aktuális témára – a régebbi CSS-fájlak, amik még ezeket használják, automatikusan a helyes színt kapják mindkét témában. ══════════════════════════════════════════════════════════════ */ /* ── 1) VILÁGOS – alapértelmezett ─────────────────────────────── */ :root { --bg: #F3F5F8; /* lágy, szemkímélő alap – nem vakító fehér */ --surface: #FFFFFF; /* kártyák, dobozok */ --surface-2: #F7F9FB; /* halvány kiemelt sáv */ --text: #1B1F24; --text-soft: #4B535D; --text-muted: #6B7480; --text-faint: #97A0AB; --text-dim: #97A0AB; /* régi név (lábléc stb.) */ --border: #E2E6EB; --border-strong: #CFD6DE; --accent: #0067C0; /* hagyományos, windowsos kék */ --accent-hover: #005093; --accent-soft: #EAF3FC; --accent-border: #BCDCF7; --accent-bright: #3B9EFF; /* élénkebb/világosabb árnyalat (pl. gradiens vége) */ --red: var(--accent); --red-hover: var(--accent-hover); --border-red: var(--accent-border); --glass: var(--surface); --glass-hover: var(--accent-soft); --white: #FFFFFF; --gold: #8A6100; --green: #1E7F3C; --err-bg: #FEF2F2; --err-border: #F5C2C7; --err-text: #B42318; --warn-bg: #FFF8E6; --warn-border: #F5DFA0; --warn-text: #6B4E00; --success-bg: rgba(30,127,60,0.08); --success-border: rgba(30,127,60,0.3); --success-text: #14532D; --shadow-sm: 0 1px 2px rgba(16,24,40,0.05); --shadow: 0 1px 3px rgba(16,24,40,0.08), 0 1px 2px rgba(16,24,40,0.04); --shadow-md: 0 4px 12px rgba(16,24,40,0.08), 0 2px 4px rgba(16,24,40,0.04); --font-title: 'Oswald', sans-serif; --font-body: 'Open Sans', sans-serif; --radius: 12px; --radius-sm: 7px; } /* ── 2) SÖTÉT – automatikusan, ha a rendszer sötétet kér ──────── */ @media (prefers-color-scheme: dark) { :root { --bg: #060F1D; --surface: #0E1E33; --surface-2: #142A47; --text: #FFFFFF; --text-soft: rgba(255,255,255,0.82); --text-muted: rgba(255,255,255,0.55); --text-faint: rgba(255,255,255,0.35); --text-dim: rgba(255,255,255,0.35); --border: rgba(255,255,255,0.12); --border-strong: rgba(255,255,255,0.28); --accent: #C8102E; /* eredeti márka-piros */ --accent-hover: #A50D26; --accent-soft: #2A1420; /* tömör, sötét piros-árnyalat (gradiensbe/badge-be) */ --accent-border: rgba(200,16,46,0.5); --accent-bright: #E04358; /* élénkebb/világosabb piros (pl. gradiens vége) */ --red: var(--accent); --red-hover: var(--accent-hover); --border-red: var(--accent-border); --glass: var(--surface); --glass-hover: var(--accent-soft); --white: #FFFFFF; --gold: #E8A020; --green: #2ECC71; --err-bg: rgba(220,38,38,0.14); --err-border: rgba(220,38,38,0.4); --err-text: #FCA5A5; --warn-bg: rgba(230,170,0,0.14); --warn-border: rgba(230,170,0,0.4); --warn-text: #FFD166; --success-bg: rgba(46,204,113,0.14); --success-border: rgba(46,204,113,0.4); --success-text: #86EFAC; --shadow-sm: 0 1px 3px rgba(0,0,0,0.35); --shadow: 0 4px 14px rgba(0,0,0,0.45); --shadow-md: 0 10px 28px rgba(0,0,0,0.55); } } /* ── 3) KÉZI FELÜLBÍRÁLÁS (a kapcsoló mindig felülírja) ───────── */ :root[data-theme="light"] { --bg: #F3F5F8; --surface: #FFFFFF; --surface-2: #F7F9FB; --text: #1B1F24; --text-soft: #4B535D; --text-muted: #6B7480; --text-faint: #97A0AB; --text-dim: #97A0AB; --border: #E2E6EB; --border-strong: #CFD6DE; --accent: #0067C0; --accent-hover: #005093; --accent-soft: #EAF3FC; --accent-border: #BCDCF7; --accent-bright: #3B9EFF; --red: var(--accent); --red-hover: var(--accent-hover); --border-red: var(--accent-border); --glass: var(--surface); --glass-hover: var(--accent-soft); --white: #FFFFFF; --gold: #8A6100; --green: #1E7F3C; --err-bg: #FEF2F2; --err-border: #F5C2C7; --err-text: #B42318; --warn-bg: #FFF8E6; --warn-border: #F5DFA0; --warn-text: #6B4E00; --success-bg: rgba(30,127,60,0.08); --success-border: rgba(30,127,60,0.3); --success-text: #14532D; --shadow-sm: 0 1px 2px rgba(16,24,40,0.05); --shadow: 0 1px 3px rgba(16,24,40,0.08), 0 1px 2px rgba(16,24,40,0.04); --shadow-md: 0 4px 12px rgba(16,24,40,0.08), 0 2px 4px rgba(16,24,40,0.04); } :root[data-theme="dark"] { --bg: #060F1D; --surface: #0E1E33; --surface-2: #142A47; --text: #FFFFFF; --text-soft: rgba(255,255,255,0.82); --text-muted: rgba(255,255,255,0.55); --text-faint: rgba(255,255,255,0.35); --text-dim: rgba(255,255,255,0.35); --border: rgba(255,255,255,0.12); --border-strong: rgba(255,255,255,0.28); --accent: #C8102E; --accent-hover: #A50D26; --accent-soft: #2A1420; --accent-border: rgba(200,16,46,0.5); --accent-bright: #E04358; --red: var(--accent); --red-hover: var(--accent-hover); --border-red: var(--accent-border); --glass: var(--surface); --glass-hover: var(--accent-soft); --white: #FFFFFF; --gold: #E8A020; --green: #2ECC71; --err-bg: rgba(220,38,38,0.14); --err-border: rgba(220,38,38,0.4); --err-text: #FCA5A5; --warn-bg: rgba(230,170,0,0.14); --warn-border: rgba(230,170,0,0.4); --warn-text: #FFD166; --success-bg: rgba(46,204,113,0.14); --success-border: rgba(46,204,113,0.4); --success-text: #86EFAC; --shadow-sm: 0 1px 3px rgba(0,0,0,0.35); --shadow: 0 4px 14px rgba(0,0,0,0.45); --shadow-md: 0 10px 28px rgba(0,0,0,0.55); } /* ── RESET ────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } html, body { height: 100%; font-family: var(--font-body); background: var(--bg); color: var(--text); overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background-color 0.2s ease, color 0.2s ease; } a { color: inherit; text-decoration: none; } button { cursor: pointer; font-family: var(--font-body); border: none; outline: none; } img { max-width: 100%; display: block; } /* ── TIPOGRÁFIA ───────────────────────────────── */ h1, h2, h3 { font-family: var(--font-title); font-weight: 700; line-height: 1.1; } h1 { font-size: clamp(40px, 8vw, 64px); letter-spacing: 5px; } h2 { font-size: clamp(28px, 5vw, 42px); letter-spacing: 3px; } h3 { font-size: clamp(20px, 3vw, 28px); letter-spacing: 2px; } p { font-size: 16px; line-height: 1.75; color: var(--text-soft); } /* ── LAYOUT ───────────────────────────────────── */ .page { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; } .container { width: 100%; max-width: 680px; margin: 0 auto; padding: 0 20px; } /* ── FOOTER ───────────────────────────────────── */ .site-footer { position: relative; z-index: 2; text-align: center; padding: 14px 20px; font-size: 12px; color: var(--text-muted); letter-spacing: 1px; border-top: 1px solid var(--border); background: var(--surface); margin-top: auto; } .site-footer a { color: var(--accent); } .site-footer a:hover { text-decoration: underline; } /* ── UTILITY ──────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }