/**---------------------------------------------------------------------------- brand.css — Keisy Sustituye a la hoja heredada de Carritus. Contiene lo que identity.css NO puede llevar, porque el editor de temas del backoffice solo conserva tokens de su vocabulario y descarta el resto: - los @font-face (Roboto) - los tokens que el editor no reconoce - reglas apuntando a clases concretas (footer) Cascada: @layer libraries -> component -> core -> brand -> identity identity.css gana siempre porque emite !important. Aquí NO se usa !important salvo donde se documenta explícitamente que hace falta (casos en los que se compite contra CSS del framework SIN @layer, que gana a cualquier capa con nombre sin importar la especificidad — ver los bloques del buscador, categorías, checkout y grid más abajo). Fuentes servidas desde el propio CDN de esta marca/entorno: https://cdn-{brand}{env}.aktiosdigitalservices.com/tol/shop-front/fonts/roboto/ (las URLs de @font-face son relativas a este fichero, así que resuelven solas al entorno correcto — no hay que tocarlas al copiar este fichero de pre a int o viceversa). Este fichero se ha desarrollado en paralelo en pre e int (distintos hallazgos en cada uno) y se ha fusionado a mano para tener lo mejor de los dos: - pre aportó: checkout (TOLKEISY-23) y el bug de grid en mobile (TOLKEISY-22). - int aportó: el fix fino del buscador del header (vía token acotado en vez de pelear la cascada) y el reordenado del header en mobile. Mantener sincronizados ambos entornos a partir de este fichero fusionado. ----------------------------------------------------------------------------**/ /* -------------------------------------------------------------------------- Fuentes — Roboto Una familia por peso, que es el convenio del framework: los tokens --tol-font-* guardan nombres de familia, no pesos. woff2 va primero a propósito: el navegador coge el primer formato que soporta, y las hojas de las otras marcas ponen woff delante, así que se descargan el fichero grande sin necesidad. -------------------------------------------------------------------------- */ @font-face { font-family: roboto; src: url("../fonts/roboto/Roboto-Regular.woff2") format("woff2"), url("../fonts/roboto/Roboto-Regular.woff") format("woff"), url("../fonts/roboto/Roboto-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: roboto-medium; src: url("../fonts/roboto/Roboto-Medium.woff2") format("woff2"), url("../fonts/roboto/Roboto-Medium.woff") format("woff"), url("../fonts/roboto/Roboto-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: roboto-bold; src: url("../fonts/roboto/Roboto-Bold.woff2") format("woff2"), url("../fonts/roboto/Roboto-Bold.woff") format("woff"), url("../fonts/roboto/Roboto-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: roboto-italic; src: url("../fonts/roboto/Roboto-Italic.woff2") format("woff2"), url("../fonts/roboto/Roboto-Italic.woff") format("woff"), url("../fonts/roboto/Roboto-Italic.ttf") format("truetype"); font-weight: normal; font-style: italic; font-display: swap; } @font-face { font-family: roboto-bolditalic; src: url("../fonts/roboto/Roboto-BoldItalic.woff2") format("woff2"), url("../fonts/roboto/Roboto-BoldItalic.woff") format("woff"), url("../fonts/roboto/Roboto-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: roboto-light; src: url("../fonts/roboto/Roboto-Light.woff2") format("woff2"), url("../fonts/roboto/Roboto-Light.woff") format("woff"), url("../fonts/roboto/Roboto-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: roboto-lightitalic; src: url("../fonts/roboto/Roboto-LightItalic.woff2") format("woff2"), url("../fonts/roboto/Roboto-LightItalic.woff") format("woff"), url("../fonts/roboto/Roboto-LightItalic.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; } @layer brand { :root { /* ---------------------------------------------------------------------- Tipografía El diseño usa SemiBold 600 en todos los títulos y Roboto no trae ese peso. Consum lo mapea a roboto-bold (700), que pinta más grueso que el Figma. Aquí va a roboto-medium (500), que se queda algo por debajo pero más cerca. Si lo ves flojo, cambia esta línea a roboto-bold. ---------------------------------------------------------------------- */ --tol-font-primary: roboto; --tol-font-semibold: roboto-medium; --tol-font-bold: roboto-bold; --tol-font-italic: roboto-italic; --tol-font-bolditalic: roboto-bolditalic; --tol-font-light: roboto-light; --tol-font-lightitalic: roboto-lightitalic; /* ---------------------------------------------------------------------- Tokens que el editor de identity.css descarta Sin estos quedan azules de Carritus sueltos: el borde de los inputs con foco, los anillos de foco al navegar con teclado y los checkbox deshabilitados. ---------------------------------------------------------------------- */ --tol-color-body-text: #262626; /* [figma] Basic/Black */ --tol-color-form-focus-border: #4d8ab5; /* [derivado] tinte del primario */ --tol-color-focus-ring: rgb(0 73 130 / 25%); /* [derivado] */ --tol-color-focus-ring-strong: rgb(0 73 130 / 50%); /* [derivado] */ --tol-color-checkbox-disabled: rgb(0 73 130 / 50%); /* [derivado] */ /* ---------------------------------------------------------------------- Barra de categorías — color del texto El editor de temas emitió --tol-header-categories-bar-text-color y --tol-header-categories-bar-bg-color, pero esa familia de tokens NO la consume ningún selector del bundle: solo se declara en :root. Los que lee el componente son los de la familia SIN prefijo "header-": .categories-bar-component__link -> color: var(--tol-categories-bar-text-color) .categories-bar-component, .categories-bar-component .nav-links -> background-color: var(--tol-categories-bar-bg-color) Ambos caen por defecto en var(--tol-color-white) y var(--tol-color-primary), así que los enlaces salían BLANCOS sobre el fondo #f9f9f9 del diseño: texto invisible. identity.css ya fija bien el hover (--tol-categories-bar-text-hover-color: #004982) y el activo (--tol-categories-bar-active-bg-color: #f0f0f0); faltaban estos dos. El fondo se declara además aquí para que el token quede coherente con lo que se pinta: sin esto, .nav-links sigue resolviendo a #004982. OJO con el !important, que rompe la norma general del fichero: el :root del bundle que define estos dos tokens va SIN @layer, y una declaración sin capa gana a cualquier capa. Sin !important esto se quedaría por debajo del default del framework. No pelea con identity.css: esa hoja fija --tol-header-categories-bar-* (el nombre equivocado, muerto), nunca estos dos, así que no hay conflicto de intención entre ambos ficheros. Medido en el frame de desktop: barra #f9f9f9, texto #262626. ---------------------------------------------------------------------- */ --tol-categories-bar-text-color: #262626 !important; /* [figma] Basic/Black */ --tol-categories-bar-bg-color: #f9f9f9 !important; /* [figma] fondo de la barra */ } /* ------------------------------------------------------------------------ Header, barra 1 (support) — degradado El componente aplica el token como `background-color`, que no acepta gradientes, así que el degradado va aquí encima como background-image. Mismo patrón que usa BM en su barra de categorías. Se apunta a .header__support--container y NO a [data-bar-position='1'] a propósito. El componente numera las posiciones en tiempo de ejecución ([attr.data-bar-position]="$index + 1") DESPUÉS de filtrar las barras que se quedan sin bloques en ese breakpoint, así que la posición 1 puede dejar de ser la barra de support y el degradado acabaría en la barra equivocada. La clase sale del id de la barra en la config ([ngClass]="'header__' + blocks.id + '--container'") y no se mueve. Medido: horizontal, #ff6901 (izq) -> #ffc103 (der) en desktop; en mobile #ff6201 -> #ffc404, que es el mismo degradado con los stops repartidos en 360px en vez de 1920. ------------------------------------------------------------------------ */ .header__support--container { background-image: linear-gradient(to right, #ff6901, #ffc103); } /* ------------------------------------------------------------------------ Header, buscador de la barra main La barra es un flex row y los bloques se reparten con flex. Sin ninguna regla el buscador se queda a su ancho natural y parece un icono, que es lo que pasó al quitar la hoja de Carritus: ella lo estiraba con `flex-grow: 7` sobre este mismo selector. Medido en el frame de desktop (1920px): el campo ocupa 577px de ancho y 48px de alto, con forma de pastilla y borde fino oscuro. El contenido del header vive en el contenedor de 1582px (--tol-max-width): el logo arranca en x=168 y (1920-1582)/2 = 169. Por qué "más especificidad" tampoco bastaba: _header.scss del framework no declara @layer, así que su `.header .header__main .header__main--searcher { flex-grow: 1 }` cae en la capa implícita final (todo lo no-layered), que en la cascada de @layer SIEMPRE gana a cualquier regla dentro de un layer con nombre (aquí, @layer brand) sin importar cuánta especificidad tenga esta — el orden de capas manda antes que la especificidad. Igualar el selector no cambiaba nada. El caso real es como el borde/radio del searcher--container de más abajo: hace falta !important para que un layer con nombre le gane a CSS sin layer, exactamente igual que hace identity.css con los tokens. */ @media (min-width: 768px) { .header .header__main .header__main--searcher { flex-grow: 7 !important; flex-basis: 0 !important; } } /* El componente searcher pinta el contenedor así: min-height: var(--tol-space-48); -> 48px, ya coincide border-radius: var(--tol-border-radius-md); -> 8px, el diseño quiere pastilla border: 1px solid var(--tol-color-gray4); -> gris claro, el diseño oscuro Su scss NO declara @layer, así que va sin capa y en la cascada le gana a este @layer brand cuando competimos por la misma propiedad: por eso una regla con `border-radius` aquí no hacía nada. La forma que funciona, y que documenta el propio framework, es sobrescribir los TOKENS acotados al componente: las custom properties se resuelven en el elemento y heredan, así que esto gana siempre sin pelear especificidad ni capas, y solo afecta al buscador del header. BUG encontrado y corregido (2026-08-27): esta reescritura del truco de tokens se llevó por delante el `flex-grow: 1` que sí tenía la versión anterior (más simple) de esta regla. Sin él, .searcher--container es un flex item con flex-grow:0 por defecto: no crece para ocupar el hueco que su padre .header__main--searcher SÍ ha ganado con flex-grow:7 más arriba, y se queda al ancho de su contenido (~196px) en vez de estirarse hasta el max-width de 577px. Verificado en vivo: sin flex-grow, ancho real 196px; con flex-grow:1, 368px (llena el slot; para llegar a los 577px de tope haría falta además que algún hermano del header cediera ancho — el bloque de "entrega/franjas" ocupa hoy 518+209px). Confirmado que PRE nunca tuvo este bug: su regla, más simple, ya incluía flex-grow. */ .header__main--searcher .searcher--container { --tol-border-radius-md: var(--tol-border-radius-pill); --tol-color-gray4: #3f3f3f; /* [medido] borde del campo */ flex: 1 1 auto !important; /* [corrección] sin esto no crece, ver arriba */ max-width: 36.0625rem; /* 577px [medido] */ } /* ------------------------------------------------------------------------ Header, orden de la fila `main` en movil El componente pinta los bloques en el orden de la lista de contentBlocks, y esa lista es una sola para todos los breakpoints. En desktop el orden que hace falta es logo · Menú · buscador · … · user · carrito, que es el que hay. En movil el diseño quiere: hamburguesa · usuario · logo · carrito y por config saldría logo · usuario · carrito · hamburguesa. Como la barra es un flex row, se reordena visualmente con `order` sin tocar el DOM. Los id/clase los genera el propio componente: id = 'header__' + + '--' + ------------------------------------------------------------------------ */ @media (max-width: 767px) { .header__main--menu-button { order: 1; } .header__main--user { order: 2; } .header__main--logo { order: 3; } .header__main--cart { order: 4; } } /* ------------------------------------------------------------------------ Footer El framework lo pinta con var(--tol-color-primary), así que con el azul de marca saldría #004982. El diseño lo pide más oscuro. ------------------------------------------------------------------------ */ .footer_statics-component { background-color: #001f37; /* [muestra] del frame de desktop */ } /* ------------------------------------------------------------------------ Checkout (TOLKEISY-23) — dos colores hardcodeados fuera de paleta Verificado en el bundle (styles-ECWXSJXC.css): estos dos NO son alias de ningún --tol-color-*, son valores literales del framework (herencia de Carritus) que no pertenecen a la paleta de keisy. El resto del checkout (fondos, botón "activo" del stepper, texto) ya hereda bien porque usa los mismos tokens genéricos que identity.css ya fija. Detalle completo y capturas en scratchpad/tickets/TOLKEISY-23/ (sesión de pre; no repetido en int, pero son tokens globales del bundle — el mismo framework, mismo bug de origen). ------------------------------------------------------------------------ */ :root { /* Borde del círculo activo del stepper (1-2-3 del checkout). Antes #565466 (gris violáceo de Carritus). */ --tol-color-form-steps-border-active-step: var(--tol-color-primary) !important; /* Separador entre pasos / paso futuro del stepper. Antes resolvía a --tol-color-gray4 (framework, no fijado por identity.css) en vez del --tol-color-gray1 (#cccccc) que usa el resto del sitio para separadores. */ --tol-color-form-steps-bg-next-step: var(--tol-color-gray1) !important; /* Borde del footer del panel de envío/recogida. Mismo motivo que el anterior: alinea con --tol-color-gray1 en vez del gray4 sin fijar. */ --tol-shipping-panel-footer-border-color: var(--tol-color-gray1) !important; /* Fondo de la descripción del producto-regalo en el carrito. Antes #e8f0fe (azul claro tipo Google/Carritus, ajeno a la paleta keisy). Se sustituye por el tinte de marca que ya usa --tol-color-bg-primary. */ --tol-color-bg-cart-gift-description: var(--tol-color-bg-primary) !important; } /* ------------------------------------------------------------------------ Grid (TOLKEISY-22) — la rejilla de 2 columnas desborda el viewport en mobile Medido en vivo en pre, /es/c/el-mercat/2 (zona K10-T, 390px): cada tarjeta .grid__widget--prod computa 218px de ancho SIN min-width (auto = su min-content), así que 2 columnas dan 436px contra un contenedor de 390px — la 2ª columna de cada fila queda cortada sin scroll horizontal. Fix estándar de CSS Grid: forzar min-width:0 para que la tarjeta respete el 1fr de la columna en vez de su min-content. No es un valor de marca, es un parche a un bug de plantilla — mismo framework en int, mismo bug esperado. Pendiente de verificación visual en int tras desplegar: si el nombre del producto no hace wrap y desborda, añadir overflow-wrap:anywhere en .widget-product__name. ------------------------------------------------------------------------ */ @media (max-width: 767px) { .grid__widget--prod { min-width: 0 !important; } } } /* -------------------------------------------------------------------------- PENDIENTE 1. Newsletter. No es un componente del framework, es contenido del CMS, así que sus clases las decides tú al montarlo. El fondo es un degradado vertical #ffc103 -> #ff8300 [muestra], con el texto en #262626, input blanco y botón en el azul de marca. 2. PDP (TOLKEISY-21): revisada a fondo en pre, nada que fijar todavía. La ficha no tiene vocabulario de tokens propio (--tol-product-*/--tol-pdp-* no existen) — hereda bien todo lo que ya está fijado arriba. Lo único pendiente real es una decisión de diseño (color del precio, negro puro vs. #262626) sin Figma para decidirla. 3. Grid y Checkout: colores/radios de tarjeta, filtros, paneles y stepper sin contrastar contra Figma (el fileKey no trae esos frames). Lo que SÍ se pudo medir en vivo y corregir ya está arriba (checkout: 2 colores fuera de paleta; grid: bug de overflow en mobile). 4. Verificar en int, igual que se hizo en pre: que el fix de categorías se vea de verdad en el navegador (no solo que el token resuelva), y que el fix de grid en mobile no rompa el wrap del nombre de producto. -------------------------------------------------------------------------- */