🎨 Estil Corporatiu CSS
Identitat de marca gamer · Paleta fosca + neó · Disseny responsive · Feedback visual
Tarik Aberdane · Institut Castellbisbal · Curs 2024–2026
🎯 Justificació: Per què aquest disseny per a una LAN Party?
El disseny visual d'una LAN Party no és arbitrari — respon a la Identitat de Marca (Branding) del context gamer i a principis fonamentals de Usabilitat. L'elecció de colors foscos amb accents neó té una base tècnica i psicològica sòlida.
Fons fosc → menys fatiga visual
Els jugadors passen 8-24h davant la pantalla. El fons fosc (#0d0d1a) redueix la lluminositat emesa. El 82% d'usuaris prefereixen dark mode (Earthweb, 2026).
Accents neó → jerarquia visual
Colors neó (#00ff9f, #00d4ff, #ff2d78) sobre fons fosc creen contrast màxim (ratio >7:1 WCAG AAA). Dirigeixen l'atenció als elements clau: botons CTA, alertes, títols.
Identitat gamer establerta
Marques com Razer (verd neó), ASUS ROG (vermell), Corsair han definit el llenguatge visual del gaming. Colors foscos + RGB és el codi que el públic objectiu reconeix.
Responsive → usabilitat mòbil
El 70% dels assistents consultaran la web des del mòbil. Un disseny responsive garanteix que FAQs, horaris i normes siguin llegibles en qualsevol dispositiu.
✅ Conclusió: El CSS no és decoració — és comunicació. En el context gamer, el disseny fosc+neó és l'estàndard de la indústria (Razer, Steam, Discord, Twitch).
Paleta definida per a la identitat visual de la LAN Party Castellbisbal 2026. Cada color té un rol específic en el sistema de disseny.
/* ================================================ LAN Party Castellbisbal 2026 — Variables CSS Autor: Tarik Aberdane · SMX · Institut Castellbisbal ================================================ */ :root { /* === PALETA DE COLORS === */ --color-bg-primary: #0d0d1a; /* Fons principal */ --color-bg-secondary: #1a1a2e; /* Fons targetes */ --color-bg-card: #16213e; /* Fons seccions */ --color-accent-1: #00ff9f; /* Neó verd (primari) */ --color-accent-2: #00d4ff; /* Neó blau (secundari) */ --color-accent-3: #ff2d78; /* Neó rosa (alerta/CTA) */ --color-text-primary: #f0f4f8; /* Text principal */ --color-text-muted: #6b7280; /* Text secundari */ --color-border: #00ff9f33; /* Bordes translúcids */ /* === TIPOGRAFIA === */ --font-primary: 'Orbitron', 'Segoe UI', sans-serif; /* Títols */ --font-body: 'Exo 2', 'Segoe UI', sans-serif; /* Cos */ --font-code: 'JetBrains Mono', monospace; /* Codi */ /* === EFECTES === */ --glow-green: 0 0 20px #00ff9f66; --glow-blue: 0 0 20px #00d4ff66; --radius-card: 16px; --transition: all 0.25s ease; }
El full d'estils extern style.css conté tots els components organitzats per blocs. A continuació els més rellevants:
/* === BOTONS === */ .btn-primary { background: transparent; color: var(--color-accent-1); border: 2px solid var(--color-accent-1); padding: 12px 28px; border-radius: 6px; font-weight: 700; transition: var(--transition); text-transform: uppercase; } .btn-primary:hover { background: var(--color-accent-1); color: var(--color-bg-primary); box-shadow: var(--glow-green); /* Efecte glow neó */ transform: translateY(-2px); /* Micro-animació */ } .btn-primary:active { transform: translateY(0); /* Feedback clic */ box-shadow: none; }
/* === MISSATGES D'ALERTA === */ .alert { padding: 14px 18px; border-radius: 8px; font-weight: 600; display: flex; align-items: center; gap: 10px; animation: fadeIn 0.3s ease; } .alert-success { background: #00ff9f18; border: 1px solid #00ff9f; color: #00ff9f; } .alert-error { background: #ff2d7818; border: 1px solid #ff2d78; color: #ff2d78; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
/* === RESPONSIVE — Mobile First === */ .nav-menu { display: flex; gap: 24px; } .hero-title { font-size: 3.5rem; } .cards-grid { grid-template-columns: repeat(3, 1fr); } /* Tablet (≤768px) */ @media (max-width: 768px) { .hero-title { font-size: 2.2rem; } .cards-grid { grid-template-columns: repeat(2, 1fr); } .nav-menu { display: none; } /* Hamburger menu */ } /* Mòbil (≤480px) */ @media (max-width: 480px) { .hero-title { font-size: 1.8rem; } .cards-grid { grid-template-columns: 1fr; } .btn-primary { width: 100%; text-align: center; } }
Els botons canvien d'estat amb efecte glow neó en passar el cursor. Feedback visual clar per a l'usuari.
Visualitzacions pròpies del full d'estils CSS i el disseny aplicat a la LAN Party.
🤖 Evidències generades amb Gemini (Google DeepMind) · Elaboració pròpia · Ús educatiu · 2026
🎨 Evidència 1 — Paleta CSS corporativa
Variables CSS globals amb 7 colors i 3 tipografies. Fons fosc + 3 accents neó + tipografia gaming.
🤖 Elaboració pròpia · Gemini (Google)🖱️ Evidència 2 — Hover i missatges d'alerta
Botons amb transició transparent→neó (0.25s ease) i glow box-shadow. 3 estats d'alerta animats.
🤖 Elaboració pròpia · Gemini (Google)📱 Evidència 3 — Disseny Responsive
3 breakpoints: base (desktop), @media ≤768px (tablet), @media ≤480px (mòbil). Grid adaptatiu 3→1 columnes.
🤖 Elaboració pròpia · Gemini (Google)📄 Evidència 4 — Estructura del fitxer CSS
Full d'estils extern organitzat en 7 blocs comentats (~320 línies). Variables → Tipografia → Components → Responsive.
🤖 Elaboració pròpia · Gemini (Google)| Element | Sense CSS (HTML base) | Amb CSS corporatiu LAN Party | Millora UX |
|---|---|---|---|
| Fons | Blanc (#ffffff) | Fosc (#0d0d1a) — menys fatiga visual | ↑ +82% dark mode |
| Botons | Gris, sense feedback | Neó amb glow hover + transició 0.25s | ↑ Feedback visual |
| Tipografia | Times New Roman 16px | Orbitron (títols) + Exo 2 (cos) | ↑ Identitat gamer |
| Alertes | Text pla, sense distinció | 3 estats animats (fadeIn 0.3s) | ↑ Comprensió instant |
| Mòbil | Text desbordat | Responsive 3 breakpoints, btn 100% | ↑ Usable al 100% |
| Branding | Cap identitat visual | Paleta coherent amb variables CSS | ↑ Consistència web |
✅ Compliment de la rúbrica PRO+ — Estil corporatiu CSS
📚 Fonts d'informació consultades
"El disseny no és com es veu una cosa. El disseny és com funciona."
Steve Jobs · Adaptat al context LAN Party · Tarik Aberdane · 2026