/* =================================================================================== UEB Tienda — tokens de diseño =================================================================================== PROCEDENCIA: rediseño "Náutica clara" (2026-08). Los valores salen de los mockups aprobados, donde viven en una clase de variante `.dirA` sobre el . Aquí van a `:root` a propósito: en los mockups había además `.dirB` (oscuro) y `.dirC` (minimal) como exploraciones descartadas, y depender de una clase en el deja sin variables a cualquier plantilla que no pase por header.php (wp-login.php, por ejemplo). ───────────────────────────────────────────────────────────────────────────────────── LOS DOS CONTEXTOS, UN SOLO VOCABULARIO ───────────────────────────────────────────────────────────────────────────────────── El rediseño tiene dos ambientes y los mockups los escribieron con nombres DISTINTOS para lo mismo: · Tienda (Home, producto, cuenta, checkout) → claro. `--ink` `--accent-strong` `--line` · Login, 404 y "en construcción" → oscuro. `--fg` `--signal` `--line` Sostener los dos juegos obligaría a escribir cada componente dos veces. En su lugar se normaliza al vocabulario claro y las pantallas oscuras REDEFINEN esos mismos nombres bajo `.ueb-deep` (más abajo). Así `.eyebrow`, `.btn`, `.field` o `.toast` se escriben una vez y funcionan en los dos sitios. La traducción no es mecánica en un punto y conviene entenderlo: en claro `--accent` es el menta pálido (relleno) y `--accent-strong` el verde azulado oscuro (texto, porque el menta sobre blanco no llega a contraste). En oscuro se invierten los papeles: el verde oscuro desaparecería sobre el fondo marino, así que `--accent-strong` pasa a ser el MISMO menta pálido. Es decir: `--accent-strong` no significa "más oscuro", significa "la variante que contrasta con el fondo". CONTRASTE (ratio sobre su fondo, WCAG AA pide 4.5:1 en texto normal y 3:1 en ≥24px): claro ink #152642 sobre bg #FAFBFC ....... 14.8:1 ink-dim #4C5F78 sobre bg ............ 7.1:1 ink-mute #8695A8 sobre bg ........... 3.1:1 ← solo etiquetas ≥12px, nunca texto corrido accent-strong #3E8C7E sobre bg ...... 3.9:1 ← solo eyebrows, precios y enlaces ≥14px en negrita oscuro fg #FFFFFF sobre bg #152642 ........ 14.0:1 accent #A8D8D0 sobre bg #152642 .... 10.0:1 =================================================================================== */ :root { /* ═══ SUPERFICIES ═══════════════════════════════════════════════════════════════ Tres niveles, no cuatro como en el diseño oscuro anterior: en una interfaz clara la jerarquía la marcan los filetes, no la elevación por color. */ --bg: #FAFBFC; /* fondo del sitio (dentro del contenedor de 1280px) */ --surface: #FFFFFF; /* fichas, cabecera, paneles, campos */ --foot-bg: #F1F5F4; /* pie — verde grisáceo, única superficie con tinte */ /* Gris de fuera del contenedor. En los mockups el sitio NO va a sangre: es un bloque de 1280px centrado, con sombra suave, sobre este gris. Se ve solo por encima de 1280px de viewport; por debajo de 860px el contenedor pasa a ancho completo y este color deja de asomar (ver base.css, .site-wrap). */ --page-bg: #E4E9EB; /* Placa de foto. Es el gris verdoso sobre el que se recortan TODAS las imágenes del diseño: media de tarjeta y de categoría, galería de producto, tarjetas de estadística del panel de cuenta, cajas de dirección, miniatura de opinión y avatar. Va en un token porque aparece en ~10 componentes y porque los recortes del catálogo llegan con fondos incompatibles entre sí (AGIR sobre gris, Shearwater sobre negro): este es el color con el que tienen que fundir. */ --media: #EDF2F1; /* ═══ TEXTO ═════════════════════════════════════════════════════════════════════ */ --ink: #152642; /* titulares y texto principal */ --ink-dim: #4C5F78; /* texto corrido, entradillas, descripciones */ --ink-mute: #8695A8; /* etiquetas, metadatos, placeholders — ver contraste arriba */ /* ═══ FILETES ═══════════════════════════════════════════════════════════════════ Tinta con alfa, no grises planos: así funcionan igual sobre --bg, --surface y --media sin necesitar una variante por superficie. */ --line: rgba(21, 38, 66, .10); /* divisiones y bordes de ficha */ --line-2: rgba(21, 38, 66, .20); /* bordes de control (input, botón fantasma) */ /* ═══ ACENTO ════════════════════════════════════════════════════════════════════ */ --accent: #A8D8D0; /* menta — rellenos, subrayado del nav activo, badges */ --accent-hover: #8FCBBE; /* menta pulsado */ --accent-strong: #3E8C7E; /* verde — eyebrows, precios, enlaces, iconos, stock */ --accent-hover-2:#347569; /* verde pulsado (botón de compra, guardar, pedido) */ --accent-ink: #0E2A24; /* texto SOBRE menta; nunca --ink encima del menta */ --accent-soft: rgba(62, 140, 126, .10); /* relleno de chip activo y hover de pastilla */ --ink-hover: #0E1B30; /* botón primario pulsado */ /* ═══ ESTADO ════════════════════════════════════════════════════════════════════ Los mockups traían dos rojos casi idénticos para lo mismo (#C0503C en el badge de pedido cancelado y en "cerrar sesión", #C0392B en el hover de "quitar" del carrito). Se unifican en uno: eran dos archivos distintos escritos por separado, no una distinción intencionada. */ --danger: #C0503C; --danger-soft: rgba(194, 80, 60, .10); --info: #4E7FA6; /* pedido en reparto */ --info-soft: rgba(78, 127, 166, .10); --alert: #F0654A; /* punto rojo del 404 — solo en pantallas oscuras */ /* "Correcto/completado" no tiene color propio: es --accent-strong. */ /* ═══ CABECERA Y PIE ════════════════════════════════════════════════════════════ Tokens aparte de los generales porque la cabecera se invierte en las pantallas oscuras sin arrastrar consigo el resto de la página. */ --hdr-bg: #FFFFFF; --hdr-fg: #152642; --hdr-fg-dim: #4C5F78; --hdr-line: rgba(21, 38, 66, .10); --nav-accent: #A8D8D0; /* subrayado de 2px del enlace activo */ --foot-fg: #4C5F78; /* Velo de los overlays (buscador, carrito, menú móvil, popup). */ --veil: rgba(21, 38, 66, .55); /* ═══ TIPOGRAFÍA ════════════════════════════════════════════════════════════════ --font y --font-body apuntan a la misma familia desde el rediseño: Archivo cubre display y texto corrido. Se conservan los dos tokens para no reescribir cada declaración si algún día vuelven a separarse. Ver assets/css/fonts.css. */ --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; /* ═══ MÉTRICA ═══════════════════════════════════════════════════════════════════ */ --wrap: 1440px; /* 40px en escritorio, 16px en móvil (ver el @media del final). No es un clamp() como en el diseño anterior: los mockups usan estos dos valores exactos y nada intermedio, y el salto ocurre en el mismo punto en que desaparece el nav. */ --pad: 40px; /* Escala de radios. El diseño la construye con calc() sobre --radius; aquí se declaran ya resueltos para no repetir la aritmética en cada regla: --radius-sm = radius - 4 → iconos de cabecera, inputs, ítems del menú de cuenta --radius-md = radius - 2 → imagen de la promo del megamenú --radius = fichas, botones, paneles — el valor de referencia --radius-lg = banner promocional, modal del popup --radius-pill= chips, badges, tags y contadores Los círculos (swatches, avatar, punto de stock) siguen siendo 50% literal: un círculo es una forma, no una esquina redondeada. */ --radius-sm: 8px; --radius-md: 10px; --radius: 12px; --radius-lg: 22px; --radius-pill: 20px; /* Alturas del cromo. En variables porque las necesitan cuadradas entre sí cuatro cosas: el scroll-padding del documento, el `top` del panel del megamenú, el de la galería pegajosa de producto y el del resumen del checkout. */ --topbar-h: 34px; --hdr-h: 80px; --chrome-h: calc(var(--topbar-h) + var(--hdr-h)); /* 114px — el `top` del megamenú */ --sticky-top: calc(var(--hdr-h) + 20px); /* ═══ MOVIMIENTO ════════════════════════════════════════════════════════════════ */ --ease: cubic-bezier(.16, 1, .3, 1); --fast: .15s; /* botones, hover de enlace */ --med: .25s; /* velos, aparición de paneles */ --slow: .32s; /* cajón de carrito, modal del popup */ /* ═══ PROFUNDIDAD ═══════════════════════════════════════════════════════════════ La escala sale tal cual de los mockups; se respeta porque los saltos ya están pensados (el carrito por encima del buscador, el menú móvil por encima de ambos). */ --z-hdr: 60; --z-mega: 80; --z-accmenu: 90; --z-shop-filters: 190; /* cajón de filtros del archivo (móvil); por debajo de buscador/carrito */ --z-search: 200; --z-cart: 210; --z-mobnav: 300; --z-promo: 400; --z-showroom: 400; /* mismo nivel que --z-promo: los dos son modales simples y mutuamente exclusivos en el flujo real */ /* Visor de imagen de la ficha: por encima del popup (tapa la página entera) y por debajo del toast, que tiene que seguir leyéndose con el visor abierto. */ --z-lightbox: 420; --z-toast: 500; /* ═══ SOMBRA ════════════════════════════════════════════════════════════════════ Todas en tinta de marca con alfa, nunca en negro puro: sobre fondo claro el negro ensucia y se ve gris. */ --shadow-site: 0 0 60px rgba(21, 38, 66, .06); --shadow-card: 0 30px 90px rgba(21, 38, 66, .18); --shadow-mega: 0 30px 70px rgba(21, 38, 66, .12); --shadow-menu: 0 20px 50px rgba(21, 38, 66, .16); --shadow-toast: 0 12px 30px rgba(21, 38, 66, .25); --shadow-modal: 0 40px 100px rgba(21, 38, 66, .35); } /* =================================================================================== CONTEXTO OSCURO — login, 404 y "tienda en construcción" =================================================================================== Las tres pantallas comparten fondo: la misma foto submarina a sangre (assets/img/fondo-marino.jpg) bajo un doble degradado. No son "modo oscuro" del sitio: son pantallas de interrupción, sin cabecera ni pie de tienda. Redefinen los tokens generales, NO crean nombres nuevos. Todo lo que se apoye en --ink / --accent-strong / --line funciona dentro sin una sola regla extra. Se aplica con la clase `ueb-deep` en el (body_class en 404 y en la plantilla de construcción; login_body_class en wp-login.php). =================================================================================== */ .ueb-deep { --bg: #152642; --surface: rgba(14, 27, 48, .55); /* celdas de cuenta atrás y campos, translúcidas */ --media: #0E1B30; --foot-bg: transparent; --ink: #FFFFFF; --ink-dim: rgba(255, 255, 255, .74); --ink-mute: rgba(255, 255, 255, .50); --line: rgba(255, 255, 255, .10); --line-2: rgba(255, 255, 255, .20); /* Aquí está la inversión explicada en la cabecera: sobre marino, el verde #3E8C7E no se lee, así que la variante "que contrasta" pasa a ser el propio menta. */ --accent: #A8D8D0; --accent-hover: #8FCBBE; --accent-strong: #A8D8D0; --accent-hover-2:#8FCBBE; --accent-soft: rgba(168, 216, 208, .12); --hdr-bg: transparent; --hdr-fg: #FFFFFF; --hdr-fg-dim: rgba(255, 255, 255, .74); --hdr-line: rgba(255, 255, 255, .10); --foot-fg: rgba(255, 255, 255, .50); --veil: rgba(11, 20, 36, .60); } /* =================================================================================== AJUSTES DE VIEWPORT =================================================================================== */ /* Único punto de corte del diseño. Coincide con el del mockup (860px) y es donde desaparece el nav y entra la hamburguesa. */ @media (max-width: 860px) { :root { --pad: 16px; --hdr-h: 64px; } } /* * La cabecera es sticky, así que un ancla que caiga justo debajo queda tapada. Esto lo * corrige de forma global, sin JS y sin padding fantasma en cada sección. */ html { scroll-behavior: smooth; scroll-padding-top: var(--sticky-top); } /* * La barra de administración desplaza todo hacia abajo 32px (46px en móvil) — y eso pasa * precisamente cuando estás revisando el sitio con la sesión abierta, que es cuando más * confunde ver la cabecera descuadrada. * * ⚠️ La clase real que pone WordPress en el es `admin-bar`, NO `admin-bar-showing` * (esa no la genera el núcleo en ningún caso — comprobado contra el HTML servido). Con el * nombre equivocado este bloque nunca se activaba, para nadie, ni con sesión ni sin ella: * --sticky-top se quedaba siempre en el valor sin la barra de admin. */ body.admin-bar { --sticky-top: calc(var(--hdr-h) + 20px + 32px); --chrome-h: calc(var(--topbar-h) + var(--hdr-h) + 32px); } @media screen and (max-width: 782px) { body.admin-bar { --sticky-top: calc(var(--hdr-h) + 20px + 46px); --chrome-h: calc(var(--topbar-h) + var(--hdr-h) + 46px); } } @media (prefers-reduced-motion: reduce) { :root { --fast: 0s; --med: 0s; --slow: 0s; } html { scroll-behavior: auto; } /* El zoom del icono de carrito (layout.css, `.is-added`) no usa --fast/--med/--slow: es una animación con nombre propio, no una transición. */ .iconbtn[data-ueb-cart-open].is-added svg { animation: none; } /* Fundido carrito<->check del botón de la tarjeta (components.css, `.is-swap`): tampoco usa los tokens de arriba, es una transición con duración literal. */ .pcard .pc-add svg { transition: none; } }