/* Kiemelve az arculat_rendszer.html-ből. NE szerkeszd közvetlenül: ha egy érték változik, a HTML-ben változik, és onnan kerül ide vissza. Egyetlen igazságforrás — a kézikönyv és a weboldal is ezt tölti be. Kiemelve: 2026-09-02 (gomb = fénypászma, a labor 13-as változata) */ /* --- betűk. Az útvonal az arculat.css-hez képest relatív. --- */ @font-face{font-family:"tenor-sans";src:url("betuk/tenor-sans-latin-1.woff2") format("woff2");font-weight:100 900;font-display:swap} @font-face{font-family:"tenor-sans";src:url("betuk/tenor-sans-latin-ext-0.woff2") format("woff2");font-weight:100 900;font-display:swap} @font-face{font-family:"synonym";src:url("betuk/synonym.woff2") format("woff2");font-weight:100 900;font-display:swap} @font-face{font-family:"ibm-plex-mono";src:url("betuk/ibm-plex-mono-latin-1.woff2") format("woff2");font-weight:100 900;font-display:swap} @font-face{font-family:"ibm-plex-mono";src:url("betuk/ibm-plex-mono-latin-ext-0.woff2") format("woff2");font-weight:100 900;font-display:swap} /* ========================================================================= FL MARKETING STUDIO — arculati tokenek Kiemelve az arculat_rendszer.html-ből. NE szerkeszd közvetlenül: ha egy érték változik, a HTML-ben változik, és onnan kerül ide vissza. Egyetlen igazságforrás — a kézikönyv és a weboldal is ezt tölti be. Minden szín a moodboardról MÉRVE: moodboard/GENERALT_moodboard-delutani-asztal-v2.jpg · 2026-09-02 A mérés és az indoklás: ARCULAT_BONTAS.md ========================================================================= */ :root{ /* --- felület --------------------------------------------------------- A márka SÖTÉT alapú: a táblán a képpontok 88,8%-a #0A0A0A alatt van. A --papir a KIVÉTEL, nem az alap — egyetlen világos szakasz. */ --tinta: #0A0A0A; --tinta-emelt: #141210; --papir: #F2EEE8; --papir-emelt: #E7E1D8; --vilagos: #16130F; /* váltakozó sáv tintán */ /* --- keret ----------------------------------------------------------- KÉT külön token, és ez nem finomkodás: --keret díszítő vonal. 1,18:1 — a tábláról mérve --keret-ero VEZÉRLŐ kontúr. 3,01:1 — űrlapmező, fókusz, jelölt üres hely A kettő felcserélése akadálymentességi hiba, nem ízléskérdés. */ --keret: #1F1D1E; --keret-sotet: #1F1D1E; --keret-ero: #635C54; /* --- szöveg tintán --------------------------------------------------- */ --sotet-szoveg: #E4DED8; /* 14,84:1 */ --sotet-masod: #A8A29A; /* 7,82:1 */ --sotet-halvany:#7E7D7C; /* 4,82:1 — csak nagy szövegre */ /* --- szöveg papíron -------------------------------------------------- */ --szoveg: #14120F; /* 16,18:1 */ --szoveg-masod: #57524B; /* 6,70:1 */ /* --- az EGYETLEN akcentus, két felületre kalibrálva ------------------- Nem két szín. A #B07456 a tábla „megmarad" szaván mért érték; papíron 3,32:1, ami kis szövegre kevés — ezért van sötétebb párja. */ --sotet-akcent: #B07456; /* tintán 5,17:1 */ --akcent: #8A5433; /* papíron 5,35:1 */ /* --- a megvilágított él ---------------------------------------------- A jel L szárának fogása: bal él 247, kitöltés 73→54. Ugyanez a fény van a gombokon és a kiemelt felületeken. */ --el-feny: #6E6862; --akcent-feny: #D9A184; --arnyek: #000000; /* --- betű — SZEREP szerint nevezve, nem márkanév szerint -------------- Arculatváltásnál egy sort írsz át, nem négyszáz helyen keresel. */ --betu-cim: 'tenor-sans', Georgia, serif; --betu-szoveg: 'synonym', -apple-system, BlinkMacSystemFont, sans-serif; --betu-mono: 'ibm-plex-mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* --- tipográfiai skála ----------------------------------------------- */ --m-display: clamp(56px, 9.5vw, 168px); --m-h1: clamp(40px, 5.6vw, 88px); --m-h2: clamp(28px, 3.4vw, 46px); --m-h3: clamp(21px, 2.0vw, 28px); --m-nagy: 20px; --m-szoveg: 17px; --m-kicsi: 15px; --m-cimke: 12px; --sor-display:.90; --sor-cim:1.06; --sor-szoveg:1.65; --koz-display:-.025em; --koz-cimke:.18em; /* --- térköz — 16 px alap, a receptszerződés ebből származtat ---------- */ --t1: 4px; --t2: 8px; --t3: 12px; --t4: 16px; --t5: 24px; --t6: 32px; --t7: 48px; --t8: 64px; --szakasz: clamp(72px, 9vw, 144px); --sav: 1200px; /* --- mozgás ---------------------------------------------------------- EGY görbe mindenre, három időértékkel. Szimmetrikus: a lap nem felúsztat, hanem CSERÉL. */ --gorbe: cubic-bezier(.83, 0, .17, 1); --moz-felulet: .24s; --moz-paszma: .72s; /* a gomb fényszalagja — rátét, nem visszajelzés */ --moz-belepo: .6s; --moz-lassu: 1.2s; } @media (prefers-reduced-motion: reduce){ :root{ --moz-felulet:.01ms; --moz-belepo:.01ms; --moz-lassu:.01ms; } } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--tinta);color:var(--sotet-szoveg); font-family:var(--betu-szoveg);font-size:var(--m-szoveg);line-height:var(--sor-szoveg); -webkit-font-smoothing:antialiased} img,svg{max-width:100%;height:auto;display:block} a{color:inherit} :focus-visible{outline:2px solid var(--sotet-akcent);outline-offset:3px} /* --- tipográfia --- */ .display{font-family:var(--betu-cim);font-weight:300;font-size:var(--m-display); line-height:var(--sor-display);letter-spacing:var(--koz-display);margin:0} .h1{font-family:var(--betu-cim);font-weight:300;font-size:var(--m-h1);line-height:.98;letter-spacing:-.02em;margin:0} .h2{font-family:var(--betu-cim);font-weight:300;font-size:var(--m-h2);line-height:var(--sor-cim);letter-spacing:-.012em;margin:0} .h3{font-family:var(--betu-cim);font-weight:300;font-size:var(--m-h3);line-height:1.2;margin:0} .nagy{font-size:var(--m-nagy);line-height:1.55} .kicsi{font-size:var(--m-kicsi)} .cimke{font-family:var(--betu-mono);font-size:var(--m-cimke);letter-spacing:var(--koz-cimke); text-transform:uppercase;color:var(--sotet-masod)} .masod{color:var(--sotet-masod)} .akc{color:var(--sotet-akcent)} .kezirat{font-family:var(--betu-cim);font-style:italic;font-size:var(--m-h3);color:var(--sotet-masod)} /* --- felületek --- */ .papir{background:var(--papir);color:var(--szoveg)} .papir .masod,.papir .cimke{color:var(--szoveg-masod)} .papir .akc{color:var(--akcent)} .emelt{background:var(--tinta-emelt)} .papir.emelt{background:var(--papir-emelt)} /* --- gomb: a jel fényéből levezetve --- Megvilágított bal él, kemény (elmosás nélküli) árnyék jobbra-lefelé. A MOZDULAT — választva 2026-09-02, a gomblabor 13-as változata. Ferde fényszalag fut át a lapon: ugyanaz a súrlófény, ami a moodboardon végigmegy az asztalon, és ami a jel bal élét megvilágítja. Három réteg, és a rétegzés SZÁNDÉKOS: 1. NYUGTÁZÁS, 180 ms — a keret rézre vált, a bal él fénye felerősödik. Ez az azonnali válasz. Enélkül a 720 ms-os pászma késésnek érződne. 2. PÁSZMA, 720 ms — a fényszalag egyszer átfut. Ez a karakter. Tudatosan lépi túl a 300 ms-os felületi mozgás szabályát: a visszajelzés nem ettől függ, ez rátét. A szabály attól áll, hogy a gomb 180 ms-on belül válaszol. 3. LENYOMÁS, 180 ms — a lap beül az árnyékába. Ez a megerősítés. FIGYELEM — a felirat KÖTELEZŐEN burokban van. A pászma pozicionált pszeudoelem; a festési sorrendben a pozicionált leszármazott a sor szöveg UTÁN jön, tehát burok nélkül a fény a feliratra futna rá. Negatív z-index NEM megoldás: a :active transformja verem- kontextust nyit, és a negatív gyerek a saját háttér fölé kerülne. Ezt már egyszer megfizettük. Lásd ARCULAT_RENDSZER.md 5. fejezet. FIGYELEM: az árnyékot box-shadow viszi, nem pszeudoelem — ugyanezért. FIGYELEM: color:inherit KÖTELEZŐ — enélkül az a böngésző kék linkszínét veszi fel, és a currentColor keret is kék lesz. */ .gomb{position:relative;display:inline-flex;align-items:center;gap:var(--t3); font-family:var(--betu-mono);font-size:var(--m-cimke);letter-spacing:.16em;text-transform:uppercase; padding:var(--t4) 28px;color:inherit;background:var(--tinta); border:1px solid var(--keret-ero);text-decoration:none;cursor:pointer;overflow:hidden; box-shadow:inset 1px 0 0 var(--el-feny), 5px 5px 0 0 var(--arnyek); transition:transform var(--moz-felulet) var(--gorbe), box-shadow var(--moz-felulet) var(--gorbe), border-color var(--moz-felulet) var(--gorbe)} /* a felirat és minden elemgyerek a fény FÖLÖTT */ .gomb-cim,.gomb>*{position:relative;z-index:2} /* A PÁSZMA. Két dolog, ami elsőre rossz volt, és mérve derült ki: 1. EASING. Erős ease-out (.16,1,.3,1) volt rajta. Mérve: 144 ms alatt megtette az út 67%-át — a fény ÁTVILLANT, és a maradék 580 ms már a képen kívül telt. Fénypászmán az ease-outnak nincs értelme: nincs indulás és nincs megérkezés, amit tompítani kellene, mert a szalag a lapon KÍVÜL indul és kívül áll meg. Ezért LINEÁRIS. 2. ÚTHOSSZ. Fix 340 px volt, ami csak ehhez a gombszélességhez jó. Most a szalag szélessége 100% (= a gomb szélessége), és a translateX százaléka a SAJÁT szélességére vonatkozik — így minden gombon ugyanaz a mozdulat, felirathossztól függetlenül. -130% → +130%: az út 77%-ában a szalag a gombon van. */ .gomb::after{content:"";position:absolute;top:-60%;bottom:-60%;left:0;width:100%;z-index:1; background:linear-gradient(96deg,transparent 30%, color-mix(in srgb, var(--akcent-feny) 20%, transparent) 42%, color-mix(in srgb, var(--akcent-feny) 45%, transparent) 50%, color-mix(in srgb, var(--akcent-feny) 20%, transparent) 58%,transparent 70%); transform:translateX(-130%) skewX(-22deg); transition:transform var(--moz-paszma) linear} .gomb:is(:hover,:focus-visible){border-color:var(--sotet-akcent); box-shadow:inset 2px 0 0 var(--akcent-feny), 5px 5px 0 0 var(--arnyek)} .gomb:is(:hover,:focus-visible)::after{transform:translateX(130%) skewX(-22deg)} .gomb:active{transform:translate(4px,4px); box-shadow:inset 2px 0 0 var(--akcent-feny), 1px 1px 0 0 var(--sotet-akcent)} .gomb:focus-visible{outline:2px solid var(--sotet-akcent);outline-offset:3px} /* elsődleges: maga a réz. A pászma itt fehéres fény, mert rézen a réz nem látszik. */ .gomb--elso{background:var(--sotet-akcent);border-color:var(--sotet-akcent);color:#14120F; box-shadow:inset 1px 0 0 var(--akcent-feny), 5px 5px 0 0 var(--arnyek)} .gomb--elso::after{background:linear-gradient(96deg,transparent 30%, rgba(255,247,240,.20) 42%,rgba(255,247,240,.58) 50%, rgba(255,247,240,.20) 58%,transparent 70%)} .gomb--elso:is(:hover,:focus-visible){border-color:#D9A184; box-shadow:inset 2px 0 0 #F2D8C8, 5px 5px 0 0 var(--arnyek)} .gomb--elso:active{box-shadow:inset 2px 0 0 #F2D8C8, 1px 1px 0 0 var(--tinta)} .gomb--szoveges{border-color:transparent;background:none;box-shadow:none;padding-inline:0; border-bottom:1px solid var(--keret-ero);overflow:visible} .gomb--szoveges::after{display:none} .gomb--szoveges:is(:hover,:focus-visible){transform:none;box-shadow:none; border-color:transparent;border-bottom-color:var(--sotet-akcent);color:var(--sotet-akcent)} .gomb--szoveges:active{transform:none;box-shadow:none} .gomb[aria-disabled="true"]{color:var(--sotet-halvany);border-color:var(--keret); background:var(--tinta-emelt);box-shadow:none;cursor:not-allowed;pointer-events:none} .gomb[aria-disabled="true"]::after{display:none} /* PAPÍRON A PÁSZMA ÁRNYÉK, NEM FÉNY — és ezt a kontraszt kényszeríti ki, nem ízlés. Mérve (2026-09-02), a sáv csúcsán, a felirat és a helyi háttér között: felület fehér sáv sötét sáv papír elsődleges 0,20-on 3,45:1 ✗ 0,30-on 6,99:1 ✓ papír kontúros 0,50-en 17,3:1 0,30-on 12,1:1 ✓ (de fehéren a fehér sáv láthatatlan) A papír elsődlegesen a felirat VILÁGOS rézen. Bármilyen fehér sáv világosít a háttéren, tehát ROMLIK alatta az olvashatóság — 0,07 fölött már bukik. Sötét sávval fordítva: minél erősebb, annál olvashatóbb. Ugyanaz a fizikai esemény, ellenkező előjellel: a súrlófény a világos lapon nem világosít, hanem árnyékot húz maga előtt. */ .papir .gomb{background:var(--papir);border-color:#8F877C;color:var(--szoveg); box-shadow:inset 1px 0 0 #FFF, 5px 5px 0 0 #C9C2B7} .papir .gomb::after{background:linear-gradient(96deg,transparent 30%, rgba(90,79,68,.14) 42%,rgba(90,79,68,.30) 50%, rgba(90,79,68,.14) 58%,transparent 70%)} .papir .gomb:is(:hover,:focus-visible){border-color:var(--akcent); box-shadow:inset 2px 0 0 #FFF, 5px 5px 0 0 #C9C2B7} .papir .gomb:active{box-shadow:inset 2px 0 0 #FFF, 1px 1px 0 0 var(--akcent)} .papir .gomb--elso{background:var(--akcent);border-color:var(--akcent);color:var(--papir); box-shadow:inset 1px 0 0 rgba(255,255,255,.35), 5px 5px 0 0 #C9C2B7} .papir .gomb--elso::after{background:linear-gradient(96deg,transparent 30%, rgba(58,33,19,.16) 42%,rgba(58,33,19,.34) 50%, rgba(58,33,19,.16) 58%,transparent 70%)} .papir .gomb--elso:is(:hover,:focus-visible){border-color:#6E3F24; box-shadow:inset 2px 0 0 rgba(255,255,255,.6), 5px 5px 0 0 #C9C2B7} .papir .gomb--elso:active{box-shadow:inset 2px 0 0 rgba(255,255,255,.6), 1px 1px 0 0 #5C3520} .papir .gomb--szoveges{background:none;border-color:transparent;border-bottom:1px solid #8F877C;box-shadow:none} .papir .gomb[aria-disabled="true"]{background:var(--papir-emelt);border-color:#CFC8BD;color:#9A938A} .porgo{width:10px;height:10px;border:1.5px solid currentColor;border-right-color:transparent; border-radius:50%;animation:porog .7s linear infinite} @keyframes porog{to{transform:rotate(360deg)}} /* --- űrlap --- */ .mezo{display:block;width:100%;background:none;border:0; border-bottom:1px solid var(--keret-ero);color:inherit;font:inherit; padding:var(--t3) 0;transition:border-color var(--moz-felulet) var(--gorbe)} .mezo::placeholder{color:var(--sotet-halvany)} .mezo:focus{outline:none;border-bottom-color:var(--sotet-akcent)} .mezo[aria-invalid="true"]{border-bottom-color:#C4614A} .hiba{color:#D98771;font-size:var(--m-kicsi);margin-top:var(--t2)} .papir .mezo{border-bottom-color:#8F877C} .papir .mezo:focus{border-bottom-color:var(--akcent)} /* --- kiemelt sáv --- */ .kiemelt{border-left:2px solid var(--sotet-akcent);padding:var(--t2) 0 var(--t2) var(--t5)} .papir .kiemelt{border-left-color:var(--akcent)} /* --- kártya --- */ .kartya{border:1px solid var(--keret);background:var(--tinta-emelt);padding:var(--t6)} .papir .kartya{border-color:#DDD6CB;background:var(--papir-emelt)} /* --- jelölt üres hely --- */ .ureshely{border:1px dashed var(--keret-ero);padding:var(--t7) var(--t5);text-align:center; color:var(--sotet-masod);font-family:var(--betu-mono);font-size:var(--m-cimke); letter-spacing:var(--koz-cimke);text-transform:uppercase} /* --- feltárulás: maszkolt, IntersectionObserver-ből --- */ .feltarul{clip-path:inset(0 0 100% 0);transition:clip-path var(--moz-belepo) var(--gorbe)} .feltarul.lathato{clip-path:inset(0 0 0 0)} @media (prefers-reduced-motion: reduce){ .feltarul{clip-path:none !important} /* a gomb nem mozdul, de a visszajelzés megmarad: a fény és a vonal marad, csak az elmozdulás és az átmenet esik ki. */ .gomb,.gomb:hover,.gomb:active{transform:none !important} .gomb,.gomb::after{transition:none !important} /* a pászma elmarad; a keret- és élváltás megmarad, mert az a visszajelzés */ .gomb::after{display:none} }