/** * catalogo-style.css * Estilos del catálogo de fragancias. Tipografía editorial (Cormorant * Garamond + Jost) y layout de secciones apiladas por categoría, en dos * temas: oscuro (el diseño original, sigue siendo el default) y claro * (alternativa que activa el interruptor de catalogo-theme.js agregando * data-theme="light" en ). * * Las fuentes (Cormorant Garamond, Jost, Parisienne) se cargan desde * en el de index.html en vez de @import acá: así el * navegador las descubre y empieza a bajarlas en paralelo con este CSS, * en lugar de esperar a que este archivo termine de cargar primero. * * Todo el CSS de acá en más lee color SIEMPRE a través de estas * variables (nunca un hex/rgba suelto para texto o fondo de superficie): * así alcanza con redefinirlas para que el diseño oscuro y el claro * compartan exactamente las mismas reglas. Las pocas excepciones * deliberadas (el sello "Imagen de referencia", los botones flotantes de * WhatsApp/carrito/volver arriba, el sweep de brillo sobre los botones * dorados) quedan comentadas en el lugar donde aparecen. */ :root{ --bg: #14110D; /* Triplete r,g,b de --bg: lo usa la barra de filtros sticky para su vidrio translúcido (rgba(var(--bg-rgb),0.78)). */ --bg-rgb: 20,17,13; --bg-panel: #1B1712; /* Fondo de la miniatura/foto de cada frasco: tiene que quedarse CLARO en los dos temas (la foto real se compone encima con mix-blend-mode: multiply — sobre un chip oscuro esa mezcla ensucia la imagen). */ --paper-chip: #EDE5D4; --ink: #EDE7DA; --ink-soft: #9C9384; --ink-faint: #6E6656; --wine: #C6485E; --wine-deep: #E06B80; /* Triplete r,g,b de --wine, para washes translúcidos (rgba(var(--wine-rgb),X)). */ --wine-rgb: 198,72,94; --pine: #6F9C7C; --pine-deep: #8FBB9B; --brass: #C9A25B; --brass-soft: #DCC087; --hair: rgba(237,231,218,0.12); --glow-rgb: 201,162,91; /* Triplete r,g,b de --ink, para washes/tracks translúcidos armados con rgba() (un solo rgba(var(--ink-rgb),X) sirve para los dos temas: en oscuro aclara sutilmente al pasar el mouse, en claro oscurece). */ --ink-rgb: 237,231,218; /* Texto/ícono sobre los botones con degradé dorado (brass/brass-soft): oscuro en el tema oscuro (donde el dorado es claro), claro en el tema claro (donde el dorado se oscurece para tener contraste sobre el fondo). */ --btn-ink: #241a0a; /* Estado "agregado" del botón de la card de previsualización: un sello propio, independiente del dorado normal del botón. */ --confirm-bg-a: #fff8ea; --confirm-bg-b: #EDE5D4; --confirm-ink: #241a0a; /* Chip translúcido de los botones de cerrar (preview/notas). */ --overlay-chip: rgba(20,17,13,0.6); /* mix-blend-mode de la luz que sigue al cursor: "screen" aclara (sirve sobre el fondo oscuro), pero sobre un fondo claro un blend "screen" queda invisible (nunca puede aclarar más que blanco). */ --glow-blend: screen; /* Sombra que proyecta el borde inferior de la cortina sobre el catálogo mientras se levanta (más liviana en modo claro). */ --curtain-shadow: rgba(0,0,0,0.55); /* ---- Sistema de movimiento ---- Todas las transiciones del sitio leen de estas curvas y duraciones (nunca un cubic-bezier suelto) para que abrir un modal, revelar una sección o levantar la cortina se sientan como parte de una misma familia y no como efectos pegados de distintos lugares. - ease-out-expo: entradas (arranca rápido, se asienta largo y suave). - ease-in-soft: salidas (se va sin frenar: lo que desaparece no tiene por qué "aterrizar"). - ease-in-out: desplazamientos de un lugar a otro (la cortina, el thumb del interruptor de tema). */ --ease-out-expo: cubic-bezier(.16,1,.3,1); --ease-out-quart: cubic-bezier(.25,1,.5,1); --ease-in-soft: cubic-bezier(.4,0,.7,.2); --ease-in-out: cubic-bezier(.65,0,.2,1); --dur-fast: 0.22s; --dur-base: 0.45s; --dur-slow: 0.8s; } /* ---------- MODO CLARO ---------- */ :root[data-theme="light"]{ --bg: #F6F0E3; --bg-rgb: 246,240,227; --bg-panel: #FFFFFF; --paper-chip: #EFE6D2; --ink: #241A12; --ink-soft: #6B5C48; --ink-faint: #A69880; --wine: #A23349; --wine-deep: #7A2536; --wine-rgb: 162,51,73; --pine: #4B7A5B; --pine-deep: #386047; --brass: #8A6528; --brass-soft: #B4914A; --hair: rgba(36,26,18,0.14); --glow-rgb: 138,101,40; --ink-rgb: 36,26,18; --btn-ink: #FBF7EE; --confirm-bg-a: #2A2118; --confirm-bg-b: #241A12; --confirm-ink: #F6F0E3; --overlay-chip: rgba(255,255,255,0.7); --glow-blend: multiply; --curtain-shadow: rgba(36,26,18,0.22); } *{ box-sizing:border-box; } @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; } } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Jost', sans-serif; font-weight:400; -webkit-font-smoothing:antialiased; position:relative; } body::before{ content:''; position:fixed; inset:0; background:radial-gradient(ellipse 60% 40% at 50% 0%, rgba(var(--glow-rgb),0.08), transparent 65%); pointer-events:none; z-index:0; } /* ---------- CURSOR LIGHT ---------- */ .cursor-glow{ position:fixed; top:0; left:0; width:560px; height:560px; margin:-280px 0 0 -280px; border-radius:50%; background:radial-gradient(circle, rgba(var(--glow-rgb),0.18) 0%, rgba(var(--glow-rgb),0.06) 38%, transparent 70%); mix-blend-mode:var(--glow-blend); pointer-events:none; z-index:4; opacity:0; transition:opacity 0.5s ease; will-change:transform; } .cursor-glow.is-active{ opacity:1; } /* Transición pareja de todas las superficies al alternar data-theme, para que el cambio se sienta como un fundido y no como un corte. prefers-reduced-motion la desactiva más abajo, junto con el resto de las animaciones del sitio. */ body, .filter-bar, .cart-panel, .preview-slide-inner, .preview-body, .notes-panel, .thumb-wrap, .preview-media, .item, .cart-add-btn, .notes-stat-track{ transition:background 0.35s ease, background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease; } /* ---------- INTERRUPTOR DE TEMA (claro / oscuro) ---------- */ /* Vive dentro de .filter-controls (ver .filter-search-toggle, al lado): puesto como botón fijo aparte chocaba con la barra de filtros en cuanto esta queda sticky arriba de todo. A diferencia de los 3 botones flotantes que sí quedan fijos (WhatsApp, volver arriba, carrito) —que mantienen un badge oscuro a propósito, como un sello— este representa el tema en sí, así que usa los tokens normales para que se vea "puesto" en la superficie de cada tema. Mecánica tipo pill-switch (thumb que desliza de un extremo al otro), pero sin el texto "on/off" ni el color puro de una referencia de UI genérica: el riel queda sobrio (mismo --hair/--bg-panel que el resto de los controles de la barra) y el thumb dorado lleva el ícono de sol/luna en vez de una flecha, coherente con el resto del sitio. */ .theme-toggle{ -webkit-appearance:none; appearance:none; position:relative; width:74px; height:40px; padding:0; flex-shrink:0; border-radius:999px; border:1px solid var(--hair); background:var(--bg-panel); cursor:pointer; transition:border-color 0.2s ease, background 0.35s ease; } .theme-toggle:hover{ border-color:var(--brass-soft); } .theme-toggle-thumb{ position:absolute; top:3px; left:3px; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--brass-soft), var(--brass)); color:var(--btn-ink); box-shadow:0 3px 8px rgba(0,0,0,0.3); transition:transform 0.5s var(--ease-in-out); } .theme-toggle:active .theme-toggle-thumb{ transform:scale(0.88); transition-duration:0.15s; } :root[data-theme="light"] .theme-toggle{ background:rgba(var(--glow-rgb),0.14); } :root[data-theme="light"] .theme-toggle-thumb{ transform:translateX(37px); } :root[data-theme="light"] .theme-toggle:active .theme-toggle-thumb{ transform:translateX(37px) scale(0.88); } /* El thumb siempre muestra el ícono del tema ACTIVO (luna = oscuro puesto, sol = claro puesto), como en cualquier switch día/noche conocido: la posición y el ícono cuentan la misma historia. Los dos íconos viven superpuestos y se cruzan con un giro corto mientras el thumb viaja, en vez de intercambiarse de golpe con display:none. */ .theme-icon{ position:absolute; width:20px; height:20px; transition:opacity 0.3s ease, transform 0.5s var(--ease-in-out); } .theme-icon-sun{ opacity:0; transform:rotate(-90deg) scale(0.6); } .theme-icon-moon{ opacity:1; transform:rotate(0) scale(1); } :root[data-theme="light"] .theme-icon-sun{ opacity:1; transform:rotate(0) scale(1); } :root[data-theme="light"] .theme-icon-moon{ opacity:0; transform:rotate(90deg) scale(0.6); } .wrap{ max-width:1180px; margin:0 auto; padding:0 32px; } /* ---------- CORTINA DE APERTURA ---------- */ /* El "giro" inicial (kicker + título + trust-bar) ocupa toda la pantalla, tanto en mobile como en desktop, como una cortina fija (position:fixed, siempre 100dvh) por encima de todo el resto del sitio. No es scroll- jacking del sitio entero: catalogo-app.js (initHeroCurtain) solo controla el límite entre la cortina y el catálogo, y ahí sí cada gesto de scroll/swipe es un salto discreto de una sola vez (no un scroll gradual) — se levanta del todo con un solo scroll hacia abajo y reaparece del todo con un solo scroll hacia arriba estando en el tope del catálogo. La transición la hace este CSS con .curtain-hidden; el JS solo agrega/saca esa clase y reposiciona el scroll al límite exacto (ver el comentario de closeCurtain en catalogo-app.js). .curtain-spacer reserva 100dvh en el flujo del documento (la cortina en sí no ocupa espacio por ser fixed) para que la barra de filtros y las colecciones arranquen justo donde la cortina termina de irse. Coreografía al levantarse (y la inversa al volver): 1. El contenido del hero (kicker, título, lede, trust-bar) se despide primero, escalonado y rápido, subiendo apenas. 2. El plano de la cortina —OPACO, nunca se desvanece: un fundido sobre un plano que además se traslada deja ver el catálogo "a través" de la cortina y se lee turbio— sube entero con una curva in-out, proyectando una sombra sobre lo que va destapando y con un filo dorado en su borde inferior, como el bajo de una cortina real. 3. El catálogo no está simplemente "ahí" esperando: la barra de filtros y las primeras secciones entran recién cuando el borde de la cortina ya las destapó (ver html.curtain-open y --reveal-delay más abajo). */ .curtain-stage{ position:fixed; inset:0; height:100vh; height:100dvh; z-index:45; /* overflow-y:auto (no "hidden") a propósito: en teléfonos angostos con las 4 filas del trust-bar apiladas, kicker+título+botón+ trust-bar puede superar el alto real del viewport. Con overflow oculto esas filas de más quedarían recortadas sin aviso; con auto, en el peor caso el contenido scrollea adentro de la cortina en vez de perderse (initHeroCurtain deja pasar ese scroll interno antes de levantar la cortina — ver curtainInternalScrollExhausted). .wrap centra verticalmente vía min-height:100% en lugar de flex+ align-items en este contenedor, porque un flex centrado con overflow:auto recorta el borde inicial del contenido quieto ("safe center" no tiene soporte parejo todavía). */ overflow-y:auto; background:var(--bg); border-bottom:1px solid rgba(var(--glow-rgb),0.28); box-shadow:0 30px 80px -10px var(--curtain-shadow); transform:translate3d(0,0,0); transition:transform 1s var(--ease-in-out); will-change:transform; } /* Un solo gesto de scroll/swipe (ver initHeroCurtain) agrega esta clase: la cortina se va hacia arriba con la transición de arriba; sacarla la trae de vuelta bajando desde arriba, con la misma curva — la animación es una sola y reversible, no dos efectos distintos para abrir/cerrar. */ .curtain-stage.curtain-hidden{ transform:translate3d(0,-100%,0); pointer-events:none; } .curtain-stage::before{ content:''; position:fixed; inset:0; background:radial-gradient(ellipse 60% 45% at 50% 0%, rgba(var(--glow-rgb),0.1), transparent 65%); pointer-events:none; } .curtain-stage .wrap{ position:relative; z-index:1; min-height:100%; display:flex; flex-direction:column; justify-content:center; padding-top:24px; padding-bottom:24px; } /* ---- Entrada / salida escalonada del contenido del hero ---- Un único mecanismo (transiciones + un índice --i por pieza) cubre los tres momentos: la aparición al cargar la página (html.is-ready la dispara, ver el