/* Theme Name: Yuly Express Theme URI: https://example.test/yuly-express Author: Distribuidora Yuly Express Description: Tema propio de Distribuidora Yuly Express, una tienda WooCommerce chilena orientada a la conversion. Version: 0.3.0 Requires at least: 6.6 Requires PHP: 8.1 Text Domain: ferreteria-central */ /* ========================================================================== DISTRIBUIDORA YULY EXPRESS — Sistema de diseño -------------------------------------------------------------------------- La paleta sale del logotipo, muestreada directamente del archivo original: azul #0a2a88 (YULY), amarillo #fafd03 (fondo), rojo #e50a08 (Express) y lima #b4dc0c (la diagonal). Balance objetivo: ~75% claro / ~15% azul / ~10% rojo. Reglas de uso del color, para no perder la jerarquía: - AZUL estructura, tinta y superficies oscuras. - ROJO acción: comprar, agregar, avanzar. Y el precio rebajado. - AMARILLO ahorro: insignias de descuento y franjas de despacho. - LIMA acento decorativo y "destacado"; nunca texto pequeño. - VERDE disponibilidad. Cada par documenta su contraste WCAG medido; si cambias un tono, vuelve a medirlo antes de publicarlo. ========================================================================== */ :root { /* --- Azul de marca: estructura, texto y superficies ------------------- */ --blue-950: #08205e; /* pie de página, fondos máximos 15.23:1 en blanco */ --blue-900: #0a2a88; /* AZUL DE MARCA, tinta 12.36:1 en blanco */ --blue-800: #133aa8; /* panel oscuro, hover de barra */ --blue-700: #2f3f6e; /* tinta secundaria 8.32:1 en blanco */ --blue-500: #525c78; /* texto atenuado 6.64:1 en blanco */ --blue-400: #8a93ad; /* iconografía inactiva */ --blue-300: #c3cbdf; /* bordes marcados */ --blue-200: #dfe4ef; /* líneas y divisores */ --blue-100: #eaeef7; /* superficie hundida */ --blue-50: #f4f6fa; /* lienzo del sitio */ --white: #ffffff; /* --- Rojo de marca: acción ------------------------------------------- */ --red-700: #a80908; /* presionado */ --red-600: #c60b0a; /* hover + texto rojo 6.08:1 en blanco */ --red-500: #e50a08; /* ACCIÓN primaria 4.80:1 en blanco */ --red-400: #f43b39; /* relleno decorativo */ --red-300: #ff8a86; /* acento sobre azul 6.70:1 en 950 */ --red-100: #ffe6e5; /* tinte suave de fondo */ /* --- Amarillo de marca: ahorro --------------------------------------- */ --safety-500: #e0d000; /* bordes y franjas */ --safety-400: #f2e400; /* fondo de ahorro 9.34:1 con el azul 900 */ --safety-300: #ffe14d; /* acento sobre azul 11.70:1 en 950 */ --safety-100: #fdf9c2; /* tinte suave */ /* --- Lima de marca: acento decorativo -------------------------------- */ --lime-500: #b4dc0c; /* diagonal del logotipo 7.76:1 con el azul 900 */ --lime-100: #f0f9d0; /* --- Semáforo comercial ---------------------------------------------- */ --sale-600: #c60b0a; /* precio rebajado 6.08:1 con blanco */ --sale-500: #e50a08; /* urgencia 4.80:1 con blanco */ --stock-600: #4f7a00; /* disponible 5.10:1 con blanco */ --stock-100: #eef7dc; --alert-600: #8a5300; /* últimas unidades 6.05:1 con blanco */ /* El foco no puede ser rojo: sería invisible sobre los botones de acción. */ --focus-ring: var(--blue-900); --focus-ring-dark: var(--safety-300); /* --- Roles semánticos ------------------------------------------------- */ --color-canvas: var(--blue-50); --color-surface: var(--white); --color-surface-sunken: var(--blue-100); --color-ink: var(--blue-900); --color-ink-soft: var(--blue-700); --color-ink-muted: var(--blue-500); --color-on-dark: #e4e9f6; --color-on-dark-muted: #b3bcd6; --color-line: var(--blue-200); --color-line-strong: var(--blue-300); --color-line-dark: rgb(255 255 255 / 14%); --color-action: var(--red-500); --color-action-hover: var(--red-600); --color-action-ink: var(--red-600); /* Compatibilidad con nombres heredados del MVP. */ --color-primary: var(--red-500); --color-primary-hover: var(--red-600); --color-secondary: var(--blue-900); --color-text: var(--blue-900); --color-muted: var(--blue-500); --color-background: var(--blue-50); --color-border: var(--blue-200); --color-success: var(--stock-600); --color-warning: var(--safety-500); --color-danger: var(--sale-500); /* --- Tipografía ------------------------------------------------------- */ --font-display: "Archivo Variable", "Archivo", "Helvetica Neue", system-ui, sans-serif; --font-sans: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* Cuerpo generoso: 16px móvil → 17px escritorio. */ --text-base: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem); --text-ui: 0.875rem; --text-micro: 0.75rem; /* --- Métrica ---------------------------------------------------------- */ --container-width: 1360px; --gutter: clamp(1rem, 0.6rem + 1.6vw, 2.5rem); --section-space: clamp(3rem, 2.2rem + 3.4vw, 5.5rem); --header-h: 68px; --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 999px; /* Compatibilidad heredada. */ --radius-small: var(--radius-sm); --radius-medium: var(--radius-md); /* --- Elevación: fría, discreta, nunca difusa -------------------------- */ --shadow-hair: 0 1px 2px rgb(15 30 40 / 6%); --shadow-soft: 0 1px 2px rgb(15 30 40 / 5%), 0 10px 24px -16px rgb(15 30 40 / 22%); --shadow-lift: 0 2px 6px rgb(15 30 40 / 7%), 0 24px 48px -28px rgb(15 30 40 / 32%); --shadow-pop: 0 4px 12px rgb(15 30 40 / 9%), 0 32px 64px -30px rgb(15 30 40 / 38%); --shadow-card: var(--shadow-soft); /* --- Movimiento ------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --speed-fast: 140ms; --speed: 200ms; } @media (min-width: 1024px) { :root { --header-h: 84px; } }