/* ═══════════════════════════════════════════════════════════════════════════ PRIMITIVAS DE MARCA — VITTA Cars · Concesionarios Chevrolet del Grupo Vitta ═══════════════════════════════════════════════════════════════════════════ La escuela de `vittaretail.com/cars`. Este archivo, y sólo este, es lo que hace que la plataforma se vea Chevrolet: la semántica, los estados, los mínimos de contraste y la geometría siguen siendo del producto y no se tocan desde acá. Es la frontera funcionando. ┌─ LA PALETA OFICIAL, del brandbook de Chevrolet ──────────────────────────┐ │ Nombre oficial │ Pantone │ HEX │ │ CHEVROLET FNR BLUE │ 280 │ #013C9E │ │ CHEVROLET FNR GOLD │ 124 │ #F4BC00 │ │ CHEVROLET FNR DARK GRAY │ Cool Gray 11 │ #414042 │ │ CHEVROLET FNR LIGHT GRAY │ Cool Gray 9 │ #808285 │ │ WHITE │ — │ #FFFFFF │ ⚠️ INCONSISTENCIA DEL PROPIO DOCUMENTO, anotada para que nadie la vuelva a descubrir: los RGB y los HEX del brandbook NO COINCIDEN. El dorado dice RGB 225/179/52 pero HEX #F4BC00; el azul dice RGB 48/68/151 pero HEX #013C9E. Acá rigen LOS HEX, que son los que el documento especifica para digital. Si alguna vez hay que resolverlo de verdad, lo resuelve Chevrolet, no nosotros. └──────────────────────────────────────────────────────────────────────────┘ ┌─ LA REGLA QUE MANDA: la paleta es deliberadamente chica ─────────────────┐ El brandbook lo dice con todas las letras: «an intentionally small palette of colors has been created… To enhance the limited color palette, rich photography and accompanying graphics will add personality». O sea: la personalidad la pone la FOTOGRAFÍA, no más colores. Por eso acá no hay una gama de azules ni una familia de dorados. Lo que sí hay, y está dicho en cada caso, son TONOS del mismo azul y NEUTROS. La distinción es la que importa: · Un HUE nuevo (un segundo azul verdoso, un naranja «cálido») sería inventarle colores a la marca. No hay ninguno. · Un TONO —el mismo #013C9E con blanco encima en un porcentaje escrito— es lo que cualquier interfaz necesita para tener una superficie y su segundo tono. Cada uno lleva la fórmula al lado para que se pueda verificar con una calculadora. · Un NEUTRO —una mezcla de #FFFFFF con los dos grises del brandbook, sin saturación— tampoco agrega un color: agrega un paso de gris. Con cinco colores opacos no se dibuja un fondo de página, una tarjeta, un relleno, un filete y un marcador de posición. └──────────────────────────────────────────────────────────────────────────┘ ┌─ ⚠️ EL LOGOTIPO Y LA TIPOGRAFÍA NO ESTÁN ACÁ, Y ES A PROPÓSITO ──────────┐ El brandbook dice «Do not try to recreate the themeline. Always use the artwork provided on GM Asset Central». Así que ni el moño ni el logotipo ni la themeline FIND NEW ROADS se dibujan: se bajan. El hueco está preparado y documentado en `public/img/marca/cars/LEEME.md` (rutas, tamaños y área de aislamiento) y en `public/fonts/louis/LEEME.md` (la familia Louis, que es licenciada). Hasta que lleguen, la pila de respaldo de acá abajo funciona sin ellos. └──────────────────────────────────────────────────────────────────────────┘ ⚠️ Cada número de contraste de este archivo está calculado, no mirado: `php tools/contraste.php` mide los 30 pares en los dos temas para ESTA instalación y para retail por separado. Si algo de acá se mueve por debajo del mínimo, `make guardas` no pasa. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Tipografía ─────────────────────────────────────────────────────────── Louis es la familia de marca de Chevrolet y es LICENCIADA: no viene con este repositorio y no se puede sustituir por una parecida. La pila la nombra primero y cae en las familias que la plataforma ya trae autoalojadas. Mientras los archivos no estén, el navegador salta a la siguiente sin pedir nada y sin un solo 404: la hoja `fuentes-louis.css` —la que declara los `@font-face`— sólo se enlaza cuando los `.woff2` de verdad están en `public/fonts/louis/`. Ver `App\Services\Paleta`. */ --m-tipo-cuerpo: 'Louis', 'Karla', system-ui, sans-serif; --m-tipo-titulo: 'Louis', 'Archivo', sans-serif; --m-tipo-logo: 'Louis', 'Poppins', sans-serif; /* ── La placa del logotipo: BLANCA Y AJUSTADA AL ARTE ───────────────────── * * ⚠️ Tercera y última redacción de este bloque. Las dos anteriores razonaban * sin medir, y por eso se contradicen entre sí: la primera pedía una placa * rectangular con aislamiento (esperaba el moño horizontal de Chevrolet), y * la segunda la quitó del todo (`transparent`) sobre la premisa de que un * emblema que YA ES un círculo con anillo propio no necesita disco debajo. * * La premisa era falsa. `tools/marca-legible.php` la mide desde entonces. * * ── El número ──────────────────────────────────────────────────────────── * * Se mide el PERÍMETRO del arte —cada píxel opaco que toca un píxel * transparente, 2.269 en total—, que es lo que dibuja la silueta. La tinta * del interior no cuenta: se apoya sobre el propio emblema, no sobre la * placa. * * perímetro sobre placa BLANCA media 6,60:1 32,4 % bajo 3:1 * perímetro sobre el azul FNR media 2,95:1 65,4 % bajo 3:1 * * El anillo exterior de este emblema no es sólo cromo: es cromo Y AZUL * OSCURO (#032B6C y vecinos). Sobre `--m-profundo #013C9E` dos tercios del * contorno caen por debajo del umbral de elemento no textual, y el emblema * pasa a ser una mancha a 46 px. La placa blanca duplica ese contraste. * * ── El halo era real, y se cierra con la GEOMETRÍA ──────────────────────── * * También medido: este emblema ocupa el 98,0 % de su lienzo —es un disco de * borde a borde— mientras el logotipo de VITTA ocupa el 82,0 %, o sea una * silueta con su aire ya incluido en el archivo. Un disco de borde a borde * dentro de una placa más grande dibuja DOS circunferencias concéntricas, y * eso es lo que el ojo lee como halo. No es que la placa sobre: es que la * placa no coincide con el arte. * * Por eso los tres tamaños son los de la IMAGEN —46, 76 y 132 px, los mismos * que piden `partials/sidebar.php`, `auth/login.php` y `partials/splash.php` * en los atributos del ``— y no los del producto. Queda 1,3 px de placa * asomando, que es el 2,85 % que al arte le falta para llegar a su borde: el * filo del propio emblema, no un anillo. * * ── Y por eso mismo la sombra vuelve a tener sentido ────────────────────── * * `box-shadow` externa se pinta como si el border-box fuera OPACO —lo dice la * especificación—, así que con la placa en `transparent` las tres reglas * dibujaban un aro oscuro sin disco debajo. Con la placa blanca vuelve a ser * lo que era: la sombra de un disco que existe. * * Ver `.v-brand-mark`, `.v-login-mark` y `.v-splash-disc`. */ --m-marca-tamano: 46px; --m-marca-tamano-ingreso: 76px; --m-marca-tamano-splash: 132px; --m-marca-radio: 50%; --m-marca-aislamiento: 0; --m-marca-placa: #FFFFFF; /* ── La superficie profunda: EL AZUL ────────────────────────────────────── * * DECISIÓN: el sidebar y las tarjetas oscuras van en FNR BLUE, no en el gris * oscuro. El argumento, en orden: * * 1. El azul es el color principal de la marca y el sidebar es la superficie * de marca más grande del producto —está en pantalla el 100 % del tiempo, * en todas las pantallas—. En VITTA ese lugar lo ocupa el verde profundo, * que es la identidad. La frontera traduce ROL POR ROL, no hex por hex. * * 2. El gris oscuro #414042 quedaría bien como superficie, pero entonces el * azul sólo aparecería en acentos y la escuela se vería GRIS, no * Chevrolet. Y la fotografía —que es lo que el brandbook manda usar para * dar personalidad— se apoya mucho mejor sobre azul que sobre grafito. * * 3. Y hay un número que cierra la discusión: el azul sobre el gris oscuro * da 1,05:1. Son dos colores con la MISMA luminancia. Cualquier * combinación que los ponga uno encima del otro es invisible. Eso obliga * a elegir uno de los dos como superficie y a resolver el segundo tono * por otro lado. * * Blanco encima: 9,81:1. Sobra para texto normal. * * EL SEGUNDO TONO, que es la parte delicada. `--m-profundo-2` pinta tres * cosas: el fondo del menú activo, la cola del degradado de las tarjetas y la * pista de la barra del splash. La marca trae UN azul, así que había dos * salidas: * * · El gris oscuro del brandbook → 1,05:1 contra el azul. El menú activo, * que es la única señal de dónde estás parado, DESAPARECE. Descartado por * medición, no por gusto. * · El mismo azul con blanco encima al 16 % → 1,50:1. Es un tono, no un * color nuevo, y la fórmula está escrita para que se pueda verificar. * * Se eligió lo segundo. Blanco encima del segundo tono: 6,55:1. */ --m-profundo: #013C9E; /* FNR BLUE, sin tocar, en los dos temas */ --m-profundo-2: #2A5BAE; /* = #013C9E + blanco 16 % · 1,50:1 sobre el azul */ --m-linea-profunda: #436FB7; /* = #013C9E + blanco 26 % · separadores y pistas */ --m-sobre-profundo: #FFFFFF; /* 9,81:1 sobre el azul */ --m-sobre-profundo-suave: #C7D4EA; /* = #013C9E + blanco 78 % · 6,55:1 */ /* Los enlaces del menú y el cargo del pie del sidebar. VITTA usa acá su gris de apoyo y da 3,81:1 —está reportado en `DESCUBIERTOS`—. Este llega a 5,37:1 porque es un tono del propio azul y no un gris prestado del papel. */ --m-apagado-profundo: #AEC1E0; /* = #013C9E + blanco 68 % · 5,37:1 */ /* ── El acento ──────────────────────────────────────────────────────────── * * También el azul: la marca tiene uno solo y este es el rol que le * corresponde. Botones, enlaces, foco, disco de iniciales. * * ⚠️ EN OSCURO EL AZUL NO SIRVE, y es exactamente el riesgo que había que * verificar: una paleta pensada para impresión y para web clara puede quedar * ilegible al invertirse. #013C9E sobre la superficie oscura da 1,73:1, y el * borde de un campo con foco necesita 3:1. Un anillo de foco invisible no es * un detalle estético: es la persona que navega con teclado que deja de saber * dónde está. * * La salida NO es cambiarle el azul a Chevrolet: es el mismo azul aclarado * para el tema oscuro, con la fórmula escrita. Y hay que quedarse dentro de * una ventana angosta: bastante claro para dar 3:1 contra la superficie * oscura (3,60:1) y bastante oscuro para sostener texto blanco encima * (4,74:1). Un paso más en cualquier dirección rompe uno de los dos. * * De paso, el azul PASA un par que VITTA tiene tolerado desde siempre: texto * blanco sobre el acento da 9,81:1 en claro, contra 3,31:1 del verde. */ --m-acento: light-dark(#013C9E, #4873B9); /* oscuro = azul + blanco 28 % */ --m-acento-fuerte: light-dark(#013C9E, #2F5FAF); /* oscuro = azul + blanco 18 % */ /* Hover de enlace. NO es un segundo azul: es el gris oscuro del brandbook en claro y el gris claro en oscuro. El enlace se mueve del azul al neutro de la marca, que es la única familia que Chevrolet da además del azul. */ --m-acento-hover: light-dark(#414042, #808285); /* ── DÓNDE VA EL DORADO ─────────────────────────────────────────────────── * * El dorado #F4BC00 sobre blanco da 1,74:1. No es una preferencia: es * ilegible, y la guarda lo rechaza. Así que NO es color de texto sobre papel * claro, nunca. * * Donde sí rinde, y es donde está puesto: * * · SOBRE EL AZUL. Dorado sobre FNR Blue da 5,62:1 —pasa texto normal—. Es * el par de marca por excelencia y es lo que hace que el sidebar se lea * Chevrolet y no «una aplicación azul». * · COMO SUPERFICIE con tinta oscura encima. El gris oscuro sobre el dorado * da 5,91:1. * · COMO ACENTO GRÁFICO Y BARRA DE PROGRESO. El relleno de la barra de * nivel, el arco del splash, el filete del menú activo: piezas macizas * sobre el azul, sin texto encima. * · COMO TINTE CLARÍSIMO en el realce de la fila propia (ver `--m-realce`). * * Por eso el acento SOBRE la superficie profunda es dorado y no azul: azul * sobre azul da 1,00:1 y el filete del menú activo se borra. Este es el token * que existe justamente para eso. */ --m-acento-profundo: #F4BC00; /* FNR GOLD · 5,62:1 sobre el azul */ --m-sobre-acento-profundo: #414042; /* FNR DARK GRAY · 5,91:1 sobre el dorado */ /* La chispa del logotipo: el subtítulo del sidebar, la barra del splash y el arco alrededor del disco. En VITTA es el verde lima; acá es el dorado, y siempre cae sobre el azul. */ --m-chispa: #F4BC00; /* ── Tinta ──────────────────────────────────────────────────────────────── El gris oscuro del brandbook es la tinta: 10,31:1 sobre blanco. Los pasos intermedios son mezclas suyas con blanco, sin saturación — no son colores nuevos, son grises. ⚠️ El gris claro #808285 NO alcanza para texto: da 3,85:1 sobre blanco y el mínimo es 4,5:1. Por eso el apoyo es una mezcla al 78 % (4,93:1 sobre el fondo) y el gris claro se queda donde 3:1 alcanza: filetes y marcadores de posición. */ --m-tinta: light-dark(#414042, #F2F3F3); /* FNR DARK GRAY · 10,31:1 sobre blanco */ --m-tinta-2: light-dark(#5E5D5E, #C6C7C8); /* = gris oscuro + blanco 15 % · 6,56:1 */ --m-apagado: light-dark(#6B6A6C, #A4A5A7); /* = gris oscuro + blanco 22 % · 4,93:1 sobre el fondo */ --m-apagado-2: #808285; /* FNR LIGHT GRAY · 3,31:1 sobre el relleno */ /* ── Superficies claras ─────────────────────────────────────────────────── Blanco y neutros. Los claros son mezclas del gris claro sobre blanco; los oscuros, del gris oscuro sobre negro. Ninguna agrega saturación. ⚠️ EL FILETE ES EL GRIS CLARO DEL BRANDBOOK, SIN MEZCLAR, y no se remapea: 3,85:1 sobre blanco y 4,42:1 sobre la superficie oscura. Es más pesado que el filete de VITTA a propósito: el de VITTA da 1,26:1 y es la deuda que su propia guarda llama «la más seria», porque el borde de un campo es lo que dice dónde empieza el campo. Esta instalación no la hereda. */ --m-fondo: light-dark(#F5F5F5, #141314); /* gris claro 8 % / gris oscuro 30 % sobre negro */ --m-superficie: light-dark(#FFFFFF, #1D1C1D); --m-borde: #808285; /* FNR LIGHT GRAY · 3,85:1 y 4,42:1 */ --m-relleno: light-dark(#EDEEEE, #2A292A); --m-relleno-2: light-dark(#F0F0F0, #2E2D2E); /* Casilla marcada y realce suave: un tinte del azul al 6 %. Tinta encima, 9,28:1. */ --m-relleno-3: light-dark(#F0F3F9, #132749); /* La fila propia del ranking, la lección activa y la etiqueta «Nuevo». Acá va el DORADO como superficie, al 18 % sobre blanco: es el lugar donde el dorado se ve todos los días sin poner en riesgo una sola letra. Tinta encima, 9,29:1. */ --m-realce: light-dark(#FDF3D1, #483C17); /* ── Efectos teñidos por la marca ───────────────────────────────────────── El halo del foco lleva el azul con opacidad, y en oscuro el azul aclarado: un halo azul marino sobre una pantalla casi negra no se ve. */ /* Los canales del color profundo, para los velos. * * ⚠️ Va como CANALES sueltos y no como color: un velo necesita `rgba()` con * una opacidad distinta en cada parada del degradado, y no se puede sacar la * opacidad de un color ya armado. Con los canales, el producto escribe * `rgba(var(--m-profundo-canales), .55)` y la marca sigue siendo la que * decide QUÉ color es. * * Sin esto había siete velos con el verde de VITTA escrito a mano: en Cars * salían verdes sobre una plataforma azul. */ --m-profundo-canales: 1, 45, 120; /* el azul FNR llevado a profundidad */ --m-halo: light-dark(rgba(1, 60, 158, .22), rgba(72, 115, 185, .35)); --m-halo-latido: light-dark(rgba(1, 60, 158, .38), rgba(72, 115, 185, .45)); --m-sombra-media: light-dark(rgba(1, 60, 158, .12), rgba(0, 0, 0, .45)); --m-barra: light-dark(#C8C9CB, #3A393A); /* ── Papel ──────────────────────────────────────────────────────────────── El diploma, el marco de la cápsula SCORM y el botón claro sobre fondo oscuro fijo. La rama clara, clavada. ⚠️ El diploma en PDF NO pasa por acá: `app/Views/pdf/diploma.php` lleva sus colores literales porque lo dibuja Dompdf, que no resuelve `var()`. Sigue saliendo con la paleta de VITTA. Está anotado en el informe como pendiente, y es el archivo que sale de la plataforma con la marca puesta. */ --m-papel-superficie: #FFFFFF; --m-papel-fondo: #F5F5F5; --m-papel-tinta: #414042; --m-papel-tinta-2: #5E5D5E; --m-papel-apagado: #6B6A6C; --m-papel-borde: #808285; --m-papel-profundo: #013C9E; }