/* ========================================================================= Almanach — design tokenek ------------------------------------------------------------------------- Ez a fájl az EGYETLEN forrás a színekre, betűkre, térközre és a papír-textúrára. Ha egy érték itt változik, mindenhol változik. Leírás: docs/DESIGN_SYSTEM.md Minták: design/system/ (9 arculati lap, .dc.html) Eredet: design/*.pdf — az értékek a PDF rajzoló-utasításaiból és a kirenderelt képek pixelmintáiból származnak, nem becslésből. Két réteg van, és ez szándékos: 1) PALETTA — a nyers színek, márkanévvel (--paper, --sienna, …). A design-lapok ezekre hivatkoznak. 2) SZEREPEK — mire való (--surface, --accent, …). Alkalmazáskódban ezt használjuk, mert így a paletta cserélhető anélkül, hogy minden komponenst át kellene írni. ========================================================================= */ :root{ /* --- 1. réteg: paletta ------------------------------------------------- A hat megnevezett szín a forrásdokumentumból, hat származtatottal. */ --paper: #F3EEE3; /* alapfelület — minden oldal ezen indul */ --paper-hi: #FBF8F1; /* kiemelt felület — kártya, panel, mező */ --vellum: #E7DECA; /* kitöltött folt — buborék, kód, inaktív */ --vellum-lo: #EFE8DA; /* váltakozó sáv nagy szekciók ritmusához */ --ink: #211D17; /* elsődleges szöveg és felület */ --ink-2: #4A4238; /* másodlagos szöveg, hosszabb bekezdés */ --ink-3: #7A6E5C; /* halk metaadat, monospace mikrocímke */ --ink-3-aa: #6A6152; /* az Ink 3 sötétebb változata, ha AA kell */ --line: #D6CDBB; /* 1 px hajszálvonal — ez tagol, nem az árnyék */ --sienna: #A85A2A; /* az EGYETLEN akcentus */ --slate: #3D5A6C; /* támogató — technikai információ, adatviz */ --olive: #6E7A4F; /* támogató — jóváhagyott, élesítve */ /* --- 2. réteg: szemantikus szerepek ----------------------------------- */ --surface: var(--paper); --surface-raised: var(--paper-hi); --surface-fill: var(--vellum); --surface-alt: var(--vellum-lo); --surface-inverse: var(--ink); --text-primary: var(--ink); --text-secondary: var(--ink-2); --text-muted: var(--ink-3); --text-on-inverse: var(--paper-hi); --text-on-accent: var(--paper-hi); --border-hairline: var(--line); --border-strong: var(--ink); --accent: var(--sienna); --info: var(--slate); --approved: var(--olive); --focus-ring: var(--sienna); /* --- Betűtípusok ------------------------------------------------------- Kettő van, harmadik nincs. Antikva a mondanivalónak, monospace mindannak, amit a gép mond: címke, kód, státusz, metaadat. Google Fonts: Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600 JetBrains+Mono:wght@400;500 */ --font-serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* --- Típusskála (asztali; a hero és a H2 folyadékként is állhat) ------- */ --text-display: 76px; --lh-display: 1.09; --ls-display: -.022em; --text-h1: 62px; --lh-h1: 1.10; --ls-h1: -.020em; --text-h2: 36px; --lh-h2: 1.16; --ls-h2: -.015em; --text-h3: 24px; --lh-h3: 1.32; --text-lead: 20px; --lh-lead: 1.55; --text-body: 17px; --lh-body: 1.65; --text-small: 15px; --lh-small: 1.60; --text-label: 12px; --lh-label: 1.50; --ls-label: .16em; --text-micro: 11px; --lh-micro: 1.50; --ls-micro: .20em; --text-code: 14px; /* --- Térköz — 4 px alap ----------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* --- Geometria --------------------------------------------------------- A nulla sarok a rendszer legerősebb ismertetőjele. Nincs kivétel. */ --radius: 0; --hairline: 1px; --rule-strong: 2px; --border-button: 1.5px; --shadow: none; --content-max: 1200px; --grid-columns: 12; --grid-gutter: 32px; --page-margin: 40px; --page-margin-s: 24px; --control-height: 48px; --touch-min: 44px; --measure: 66ch; --focus-width: 2px; --focus-offset: 3px; /* --- Papír-textúra ----------------------------------------------------- Két beágyazott SVG feTurbulence réteg: 160 px szemcse (rost) és 900 px foltosodás (ív), varrat nélkül ismétlődő csempékkel. Három dolog, ami nélkül nem működik: · feFuncA slope=0 intercept=1 — különben az alfa is zajos lesz; · color-interpolation-filters='sRGB' — különben linearRGB-ben számol és világosít (243 -> 251); · soft-light 0.5 körül CENTRÁLT zajjal (intercept = 0.5 - slope/2), különben a felület átlagszíne elmozdul. A soft-light hatása b*(1-b)-vel skálázódik, ezért felületenként külön erősség kell. Mért eredmények (átlag / szórás): papír #F3EEE3 soft-light 0.90 -> #F3EEE3 / 1.9 kártya #FBF8F1 soft-light 1.80 -> #FBF8F1 / 0.9 (fizikai plafon) sienna #A85A2A soft-light 0.30 -> #A85A2A / 2.2 tinta #211D17 overlay 0.60 -> #211D17 / 3.6 */ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.9' intercept='0.05'/%3E%3CfeFuncG type='linear' slope='0.9' intercept='0.05'/%3E%3CfeFuncB type='linear' slope='0.9' intercept='0.05'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); --mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.4' intercept='0.3'/%3E%3CfeFuncG type='linear' slope='0.4' intercept='0.3'/%3E%3CfeFuncB type='linear' slope='0.4' intercept='0.3'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23n)'/%3E%3C/svg%3E"); --grain-hi:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.8' intercept='-0.4'/%3E%3CfeFuncG type='linear' slope='1.8' intercept='-0.4'/%3E%3CfeFuncB type='linear' slope='1.8' intercept='-0.4'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); --grain-mid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.3' intercept='0.35'/%3E%3CfeFuncG type='linear' slope='0.3' intercept='0.35'/%3E%3CfeFuncB type='linear' slope='0.3' intercept='0.35'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); --grain-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.6' intercept='0.2'/%3E%3CfeFuncG type='linear' slope='0.6' intercept='0.2'/%3E%3CfeFuncB type='linear' slope='0.6' intercept='0.2'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); --grain-layers: var(--grain), var(--mottle); --grain-size: 160px 160px, 900px 900px; --grain-blend: soft-light, soft-light; } /* A textúra segédosztályai. A specificitás szándékosan duplázott: azonos specificitásnál a később jövő komponens-szabály némán felülírná a background-image-et, és a beállítás egyszerűen nem csinálna semmit. Melyik hova: .grain papír és vellum felületek (#F3EEE3, #E7DECA, #EFE8DA) .grain-hi közel fehér kártya és panel (#FBF8F1) .grain-mid középtónusú színes mező (#A85A2A) .grain-dark tintafelület (#211D17) Textúrát NEM kap: a palettaminta (a pontos hexet kell mutatnia) és a 20-30 px-es apró elem (chip, kód, gomb) — ott csak piszkos lenne. Használat: a háttérszínt mindig background-color-ral add meg, ne a background rövidítéssel, mert az törölné a background-image-et. */ .grain.grain{ background-image: var(--grain-layers); background-size: var(--grain-size); background-blend-mode: var(--grain-blend); } .grain-hi.grain-hi{ background-image: var(--grain-hi), var(--mottle); background-size: var(--grain-size); background-blend-mode: var(--grain-blend); } .grain-mid.grain-mid{ background-image: var(--grain-mid), var(--mottle); background-size: var(--grain-size); background-blend-mode: var(--grain-blend); } .grain-dark.grain-dark{ background-image: var(--grain-dark), var(--mottle); background-size: var(--grain-size); background-blend-mode: overlay, overlay; } /* ========================================================================= 2. FELÜLETMÓD — PRODUCT (app) ------------------------------------------------------------------------- Egy rendszer, két felületmód. A fenti :root a MARKETING mód: papír, nulla sarok, textúra — a weboldal és a nyomtatás nyelve. A termékfelület (ai_chat: belépés, chat, admin) ezen a szerep-készleten ül, de más geometriával és két új felülettel: · lekerekítés VAN — 12 px kártya, 999 px pill vezérlő. Ok: sűrű, görgetett listákban a szögletes kártya rácsot rajzol, nem sort; a pill mező 48 px-en érintőcélként is olvasható. · hűvös SLATE felület a gépi adatnak — táblázat, kód, token, napló. A meleg papír a szövegé, a slate az adaté; a kettő nem keveredik. Bekapcsolás: vagy data-almanach-mode="product" A marketing módhoz semmit nem kell tenni. ========================================================================= */ .app, [data-almanach-mode='product']{ /* --- app paletta: meleg (olvasás) ------------------------------------ */ --app-shell: #F1E9D9; /* alkalmazás-héj: oldalsáv, fejlécsáv */ --app-page: #F5EFE2; /* olvasólap: a beszélgetés fut ezen */ --app-raised: #FDFBF7; /* kártya, mező, panel */ --app-fill: #F7F3EA; /* halk folt: inaktív mező, buborék */ --app-line: #DBD1BD; /* 1 px hajszálvonal app felületen */ --app-line-soft: #E4DBC9; /* belső osztóvonal, listaelem között */ --app-line-firm: #B9AE97; /* jelölőelem kerete: checkbox, radio */ /* --- app paletta: hűvös (gépi adat) --------------------------------- */ --data-page: #F7F9FA; /* adatfelület alap */ --data-fill: #EEF1F3; /* táblázat-fejléc, kódblokk */ --data-line: #DCE2E6; /* adatfelület hajszálvonala */ --data-line-firm: #E3E8EB; --data-ink: #3D5A6C; /* slate szöveg adatfelületen */ --data-inverse: #26313A; /* sötét slate: terminál, napló */ /* --- akcentus: szövegbiztos változatok ------------------------------- */ --sienna-text: #8F4A20; /* 5.4:1 papíron — LINK és kis szöveg ehhez */ --sienna-hover: #BC6730; /* hover és fókusz-ív */ --sienna-wash: #F6EDE6; /* hibafolt, kijelölt sáv háttere */ --sienna-wash-ln: #DEBBA2; --sienna-deep: #7A3E1B; /* hibafolton a szöveg */ /* --- állapotszín: LEJÁRT / SIKERTELEN ------------------------------- A rendszer egyetlen akcentusa a sienna, és ez így is marad: a bordó nem akcentus, hanem állapot. Kis felületen él — badge, pötty, összegsor — és SOHA nem CTA, nem fejléc, nem nagy folt: a fizetésre hívó gomb továbbra is sienna, különben két szín versenyezne a figyelemért ugyanazon a lapon. Mért kontraszt kártyán (#FDFBF7): 8.1 : 1 — kis szövegre is AA. */ --bordeaux: #8A2F31; --bordeaux-deep: #6E2426; --bordeaux-wash: #F7EAEA; --bordeaux-line: #E0BEBE; /* --- szerepek újrakötése -------------------------------------------- */ --surface: var(--app-page); --surface-raised: var(--app-raised); --surface-fill: var(--app-fill); --surface-alt: var(--app-shell); --border-hairline: var(--app-line); --link: var(--sienna-text); /* --- geometria: itt VAN sarok ---------------------------------------- */ --radius-xs: 3px; /* kijelölt sor élcsíkja */ --radius-sm: 10px; /* chip, kis gomb, kódblokk */ --radius: 12px; /* kártya, mező-blokk, callout */ --radius-md: 14px; /* panel, táblázat-burkoló */ --radius-lg: 18px; /* nagy kártya, modális */ --radius-pill: 999px; /* vezérlő: gomb, beviteli mező, kapcsoló */ --border-button: 1px; /* a pill gombon 1.5 px optikailag túl sok */ --control-height: 48px; --control-height-sm: 34px; /* --- olvasási sáv ---------------------------------------------------- */ --read-measure: 748px; /* a beszélgetés szövegoszlopa */ /* ⭐ 2026-09-07 — 312px -> 375px. Asztali nezetben a lista indokolatlanul keskeny volt (a beszelgetes-cimekbol keveset mutatott), mikozben boven van hely. A 375px egyben a tipikus mobil-keperno szelessege is, tehat a ket nezet ugyanazt a sormertek-elmenyt adja. ⚠️ 1023px alatt a `.shell` 268px-re allitja — a token a PC-s ertek. ⭐ A DESIGN-SYSTEM-ben IS atirva (almanachsystems/almanach-design-system): a ket ertek bitre egyezik. */ --sidebar-w: 375px; --topbar-h: 60px; } /* Az app mód textúrát csak a héjon visel. Az olvasólapon és a kártyán nem: 14 px-es sorközű, sűrű UI-szövegben a szemcse zajként olvasódik. */ .app .grain-hi.grain-hi, [data-almanach-mode='product'] .grain-hi.grain-hi{ background-image: none; }