Estil corporatiu (css)

1. Justificació del Disseny (Branding i Usabilitat)

Identitat de Marca (Branding)

La marca d’una LAN Party ha de transmetre energia, tecnologia i comunitat. L’elecció de colors foscos combinats amb accents neó no és només una qüestió estètica, sinó una declaració d’intencions:

• Fons “Deep Space”: Proporciona una base sòlida i tecnològica.
• Accents Neó (Cian i Magenta): Representen el dinamisme dels videojocs i la connectivitat de la fibra òptica.

Usabilitat en Entorns de Poca Llum

El context d’ús d’aquesta web sol ser un pavelló amb il·luminació tènue on les pantalles són la font principal de llum.

• Contrast Alt: L’ús de text clar sobre fons fosc redueix la fatiga visual (astenia visual) en ambients foscos, ja que la pantalla no emet una quantitat excessiva de llum blanca cap a l’usuari.
• Llegibilitat: S’utilitzen tipografies sans-serif (com ‘Inter’ o ‘Roboto’) per facilitar la lectura ràpida de dades tècniques o horaris de tornejos.

---

2. Full d’Estils Extern (style.css)

CSS

/* =========================================
   VARIABLES I CONFIGURACIÓ INICIAL
   ========================================= */
:root {
    --bg-color: #0d0d12;
    --card-bg: #1a1a24;
    --primary-neon: #00f2ff; /* Cian Neó */
    --secondary-neon: #ff00e5; /* Magenta Neó */
    --text-main: #e0e0e0;
    --text-muted: #a0a0a0;
    --success: #39ff14;
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

/* =========================================
   LAYOUT RESPONSIVE
   ========================================= */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 0;
}

header {
    padding: 1rem 0;
    border-bottom: 2px solid var(--primary-neon);
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.2);
}

.grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* =========================================
   COMPONENTS I FEEDBACK VISUAL
   ========================================= */

/* Targetes de Torneig */
.card {
    background: var(--card-bg);
    border: 1px solid #333;
    padding: 1.5rem;
    border-radius: 8px;
    transition: var(--transition);
    position: relative;
}

.card:hover {
    border-color: var(--primary-neon);
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.1);
}

/* Botons amb Feedback */
.btn {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    background: transparent;
    color: var(--primary-neon);
    border: 2px solid var(--primary-neon);
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
    border-radius: 4px;
}

.btn:hover {
    background: var(--primary-neon);
    color: var(--bg-color);
    box-shadow: 0 0 15px var(--primary-neon);
}

.btn-secondary {
    border-color: var(--secondary-neon);
    color: var(--secondary-neon);
}

.btn-secondary:hover {
    background: var(--secondary-neon);
    color: white;
    box-shadow: 0 0 15px var(--secondary-neon);
}

/* Missatges d'Alerta */
.alert {
    padding: 1rem;
    border-left: 4px solid var(--success);
    background: rgba(57, 255, 20, 0.1);
    margin: 1rem 0;
    font-size: 0.9rem;
}

/* =========================================
   ADAPTACIÓ MÒBIL (Media Queries)
   ========================================= */
@media (max-width: 768px) {
    h1 { font-size: 1.8rem; }
    .container { width: 95%; }
    
    /* Millora de l'espai tàctil en mòbils */
    .btn {
        width: 100%;
        text-align: center;
        padding: 1rem;
    }
}

3. Exemple d’Estructura HTML (Ús)

Per implementar aquest estil, l’HTML hauria de seguir aquesta estructura per aprofitar el disseny responsive i el feedback:

HTML

<header>
    <div class="container">
        <h1>LAN PARTY <span style="color: var(--primary-neon)">2026</span></h1>
    </div>
</header>

<main class="container">
    <div class="alert">Inscripcions obertes per al torneig de Valorant!</div>
    
    <div class="grid">
        <div class="card">
            <h3>Torneig CS2</h3>
            <p style="color: var(--text-muted)">12:00h - Arena Principal</p>
            <button class="btn">Inscriure's</button>
        </div>
        <div class="card">
            <h3>Zona VR</h3>
            <p style="color: var(--text-muted)">Tot el dia</p>
            <button class="btn btn-secondary">Més info</button>
        </div>
    </div>
</main>

Resum de Beneficis:

1. Consistència: L’ús de variables CSS (:root) garanteix que tota la web mantingui els mateixos tons neó.
2. Lleugeresa: No depèn de llibreries externes, el que assegura una càrrega ràpida (essencial si la xarxa està saturada de trànsit de jocs).
3. Accessibilitat: Tot i ser un estil “gamer”, els contrastos de text compleixen els estàndards per a una lectura clara.