/* ========================================================================= Orang3 — alaprétegek: tokenek, reset, tipográfia, felületek ── A HÁZ SZABÁLYAI ──────────────────────────────────────────────────── Ez a nyolc szabály az egész játékra érvényes (mind az 5 feladatra). 1. SEMMI NEM CIKLIZIK. A nyugalmi képernyőn nulla mozgás van. Egyetlen kivétel: a pecsét két hívogató lüktetése, ami utána örökre megáll. 2. A kilépés a belépés ~0,62-szerese, és SOHA nem lépcsőzött. 3. Eseményenként legfeljebb egy túllendülés (--ease-pop: pontosan 2 helyen). 4. Minden ceremónia megszakítható: pointerdown/keydown -> finishAll(). 5. Csak `opacity`, `transform` és `stroke-dashoffset` animálódik. Nincs `filter`, `backdrop-filter`, animált `box-shadow`. A `will-change` induláskor kerül fel és a végén LE. 6. EGYETLEN ANIMÁCIÓ SEM HORDOZZA A MEGJELENÉST. Minden animáció egy olyan osztályba való átmenet, ami már önmagában leírja a végállapotot. (Ettől működik a menet közbeni újratöltés és a csökkentett mozgás.) 7. A ZÖLD TINTA, NEM FÉNY: szövegszín vagy 1px-es vonal. Soha nem felület, soha nem ragyogás, soha nem árnyék, soha nem háttérkitöltés. 8. NINCS PIROS. NINCS HANG. NINCS RÉSZECSKE. NINCS NEON. ─────────────────────────────────────────────────────────────────────── A színek és a geometria a látványtervek pixelre kimért adatai (1920×1080 vászon, ahol 1rem = 16px). Lásd: CLAUDE.md 4. szakasz. ========================================================================= */ /* A betűkészletet az index.html tölti be közvetlen -kel – az @import egy plusz kérés-láncot csinálna, és `file://` alól törékenyebb. */ :root { /* --- Skála ------------------------------------------------------------ Mindhárom clamp()-argumentum HOSSZ. A `min(vw, vh)` a lényeg: a puszta szélesség-alapú skálázás az, amitől egy alacsony iskolai laptopon (1366×620 a böngészősávok után) kilóg a tartalom. 0.83333vw = 16/1920 · 1.48148vh = 16/1080 */ font-size: clamp(11px, min(0.83333vw, 1.48148vh), 18px); /* --- Színek ---------------------------------------------------------- */ --bg: #131313; /* (mért) sík. Se színátmenet, se vignetta, se zaj. */ --surface-from: #141414; /* (mért) felület-átmenet, bal fent */ --surface-to: #212121; /* (mért) felület-átmenet, jobb lent */ --surface-angle: 172deg; /* (mért) átlós, nem felülről világít */ --ink: #ffffff; /* betűk, bitek, chip-szám, aktív vonás */ --ink-2: rgba(255,255,255,.62); /* boríték vonala, ábécé bitjei, feliratok */ --ink-3: rgba(255,255,255,.38); /* halk segédszöveg */ /* A látványterven mind a hét vonás tiszta fehér. Az aktuális betűhelyet viszont látnia kell a gyereknek, ezért a még üres vonások egy hajszállal halkabbak – épp annyira, hogy a kép ugyanaz maradjon. */ --dash-idle: rgba(255,255,255,.58); --ink-4: rgba(255,255,255,.16); /* letiltott, elhaló segédszöveg */ --line-top: rgba(255,255,255,.26); /* (mért) 1px hajszálkeret, felül */ --line-mid: rgba(255,255,255,.13); /* (mért) 1px hajszálkeret, 46%-nál */ --line-bot: rgba(255,255,255,.20); /* (mért) 1px hajszálkeret, alul */ /* A csillag aranya. SZÁNDÉKOSAN sárgább a pecsét narancsánál: a kettő két külön dolgot jelent, és egy chipnyi felületen is el kell válniuk. */ --gold: #E8C04B; --orange: #dc7118; /* (mért) a logó domináns színe. CSAK a pecséthez. */ /* --- A boríték papírja ------------------------------------------------ Bőrszín, meleg levélpapír. A pecsét narancsa marad az objektum egyetlen élénk színe; a papír csak hordozó, ezért tompább nála. */ --paper: #E6CDA8; /* a boríték teste */ --paper-flap: #CDAD82; /* a lehajtott fül: egy árnyalattal mélyebb, ettől válik el a V vonala és ül ki a pecsét */ --paper-line: #F4E5CE; /* a papír kontúrja, a papírnál világosabb */ --paper-shade: rgba(24, 18, 10, .30); /* a pecsétbe vésett gyűrű */ /* Az előrajz: a teljes boríték halványan, az első betű előtt is. */ --paper-ghost-fill: .09; --paper-ghost-line: .20; /* A megerősítés zöldje. 10,3:1 kontraszt #131313-on, ~152° árnyalat, így a narancstól (28°) messze esik és deuteranópiában sem olvad össze vele. */ --ok: #7FD1A6; --ok-line: rgba(127,209,166,.34); --ok-soft: rgba(127,209,166,.12); /* NINCS --error, NINCS --warn, NINCS piros sehol a termékben. */ /* --- Sugarak --------------------------------------------------------- */ --r-chip: 1.5rem; /* 24px (mért) */ --r-card: 1.75rem; /* 28px (mért) */ --r-pill: 4rem; /* 64px (mért) – az „Indulás" gomb */ --r-sheet: 1.375rem; /* 22px – segédgomb, ábécé-panel */ /* --- Tipográfia (Instrument Serif, csak 400) -------------------------- A méretek a látványtervekből visszafejtve (szélesség + festékmagasság). */ --fs-brand: 3.125rem; /* 50px „Orang3" a főoldalon */ --fs-tagline: 1.3125rem; /* 21px „Art of code" */ --fs-start: 4.75rem; /* 76px „Indulás" */ --fs-chip: 3.125rem; /* 50px a chip számjegye */ --fs-octet: 2.875rem; /* 46px az aktuális 8 bites csoport */ --fs-letter: 2.5rem; /* 40px a megfejtett betű a vonáson */ --fs-pill: 1.25rem; /* 20px „Bináris ábécé", feliratok */ --fs-abc-pin: 3rem; /* 48px az ábécében kitűzött kód */ --fs-abc-letter: 1.625rem; /* 26px betű az ábécé-táblában */ --fs-abc-bits: 1.375rem; /* 22px a hozzá tartozó 8 bit */ --fs-hint: 1.0625rem; /* 17px halk súgósor */ --bit-advance: .62em; /* minden 0 és 1 fix szélessége */ --nib-gap: .5em; /* rés a két négyes bitcsoport között */ /* --- Geometria (mért) ------------------------------------------------- */ --card-w: 54.875rem; /* 878px */ --card-h: 9.9375rem; /* 159px */ --dash-w: 2.375rem; /* 38px */ --dash-h: .25rem; /* 4px */ --dash-pitch: 3.78125rem; /* 60,5px */ --chip-size: 6.25rem; /* 100px */ --chip-top: 4.8125rem; /* 77px */ --chip-right: 7.1875rem; /* 115px */ --env-w: 20rem; /* 320px */ --env-h: 13.75rem; /* 220px */ --env-stroke: 1.75px; /* valódi képpont, sosem skálázódik */ /* --- Mozgás ----------------------------------------------------------- */ --ease-out: cubic-bezier(.22, 1, .36, 1); /* érkezés */ --ease-in: cubic-bezier(.55, 0, 1, .45); /* távozás */ --ease-in-out: cubic-bezier(.65, 0, .35, 1); /* szín, FLIP */ --ease-draw: cubic-bezier(.33, .9, .36, 1); /* stroke-dashoffset */ --ease-pop: cubic-bezier(.34, 1.4, .5, 1); /* PONTOSAN 2 helyen */ --t-tick: 90ms; --t-fast: 160ms; --t-exit: 260ms; --t-enter: 420ms; --t-draw: 520ms; /* egy borítékdarab megrajzolása */ --t-flip: 460ms; /* a márkajel átúszása a fejlécbe */ --t-float: 620ms; /* a boríték útja a képernyő közepére */ --t-cool: 700ms; /* --ok -> --ink-2 kihűlés */ --t-hold: 700ms; /* a csend a boríték elúszása előtt. NE menjen 450ms alá: ez a bevezető érzelmi csúcspontja – ekkor olvassa el a gyerek zölden a saját megfejtését. */ } /* Kontraszt-tartalék. Nem dísz: .13 fehérnél egy kifakult iskolai TN-panelen a keret egyszerűen eltűnik, és a kártya üres fekete téglalapnak látszik. Kapcsoló: ?kontraszt=1 – SOSEM billentyűvel, mert minden betű egy tipp. */ @media (prefers-contrast: more) { :root { --line-top:rgba(255,255,255,.40); --line-mid:rgba(255,255,255,.26); --line-bot:rgba(255,255,255,.32); --ink-3:rgba(255,255,255,.55); --env-stroke:2.25px; --paper-ghost-fill:.16; --paper-ghost-line:.34; } } :root[data-contrast="high"] { --line-top:rgba(255,255,255,.40); --line-mid:rgba(255,255,255,.26); --line-bot:rgba(255,255,255,.32); --ink-3:rgba(255,255,255,.55); --env-stroke:2.25px; --paper-ghost-fill:.16; --paper-ghost-line:.34; } /* --- Reset ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Instrument Serif', 'Iowan Old Style', 'Times New Roman', Times, serif; font-weight: 400; line-height: 1.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow: hidden; /* a játék mindig egyetlen képernyő */ overscroll-behavior: none; -webkit-tap-highlight-color: transparent; user-select: none; } img { display: block; max-width: 100%; height: auto; /* különben a width/height attribútum fix magasságot ad */ -webkit-user-drag: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; touch-action: manipulation; } ol, ul { list-style: none; margin: 0; padding: 0; } p, h1, h2, h3 { margin: 0; font-weight: 400; } :focus-visible { outline: 2px solid rgba(255, 255, 255, 0.55); outline-offset: 4px; border-radius: 6px; } /* --- Felület ----------------------------------------------------------- * Egységes nyelvezet: átlós, alig látható színátmenet + 1px-es színátmenetes hajszálkeret (felül világosabb). Ezt kapja a gomb, a kártya és a chip is. A keret valódi képpontban van, nem rem-ben – rem-ben egy 1366-os laptopon 0,69px-re esne és eltűnne. A kitöltés külön rétegen (::after) van, hogy a keret és a kitöltés egymástól függetlenül tudjon beúszni („előbb a körvonal, aztán az anyag"). */ .surface { position: relative; border-radius: var(--r-card); isolation: isolate; } .surface::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(var(--surface-angle), var(--surface-from) 0%, var(--surface-to) 100%); pointer-events: none; } .surface::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient( 180deg, var(--line-top) 0%, var(--line-mid) 46%, var(--line-bot) 100% ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1; } /* --- Bit ---------------------------------------------------------------- * Az Instrument Serif „0" és „1" jele MÁS szélességű (0,46em vs 0,249em), és a webfontban nincs megbízható tabular-nums. Fix inline-block szélesség nélkül a 01010000 és a 01001111 más széles lenne, és a csoport betűnként ugrálna. Ezt NE font-variant-numeric-kel próbáljuk megoldani. */ .bit { display: inline-block; width: var(--bit-advance); text-align: center; } .nib-gap { display: inline-block; width: var(--nib-gap); } /* --- Közös keyframe-ek -------------------------------------------------- * Több képernyő is használja őket, ezért itt laknak és nem az egyik képernyő stíluslapjában. */ @keyframes appear { from { opacity: 0; } to { opacity: 1; } } @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* --- Segédosztályok ---------------------------------------------------- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } [hidden] { display: none !important; } /* --- Csökkentett mozgás – globális háló --------------------------------- * A 6. szabály miatt ez biztonságos: minden animáció olyan osztályba visz, ami már leírja a végállapotot, így a nullázott időtartam a végállapotot adja, nem törött felületet. A WAAPI-t ez NEM éri el – azt a js/core/motion.js kezeli. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; } } /* Csökkentett mozgásnál a rossz tipp visszajelzése nem tűnhet el: a kísértet-betű animáció nélkül is látszik, a JS pedig hosszabban hagyja kint. */ @media (prefers-reduced-motion: reduce) { .slot__ghost { animation: none !important; opacity: .55 !important; } } :root[data-motion='off'] .slot__ghost { animation: none !important; opacity: .55 !important; } /* Ugyanez kézzel is kapcsolható: ?mozgas=0 */ :root[data-motion='off'] *, :root[data-motion='off'] *::before, :root[data-motion='off'] *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }