STYLEGUIDE GENERATEBLOCKS

Sistemul vizual Repară Casa

Referința practică pentru culori, tipografie, spațiere, carduri, butoane și compoziția paginilor. Fiecare exemplu de mai jos este un bloc GenerateBlocks editabil.

Cum îl folosesc Vezi componentele

Cum folosești sistemul

Construiește fiecare pagină din regiuni, containere și componente globale. Astfel, o schimbare de design rămâne controlată și poate fi aplicată în tot site-ul.

01 · structură

Începe cu regiunea paginii

Adaugă un Element GenerateBlocks cu tag section, apoi un div interior. Secțiunea controlează fundalul și ritmul vertical; containerul controlează lățimea.

Exterior: .rc-section + un modifier Interior: .rc-container

02 · clase globale

Alege stilurile din editor

În panoul Global Styles al blocului aplică clasele rc-*. Acestea rămân editabile și reutilizabile; nu introduce aceleași proprietăți în Additional CSS.

GenerateBlocks → Global Styles Exemplu: .rc-text-p + .rc-text-p–large

03 · compoziție

Combină bază și modifier

Clasa de bază definește anatomia, iar modifierul schimbă varianta vizuală. Păstrează această ordine și folosește un singur modifier de același tip.

.rc-button + .rc-button–primary .rc-card + .rc-card–accent

Paleta de culori

Culorile canonice sunt preseturi în theme.json. În editor alege culoarea după nume; în CSS folosește variabila WordPress, nu copia hex-ul într-un bloc individual.

Base #fffdfb · var(–wp–preset–color–base)

Fundalul general al paginii și suprafețele foarte luminoase.

Paper #ffffff · var(–wp–preset–color–paper)

Carduri, panouri și suprafețe care trebuie să se desprindă de fundal.

Warm soft #fff8f2 · var(–wp–preset–color–warm-soft)

Secțiuni alternative și zone de tranziție cu atmosferă caldă.

Text #171310 · var(–wp–preset–color–text)

Titluri și text principal pe fundaluri deschise.

Text soft #403732 · var(–wp–preset–color–text-soft)

Introduceri, lead-uri și text cu importanță secundară.

Muted #6d625a · var(–wp–preset–color–muted)

Paragrafe, explicații, metadate și descrieri de card.

Line #eadfd4 · var(–wp–preset–color–line)

Borduri subtile, separatoare și delimitarea cardurilor.

Primary orange #f06414 · var(–wp–preset–color–primary)

CTA principal, accente, etichete și stări de focus.

Primary dark #b83e08 · var(–wp–preset–color–primary-dark)

Textul linkurilor accent și capătul întunecat al gradientului.

Graphite #181513 · var(–wp–preset–color–graphite)

Secțiuni premium întunecate, footer și carduri cu contrast mare.

Tipografie și ierarhie

Familia este Arial, sans-serif. Diferențierea vine din mărime, greutate, line-height și spațiere; păstrează ierarhia semantică H1 → H2 → H3.

Hero / H1 .rc-text-h1 clamp(2.625rem, 6vw, 4.625rem) · 900 · 0.98

Un singur H1 pe pagină. Folosește-l pentru promisiunea principală, nu pentru numele fiecărei secțiuni.

Reparații făcute clar.

Secțiune / H2 .rc-text-h2 clamp(2.15rem, 4vw, 3rem) · 900 · 1.06

Începe fiecare regiune majoră. Textul trebuie să explice o idee, nu doar să eticheteze zona.

Cum treci de la problemă la soluție

Card / H3 .rc-text-h3 1.375rem · 850 · 1.16

Folosește pentru titluri de card, pași, întrebări și subsecțiuni. Nu sări peste nivelurile de heading.

Estimare realistă

Lead .rc-text-p–lead 1.1875rem · 400 · 1.65 · max 42.5rem

Introducerea de sub H1. O singură propoziție sau două, cu vocabular direct și fără blocuri prea late.

Trimite problema și câteva poze; îți spunem care este următorul pas.

Body .rc-text-p 1rem · 400 · 1.6

Textul standard pentru explicații. Pentru un paragraf introductiv mai vizibil adaugă și .rc-text-p–large.

