/* ───────────────────────────────────────────────────────────────────── * EL CATÁLOGO * * El mismo mundo visual de la ficha del club —negro, Fraunces, los mismos * tokens— aplicado a las pantallas que listan productos: la categoría, la * familia y la búsqueda. Antes vivían en la vitrina clara de cada tienda, y * el que venía desde la página del club cruzaba de un mundo al otro en un * clic. * * LA FICHA DEL PRODUCTO ES LA MISMA DE SIEMPRE. `partials/ficha.ejs` no se * duplicó: acá se le pone otra piel. Esa ficha carga cosas que el diseño de * referencia no tenía —el badge de «últimas», las specs que deciden la * compra, las cuotas, el aviso de stock bajo, el botón de comparar— y una * copia nueva las habría perdido de entrada, o peor: las habría perdido más * adelante, cuando alguien arregle una de las dos y no sepa de la otra. * ───────────────────────────────────────────────────────────────────── */ .ct { --bg: #0B0C0E; --surface: #141619; --accent: #1F4D3A; --text: #F2EFE9; --muted: #B7BCB7; --line: #3D423F; --serif: 'Fraunces', Georgia, serif; --sans: 'Instrument Sans', system-ui, sans-serif; --gutter: clamp(24px, 5vw, 80px); --curva: cubic-bezier(.16, 1, .3, 1); /* LOS TOKENS DEL MUNDO CLARO, EN OSCURO. Adentro del catálogo viven componentes compartidos con la vitrina —la ficha del producto, el carro, el checkout— y hasta los estilos escritos a mano en el marcado cuelgan de estos nombres: el nombre del producto en el carro lleva `style="color: var(--text-primary)"`, que ninguna regla nuestra puede ganarle porque va en el atributo. Redefiniéndolos acá, todo lo prestado se adapta solo en vez de irse persiguiendo uno por uno. `--accent` no está en la lista porque arriba ya se definió: el azul del sistema claro pasa a ser el verde de este mundo, que es lo que se quiere. */ --text-primary: #F2EFE9; --text-secondary: #B7BCB7; --text-tertiary: #8A908C; --surface-raised: #16181B; --surface-sunken: #1C1F24; --surface-page: #0B0C0E; --border: #3D423F; --border-strong: #545A55; --accent-hover: #2C6B51; --accent-soft: #16241E; --accent-contrast: #F2EFE9; --success: #5FBF8B; --success-soft: #12281F; --warning: #E0912F; --warning-soft: #2A1E0C; --danger: #F0564A; --danger-soft: #2C1210; margin: 0; background: var(--bg); color: var(--text); font: 1.0625rem/1.6 var(--sans); padding-inline: var(--gutter); padding-bottom: 96px; } /* `pagina-catalogo` y no `catalogo`: `.catalogo` YA ERA una clase de este sistema —la grilla de barra lateral más productos de la vitrina clara— y ponerla en el convirtió la página entera en dos columnas, con la cabecera apretada en la primera. Es el mismo choque de nombres que ya costó `[hidden]`, `.pcard`/`.fila` y `main.club`. */ body.pagina-catalogo { background: #0B0C0E; } .ct a { color: inherit; text-decoration: none; } .ct img { display: block; width: 100%; object-fit: cover; } .ct h1, .ct h2, .ct h3, .ct p { margin: 0; } .ct h1, .ct h2 { font-family: var(--serif); line-height: .98; letter-spacing: -.03em; font-weight: 600; } .ct h1 { font-size: clamp(4rem, 8vw, 8rem); } .ct h3 { font-weight: 500; } .ct em { font-weight: inherit; } .ct ::selection { background: var(--accent); color: var(--text); } .ct a:focus-visible, .ct button:focus-visible, .ct input:focus-visible, .ct select:focus-visible, .ct summary:focus-visible { outline: 3px solid var(--text); outline-offset: 4px; } .ct button, .ct input, .ct select, .ct summary { font-family: var(--sans); color: inherit; } .ct button, .ct select, .ct summary { cursor: pointer; } .ct-tenue { color: var(--muted); } /* ── La entrada ─────────────────────────────────────────────────────── */ /* Las pantallas del pago son columnas de lectura, no parrillas: un formulario de checkout a 1400 píxeles de ancho es un formulario que nadie termina. */ .ct--angosto { max-width: 700px; margin-inline: auto; } .ct--medio { max-width: 860px; margin-inline: auto; } .ct-migas { font-size: .875rem; color: var(--muted); padding-top: 32px; display: flex; gap: 16px; flex-wrap: wrap; } .ct-migas a { border-bottom: 1px solid var(--line); } .ct-migas a:hover { border-bottom-color: var(--text); } .ct-intro { display: flex; justify-content: space-between; align-items: end; gap: 48px; padding-block: 32px 48px; } .ct-intro p { max-width: 350px; color: var(--muted); font-size: .9375rem; margin-top: 12px; } .ct-rot { font-size: .875rem; text-transform: uppercase; letter-spacing: .12em; } /* ── Buscar ─────────────────────────────────────────────────────────── */ .ct-buscar { display: flex; gap: 16px; align-items: center; border-bottom: 1px solid var(--text); padding: 16px 0; margin-bottom: 40px; } .ct-buscar label { font-size: .875rem; white-space: nowrap; } .ct-buscar input { width: 100%; background: none; border: 0; padding: 8px; font: 1.125rem var(--sans); } .ct-buscar input::placeholder { color: var(--muted); } .ct-buscar button { background: none; border: 0; padding: 0; font-size: .875rem; text-decoration: underline; text-underline-offset: 5px; color: var(--muted); white-space: nowrap; } /* ── Los filtros, arriba y a todo el ancho ────────────────────────── El diseño los traía en una barra lateral y terminaba corrigiéndose a sí mismo con una regla al final del archivo: «que todos los filtros queden visibles sobre los resultados». Acá van así de entrada. La barra lateral sólo se ve entera en pantallas grandes, y en el teléfono —que es de donde viene casi todo— quedaba escondida detrás de un botón. */ /* EL FILTRO, CERRADO AL ENTRAR. Un `

`: abre y cierra sin una línea de JavaScript, se lleva bien con el teclado y funciona con la página a medio cargar. La barra dice «Filtro» y nada más —ni «Filtrar y ordenar» ni un ícono de embudo—: es la palabra que la gente busca. */ .ct-filtro { border: 1px solid var(--line); background: var(--surface); margin-bottom: 32px; } .ct-filtro > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; font-size: 1rem; font-weight: 500; list-style: none; } .ct-filtro > summary::-webkit-details-marker { display: none; } .ct-filtro > summary:hover { background: var(--bg); } /* De qué categoría es lo que hay adentro. Sin esto, «Filtro» a secas no dice que lo que abre son la forma y el balance de LAS PALAS y no del catálogo entero. */ .ct-filtro__n { margin-right: auto; font-weight: 400; font-size: .875rem; color: var(--muted); } /* El signo lo dibuja el CSS y no el HTML: así no hay forma de que el marcado diga «+» con el panel abierto. */ .ct-filtro__s { position: relative; width: 14px; height: 14px; flex: none; } .ct-filtro__s::before, .ct-filtro__s::after { content: ''; position: absolute; inset: 50% 0 auto; height: 1.5px; background: var(--text); transition: transform .25s var(--curva); } .ct-filtro__s::after { transform: rotate(90deg); } .ct-filtro[open] > summary { border-bottom: 1px solid var(--line); } .ct-filtro[open] .ct-filtro__s::after { transform: rotate(0deg); } .ct-filtro__c { padding: 24px; } .ct-panel { background: var(--surface); border: 1px solid var(--line); padding: 24px; margin-bottom: 32px; } .ct-panel__t { font: 500 .875rem var(--sans); margin: 0 0 16px; } .ct-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .ct-cat { display: flex; align-items: center; gap: 12px; background: var(--bg); border: 1px solid var(--line); padding: 12px 16px; font-size: .875rem; transition: border-color .25s; } .ct-cat small { font-size: .75rem; color: var(--muted); } .ct-cat:hover { border-color: var(--text); } .ct-cat.on { background: var(--accent); border-color: var(--text); } .ct-cat.on small { color: var(--text); } /* Cada faceta: el título y sus valores como fichas con su número al lado. El diseño traía un `