numerologie-platform · sistem de design
Extinde limbajul „observatory” din numerologie-web cu un strat
ceremonial pe care aplicația nu îl are: colțuri ornamentale,
sigilii gravate, un fundal mai adânc și o serifă editorială.
Fiecare token moștenit își păstrează valoarea exactă — clientul care trece de la
„cumpăr o citire” la „îmi citesc citirea” nu trebuie să simtă nicio cusătură.
Trei niveluri, moștenite ca regulă din aplicație: aur = ceremonial și sacru; violet = etichete structurale; text = conținut și date. Textul curent nu primește niciodată aur.
Șase culori pentru un singur loc: fundalul benzii de produs. Nu sunt un
al patrulea nivel de gilt — nu ating niciodată textul, trăiesc doar în interiorul
.cosmos și se adaugă întotdeauna peste fond în screen.
Sunt măsurate din cele trei imagini trimise de client, nu alese din intuiție.
A șasea, albastrul, e cea care nu se vede și fără de care nu merge: o nebuloasă cu o
singură nuanță și luminozitatea dată mai tare rămâne o spălătură de violet.
Pătratele de mai jos sunt culorile măsurate; câmpurile din bandă sunt scrise cu
o treaptă-două peste ele, pentru că o culoare adunată în screen printr-o
mască ce acoperă o parte din suprafață cade înapoi exact pe token.
Trei fețe, trei roluri disjuncte. Publicul are 50–60+ ani, așa că fiecare treaptă
din scară e urcată cu un pas față de valorile standard — aceeași corecție pe care
numerologie-web o are deja și pe care platforma nu o are încă.
subsets: ['latin','latin-ext'] — altfel „ă â î ș ț” cad pe un font de rezervă.
Navigație, butoane, prețuri, formulare, tabele și text mărunt. Cifre tabulare pentru coloane numerice aliniate la dreapta.
Neschimbată față de aplicație.Elementul care face designul de nerecunoscut ca șablon. Fiecare citire își are figura ei, gravată în linie de aur — planșe dintr-un tratat astronomic, nu imagini de stoc. Sunt exact cele patru figuri desenate de client în schița lui. Treci cu mouse-ul peste o casetă: sigiliul se desenează singur.
pătratul 3×3
octogonul · XXII
steaua numelui
Destin & Voință
Implementare: fiecare traseu poartă pathLength="1", deci o singură regulă
de stroke-dashoffset animează orice contur indiferent de geometria reală —
fără JavaScript și fără măsurători per traseu.
Spălarea de aur intră dinspre stânga prin scaleX, nu prin estompare — un gest ceremonial, nu un hover generic.
Toate cele patru colțuri sunt desenate dintr-un singur pseudo-element, prin opt
fâșii de gradient de 1px. Fără marcaj suplimentar, fără imagini, iar lungimea
brațului e un singur token: --bracket.
Patru seri, online pe Zoom.
Se introduce o singură dată și circulă în toată harta.
Preț
490 lei
Pe pagina principală sigiliul este marca de lângă un nume. Pe pagina analizei devine subiectul: pagina se așază ca un produs — numele, promisiunea și prețul în stânga, figura în dreapta, pe toată înălțimea coloanei de text, într-un bezel gradat, desenată o singură dată la încărcare. Este singurul lucru de pe pagină pe care un concurent nu îl poate reproduce.
Bezelul: 60 de gradații fine la 6° și 8 grele pe vârfurile octogonului, dintr-un singur
repeating-conic-gradient mascat inelar. Fix, nu rotit — D18: un gradient conic
sub o mască n-are transport gratuit din partea compozitorului, așa că o rotație, oricât de
lentă, ținea un nucleu ocupat cât timp fila rămânea deschisă. Alături de text, figura se măsoară altfel: exact cât e de
înaltă coloana de text și niciodată mai lată decât propria coloană —
min(100cqh, 100cqw), dintr-o celulă declarată container-type: size.
Nu mai are plafon de vh: sub text, fiecare pixel al figurii împingea prețul
în jos; lângă text, figura nu poate depăși înălțimea textului, deci nu costă nimic.
Cele trei imagini trimise de client sunt de acord între ele mai mult decât par: fond aproape negru, filamente subțiri și luminoase, magenta lângă albastru, roșu doar pe margini, stele prin tot. Două reguli țin banda fundal și nu poster. Structură, nu tușe: culoarea de aici nu are nicio formă a ei — e o cădere moale, plată, iar toată forma vine dintr-o mască de zgomot fractal. Un gradient nu poate arăta cosmic, pentru că un nor e nor prin auto-similaritate (aceeași formă de margine la orice scară), iar un gradient are exact o scară. Figura este miezul: norul nu trece pe sub sigiliu, ci se deschide în jurul lui. Aurul nu e pus niciodată să țină contrast pe magenta.
mix-blend-mode: screen. Magenta la 40% alfa peste negru compune un maro-gri noroios; același magenta adunat la negru cade exact pe culoarea din fotografiile de referință — pentru că asta face lumina. O nebuloasă se adaugă întunericului, nu îl acoperă.De aceea banda are isolation: isolate: altfel grupul de amestec urcă până la rădăcină și adună ce se întâmplă să fie desenat dedesubt.--coremin(100cqh, 100cqw) — înălțimea coloanei de text — și nicio unitate de viewport nu exprimă asta, așa că --core e măsurat (247px la 1024, 285px la 1440) și oprit acolo unde .shell își atinge plafonul. Stivuit, expresia figurii redevine disponibilă și --core e literal jumătate din ea.feFuncA. O rampă (0 0 0 .55 1) păstrează doar vârful zgomotului — mase moi peste goluri negre reale. O bandă (0 0 .15 1 .5 0) păstrează o felie din mijloc, adică o linie de nivel a câmpului fractal, iar linia de nivel a unui câmp fractal este un filament ramificat. Masă pe frecvența joasă, filament pe cea înaltă.Neclaritatea vine înaintea întinderii de alfa. Invers iese praf de televizor, și nu se mai poate înmuia după: în CSS filter rulează înainte de mask, niciodată după.feTurbulence la 5.5% le dizolvă și, în plus, dă praful pe care îl are fiecare referință.--cos-gain (astăzi 0.67) se aplică pe grup, nu pe câmpuri. Compoziția — ce nuanță stă unde, cum se echilibrează caldul cu recele, unde se încrucișează filamentele — a fost reglată ca întreg; dacă stingi câmpurile unul câte unul, o desfaci. Pe grup, toate raporturile dinăuntru rămân neatinse și se mișcă doar volumul.Grupul se compune oricum peste propria lui copie de --cos-ground, deci se stinge exact spre fondul pe care banda îl pictează oricum — fără margine și fără schimbare de nuanță.opacity pe o mască mare nu e mai ieftin decât un transform pe ea..product-hero--cosmos), nu pe clasa de bază. Prăvălia are voie să fie teatru; frontispiciul analizei livrate rămâne instrument — și el folosește .product-hero. E la o clasă distanță dacă clientul vrea altfel..hero-split). Una peste alta, figura și prețul se certau pe același centimetru vertical — unul dintre ele pierdea mereu. Alături, figura crește cu ~a treia parte (509 → 569px la 1440) și prețul urcă la mijlocul primului ecran. Coloana figurii e cea lată: un cerc nu poate fi mai înalt decât e de lat.Titlul se măsoară în cqw, nu în vw: la 6.2vw cuvântul „Numerologie”, care nu se poate rupe, iese din jumătatea lui de rând. Sub 960px se așază pe verticală, figura prima..topbar--ghost, .crumbs--tight). Placa începe din marginea de sus a ferestrei. Câștig: ~55px de înălțime și, mai important, dispar cele două linii orizontale care tăiau pagina deasupra figurii.Pe pagina principală cromul rămâne cum era — acolo bara are rolul ei.grid-auto-rows: 1fr) ca liniile interioare estompate să cadă exact pe fronturi.Aici vor intra componentele reale de calcul, când le stabilim.<details> native — fără JavaScript, deschise la tastatură, tipărite corect.Materialul clientului pentru evenimente este deja un afiș: un singur cadru orizontal care ține titlul, figura, ce conține cursul, patru promisiuni, datele, cei doi oameni care îl țin, prețul și adresa de înscriere — totul odată, nimic după un clic. Forma e cea bună, și nu doar fiindcă așa desenează clientul. Faptele unui eveniment sunt puține, fixe și repetitive: când, unde, cât ține, cât costă, cu ce rămâi. O pagină care întinde cinci fapte pe trei ecrane pune cititorul să muncească pentru ceva ce încape într-o privire. Deci afișul nu e reclama paginii de eveniment — el este pagina de eveniment, iar lista e un perete de afișe. Aici nu există „vezi detalii”, fiindcă nu există detalii ținute deoparte.
Atelier Ultimele locuri
Rangul II: aceleași fapte, fără lista de conținut, cu figura retrogradată la marcă.
.poster--afis — evenimentul care urmează: cadru întreg, figura și lista de conținut. .poster--sheet — restul calendarului: aceleași fapte, fără listă, figura devine marcă în stânga, pe toată înălțimea. Același element, aceiași copii, același CSS: rangul e o clasă.Nu există al doilea șablon de ținut în sincron — partea care putrezește prima.container-type: inline-size plus cqi dau exact asta, deci proporțiile supraviețuiesc oricărei lățimi îi dă peretele.Capcană: container-type face elementul container pentru descendenți, niciodată pentru el însuși. Un cqi scris pe propria margine a afișului cade tăcut înapoi pe viewport, iar cadrul începe să urmărească fereastra în loc de hârtie.aspect-ratio: 7/5 e o țintă, nu o cușcă: afișul e element de grilă, deci minimul lui automat e înălțimea de conținut și, când tipografia atinge podeaua de lizibilitate pe o fereastră mică, cutia crește peste raport în loc să-și taie propriul conținut. Fiecare cqi e prins într-un clamp: podeaua din §3 bate compoziția. Un afiș care se micșorează până la corp de 12px a încetat să mai servească publicul acesta ca să rămână frumos.Lățimea e legată de înălțimea ferestrei (100svh), ca afișul dinaintea peretelui să încapă întreg deasupra pliului pe un laptop: la 1440×900 iese 946×678, cu prețul și butonul încă vizibile..product-hero--wall reia corona din §5, reglată altfel: nu există figură de care să o sudezi, așa că --core ajunge cam la jumătatea afișului, iar golul din centrul câmpurilor cade exact acolo unde hârtia îl acoperă. Rămâne doar corona din jurul afișului — adică exact ce se vede la un afiș pus pe perete. --cos-gain scade la 0.5, fiindcă banda nu mai e cel mai tare lucru din bandă.Douăsprezece titluri, deci nicio paginare — și, dacă nu există paginare, nu există niciun motiv să ascunzi o copertă în spatele unui rând de listă. Aici coperta este produsul: e singura pagină a sitului ale cărei imagini nu le-am desenat noi și merită văzute la dimensiune. Compoziția e un raft, nu o grilă de carduri, iar din decizia asta ies trei consecințe.
object-fit: contain. Cu înălțime explicită, o coloană îngustă ar fi întins coperta clientului în loc să o încadreze.
Posts.cover este opțional, deci o arhivă construită pe
coperte e o arhivă care se rupe în ziua în care un editor sare peste una. Iar coperta
după care ar întinde mâna un sit de numerologie e exact fotografia cosmică
interschimbabilă pe care o folosește fiecare referință din sample-imgs/.
Așa că registrul nu are nicio imagine: fiecare articol e ștampilat cu
numărul despre care vorbește, desenat de aceeași mână ca sigiliile.
Douăsprezece pe pagină, trei pe rând — arhiva se citește ca un perete de numere, adică
exact forma de pagină pe care numai practica asta o poate avea.
Rangul II: numărul, eticheta, titlul, două-trei rânduri și proveniența. Nimic altceva nu încape într-o decizie de patru secunde.
· Cristian Terran
✦Starea fără număr e desenată, nu tolerată: același loc, aceeași greutate optică, marca în locul cifrei. Un editor care nu completează niciodată câmpul primește tot o pagină coerentă.
· Cristian & Clarissa
Posts un câmp nou, number, și îl cere opțional: articolul fără număr primește marca, în același loc și la aceeași greutate optică.Starea fără număr nu e o rezervă, e o stare desenată. Un editor care nu completează niciodată câmpul trebuie să obțină tot o pagină întreagă..numen--struck — același component ca inelul din analiza livrată, doar bătut în loc de luminat: fond întunecat, a doua linie de un pixel pentru muchie, mărime fluidă. În analiză inelul e un rezultat și strălucește; aici e un indice, și douăsprezece rezultate strălucitoare pe o pagină ar țipa. Variantele stau lângă bază, nu lângă registru, ca să nu poată apărea niciodată un al doilea lucru care înseamnă „un număr într-un cerc de aur”.::after, fiindcă .plate deține ::before, iar rangul I e și intrare, și placă. Două reguli pe același pseudo-element merg perfect până în ziua în care componentul e compus.grid-template-rows: subgrid — eticheta, titlul, rezumatul și proveniența se dimensionează pe tot rândul, iar oricare dintre ele poate trece pe două rânduri fără să miște pe celelalte.Unde subgrid lipsește, intrarea cade pe rândurile ei automate: neregulată, niciodată stricată.hasMany, deci uneori două) și cât durează — ambele se citesc înainte de a intra în articol. Linia de jos ține data și autorul: proveniență. Timpul de citit se calculează din body, nu se stochează, altfel devine greșit la prima corectură.Prima variantă avea data sus, lângă categorie: se rupea pe două rânduri la jumătate dintre intrări, și un rând rupt sus coboară titlul sub vecinii lui.hasMany, sumele categoriilor nu trebuie să dea totalul: un articol cu două etichete se numără de două ori. Asta e corect, nu e o eroare de afișaj.
ContactSubmissions primește patru câmpuri publice — nume, e-mail, subiect,
mesaj — și macheta nu adaugă niciunul. O pagină de contact la scara
practicii ăsteia nu are o problemă de colectare, are una de
credibilitate: un formular singur pe pagină nu se deosebește de o cutie
de sugestii, iar singurul lucru pe care îl vinde afacerea e că îți citește harta
un om. Deci pagina scrie cine deschide căsuța și în cât timp răspunde, iar asta
stă lângă formular, nu în subsol.
Cristian Terran Calculele, comenzile și evenimentele.
Clarissa Damian Partea karmică și programarea ședințelor.
▲ Adresa de e-mail nu pare completă.
subject e text, opțional, maxim 200 — deci lista scurtă de opțiuni nu e o schimbare de schemă: eticheta aleasă se scrie în aceeași coloană. Câștigul e la celălalt capăt: inboxul (defaultColumns: name, email, subject, status) devine sortabil pe cele cinci lucruri despre care scriu oamenii. „Altceva” descoperă textul liber pe care coloana îl permitea oricum..pick, scos din comutatorul de rol al analizei livrate și promovat între primitive. Două componente care înseamnă amândouă „alege una dintre astea” se depărtează întotdeauna; .role a rămas doar cu rama întreruptă care marchează un control de machetă.afterChange trimite o notificare doar către practicieni; expeditorul nu primește nimic. Deci confirmarea scrie exact asta — „următorul mesaj de la noi e chiar răspunsul” — în loc să lase tăcerea de două zile să se citească a formular stricat.Recomandarea către produs e opusul: un e-mail automat de confirmare. Până când există, pagina nu are voie să-l promită.SiteSettings, deci pagina nu le știe pe de rost.website, invizibilă, cu răspuns 200 tăcut ca robotul să nu învețe) și un plafon de 20KB pe corp. O captcha ar taxa fiecare vizitator ca să oprească o mână de roboți, pe un formular cu câteva mesaje pe săptămână.subgrid, ca registrul jurnalului.Pagina asta e și singura care nu se termină cu banda de abonare: e a treia oară când sitului i-ar cere cineva adresa de e-mail, iar aici omul tocmai a scris-o.Tot ce e mai sus vinde. Aici începe lucrul vândut: pagina pe care clientul o deschide în cont. Două reguli o despart de paginile de vânzare. Întâi, documentul se citește, nu se scanează — de aceea are cuprins permanent și planșe numerotate, aparatul unei lucrări tipărite, nu al unei pagini de prezentare. Apoi, aritmetica se arată întotdeauna: un număr fără derivarea lui e o afirmație, unul cu derivare e o dovadă pe care clientul o poate reface pe hârtie. Asta e toată diferența dintre acest produs și un horoscop.
8+9+6=23→5zi · lună · an
Inelul, scara și litera — cele trei piese noi. Operatorii sunt gramatică, nu valoare: sans,
mai mici, violet, ca ochiul să citească cifrele și să deducă semnele. Eticheta de
proveniență (.src) primește un punct de oprire când vine după rezultat —
fără el, „41 → 5 SUMA DATEI” se citește ca și cum cuvintele ar face parte din sumă.
.crown) cu eticheta dedesubt, ca NumberSigil din aplicație — nu un rezumat, o semnătură. Celelalte patru numere sunt la douăzeci de centimetri mai jos, cu aritmetica lor.sticky, cu numeralele romane pe un fir vertical; elementul activ înlocuiește firul, nu stă lângă el. Sub 1000px devine o bandă orizontală derulabilă și renunță la sticky — fixată, ar mânca exact capul planșei pe care o anunță.Banda cere min-width: 0 pe element: lista are lățimea ei intrinsecă de ~1400px și ar trage tot documentul în afara ecranului..folio-head::after). Linia e ceea ce face blocul să se citească drept cap de planșă, și nu costă niciun element în plus..matrix, ca să nu apară niciodată o muchie dublă. Fiecare celulă: inel, etichetă, scara de reducere, înțelesul.Coloane de minimum 300px, nu 255: sub atât, „Nr. de Personalitate” și scara lui se rup fiecare pe trei rânduri.max-content, altfel celulele se strâng în derulator și piramida încetează să mai fie echilaterală.Zerourile sunt valori adevărate (regula 10 → 0), deci primesc inel violet, nu invizibilitate.Fiecare planșă poate purta o interpretare scrisă de Cristian sau de Clarissa, salvată în timpul ședinței sau după ea. Asta face documentul viu: ajunge complet la aritmetică și își completează înțelesul în zilele următoare. O glosă nu trebuie niciodată confundată cu registrul — tot ce e calculat e sans, în grilă, cu etichete violet; tot ce e scris e Cormorant pe un fir de aur, cu un nume și o dată pe el. Contrastul ăsta este produsul: omul a plătit pentru al doilea lucru, deci al doilea lucru trebuie să se deosebească de primul de la doi metri.
Scrisă
Vocalele tale adună 33 și abia pe urmă coboară la 6. Ține minte suma, nu doar rezultatul: nu orice 6 vine dintr-un 33, al tău vine.
În așteptare — nimic scris încă
Piramida se citește cel mai bine cu voce tare, rând cu rând. O luăm împreună în ședință, iar interpretarea apare aici imediat ce o salvăm.
Ținută — scrisă, dar se deschide la ședință
Interpretarea planșei ăsteia e scrisă și e a ta. O deschidem împreună: graficul Destin–Voință e singurul loc din hartă unde contează și ce spui tu în timp ce îl citim.
Ședința · 19 august, 18:00--gold — nu --gold-bright, care la mărimea asta e imposibil de deosebit de culoarea textului și se citește ca o greșeală, nu ca o trimitere.--ember și niciodată aur. Aurul înseamnă pe pagina asta „rezultatul clientului”; dacă uneltele ar fi tot aurite, cele două straturi s-ar citi ca unul singur. Ember e destul de cald cât să pară „în direct” și nu apare nicăieri altundeva.
Trei ecrane noi, inserate imediat după pagina unei citiri și nu la coada
dosarului — narativ, aici vin: răsfoiești, cumperi, primești o chitanță și
abia apoi, peste câteva zile, sosește ce ai cumpărat (planșa 10). Niciunul
din cele trei nu inventează un ton nou: coșul e o listă, finalizarea e
biroul de contact purtat a doua oară, confirmarea e o placă gravată. Ce e
genuin nou e o singură componentă — rândul unui coș — pentru că nimic de
pe sit până acum nu era o listă de lucruri cu preț pe care cineva
le editează. .parts și .tile-plate sunt
vitrine: te uiți, pleci. Un rând de coș are nevoie de o cantitate care se
schimbă și de o ieșire, deci a primit propriul .cart-line.
.plaqueshippingBani din money.ts) — o citire nu se expediază. Specimenul de mai sus amestecă deliberat o citire cu o carte, ca regula să se vadă, nu doar să se citească într-o notă..desk/.desk-form/.field sunt neschimbate din pagina de contact — același formular, altă listă de câmpuri. Dar comutatorul-machetă al finalizării nu reutilizează #st-form/#st-sent/#st-err: dosarul agregat pune toate ecranele într-un singur <body>, iar un radio lăsat bifat pe pagina de contact nu dispare când cineva trece la finalizare. Un id de comutator comun ar lăsa starea uitată a unei pagini să conducă panourile alteia. Finalizarea își ține propriile clase de comutare (.co-*), pe lângă cele vizuale (.desk-form etc.), și fiecare ecran nou trebuie să facă la fel — vezi §15.#comanda — a doua ocazie de a cumpăra, neschimbată. Ce s-a schimbat e unde duce acel buton: înainte un data-stub mort, acum @cos, un ecran real. Eticheta urmează ținta: un buton care duce la un coș se numește „Adaugă în coș”, nu „Comandă”.ContactSubmissions și Readings au afterChange cu sendEmail, și niciunul din ele nu e o confirmare de comandă. Pagina spune deschis că ea însăși e chitanța, în loc să lase o căsuță de e-mail goală să se citească a formular stricat..cart-link îl încalcă intenționat: iconița stă lângă „Cont”, în .topbar-actions, pe toate cele zece pagini reale (nu și pe acest dosar sau pe §16 — nu sunt pagini ale sitului). Motivul e chiar cel pentru care coșul există: un vizitator care pleacă de pe pagina unui produs trebuie să găsească drumul înapoi de oriunde ajunge, nu doar de acolo de unde a plecat. Emblema .cart-count e statică — „2”, aceleași două produse din specimenul de mai sus — pe toate paginile mai puțin una: pe confirmare emblema lipsește, fiindcă acolo coșul tocmai s-a golit.Descarcă PDF din §10) rămâne desenat ca țintă, dar e etichetat „vine în curând": e pe traseu, nu deja construit.
Auditul din 13 august a fost făcut pe pixeli, nu pe foaia de stil: fiecare rând de
text a fost decupat din pagina randată, iar contrastul citit din ce a ieșit efectiv
pe ecran. Era singura variantă — .gilt scrie cu
color: transparent și pictează literele cu un gradient tăiat, așa că
foaia de stil răspunde 1:1 la orice întrebare despre un titlu. Din 351 de rânduri
distincte, 38 cădeau sub AA. Ultima trecere numără 379 de rânduri
și două sub prag, amândouă din desen: teaserul care se stinge
intenționat pe pagina de produs și săgeata de paginare dezactivată, pe care WCAG
o scutește explicit. Mediana: 8.04:1.
Culoarea asta exista înainte să aibă nume: rgb(198 205 236 / α), scrisă
de mână în treizeci de locuri, cu α între .25 și .85. Fiindcă nu era token, nu exista
nici loc unde să fie reparată. Măsurată pe cele patru fonduri pe care chiar se
pictează, α trebuie să fie cel puțin .563 pe ink și
.613 pe nebula — deci vechile favorite cad toate la limită:
α .55 dă 4.34:1, α .6 dă 4.37:1 pe nebula. Trei tokenuri în loc de treizeci de literali.
--text-mute: var(--text-mute) — o proprietate personalizată care se referă la ea însăși e invalidă la calcul, așa că fiecare color: var(--text-mute) cădea pe moștenire și lua culoarea părintelui. Se citea mai luminos decât trebuia, deci nimeni nu s-a plâns; iar auditul a trecut-o de două ori, fiindcă măsoară ce e prea închis, nu ce e prea deschis. Reparată, au ieșit la suprafață patru rânduri sub prag — inițialele din ovalurile goale și săgeata dezactivată — trei dintre ele duse peste. Un audit care verifică o singură direcție nu poate vedea o eroare care greșește în cealaltă.inline-block + padding, iar spațiul dintre rânduri dă înapoi cât ia padding-ul.
Măsurat pe rânduri de pixeli fără cerneală: pagina principală avea 30%
din înălțime rânduri complet goale. Cauza nu era generozitatea, ci o adunare —
.section punea 112px sus și 112px jos, așa că fiecare cusătură
dintre două secțiuni măsura 224px, de patru-cinci ori pe pagină. Paginile făcute mai
târziu (jurnal, contact) scăpaseră deja prin padding-top:0 scris în
marcaj: sistemul se contrazicea singur. Cusătura e umplutura unei secțiuni.
--rule-v, al plăcii de dale — structură împrumutată, nu inventată.auto-fill fixa patru coloane și lăsa fiecare raft cu câte cărți are: Arhonții (cinci titluri) ieșea 4 + 1, cu o gaură de 800×600px lângă ultima carte — cea mai mare suprafață goală din tot designul. Un raft e lat cât cărțile de pe el: --titles vine din numărul pe care titlul secțiunii îl anunță deja („cinci titluri”).topbar--ghost înăuntru. Rezultatul: textul începea la y=258 acolo unde toate celelalte pagini încep la y=99, iar banda era cea mai înaltă de pe site. Partea de percepție are o valoare exactă: o compoziție centrată într-o bandă care atârnă sub o bară de aceeași cerneală se citește jos cu jumătate de bară, orice ar face umplutura — ochiul ia câmpul de la marginea paginii, nu de la marginea benzii. Roata stă acum în cutia titlului, nu a benzii, ca cele două să nu poată fi despărțite; abia atunci umplutura poate fi reglată pentru echilibru.position: fixed cu z-index: 9 — o bară fixă stăpânește permanent podeaua ferestrei, iar ce trece pe sub ea nu se vede. Acoperea comutatorul de rol din analiză și al doilea cititor de pe pagina de contact. Nu merită: nota stă acum la sfârșitul documentului.Tot ce e pe site-ul ăsta e desenat în linie de aur, cu o singură excepție: cei doi oameni care citesc hărțile. O fotografie nu poate fi făcută să semene cu un sigiliu, și nici nu trebuie — dar poate fi așezată în același instrument. Trei lucruri i se fac înainte să aparțină benzii, și toate trei se pot citi dintr-o măsurătoare, nu dintr-o părere.
drop-shadow pe un decupaj urmărește silueta reală, nu cutia. Două straturi — unul strâns și palid, unul larg și auriu — dau perechii exact conturul gravat pe care îl are orice sigiliu de pe site. Același vocabular, fără retuș.Un design nu se predă ca douăsprezece fișiere într-un folder. Se predă ca ceva prin care se poate umbla: meniul duce unde scrie, firimiturile se întorc, iar acolo unde macheta se termină, o spune cu o propoziție în loc să nu facă nimic. Tot ce e aici e schelă — nu ajunge în produs — dar poartă aceleași convenții ca produsul, fiindcă altfel clientul ar trebui să deducă singur care jumătate e care.
#/rută. Al doilea e cel care pleacă la client: e un singur link și supraviețuiește la forward. CSS-ul și marcajul sunt identice între ele — orice diferență de randare între folder și pachet e o eroare, și există o probă care o caută.href="@rută" sau @rută~ancoră; build-ul o scrie ca nume de fișier sau ca fragment. Click-ul comandă direct schimbarea ecranului, iar adresa e corectată după — nu invers. Un cadru care înghite fragmentul lasă atunci un prototip nelegabil, nu unul fără navigație.href="#" mort sare în capul paginii și se citește ca defect, nu ca hotar; data-stub îi dă în schimb o propoziție („Ecranul cardului nu e desenat — procesatorul nu e ales încă”). Ce era o gaură devine o listă de decizii — și fiecare notă e o întrebare pentru discuția cu clientul..role): ramă punctată, violet, niciodată aur. Aurul de pe paginile astea înseamnă „lucrul clientului”; dacă și unealta ar fi aurie, cineva ar trebui să ghicească la ce se uită..ledger: numele era deja al sistemului, pentru registrul edițiilor trecute. .order-copy h2: o pagină restiliza pe ascuns o componentă comună, iar celelalte trei benzi de închidere luau tot timpul 1.5em de la browser. Și trei pagini purtau același sprite de icoane, adică id-uri duplicate în care primul câștigă tăcut peste tot. Un component comun care are nevoie de un stil pe trei pagini nu are nevoie de trei copii — are nevoie de o variantă.id duplicat, nicio regulă locală de pagină care atinge alt ecran (selectorul e rulat prin querySelectorAll și fiecare potrivire trebuie să cadă în ruta proprietarului), zero depășiri pe orizontală la 1440/1024/414 și zero erori de consolă..screens spunea „opt carduri, două coloane, patru rânduri, fără gaură" — adevărat cât dosarul avea opt ecrane. Coșul, finalizarea și confirmarea l-au dus la unsprezece, iar comentariul a rămas neschimbat: ultimul rând ajunsese să aibă un singur card, cu jumătate de rând gol lângă el — exact ce comentariul promitea că nu se întâmplă. .screen--sys (cardul spre §16) primește acum grid-column: 1 / -1: zece carduri de site împart două coloane pe cinci rânduri fără rest, iar al unsprezecelea — documentul, nu o pagină a sitului — se întinde singur pe ultimul rând ca o anexă, nu ca o gaură.subgrid, nu prin nădejdea că textul are aceeași lungime.screen, nu se așază peste.latin-ext, pentru diacritice.prefers-reduced-motion..gilt răspunde 1:1 la orice.drop-shadow pe siluetă, mască spre cerneală.contain: paint: fără o graniță de randare a lui, browserul nu poate ține o singură bitmapă și doar s-o mute la scroll — dar numai unde nimic din el nu pictează în afara propriei cutii.<body>, iar un radio uitat bifat pe o pagină nu dispare când cineva trece pe alta.href="#" care sare în capul paginii. Ori duce undeva, ori spune de ce nu.auto-fill pe o listă scurtă și cunoscută: fixează coloanele și lasă ultimul rând orfan.infinite pe o mască sau un gradient conic, fără o condiție de oprire. Durata lungă nu costă mai puțin — compozitorul tot bate din aripi la fiecare cadru, la nesfârșit.contain: paint pus fără să verifici mai întâi ce pictează elementul în afara propriei cutii (D19): inelul .numen își are strălucirea într-un box-shadow care iese din chenar — l-ar fi tăiat exact la margine.Unde ajunge fiecare decizie, în src/design/.
--text-*, --font-serif, .gilt, .rule-gold, .plate, straturile de cer.Plus treapta liniștită — --text-quiet / --text-mute / --text-off. Portul nu are voie să scrie rgb(198 205 236 / α) de mână: exact așa au ajuns treizeci de locuri cu douăsprezece valori diferite, dintre care o duzină sub prag..section + .section nu mai adună umpluturile, iar prima secțiune dintr-un main ia treapta mică fiindcă vine după o bandă. Regula asta economisește ~450px pe pagina principală și ~1000px pe cea de cărți, fără să scoată nimic din pagină.Button (spălarea de aur), Card, Badge, Input — toate există deja și primesc noile stiluri.name..hero-split pe care îl folosește pagina de produs pentru sigiliu. Regulile de tipografie ale coloanei înguste stau pe .hero-split, nu pe pagina care a avut prima nevoie de ele; ce rămâne pe --split e rândul de preț și banda de fapte, care sunt mobilierul produsului.drop-shadow și stingere în cinci opriri, plăcuța cu numele. Placa se măsoară pe înălțimea copiei de alături — fotografie plus plăcuță — și are voie s-o depășească cu 12%, fiindcă e container-type: size și nu poate întoarce nimic în înălțimea benzii.Sursa reală trebuie să vină ca media Payload la minimum 1400px lățime; macheta poartă un WebP cu alfa de 784px, decupat pe caseta alfa. Alt-textul e un nume de om, nu „portret”.<span> și un văl: adâncimea, patru câmpuri mascate (corp, magenta, marginea caldă, partea rece), filamentele, aura bezelului și nodurile de emisie. Nu primește niciun parametru în afară de --core/--cx/--cy, care vin din banda care o găzduiește.Capcană, plătită o dată: regula comună .cosmos > span are specificitate 0-1-1, iar .cos-arm are 0-1-0 — inset: 0 din prima câștiga în fața lui top/left din a doua, și ambele brațe stăteau centrate pe colțul benzii, nu pe figură. Arătau tot a nori, motiv pentru care a supraviețuit trei runde de ajustări. Reparat prin construcție: niciun strat nu-și mai ia poziția din layout — toate sunt inset: 0 și tot ce desenează e așezat de --cx/--cy în pictură. Un strat decorativ care nu poate fi pus greșit valorează mai mult decât unul pus corect. D20: pe varianta de produs, macheta înlocuiește cele patru câmpuri mascate cu un WebP static (două capturi, desktop și 960px) — încărcarea a scăzut cu ~40%, scrollul n-a fost afectat (stratul e deja în prim-plan, deasupra pliului). D21: aceeași înlocuire pe varianta wall (evenimente) — geometric verificată identic pe cinci lățimi, dar acolo câștigul de CPU nu s-a reprodus la nivel de pagină (posterul acoperă cea mai mare parte a coroanei); păstrată pentru consecvență și pentru riscul vizual zero, nu pentru un câștig măsurat pe acea pagină. Rămâne deschis dacă componenta reală păstrează varianta procedurală sau macheta..env.example) chiar există..parts și .tile-plate sunt vitrine.rank="afis" | "sheet") și în starea soldOut. Primește un document Event întreg; ce nu are rangul (lista de conținut, creditul) pur și simplu nu se randează.Regula de aici: rangul schimbă ce apare și unde, niciodată ce înseamnă. Un al doilea component „EventCard” ar începe imediat să se depărteze de afiș.<symbol> gravate (calendar, ecran, redare, carte, sigiliu, ac, oameni, ceas, plic).Capcană, plătită scump: cu sprite, viewBox stă pe <symbol>, iar un <svg> fără viewBox propriu nu are raport intrinsec — deci height: auto cade pe implicitul de element înlocuit, 150px. Nouă icoane așa au făcut din fiecare celulă de fapt un rând de 150px și din afiș un pătrat. Se poartă ambele curele: viewBox pe fiecare instanță și aspect-ratio în CSS.startsAt, nu dintr-un câmp „featured” — un eveniment devine afiș fiindcă e următorul, nu fiindcă a bifat cineva o casetă.title, kind (curs/atelier/seară/seminar), edition, sigil, summary, contents[], startsAt/endsAt, schedule, venue (online|sală + detaliu), seats/seatsLeft, includes[] (icoană + etichetă + notă), price, recording.seatsLeft conduce singur badge-ul de ember și starea de epuizat; nu se scrie de mână un „ultimele locuri”.inStock / reprinting / outOfPrint), preț cu PRP tăiat, cerere de reeditare. Coperta e singura imagine reală din sistem, deci e și singurul loc cu object-fit și cu dimensiuni intrinseci în marcaj.title, subtitle, year, cover (media), shelf, coauthor, pages/isbn/format, price/listPrice, stock, reprintVotes, storeUrl, pricesReadAt.pricesReadAt nu e decor: prețurile vin din magazinul editurii, iar pagina promite doar data la care le-a citit. Dacă mai târziu se sincronizează automat, câmpul devine marcaj de timp al importului.NumberSigil din aplicație, cu treapta suplimentară pentru numeralele romane, care au patru glife acolo unde cifrele au una. Variante: tone="lit" | "struck" (rezultat sau indice) și dial pentru rangul I al jurnalului.Registrul jurnalului nu primește un component propriu. Dacă apare vreodată un al doilea „număr în cerc”, cele două vor începe să se depărteze în aceeași lună.rank="lead" | "entry"). Primește un document Post; timpul de citit se calculează din body la randare.getPosts urcă de la 9 la 12, ca pagina să se închidă pe un rând întreg de trei.number — opțional, text scurt (1–9, 11, 22, 33). Fără el, intrarea primește marca.cover rămâne în colecție și rămâne opțional: are sens pe pagina articolului, nu în registru.SiteSettings (legalName, cui, regCom, address, notificationEmail). Ce lipsește din setări pur și simplu nu se randează.contact/page.tsx, în care aside-ul e o listă gri de date fiscale.afterChange — pe lângă notificarea către practicieni, un e-mail de confirmare către expeditor.Restul e deja corect și rămâne așa: status are acces de câmp separat, deci un expeditor anonim nu-și poate ascunde singur mesajul din inbox.Reading și îi compune — operanzi, operatori, rezultat, etichetă de proveniență. Nimic scris de mână.sticky, planșele numerotate și colofonul. Fiecare planșă își primește felia din Reading; textele scrise vin din CMS, nu din motor.Gloss sau null — null înseamnă „în așteptare”, deci starea goală nu e un caz special, e cazul implicit.reading (relație), folio (I–IX), body (richtext), author, status = draft | published | held, publishedAt. Accesul clientului citește doar published; held se deschide când ședința e marcată ca ținută.Aici stă și regula de plată: fără comandă achitată, nicio glosă nu iese din colecție — nu se ascunde în CSS.numerologie-web ca SVG; aici se reîmbracă în paleta ceremonială, fără să li se schimbe geometria.HeaderView cu marca-octogon și subliniere care se deschide; FooterView gravat.Cinzel({ subsets: ['latin','latin-ext'] }) plus încărcarea Cormorant Garamond.