/* ============================================================================ FoglalGo · Design tokenek — „Nyugodt pult" irány ---------------------------------------------------------------------------- Három réteg: 1. PRIMITÍV — nyers márkaértékek (--foglalgo-*). Komponens sose hivatkozza őket közvetlenül. 2. SZEMANTIKUS — szerep szerinti nevek (--szin-*, --betu-*, --ter-* …). A komponensek ezekből építkeznek; a téma itt vált. 3. KOMPONENS — komponens-szintű méretek a fájl végén (--gomb-*, --mezo-* …). Téma: :root = világos (alapértelmezés) · [data-tema="sotet"] = sötét. Kontraszt: minden szöveg/háttér páros WCAG AA-ra (≥ 4,5:1) ellenőrizve. A márka-terrakotta (#D5583B) fehér szöveggel csak 3,97:1 — ezért kitöltésként a mélyített #C2482B él (4,93:1), a márka-árnyalat kontúron és nagy címen marad. Tiltott: gradiens, hideg tech-kék, lila. (Márkabook, 02. fejezet.) ============================================================================ */ :root { /* ------------------------------------------------------------------ */ /* 1. PRIMITÍV PALETTA */ /* ------------------------------------------------------------------ */ --foglalgo-papir: #FBF5E9; /* papírkrém — alapfelület */ --foglalgo-papir-vilagos: #FFFCF4; /* kártya, mező */ --foglalgo-homok: #EFE4CB; /* erős meleg tint */ --foglalgo-homok-halvany: #F6EEDC; /* finom tint, hover */ --foglalgo-tinta: #26241F; /* széntinta — szöveg */ --foglalgo-tinta-lagy: #4B463C; /* másodlagos szöveg */ --foglalgo-halvany: #6F675A; /* halvány szöveg (papíron 5,1:1) */ --foglalgo-terrakotta: #D5583B; /* márka-terrakotta — kontúr, nagy cím */ --foglalgo-terrakotta-mely: #C2482B; /* AA-biztos interaktív kitöltés */ --foglalgo-terrakotta-sotet: #AD3C22; /* kitöltés hover */ --foglalgo-terrakotta-tint: #F8E3DC; --foglalgo-terrakotta-szoveg:#B23E23; /* terrakotta szövegként tinten (4,7:1) */ --foglalgo-mustar: #DFA43D; /* csak folt, ikon, pötty — szövegként soha */ --foglalgo-mustar-mely: #6E5211; /* mustár-szerep szövegként (6,2:1) */ --foglalgo-mustar-tint: #F7ECD2; --foglalgo-erdo: #17453A; /* erdőzöld — bizalom, siker */ --foglalgo-erdo-eleven: #1E5D4E; --foglalgo-erdo-tint: #E3EDE5; --foglalgo-rozsda: #A93226; /* hiba (papíron 6,1:1) */ --foglalgo-rozsda-tint: #F8E3DD; --foglalgo-feher: #FFFFFF; /* sötét téma primitívjei — meleg, barnás sötét, sosem kékes fekete */ --foglalgo-ejalap: #1B1813; --foglalgo-ejfelulet: #232019; --foglalgo-ejhomok-halvany: #2C2721; --foglalgo-ejhomok: #363028; --foglalgo-ejvonal: #3A3429; --foglalgo-ejvonal-eros: #4C4436; --foglalgo-ejpapir: #F2EBDC; /* szöveg sötéten */ --foglalgo-ejhalvany: #A89C86; --foglalgo-ejplacehold: #948A77; --foglalgo-ejterra-szoveg: #E58B70; /* akcent szövegként sötéten (7,0:1) */ --foglalgo-ejsiker-szoveg: #9CC7B1; --foglalgo-ejsiker-tint: #20302A; --foglalgo-ejfigyelem-szoveg:#E0B266; --foglalgo-ejfigyelem-tint: #332A18; --foglalgo-ejhiba-szoveg: #E8907B; --foglalgo-ejhiba-tint: #35201B; /* ------------------------------------------------------------------ */ /* 2. SZEMANTIKUS SZÍNEK — világos téma */ /* ------------------------------------------------------------------ */ color-scheme: light; --szin-hatter: var(--foglalgo-papir); --szin-felulet: var(--foglalgo-papir-vilagos); --szin-felulet-finom: var(--foglalgo-homok-halvany); /* oldalsáv, táblázatfej */ --szin-hover: var(--foglalgo-homok-halvany); /* halvány szöveg még olvasható rajta */ --szin-hover-eros: var(--foglalgo-homok); /* ide halvány szöveg NEM kerülhet */ --szin-szoveg: var(--foglalgo-tinta); --szin-szoveg-masodlagos: var(--foglalgo-tinta-lagy); --szin-szoveg-halvany: var(--foglalgo-halvany); --szin-vonal: #EADFC8; /* hajszálvonal */ --szin-vonal-eros: #D8CBAC; /* mezőkeret */ --szin-vonal-sotet: #B3A685; /* mezőkeret hover */ --szin-marka: var(--foglalgo-terrakotta); /* kontúr, kijelölés-keret, nagy cím */ --szin-akcio: var(--foglalgo-terrakotta-mely); /* gombkitöltés, link */ --szin-akcio-hover: var(--foglalgo-terrakotta-sotet); --szin-akcio-szoveg: var(--foglalgo-feher); /* felirat akció-kitöltésen */ --szin-akcio-tint: var(--foglalgo-terrakotta-tint); --szin-akcio-szoveg-tinten: var(--foglalgo-terrakotta-szoveg); --szin-akcio-korvonal: transparent; /* gombkontúr — csak ott kap színt, ahol a kitöltés önmagában nem érné el a 3:1-et */ --szin-siker: var(--foglalgo-erdo); --szin-siker-tint: var(--foglalgo-erdo-tint); --szin-siker-szoveg: var(--foglalgo-erdo); --szin-figyelem: var(--foglalgo-mustar-mely); --szin-figyelem-elenk: var(--foglalgo-mustar); /* pötty, ikon — nem szöveg */ --szin-figyelem-tint: var(--foglalgo-mustar-tint); --szin-hiba: var(--foglalgo-rozsda); --szin-hiba-tint: var(--foglalgo-rozsda-tint); --szin-inverz-hatter: var(--foglalgo-tinta); /* kijelölt naptárnap, lapozó */ --szin-inverz-szoveg: var(--foglalgo-papir); --szin-fokusz: var(--foglalgo-terrakotta); --szin-fokusz-tint: var(--foglalgo-terrakotta-tint); /* ------------------------------------------------------------------ */ /* 2. TIPOGRÁFIA */ /* ------------------------------------------------------------------ */ /* Külső betű nélkül: a Fraunces szerepét a Georgia-vonal, a Space Grotesk szerepét a Segoe UI-vonal veszi át. Önhosztolt webfontra áttéréskor csak ezt a két tokent kell cserélni. */ --betu-cim: "Georgia Pro", Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif; --betu-szoveg: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --betu-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, "Courier New", monospace; --meret-apro: 0.75rem; /* 12px — jelvény, táblázatfej-segéd */ --meret-kicsi: 0.8125rem; /* 13px — címke, súgó, táblázatfej */ /* FIGYELEM — ITT SZÁNDÉKOSAN 13 PX MARADT, a pultban NEM (ott az N26 óta 14px). Az N28 (2026-08-28) ezt már VÉGIGMÉRTE — nem elmaradt szinkron: a 14 px önmagában ROSSZABB lenne, mint a mai 13. MIT ÉR EL EGYÁLTALÁN EZ A TOKEN. Nyolc vendég- és ajtólap, négy szélesség (1920/1280/768/390), valódi böngészőben, kontrollfutással: az érték átírására MINDÖSSZE NÉGY lap mozdul — a nyitólap (`/`, vagyis a `3-bemutato/bemutato.html`, a SAJÁT beágyazott token-másolatán át) és a három ajtóképernyő (belépés, új jelszó, ÁSZF-elfogadás, a `2-admin/ajto.css` három szabályán át). A FOGLALÓLAP (`/f/`), az adatkezelési lap, az ÁSZF és az impresszum betűméret-hisztogramja VÁLTOZATLAN maradt: ezek betöltik ugyan ezt a fájlt, de a `--meret-*` skálát nem használják — saját, független `--szoveg-*` skálájuk van. MIÉRT NEM ELÉG A 14 PX. A nyitólapon 233 elem viseli ezt a tokent és 446 a `--meret-alap`-ot (hogy tényleg a tokenből jön, azt a 14/16-os kontrollfutás mutatta meg: ott a 15 px-es csoport nyomtalanul eltűnt, 447 elem lett 16 px-es). 13 → 14 px-en e két csoport között 1 PIXELRE olvad a különbség (14 vs 15), vagyis a lap fő szövegtagolása megszűnik. Pontosan az a hiba, amit az N23 a pulton már kijavított — ott az alap ment 15 → 16 px-re, és ide az az emelés soha nem jött át. Törés egyik változatnál sincs: új csonkolás 0, vízszintes túllógás 0, új görgetősáv 0. A baj nem törés, hanem a hierarchia elvesztése — ezért „tiszta" a mérés a szó szoros értelmében, és mégis nem. MI LENNE A HELYES. A két fokot EGYÜTT emelni (14 px + 16 px). Ez is mérve van, szintén 0/0/0, és a létra helyreáll; ára a nyitólap +112 px asztali gépen és +278 px telefonon (2,2%, illetve 3,2% magasság). Ez viszont a nyitólap TÖRZSSZÖVEGÉT is átméretezi — több annál, mint amire az N28 megbízása szólt, ezért Magor döntése nélkül nem tesszük meg. A sor a B-várólistán áll. */ /* FIGYELEM — ITT SZÁNDÉKOSAN 15 PX MARADT, a pultban NEM. Ez a fájl és a `felulet/4-uj-admin/tokenek.css` egyébként egymás másolata, de HÁROM `--meret-*` értéknél eltérnek: `--meret-kicsi` (N26), `--meret-alap` és `--meret-nagy` (mindkettő N23). A pult itt `1rem`-re ment, mert az a napi munka felülete, és ott minden beviteli mező a `--meret-alap` méretét viseli (iOS-nagyítás, lásd `4-uj-admin/tokenek.css`). A vendég- lapok mezőit a saját `@media (pointer: coarse)` szabályuk emeli 16 px-re érintőképernyőn, a vendégoldal tipográfiáját pedig NEM rendeztük át egy olyan körben, amit a tulaj pultjára kértek. Ha egyszer ide is 1rem kerül, az ÖNÁLLÓ döntés, nem elmaradt szinkron. */ --meret-alap: 0.9375rem; /* 15px — törzsszöveg, gomb, mező */ /* FIGYELEM — ITT SZÁNDÉKOSAN 17 PX MARADT, a pultban 18 px. Az N23 azért mozdította vele a pult „kiemelt" fokát, mert 16 px-es alap mellett a 17 px nem emel ki semmit: egy pixel különbség nem olvasható jelzés. Itt az alap 15 px, ehhez képest a 17 px még valódi lépcső. Az N26 őre ezt a szabályt méri (két szomszédos fok között legalább 2 px), nem a puszta számot — de a TELJES skálára csak a pulton. Ebből a fájlból az N28 óta EGY lépés van lekötve, a `--meret-kicsi` → `--meret-alap` (n28-vendeg-kis-betumeret): az visel a nyitólapon 233 + 446 elemet, az hordozza a lap tagolását. A 12/13 lépés itt továbbra is egy pixel, és a vendégoldal teljes skálájának átrendezése önálló kör (fel is van véve a B-várólistára). */ --meret-nagy: 1.0625rem; /* 17px — kiemelt törzs */ --meret-cim-3: 1.25rem; /* 20px — kártyacím */ --meret-cim-2: 1.625rem; /* 26px — szakaszcím */ --meret-cim-1: 2.125rem; /* 34px — oldalcím */ --meret-kiemelt:2.75rem; /* 44px — display */ --vastagsag-normal: 400; --vastagsag-felkover: 600; --vastagsag-kover: 650; /* variálható Segoe UI-n finomabb, mint a 700 */ --sormagassag-szoros: 1.2; --sormagassag-cim: 1.25; --sormagassag-alap: 1.55; --betukoz-cim: -0.015em; --betukoz-alap: 0; /* ------------------------------------------------------------------ */ /* 2. TÉRKÖZ · SUGÁR · VONAL · ÁRNYÉK · MOZGÁS · RÉTEG */ /* ------------------------------------------------------------------ */ --ter-1: 0.25rem; /* 4px */ --ter-2: 0.5rem; /* 8px */ --ter-3: 0.75rem; /* 12px */ --ter-4: 1rem; /* 16px */ --ter-5: 1.25rem; /* 20px */ --ter-6: 1.5rem; /* 24px */ --ter-7: 2rem; /* 32px */ --ter-8: 2.5rem; /* 40px */ --ter-9: 3rem; /* 48px */ --ter-10: 4rem; /* 64px */ --sugar-kicsi: 6px; --sugar-alap: 8px; --sugar-nagy: 12px; --sugar-teljes: 999px; --vonal-vekony: 1px; /* Lágy, eltolt árnyékok — csak lebegő elemen (menü, felugró). */ --arnyek-finom: 0 1px 2px rgba(38, 36, 31, 0.05); --arnyek-lebego: 0 12px 32px -12px rgba(38, 36, 31, 0.22), 0 2px 8px -2px rgba(38, 36, 31, 0.08); --atmenet-gyors: 120ms; --atmenet-alap: 180ms; --atmenet-ivelt: cubic-bezier(0.2, 0.8, 0.4, 1); --reteg-lebego: 30; /* menü, felugró */ --reteg-ragado: 20; /* ragadós fejléc */ --reteg-alap: 1; --szelesseg-tartalom: 70rem; /* 1120px */ /* ------------------------------------------------------------------ */ /* 3. KOMPONENS-TOKENEK */ /* ------------------------------------------------------------------ */ --gomb-magassag: 2.5rem; /* 40px */ --gomb-magassag-kicsi: 2rem; /* 32px */ --gomb-magassag-nagy: 3rem; /* 48px */ --gomb-sugar: var(--sugar-alap); --mezo-magassag: 2.625rem; /* 42px */ --mezo-sugar: var(--sugar-alap); --idosav-magassag: 2.75rem; /* 44px */ --naptar-cella: 2.625rem; /* 42px */ --oldalsav-szelesseg: 16.5rem; /* 264px */ --tablazat-cella-fuggoleges: 0.75rem; --tablazat-cella-vizszintes: 0.75rem; } /* ============================================================================ SÖTÉT TÉMA — [data-tema="sotet"] Meleg, barnás sötét: a papír kialszik, a tinta világít. Az akció-kitöltés ugyanaz a mélyterrakotta (fehér felirata itt is 4,9:1). ============================================================================ */ [data-tema="sotet"] { color-scheme: dark; --szin-hatter: var(--foglalgo-ejalap); --szin-felulet: var(--foglalgo-ejfelulet); --szin-felulet-finom: var(--foglalgo-ejhomok-halvany); --szin-hover: var(--foglalgo-ejhomok-halvany); --szin-hover-eros: var(--foglalgo-ejhomok); --szin-szoveg: var(--foglalgo-ejpapir); --szin-szoveg-masodlagos: #CFC5B2; --szin-szoveg-halvany: var(--foglalgo-ejhalvany); --szin-vonal: var(--foglalgo-ejvonal); --szin-vonal-eros: var(--foglalgo-ejvonal-eros); --szin-vonal-sotet: #6A5F4C; --szin-marka: var(--foglalgo-terrakotta); --szin-akcio: var(--foglalgo-terrakotta-mely); --szin-akcio-hover: #D25638; --szin-akcio-szoveg: var(--foglalgo-feher); --szin-akcio-tint: #3A241D; --szin-akcio-szoveg-tinten: var(--foglalgo-ejterra-szoveg); --szin-siker: var(--foglalgo-ejsiker-szoveg); --szin-siker-tint: var(--foglalgo-ejsiker-tint); --szin-siker-szoveg: var(--foglalgo-ejsiker-szoveg); --szin-figyelem: var(--foglalgo-ejfigyelem-szoveg); --szin-figyelem-elenk: var(--foglalgo-mustar); --szin-figyelem-tint: var(--foglalgo-ejfigyelem-tint); --szin-hiba: var(--foglalgo-ejhiba-szoveg); --szin-hiba-tint: var(--foglalgo-ejhiba-tint); --szin-inverz-hatter: var(--foglalgo-ejpapir); --szin-inverz-szoveg: var(--foglalgo-tinta); --szin-fokusz: var(--foglalgo-terrakotta); --szin-fokusz-tint: #3A241D; --arnyek-finom: 0 1px 2px rgba(0, 0, 0, 0.3); --arnyek-lebego: 0 12px 32px -12px rgba(0, 0, 0, 0.55), 0 2px 8px -2px rgba(0, 0, 0, 0.35); } /* ============================================================================ SZÍNPÁROK — [data-paletta="erdo" | "mez" | "tinta"] Az „Eredeti" (terrakotta + papírkrém) az alap, attribútum nélkül, és érintetlen marad. A többi pár a TELJES színvilágot cseréli: háttér, felületek, vonalak, tinta-árnyalatok és akcent együtt mozdulnak. Ami közös marad: az állapotszínek (siker/figyelem/hiba) és minden nem-szín token. Minden szöveg/háttér páros AA-ellenőrzött; a témával szabadon kombinálható. ============================================================================ */ /* -------- Erdő: halvány zsályapapír + mélyzöld akcent -------- */ [data-paletta="erdo"] { --szin-hatter: #F0F4EC; --szin-felulet: #FAFCF6; --szin-felulet-finom: #E7EEDD; --szin-hover: #E7EEDD; --szin-hover-eros: #DBE5CE; --szin-szoveg: #20261F; --szin-szoveg-masodlagos: #414B3C; --szin-szoveg-halvany: #5F6B56; --szin-vonal: #DDE5D1; --szin-vonal-eros: #C2D0B2; --szin-vonal-sotet: #93A67F; --szin-marka: #1E5D4E; --szin-akcio: var(--foglalgo-erdo); --szin-akcio-hover: #0F332A; --szin-akcio-szoveg: var(--foglalgo-feher); --szin-akcio-tint: var(--foglalgo-erdo-tint); --szin-akcio-szoveg-tinten: var(--foglalgo-erdo); --szin-akcio-korvonal: transparent; --szin-inverz-hatter: var(--foglalgo-erdo); --szin-inverz-szoveg: #F3F8EE; --szin-fokusz: #1E5D4E; --szin-fokusz-tint: var(--foglalgo-erdo-tint); } [data-tema="sotet"][data-paletta="erdo"] { --szin-hatter: #141A15; --szin-felulet: #1B221C; --szin-felulet-finom: #232C24; --szin-hover: #232C24; --szin-hover-eros: #2C372D; --szin-szoveg: #ECF2E4; --szin-szoveg-masodlagos: #C6D1BC; --szin-szoveg-halvany: #9AA88E; --szin-vonal: #303B2F; --szin-vonal-eros: #41503F; --szin-vonal-sotet: #5E7059; --szin-marka: #4FA083; --szin-akcio: #2E7A63; --szin-akcio-hover: #256852; --szin-akcio-szoveg: var(--foglalgo-feher); --szin-akcio-tint: var(--foglalgo-ejsiker-tint); --szin-akcio-szoveg-tinten: var(--foglalgo-ejsiker-szoveg); --szin-akcio-korvonal: transparent; --szin-inverz-hatter: #ECF2E4; --szin-inverz-szoveg: var(--foglalgo-erdo); --szin-fokusz: #4FA083; --szin-fokusz-tint: var(--foglalgo-ejsiker-tint); } /* -------- Méz: mézes krémpapír + mustár akcent, tinta gombfelirattal -------- A mustár kitöltés a mézpapíron önmagában 1,97:1 — ezért itt a gomb arany kontúrt kap (--szin-akcio-korvonal, 3,45:1), az fedi a 3:1-es határvonal-követelményt. */ [data-paletta="mez"] { --szin-hatter: #FBF1DC; --szin-felulet: #FFFAED; --szin-felulet-finom: #F4E7C8; --szin-hover: #F4E7C8; --szin-hover-eros: #ECDCB2; --szin-szoveg: #282218; --szin-szoveg-masodlagos: #4E4635; --szin-szoveg-halvany: #6E6450; --szin-vonal: #EDDFC0; --szin-vonal-eros: #D9C692; --szin-vonal-sotet: #AE9A62; --szin-marka: #A67A22; --szin-akcio: var(--foglalgo-mustar); --szin-akcio-hover: #D2932B; --szin-akcio-szoveg: var(--foglalgo-tinta); --szin-akcio-tint: #F2E3BC; --szin-akcio-szoveg-tinten: var(--foglalgo-mustar-mely); --szin-akcio-korvonal: #A67A22; --szin-inverz-hatter: var(--foglalgo-tinta); --szin-inverz-szoveg: #FBF1DC; --szin-fokusz: #A67A22; --szin-fokusz-tint: #F2E3BC; } [data-tema="sotet"][data-paletta="mez"] { --szin-hatter: #1D1811; --szin-felulet: #251F14; --szin-felulet-finom: #2F2718; --szin-hover: #2F2718; --szin-hover-eros: #3A3020; --szin-szoveg: #F4ECD8; --szin-szoveg-masodlagos: #D3C8AB; --szin-szoveg-halvany: #A99C7C; --szin-vonal: #3D341F; --szin-vonal-eros: #4F452C; --szin-vonal-sotet: #6F6340; --szin-marka: var(--foglalgo-mustar); --szin-akcio: var(--foglalgo-mustar); --szin-akcio-hover: #E9B356; --szin-akcio-szoveg: var(--foglalgo-tinta); --szin-akcio-tint: var(--foglalgo-ejfigyelem-tint); --szin-akcio-szoveg-tinten: var(--foglalgo-ejfigyelem-szoveg); --szin-akcio-korvonal: transparent; --szin-inverz-hatter: #F4ECD8; --szin-inverz-szoveg: var(--foglalgo-tinta); --szin-fokusz: var(--foglalgo-mustar); --szin-fokusz-tint: var(--foglalgo-ejfigyelem-tint); } /* -------- Tinta: hűvös törtfehér papír + monokróm tinta (cal.com-hangulat); sötét módban a gomb papírszínűre fordul -------- */ [data-paletta="tinta"] { --szin-hatter: #F7F5F0; --szin-felulet: #FFFFFF; --szin-felulet-finom: #EDEBE3; --szin-hover: #EDEBE3; --szin-hover-eros: #E2DFD4; --szin-szoveg: #1D1B17; --szin-szoveg-masodlagos: #43413A; --szin-szoveg-halvany: #625F55; --szin-vonal: #E4E1D8; --szin-vonal-eros: #CBC7BB; --szin-vonal-sotet: #A29D90; --szin-marka: var(--foglalgo-tinta); --szin-akcio: var(--foglalgo-tinta); --szin-akcio-hover: #3B382F; --szin-akcio-szoveg: #FFFFFF; --szin-akcio-tint: #E2DFD4; --szin-akcio-szoveg-tinten: var(--foglalgo-tinta); --szin-akcio-korvonal: transparent; --szin-inverz-hatter: var(--foglalgo-tinta); --szin-inverz-szoveg: #FFFFFF; --szin-fokusz: var(--foglalgo-tinta); --szin-fokusz-tint: #E2DFD4; } [data-tema="sotet"][data-paletta="tinta"] { --szin-hatter: #161513; --szin-felulet: #1E1D1A; --szin-felulet-finom: #262521; --szin-hover: #262521; --szin-hover-eros: #302E29; --szin-szoveg: #F1EFE9; --szin-szoveg-masodlagos: #C9C6BE; --szin-szoveg-halvany: #9E9A90; --szin-vonal: #343330; --szin-vonal-eros: #454340; --szin-vonal-sotet: #64615B; --szin-marka: #F1EFE9; --szin-akcio: #F1EFE9; --szin-akcio-hover: #FFFFFF; --szin-akcio-szoveg: var(--foglalgo-tinta); --szin-akcio-tint: #302E29; --szin-akcio-szoveg-tinten: #F1EFE9; --szin-akcio-korvonal: transparent; --szin-inverz-hatter: #F1EFE9; --szin-inverz-szoveg: var(--foglalgo-tinta); --szin-fokusz: #F1EFE9; --szin-fokusz-tint: #343330; } /* Csökkentett mozgás: minden átmenet kialszik. */ @media (prefers-reduced-motion: reduce) { :root { --atmenet-gyors: 0ms; --atmenet-alap: 0ms; } }