/* ============================================================================ Secret Valley Grow Shop — sistema de diseño ============================================================================ TEMA CLARO, y a propósito. El código venía de una tienda de CBD con estética de botica: fondo casi negro y acentos ámbar. Precioso para cuarenta referencias premium fotografiadas sobre fondo oscuro, y equivocado aquí por dos motivos: las diez mil fotos del mayorista son producto recortado sobre BLANCO, que sobre fondo negro recorta como un sello; y navegar un catálogo denso comparando fichas y filtros se hace mejor sobre claro. La paleta sale del logotipo real de la tienda: verde hoja y magenta. ── ROLES DE COLOR (no mezclar) ───────────────────────────────────────────── · VERDE MARCA → acción de compra. Todo CTA, quick-add, carrito, foco visible. · VERDE VIVO → disponibilidad. "Hoy en tienda", stock, confirmaciones. · MAGENTA → oferta y urgencia. Descuentos, últimas unidades, cuenta atrás. · TIERRA → confianza y navegación. Footer, migas, sellos, datos legales. Un CTA de compra NUNCA va en magenta; el magenta nunca compite con la compra. Todos los contrastes están verificados contra WCAG 2.1 AA y anotados al lado. ========================================================================= */ :root { /* ── Superficies ────────────────────────────────────────────────────── La elevación sube hacia el blanco: la página es hueso, la tarjeta es blanca. Así el producto recortado sobre blanco se funde con su tarjeta en lugar de pelearse con ella. */ --color-bg: #f6f6f1; /* página */ --color-bg-soft: #fbfbf8; /* bandas y secciones alternas */ --color-bg-elevated: #ffffff; /* tarjetas, modales, cabecera */ --color-bg-overlay: rgba(20, 23, 26, 0.62); --color-bg-ink: #12211a; /* bloques oscuros puntuales: footer, hero */ /* ── Verde marca — ACCIÓN ───────────────────────────────────────────── #16702e con texto blanco encima da 6,19:1 (AA holgado, AAA en texto grande). El verde del logotipo, #43d343, es precioso y da 1,97:1 sobre blanco: no puede llevar texto encima ni ser un botón. Se queda donde rinde, que es como relleno con texto oscuro (9,13:1) y como acento. */ --color-brand: #16702e; --color-brand-dark: #12602a; /* 7,69:1 — hover y estados activos */ --color-brand-deep: #0e4a20; /* 10,40:1 — texto de marca sobre claro */ --color-brand-bright: #43d343; /* el verde del logo: relleno y acentos */ --color-brand-soft: rgba(22, 112, 46, 0.10); --color-brand-tint: #e8f4ea; /* ── Magenta — OFERTA Y URGENCIA ────────────────────────────────────── #b31f8f con blanco encima da 5,98:1. El magenta del logo, #d937be, baja a 4,01:1, así que va de relleno con texto oscuro y nunca de texto. */ --color-magenta: #b31f8f; --color-magenta-dark: #8e1772; --color-magenta-bright: #d937be; --color-magenta-soft: rgba(179, 31, 143, 0.10); /* ── Lila — SUPERFICIE DE MARCA ─────────────────────────────────────── El logotipo tiene un lila profundo que la web no usaba: se había quedado solo con el magenta rosa, que es su versión clara. Muestreado del fichero real (`logo-secretvalley.webp`), el tono medio de todos sus píxeles lilas es #560f5a. Ojo con el reparto, porque son dos cosas distintas: · MAGENTA (#b31f8f) es SEÑAL — etiquetas de oferta, últimas unidades, cuenta atrás. Elementos pequeños que gritan. · LILA (#560f5a) es SUPERFICIE — fondos grandes y degradados. No señala nada, viste. Y por ser oscuro admite texto blanco con 13,03:1, así que se puede usar en cualquier banda sin pensarlo. Un CTA de compra sigue sin ir en ninguno de los dos. */ --color-violet: #560f5a; /* 13,03:1 con blanco encima */ --color-violet-deep: #3d0a41; /* 15,93:1 */ --color-violet-soft: rgba(86, 15, 90, 0.10); /* ── Tierra — CONFIANZA ───────────────────────────────────────────── */ --color-earth: #3c4a3f; --color-earth-dark: #26302a; --color-earth-soft: rgba(60, 74, 63, 0.08); /* ── Texto ───────────────────────────────────────────────────────────── Los ratios están medidos sobre --color-bg (#f6f6f1), que es el fondo REAL de las páginas, y no sobre blanco puro. No es lo mismo: el gris tenue estaba en #6d777f, anotado como "4,57:1, el mínimo que se permite", pero ese 4,57 era contra blanco. Sobre el fondo de la página se queda en 4,22 y no llega a AA. Y ese es el color de las letras pequeñas —recuentos, unidades, metadatos—, justo las que más contraste necesitan. Se oscurece lo justo para cumplir. ──────────────────────────────────────────────────────────────────── */ --color-text: #14171a; /* 16,60:1 sobre el fondo de página */ --color-text-muted: #55606a; /* 5,93:1 */ --color-text-dim: #68727a; /* 4,53:1 — el mínimo que se permite */ --color-text-invert: #f4f6f2; /* ── Bordes ────────────────────────────────────────────────────────── */ --color-border: #e0e3da; --color-border-soft: #edefe9; --color-border-strong: #c9cfc3; /* ── Estados ───────────────────────────────────────────────────────── */ --color-success: #16702e; --color-danger: #c02618; /* 5,95:1 */ /* El aviso casi nunca se pinta sobre el fondo liso sino sobre su propio tinte, que lo aclara: ahí el #b45309 original se quedaba en 4,47:1. Este cumple en los dos sitios. */ --color-warning: #a84d09; /* 5,19:1 sobre página · 4,55:1 sobre su tinte */ --color-info: #1f6f8b; /* ═════════════════════════════════════════════════════════════════════ ALIAS HEREDADOS Las hojas de estilo de esta tienda hacen más de mil quinientas llamadas a var(--color-amber), var(--color-gold), var(--color-sage) y var(--color-burgundy). Esos nombres venían de la paleta de la tienda de CBD, y renombrarlos uno a uno sería tocar dieciséis ficheros para no cambiar nada visible. En lugar de eso se reasignan aquí POR SU ROL, que es lo que de verdad significaban: ámbar = el color de la acción → verde marca dorado = el color de la confianza → tierra sage = el color del "todo bien" → verde vivo burgundy = el color de la urgencia → magenta En código nuevo se usan los nombres de arriba, no estos. ═════════════════════════════════════════════════════════════════════ */ --color-amber: #16702e; --color-amber-light: #1d8a3a; --color-amber-dark: #12602a; --color-amber-soft: rgba(22, 112, 46, 0.10); --color-gold: #3c4a3f; --color-gold-light: #55665a; --color-gold-dark: #26302a; --color-sage: #2c8c3b; --color-sage-light: #43d343; --color-sage-dark: #0e4a20; --color-burgundy: #b31f8f; --color-burgundy-light: #d937be; --color-burgundy-dark: #8e1772; /* ── Gradientes ────────────────────────────────────────────────────── */ --gradient-cta: linear-gradient(135deg, #1d8a3a 0%, #16702e 55%, #12602a 100%); --gradient-cta-hover: linear-gradient(135deg, #23a044 0%, #1a8035 55%, #166f2f 100%); --gradient-brand: linear-gradient(120deg, #16702e 0%, #2c8c3b 60%, #43d343 100%); --gradient-offer: linear-gradient(135deg, #d937be 0%, #b31f8f 100%); /* Los DOS colores del logotipo en una sola superficie: verde a lila. ------------------------------------------------------------------- Verde y púrpura son casi complementarios, así que una interpolación directa pasa por un gris sucio a mitad de camino. Por eso lleva cuatro paradas: el verde se oscurece antes de virar y el cruce se hace por un azul-violeta, que sí es un camino natural entre los dos. Todas las paradas están medidas con texto blanco encima, y la peor —el arranque verde— da 6,19:1. O sea que se puede poner texto blanco en cualquier punto de la banda sin mirar dónde cae. */ --gradient-duo: linear-gradient(105deg, #16702e 0%, #155e3d 28%, #28414f 56%, #3f2356 80%, #560f5a 100%); --gradient-duo-deep: linear-gradient(160deg, #12211a 0%, #16241f 38%, #241a34 78%, #3d0a41 100%); /* ── Espaciado (sistema de 8) ──────────────────────────────────────── */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 48px; --space-6: 64px; --space-7: 96px; --space-8: 128px; /* ── Tipografía ─────────────────────────────────────────────────────── Archivo para titulares: grotesca ancha y sólida, con peso hasta 800. Suena a herramienta y a rótulo, que es lo que es una tienda de cultivo. DM Sans para el texto: es la que ya usaba la web anterior de Secret Valley, se lee muy bien en tamaños pequeños y aguanta las tablas de especificaciones sin cansar. */ --font-display: 'Archivo', 'Arial Black', system-ui, sans-serif; --font-heading: 'Archivo', 'Arial Black', system-ui, sans-serif; --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Roboto Mono', 'Liberation Mono', monospace; /* Escala fluida. La base arranca en 16px móvil y llega a 17,5px en escritorio: una tienda con fichas técnicas y tablas de abonado necesita densidad, no párrafos de revista. OJO: --fs-sm y --fs-xs quedan por debajo de 16px, así que NO valen para campos de formulario; iOS haría zoom al enfocarlos. El suelo de 16px de los inputs está puesto en base.css y en la regla .input de components.css. */ --fs-xs: clamp(0.78rem, 0.75rem + 0.15vw, 0.84rem); --fs-sm: clamp(0.88rem, 0.85rem + 0.2vw, 0.95rem); --fs-base: clamp(1.0rem, 0.97rem + 0.2vw, 1.09rem); --fs-lg: clamp(1.15rem, 1.08rem + 0.35vw, 1.3rem); --fs-xl: clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem); --fs-2xl: clamp(1.95rem, 1.5rem + 2vw, 3rem); --fs-3xl: clamp(2.4rem, 1.75rem + 2.9vw, 4rem); /* ── Layout ────────────────────────────────────────────────────────── El padding lateral va SIEMPRE en px, nunca en vw ni en porcentaje: con unidades relativas el margen cambia en cada móvil y la web se ve distinta en un 320 que en un 414. */ /* El tope NO puede ser un ancho de pantalla corriente. --------------------------------------------------------------------- Con 1 280 pasaba esto: en una ventana de 1 280 el contenedor medía exactamente lo mismo que la ventana, así que no sobraba nada y todo el aire lateral era el padding —40 px— y la web se veía pegada al borde. Y 1 280 no es un ancho raro: es lo que da un monitor de 2 560 con el zoom del navegador al 200 %, un 1 920 al 150 % o un 1 600 al 125 %. Con 1 200 el tope entra ANTES que cualquier pantalla de escritorio, de modo que siempre sobra ventana a los lados y ese sobrante se suma al padding. El margen deja de depender de la resolución. */ --container-max: 1200px; /* Un solo mando para el aire lateral: `--container-pad`. Lo usan el contenedor, la cabecera, el hero y el megamenú, así que todo lo que ocupa el ancho de la página empieza y acaba en la MISMA vertical. Sube por escalones porque un solo valor no vale para todo. Lo que hay del borde de la ventana al primer píxel de contenido, sumando el sobrante del tope: 360 16 + 0 = 16 px 768 24 + 0 = 24 1024 48 + 0 = 48 1200 72 + 0 = 72 1280 72 + 40 = 112 1366 72 + 83 = 155 1440 72 + 120 = 192 1600 88 + 200 = 288 1920 88 + 360 = 448 En px, nunca en vw ni en porcentaje: con unidades relativas el margen cambia en cada móvil y la web se ve distinta en un 320 que en un 414. */ --container-pad: 16px; --section-pad: clamp(48px, 6vw, 88px); --section-pad-sm: clamp(32px, 4vw, 56px); /* ── Radios ────────────────────────────────────────────────────────── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* ── Sombras y curvas compartidas ────────────────────────────────────── Estas tres las declaraba polish.css, que se carga de los últimos. Funcionaban por casualidad (las custom properties se resuelven al calcular, no por orden de fichero), pero polish-components.css y signature.css las usan sin declararlas: si algún día se sirve una página sin polish.css se quedan sin valor. Su sitio es aquí, con el resto de tokens. polish.css las repite con el mismo valor. */ --shadow-inset-top: inset 0 1px 0 0 rgba(255, 255, 255, 0.65); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1); /* ── Transiciones ──────────────────────────────────────────────────── */ --transition-base: 180ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1); --dur-fast: 160ms; --dur-med: 280ms; --dur-slow: 520ms; --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1); /* ── Sombras ────────────────────────────────────────────────────────── En claro las sombras se ven muchísimo más que en oscuro: las del tema anterior eran negros al 40-60 % y aquí manchan la página entera. Se bajan a grises verdosos muy tenues. */ --shadow-card-idle: 0 1px 2px rgba(20, 33, 26, 0.05); --shadow-card: 0 2px 10px rgba(20, 33, 26, 0.07); --shadow-card-hover: 0 12px 28px -12px rgba(20, 33, 26, 0.20), 0 0 0 1px rgba(22, 112, 46, 0.14); --shadow-cta-rest: 0 2px 8px -2px rgba(22, 112, 46, 0.34); --shadow-cta-hover: 0 8px 20px -6px rgba(22, 112, 46, 0.45); --shadow-amber-glow: 0 0 0 4px rgba(22, 112, 46, 0.14); --shadow-amber-halo: 0 0 0 3px rgba(67, 211, 67, 0.55), 0 0 0 6px rgba(22, 112, 46, 0.22); --shadow-gold-glow: 0 0 0 4px rgba(60, 74, 63, 0.12); --shadow-popover: 0 18px 44px -16px rgba(20, 33, 26, 0.28); /* ── Superposiciones sobre imagen ──────────────────────────────────── */ --overlay-hero-dark: linear-gradient( 180deg, rgba(18, 33, 26, 0.68) 0%, rgba(18, 33, 26, 0.46) 45%, rgba(18, 33, 26, 0.86) 100% ); --overlay-hero-side: linear-gradient( 100deg, rgba(18, 33, 26, 0.90) 0%, rgba(18, 33, 26, 0.66) 45%, rgba(18, 33, 26, 0.20) 100% ); /* ── Medidas de lectura ────────────────────────────────────────────── */ --measure: 68ch; --measure-tight: 56ch; --measure-wide: 78ch; /* ── Cabecera ──────────────────────────────────────────────────────── */ /* Suben con el logotipo: es un rótulo ilustrado y a 52 px de alto no se leía. Con 68 px de logo, la fila necesita aire para no quedar apretada. */ --header-height: 72px; --header-height-desktop: 96px; --z-header: 900; --z-modal: 1000; } /* ── Los escalones del aire lateral ─────────────────────────────────────── Se declaran aquí, en la variable, y no en cada componente: así hay UN sitio donde tocar el margen de toda la web y es imposible que la cabecera y el contenido queden a distinta distancia del borde. El tope de `--container-max` frena el ancho, pero no basta: en un portátil de 1366 sobran 43 px por lado, así que la mayor parte del aire la pone el padding. De ahí que suba hasta 56. Todo en px, nunca en % ni en vw. */ @media (min-width: 768px) { :root { --container-pad: 24px; } } @media (min-width: 1024px) { :root { --container-pad: 48px; } } /* El salto va en 1200 —el propio tope— y no en 1280: justo a partir de ahí empieza a sobrar ventana, y si el padding esperaba a 1280 el tramo 1200-1279 se quedaba en 48 px. Medido con el navegador: en una ventana de 1254 el margen era de 75 px; ahora es de 99. */ @media (min-width: 1200px) { :root { --container-pad: 72px; } } @media (min-width: 1600px) { :root { --container-pad: 88px; } } /* Quien ha pedido menos movimiento no quiere lo mismo pero más despacio: se anula la animación, no se ralentiza. */ @media (prefers-reduced-motion: reduce) { :root { --transition-base: 0ms; --transition-slow: 0ms; --dur-fast: 0ms; --dur-med: 0ms; --dur-slow: 0ms; } }