/* A 03-DESIGN/aiupgrade/tokens.css VÁLTOZTATÁS NÉLKÜLI másolata, csak a Google Fonts @import nélkül (2026-10-09): az /index2 a betűket helyből tölti (betuk/betuk.css), hogy a nyitóoldal semmilyen külső szolgáltatóhoz ne szóljon ki. Ha a forrás változik, ezt újra kell generálni: sed '/@import/d' 03-DESIGN/aiupgrade/tokens.css */
/* ═══════════════════════════════════════════════════════════════════════════
AI UPGRADE · ARCULATI TOKENEK (CSS)
Verzió: 1.1.0 · 2026-09-27 15:45 (új: --aiu-alcim-szurke, a „Multi AI System” alcím) (a kép-szabályok a tokens.json "kep" blokkjában)
Igazságforrás: 03-DESIGN/AIUPGRADE_ARCULAT.md (a kézikönyv) + ez a fájl (a gépi forma).
Gépi párja: 03-DESIGN/aiupgrade/tokens.json (ugyanezek az értékek, JSON-ban).
Honnan mértem (nem becslés):
· élő oldalak, headless Playwright (Chromium 1440 + WebKit iPhone 393), 2026-09-27 13:10:
https://aiupgrade.hu/workshop · https://aiupgrade.hu/upgradeelite
· forrásuk: ~/Documents/GitHub/algent/public/aiu/{workshop,upgradeelite}/index.html
· mérőszkript: 03-DESIGN/aiupgrade/bin/meres-elo-oldal.mjs (újrafuttatható)
Használat:
· weben és PDF-ben (Chrome): vagy beillesztve.
A Google Fonts betöltése itt van az elején, a fájl önmagában is elég.
· e-mailben NEM a változókat használjuk (a levelezők nem értik), hanem a tokens.json
"email" blokkjának kész px-értékeit, inline stílusban.
· Minden név "--aiu-" előtagú, így ALGENT-oldallal sem ütközik.
TILOS AI Upgrade-felületen: ALGENT-narancs #F59E0B, vaj #FEF9E7,
Orbitron / Playfair Display / Oxanium / Outfit.
═══════════════════════════════════════════════════════════════════════════ */
:root {
/* ── 1. ALAPSZÍNEK (a paletta, ennyi van) ─────────────────────────────── */
--aiu-tinta: #0A0A0A; /* szöveg világos alapon · sötét szakasz · a jel csempéje · gomb */
--aiu-ej: #07080A; /* a legmélyebb sötét: nyitókép, lábléc, zárás */
--aiu-narancs: #FF5A00; /* a jel négyzete · fő gomb · kiemelés · szegély · nagy dőlt szó */
--aiu-sarga: #FFDB01; /* CSAK sötét alapon: dőlt serif kiemelés, nagy szám; sárga szakasz háttere */
--aiu-lap: #ECE6E8; /* világos alap (hűvös, rózsás szürke; NEM az ALGENT vaj) */
--aiu-feher: #FFFFFF; /* fehér szakasz · kártya világos alapon · szöveg sötéten */
--aiu-alcim-szurke: #635B60; /* a „Multi AI System” alcím a név alatt (Figtree 500, a név kb. harmada); éjen 3.0:1, lapon 5.3:1 */
/* ── 2. KIEGÉSZÍTŐ ÁRNYALATOK (mért, a két élő oldalról) ─────────────── */
--aiu-narancs-hover: #FF6D1F; /* narancs gomb hover */
--aiu-lap-mely: #E3DCDF; /* idézet-doboz háttere lapon/fehéren (Elite) */
--aiu-mezo: #FAF8F9; /* űrlapmező háttere */
--aiu-foto-alap: #EDEDED; /* portré helye, amíg a kép tölt */
--aiu-panel-ej: #0B0B0C; /* garancia-sáv alapja a nyitóképen */
--aiu-hiba-hatter: #FFF1EA; /* hibaüzenet doboza */
--aiu-hiba-szoveg: #8A2A00; /* hibaüzenet szövege */
--aiu-develop-kozep: #FF7A1A; /* a narancs színátmenet közepe (Egyéni fejlesztés kártya) */
--aiu-develop-veg: #FFB000; /* a narancs színátmenet vége */
/* ── 3. ÁTTETSZŐ FOKOZATOK (csak a tinta és a fehér áttetszői) ───────── */
/* tinta világos alapon */
--aiu-tinta-86: rgba(10,10,10,.86); /* törzsszöveg sárga alapon */
--aiu-tinta-80: rgba(10,10,10,.80); /* törzsszöveg fehér kártyán */
--aiu-tinta-75: rgba(10,10,10,.75); /* másodlagos szöveg */
--aiu-tinta-60: rgba(10,10,10,.60); /* meta, címke (lapon 4.9:1, AA) */
--aiu-tinta-45: rgba(10,10,10,.45); /* apró, nem lényeges (lapon 3.0:1, csak 18 px felett) */
--aiu-tinta-30: rgba(10,10,10,.30); /* keret-vonal pirulán */
--aiu-tinta-13: rgba(10,10,10,.13); /* elválasztó vonal, kártya-keret */
/* fehér sötét alapon */
--aiu-feher-85: rgba(255,255,255,.85);
--aiu-feher-72: rgba(255,255,255,.72); /* törzsszöveg sötéten (tintán 10.2:1) */
--aiu-feher-50: rgba(255,255,255,.50); /* meta sötéten (tintán 5.3:1) */
--aiu-feher-22: rgba(255,255,255,.22); /* szaggatott keret */
--aiu-feher-16: rgba(255,255,255,.16); /* üveg-jel kerete */
--aiu-feher-14: rgba(255,255,255,.14); /* üveg-gomb kerete */
--aiu-feher-12: rgba(255,255,255,.12); /* elválasztó vonal sötéten */
--aiu-feher-08: rgba(255,255,255,.08); /* üveg-jel csempéje */
--aiu-feher-06: rgba(255,255,255,.06); /* üveg-gomb háttere */
--aiu-feher-03: rgba(255,255,255,.03); /* kártya sötéten */
/* narancs és sárga fények */
--aiu-narancs-55: rgba(255,90,0,.55); /* marker-kiemelés sötéten, kártya-árnyék */
--aiu-narancs-30: rgba(255,90,0,.30); /* marker-kiemelés világoson, sarokfény */
--aiu-narancs-12: rgba(255,90,0,.12); /* üveg-gomb hover */
--aiu-narancs-08: rgba(255,90,0,.08); /* kijelölt választó */
--aiu-sarga-50: rgba(255,219,1,.50); /* szaggatott határidő-keret */
--aiu-sarga-08: rgba(255,219,1,.08); /* garancia-sáv fátyla */
/* ── 4. FELÜLETEK (szerep szerint; ezt használd, ne a nyers színt) ───── */
/* világos: lap */
--aiu-vilagos-hatter: var(--aiu-lap);
--aiu-vilagos-szoveg: var(--aiu-tinta);
--aiu-vilagos-halk: var(--aiu-tinta-60);
--aiu-vilagos-vonal: var(--aiu-tinta-13);
--aiu-vilagos-kartya: var(--aiu-feher);
/* sötét: tinta vagy éj */
--aiu-sotet-hatter: var(--aiu-tinta);
--aiu-sotet-szoveg: var(--aiu-feher);
--aiu-sotet-torzs: var(--aiu-feher-72);
--aiu-sotet-halk: var(--aiu-feher-50);
--aiu-sotet-vonal: var(--aiu-feher-12);
--aiu-sotet-kartya: var(--aiu-feher-03);
/* sárga szakasz */
--aiu-sarga-hatter: var(--aiu-sarga);
--aiu-sarga-szoveg: var(--aiu-tinta);
--aiu-sarga-torzs: var(--aiu-tinta-86);
/* ── 5. BETŰK ─────────────────────────────────────────────────────────── */
--aiu-betu-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; /* cím + szöveg */
--aiu-betu-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; /* MINDIG dőlt, 400 */
--aiu-betu-mono: 'Space Mono', ui-monospace, Menlo, 'Courier New', monospace; /* felirat, szám, meta */
/* súlyok (Figtree) */
--aiu-suly-normal: 400;
--aiu-suly-kozepes: 500;
--aiu-suly-felkover: 600;
--aiu-suly-cim: 700;
--aiu-suly-hero: 800;
/* ── 6. MÉRET-LÉPCSŐ (web, folyékony; mért clamp-értékek) ────────────── */
--aiu-meret-hero: clamp(40px, 7.6vw, 104px); /* nyitókép-cím, mondat */
--aiu-meret-hero-szo: clamp(64px, 13vw, 188px); /* nyitókép-cím, 1-2 szó (Elite) */
--aiu-meret-h2: clamp(36px, 5.4vw, 74px); /* szakasz-cím */
--aiu-meret-h2-nagy: clamp(46px, 7.4vw, 112px); /* kiemelt szakasz-cím, zárás */
--aiu-meret-h3: clamp(26px, 3vw, 38px); /* alcím, kártya-cím */
--aiu-meret-h3-kartya: clamp(30px, 3.4vw, 44px); /* nagy kártya neve, mentor neve */
--aiu-meret-punch: clamp(34px, 4.6vw, 60px); /* dőlt serif ütés-mondat */
--aiu-meret-oriasi: clamp(76px, 12vw, 168px); /* egyszavas dőlt finálé ("Belevágunk?") */
--aiu-meret-lead: clamp(21px, 2.4vw, 28px); /* vezető bekezdés */
--aiu-meret-claim: clamp(19px, 2.1vw, 24px); /* nyitókép alatti mondat */
--aiu-meret-szam: clamp(46px, 5.4vw, 70px); /* ár, nagy szám */
--aiu-meret-szam-xl: clamp(64px, 10vw, 132px); /* "100%" garancia */
--aiu-meret-torzs: 18px; /* mobilon 17px (lásd lent) */
--aiu-meret-kartya: 17px; /* kártyán belüli szöveg */
--aiu-meret-kicsi: 15px; /* kártya-leírás, meta-mondat */
--aiu-meret-apro: 13px; /* jogi sor */
--aiu-meret-mono: 12px; /* gomb- és meta-felirat */
--aiu-meret-mono-kicsi: 11px; /* kártyán belüli mono-címke */
/* sorköz */
--aiu-sorkoz-hero: .98;
--aiu-sorkoz-cim: 1.03;
--aiu-sorkoz-h3: 1.1;
--aiu-sorkoz-lead: 1.45;
--aiu-sorkoz-torzs: 1.68;
--aiu-sorkoz-kartya: 1.55;
/* betűköz */
--aiu-betukoz-hero: -.035em;
--aiu-betukoz-cim: -.03em;
--aiu-betukoz-h3: -.025em;
--aiu-betukoz-szam: -.04em;
--aiu-betukoz-wordmark: -.025em; /* kis méretben ez -0.4 px (17 px-en); nagy wordmarkon -.04em */
--aiu-betukoz-mono: .16em; /* tartomány .12–.2em; gombon .14em */
/* ── 7. TÉRKÖZ ÉS RÁCS ───────────────────────────────────────────────── */
--aiu-max: 1120px; /* tartalom-szélesség */
--aiu-szuk: 780px; /* olvasó-szélesség (hosszú szöveg) */
--aiu-margo: 28px; /* oldal-margó asztalon; 560 px alatt 16px */
--aiu-margo-mobil: 16px;
--aiu-szakasz: clamp(84px, 11vw, 146px); /* szakasz felső-alsó belső tere */
--aiu-ter-1: 8px;
--aiu-ter-2: 14px; /* szoros kártyarács */
--aiu-ter-3: 18px; /* kártyarács */
--aiu-ter-4: 22px; /* nagy kártyák rácsa */
--aiu-ter-5: 26px;
--aiu-ter-6: 34px; /* cím alatt */
--aiu-ter-7: clamp(40px, 5vw, 60px); /* blokkok között */
--aiu-kartya-belso: clamp(28px, 3.6vw, 46px);
--aiu-panel-belso: clamp(30px, 4.4vw, 56px);
/* ── 8. LEKEREKÍTÉS ──────────────────────────────────────────────────── */
--aiu-sugar-mezo: 12px; /* űrlapmező */
--aiu-sugar-gomb: 14px; /* gomb, csempe-gomb */
--aiu-sugar-gomb-nagy: 16px; /* teljes szélességű küldés-gomb */
--aiu-sugar-kartya: 20px; /* kártya (mobilon a panel is ennyi) */
--aiu-sugar-kartya-k: 22px; /* közepes kártya */
--aiu-sugar-panel: 26px; /* nagy panel, ár-kártya, mentor */
--aiu-sugar-pill: 999px; /* címke-pirula, fejléc-gomb */
/* ── 9. ÁRNYÉK ÉS FÉNY ───────────────────────────────────────────────── */
--aiu-arnyek-gomb: 0 18px 40px -18px rgba(255,90,0,.8); /* narancs gomb alatt */
--aiu-arnyek-narancs: 0 30px 80px -30px rgba(255,90,0,.55); /* kiemelt kártya sötéten */
--aiu-arnyek-urlap: 0 40px 90px -40px rgba(255,90,0,.55); /* űrlap sötét szakaszon */
--aiu-arnyek-kartya: 0 40px 90px -40px rgba(10,10,10,.45); /* nagy kártya világoson */
--aiu-arnyek-hover: 0 26px 50px -30px rgba(10,10,10,.45); /* kártya-emelés */
--aiu-feny-jel: 0 0 14px rgba(255,90,0,.7); /* kis jel négyzete */
--aiu-feny-jel-nagy: 0 0 40px rgba(255,90,0,.8); /* nagy jel (lábléc) */
--aiu-feny-sarga-szoveg: 0 0 50px rgba(255,219,1,.18); /* sárga cím text-shadow */
/* ── 10. HÁTTÉR-TEXTÚRÁK ─────────────────────────────────────────────── */
--aiu-hero-feny:
radial-gradient(40% 45% at 80% 38%, rgba(255,90,0,.32), transparent 70%),
radial-gradient(30% 35% at 15% 88%, rgba(255,219,1,.10), transparent 70%);
--aiu-racs-vonal: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
--aiu-racs-meret: 64px 64px;
--aiu-racs-maszk: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 100%);
--aiu-sarokfeny: radial-gradient(60% 50% at 100% 0%, rgba(255,90,0,.30), transparent 70%);
--aiu-halado-sav: linear-gradient(90deg, #FF5A00, #FFDB01);
--aiu-develop-atmenet: linear-gradient(135deg, #FF5A00 0%, #FF7A1A 55%, #FFB000 120%);
--aiu-marker-vilagos: linear-gradient(transparent 62%, rgba(255,90,0,.30) 62%);
--aiu-marker-sotet: linear-gradient(transparent 62%, rgba(255,90,0,.55) 62%);
/* ── 11. MOZGÁS ──────────────────────────────────────────────────────── */
--aiu-ease: cubic-bezier(.2,.8,.2,1);
--aiu-ido-hover: .3s;
--aiu-ido-megjelen: .9s; /* görgetésre előúszás */
--aiu-ido-marker: 1.1s; /* kiemelő-csík kihúzása */
--aiu-ido-rajz: 2.4s; /* nyitókép-vonal megrajzolása */
--aiu-ido-pulzus: 3.4s; /* lábléc-jel lüktetése */
--aiu-lepcso: .08s; /* egymás utáni elemek késleltetése */
--aiu-emelkedes: 28px; /* ennyiről úszik be az elem */
/* ── 12. A JEL ARÁNYAI (a méret %-ában) ──────────────────────────────── */
--aiu-jel-csempe-sugar: 26%; /* csempe lekerekítése */
--aiu-jel-negyzet: 44%; /* a narancs négyzet oldala */
--aiu-jel-negyzet-sugar: 32%; /* a négyzet lekerekítése (a négyzet %-ában) */
}
/* mobil-lépcső: 560 px alatt kisebb törzs és margó (a két élő oldal szerint) */
@media (max-width: 560px) {
:root {
--aiu-meret-torzs: 17px;
--aiu-margo: 16px;
--aiu-sugar-panel: 20px;
}
}
/* ═══ OPCIONÁLIS SEGÉD-OSZTÁLYOK (csak ha kellenek; a tokenekre épülnek) ═══ */
/* A jel CSS-ből: */
.aiu-jel { --m: 34px; width: var(--m); height: var(--m); border-radius: calc(var(--m) * .26);
background: var(--aiu-tinta); display: inline-grid; place-items: center; flex: none; vertical-align: middle; }
.aiu-jel > i { width: calc(var(--m) * .44); height: calc(var(--m) * .44); border-radius: calc(var(--m) * .44 * .32);
background: var(--aiu-narancs); display: block; }
/* üveg-változat sötét alapra (a weboldal fejléce és lábléce) */
.aiu-jel.aiu-jel--uveg { background: var(--aiu-feher-08); border: 1px solid var(--aiu-feher-16); }
.aiu-jel.aiu-jel--uveg > i { box-shadow: var(--aiu-feny-jel); }
/* A wordmark: "AI Upgrade", felkiáltójel NÉLKÜL */
.aiu-wordmark { font-family: var(--aiu-betu-sans); font-weight: 700; letter-spacing: var(--aiu-betukoz-wordmark); white-space: nowrap; }
/* A név alatti alcím: "Multi AI System". A név ALATT, balra igazítva, a név méretének kb. harmada.
AI UpgradeMulti AI System
A betűméretet a nevblokk font-size-a adja (a név mérete), az alcím ennek .333-a. */
.aiu-nevblokk { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.aiu-nevblokk > .aiu-wordmark { line-height: 1; }
.aiu-alcim { font-family: var(--aiu-betu-sans); font-weight: 500; font-size: .333em; line-height: 1; letter-spacing: -.01em;
color: var(--aiu-alcim-szurke); white-space: nowrap; margin-top: .4em; padding-left: .13em; }
.aiu-serif { font-family: var(--aiu-betu-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.aiu-mono { font-family: var(--aiu-betu-mono); text-transform: uppercase; letter-spacing: var(--aiu-betukoz-mono); font-size: var(--aiu-meret-mono); }