Guia interna del projecte
Guies d’estil
Aquesta pàgina recull els estils base actius del WordPress i del projecte perquè puguem tenir una referència clara abans de construir noves pàgines o components. Si en algun moment et proposo sortir-nos d’aquesta base, t’ho indicaré explícitament perquè ho puguis validar.
01 Colors
Paleta principal
Colors que avui ja estem utilitzant de manera recurrent a capçalera, peu i pàgines editorials.
Verd principal
#214732
Verd secundari
#6b836f
Crema editorial
#f4efe7
Blanc
#ffffff
02 Typography
Tipografia i jerarquia
Aquesta secció mostra la jerarquia tipogràfica que prendrem com a base de projecte: H1 i H2 amb Bernard MT Condensed, en verd corporatiu #214732, H3 amb Birthstone i la resta de headings amb l’estil base del tema si no definim cap excepció específica. Les mides editorials base són H1 fins a 78px i H2 fins a 52px en sobretaula, amb reducció responsive.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Aquest és el paràgraf base de lectura. En aquest projecte l’hem normalitzat a 16px com a mida general per al text corrent, amb una interlínia còmoda per a pàgines editorials i informatives.
Pots combinar-hi negreta, cursiva i també enllaços per veure com es comporten dins del cos principal de text.
03 Rich Text
Text ric i contingut editorial
La cita o blockquote és útil per destacar fragments rellevants dins de pàgines narratives, entrevistes o peces de storytelling.
Exemple de cita
També pots inserir línies separadores, petits fragments de codi inline o destacar paraules clau dins del relat sense necessitat de components especials.
.entry-content p {
font-size: 16px;
line-height: 1.7;
}
- Element de llista sense ordenar
- Segon element de mostra
- Tercer element per comprovar espaiat
- Primer pas o punt
- Segon pas o punt
- Tercer pas o punt
| Element | Ús recomanat |
|---|---|
| Paràgraf | Text de lectura general |
| Heading 2 | Títol de secció principal |
| Blockquote | Destacar una cita o idea |
04 Buttons & Forms
Botons i formulari bàsic
Aquí tens una referència ràpida dels botons nadius i de l’aspecte general dels camps de formulari sota els estils actius del lloc.
05 Layout global
Patró base per a pàgines editorials
Les noves pàgines editorials han de partir d’un contenidor interior de 1290px, files a full-width amb fons alternats blanc i crema editorial, imatges grans quadrades sense cantonades arrodonides i CTA final amb el mateix sistema de botons del footer.
.epv-page-layout
Contenidor arrel full-width. Elimina padding/gaps automàtics d’Astra i Gutenberg.
.epv-page-row
Fila editorial amb padding vertical base de 86px. Variants: --white i --cream.
.epv-page-inner
Caixa interior màxima de 1290px, centrada. Manté el contingut editable amb blocs.
.epv-page-image
Imatge quadrada 1:1, gran, sense radi i amb ombra suau.
.epv-page-title i .epv-page-heading
H1/H2 globals amb Bernard MT Condensed, color corporatiu #214732 i mides ja ajustades.
.epv-page-cta-band
CTA full-width amb padding 56px, contenidor intern de 1290px i botons globals.
Mostra de fila
Fons blanc
Primera fila recomanada per a pàgines editorials: imatge quadrada gran i text en caixa interior de 1290px.
Alternança
Fons crema editorial
La segona fila alterna el fons per donar ritme visual sense haver de crear estils nous a cada pàgina.
06 Menús
Directrius del sistema de menús
Els menús ja no s’han de tractar com pàgines lliures. La base acordada és un backoffice estructurat, fàcil de mantenir, amb camps CA/ES allà on el contingut és editorial i visible al públic.
Menús estàndard
Treballen amb Seccions del menú, plats CA/ES, preu i Informació del servei. Al frontend només s’hi mostra l’idioma seleccionat.
Menú diari
Té model propi al backoffice i PDF específic. A la pàgina pública mostra un sol idioma; al PDF del menú diari es mantenen català + castellà simultàniament.
Carta
És una excepció amb model estructurat propi: seccions, plats CA/ES, preus per 1/2 i ració, llegenda d’icones i logos finals.
- Quan un menú és estructurat, l’editor lliure
Visual/Codino ha de ser la via principal de manteniment. - Els camps bilingües s’han de completar al backoffice encara que al frontend només es mostri un idioma.
- Els PDFs de menús estàndard es poden preparar per idioma; el PDF del menú diari segueix una plantilla pròpia i bilingüe.
Criteri de treball acordat: aquesta guia marca la base. Si en futures pàgines et proposo una tipografia, mida, espaiat o component que se n’allunyi de manera clara, t’ho indicaré abans perquè en puguis validar l’excepció.