@charset "UTF-8"; /* ============================================================================= OKOSIRODA.ONLINE — main.css ----------------------------------------------------------------------------- Ez az oldal EGYETLEN stíluslapja. Nincs build-lépés, nincs preprocesszor: amit itt látsz, az megy ki élesbe. Forrásai (igazságforrások, ebben a sorrendben): · docs/design/tokens.css — a teljes v2.1 token-készlet (1–7. blokk) · docs/design/style-tile.html — a komponens-stílusok mért, élő változata · docs/design/design-system.md — 6.14 (keret-komponensek), 9. (motion), 10. (a11y) FELÉPÍTÉS A. @font-face — Plus Jakarta Sans, SELF-HOSTED (latin + latin-ext) B. Tokenek 1–7: primitív · akcent · szemantikus · tipográfia · tér · komponens · motion C. Alapállapot és JS-függetlenség (a rejtést a JS kapcsolja be, nem a CSS) D. Reset és elemi tipográfia E. Elrendezés: konténer, szekció-ritmus, 12 oszlopos rács F. Komponensek (navbar → lábléc) G. Segéd-utility-k H. prefers-reduced-motion HÁROM KÖTÖTT SZABÁLY 1. A komponensben SOHA nincs hexakód — csak token. 2. A hover nem emel és nem erősít árnyékot: szegély- vagy háttérszínt vált. 3. Minden kattintható elem legalább 44×44 px (design-system 10.). ============================================================================= */ /* ============================================================================= A. BETŰKÉSZLET — Plus Jakarta Sans, SAJÁT HOSZTOLÁS ----------------------------------------------------------------------------- A Google Fonts a modern böngészőknek EGYETLEN variábilis woff2-t szolgál ki nyelvi részhalmazonként (wght 200–800), ezért két fájl elég: plus-jakarta-sans-latin.woff2 — alap latin plus-jakarta-sans-latin-ext.woff2 — latin-ext: itt él az Ő, Ű, ő, ű A latin-ext KÖTELEZŐ: enélkül a magyar kettős vessős glifák pótlásból, más betűkészletből jönnének (látható „ugráló" Ő/Ű a szövegben). font-display: swap — a szöveg azonnal olvasható a rendszerbetűvel. A -ben a latin vágat preload-olandó (l. TEMPLATE-CONTRACT.md). ============================================================================= */ @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; /* variábilis tengely — a 400/500/600/700 mind ebből */ font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================================= B.1 PRIMITÍV RÉTEG — nyers értékek, szerep nélkül ============================================================================= */ :root { /* --- Tinta — a „mélykék" a szövegben. Minden érték #FFFFFF fölött mérve. --- */ --ink-900: #0A1A2B; /* 17,57:1 AAA — display, H1–H3 */ --ink-800: #12293F; /* 14,9:1 AAA — erős kiemelt szöveg, idézet */ --ink-700: #2A4157; /* 10,54:1 AAA — TÖRZSSZÖVEG (alapértelmezett) */ --ink-600: #42596E; /* 7,28:1 AAA — másodlagos szöveg, SZÜRKÉSKÉK EYEBROW */ --ink-500: #5B7186; /* 5,06:1 AA — metaadat, „ma így megy" tompított sor */ --ink-400: #7C90A3; /* 3,29:1 ✗ — CSAK dekoratív / disabled, NEM szöveg */ --ink-300: #A8B7C6; /* — dekoratív vonal sötétebb változata */ /* --- Márka-mélykék — struktúra, sötét sáv, linkek ------------------------- */ --blue-900: #08213F; /* legsötétebb sáv (LÁBLÉC) — fehér szöveg 16,16:1 AAA */ --blue-800: #0C2E55; /* SÖTÉT SÁV HÁTTERE (záró CTA) — fehér 13,66:1 AAA */ --blue-700: #113C6E; /* MÁRKA-MÉLYKÉK — 11,08:1 fehéren AAA */ --blue-600: #17508F; /* hover-világosítás — 8,14:1 fehéren AAA */ --blue-500: #2B6BB3; /* diagram-vonal semleges változata */ --blue-300: #8FB3D8; /* dekoratív */ --blue-200: #BBD2EA; /* erős elválasztó */ --blue-100: #DCE8F5; /* halk kitöltés (jelvény, monogram-négyzet) */ --blue-50: #EDF3FA; /* „Mit jelent ez?" doboz háttere */ /* --- Felületek és vonalak ------------------------------------------------- */ --paper-canvas: #F5F8FB; /* törtfehér oldal-háttér (hűvös) */ --paper-white: #FFFFFF; /* tiszta fehér — minden tartalmi blokk */ /* A „vékony halványkék szegély" — rgba, hogy fehér ÉS törtfehér fölött is ugyanolyan finoman üljön. Dekoratív határ, NEM jelentéshordozó UI-határ (arra a --line-strong való). Vastagsága MINDIG 1px. */ --line-rgba: rgba(17, 60, 110, 0.13); --line-hex: #DCE7F2; /* ugyanaz fehér fölött — 1,25:1 */ --line: var(--line-rgba); /* KANONIKUS ALIAS — a hajszálvonal */ --line-soft: rgba(17, 60, 110, 0.07); /* még halkabb belső elválasztó */ --line-strong: #6E8CAC; /* 3,49:1 fehéren — UI-határ ✓ */ --line-inverse: rgba(255, 255, 255, 0.14);/* elválasztó sötét sávon */ /* --- Agyag — az EGYETLEN megtűrt harmadik szín. Kizárólag az „előtte" panel és a „ezt ne csináld" figyelmeztetés. NEM akcent: nem lehet gomb, link vagy ikon-alapszín. */ --clay-700: #8A3B2A; /* 7,67:1 fehéren AAA — „előtte" panel szövege */ --clay-600: #A8442A; /* 5,96:1 fehéren AA — jelölő-ikon, figyelmeztetés */ --clay-200: #F3CDBF; /* „előtte" panel szegélye */ --clay-50: #FDF1ED; /* „előtte" panel háttere */ /* --- Árnyékok — v2.1-ben VISSZAFOGVA. A kártya EGYETLEN 1px-es kontakt-árnyékot kap; a széles szórású árnyék már csak a ténylegesen lebegő elemeké (jelvény, legördülő, mobilmenü). */ --shadow-1: 0 1px 2px rgba(10, 26, 43, 0.05); /* KÁRTYA alapállapot */ --shadow-2: 0 1px 2px rgba(10, 26, 43, 0.06), 0 8px 18px -12px rgba(11, 43, 85, 0.16); /* jelvény, kiemelés */ --shadow-3: 0 2px 4px rgba(10, 26, 43, 0.06), 0 18px 34px -20px rgba(11, 43, 85, 0.22); /* legördülő, mobilmenü */ --shadow-inset-line: inset 0 0 0 1px var(--line-rgba); } /* ============================================================================= B.2 AKCENT-RÉTEG — TEAL, VÉGLEGESÍTVE (teal-only, nincs [data-accent]) ----------------------------------------------------------------------------- KONTRASZT (a sötét sáv VALÓDI háttere a --bg-inverse #0C2E55): #0B7A7A / #FFFFFF ... 5,15:1 AA ✓ szöveg, eyebrow és teli gomb #0B7A7A / #F5F8FB ... 4,83:1 AA ✓ szöveg és eyebrow a canvason #005F60 / #FFFFFF ... 7,48:1 AAA ✓ ez a FÓKUSZGYŰRŰ színe #2FA0A0 / #FFFFFF ... 3,15:1 ✗ szöveghez; dekoratív sávnak ✓ #6ED4D4 / #0C2E55 ... 7,82:1 AAA ✓ kisbetűs szöveg + eyebrow a sávon #0B7A7A felület / #0C2E55 = 2,65:1 ✗ — ezért kap a sávon álló teli akcent-gomb KÖTELEZŐEN --accent-glow belső kontúrt. ============================================================================= */ :root { --accent: #0B7A7A; /* teli gomb, aktív, adatáramlás */ --accent-strong: #005F60; /* hover, erős akcent-szöveg */ --accent-bright: #2FA0A0; /* sötét sávon NAGY szöveg/ikon */ --accent-glow: #6ED4D4; /* sötét sávon kisbetűs szöveg */ --accent-line: #A9D8D8; /* akcentes szegély világoson */ --accent-soft: #EAF6F6; /* halvány kitöltés („utána") */ --accent-tint: #D8EEEE; --accent-underline: var(--accent-bright); /* élénk folt: aláhúzás, tick */ --accent-ring: var(--accent-strong); /* FÓKUSZGYŰRŰ — TÖMÖR, 7,48:1 */ --accent-halo: rgba(11, 122, 122, 0.28); /* csak derengés, sosem fókusz */ --accent-wash: rgba(11, 122, 122, 0.08); } /* ============================================================================= B.3 SZEMANTIKUS RÉTEG — szerep-aliasok. A komponensek MINDIG innen olvasnak, soha nem a primitívekből. ============================================================================= */ :root { /* --- Szöveg --------------------------------------------------------------- */ --text-display: var(--ink-900); --text-heading: var(--ink-900); --text-strong: var(--ink-800); --text-body: var(--ink-700); /* ALAPÉRTELMEZETT törzsszöveg */ --text-muted: var(--ink-600); --text-subtle: var(--ink-500); --text-disabled: var(--ink-400); /* NEM olvasandó szöveg */ --text-link: var(--blue-700); --text-link-hover:var(--accent-strong); --text-on-accent: var(--paper-white); --text-inverse: rgba(255, 255, 255, 0.94); --text-inverse-muted: rgba(255, 255, 255, 0.78); --text-inverse-subtle: rgba(255, 255, 255, 0.66); /* --- Felület -------------------------------------------------------------- */ --bg-canvas: var(--paper-canvas); /* szint 0 — oldal */ --bg-surface: var(--paper-white); /* szint 1 — kártya, panel, fehér sáv */ --bg-tint: var(--blue-50); /* szint 2 — halk kiemelés */ --bg-accent-soft: var(--accent-soft); /* szint 2 — akcentes halk kiemelés */ --bg-inverse: var(--blue-800); /* szint 3 — SÖTÉT SÁV (záró CTA) */ --bg-inverse-deep: var(--blue-900); /* szint 3 — LÁBLÉC */ /* --- Vonal ---------------------------------------------------------------- */ --border: var(--line-rgba); --border-soft: var(--line-soft); --border-strong: var(--line-strong); --border-accent: var(--accent-line); --border-inverse: var(--line-inverse); /* AKTÍV állapot kerete — jelentéshordozó, tehát WCAG 1.4.11 alá esik. NEM lehet --accent-underline: az a TÖRTFEHÉR canvason csak 2,96:1. */ --border-active: var(--accent); /* --- Státusz -------------------------------------------------------------- */ --status-problem: var(--clay-600); --status-problem-text: var(--clay-700); --status-problem-bg: var(--clay-50); --status-problem-line: var(--clay-200); --status-solved: var(--accent); --status-solved-bg: var(--accent-soft); --status-solved-line: var(--accent-line); --status-info: var(--blue-700); --status-info-bg: var(--blue-50); /* --- Fókusz — WCAG 1.4.11 / 2.4.11 szerint ≥3:1 a szomszédos háttérhez ----- */ --focus-ring: var(--accent-ring); --focus-ring-inverse: var(--paper-white); --focus-ring-width: 3px; --focus-ring-offset: 2px; } /* ============================================================================= B.4 TIPOGRÁFIA ----------------------------------------------------------------------------- Egy család fut a teljes oldalon. A Plus Jakarta Sans azért, mert a latin-ext lefedettségében az Ő és Ű VALÓDI kettős vessős glifa. ============================================================================= */ :root { --font-sans: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* --- Súlyok — NÉGY, nincs több. A 800 v2.1-ben törölve: a hierarchiát a 4,2×-es MÉRETKONTRASZT viszi, nem a súly. */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Szerep-aliasok — a komponens EZEKET olvassa, nem a nyers súlyokat. */ --fw-display: var(--fw-bold); /* 700 */ --fw-h1: var(--fw-bold); /* 700 */ --fw-h2: var(--fw-semibold); /* 600 */ --fw-h3: var(--fw-semibold); /* 600 */ --fw-h4: var(--fw-semibold); /* 600 */ /* --- Méretskála — fluid, 360px → 1440px viewport között. Display : Body ≈ 4,2× desktopon. */ --fs-display: clamp(2.75rem, 1.55rem + 5.00vw, 4.75rem); /* 44 → 76 px */ --fs-h1: clamp(2.25rem, 1.55rem + 2.90vw, 3.25rem); /* 36 → 52 px */ --fs-h2: clamp(1.875rem, 1.42rem + 1.90vw, 2.625rem); /* 30 → 42 px */ --fs-h3: clamp(1.375rem, 1.24rem + 0.57vw, 1.75rem); /* 22 → 28 px */ --fs-h4: clamp(1.125rem, 1.08rem + 0.19vw, 1.25rem); /* 18 → 20 px */ --fs-lead: clamp(1.125rem, 1.03rem + 0.40vw, 1.3125rem); /* 18 → 21 px */ --fs-body: clamp(1.0625rem,1.04rem + 0.10vw, 1.125rem); /* 17 → 18 px */ --fs-small: 0.9375rem; /* 15 px */ --fs-micro: 0.8125rem; /* 13 px */ /* --- Sorköz — a szerep jelzője: cím szűk, törzs bő. A magyar ékezetek (Ő, Ű, Á) miatt 1,05 a reális minimum. */ --lh-display: 1.05; --lh-h1: 1.06; --lh-h2: 1.08; --lh-h3: 1.22; --lh-h4: 1.35; --lh-lead: 1.60; --lh-body: 1.65; --lh-tight: 1.40; /* --- Betűköz — negatív tracking KIZÁRÓLAG a display/H1 szintjén. ---------- */ --ls-display: -0.01em; --ls-h1: -0.01em; --ls-h2: 0em; --ls-h3: 0em; --ls-h4: 0em; --ls-body: 0; --ls-button: -0.01em; --ls-eyebrow: 0.1em; --ls-eyebrow-lead: 0em; /* --- Max sorhossz — magyar szóhossz miatt a felső sáv jobb, mint az angol 60ch */ --measure-display: 16ch; --measure-h2: 24ch; --measure-lead: 48ch; --measure-body: 66ch; /* A TÖRZSSZÖVEG KANONIKUS MÉRTÉKE */ --measure-card: 40ch; --measure-quote: 34ch; --measure-inverse: 56ch; /* fordított kontraszton rövidebb sor kell */ } /* ============================================================================= B.5 TÉR, RÁCS, SUGÁR ============================================================================= */ :root { /* --- Térköz-skála (4px-alapú) -------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-30:120px; --space-32:160px; /* --- Szekció-ritmus — HÁROM fokozat, mind fluid clamp(). A FÜGGŐLEGES RITMUS adja a változatosságot, NEM a háttérszín váltogatása (nincs zebra-csíkozás). tight = halk/kiegészítő · base = alap · large = fejezet-nyitó, kiemelt szekció. */ --section-y-tight: clamp(2.5rem, 1.60rem + 3.60vw, 4.5rem); /* 40 → 72 px */ --section-y: clamp(4rem, 2.20rem + 7.50vw, 10rem); /* 64 → 160 px */ --section-y-large: clamp(5rem, 2.20rem + 11.70vw, 12.5rem);/* 80 → 200 px */ --gutter: clamp(1.25rem, 0.60rem + 2.60vw, 2.5rem); /* 20 → 40 px */ --container: 1200px; --container-narrow: 760px; /* szöveg-vezérelt szekció, űrlap, GYIK */ --container-wide: 1360px; /* rendszer-rács, teljes szélességű ábra */ /* --- Rács — 12 oszlop. A rés fluid. -------------------------------------- */ --grid-columns: 12; --grid-gap: clamp(1.5rem, 1.30rem + 0.80vw, 2rem); /* 24 → 32 px */ --grid-gap-sm: clamp(1rem, 0.90rem + 0.40vw, 1.25rem); /* 16 → 20 px */ --grid-gap-xl: clamp(2.5rem, 1.90rem + 2.40vw, 5rem); /* 40 → 80 px */ /* --- Sugár — gomb 4px < kártya 8px. Pill KIZÁRÓLAG a lebegő mini-badge-en. */ --radius-xs: 2px; /* hajszál-elem, regiszterjel, apró sarok */ --radius-sm: 4px; /* GOMB, űrlapmező, ikon-konténer, monogram-négyzet */ --radius-md: 6px; /* rendszerkártya, belső panel, „Mit jelent ez?" */ --radius-lg: 8px; /* KÁRTYA — kanonikus */ --radius-xl: 10px; /* nagy panel, ábra-keret, képkeret */ --radius-pill: 999px; /* CSAK a lebegő mini-badge */ /* --- Z-index ------------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 500; --z-overlay: 900; --z-modal: 1000; } /* ============================================================================= B.5b HERO-JELENET — a főoldali „A GÉPHÁZ" hero saját tokenjei ----------------------------------------------------------------------------- Egyetlen ÚJ PRIMITÍV SZÍN SEM születik: minden érték a meglévő --blue-*, --accent-* és --text-inverse-* tokenekből jön. Ez a blokk kizárólag méretet, arányt és ritmust ad. A --fs-hero levezetése. A H1 NÉGY szerzői sorra tördel, és a bal hasáb a rács ~48%-a, tehát a mérethatárt a leghosszabb sor szabja meg: „kézzel csinálni?" ≈ 8,4em (a −0,036em betűközzel és a teal blokk 0,2em-es belső margójával együtt) 1600 px-en a hasáb ~700 px → 700 / 8,4 ≈ 83 px: meredekség = (83 − 38) / (1600 − 390) = 0,0372 px/px → 3,72vw … kerekítve 4,2vw-re, mert a hasáb a --container-hero fölött tovább nő A `min(…, 10,5svh)` a magassági plafon: alacsony laptopon a plakát ad le előbb, nem a CTA-pár csúszik a hajtás alá. ============================================================================= */ :root { --fs-hero: min(clamp(2.375rem, 0.95rem + 4.5vw, 6.25rem), 9.4svh); /* 38 → 100 px */ --lh-hero: 0.93; /* tömör tipográfiai BLOKK, nem folyószöveg */ --ls-hero: -0.036em; /* plakát-léptéken szorosabb, mint a -0.01em */ --container-hero: 1560px; /* CSAK a hero rácsa */ --hero-copy-max: 47rem; /* a plakát-hasáb pontos szélessége */ --hero-pad-top: clamp(1.5rem, 0.9rem + 2.0vw, 3rem); --hero-pad-bot: clamp(1.5rem, 1.1rem + 1.6vw, 2.75rem); } /* ============================================================================= B.6 KOMPONENS-TOKENEK ============================================================================= */ :root { /* --- KÁRTYA — a kanonikus recept. 8px sugár, egyrétegű kontakt-árnyék, és a hover CSAK szegélyszínt vált (nincs emelkedés, nincs árnyék-erősítés). */ --card-bg: var(--bg-surface); --card-border: 1px solid var(--border); --card-radius: var(--radius-lg); /* 8px */ --card-padding: clamp(1.25rem, 1.05rem + 1.00vw, 2rem); /* 20 → 32 px */ --card-shadow: var(--shadow-1); --card-shadow-hover: var(--shadow-1); /* AZONOS — nincs árnyék-hover */ --card-lift-hover: 0px; /* NINCS emelkedés */ --card-border-hover: var(--accent-line); /* a hover EGYETLEN jele */ --card-bg-hover: var(--bg-surface); --card-title-color: var(--text-heading); --card-body-color: var(--text-body); --card-accent-bar: 2px; /* kiemelt kártya felső csíkja */ /* --- GOMB — 4px sugár, font-relatív padding, NINCS árnyék semmilyen állapotban, a hover kizárólag háttérszínt vált. */ --btn-radius: var(--radius-sm); --btn-font-size: var(--fs-body); --btn-font-weight: var(--fw-medium); --btn-tracking: var(--ls-button); --btn-padding-y: 0.9rem; --btn-padding-x: 1.4rem; --btn-min-height: 48px; /* ≥44px érintési célfelület */ --btn-min-height-compact: 44px; /* az ABSZOLÚT minimum (§10) */ --btn-gap: 10px; --btn-primary-bg: var(--accent); --btn-primary-bg-hover: var(--accent-strong); --btn-primary-text: var(--text-on-accent); --btn-primary-shadow: none; --btn-primary-inverse-outline: inset 0 0 0 1px var(--accent-glow); --btn-secondary-bg: var(--bg-surface); --btn-secondary-text: var(--blue-700); --btn-secondary-border: 1px solid var(--border-strong); --btn-secondary-bg-hover: var(--bg-tint); --btn-ghost-text: var(--blue-700); /* .46 alfa → 4,07:1 a sáv-háttéren. A kontúros gomb EGYETLEN látható határa ez a vonal, ezért nem lehet a 3:1-es küszöb közelében. */ --btn-inverse-border: 1px solid rgba(255,255,255,.46); --btn-inverse-text: var(--paper-white); --btn-inverse-bg-hover: rgba(255,255,255,.12); /* --- EYEBROW-RENDSZER — tipográfiai elem, nem pill-címke. alap = teal (5,15:1 fehéren / 4,83:1 canvason) · muted = szürkéskék (7,28:1) · inverse = --accent-glow a sötét sávon (7,82:1). */ --eyebrow-font-size: var(--fs-micro); /* 13px */ --eyebrow-weight: var(--fw-semibold); /* 600 */ --eyebrow-tracking: var(--ls-eyebrow); /* 0,1em */ --eyebrow-line-height: 1.3; --eyebrow-color: var(--accent); --eyebrow-color-muted: var(--ink-600); --eyebrow-color-inverse:var(--accent-glow); --eyebrow-gap: clamp(0.625rem, 0.50rem + 0.50vw, 1rem); /* 10 → 16 px */ --eyebrow-num-color: var(--ink-400); --eyebrow-rail-span: 2; /* 2/12 oszlop */ --eyebrow-rail-gap: var(--grid-gap); /* A MÁSODIK variáns — „lead-eyebrow": kevert kis-nagybetűs, 16→20 px, 500. A VERZÁL, sorszámozott változat a FŐ FEJEZETEKÉ; a halkabb szekciók és a szekción belüli alcímkék ezt kapják (sorszám nélkül). */ --eyebrow-lead-size: clamp(1rem, 0.94rem + 0.25vw, 1.25rem); /* 16→20 px */ --eyebrow-lead-weight: var(--fw-medium); --eyebrow-lead-tracking: var(--ls-eyebrow-lead); --eyebrow-lead-line-height: 1.4; --eyebrow-lead-color: var(--ink-600); /* --- SZEKCIÓ-FEJLÉC — a három engedélyezett elrendezés rács-értékei -------- */ --head-rail-span: 2; --head-body-span: 7; --head-note-span: 3; --head-note-color: var(--text-subtle); --head-note-size: var(--fs-small); --head-note-measure: 32ch; --head-gap: var(--space-10); /* --- A BIRTOKOLHATÓ JEL — „hajszálkereszt" regiszterjel -------------------- */ --tick-width: 2px; --tick-height: 20px; --tick-color: var(--accent-underline); /* --- IKON-RENDSZER — stroke, sosem fill; 24px-es rácson; szögletes konténer. A „doboz méret" tokenek `max(px, em)`-esek: csak-szöveg nagyításnál a doboz a szöveggel EGYÜTT nő. */ --icon-stroke: 1.75px; /* alap vonalvastagság */ --icon-stroke-bold: 2.25px; /* pipa, nyíl, chevron kis méretben */ --icon-stroke-hair: 1.25px; /* segédvonal ábrán belül */ --icon-xs: 16px; /* soron belüli jelölő */ --icon-sm: 18px; /* inline ikon szöveg mellett */ --icon-md: 20px; /* nav-ikon, gomb-ikon */ --icon-lg: 24px; /* kártya-ikon — az ALAPÉRTELMEZETT */ --icon-xl: 28px; /* szekció-vezető ikon (ritka) */ --icon-chip-size: max(40px, 2.4em); --icon-chip-radius: var(--radius-sm); --icon-chip-bg: transparent; --icon-chip-bg-soft: var(--accent-soft); --icon-chip-border: 1px solid var(--border); --icon-chip-color: var(--accent); --icon-color-info: var(--blue-700); --icon-color-warn: var(--clay-600); --icon-color-inverse:var(--accent-glow); /* --- FOLYAMATÁBRA (inline SVG) -------------------------------------------- */ --flow-stroke-hair: var(--icon-stroke-hair); --flow-stroke-base: var(--icon-stroke); --flow-stroke-accent: 2.5px; /* ADATÁRAMLÁS vonala */ --flow-radius: var(--radius-md); --flow-box-bg: var(--bg-surface); --flow-box-border: var(--line-strong); --flow-box-text: var(--ink-800); --flow-line: var(--accent); --flow-line-passive: var(--ink-400); --flow-dash-passive: 6 6; /* szaggatott — sose csak szín */ --flow-label: var(--ink-600); --flow-grid: var(--line-hex); /* --- RENDSZERKÁRTYA ------------------------------------------------------- */ --syscard-padding: 14px 18px; --syscard-radius: var(--radius-md); --syscard-mono-size: max(30px, 2.2em); --syscard-mono-radius: var(--radius-sm); --syscard-mono-bg: var(--accent-soft); --syscard-mono-text: var(--accent-strong); --syscard-label-size: var(--fs-small); --syscard-label-weight: var(--fw-semibold); /* KATEGÓRIA-TINTÁK: a monogramot a rendszer FUNKCIÓJA szerint színezzük. Felirat mindig van mellette, tehát a szín nem egyedüli jelentéshordozó. */ --syscard-kind-szamla-bg: var(--accent-soft); --syscard-kind-szamla-text: var(--accent-strong); --syscard-kind-iroda-bg: var(--blue-100); --syscard-kind-iroda-text: var(--blue-700); --syscard-kind-webshop-bg: var(--accent-tint); --syscard-kind-webshop-text:var(--accent-strong); --syscard-kind-komm-bg: var(--blue-50); --syscard-kind-komm-text: var(--blue-700); --syscard-active-border: var(--border-active); --syscard-active-bg: var(--accent-soft); /* --- ELŐTTE / UTÁNA PANEL (a brand jelkomponense) ------------------------- */ --ba-radius: var(--radius-lg); --ba-padding: var(--card-padding); --ba-before-bg: var(--status-problem-bg); --ba-before-line: var(--status-problem-line); --ba-before-text: var(--status-problem-text); --ba-before-label: var(--status-problem); --ba-after-bg: var(--status-solved-bg); --ba-after-line: var(--status-solved-line); --ba-after-text: var(--text-body); --ba-after-label: var(--accent-strong); --ba-badge-size: max(40px, 2.4em); /* --- „MIT JELENT EZ?" DOBOZ ----------------------------------------------- */ --explain-bg: var(--status-info-bg); --explain-bar: 3px; --explain-bar-color: var(--status-info); --explain-radius: var(--radius-md); --explain-padding: var(--space-5); --explain-label: var(--status-info); /* --- FOLYAMAT-LÉPÉSEK — a lépés-jelvény SZÖGLETES (4px), nem kör. --------- */ --step-badge-size: max(40px, 2.4em); --step-badge-radius: var(--radius-sm); --step-badge-bg: var(--accent); --step-badge-text: var(--text-on-accent); --step-badge-ring: 0 0 0 5px var(--accent-halo); --step-connector: 1.75px; --step-connector-color: var(--line-strong); --step-connector-dash: 6 7; /* --- STATISZTIKA-SOR — VILÁGOS felületen, egy kiemelt csempe + három kisebb */ --stat-value-size: var(--fs-h1); --stat-value-weight: var(--fw-h1); --stat-columns: 1.6fr 1fr 1fr 1fr; --stat-lead-value-size: var(--fs-display); --stat-value-color: var(--ink-900); --stat-value-color-inverse: var(--accent-bright); --stat-label-color: var(--text-muted); --stat-label-color-inverse: var(--text-inverse-muted); --stat-rule: 1px solid var(--border); --stat-divider: var(--border-inverse); /* --- NAVBAR — logó + kategorizált legördülők + PONTOSAN KÉT, rangsorolt CTA */ --nav-height: 68px; --nav-bg: rgba(255, 255, 255, 0.92); --nav-border: 1px solid var(--border); /* TELJES SZÉLESSÉG (spec 5.2). A sáv tartalma NEM 1200 px-es konténerben ül, hanem a viewport széléig fut, ezzel a belső oldalpaddinggal. A 72 px-es felső korlát 1440 px fölött a --gutter kétszerese: az érzet edge-to-edge, de a logó és a CTA nem tapad a képernyő fizikai éléhez. */ --nav-gutter: clamp(20px, 4vw, 72px); --nav-gutter-sm: 16px; /* 1159 px alatt */ --nav-bg-scrolled: rgba(255, 255, 255, 0.97); --nav-link-size: var(--fs-small); --nav-link-weight: var(--fw-semibold); --nav-link-color: var(--text-muted); --nav-link-color-hover: var(--text-heading); --nav-link-gap: var(--space-6); --nav-mark-size: 20px; --nav-mark-radius: var(--radius-xs); /* --- LEBEGŐ MINI-BADGE — az EGYETLEN pill-elem a rendszerben -------------- */ --badge-radius: var(--radius-pill); --badge-padding: 6px 12px; --badge-size: var(--fs-micro); --badge-bg: var(--bg-surface); --badge-border: 1px solid var(--border); /* --- ŰRLAP ---------------------------------------------------------------- */ --field-min-height: max(52px, 3.0em); /* min-height, NEM fix height */ --field-padding: 0.75em 1em; --field-radius: var(--radius-sm); --field-border: 1px solid var(--border-strong); /* 3,49:1 ✓ */ --field-bg: var(--bg-surface); --field-border-focus: var(--accent); --field-ring-focus: 0 0 0 3px var(--accent-ring); /* TÖMÖR — 7,48:1 ✓ */ --field-label-color: var(--text-body); /* címke MINDIG a mező fölött */ --field-error: var(--clay-600); /* --- RENDSZER-SOR — STATIKUS rács (a marquee törölve) -------------------- */ --syslist-columns: 1.5fr 1.7fr 1.4fr 1fr; /* nem négy egyenlő oszlop */ --syslist-gap: var(--grid-gap); --syslist-item-gap: var(--space-2); --syslist-cat-color: var(--ink-600); } /* ============================================================================= B.7 MOTION-RÉTEG ----------------------------------------------------------------------------- Nyolc szabály (design-system.md 9.): 1. Rövid úthossz: 8–24px. 2. Egy easing-nyelv. 3. Egyszeri lejátszás. 4. Statikus nyugalmi állapot. 5. Az olvasási sorrendet erősíti. 6. A végállapot JS nélkül is teljes. 7. Egy szekció VAGY blokként revealel, VAGY a gyerekeit staggereli. 8. Minden animált elemnek van CSS-alapállapota (.js-reveal / .js-fade). ============================================================================= */ :root { /* --- Időtartam ------------------------------------------------------------ */ --dur-instant: 120ms; /* ikon-szín, apró visszajelzés */ --dur-quick: 200ms; /* hover, fókusz, gomb-állapot */ --dur-base: 320ms; /* akkordeon, tab-váltás, mobilmenü */ --dur-reveal: 520ms; /* scroll-reveal, hero-elem belépése */ --dur-slow: 760ms; /* számláló, SVG-vonalrajzolás */ /* --- Görbék — CSS és GSAP ugyanaz a nyelv -------------------------------- */ --ease-out: cubic-bezier(.22, .61, .36, 1); /* GSAP "power2.out" hover */ --ease-entrance: cubic-bezier(.16, 1, .30, 1); /* GSAP "power3.out" reveal */ --ease-emphasis: cubic-bezier(.34, 1.30, .64, 1); /* CSAK a lépés-jelvényen! */ /* --ease-linear NINCS: az oldalon nincs folyamatos mozgás. */ /* --- Reveal-paraméterek --------------------------------------------------- */ --reveal-shift: 16px; --reveal-stagger: 70ms; --hero-word-stagger: 45ms; --hero-line-shift: 22px; --hover-lift: 0px; /* NINCS emelkedés */ --hover-arrow-shift: 3px; /* a nyíl EGYETLEN megengedett elmozdulása */ /* --- ScrollTrigger egységes start-értékek (nincs szekciónkénti ad-hoc) ---- */ --st-start-reveal: "top 86%"; --st-start-visual: "top 80%"; --st-start-counter: "top 85%"; } /* ============================================================================= C. ALAPÁLLAPOT + JS-FÜGGETLENSÉG ----------------------------------------------------------------------------- KÖTELEZŐ: a .js osztályt maga a JS teszi fel a -re, közvetlenül a stíluslap után: Így JS nélkül MINDEN LÁTSZIK — az elrejtést a JS kapcsolja be, nem a CSS. ============================================================================= */ /* Alapállapot: minden látható. Ez érvényes JS nélkül. .js-reveal — a szekció mint blokk érkezik .js-fade — a szekción BELÜLI, staggerelt gyerekelem */ .js-reveal, .js-fade { opacity: 1; visibility: visible; transform: none; } @media (prefers-reduced-motion: no-preference) { /* visibility: hidden (= GSAP autoAlpha), NEM puszta opacity: 0 — különben a rejtett blokk linkjei tabbal elérhetők, de láthatatlanok (WCAG 2.4.7). */ html.js .js-reveal { opacity: 0; visibility: hidden; transform: translateY(var(--reveal-shift)); } html.js .js-fade { opacity: 0; visibility: hidden; } /* A hero szó-reveal maszkolt alapállapota. Szerkezet:

Szó…

*/ html.js .js-hero-word .word-in { transform: translateY(108%); opacity: 0; } } /* ============================================================================= D. RESET ÉS ELEMI TIPOGRÁFIA ============================================================================= */ *, *::before, *::after { box-sizing: border-box; } /* FIGYELEM: NINCS `scroll-behavior: smooth` a html-en. A böngésző saját, aszinkron görgetés-animációja elveszi a ScrollTriggertől a pozíció-kezelést. A sima görgetés a horgonyokra szűkítve, JS-ből megy (main.js). */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--bg-canvas); color: var(--text-body); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, svg, video { max-width: 100%; } img { height: auto; } h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--text-heading); text-wrap: balance; } p { margin: 0; text-wrap: pretty; } ul, ol { margin: 0; padding: 0; list-style: none; } /* Tartalmi (szövegközi) felsorolás — itt a jelölő KELL. */ .prose ul, .prose ol { padding-left: 1.4em; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li + li { margin-top: var(--space-2); } .prose p + p, .prose p + ul, .prose p + ol, .prose ul + p, .prose ol + p { margin-top: var(--space-4); } a { color: var(--text-link); text-decoration: none; } a:hover { color: var(--text-link-hover); } /* Szövegközi link: aláhúzva — a szín önmagában nem elég jelölő (WCAG 1.4.1). */ .prose a, .rich-text a { text-decoration: underline; text-underline-offset: 0.18em; } strong, b { font-weight: var(--fw-semibold); color: var(--text-strong); } code { font-family: var(--font-mono); font-size: 0.92em; } hr { height: 1px; background: var(--border); border: 0; margin: 0; } button, input, select, textarea { font: inherit; color: inherit; } /* Fókusz — soha nincs outline:none pótlás nélkül. A gyűrű TÖMÖR (7,48:1 világoson), nem áttetsző. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-xs); } /* Sötét sávon a teal gyűrű megbukna (1,82:1) — ott fehér gyűrű megy. */ :where([data-surface="inverse"], .band, .footer) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--focus-ring-inverse); } /* Kihagyó link — billentyűzetes navigáció, WCAG 2.4.1 */ .skip { position: absolute; left: -9999px; top: 0; background: var(--bg-surface); color: var(--text-heading); padding: 12px 18px; border-radius: var(--radius-sm); box-shadow: var(--shadow-3); z-index: var(--z-modal); font-weight: var(--fw-semibold); } .skip:focus { left: 16px; top: 16px; } /* Tipográfiai szerep-osztályok. A súly és a tracking szerep-tokenből jön: display + H1 = 700 és −0,01em; H2–H4 = 600 és 0em. */ .display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-display); } .h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: var(--fw-h1); } .h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: var(--fw-h2); } .h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--fw-h3); } .h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); font-weight: var(--fw-h4); } .lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-muted); max-width: var(--measure-lead); } .small { font-size: var(--fs-small); color: var(--text-subtle); } .micro { font-size: var(--fs-micro); color: var(--text-subtle); } /* Akcent-aláhúzás a címsorban. A JS ezt animált sávra cseréli, de a box-shadow alapállapot JS nélkül is látszik. */ .mark { position: relative; display: inline-block; box-shadow: inset 0 -0.14em 0 var(--accent-underline); } /* ============================================================================= E. ELRENDEZÉS — konténer, szekció-ritmus, 12 oszlopos rács ============================================================================= */ .u-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .u-container-narrow { width: 100%; max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); } .u-container-wide { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); } /* Szekció-váz: a ritmust a MAGASSÁG adja, nem a háttérszín. Zebra-sávozás nincs. */ .section { padding-block: var(--section-y); } .section--tight { padding-block: var(--section-y-tight); } .section--large { padding-block: var(--section-y-large); } /* TELJES SZÉLESSÉGŰ fehér sáv — oldalanként 2–3, tartalmi okkal kiemelve. */ .section--paper { background: var(--bg-surface); border-block: 1px solid var(--border); position: relative; } /* A regiszterjel a fehér sáv FELSŐ élén metszi a hajszálvonalat. */ .section--paper::before { content: ""; position: absolute; top: calc(var(--tick-height) / -2); height: var(--tick-height); width: var(--tick-width); border-radius: var(--radius-xs); background: var(--tick-color); left: var(--gutter); pointer-events: none; } @media (min-width: 1281px) { .section--paper::before { left: calc((100% - var(--container)) / 2 + var(--gutter)); } } /* KONTÉNER-SZÉLESSÉGŰ fehér felület — a fehér blokk halkabb változata. */ .section--paper-inset > .u-container { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding-block: var(--section-y-tight); max-width: calc(var(--container) + 2 * var(--gutter)); } /* 12 oszlopos rács. A MÉRET-HIERARCHIA kötelező: egy tartalmi rácsban sem lehet minden oszlop pontosan egyenlő szélességű 3× vagy 4×. Kivétel: az előtte/utána panel 6+6-ja (ott a szimmetria az üzenet) és a hajszálvonalas lista. */ .row, .u-row { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); gap: var(--grid-gap); } .row--xl { gap: var(--grid-gap-xl); } .col-2{grid-column:span 2} .col-3{grid-column:span 3} .col-4{grid-column:span 4} .col-5{grid-column:span 5} .col-6{grid-column:span 6} .col-7{grid-column:span 7} .col-8{grid-column:span 8} .col-9{grid-column:span 9} .col-10{grid-column:span 10} .col-12{grid-column:span 12} .col-start-8 { grid-column: 8 / -1; } .u-col-2{grid-column:span 2} .u-col-3{grid-column:span 3} .u-col-4{grid-column:span 4} .u-col-5{grid-column:span 5} .u-col-6{grid-column:span 6} .u-col-7{grid-column:span 7} .u-col-8{grid-column:span 8} .u-col-10{grid-column:span 10} .u-col-12{grid-column:span 12} @media (max-width: 900px) { .row, .row--xl, .u-row { grid-template-columns: 1fr; gap: var(--grid-gap-sm); } [class*="col-"] { grid-column: 1 / -1; } } /* ============================================================================= F.1 IKON-UTILITY-K ----------------------------------------------------------------------------- Az `

viszont nem kap fókuszt, tehát billentyűzettel a 375 px-es telefonon az ábra jobb oldali harmada (a naptar-foglalas hétvégi oszlopai, az ugyfelportal státusz-oszlopa) elérhetetlen lenne. A markupban ezért `tabindex="0" role="region" aria-label` áll a görgethető konténereken — ide csak a LÁTHATÓ fókuszgyűrű tartozik. A `.illu--stacks` kimarad: az nem görög, hanem HTML-listára vált. A globális `:where(…, [tabindex]):focus-visible` szabály (690. sor) már ad gyűrűt; itt csak a lekerekítést és a nagyobb ráhagyást pontosítjuk, hogy a gyűrű ne vágja le az ábra szélét. */ .illu[tabindex]:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 4px; border-radius: var(--radius-md); }