/* ============================================================================= QR Feedback — design-rendszer (alap) ----------------------------------------------------------------------------- Alapelvek: - Minden szín, méret és árnyék CSS-változó (token). Komponens sosem ír be nyers hexát; így a márka egy helyen hangolható. - Két színmód: világos és sötét. Alapértelmezés a rendszerbeállítás (prefers-color-scheme), amit a felhasználó felülírhat: . - Nulla külső függőség: nincs CDN, nincs Google Fonts, nincs ikon-csomag. Ez GDPR-szempontból tiszta (nem megy adat harmadik félhez), és a legjobb betöltési időt adja (LCP) — ami közvetlen SEO-tényező is. - Akadálymentesség: 4.5:1 kontraszt a szövegen, látható fókuszgyűrű, 44px-es érintési célpontok, mozgás-csökkentés támogatása. ========================================================================== */ /* ---- 1. Tokenek: színek, tipográfia, tér, forma ------------------------- */ :root { color-scheme: light; /* Márka — indigó (tudás/megbízhatóság) + teál (növekedés/visszajelzés). Szándékosan NEM egyetemi arculati szín: a qrfeedback.hu önálló termék. */ --brand-50: #EEF2FF; --brand-100: #E0E7FF; --brand-200: #C7D2FE; --brand-300: #A5B4FC; --brand-400: #818CF8; --brand-500: #6366F1; --brand-600: #4F46E5; --brand-700: #4338CA; --brand-800: #3730A3; --brand-900: #312E81; --teal-50: #F0FDFA; --teal-100: #CCFBF1; --teal-400: #2DD4BF; --teal-500: #14B8A6; --teal-600: #0D9488; --teal-700: #0F766E; --amber-100: #FEF3C7; --amber-400: #FBBF24; --amber-500: #F59E0B; --amber-600: #D97706; /* Vezetői („executive”) réteg: mély tinta-kék + akadémiai arany. Ez adja az intézményi/vezetői oldalak komolyabb, tekintélyesebb hangját, miközben a cselekvés (gombok) továbbra is a márka indigója marad. */ --ink-700: #1C2E52; --ink-800: #142544; --ink-900: #0E1B33; --ink-950: #091223; --gold-100: #F6EBD6; --gold-300: #E0BE7E; --gold-400: #C79A50; --gold-500: #B8873B; --gold-600: #9A6F2C; --gold-700: #7C5822; /* Semleges skála */ --slate-50: #F8FAFC; --slate-100: #F1F5F9; --slate-200: #E2E8F0; --slate-300: #CBD5E1; --slate-400: #94A3B8; --slate-500: #64748B; --slate-600: #475569; --slate-700: #334155; --slate-800: #1E293B; --slate-900: #0F172A; --slate-950: #0B1120; /* Szemantikus felületi tokenek — VILÁGOS mód */ --bg: var(--slate-50); --bg-subtle: var(--slate-100); --surface: #FFFFFF; --surface-2: var(--slate-50); --surface-inverse: var(--slate-900); --border: var(--slate-200); --border-strong: var(--slate-300); --text: var(--slate-900); --text-muted: var(--slate-600); --text-faint: var(--slate-500); --text-inverse: #FFFFFF; --accent: var(--brand-600); --accent-hover: var(--brand-700); --accent-soft: var(--brand-50); --accent-border: var(--brand-200); --accent-text: var(--brand-700); --on-accent: #FFFFFF; --accent-2: var(--teal-600); --accent-2-soft: var(--teal-50); --accent-2-text: var(--teal-700); /* Vezetői kiemelés (arany) — nem cselekvésre, hanem rangjelzésre. */ --gold: var(--gold-600); --gold-soft: var(--gold-100); --gold-text: var(--gold-700); --gold-line: var(--gold-300); --ink: var(--ink-900); --on-ink: #F3F6FC; --on-ink-muted: #B6C3DA; --success: #15803D; --success-soft: #DCFCE7; --warning: var(--amber-600); --warning-soft: var(--amber-100); --danger: #BE123C; --danger-soft: #FFE4E6; /* Tipográfia — rendszer betűkészlet: azonnal renderel, nincs FOUT/CLS. */ /* Címsor-betű: rendszer-serif. Tekintélyt ad (akadémiai hangvétel), és NEM tölt le semmit — nincs Google Fonts, nincs harmadik fél. */ --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", "Noto Sans", Arial, "Liberation Sans", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Folyékony (fluid) típusskála: 360px–1400px között skálázódik. */ --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem); --step-0: clamp(1.00rem, 0.96rem + 0.20vw, 1.09rem); --step-1: clamp(1.19rem, 1.11rem + 0.38vw, 1.42rem); --step-2: clamp(1.41rem, 1.27rem + 0.68vw, 1.84rem); --step-3: clamp(1.67rem, 1.44rem + 1.14vw, 2.39rem); --step-4: clamp(1.98rem, 1.61rem + 1.83vw, 3.10rem); --step-5: clamp(2.35rem, 1.77rem + 2.86vw, 4.03rem); /* Tér — 4px alapú skála */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; /* Forma */ --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08); --shadow: 0 4px 12px rgba(15, 23, 42, .07), 0 12px 32px rgba(15, 23, 42, .06); --shadow-lg: 0 8px 24px rgba(15, 23, 42, .10), 0 24px 64px rgba(15, 23, 42, .12); --shadow-accent: 0 10px 30px rgba(79, 70, 229, .28); --ring: 0 0 0 3px rgba(99, 102, 241, .45); --container: 1200px; --container-narrow: 760px; --header-height: 72px; --transition: 180ms cubic-bezier(.2, .7, .3, 1); } /* ---- SÖTÉT mód ---------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: var(--slate-950); --bg-subtle: #0E1626; --surface: #131C30; --surface-2: #182240; --surface-inverse: #FFFFFF; --border: #24304A; --border-strong: #33415C; --text: #EEF2F8; --text-muted: #A9B6CC; --text-faint: #8494AE; --text-inverse: var(--slate-900); --accent: var(--brand-400); --accent-hover: var(--brand-300); --accent-soft: rgba(99, 102, 241, .14); --accent-border: rgba(129, 140, 248, .35); --accent-text: var(--brand-300); --on-accent: #0B1120; --accent-2: var(--teal-400); --accent-2-soft: rgba(45, 212, 191, .12); --accent-2-text: var(--teal-400); --gold: var(--gold-400); --gold-soft: rgba(199, 154, 80, .14); --gold-text: var(--gold-300); --gold-line: rgba(199, 154, 80, .42); --ink: #0A1424; --on-ink: #EEF2F8; --on-ink-muted: #A9B6CC; --success: #4ADE80; --success-soft: rgba(74, 222, 128, .13); --warning: var(--amber-400); --warning-soft: rgba(251, 191, 36, .13); --danger: #FB7185; --danger-soft: rgba(251, 113, 133, .13); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40); --shadow: 0 8px 24px rgba(0, 0, 0, .45); --shadow-lg: 0 20px 60px rgba(0, 0, 0, .55); --shadow-accent: 0 10px 30px rgba(67, 56, 202, .45); } } /* Felhasználói kapcsoló felülírja a rendszerbeállítást. */ :root[data-theme="dark"] { color-scheme: dark; --bg: var(--slate-950); --bg-subtle: #0E1626; --surface: #131C30; --surface-2: #182240; --surface-inverse: #FFFFFF; --border: #24304A; --border-strong: #33415C; --text: #EEF2F8; --text-muted: #A9B6CC; --text-faint: #8494AE; --text-inverse: var(--slate-900); --accent: var(--brand-400); --accent-hover: var(--brand-300); --accent-soft: rgba(99, 102, 241, .14); --accent-border: rgba(129, 140, 248, .35); --accent-text: var(--brand-300); --on-accent: #0B1120; --accent-2: var(--teal-400); --accent-2-soft: rgba(45, 212, 191, .12); --accent-2-text: var(--teal-400); --gold: var(--gold-400); --gold-soft: rgba(199, 154, 80, .14); --gold-text: var(--gold-300); --gold-line: rgba(199, 154, 80, .42); --ink: #0A1424; --on-ink: #EEF2F8; --on-ink-muted: #A9B6CC; --success: #4ADE80; --success-soft: rgba(74, 222, 128, .13); --warning: var(--amber-400); --warning-soft: rgba(251, 191, 36, .13); --danger: #FB7185; --danger-soft: rgba(251, 113, 133, .13); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40); --shadow: 0 8px 24px rgba(0, 0, 0, .45); --shadow-lg: 0 20px 60px rgba(0, 0, 0, .55); --shadow-accent: 0 10px 30px rgba(67, 56, 202, .45); } /* ---- 2. Alap (reset + elemek) ------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + var(--space-4)); } body { min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; font-weight: 800; } /* A nagy címsorok serifben futnak: ez adja a rendszer „egyetemi vezetői” hangját. A h3/h4 marad sans, hogy a kártyák továbbra is kompaktak legyenek. */ h1, h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; line-height: 1.12; } /* A kisebb címsorok (kártyacímek) NEM kapják meg a nagy címsorok szoros betűközét és 800-as vastagságát: kis fokozaton az összenyomta a szóképet és nehezen olvashatóvá tette. Itt szellősebb sorköz és 700-as vastagság kell. */ h3, h4 { font-weight: 700; letter-spacing: -0.004em; line-height: 1.32; } h1 { font-size: var(--step-5); } h2 { font-size: var(--step-4); } h3 { font-size: var(--step-2); } h4 { font-size: var(--step-1); } p { text-wrap: pretty; } a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--transition); } a:hover { color: var(--accent-hover); } ul, ol { padding-left: 1.25em; } strong { font-weight: 700; color: var(--text); } small { font-size: var(--step--1); } hr { border: 0; border-top: 1px solid var(--border); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } ::selection { background: var(--accent-soft); color: var(--accent-text); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ---- 3. Elrendezési primitívek ------------------------------------------ */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); } .container--narrow { max-width: var(--container-narrow); } .section { padding-block: clamp(var(--space-7), 6vw, var(--space-9)); } .section--tight { padding-block: clamp(var(--space-6), 4vw, var(--space-7)); } .section--alt { background: var(--bg-subtle); border-block: 1px solid var(--border); } .stack > * + * { margin-top: var(--space-4); } .grid { display: grid; gap: var(--space-5); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .text-center { text-align: center; } .muted { color: var(--text-muted); } .lead { font-size: var(--step-1); color: var(--text-muted); line-height: 1.6; max-width: 62ch; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 200; background: var(--accent); color: var(--on-accent); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-weight: 600; transition: top var(--transition); } .skip-link:focus { top: var(--space-4); color: var(--on-accent); } /* ---- 4. Gombok ---------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: var(--space-3) var(--space-5); border: 1px solid transparent; border-radius: var(--radius-pill); font: inherit; font-weight: 650; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition); } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-accent); } .btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); } .btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-sm); } .btn--secondary:hover { border-color: var(--accent); color: var(--accent-text); } .btn--ghost { background: transparent; color: var(--text-muted); } .btn--ghost:hover { background: var(--surface-2); color: var(--text); } .btn--block { width: 100%; } .btn--lg { min-height: 52px; padding: var(--space-4) var(--space-6); font-size: var(--step-0); } .btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); } /* ---- 5. Kártya, jelvény, lista ------------------------------------------ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent-border); } .card__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent-text); margin-bottom: var(--space-4); } .card__icon svg { width: 24px; height: 24px; } .card__icon--teal { background: var(--accent-2-soft); color: var(--accent-2-text); } .card h3 { margin-bottom: var(--space-3); font-size: var(--step-1); color: var(--text); } .card p { color: var(--text-muted); } .badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 14px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent-border); font-size: var(--step--1); font-weight: 650; letter-spacing: .01em; } .badge--teal { background: var(--accent-2-soft); color: var(--accent-2-text); border-color: color-mix(in srgb, var(--accent-2) 35%, transparent); } .badge--gold { background: var(--gold-soft); color: var(--gold-text); border-color: var(--gold-line); } .badge--onink { background: rgba(255, 255, 255, .10); color: #FFFFFF; border-color: rgba(255, 255, 255, .28); } .eyebrow { display: block; font-size: var(--step--1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); margin-bottom: var(--space-3); } .check-list { list-style: none; padding: 0; display: grid; gap: var(--space-3); } .check-list li { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-3); align-items: start; color: var(--text-muted); } .check-list svg { width: 22px; height: 22px; color: var(--accent-2); margin-top: 2px; } /* ---- 6. Fejléc / navigáció ---------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--header-height); } .brand { display: inline-flex; align-items: center; gap: var(--space-3); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--text); text-decoration: none; } .brand:hover { color: var(--text); } .brand__mark { width: 36px; height: 36px; flex: none; } .nav { display: flex; align-items: center; gap: var(--space-2); } .nav__link { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--text-muted); text-decoration: none; font-weight: 550; font-size: var(--step--1); } .nav__link:hover { background: var(--surface-2); color: var(--text); } .nav__link.is-current { color: var(--accent-text); background: var(--accent-soft); } .header-actions { display: flex; align-items: center; gap: var(--space-2); } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-muted); cursor: pointer; transition: color var(--transition), border-color var(--transition), background var(--transition); } .icon-btn:hover { color: var(--accent-text); border-color: var(--accent-border); } .icon-btn svg { width: 20px; height: 20px; } .nav-toggle { display: none; } /* A fejlécben három menüpont és két gomb van; ennél keskenyebb ablakban a mobil menü olvashatóbb, mint a tördelt sor. */ @media (max-width: 960px) { .nav-toggle { display: inline-flex; } .site-header__nav { position: fixed; inset: var(--header-height) 0 auto 0; display: none; flex-direction: column; align-items: stretch; gap: var(--space-1); padding: var(--space-4) var(--space-5) var(--space-6); background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); } .site-header__nav[data-open="true"] { display: flex; } .site-header__nav .nav__link { padding: var(--space-3); font-size: var(--step-0); } .site-header__nav .btn { width: 100%; margin-top: var(--space-2); } } /* ---- 7. Űrlapok --------------------------------------------------------- */ .field { display: grid; gap: var(--space-2); } .field + .field { margin-top: var(--space-4); } .field label { font-weight: 600; font-size: var(--step--1); color: var(--text); } .field .hint { font-size: var(--step--1); color: var(--text-faint); } .input { width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text); font: inherit; transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); } .input::placeholder { color: var(--text-faint); } .input:hover { border-color: var(--accent-border); } .input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); } .input[aria-invalid="true"] { border-color: var(--danger); } .input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 35%, transparent); } .input-group { position: relative; } .input-group .input { padding-right: 52px; } .input-group__action { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-faint); cursor: pointer; } .input-group__action:hover { color: var(--accent-text); background: var(--surface-2); } .input-group__action svg { width: 20px; height: 20px; } .field-error { display: flex; align-items: center; gap: var(--space-2); font-size: var(--step--1); color: var(--danger); font-weight: 550; } .checkbox { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3); align-items: start; font-size: var(--step--1); color: var(--text-muted); cursor: pointer; } .checkbox input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); cursor: pointer; } .form-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; font-size: var(--step--1); } fieldset { border: 0; padding: 0; margin: 0; } legend { font-weight: 600; font-size: var(--step--1); margin-bottom: var(--space-2); padding: 0; } /* Szegmentált választó (fióktípus) */ .segmented { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } .segmented input { position: absolute; opacity: 0; pointer-events: none; } .segmented label { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; font-weight: 650; font-size: var(--step--1); transition: border-color var(--transition), background var(--transition), box-shadow var(--transition); } .segmented label span { font-weight: 450; color: var(--text-faint); font-size: .8rem; } .segmented input:checked + label { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); } .segmented input:focus-visible + label { box-shadow: var(--ring); } /* ---- 8. Üzenetek -------------------------------------------------------- */ .alert { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); font-size: var(--step--1); line-height: 1.6; } .alert svg { width: 20px; height: 20px; flex: none; margin-top: 2px; } .alert--error { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 40%, transparent); color: var(--danger); } .alert--success { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 40%, transparent); color: var(--success); } .alert--info { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-text); } .alert--warning { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 40%, transparent); color: var(--warning); } .alert strong { color: inherit; } /* ---- 9. Lábléc ---------------------------------------------------------- */ /* ---- 9. Lábléc (vízszintes elrendezés) ---------------------------------- */ .site-footer { margin-top: var(--space-9); padding-block: var(--space-7) var(--space-6); border-top: 1px solid var(--border); background: var(--surface); } /* Felső sáv: márka balra, kapcsolatfelvétel jobbra — egy vonalban. */ .site-footer__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-6); } .site-footer__brand { max-width: 46ch; } .site-footer__contact { display: grid; gap: var(--space-2); justify-items: start; padding: var(--space-4) var(--space-5); border: 1px solid var(--gold-line); border-radius: var(--radius-lg); background: var(--gold-soft); } .site-footer__contact-label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); } .site-footer__contact-label svg { width: 18px; height: 18px; } .site-footer__contact-note { font-size: var(--step--1); color: var(--text-muted); } /* Hivatkozások EGYETLEN vízszintes sorban, ponttal elválasztva. */ .site-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border); } .site-footer__links a { position: relative; color: var(--text-muted); text-decoration: none; font-size: var(--step--1); padding: 4px 0; } .site-footer__links a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 4px; } /* Elválasztó pont a linkek között (az utolsó után nincs). */ .site-footer__links a:not(:last-child)::after { content: "·"; position: absolute; right: calc(-1 * var(--space-4) / 2 - 2px); color: var(--border-strong); } .site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); font-size: var(--step--1); color: var(--text-faint); } /* ---- Kattintható e-mail cím ------------------------------------------- Külön komponens: e-mail címet SOHA nem írunk ki sima szövegként, mert az elveszett kapcsolatfelvétel. Mindig mailto-link, láthatóan kattintható. */ .mail-link { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; word-break: break-word; } .mail-link:hover { color: var(--accent-hover); text-decoration-thickness: 2px; } .mail-link--lg { font-size: var(--step-1); letter-spacing: -0.01em; } /* ---- 10. Segédosztályok ------------------------------------------------- FONTOS: a CSP `style-src 'self' 'nonce-…'` beállítása miatt az inline style="…" attribútum NEM fut le a böngészőben. Ezért minden eltolás és szélesség osztályból jön — soha nem inline stílusból. ---------------------------------------------------------------------- */ .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mt-7 { margin-top: var(--space-7); } .mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); } .mb-6 { margin-bottom: var(--space-6); } .text-sm { font-size: var(--step--1); } .measure { max-width: 38ch; } .measure-wide { max-width: 62ch; } .center-block { margin-inline: auto; } /* Vezetői szemöldök-felirat: arany hajszálvonallal. */ .eyebrow--gold { color: var(--gold-text); } .eyebrow--gold::before { content: ""; display: inline-block; width: 26px; height: 2px; margin-right: var(--space-3); vertical-align: middle; background: var(--gold-line); } /* Adatpár-lista (fiókadatok, tények) */ .datalist { display: grid; gap: var(--space-4); } .datalist dt { font-size: var(--step--1); color: var(--text-faint); letter-spacing: .04em; text-transform: uppercase; } .datalist dd { margin: 2px 0 0; font-weight: 600; } /* ---- 11. Nyomtatás ------------------------------------------------------ */ /* A vezetői összefoglalót gyakran kinyomtatják vagy PDF-be mentik, ezért a sötét sávok papíron világos alapra, fekete szövegre váltanak: így nem esznek festéket, és olvashatók marad a tartalom. */ @media print { .site-header, .site-footer, .btn, .toc, .no-print, .report, .hero__visual { display: none !important; } body { background: #FFFFFF; color: #000000; } .page-hero, .inkband, .contact-band, .cta-band, .privacy { background: #FFFFFF !important; color: #000000 !important; box-shadow: none !important; border: 1px solid #999999; } .page-hero h1, .page-hero h2, .inkband h2, .inkband h3, .contact-band h2, .cta-band h2, .inkcard p, .inkband__head p, .contact-band p, .pull blockquote, .privacy h2, .privacy p, .privacy .check-list li { color: #000000 !important; } .inkcard, .contact-card { background: #FFFFFF !important; border: 1px solid #BBBBBB !important; } .contact-card a, .contact-card dt, .salutation, .eyebrow--gold { color: #333333 !important; } .section, .section--alt { padding-block: 1.2cm; background: #FFFFFF !important; } .reveal { opacity: 1 !important; transform: none !important; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555555; } }