Explică rezultatul, condițiile și acțiunea următoare în propoziții scurte.

Eyebrow .rc-text-eyebrow 0.8125rem · 900 · uppercase · 0.08em

Etichetă scurtă de context. Folosește maximum câteva cuvinte și evită propozițiile lungi.

SERVICII PENTRU CASĂ

Dimensiuni, spațiere și efecte

Scara de spațiere este limitată intenționat. Refolosește preseturi și clase pentru a menține ritmul; valorile locale sunt excepții, nu punctul de pornire.

Container 68.75rem · 1100px la 16px

Folosește .rc-container în interiorul fiecărei secțiuni. Pe ecrane înguste păstrează automat margini laterale.

Secțiune 5rem desktop · 3.25rem mobil

Aplică .rc-section o singură dată pe regiunea exterioară; nu repeta paddingul pe container.

Spațiere 10–40 0.375 · 0.5 · 0.75 · 1rem

Pentru spații interne mici: iconițe, etichete, grupuri compacte și distanțe între controale.

Spațiere 50–80 1.5 · 2 · 3 · 5rem

Pentru carduri, grile, coloane și separarea secțiunilor. Alege presetul, nu o valoare arbitrară.

Raze 0.375 · 0.5 · 0.875rem

Small pentru butoane și cod, base pentru carduri, large doar pentru suprafețe editoriale speciale.

Umbră soft 0 1.125rem 3rem rgba(46,28,17,.09)

Carduri și panouri pe fundal deschis. Păstrează efectul discret.

Umbră strong 0 1.875rem 5.625rem rgba(0,0,0,.24)

Doar pentru elemente care plutesc clar, precum un panou important sau un overlay.

Umbră orange 0 1rem 2.125rem rgba(240,100,20,.26)

Rezervată acțiunii primare; nu o aplica pe toate cardurile.

Componente comune

Exemplele sunt funcționale și folosesc exact combinațiile de Global Styles recomandate. Refolosește anatomia; schimbă textul și destinația, nu structura de bază.

Butoane pe suprafață deschisă

Acțiuni principale și secundare

Inserează componenta GenerateBlocks Button. Primarul mută utilizatorul spre conversie, secundarul oferă o alternativă, iar varianta link este pentru acțiuni cu prioritate mică.

Cere estimare Sună acum Cum lucrăm

GenerateBlocks → Button · .rc-button + un singur modifier

Butoane pe suprafață întunecată

Primary și ghost

Păstrează aceeași componentă Button și schimbă doar modifierul global. Pe graphite, folosește CTA-ul portocaliu și alternativa ghost; varianta secondary albă este rezervată fundalurilor deschise.

Trimite detalii Vezi acasă

.rc-button–ghost numai pe fundal întunecat

Card · standard

Card implicit

Suprafață albă, bordură Line, rază base și umbră soft. Este alegerea normală pentru informații egale ca importanță.

.rc-card

Card · accent

Card cu prioritate vizuală

Folosește-l pentru o recomandare, o notă importantă sau un element pe care vrei să-l diferențiezi fără a-l transforma în CTA.

.rc-card + .rc-card–accent

Card · dark

Card pe graphite

Potrivit pentru concluzii, beneficii premium și contraste deliberate. Textul descriptiv primește și clasa pentru text deschis.

.rc-card + .rc-card–dark Paragraf: .rc-text-p + .rc-text-p–light

Listă de verificare

Avantaje, pași sau condiții

Începe fiecare rând cu o idee concretă.
Păstrează enunțurile apropiate ca lungime.
Folosește lista numai când ordinea nu este obligatorie.

.rc-check-list → .rc-check-list__item

Modele de layout

Aceste compoziții rezolvă majoritatea paginilor de prezentare: regiune, container, stack și grilă. Înainte să creezi o clasă nouă, încearcă să compui aceste primitive.

Secțiune + container

Toate paginile folosesc aceeași limită de lățime și același ritm vertical. Schimbă doar varianta suprafeței.

section: .rc-section + .rc-section–surface div: .rc-container

Stack pentru flux vertical

