{"id":1551,"date":"2026-02-02T08:46:59","date_gmt":"2026-02-02T07:46:59","guid":{"rendered":"https:\/\/ahassan.inscastellbisbal.net\/?page_id=1551"},"modified":"2026-02-02T08:48:33","modified_gmt":"2026-02-02T07:48:33","slug":"estil-corporatiu-css","status":"publish","type":"page","link":"https:\/\/ahassan.inscastellbisbal.net\/?page_id=1551","title":{"rendered":"Estil corporatiu (css)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">1. Justificaci\u00f3 del Disseny (Branding i Usabilitat)<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Identitat de Marca (Branding)<\/h3>\n\n\n\n<p>La marca d&#8217;una LAN Party ha de transmetre <strong>energia, tecnologia i comunitat<\/strong>. L&#8217;elecci\u00f3 de colors foscos combinats amb accents ne\u00f3 no \u00e9s nom\u00e9s una q\u00fcesti\u00f3 est\u00e8tica, sin\u00f3 una declaraci\u00f3 d&#8217;intencions:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Fons &#8220;Deep Space&#8221;:<\/strong> Proporciona una base s\u00f2lida i tecnol\u00f2gica.<\/li>\n\n\n\n<li><strong>Accents Ne\u00f3 (Cian i Magenta):<\/strong> Representen el dinamisme dels videojocs i la connectivitat de la fibra \u00f2ptica.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Usabilitat en Entorns de Poca Llum<\/h3>\n\n\n\n<p>El context d&#8217;\u00fas d&#8217;aquesta web sol ser un pavell\u00f3 amb il\u00b7luminaci\u00f3 t\u00e8nue on les pantalles s\u00f3n la font principal de llum.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Contrast Alt:<\/strong> L&#8217;\u00fas 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&#8217;usuari.<\/li>\n\n\n\n<li><strong>Llegibilitat:<\/strong> S&#8217;utilitzen tipografies <em>sans-serif<\/em> (com &#8216;Inter&#8217; o &#8216;Roboto&#8217;) per facilitar la lectura r\u00e0pida de dades t\u00e8cniques o horaris de tornejos.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">2. Full d&#8217;Estils Extern (<code>style.css<\/code>)<\/h2>\n\n\n\n<p><strong>CSS<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* =========================================\n   VARIABLES I CONFIGURACI\u00d3 INICIAL\n   ========================================= *\/\n:root {\n    --bg-color: #0d0d12;\n    --card-bg: #1a1a24;\n    --primary-neon: #00f2ff; \/* Cian Ne\u00f3 *\/\n    --secondary-neon: #ff00e5; \/* Magenta Ne\u00f3 *\/\n    --text-main: #e0e0e0;\n    --text-muted: #a0a0a0;\n    --success: #39ff14;\n    --transition: all 0.3s ease;\n}\n\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\nbody {\n    font-family: 'Inter', system-ui, -apple-system, sans-serif;\n    background-color: var(--bg-color);\n    color: var(--text-main);\n    line-height: 1.6;\n    overflow-x: hidden;\n}\n\n\/* =========================================\n   LAYOUT RESPONSIVE\n   ========================================= *\/\n.container {\n    width: 90%;\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 2rem 0;\n}\n\nheader {\n    padding: 1rem 0;\n    border-bottom: 2px solid var(--primary-neon);\n    box-shadow: 0 0 15px rgba(0, 242, 255, 0.2);\n}\n\n.grid {\n    display: grid;\n    gap: 2rem;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n}\n\n\/* =========================================\n   COMPONENTS I FEEDBACK VISUAL\n   ========================================= *\/\n\n\/* Targetes de Torneig *\/\n.card {\n    background: var(--card-bg);\n    border: 1px solid #333;\n    padding: 1.5rem;\n    border-radius: 8px;\n    transition: var(--transition);\n    position: relative;\n}\n\n.card:hover {\n    border-color: var(--primary-neon);\n    transform: translateY(-5px);\n    box-shadow: 0 0 20px rgba(0, 242, 255, 0.1);\n}\n\n\/* Botons amb Feedback *\/\n.btn {\n    display: inline-block;\n    padding: 0.8rem 1.5rem;\n    background: transparent;\n    color: var(--primary-neon);\n    border: 2px solid var(--primary-neon);\n    font-weight: bold;\n    text-transform: uppercase;\n    cursor: pointer;\n    transition: var(--transition);\n    border-radius: 4px;\n}\n\n.btn:hover {\n    background: var(--primary-neon);\n    color: var(--bg-color);\n    box-shadow: 0 0 15px var(--primary-neon);\n}\n\n.btn-secondary {\n    border-color: var(--secondary-neon);\n    color: var(--secondary-neon);\n}\n\n.btn-secondary:hover {\n    background: var(--secondary-neon);\n    color: white;\n    box-shadow: 0 0 15px var(--secondary-neon);\n}\n\n\/* Missatges d'Alerta *\/\n.alert {\n    padding: 1rem;\n    border-left: 4px solid var(--success);\n    background: rgba(57, 255, 20, 0.1);\n    margin: 1rem 0;\n    font-size: 0.9rem;\n}\n\n\/* =========================================\n   ADAPTACI\u00d3 M\u00d2BIL (Media Queries)\n   ========================================= *\/\n@media (max-width: 768px) {\n    h1 { font-size: 1.8rem; }\n    .container { width: 95%; }\n    \n    \/* Millora de l'espai t\u00e0ctil en m\u00f2bils *\/\n    .btn {\n        width: 100%;\n        text-align: center;\n        padding: 1rem;\n    }\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">3. Exemple d&#8217;Estructura HTML (\u00das)<\/h2>\n\n\n\n<p>Per implementar aquest estil, l&#8217;HTML hauria de seguir aquesta estructura per aprofitar el disseny responsive i el feedback:<\/p>\n\n\n\n<p><strong>HTML<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;header&gt;\n    &lt;div class=\"container\"&gt;\n        &lt;h1&gt;LAN PARTY &lt;span style=\"color: var(--primary-neon)\"&gt;2026&lt;\/span&gt;&lt;\/h1&gt;\n    &lt;\/div&gt;\n&lt;\/header&gt;\n\n&lt;main class=\"container\"&gt;\n    &lt;div class=\"alert\"&gt;Inscripcions obertes per al torneig de Valorant!&lt;\/div&gt;\n    \n    &lt;div class=\"grid\"&gt;\n        &lt;div class=\"card\"&gt;\n            &lt;h3&gt;Torneig CS2&lt;\/h3&gt;\n            &lt;p style=\"color: var(--text-muted)\"&gt;12:00h - Arena Principal&lt;\/p&gt;\n            &lt;button class=\"btn\"&gt;Inscriure's&lt;\/button&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"card\"&gt;\n            &lt;h3&gt;Zona VR&lt;\/h3&gt;\n            &lt;p style=\"color: var(--text-muted)\"&gt;Tot el dia&lt;\/p&gt;\n            &lt;button class=\"btn btn-secondary\"&gt;M\u00e9s info&lt;\/button&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/main&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Resum de Beneficis:<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>Consist\u00e8ncia:<\/strong> L&#8217;\u00fas de variables CSS (<code>:root<\/code>) garanteix que tota la web mantingui els mateixos tons ne\u00f3.<\/li>\n\n\n\n<li><strong>Lleugeresa:<\/strong> No dep\u00e8n de llibreries externes, el que assegura una c\u00e0rrega r\u00e0pida (essencial si la xarxa est\u00e0 saturada de tr\u00e0nsit de jocs).<\/li>\n\n\n\n<li><strong>Accessibilitat:<\/strong> Tot i ser un estil &#8220;gamer&#8221;, els contrastos de text compleixen els est\u00e0ndards per a una lectura clara.<\/li>\n<\/ol>\n\n\n<div class=\"wpforms-container wpforms-container-full wpforms-block wpforms-block-5f0ea8d3-1dce-4372-ad78-310df8de675f\" id=\"wpforms-764\"><form id=\"wpforms-form-764\" class=\"wpforms-validate wpforms-form\" data-formid=\"764\" method=\"post\" enctype=\"multipart\/form-data\" action=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F1551\" data-token=\"0bed34a744a676e1df5823f5038439b0\" data-token-time=\"1778161499\"><noscript class=\"wpforms-error-noscript\">Activeu el JavaScript al navegador per a poder completar el formulari.<\/noscript><div class=\"wpforms-field-container\"><div id=\"wpforms-764-field_0-container\" class=\"wpforms-field wpforms-field-name wpforms-one-half wpforms-first\" data-field-id=\"0\"><label class=\"wpforms-field-label wpforms-label-hide\" for=\"wpforms-764-field_0\">Name <span class=\"wpforms-required-label\">*<\/span><\/label><input type=\"text\" id=\"wpforms-764-field_0\" class=\"wpforms-field-large wpforms-field-required\" name=\"wpforms[fields][0]\" placeholder=\"Your Name\" required><\/div><div id=\"wpforms-764-field_3-container\" class=\"wpforms-field wpforms-field-email wpforms-one-half\" data-field-id=\"3\"><label class=\"wpforms-field-label wpforms-label-hide\" for=\"wpforms-764-field_3\">Email <span class=\"wpforms-required-label\">*<\/span><\/label><input type=\"email\" id=\"wpforms-764-field_3\" class=\"wpforms-field-large wpforms-field-required\" name=\"wpforms[fields][3]\" placeholder=\"Your Email\" spellcheck=\"false\" required><\/div><div id=\"wpforms-764-field_4-container\" class=\"wpforms-field wpforms-field-text\" data-field-id=\"4\"><label class=\"wpforms-field-label wpforms-label-hide\" for=\"wpforms-764-field_4\">Subject<\/label><input type=\"text\" id=\"wpforms-764-field_4\" class=\"wpforms-field-large\" name=\"wpforms[fields][4]\" placeholder=\"Subject\" ><\/div><div id=\"wpforms-764-field_2-container\" class=\"wpforms-field wpforms-field-textarea\" data-field-id=\"2\"><label class=\"wpforms-field-label wpforms-label-hide\" for=\"wpforms-764-field_2\">Message <span class=\"wpforms-required-label\">*<\/span><\/label><textarea id=\"wpforms-764-field_2\" class=\"wpforms-field-medium wpforms-field-required\" name=\"wpforms[fields][2]\" placeholder=\"Your Message\" required><\/textarea><\/div><\/div><!-- .wpforms-field-container --><div class=\"wpforms-submit-container\" ><input type=\"hidden\" name=\"wpforms[id]\" value=\"764\"><input type=\"hidden\" name=\"page_title\" value=\"\"><input type=\"hidden\" name=\"page_url\" value=\"https:\/\/ahassan.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/pages\/1551\"><input type=\"hidden\" name=\"url_referer\" value=\"\"><button type=\"submit\" name=\"wpforms[submit]\" id=\"wpforms-submit-764\" class=\"wpforms-submit\" data-alt-text=\"Sending...\" data-submit-text=\"Send message\" aria-live=\"assertive\" value=\"wpforms-submit\">Send message<\/button><\/div><\/form><\/div>  <!-- .wpforms-container -->\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. Justificaci\u00f3 del Disseny (Branding i Usabilitat) Identitat de Marca (Branding) La marca d&#8217;una LAN Party ha de transmetre energia, tecnologia i comunitat. L&#8217;elecci\u00f3 de colors foscos combinats amb accents ne\u00f3 no \u00e9s nom\u00e9s una q\u00fcesti\u00f3 est\u00e8tica, sin\u00f3 una declaraci\u00f3 d&#8217;intencions: Usabilitat en Entorns de Poca Llum El context d&#8217;\u00fas [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1381,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1551","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ahassan.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/pages\/1551","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ahassan.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ahassan.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ahassan.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ahassan.inscastellbisbal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1551"}],"version-history":[{"count":2,"href":"https:\/\/ahassan.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/pages\/1551\/revisions"}],"predecessor-version":[{"id":1554,"href":"https:\/\/ahassan.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/pages\/1551\/revisions\/1554"}],"up":[{"embeddable":true,"href":"https:\/\/ahassan.inscastellbisbal.net\/index.php?rest_route=\/wp\/v2\/pages\/1381"}],"wp:attachment":[{"href":"https:\/\/ahassan.inscastellbisbal.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}