/* ============================================================ ESLA — theme-light.css Tema CLARO reversible para el catálogo y las fichas de producto. Se activa SOLO cuando tiene la clase .theme-light. Sin esta clase, el sitio mantiene el tema oscuro original intacto. Enfoque: producto protagonista (estilo Stanley / Hydrate). Fondo blanco, texto negro, un único acento (dorado de marca), y tiles claros para exhibir PNG con fondo transparente. ============================================================ */ /* ── Remapeo de variables de superficie/texto a claro ─────── Solo se tocan variables que son puramente "fondo oscuro" o "texto claro". --black NO se remapea (se usa como tinta sobre el dorado en botones, paginación y checkout). --gold se mantiene. */ body.theme-light { --black-soft: #f6f6f5; /* fondos suaves -> gris muy claro */ --black-card: #ffffff; /* tarjetas -> blanco */ --black-input: #ffffff; /* inputs -> blanco */ --white: #1a1a1a; /* texto claro -> negro suave */ --white-dim: #6b6b6b; /* texto tenue -> gris medio */ /* Tokens propios del tema claro */ --tl-bg: #ffffff; --tl-tile: #f5f5f3; /* tile para fotos de producto */ --tl-border: #e7e7e3; --tl-border-2: #d9d9d4; --tl-ink: #1a1a1a; --tl-ink-dim: #6b6b6b; --tl-gold-ink: #9a7b1e; /* dorado legible sobre blanco */ --tl-shadow: 0 4px 20px rgba(0,0,0,.06); --tl-shadow-lg: 0 16px 40px rgba(0,0,0,.10); background: var(--tl-bg); color: var(--tl-ink); } /* ── Chrome: navbar ─────────────────────────────────────────── */ body.theme-light .shop-nav { background: rgba(255,255,255,.9); border-bottom: 1px solid var(--tl-border); } body.theme-light .shop-nav__link { color: var(--tl-ink-dim); } body.theme-light .shop-nav__link:hover, body.theme-light .shop-nav__link.active { color: var(--tl-ink); } body.theme-light .shop-nav__cart { color: var(--tl-ink); } /* ── Breadcrumb ─────────────────────────────────────────────── */ body.theme-light .breadcrumb, body.theme-light .breadcrumb a { color: var(--tl-ink-dim); } body.theme-light .breadcrumb a:hover { color: var(--tl-gold-ink); } body.theme-light .breadcrumb [aria-current] { color: var(--tl-ink); } /* ── Catálogo: tarjeta de producto ──────────────────────────── */ body.theme-light .product-card { background: #fff; border: 1px solid var(--tl-border); box-shadow: var(--tl-shadow); } body.theme-light .product-card:hover { border-color: var(--tl-border-2); box-shadow: var(--tl-shadow-lg); } /* Tile claro + producto "flotando" (ideal para PNG transparente) */ body.theme-light .product-card__img-wrap { background: var(--tl-tile); } body.theme-light .product-card__img-wrap img { object-fit: contain; padding: 12%; mix-blend-mode: multiply; /* integra PNG/JPG con borde blanco al tile */ } body.theme-light .product-card__name a { color: var(--tl-ink); } body.theme-light .product-card__name a:hover { color: var(--tl-gold-ink); } body.theme-light .product-card__price { color: var(--tl-ink); } /* ── Filtros / selects / buscador ───────────────────────────── */ body.theme-light .filter-select, body.theme-light .shop-search__input, body.theme-light .input, body.theme-light .qty-input { background: #fff; border: 1px solid var(--tl-border-2); color: var(--tl-ink); } body.theme-light .filter-select option { background: #fff; color: var(--tl-ink); } /* ── Botones ────────────────────────────────────────────────── */ /* Primario: dorado con tinta oscura (ya correcto: color var(--black)). */ body.theme-light .btn-secondary { background: #fff; border: 1px solid var(--tl-border-2); color: var(--tl-ink); } body.theme-light .btn-secondary:hover { border-color: var(--gold); color: var(--tl-gold-ink); } /* ── Ficha de producto ──────────────────────────────────────── */ body.theme-light .product-detail__brand { color: var(--tl-gold-ink); } body.theme-light .product-detail__cat-badge { background: var(--tl-tile); color: var(--tl-ink-dim); border: 1px solid var(--tl-border); } body.theme-light .product-detail__name { color: var(--tl-ink); } body.theme-light .product-detail__sku { color: var(--tl-ink-dim); } /* Precio en negro fuerte (protagonista), no dorado */ body.theme-light .product-detail__price { color: var(--tl-ink); } body.theme-light .product-detail__desc { color: var(--tl-ink-dim); } /* Área de imagen: tile claro, producto centrado y con aire */ body.theme-light .product-detail__gallery, body.theme-light .pdg-media, body.theme-light .product-detail__img-wrap, body.theme-light .pdg-carousel, body.theme-light .pdg-carousel__slide { background: var(--tl-tile); } body.theme-light .product-detail__img, body.theme-light .pdg-carousel__img { object-fit: contain; padding: 6%; mix-blend-mode: multiply; } body.theme-light .pdg-carousel__arrow { background: rgba(255,255,255,.85); color: var(--tl-ink); box-shadow: var(--tl-shadow); } body.theme-light .pdg-carousel__arrow:hover { background: #fff; } body.theme-light .pdg-thumb, body.theme-light .pdg-thumb__placeholder { background: var(--tl-tile); } body.theme-light .pdg-thumb { border-color: var(--tl-border); } /* ── Variantes de color (swatches) ──────────────────────────── */ body.theme-light .pdv-colors { border-top-color: var(--tl-border); } body.theme-light .pdv-colors__label { color: var(--tl-ink-dim); } body.theme-light .pdv-colors__current { color: var(--tl-ink); } body.theme-light .pdv-swatch { background: var(--tl-tile); border-color: var(--tl-border); } body.theme-light .pdv-swatch img { mix-blend-mode: multiply; } body.theme-light .pdv-swatch.is-active { border-color: var(--gold); } body.theme-light .pdv-swatch__ph { background: #ececea; color: var(--tl-ink-dim); } body.theme-light .product-detail__color { color: var(--tl-ink-dim); } body.theme-light .product-detail__color strong { color: var(--tl-ink); } /* ── Stock labels ───────────────────────────────────────────── */ body.theme-light .product-detail__stock-label.in-stock { background: rgba(34,160,94,.10); color: #15803d; border-color: rgba(34,160,94,.25); } body.theme-light .product-detail__stock-label.out-stock { background: rgba(220,60,50,.08); color: #b91c1c; border-color: rgba(220,60,50,.22); } /* ── Productos relacionados ─────────────────────────────────── */ body.theme-light .related-products__title { color: var(--tl-ink); } /* ── Footer ─────────────────────────────────────────────────── */ body.theme-light .shop-footer { background: #fafaf9; border-top: 1px solid var(--tl-border); } /* ── Flash ──────────────────────────────────────────────────── */ body.theme-light .flash { box-shadow: var(--tl-shadow); } /* ── Desktop: pulido de la presentación de variantes ────────── */ @media (min-width: 768px) { /* Swatches un poco más grandes y con más aire en web */ body.theme-light .pdv-colors { margin-top: 1.4rem; padding-top: 1.2rem; } body.theme-light .pdv-colors__swatches { gap: .7rem; } body.theme-light .pdv-swatch { width: 66px; height: 66px; border-radius: 12px; } body.theme-light .pdv-swatch:hover:not(.is-active) { transform: translateY(-2px); } /* Anillo de activo más claro sobre blanco */ body.theme-light .pdv-swatch.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gold); border-color: transparent; } }