Grupează titlu, text și acțiuni fără margini manuale. Adaugă modifierul large când elementele au nevoie de mai mult aer.

.rc-stack · gap 1rem .rc-stack–large · gap 1.5rem

Grile de două și trei coloane

Folosește grila în jurul componentelor-surori. La breakpointurile mici coloanele se așază automat una sub alta.

A

Coloana unu

Conținut egal ca prioritate.

.rc-grid–two

B

Coloana doi

Aceeași structură și spațiere.

.rc-grid–three

Grilă de trei coloane

Potrivită pentru seturi compacte de beneficii sau opțiuni. Dacă textul devine lung, revino la două coloane.

A

Unu

Beneficiu scurt.

B

Doi

Beneficiu scurt.

C

Trei

Beneficiu scurt.

Regiune dark

Folosește contrastul întunecat pentru hero, CTA final sau o singură zonă editorială importantă. Nu alterna dark la fiecare secțiune.

.rc-section + .rc-section–dark Text secundar: .rc-text-p–light

Reguli CSS și flux de lucru

Global Styles sunt sursa componentelor, iar theme.json este sursa tokenurilor. Editorul WordPress consumă aceste definiții; nu trebuie să devină o a doua sursă de CSS paralel.

WordPress

Aplicarea unei clase

Selectează blocul GenerateBlocks, deschide Global Styles și caută clasa după numele rc-. Clasele sunt salvate central și apar în toate paginile.

Block sidebar → Global Styles → Add style

CSS

Unde modifici o regulă

Pentru o schimbare reutilizabilă editează definiția din sincronizatorul de Global Styles. Pentru un token global editează theme.json, apoi rulează sincronizarea și validarea.

tools/sync-wp-global-styles.php wordpress/reparacasa-fse/theme.json

Naming

Convenția claselor

Prefixul rc- izolează sistemul. Elementele unei componente folosesc două underscore-uri, iar variantele folosesc două cratime.

.rc-card__number .rc-card–accent

Responsive

Breakpointuri comune

Componentele se adaptează în principal la 64rem și 48rem. Testează cel puțin 390px și 1920px după o schimbare de grilă, padding sau font.

@media (max-width: 64rem) @media (max-width: 48rem)

Accesibilitate

Contrast, focus și semantică

Păstrează un singur H1, ordinea H2/H3, alt descriptiv la imagini și etichetă clară pe linkuri. Focusul portocaliu este definit la rădăcina sistemului.

Nu elimina :focus-visible Nu folosi culoarea ca singur indiciu

Conținut

Ritm și lungime

Ține paragrafele scurte, limitează lead-ul și scrie CTA-uri ca verbe. Cardurile din aceeași grilă trebuie să aibă o cantitate apropiată de informație.

Titlu concret → explicație → acțiune

Formulare

Folosește componenta GenerateBlocks Pro

Nu introduce inputuri ca HTML brut. Când destinația mesajelor este confirmată, construiește formularul nativ, definește stările focus, eroare și succes și verifică trimiterea.

Form → Field → Label → Control → Submit

Nu folosi

Valori locale fără motiv

Evită culori hex copiate în pagină, margini pentru spațiere, fonturi adăugate doar pe un bloc, clase fără prefix și combinații cu două variante conflictuale.

Evită: .rc-button–primary + .rc-button–ghost

Verificare

După fiecare modificare

Rulează sincronizatorul repetabil, validatorul GenerateBlocks, verifică URL-urile și inspectează vizual desktopul și mobilul. Nu publica o schimbare pe baza editorului singur.

sync → validate → render → inspect

Checklist înainte de publicare

Folosește lista după orice pagină nouă sau schimbare de stil global.

Există exact un H1, iar nivelurile de heading sunt în ordine.
Culorile și spațierile vin din preseturi sau Global Styles existente.
Cardurile folosesc o clasă de bază și cel mult un modifier vizual.
Toate imaginile au text alternativ potrivit, iar linkurile descriu destinația.
Layoutul a fost verificat la 390px și 1920px, fără overflow orizontal.
Sincronizarea și validatorul GenerateBlocks se încheie fără erori.

Vezi pagina principală Vezi pagina Contact