/* ========================================================================== Vidriera pública -------------------------------------------------------------------------- Papel, tinta y una línea. Nada más. Portado del boceto de paginaDescartable/. Lo que el boceto no tenía — checkout, OTP, relacionados, overlays de pago — está al final del archivo, resuelto con el mismo vocabulario: sin cajas, una línea por debajo y mayúsculas chicas para las etiquetas. ========================================================================== */ :root { --paper: #f4f3f0; --paper-deep: #eceae5; --ink: #171614; --ink-soft: #605e58; --ink-faint: #a6a29a; --line: #d5d2ca; --glass: rgba(244, 243, 240, 0.72); --glass-blur: saturate(1.25) blur(16px); /* El fondo de la placa del precio. Va aparte de --paper-deep porque tiene que seguir separándose del papel cuando la tarjeta reacciona al mouse, y en el tema oscuro "más marcado" es más claro, no más oscuro. */ --plaque: #e8e5de; --plaque-strong: #ddd9d0; /* Acentos de las etiquetas de la grilla: celeste para la oferta, rojo apagado para el stock que se termina. */ --flag-oferta-bg: #9fcbe8; --flag-oferta-ink: #10303f; --flag-ultimas-bg: #d99483; --flag-ultimas-ink: #3d1a12; /* Verde agua para las etiquetas de catálogo. Va translúcido —deja ver algo de la foto— pero con la misma tinta oscura que los otros flags: la mayoría de las fotos de producto tienen fondo blanco, y un chip claro con texto claro ahí arriba directamente no se lee. */ --flag-etiqueta-bg: rgba(143, 214, 201, 0.85); --flag-etiqueta-ink: #0d3b34; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --pad: clamp(18px, 3.2vw, 52px); --header-h: 58px; /* Lo que el encabezado ocupa de verdad en pantalla: su alto más la barra de estado del teléfono, que con viewport-fit=cover queda por debajo. Todo lo que se pega abajo del encabezado tiene que usar esta y no --header-h, o en iPhone se mete detrás. En pantallas sin muesca las dos valen lo mismo. */ --header-total: calc(var(--header-h) + env(safe-area-inset-top, 0px)); --ease: cubic-bezier(0.16, 0.84, 0.24, 1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* La página es una columna: el alto sobrante lo toma la portada, así el pie nunca empuja el contenido fuera de la ventana. Va con la clase puesta porque tokens.css y base.css, que se cargan antes, pintan el tema oscuro del panel sobre el mismo selector. */ body.vidriera { margin: 0; min-height: 100svh; display: flex; flex-direction: column; /* Transparente a propósito: el color lo pinta para que la ilustración del fondo (body::before, más abajo) no quede tapada. */ background: transparent; color: var(--ink); font-family: var(--font); /* 14px era tamaño de interfaz, no de página que se lee de parado a un metro del mostrador o en un teléfono con sol. Todo lo demás sale de acá. */ font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* Grano de papel */ body.vidriera::after { content: ""; position: fixed; inset: 0; /* base.css usa este mismo pseudo-elemento como manchón de color: un círculo de 62vw. Sin resetear la caja, el grano queda recortado en círculo y se ve un arco enorme cruzando la página. */ width: auto; height: auto; border-radius: 0; z-index: 100; pointer-events: none; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } button, input { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } main { flex: 1 0 auto; display: flex; flex-direction: column; } [hidden] { display: none !important; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* Una sola familia de etiquetas chicas para toda la página */ .half-index, .half-label, .half-brands, .card-brand, .sheet-brand, .sizes-head, .site-footer, .filter, .ph-text { /* Mayúsculas y espaciadas se leen peor que el mismo texto en minúscula: a 11px eran una textura gris antes que palabras. */ font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; } /* -------------------------------------------------------------------------- Encabezado -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 30; /* Con viewport-fit=cover la página llega hasta el borde del teléfono, así que el encabezado se agranda por debajo de la barra de estado en vez de quedar tapado por ella. En pantallas sin muesca el env() vale 0 y no cambia nada. */ height: var(--header-total); padding-top: env(safe-area-inset-top, 0px); display: flex; align-items: center; gap: 40px; padding-left: var(--pad); padding-right: var(--pad); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); /* Capa propia: en iOS el desenfoque de un elemento pegajoso se repinta con un cuadro de retraso mientras se scrollea, y se ve la franja parpadeando. */ transform: translateZ(0); } /* Forro que sube por detrás del encabezado. En iPhone, cuando la barra de la URL se contrae o el scroll rebota contra el tope, arriba del encabezado asoma una franja de contenido sin desenfocar; esto la tapa con el mismo vidrio. En el tope de la página queda fuera de la ventana, invisible. */ .site-header::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 140px; pointer-events: none; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } @supports not (backdrop-filter: blur(1px)) { .site-header, .site-header::before { background: var(--paper); } } .brand { margin-right: auto; font-size: 12px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; text-decoration: none; color: inherit; } .header-nav { display: flex; gap: 26px; } .nav-link, .bag-btn { display: inline-flex; align-items: center; min-height: 40px; font-size: 13px; letter-spacing: 0.06em; color: var(--ink-soft); transition: color 0.25s ease; } .nav-link { position: relative; padding-bottom: 2px; } /* Subrayado que crece desde la izquierda, pegado al texto y no a la caja de click */ .nav-link::after { content: ""; position: absolute; left: 0; bottom: 10px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); } .nav-link:hover, .bag-btn:hover, .nav-link.is-active { color: var(--ink); } .nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); } .bag-btn { gap: 6px; font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- Portada 50 / 50 -------------------------------------------------------------------------- */ .split { position: relative; flex: 1 0 auto; display: grid; grid-template-columns: 1fr 1fr; min-height: 420px; } /* -------------------------------------------------------------------------- El rosal de la marca, justo en la juntura del 50/50 -------------------------------------------------------------------------- La portada no tenía marca por ningún lado: dos columnas de texto y nada que dijera de qué local es. El rosal es vertical, así que cae natural sobre la línea que parte la pantalla, en lugar de la línea de 1px. Va una vez por mitad y no una sola vez sobre el split, por dos razones: 1. Cada mitad tiene `overflow: hidden`, o sea que recorta sola la parte del rosal que le toca. No hace falta ningún clip a mano. 2. Cada media planta puede entonces llevar su propio color. Cuando la cortina sube en una mitad y le da vuelta el fondo, esa media planta se da vuelta con ella y el rosal se sigue viendo entero, mitad tinta y mitad papel. Antes era un solo elemento con `mix-blend-mode` y desaparecía contra la cortina: la cuenta que lo hacía visible sobre un fondo lo borraba sobre el otro. El trazo lo pinta `background-color` a través de una máscara con el alfa del PNG: así el color es una variable más y puede transicionar, cosa que con blend modes no se podía. rosalTrazo.png es el original recortado a su trazo. El recorte no es un detalle de peso de archivo: el PNG que vino del diseño trae, además del dibujo, un halo de alfa <= 10 que ocupa media tela y no se ve en pantalla. Con el halo adentro, `contain` centra la tela y no el rosal, y el dibujo queda corrido de la juntura. La proporción de acá abajo es la del recorte. -------------------------------------------------------------------------- */ .half-rose { position: absolute; /* De arriba a abajo del split, con el ancho que le pida la proporción del dibujo: es la altura la que manda, no el ancho. */ top: 0; bottom: 0; aspect-ratio: 256 / 1247; z-index: 1; pointer-events: none; background-color: var(--ink); -webkit-mask: url("/photosSrc/rosalTrazo.png") center / contain no-repeat; mask: url("/photosSrc/rosalTrazo.png") center / contain no-repeat; opacity: 0.78; } /* -------------------------------------------------------------------------- El barrido del cambio de color -------------------------------------------------------------------------- La primera versión hacía el cambio con una transición de `background-color`. Mal: entre tinta y papel la interpolación pasa por un gris del medio que no contrasta con ninguno de los dos fondos, así que a mitad de camino el rosal se apagaba y parecía desenfocado. Y encima el cambio empezaba arriba y abajo a la vez, mientras la cortina iba subiendo: dos movimientos distintos. Ahora el color de vuelta es una capa aparte que sube igual que la cortina — misma curva, misma duración, mismo origen— y el rosal está siempre pintado de un color pleno: tinta arriba de la línea, papel abajo. Lo que se mueve es la línea, no el color. Como es la máscara del padre la que recorta, alcanza con un rectángulo. -------------------------------------------------------------------------- */ .half-rose::after { content: ""; position: absolute; inset: 0; background: var(--paper); transform: scaleY(0); transform-origin: bottom; transition: transform 0.62s var(--ease); } /* Centrado sobre la juntura: cada mitad pone su caja a caballo de su propio borde interno y el overflow se queda con la mitad de afuera. */ .half:first-child .half-rose { left: 100%; transform: translateX(-50%); } .half + .half .half-rose { right: 100%; transform: translateX(50%); } /* Con el rosal puesto, la línea divisoria sobra: son dos separadores haciendo el mismo trabajo, uno encima del otro. */ .split .half + .half::before { opacity: 0; } .half { position: relative; display: flex; align-items: center; justify-content: center; padding: var(--pad); overflow: hidden; } /* Toda la mitad entra a la categoría (ver portada.js), así que toda la mitad tiene que parecer clickeable. */ .half:not(.is-empty) { cursor: pointer; } .half + .half::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line); } /* Cuerpo centrado de cada mitad. Va por encima de la cortina. */ .half-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; width: min(100%, 460px); } .half-title { margin: 0; font-size: clamp(34px, 4.6vw, 68px); font-weight: 500; line-height: 0.94; letter-spacing: -0.035em; } .half-data { display: flex; justify-content: center; gap: clamp(32px, 4vw, 56px); margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--line); width: min(100%, 340px); } .half-data dt { font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); } /* El dato es lo que la clienta vino a buscar ("¿tenés mi talle?"): tiene que pesar más que su etiqueta, no lo mismo. */ .half-data dd { margin: 6px 0 0; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.2; font-variant-numeric: tabular-nums; } .half-brands { margin: 14px 0 0; max-width: 44ch; line-height: 1.9; color: var(--ink-faint); } /* Botones de acción: una barra de ancho fijo con la línea abajo. Mismas dimensiones en la portada y en la ficha. */ .half-cta, .add-btn { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(100%, 280px); min-height: 48px; padding: 0 0 2px; font-size: 13.5px; letter-spacing: 0.12em; text-transform: uppercase; } .half-cta { margin-top: 30px; } .half-cta::before, .half-cta::after, .add-btn::before, .add-btn::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; } .half-cta::before, .add-btn::before { background: var(--line); } .half-cta::after, .add-btn::after { background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); } .half-cta:hover::after, .add-btn:hover::after { transform: scaleX(1); } /* La flecha se corre unos píxeles al pasar */ .btn-arrow { font-size: 14px; letter-spacing: 0; color: var(--ink-soft); transition: transform 0.4s var(--ease), color 0.3s ease; } .half-cta:hover .btn-arrow, .add-btn:hover .btn-arrow { transform: translateX(4px); color: var(--ink); } /* -------------------------------------------------------------------------- Catálogo -------------------------------------------------------------------------- */ .catalog { padding-bottom: clamp(64px, 12vh, 140px); } .catalog-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: clamp(28px, 5vh, 56px) var(--pad) 20px; } .catalog-title { margin: 0; font-size: clamp(28px, 3.4vw, 48px); font-weight: 500; line-height: 1; letter-spacing: -0.035em; } .catalog-count { margin: 0 0 8px; color: var(--ink-faint); font-variant-numeric: tabular-nums; } .back-link { display: inline-flex; align-items: center; min-height: 34px; color: var(--ink-soft); font-size: 13px; letter-spacing: 0.06em; transition: color 0.25s ease; } .back-link:hover { color: var(--ink); } .catalog-bar { position: sticky; top: var(--header-total); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 14px var(--pad); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: clamp(26px, 4vh, 44px); } @supports not (backdrop-filter: blur(1px)) { .catalog-bar { background: var(--paper); } } /* Filtros: texto, sin cajas */ /* Con los chips recuadrados el aire va por fuera de la caja y no entre dos palabras sueltas: 22px de separación los dejaba flotando de a uno. */ .filters { display: flex; flex-wrap: wrap; gap: 8px; } .filter { position: relative; display: inline-flex; align-items: center; min-height: 34px; padding-bottom: 1px; color: var(--ink-faint); transition: color 0.25s ease; } .filter::after { content: ""; position: absolute; left: 0; bottom: 7px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); } .filter:hover { color: var(--ink-soft); } .filter.is-active { color: var(--ink); } .filter:hover::after, .filter.is-active::after { transform: scaleX(1); } .tools { display: flex; align-items: center; gap: 28px; } .search input { width: 200px; padding: 9px 0; background: transparent; border: 0; border-bottom: 1px solid var(--line); font-size: 13px; transition: border-color 0.3s ease; } .search input::placeholder { color: var(--ink-faint); } .search input:focus { outline: none; border-bottom-color: var(--ink); } /* "Ampliar", "Limpiar filtros", "Ver más": son botones y hasta ahora eran texto gris en mayúsculas, indistinguibles de las etiquetas que los rodean. Con el recuadro se ven antes de tocarlos. */ .grid-toggle { flex: none; display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px; white-space: nowrap; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); background: var(--paper-deep); border: 1px solid var(--line); transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; } .grid-toggle:hover { color: var(--paper); background: var(--ink); border-color: var(--ink); } /* -------------------------------------------------------------------------- Grilla -------------------------------------------------------------------------- */ .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(34px, 4.5vh, 56px) var(--pad); padding: 0 var(--pad); } .grid.is-wide { grid-template-columns: repeat(3, 1fr); } /* Columna: el bloque del precio se va al fondo con `margin-top: auto` (más abajo) y así las placas de una misma fila quedan a la misma altura sin reservarle renglones de más al nombre. */ .card { display: flex; flex-direction: column; width: 100%; text-align: left; /* Perspectiva más corta que la del boceto: con la misma inclinación, cuanto más cerca está el punto de fuga más se nota el volumen. */ perspective: 800px; /* Las escribe el JS con la posición del puntero */ --rx: 0deg; --ry: 0deg; } /* Vidriera de sólo exhibición: la tarjeta se sigue viendo (y se sigue inclinando con el puntero) pero no se ofrece como algo en lo que entrar. */ .card.is-solo-vista { cursor: default; } .card-photo { position: relative; /* En la columna flex la foto no se achica: manda su proporción. */ flex: none; aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; background: var(--paper-deep); transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.7s var(--ease), background-color 0.5s ease; } .card.is-tilting .card-photo { transition: background-color 0.5s ease; } .card:hover .card-photo { background: #e5e2dc; } /* Marco interior: el único indicio de que la tarjeta es un plano en el espacio */ .card-photo::before { content: ""; position: absolute; inset: 18px; z-index: 1; border: 1px solid rgba(23, 22, 20, 0.13); transform: translateZ(34px); transition: inset 0.7s var(--ease), border-color 0.5s ease; } .card:hover .card-photo::before { inset: 12px; border-color: rgba(23, 22, 20, 0.22); } .ph-text { color: var(--ink-faint); transform: translateZ(48px); } .card-brand { margin: 20px 0 0; color: var(--ink-faint); } .card-name { margin: 7px 0 16px; font-size: 18px; font-weight: 400; } /* -------------------------------------------------------------------------- La placa del precio -------------------------------------------------------------------------- Agrandarlo alcanzó para encontrarlo, pero seguía siendo un renglón más de la misma columna de texto. La placa lo separa del resto sin recurrir a un recuadro, que en esta hoja sería un cuerpo extraño: el fondo apenas se despega del papel y lo que dibuja la forma son cuatro escuadras de 1px en las esquinas, del mismo vocabulario que la línea bajo los botones. La etiqueta de precio de una vidriera de verdad, no una caja. Sirve para los dos precios: el de lista arriba y el de efectivo abajo, que es la razón de que sea una columna y no una línea. -------------------------------------------------------------------------- */ .price-tag, .sheet-price { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 9px 18px 10px; background: var(--plaque); transition: background-color 0.5s ease; } /* Las escuadras: dos pseudo-elementos, dos esquinas cada uno. */ .price-tag::before, .price-tag::after, .sheet-price::before, .sheet-price::after { content: ""; position: absolute; width: 9px; height: 9px; border: 0 solid var(--ink-faint); transition: border-color 0.5s ease; } .price-tag::before, .sheet-price::before { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; } .price-tag::after, .sheet-price::after { right: 0; bottom: 0; border-right-width: 1px; border-bottom-width: 1px; } /* El aire sobrante de la tarjeta se junta acá, entre el nombre y la placa: es el único lugar donde un hueco de más se lee como aire y no como un olvido. `align-self` es lo que le impide estirarse a todo el ancho de la columna. */ .price-tag { align-self: flex-start; /* El mínimo lo pone el margen de abajo de .card-name; esto sólo se come lo que sobra. */ margin-top: auto; } /* La tarjeta entera responde al mouse; la placa se suma en vez de quedarse quieta mientras todo lo demás se mueve. */ .card:hover .price-tag { background: var(--plaque-strong); } .card:hover .price-tag::before, .card:hover .price-tag::after { border-color: var(--ink); } /* El precio es de lo primero que se busca en una tarjeta: iba del mismo tamaño que el resto y en gris, o sea que había que ir a encontrarlo. */ .card-price { margin: 0; font-size: 18px; line-height: 1.25; color: var(--ink); font-variant-numeric: tabular-nums; } .card-price s { margin-left: 10px; color: var(--ink-faint); } /* El precio en efectivo va debajo del de lista, más chico: es una condición de pago, no el precio del producto. La línea del medio es la misma que separa todo lo demás en esta hoja, y acá además dice que son dos precios del mismo producto y no un precio partido en dos renglones. */ .card-price-cash, .lightbox-price-cash { align-self: stretch; padding-top: 5px; border-top: 1px solid var(--line); } .card-price-cash { display: block; margin: 0; font-size: 15px; line-height: 1.25; font-variant-numeric: tabular-nums; color: var(--ink-soft); } .card-price-cash small { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); } .empty { padding: 0 var(--pad); color: var(--ink-faint); } /* -------------------------------------------------------------------------- Ficha: repite el 50 / 50 de la portada -------------------------------------------------------------------------- */ .overlay { position: fixed; inset: 0; z-index: 40; display: flex; align-items: stretch; background: rgba(23, 22, 20, 0.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: fade 0.3s ease both; /* El gesto de scroll muere acá: no se lo pasa al catálogo de atrás cuando la ficha llega a su tope. */ overscroll-behavior: contain; } .sheet { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 1400px; margin: auto; max-height: 100svh; overflow: auto; background: var(--paper); animation: sheet-in 0.55s var(--ease) both; } @keyframes fade { from { opacity: 0; } } @keyframes sheet-in { from { opacity: 0; transform: translateY(18px); } } .sheet-close { position: absolute; top: 14px; right: var(--pad); z-index: 2; display: inline-flex; align-items: center; min-height: 40px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); } .sheet-close:hover { color: var(--ink); } .sheet-photo { position: relative; display: flex; align-items: center; justify-content: center; min-height: 54svh; overflow: hidden; background: var(--paper-deep); perspective: 1200px; --mx: 50%; --my: 50%; --tx: 0px; --ty: 0px; } /* Luz suave que sigue al puntero: es el único brillo de la página */ .sheet-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient( 460px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 68% ); } .sheet-photo .ph-text { position: relative; z-index: 1; transform: translate3d(var(--tx), var(--ty), 30px); transition: transform 0.6s var(--ease); } .sheet-photo.is-tracking .ph-text { transition: none; } .sheet-info { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(40px, 6vh, 76px) var(--pad); /* Sin esto, la columna de la información puede crecer más allá de su mitad y aplastar a la de la foto hasta 0px. El culpable es cualquier hijo que se desplace de costado —hoy el carrusel de "de la misma marca"—: por defecto un ítem de grid tiene `min-width: auto`, así que reclama el ancho de todo su contenido en vez de dejarlo scrollear. Pasó de verdad: la ficha se abría sin foto en cada producto que tuviera relacionados. */ min-width: 0; } .sheet-brand { margin: 0; color: var(--ink-faint); } .sheet-title { margin: 14px 0 0; font-size: clamp(24px, 2.4vw, 36px); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; } /* La ficha usa la misma placa que la tarjeta (ver "La placa del precio"), con el aire que le corresponde a un precio de este tamaño. Es una columna: el de lista arriba y el de efectivo abajo. */ .sheet-price { margin: 18px 0 0; padding: 13px 22px 14px; font-size: 18px; font-variant-numeric: tabular-nums; } .sheet-price s, .sale-tag { font-size: 13px; color: var(--ink-faint); } .sheet-text { margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--line); max-width: 46ch; color: var(--ink-soft); } .sheet-code { margin: 14px 0 0; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); } .sizes { width: min(100%, 560px); margin-top: 30px; } .sizes-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 14px; color: var(--ink-faint); } .sizes-note { letter-spacing: 0.1em; } /* Talles: números en una fila, sin cajas */ /* Con los talles recuadrados el aire va por fuera de la caja: 18px entre dos números sueltos los dejaba flotando, entre dos fichas los separa. */ .sizes-grid { display: flex; flex-wrap: wrap; gap: 10px; } .size { position: relative; display: inline-flex; align-items: center; justify-content: center; /* Se tocan con el dedo: 44px es el mínimo que se acierta sin apuntar. */ min-width: 44px; min-height: 44px; font-size: 18px; font-variant-numeric: tabular-nums; color: var(--ink-soft); transition: color 0.25s ease; } .size::after { content: ""; position: absolute; left: 0; bottom: 7px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transition: transform 0.3s var(--ease); } .size:hover, .size.is-active { color: var(--ink); } .size:hover::after, .size.is-active::after { transform: scaleX(1); } .size:disabled { color: var(--ink-faint); cursor: default; text-decoration: line-through; } .size:disabled::after { display: none; } .add-btn { margin-top: 34px; } /* -------------------------------------------------------------------------- Pie y aviso -------------------------------------------------------------------------- */ .site-footer { display: flex; flex-wrap: wrap; gap: 8px 32px; padding: 22px var(--pad); border-top: 1px solid var(--line); color: var(--ink-faint); } .site-footer p { margin: 0; } .toast { position: fixed; left: var(--pad); bottom: 26px; z-index: 60; padding: 13px 0; border-top: 1px solid var(--ink); min-width: 260px; background: var(--paper); font-size: 13px; animation: toast-in 0.4s var(--ease) both; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } } /* -------------------------------------------------------------------------- Movimiento: un solo gesto, la persiana -------------------------------------------------------------------------- */ .reveal { clip-path: inset(0 0 102% 0); transform: translateY(14px); } .reveal.is-in { clip-path: inset(0 0 -20% 0); transform: none; transition: clip-path 0.9s var(--ease) var(--reveal-delay, 0s), transform 0.9s var(--ease) var(--reveal-delay, 0s); } /* -------------------------------------------------------------------------- Pantallas chicas -------------------------------------------------------------------------- */ @media (max-width: 1200px) { .grid { grid-template-columns: repeat(3, 1fr); } .grid.is-wide { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { :root { --header-h: 56px; } /* En el teléfono la ilustración entra recortada por los lados y las tarjetas le tapan casi todo el hueco: sube para que al menos se lea como textura. */ body.vidriera:not(.en-portada) { --bg-ilustracion: 0.14; } .site-header { gap: 10px; } /* En 390px entran cuatro cosas en el encabezado (marca, dos categorías y Staff): hay que apretar tipografía y tracking o "Staff" queda cortado contra el borde. */ .brand { font-size: 10px; letter-spacing: 0.08em; white-space: nowrap; } .header-nav { gap: 12px; } .nav-link { font-size: 11px; } .staff-link { font-size: 9px; } .split { grid-template-columns: 1fr; } /* Apiladas y a mitad de pantalla cada una: la portada sigue entrando entera sin scroll, que es su razón de ser. */ .vidriera.en-portada .split { grid-template-rows: 1fr 1fr; } .half { min-height: 0; } /* Con las mitades apiladas, la juntura pasa a estar en el medio de la pantalla, entre el botón de una categoría y el título de la otra: el rosal ahí no separa nada, se mete en el medio. Sube a la cabecera de la primera mitad, que en un teléfono es lo primero que se ve, y hace de sello de la marca. La segunda media planta no tiene juntura que marcar y se va. */ .half + .half .half-rose { display: none; } .half:first-child .half-rose { top: 14px; bottom: auto; left: 50%; transform: translateX(-50%); /* La caja mide justo el medallón, y la máscara va al ancho de la caja: el recorte cae exacto sobre el círculo de la "S". El rosal entero y tan chico no se lee, y con un pelo más de caja asoman hojas cortadas. */ width: 96px; height: 96px; aspect-ratio: auto; -webkit-mask-size: 96px auto; mask-size: 96px auto; -webkit-mask-position: center 50%; mask-position: center 50%; /* Y el redondel se queda con el redondel: la caja cuadrada dejaba asomar las puntas de las hojas de arriba y de abajo, cortadas al ras. */ clip-path: circle(49%); } /* Le deja el lugar al sello para que no se monte sobre el primer título, sin empujar: la portada tiene que seguir entrando sin scroll. */ .split .half:first-child { padding-top: calc(var(--pad) + 106px); } /* Vuelve la línea divisoria: acá el rosal ya no está separando las mitades. */ .split .half + .half::before { opacity: 1; } .half-title { font-size: clamp(30px, 9vw, 46px); } .half + .half::before { left: var(--pad); right: var(--pad); top: 0; bottom: auto; width: auto; height: 1px; } .catalog-head { flex-direction: column; align-items: flex-start; gap: 12px; } .catalog-bar { flex-direction: column; align-items: stretch; gap: 14px; } .tools { justify-content: space-between; } .search { flex: 1; } .search input { width: 100%; } /* En una columna la ficha mide más que la pantalla (foto + talles + el formulario de envío). El que scrollea es el overlay, no la ficha: así el alto de la ficha es libre y no hay nada que quede fuera de alcance. Antes la ficha crecía dentro de un overlay fijo de 100svh sin scroll y todo lo que pasaba del primer pantallazo era inaccesible. */ .overlay { align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Sin el desenfoque: la ficha tapa la pantalla entera, así que no se ve, y mientras esté puesto el navegador toma al overlay como marco de referencia de los hijos fijos y el botón de cerrar se va con el scroll. */ -webkit-backdrop-filter: none; backdrop-filter: none; } .sheet { grid-template-columns: 1fr; max-height: none; min-height: 100%; margin: 0; overflow: visible; /* Sólo el fundido, sin el desplazamiento de entrada: al terminar, una animación con transform deja el elemento con una matriz identidad puesta, y eso alcanza para que el navegador lo tome como marco de referencia del botón de cerrar, que entonces scrollea con la ficha en vez de quedarse fijo. El desplazamiento de 18px no se extraña en un teléfono. */ animation: fade 0.35s ease both; } /* Queda flotando sobre la foto: al scrollear la ficha, la salida sigue ahí. Funciona porque ni el overlay ni la ficha tienen ya filtro ni transform puestos: cualquiera de los dos lo volvería el marco de referencia del botón y entonces se iría con el contenido en vez de quedarse fijo. */ .sheet-close { position: fixed; top: 10px; right: var(--pad); z-index: 5; min-height: 44px; padding: 0 14px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); } .grid, .grid.is-wide { grid-template-columns: repeat(2, 1fr); } /* Proporción de foto en vez de un alto arbitrario: con min-height la caja quedaba casi cuadrada y una foto vertical dejaba dos franjas de papel a los costados. Con 4/5 la foto llena el ancho de la pantalla. */ .sheet-photo { min-height: 0; aspect-ratio: 4 / 5; } .toast { left: var(--pad); right: var(--pad); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { clip-path: none; transform: none; } .overlay, .sheet, .toast { animation: none; } * { transition-duration: 0.01ms !important; } } /* ========================================================================== Puente con el sistema real -------------------------------------------------------------------------- El boceto era una maqueta suelta. Acá se le enchufan los nombres de clase que ya usan los módulos de vidriera/ y las piezas que la maqueta no tenía. ========================================================================== */ /* base.css pinta dos manchones de color fijos con body::before/::after para el panel oscuro. Acá no van: el ::before se reusa para la ilustración del local y el ::after para el grano. */ body.vidriera::before { content: none; } /* -------------------------------------------------------------------------- Fondo: la ilustración del local -------------------------------------------------------------------------- El dibujo a tinta de la vidriera, en negativo y muy bajo, detrás del catálogo y del acceso staff. En la portada NO va: ahí las dos mitades son todo el diseño y cualquier cosa por detrás las ensucia. Va en un pseudo-elemento fijo y no en background-attachment: fixed, que en iOS se mueve a los saltos. Para que el z-index negativo no lo deje detrás del fondo de la página, el color base lo pinta y no . -------------------------------------------------------------------------- */ html { background: var(--paper); } body.vidriera:not(.en-portada)::before { content: ""; position: fixed; inset: 0; /* base.css usa este mismo pseudo-elemento como manchón de color: un círculo de 62vw anclado arriba a la izquierda. Sin resetear la caja, inset: 0 no alcanza —width y height siguen mandando— y el dibujo queda encerrado en un cuadrado en un rincón. Es el mismo reset que hace el grano del ::after. */ width: auto; height: auto; border-radius: 0; background-color: transparent; z-index: -1; pointer-events: none; background: url("/background-tienda.jpg?v=20260803") center / cover no-repeat; /* El dibujo es tinta negra sobre papel claro: invertido queda trazo claro sobre el fondo oscuro, que es el mismo dibujo leído al revés. */ filter: invert(1) grayscale(1); /* El encuadre es el mismo en todas las pantallas: el dibujo entero, centrado. Lo que cambia es cuánto se ve — en el catálogo va más bajo que en el acceso porque compite con el título de la categoría y con las tarjetas. */ opacity: var(--bg-ilustracion, 0.09); } /* El contenido cuelga de #login-screen, así que es él —y no — quien tiene que estirarse: si no, el pie queda flotando a media pantalla. */ .vidriera #login-screen { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 100svh; } /* Los módulos ocultan cosas con .hidden, no con el atributo [hidden]. */ .vidriera .hidden { display: none !important; } /* Con la ficha abierta el catálogo de atrás no se mueve. El overflow tiene que ir también en : el elemento que scrollea la página es él, así que ponerlo sólo en dejaba el fondo corriéndose por debajo de la ficha mientras la ficha misma no se movía (se veía en el celular sobre todo). */ html:has(> body.body-no-scroll), body.body-no-scroll { overflow: hidden; overscroll-behavior: none; } /* --------------------------------------------------------------- Arranque */ .vidriera .loading-overlay { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: var(--paper); color: var(--ink-faint); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; } .vidriera .loader, .vidriera .spinner-loader { width: 26px; height: 26px; border: 1px solid var(--line); border-top-color: var(--ink); border-radius: 50%; animation: vidriera-spin 0.9s linear infinite; } @keyframes vidriera-spin { to { transform: rotate(360deg); } } /* ------------------------------------------------------- Encabezado y pie */ .staff-link { display: inline-flex; align-items: center; min-height: 40px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--ink-faint); transition: color 0.25s ease; } .staff-link:hover { color: var(--ink); } /* -------------------------------------------------------------------------- El pie -------------------------------------------------------------------------- Era una línea de 1px y tres columnas de texto suelto: lo único que lo separaba de la última fila de tarjetas. Ahora es una banda con fondo propio —el mismo tono de la placa del precio— y con aire arriba, así que se lee como el final de la página y no como una tarjeta más que salió gris. -------------------------------------------------------------------------- */ .site-footer { display: block; margin-top: clamp(56px, 9vh, 110px); padding: clamp(38px, 6vh, 62px) var(--pad) 30px; background: var(--plaque); color: var(--ink-soft); } .footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px clamp(32px, 5vw, 72px); } /* Cada columna arranca con su título y su línea: es la misma regla que separa los datos en la portada y el texto en la ficha. */ .footer-title { color: var(--ink); margin-bottom: 16px !important; padding-bottom: 11px; border-bottom: 1px solid var(--line); } .footer-col p + p { margin-top: 7px; } /* La dirección, el teléfono y el Instagram son lo único del pie en lo que se puede hacer click, y hasta ahora eran idénticos a los horarios de al lado: el subrayado aparecía recién al pasar por encima, o sea nunca en un teléfono. Ahora está siempre y lo que cambia al tocarlos es el color. */ .site-footer a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color 0.25s ease, color 0.25s ease; } .site-footer a:hover { color: var(--ink); border-bottom-color: var(--ink); } .footer-bottom { margin-top: clamp(34px, 5vh, 52px); padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-faint); } /* --------------------------------------------------------------- Portada */ /* Una categoría sin nada cargado no se puede abrir. */ .half.is-empty { opacity: 0.55; } .half.is-empty .half-cta { cursor: default; } .half.is-empty .half-cta::after { display: none; } /* ---------------------------------------------------------------- Filtros */ .filter-rows { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; } .filter-row { display: flex; align-items: baseline; gap: 18px; min-width: 0; } .filter-label { flex: none; width: 74px; white-space: nowrap; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); } /* -------------------------------------------------------------------------- Los chips que dibuja filtros.js -------------------------------------------------------------------------- Eran palabras sueltas en gris con un subrayado que aparecía al pasar por encima: hasta que el mouse no los tocaba no había manera de saber que se podían tocar, y en una fila de talles se leían como una lista de números. Ahora cada uno tiene su recuadro, y el elegido se da vuelta —tinta de fondo, papel de letra—, que es el mismo gesto de la cortina de la portada. -------------------------------------------------------------------------- */ .store-talle-filter-btn, .store-filter-chip { position: relative; display: inline-flex; align-items: center; min-height: 32px; padding: 0 13px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); background: var(--paper-deep); border: 1px solid var(--line); cursor: pointer; transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; } .store-talle-filter-btn { font-variant-numeric: tabular-nums; } .store-talle-filter-btn:hover, .store-filter-chip:hover { color: var(--ink); border-color: var(--ink-faint); } .store-talle-filter-btn.active, .store-filter-chip.active { color: var(--paper); background: var(--ink); border-color: var(--ink); } .tools { flex: none; } /* ----------------------------------------------------------------- Grilla */ .card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease; } .card-img.loaded { opacity: 1; } /* "¿Tenés mi talle?" es la pregunta que hace todo el mundo antes de mirar nada más: a 11px en gris flojo no se leía de un vistazo. Va debajo de la placa, no encima: los talles son una condición del precio, y arriba partían en dos el bloque de nombre y precio. */ .card-sizes { margin: 10px 0 0; font-size: 13px; letter-spacing: 0.06em; color: var(--ink-soft); } .card-flags { position: absolute; top: 0; left: 0; z-index: 3; /* Levantadas en el eje Z para que floten junto con el marco cuando la tarjeta se inclina, en vez de quedar pegadas al fondo. */ transform: translateZ(40px); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px; } /* Las dos únicas manchas de color de toda la vidriera: son las que tienen que frenar el ojo mientras se recorre la grilla, y por eso se salen del papel y la tinta. */ .card-flag { padding: 3px 8px; background: var(--flag-ultimas-bg); color: var(--flag-ultimas-ink); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; } .card-flag-offer { background: var(--flag-oferta-bg); color: var(--flag-oferta-ink); } .card-price.is-offer s { margin: 0 8px 0 0; color: var(--ink-faint); } .load-more { padding: clamp(30px, 5vh, 52px) var(--pad) 0; text-align: center; } /* ------------------------------------------------------------------ Ficha */ /* El formulario de compra es largo: la ficha se lee de arriba hacia abajo y no centrada como en el boceto, que sólo tenía cuatro renglones. */ .sheet-info { justify-content: flex-start; } .sheet-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: translate3d(var(--tx), var(--ty), 0); transition: opacity 0.6s ease, transform 0.6s var(--ease); } .sheet-photo img.loaded { opacity: 1; } /* Con foto cargada sobra el cartel de "Sin foto". */ .sheet-photo img.loaded ~ .ph-text { display: none; } @media (min-width: 821px) { /* La foto acompaña el scroll del formulario en vez de irse para arriba. */ .sheet-photo { position: sticky; top: 0; align-self: start; height: 100svh; } } .sheet-countdown { margin-top: 10px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); } /* Talles de la ficha: mismo trazo que .size del boceto. */ /* -------------------------------------------------------------------------- Los talles de la ficha -------------------------------------------------------------------------- Eran números de 15px en gris flojo con un subrayado que aparecía al pasar el mouse: no se leían y no parecían botones. Y elegir uno es el paso obligado de toda la compra —sin talle no hay nada que despachar—, así que tiene que ser lo más visible de la ficha. Ahora son fichas de verdad: recuadro, número grande, y el elegido se da vuelta (tinta de fondo, papel de letra), el mismo gesto que los filtros del catálogo y la cortina de la portada. -------------------------------------------------------------------------- */ .store-lightbox-talle-btn { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 56px; min-height: 52px; padding: 6px 12px; background: var(--paper-deep); border: 1px solid var(--line); cursor: pointer; font-size: 19px; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink); transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } .store-lightbox-talle-btn:hover { border-color: var(--ink-faint); background: var(--plaque-strong); } .store-lightbox-talle-btn.active { color: var(--paper); background: var(--ink); border-color: var(--ink); } .talle-low-stock-badge { font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; color: var(--flag-ultimas-bg); } /* Sobre el talle elegido el fondo es tinta: el rojo apagado del aviso no contrasta contra eso. */ .store-lightbox-talle-btn.active .talle-low-stock-badge { color: var(--paper); } /* Apagado se tiene que ver apagado. -------------------------------------------------------------------------- Antes sólo cambiaba de gris: el botón se leía igual de disponible, se lo apretaba, y no pasaba nada —porque falta elegir el talle y eso no lo decía nadie—. Ahora baja la opacidad, se le va la línea de abajo y el propio texto dice qué falta (ver ficha.js). */ .add-btn.disabled, .add-btn:disabled { color: var(--ink-faint); cursor: not-allowed; opacity: 0.5; } .add-btn.disabled::before, .add-btn:disabled::before { background: transparent; } .add-btn.disabled::after, .add-btn:disabled::after { display: none; } .add-btn.disabled .btn-arrow, .add-btn:disabled .btn-arrow { opacity: 0; } /* ------------------------------------------------- Formulario de compra */ .sheet-form, .sheet-otp { width: min(100%, 560px); margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .form-group { margin-bottom: 16px; } /* Las etiquetas eran de 11px en el gris más flojo de la paleta: contra el fondo se leían como una textura y no como palabras, y en un formulario de ocho campos hay que poder saber cuál es cuál sin acercarse. */ .sheet-form label, .sheet-otp label { display: block; margin-bottom: 7px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); } /* Los campos eran una línea de 1px sobre el fondo: sin caja, no se veía dónde había que escribir. Ahora tienen su propia superficie —la misma que la placa del precio— y un borde completo. */ .sheet-form input, .sheet-form select, .sheet-otp input[type="text"], .sheet-otp input[type="tel"] { width: 100%; padding: 11px 13px; background: var(--plaque); border: 1px solid var(--line); color: var(--ink); font-size: 15px; transition: border-color 0.25s ease, background-color 0.25s ease; } .sheet-form input::placeholder, .sheet-otp input::placeholder { color: var(--ink-faint); } .sheet-form input:hover, .sheet-form select:hover, .sheet-otp input:hover { border-color: var(--ink-faint); } .sheet-form input:focus, .sheet-form select:focus, .sheet-otp input:focus { outline: none; border-color: var(--ink); background: var(--plaque-strong); } .delivery-options { display: flex; gap: 22px; flex-wrap: wrap; } .delivery-options.is-stacked { flex-direction: column; gap: 10px; } /* Las opciones de radio también son