Brandbook BrandbookColors, tipografies, components i animacions per a tota la web i els seus frontals.
Paleta completa extreta de CustomStyles.astro. El blau primari és el color identitari de l'Ateneu; el cel clar és el fons que dona calidesa.
Inter Variable per a tot. Versàtil, llegible en pantalles petites, perfecta per a un públic familiar i no expert en tecnologia.
Escala basada en múltiples de 4px. Coherència visual a totes les pantalles.
Elements reutilitzables. Cada component té un estat hover animat per donar feedback immediat a l'usuari.
Tres contextos d'ús, un mateix llenguatge visual. El propi menú superior d'aquest brandbook (amunt de tot) és el punt de partida per al panell d'administració — minimal, en text, sense la píndola flotant actual — completat amb una segona línia de submenú, sempre visible per a la secció activa, per a seccions amb moltes opcions com Casal (no un desplegable: veure component 1). Logotip + etiqueta de context a l'esquerra i icona de sortir (⏻, igual a Admin i Àrea de famílies) a la dreta en els dos panells privats. En mòbil, el menú es converteix en hamburguesa i es completa amb una botonera fixa a la part inferior (punt 4).
Totes les animacions d'entrada es disparen quan l'element entra al viewport (IntersectionObserver). Durada base 350ms, easing ease-out. El moviment és subtil i no intrusiu per al públic familiar.
Fes clic al botó ☰ per obrir · Clic al fons fosc per tancar
Guia de referència per a noves funcionalitats. Cada element nou ha d'escollir una animació d'aquesta taula.
| Context | Animació recomanada | Classe | Motiu |
|---|---|---|---|
| Seccions de pàgina, títols H2/H3 | Fade Up | anim-fade-up | Entrada natural i no intrusiva |
| Targetes en graella (stagger) | Fade Up + delay | anim-fade-up delay-N | Seqüència visual que guia l'ull |
| Imatges de fons i heroes | Fade In | anim-fade-in | Suau, sense distreure del contingut |
| CTA principal, botons destacats | Scale In | anim-scale-in | Crida l'atenció sense agressivitat |
| Seccions imatge + text (dos columnes) | Slide Left + Right | anim-slide-left / right | Indica separació visual entre les dues meitats |
| Badges, notificacions, icones | Pop In | anim-pop-in | Dóna vida sense soroll |
| Botons i links (hover) | Lift o Scale | hover-lift / hover-scale | Feedback immediat al clic |
| Modals i drawers (obrir) | Scale In o Slide Right | CSS transició inline | Orienta l'usuari sobre l'origen de l'element |
| Menú amb submenú — web pública | Desplegable en hover/focus | .menu-mock-nav-item:hover / :focus-within | Sense JS, accessible per teclat |
| Menú amb submenú — Admin (secció activa) | Segona línia sempre visible, sense hover | .menu-mock-subnav | Seccions amb moltes opcions (Casal…) mostren totes les pàgines d'un cop, sense amagar-les rere un hover |
| Silueta del footer — nens que caminen | Caminar (fons) | bb-camina-der / bb-camina-izq | Recorregut lent i continu; apareix i desapareix amb opacitat als extrems, sense JS |
| Silueta del footer — nens que corren | Córrer (fons) | bb-corre-der / bb-corre-izq | Mateix recorregut, cames més ràpides i lleugera inclinació — el gest que fa viu el pati d'entrada |
prefers-reduced-motion. Les animacions han d'afegir valor, no ser requisit per entendre el contingut.El peu real d'aquesta pàgina (salta-hi, al final de tot) és la referència viva: el que s'hi mou és exactament el que es documenta aquí, no una còpia a part.
| Element | Detall |
|---|---|
| Alçada de la silueta | 200px en escriptori (≥768px), 130px en mòbil |
| Nens visibles | 6 en escriptori; 3 en mòbil (es prioritzen els que caminen — amb 6 en un espai petit es llegeixen com una taca) |
| Color dels nens | #b0d8fb, no blanc — en blanc es llegien malament sobre el fons clar de baix de la banda (feedback QA real) |
| Catàleg | Pi gran i arbres nus (silueta d'hivern) a banda i banda, arbrets rodons de la vorera repartits pel mig — el mateix que hi ha a la fotografia de l'entrada |
| Accessibilitat | Tot el bloc de la silueta porta aria-hidden; el moviment s'atura del tot amb prefers-reduced-motion |
| Classe | Durada | Motiu |
|---|---|---|
bb-camina-der / bb-camina-izq | 7,5-10s el recorregut | Pas normal, sentits alternats perquè no sembli una processó |
bb-corre-der / bb-corre-izq | 4,2-4,6s el recorregut | Mateix recorregut, més ràpid i amb una lleugera inclinació cap endavant |
bb-cama-1 / bb-cama-2 | 900ms caminant / 380ms corrent | Cames alternades — la diferència de ritme és el que distingeix córrer de caminar, no el dibuix |