/* ========================================================================== arteba — identidad 2026 · convocatoria (portal de galeristas + backoffice) ========================================================================== Paleta: fondo #000000 · texto #FFFFFF · acento lima #CAFF00. Tipografías: SF Pro Display Bold (títulos y botones), SF Pro Text (cuerpos). Sobre lima el texto va SIEMPRE en negro: blanco sobre lima da 1.19:1 de contraste (ilegible), negro da 16.6:1. -------------------------------------------------------------------------- ALCANCE (decisión del 12/08/2026, acordada con el cliente) -------------------------------------------------------------------------- Esta hoja aplica la identidad donde efectivamente se ve: · pantallas de auth (login, signup, recupero, reset, legales) — negro pleno · chrome del portal: barra superior, logo, footer — negro · botones y acentos — lima · tipografía — SF Pro en todo El SIDEBAR y el ÁREA DE CONTENIDO del backoffice quedan claros a propósito. Pasar los 43.900 renglones del tema admin a oscuro es otro orden de magnitud (cientos de pantallas, tablas, formularios y filtros que las galerías usan a diario) y no se puede QA-ear el mismo día. Si algún día se hace, va aparte. -------------------------------------------------------------------------- POR QUÉ ES UNA HOJA NUEVA Y NO UN PARCHE SOBRE style.css -------------------------------------------------------------------------- `public/css/style.css` son 1.022.198 bytes mantenidos a mano: el build NO funciona (Mix sólo compila los stubs de Laravel, no hay node_modules, y el SCSS de public/scss/ ya divergió 11 KB del CSS servido). Además se sirve desde S3, donde pisar un archivo es instantáneamente público y sin rollback. Una hoja aditiva se sube antes, se linkea después, y se revierte sacando el link. NO recompilar el SCSS. NO editar style.css. -------------------------------------------------------------------------- TRAMPAS DE INFRAESTRUCTURA -------------------------------------------------------------------------- · ASSET_URL=https://assets.arteba.org/admin → todo asset() sale de S3. Editar public/css/ y subir por SCP a la EC2 NO cambia nada en producción. · Adelante de S3 hay CloudFront y Cloudflare. CloudFront ignora el query string y el rol IAM de la EC2 no puede invalidar. Por eso el versionado va EN EL NOMBRE DEL ARCHIVO: para cambiar esto, subir `-v2` y bumpear las dos referencias (config/dz.php y layout/fullwidth.blade.php). · Las fuentes son cross-origin y @font-face exige Access-Control-Allow-Origin. La PRIMERA request al CDN es la que queda cacheada: después de subirlas, cebarlas con `curl -H "Origin: https://convocatoria.arteba.org"`. -------------------------------------------------------------------------- NO AGREGAR REGLAS DE font-family PARA strong / b / em / i -------------------------------------------------------------------------- Con los cuatro cortes de "SF Pro Text" declarados abajo, el navegador elige solo el archivo correcto para negrita y cursiva. Un selector `i {}` además le ganaría en especificidad (0,1,2) a `.fas` de FontAwesome (0,1,0) y rompería TODOS los iconos: en esta app los iconos son elementos y (auth/login.blade.php:59, elements/sidebar.blade.php:15,22,29, y decenas más). ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tipografías -------------------------------------------------------------------------- */ @font-face { font-family: "SF Pro Display"; src: url(../fonts/SFProDisplay-Bold-v2.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "SF Pro Text"; src: url(../fonts/SFProText-Regular-v2.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "SF Pro Text"; src: url(../fonts/SFProText-Bold-v1.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "SF Pro Text"; src: url(../fonts/SFProText-Italic-v1.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "SF Pro Text"; src: url(../fonts/SFProText-BoldItalic-v1.woff2) format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } /* -------------------------------------------------------------------------- 2. Aplicación de la tipografía -------------------------------------------------------------------------- style.css:306-315 declara `font-family: "Roboto", sans-serif` en body, pero Roboto NUNCA SE CARGA: no hay @font-face ni link a Google Fonts en ninguno de los dos layouts. O sea que hoy el portal se ve con la sans-serif del sistema operativo. Poner SF Pro es una mejora limpia, no un reemplazo. El doble selector con [data-typography] no es decorativo: public/js/deznav-init.js:7-19 escribe data-typography="poppins" en el DOM en runtime, y style.css:33531-33545 tiene reglas [data-typography="poppins"] (0,1,0) que le ganarían a un `body` pelado (0,0,1). Poppins tampoco se carga nunca, pero la regla existe. -------------------------------------------------------------------------- */ body, body[data-typography="poppins"], [data-typography="poppins"], [data-typography="poppins"] body { font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; } h1, h2, h3, h4, h5, h6, .btn, .nav-text { font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { font-weight: 700; } /* Acá NO van reglas de strong / b / em / i. Ver el encabezado del archivo. */ /* -------------------------------------------------------------------------- 3. Acentos de marca -------------------------------------------------------------------------- style.css:6947 tiene `.bg-primary { background-color: #1b1d1f !important }`, así que hay que responder con !important. OJO con los botones de auth: son `class="btn bg-primary text-white"`, NO `.btn-primary`. `.text-white` también trae !important, por eso el texto negro se fuerza con `.btn.bg-primary` (0,2,0) que le gana a `.text-white` (0,1,0). -------------------------------------------------------------------------- */ .bg-primary { background-color: #CAFF00 !important; color: #000000 !important; } .btn.bg-primary, .btn.bg-primary:hover, .btn.bg-primary:focus, .btn.bg-primary:active { color: #000000 !important; } a.bg-primary:hover, a.bg-primary:focus, button.bg-primary:hover, button.bg-primary:focus { background-color: #b5e600 !important; } /* style.css:3061 / :3066 / :38772 */ .btn-primary { background-color: #CAFF00; border-color: #CAFF00; color: #000000; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active { background-color: #b5e600; border-color: #b5e600; color: #000000; } /* -------------------------------------------------------------------------- 4. Chrome del portal (layout.default): barra superior, logo, footer -------------------------------------------------------------------------- */ /* style.css:12619-12633 */ .nav-header { background-color: #000000; } /* El logo viejo (arteba_logo_web.png) medía 138x37 y el tope de 100px le venía bien. El nuevo es 1838x467 (misma proporción, ~3.94:1): a 140px de ancho da ~36px de alto, o sea igual de alto que antes pero nítido en retina. */ .nav-header .logo-abbr { max-width: 140px; } /* style.css:12848-12857 */ .header { background-color: #000000; } /* El icono de campana (elements/header.blade.php:17) trae fill="#3E4954" como atributo de presentación, invisible sobre negro. El selector va por atributo exacto para no tocar los iconos que usan stroke="currentColor" (ej. logout). La propiedad CSS `fill` le gana al atributo de presentación. */ .header svg path[fill="#3E4954"] { fill: #ffffff; } /* El toggler del sidebar: tres que sobre la barra negra quedaban prácticamente invisibles. OJO CON LA ESPECIFICIDAD. No alcanza con `.hamburger .line` (0,2,0) aunque lleve !important, porque style.css:25269 tiene [data-headerbg="color_1"] .nav-header .hamburger .line { background: #1b1d1f !important } que es (0,4,0) + !important — y ese atributo lo escribe public/js/deznav-init.js en runtime (headerBg: "color_1"), así que en el HTML servido no se ve. Por eso acá se sube a (0,5,0) metiendo .nav-control, y se usa el shorthand `background` para pisar el shorthand del otro lado. */ [data-headerbg] .nav-header .nav-control .hamburger .line, [data-headerbg] .nav-header .nav-control .hamburger.is-active .line, .nav-header .nav-control .hamburger .line, .nav-header .nav-control .hamburger.is-active .line { background: #ffffff !important; } /* El saludo "Hola, " usa la utility .text-black (elements/header.blade.php:39): negro sobre negro. Se fuerza blanco pero SOLO dentro de .header, para no tocar .text-black en el resto del sitio (el área de contenido sigue siendo clara). */ .header .header-info span, .header .header-info strong, .header .text-black { color: #ffffff !important; } /* OJO: el "Salir" del dropdown NO se toca. Vive en .dropdown-menu, que tiene fondo claro, así que su gris #7e7e7e ahí se lee bien. */ /* style.css:12578-12601 */ .footer { background-color: #000000; } .footer .copyright, .footer .copyright p { color: #ffffff; } .footer .copyright a { color: #CAFF00; } /* -------------------------------------------------------------------------- 5. Pantallas de auth (layout.fullwidth, body.rebrand-auth) -------------------------------------------------------------------------- La clase rebrand-auth no es un feature flag: convocatoria no tiene toggle. Sólo separa las pantallas de auth (negro pleno) del backoffice (que queda claro). Se agrega en resources/views/layout/fullwidth.blade.php:36. Los seis .authincation-content traían `style="background-color: #f9f9f9"` inline. Se sacaron de los Blade en vez de pisarlos con !important: los Blade se deployan por SCP sin cache de CDN, así que la edición es determinística y elimina el conflicto en lugar de gritar más fuerte. -------------------------------------------------------------------------- */ body.rebrand-auth { background-color: #000000; color: #ffffff; } /* style.css:42770 */ body.rebrand-auth .authincation-content { background-color: #000000; border: 1px solid #2a2a2a; box-shadow: none; } /* style.css:11281 — .text-primary trae !important y lo usan los títulos y todos los