/* =========================================================================== MINC ASIAN FOOD — hoja de estilos --------------------------------------------------------------------------- Este archivo NO es una copia del tema base: lo importa y le pinta encima solo lo que cambia. Son 580 líneas propias —comentarios incluidos— en vez de las 2 255 del tema base copiadas y pegadas, y la diferencia importa de verdad: el popup del platillo, el carrito y el checkout —que aquí no se tocan— siguen recibiendo las correcciones de cada actualización del sistema sin que nadie vuelva a abrir este archivo. ESTA HOJA NO IMPORTA LA DEL SISTEMA. Desde la v1.2.0 las pide el sistema por separado —primero la suya, después esta— y le pone a cada una la fecha de su propio archivo. Si se le agregara un `@import` aquí, la del sistema se bajaría dos veces: no rompe nada, pero sobra. NINGÚN COLOR NI TIPOGRAFÍA SE ESCRIBE A MANO. Todo sale de las variables que layout.php imprime con lo que el dueño eligió en su panel. Los valores de respaldo son solo para que nada se rompa si una variable falta. =========================================================================== */ /* Aquí NO va ningún `@import`. La hoja del sistema la pide el propio sistema, por separado y antes que esta, desde la v1.2.0. Así las dos se bajan a la vez —con `@import` iban encadenadas— y las dos se actualizan solas cuando cambian, porque `theme_url()` le pone a cada una la fecha de su archivo. */ /* =========================================================================== 1. AMBIENTE =========================================================================== */ /* Obligatoria para que el ajuste de tamaño de texto del panel funcione. El tema base ya la trae; se repite porque es la que más caro sale perder. */ html { font-size: var(--escala-texto, 100%); } /* Y esta es la que jamás se puede perder: el popup, el carrito y el checkout son pantallas completas en `position: fixed`. Si algo de aquí abajo les diera `display: flex`, le ganaría al atributo `hidden` y seguirían atrapando todos los toques estando invisibles: la carta se ve perfecta y no responde a nada. */ [hidden] { display: none !important; } /* El resplandor de arriba. Es el mismo rojo de la marca, muy diluido, detrás del banner: lo que en la referencia hace que la parte alta no se sienta un rectángulo negro. Va como fondo del propio contenedor —no como un elemento— para que no exista para el ratón, para el dedo ni para un lector de pantalla. `color-mix` es lo que permite teñirlo con el color del panel en vez de dejar un rojo escrito a mano. El navegador que no lo entienda descarta la línea y se queda sin resplandor, que es un adorno y no se echa de menos. */ .promos { background: radial-gradient(90% 130% at 50% -20%, color-mix(in srgb, var(--color-primario) 26%, transparent) 0%, transparent 68%); } /* =========================================================================== 2. EL BANNER CON SU TEXTO ENCIMA --------------------------------------------------------------------------- La tira, el deslizamiento y los puntitos son los del tema base y no se tocan: el JavaScript del sistema los mueve buscando `.promos__tira` y `.promos__punto`. Lo que se agrega aquí es lo que va encima de la foto. =========================================================================== */ .promo { position: relative; /* El banner se sigue pidiendo en 2:1, que es la medida que dice el panel. Cambiar la proporción aquí recortaría por los lados las promociones que el dueño ya tiene subidas. */ border: 1px solid var(--color-borde, #262626); } .promo__foto { width: 100%; height: 100%; object-fit: cover; } /* EL VELO NO ES DECORACIÓN ------------------------ Quién sabe qué foto va a subir el dueño. Sobre una clara —un plato con luz, un fondo de madera— el texto blanco desaparece. El velo es un degradado que solo oscurece la mitad de abajo, donde está escrito, y deja la comida a la vista arriba, que es lo que vende. */ .promo__velo { position: absolute; inset: 0; background: linear-gradient( to top, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.72) 26%, rgba(0, 0, 0, 0.28) 56%, rgba(0, 0, 0, 0.05) 100% ); } .promo__texto { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .promo__etiqueta { display: inline-block; margin-bottom: 2px; padding: 4px 11px; border-radius: var(--radio-boton, 999px); background: var(--color-primario); color: #fff; font-family: var(--fuente-titulos, inherit); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; line-height: 1.4; } .promo__titulo { font-family: var(--fuente-titulos, inherit); font-size: 1.32rem; font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; color: #fff; /* La sombra es el segundo seguro del contraste: sobre una foto muy clara el velo solo no siempre alcanza los 4.5:1 que hacen falta para leerse. */ text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65); } .promo__sub { font-size: 0.84rem; line-height: 1.3; color: rgba(255, 255, 255, 0.82); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); } /* En pantalla ancha el banner se ve más chico —caben dos y pico— así que el título baja de tamaño para no comerse la foto. */ @media (min-width: 700px) { .promo__titulo { font-size: 1.12rem; } .promo__sub { font-size: 0.78rem; } .promo__texto { padding: 12px 14px 14px; } } /* Los puntitos, alineados a la derecha como en la referencia. */ .promos__puntos { justify-content: flex-end; padding-right: var(--espacio, 16px); } /* =========================================================================== 3. LA VITRINA «Nuevo» --------------------------------------------------------------------------- Un carrusel que se desliza con el dedo y deja la tarjeta centrada sola, sin una línea de JavaScript: `scroll-snap` ya lo hace el navegador. La palabra «Nuevo» NO está escrita en este archivo ni en el HTML: sale de theme.json → opciones.destacados_titulo. Ahí se cambia. =========================================================================== */ .nuevo { /* El ancho de la tarjeta. Todo lo demás se calcula a partir de esto, así que para hacerlas más grandes o más chicas se cambia solo esta línea. */ --carta: min(66vw, 290px); /* CÓMO SE COLOCAN LAS DE LOS LADOS -------------------------------- Estas tres las lee el JavaScript, así que el diseño se ajusta desde aquí sin tocar una línea de código. Y se pueden cambiar por tamaño de pantalla, que es justo lo que hacía falta: en un teléfono no cabe lo mismo que en una pantalla de escritorio. */ --sep: 72%; /* cuánto se aparta la de al lado */ --lejos-escala: 0.82; /* cuánto encoge */ --lejos-opacidad: 0.38; /* cuánto se apaga */ /* De orilla a orilla: las tarjetas de los lados tienen que asomarse hasta el borde de la pantalla. Con margen se vería una caja dentro de otra. */ margin: 4px calc(var(--espacio, 16px) * -1) 26px; } .nuevo__titulo { margin: 0 0 6px; text-align: center; font-family: var(--fuente-titulos, inherit); font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; } .nuevo__tira { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; /* EL HUECO DE ARRIBA NO ES AIRE, ES SITIO PARA LA COMIDA ------------------------------------------------------ El PNG del platillo se sale por el borde de arriba de su tarjeta. Como esta tira desplaza de lado, el navegador le recorta lo que se salga —`overflow-x: auto` obliga también al vertical—, así que el hueco tiene que existir aquí. Sin estos 84 px, a las hamburguesas se les corta la tapa. */ padding-block: 84px 26px; /* Y este es el que permite que la PRIMERA y la ÚLTIMA tarjeta lleguen al centro de la pantalla. Sin él, la primera se queda pegada a la izquierda y el carrusel se ve mal armado justo al entrar. */ padding-inline: calc((100% - var(--carta)) / 2); /* Igual que la barra de categorías: sin esto, al llegar al final el gesto se encadena y la página entera se va de lado. */ overscroll-behavior-x: contain; } .nuevo__tira::-webkit-scrollbar { display: none; } .nuevo__tarjeta { position: relative; flex: 0 0 var(--carta); scroll-snap-align: center; background: var(--color-superficie, #171717); border: 1px solid var(--color-borde, #262626); border-radius: calc(var(--radio, 14px) + 8px); /* 118 px de hueco arriba: es donde se apoya la comida. */ padding: 118px 20px 22px; cursor: pointer; } /* El destacado sin foto no reserva el hueco. Un espacio vacío ahí no se lee como «no hay foto», se lee como «no cargó». */ .nuevo__tarjeta--sinfoto { padding-top: 26px; } .nuevo__foto { position: absolute; top: -78px; /* sobresale por arriba: apoyada, no metida dentro */ left: 6%; right: 6%; height: 186px; /* Que nunca se robe un toque destinado a la tarjeta. */ pointer-events: none; } .nuevo__foto img { width: 100%; height: 100%; /* `contain`, no `cover`: es un PNG recortado, no una foto para encuadrar. Recortarlo le cortaría el pan de arriba. */ object-fit: contain; object-position: bottom center; /* La sombra la proyecta la silueta del PNG, no su caja: es lo que hace que la comida parezca apoyada sobre la tarjeta y no pegada encima. */ filter: drop-shadow(0 20px 22px rgba(0, 0, 0, 0.62)); } .nuevo__nombre { margin: 0 0 6px; font-family: var(--fuente-titulos, inherit); font-size: 1.22rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; text-align: center; } /* La descripción. Dos renglones y corta: en la vitrina el trabajo lo hace la foto, y un párrafo largo empujaría el precio fuera de la tarjeta. Quien quiera leerla entera la tiene completa en el popup, a un toque. */ .nuevo__descripcion { margin: 0 0 14px; text-align: center; font-size: 0.72rem; line-height: 1.4; color: var(--color-texto-suave, #A1A1AA); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nuevo__pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .nuevo__monto { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .nuevo__etiqueta { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-texto-suave, #A1A1AA); } .nuevo__precio { font-family: var(--fuente-titulos, inherit); font-size: 1.55rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: var(--color-texto, #F4F4F5); } /* El MISMO botón que en la carta, con el color de marca del panel. Antes era blanco —el negativo de la página— y se veía bien, pero se salía de lo que el dueño configuró: al cambiar su color primario, este no cambiaba con él. Un botón de pedir que no obedece al panel es un botón que un día no va a pegar con el resto del sitio. */ .nuevo__agregar { flex-shrink: 0; width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--color-primario); color: #fff; font-size: 1.75rem; font-weight: 300; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.16s ease; } .nuevo__agregar:active { transform: scale(0.92); } @media (min-width: 700px) { .nuevo { --carta: 320px; } .nuevo__titulo { font-size: 1.7rem; } } /* Las tres de arriba sirven igual dentro de una @media, por si algún día el teléfono necesita otros valores. Hoy no: con el desvanecido de los bordes de la tira, la tarjeta de al lado ya deja de cortarse contra el borde y el reparto de escritorio se ve bien también en 390 px. */ /* --------------------------------------------------------------------------- MODO CARRUSEL --------------------------------------------------------------------------- La clase la pone el JavaScript. Sin él, nada de esto se aplica y queda la tira que se desliza con el dedo, que es lo que pinta el HTML. Aquí las tarjetas salen de la fila y se colocan con transformaciones, cada una a su distancia de la del centro. No hay desplazamiento: por eso no hay salto posible al dar la vuelta. --------------------------------------------------------------------------- */ .nuevo__tira--giratoria { display: block; position: relative; overflow: hidden; /* recorta las que se van por los lados */ padding: 0; scroll-snap-type: none; /* EL DESVANECIDO DE LOS BORDES ---------------------------- `overflow: hidden` corta en seco: la tarjeta de al lado quedaba partida a mitad de palabra contra el borde de la pantalla. Con la máscara se desvanece en vez de cortarse, que es lo que hace que se lea como algo que sigue más allá del borde y no como un recorte. El 12% y el 88% están calculados para no rozar a la del centro, que ocupa del 17% al 83% de la tira. */ -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%); /* Deja que la página siga subiendo y bajando con el dedo; el gesto horizontal se lo queda el carrusel. Sin esto, arrastrar de lado sobre las tarjetas trabaría el desplazamiento vertical de la página. */ touch-action: pan-y; } .nuevo__tira--giratoria .nuevo__tarjeta { position: absolute; top: 84px; /* el hueco por donde asoma la comida */ left: 50%; width: var(--carta); margin: 0 0 0 calc(var(--carta) / -2); flex: none; /* ESTA LÍNEA NO ES OPCIONAL. La tarjeta del centro se agrandaba con `animation-timeline`, atada al desplazamiento de la tira. Aquí ya no hay desplazamiento, así que esa animación se quedaría congelada en su primer fotograma —y una animación le gana a un estilo puesto desde JavaScript, así que las colocaría todas encima de la primera. Se apaga. */ animation: none !important; /* El giro. Largo y con una curva que frena al final: es lo que hace que se sienta un carrusel que gira y no tres tarjetas que dan un brinco. */ transition: transform 0.72s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.72s ease; } /* La del centro es la única que se toca para pedir; las de los lados se traen al centro, y eso lo hace el JavaScript. */ .nuevo__tira--giratoria .nuevo__tarjeta { cursor: pointer; } /* LA TARJETA DEL CENTRO SE AGRANDA -------------------------------- Sin JavaScript: `animation-timeline: view(inline)` engancha la animación al recorrido de cada tarjeta dentro de la tira. En medio del recorrido —o sea, en el centro de la pantalla— está el fotograma del 50%. Va dentro de `@supports` a propósito. El navegador que no lo entienda no ve nada raro: enseña las tres tarjetas del mismo tamaño, que también se ve bien. Es la mejora la que es opcional, no el carrusel. */ @supports (animation-timeline: view(inline)) { @media (prefers-reduced-motion: no-preference) { .nuevo__tarjeta { animation: minc-foco linear both; /* Esta línea va DESPUÉS de la de arriba a propósito: la forma corta `animation` reinicia la línea de tiempo, y puesta antes se borraría sola. */ animation-timeline: view(inline); } /* Y ya que se sabe cuál está en el centro, las de los lados se le meten debajo en vez de quedar alineadas. El encimado solo se hace aquí dentro porque necesita el `z-index` de la animación para saber cuál va arriba: sin ella, la última tarjeta taparía a la del centro y se vería al revés. */ .nuevo__tira { gap: 0; /* Los 18 px de más compensan el margen negativo de la tarjeta: sin ellos la primera queda 18 px a la izquierda del centro, y eso es lo primero que se ve al entrar al sitio. */ padding-inline: calc((100% - var(--carta)) / 2 + 18px); } .nuevo__tarjeta { margin-inline: -18px; } @keyframes minc-foco { 0% { opacity: 0.38; transform: scale(0.82); z-index: 1; } 50% { opacity: 1; transform: scale(1); z-index: 3; } 100% { opacity: 0.38; transform: scale(0.82); z-index: 1; } } } } /* =========================================================================== 4. LA CARTA — la comida apoyada sobre la tarjeta --------------------------------------------------------------------------- La tarjeta del tema base lleva la foto arriba, recortada en 4:3 y a todo lo ancho. Aquí la foto es un PNG sin fondo que se sale por el borde de arriba, igual que en la vitrina: la misma idea repetida, para que la carta se lea como una sola cosa. Todo esto vive dentro de `.platillos--cuadricula`. La vista de lista se queda tal como viene de fábrica: ahí la foto es una miniatura de 84 px al lado del texto y flotarla no tendría ningún sentido. NO SE TOCÓ card-platillo.php. La tarjeta se rearma entera desde aquí, así que ese archivo sigue siendo el del sistema y sigue recibiendo sus arreglos. =========================================================================== */ /* El aire entre renglones es sitio para la comida del renglón de abajo, que sube 26 px por encima de su tarjeta. La segunda regla es la que aprieta la carta cuando NINGÚN platillo de esa categoría tiene foto —la de sushi de hoy, sin ir más lejos—: sin fotos que asomar, ese aire sobra y deja la lista desparramada. El navegador que no entienda `:has()` descarta esa segunda regla y deja la carta aireada, que es el lado seguro de equivocarse: lo contrario le cortaría la comida. */ .platillos--cuadricula { margin-top: 30px; row-gap: 46px; } .platillos--cuadricula:not(:has(.platillo__foto)) { margin-top: 0; row-gap: 12px; } .platillos--cuadricula > .platillo { /* EL ANCLA. La foto de aquí abajo va en `position: absolute` y se coloca respecto al primer antepasado posicionado. Sin esta línea ese antepasado no sería la tarjeta —el tema base no la posiciona— y los PNG se irían a colocar contra la página entera: la carta aparecería con todas las fotos amontonadas en una esquina. */ position: relative; /* Sin esto el PNG se corta en el borde de la tarjeta: el tema base la recorta para que la foto de 4:3 respete el redondeo. */ overflow: visible; border-radius: calc(var(--radio, 14px) + 2px); padding: 12px; transition: transform 0.16s ease, border-color 0.16s ease; } .platillos--cuadricula > .platillo:active { transform: scale(0.975); } /* El hueco de la foto solo lo reserva el platillo QUE TIENE foto. El de puro texto es una tarjeta compacta y nada más — que es exactamente como se ven hoy los rolls, y se ven bien. */ .platillos--cuadricula > .platillo:not(.platillo--sinmarco) { padding-top: 78px; } .platillos--cuadricula > .platillo > .platillo__foto { position: absolute; top: -26px; left: 10px; right: 10px; width: auto; height: 96px; aspect-ratio: auto; /* Transparente: lo que se ve es el PNG, no una caja con un PNG dentro. */ background: none; border-radius: 0; overflow: visible; pointer-events: none; } .platillos--cuadricula > .platillo > .platillo__foto img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.6)); } /* La etiqueta («Agotado», «Favorito») vive dentro del marco de la foto, que ahora flota. Se reancla al pico de arriba a la derecha de la TARJETA, que es donde se espera y donde no le pisa el nombre al platillo. */ .platillos--cuadricula > .platillo > .platillo__foto > .etiqueta { top: 30px; /* justo dentro del pico de la tarjeta */ left: auto; right: 0; z-index: 2; /* La sombra es lo que la despega de la comida: el PNG va centrado y le pasa por debajo, y sin este borde de aire las dos se confunden. */ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); } .platillos--cuadricula > .platillo > .platillo__datos { padding: 0; gap: 5px; } .platillos--cuadricula .platillo__nombre { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; } .platillos--cuadricula .platillo__descripcion { font-size: 0.76rem; line-height: 1.35; } .platillos--cuadricula .platillo__pie { padding-top: 8px; } .platillos--cuadricula .platillo__precio { font-size: 1.05rem; font-weight: 800; } .platillos--cuadricula .platillo__agregar { position: relative; width: 38px; height: 38px; font-size: 1.35rem; font-weight: 300; display: flex; align-items: center; justify-content: center; transition: transform 0.16s ease; } /* El botón se ve de 38 px y se toca de 46: el pulgar no falla y el dibujo no engorda. La tarjeta entera también abre el platillo, así que esto es la red de seguridad de quien apunta al «+». */ .platillos--cuadricula .platillo__agregar::after { content: ""; position: absolute; inset: -4px; } .platillos--cuadricula .platillo__agregar:active { transform: scale(0.9); } /* --------------------------------------------------------------------------- EL PLATILLO QUE OCUPA EL RENGLÓN ENTERO --------------------------------------------------------------------------- Dos situaciones distintas terminan en lo mismo —una tarjeta ancha con la foto a un lado— y por eso comparten aspecto: · en cuadrícula, el ÚLTIMO de la categoría cuando queda solo en su renglón (regla del tema base: una tarjeta a media columna con el otro medio vacío se lee como un error de armado); · en modo lista, TODOS. Aquí esa tarjeta ancha recibe el trato de la referencia: la foto va MÁS GRANDE y se sale del recuadro —por arriba, por abajo y por el lado— en vez de quedarse encerrada como una miniatura. Con el PNG sin fondo eso hace que la comida parezca apoyada sobre la carta, no pegada dentro de una casilla. Y VAN INTERCALADAS: una a la derecha, la siguiente a la izquierda. Una columna de fotos todas del mismo lado se lee como una lista de catálogo; en zigzag, la vista rebota de una a otra y la carta se recorre sola. TRES CANDADOS QUE NO SON OPCIONALES ----------------------------------- 1. Solo si HAY foto. El platillo sin foto no dibuja recuadro —eso es del contrato— y aquí no cambia nada: se queda tal cual. 2. Lo que se sale, se sale hacia el borde de la pantalla y NO más allá. El margen negativo del lado de fuera vale exactamente el relleno de la página más el de la tarjeta, así que la foto llega justo a la orilla. Un píxel más y aparecería desplazamiento horizontal. 3. El hueco entre renglones tiene que dar de sí para lo que sobresale. Por eso la lista pasa de 14 px de aire a 26. --------------------------------------------------------------------------- */ .platillos { /* Las tres medidas del efecto, juntas y con nombre para poder afinarlas sin ir a buscarlas por el archivo. */ /* LA FOTO TIENE QUE SER MÁS ALTA QUE EL TEXTO, o no se sale. El alto de la tarjeta lo manda la columna de texto —nombre, dos renglones de descripción y el precio—, que ronda los 140 px. Con una foto de 152 el margen negativo solo conseguía que asomara 7 px por lado: se veía metida dentro, no apoyada encima. A 176 sí sobresale de verdad. */ /* LA FOTO SALE DEL FLUJO, y por eso puede ser más grande que la tarjeta. Mientras iba dentro de la fila, agrandarla estrechaba la columna de texto, el texto saltaba de linea y la tarjeta crecía con ella: por más que se subiera el tamaño, solo asomaban siete u once píxeles. Ahora la foto va posicionada y no empuja nada. EL HUECO SE CALCULA, NO SE ESCRIBE. La primera versión tenía tres números sueltos —tamaño de la foto, cuánto asoma y cuánto se reserva— y no cuadraban: la foto medía 190 y asomaba 16, así que su borde interior caía a 174 del filo de la tarjeta, pero el hueco reservado eran 158. Resultado: 16 px de foto por debajo del texto, en los dos lados. Con la imagen a la derecha no se notaba —el texto va alineado a la izquierda y ahí no llega—, pero con la imagen a la izquierda el nombre y el precio quedaban encima del plato, ilegibles. Ahora solo hay DOS números que se escriben a mano; el hueco sale de ellos. Cambiar el tamaño de la foto ya no puede descuadrar nada. */ --foto-ancha: 168px; /* lo que mide la foto */ --foto-sale: 16px; /* cuánto asoma por el lado, hasta la orilla */ --foto-aire: 14px; /* el respiro entre la foto y el texto */ /* Lo que hay que reservar = lo que la foto ocupa DENTRO de la tarjeta, más el respiro. */ --hueco-foto: calc(var(--foto-ancha) - var(--foto-sale) + var(--foto-aire)); --sale-lado: calc(var(--foto-sale) * -1); --alto-tarjeta: 130px; /* la foto le saca 19 px por arriba y por abajo */ } @media (min-width: 700px) { .platillos { --foto-ancha: 230px; --alto-tarjeta: 162px; } } /* La categoría necesita más aire entre una y otra: la foto de la tarjeta ancha asoma por arriba y por abajo, y con el margen de antes rozaba el título de la categoría siguiente. */ .categoria { margin: 34px 0; } /* --- En cuadrícula: quién ocupa el renglón entero -------------------------- NO SE MARCA DESDE PHP. El que sea el ÚLTIMO y caiga en la primera columna es, por definición, el único de su renglón, y eso `:nth-child` lo sabe solo. Lo que PHP no puede saber es cuántas columnas hay en ese momento —cambia con el ancho de la pantalla—, así que la regla va por corte de pantalla. Los tres cortes repiten el mismo bloque a propósito: cada uno necesita SU patrón y no hay forma en CSS de preguntar «¿estás ocupando todo el renglón?». Aplicar los tres patrones juntos dejaría, por ejemplo, al tercero de tres en una columna angosta y con la foto de lado. -------------------------------------------------------------------------- */ /* dos columnas: el último si es impar (1, 3, 5…) */ @media (max-width: 699px) { .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(odd) { grid-column: 1 / -1; /* La foto sale del flujo (va posicionada), así que la tarjeta deja de ser una fila flex y pasa a ser una caja normal con un hueco reservado a un lado. */ display: block; position: relative; overflow: visible; /* si no, la foto se recorta al salirse */ padding: 18px var(--hueco-foto) 18px 14px; /* Que la tarjeta no quede MÁS ALTA que la foto: si el texto es corto, este mínimo la sostiene; si es largo, crece y la foto sobresale menos. Es el número que decide cuánto asoma la comida. */ min-height: var(--alto-tarjeta); box-sizing: border-box; } /* EL TEXTO, ADAPTADO A UNA COLUMNA MÁS ESTRECHA --------------------------------------------- La foto se lleva la mitad del ancho, así que al texto le quedan unos 180 px en un teléfono. Con las medidas de la tarjeta angosta, un nombre largo —«POLLO FRITO COREANO»— se comía tres renglones y empujaba el precio fuera de la tarjeta. Aquí el nombre baja de cuerpo, se corta a dos renglones y la descripción a dos también. */ .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(odd) > .platillo__datos { padding: 0; /* Y va POR ENCIMA de la foto. El hueco reservado ya evita que se toquen, pero si un día alguien agranda la foto sin mirar la cuenta, que el texto siga siendo legible en vez de quedar debajo del plato. */ position: relative; z-index: 1; min-width: 0; } .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(odd) .platillo__nombre { font-size: 0.95rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; /* Una palabra sola más ancha que la columna —un nombre escrito de corrido— rompería la tarjeta a lo ancho antes que partirse. */ overflow-wrap: anywhere; } .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(odd) .platillo__descripcion { -webkit-line-clamp: 2; font-size: 0.78rem; overflow-wrap: anywhere; } /* El precio y el «+» tienen que caber en la misma línea aunque el precio lleve cuatro cifras: si no caben, el botón se va solo al renglón de abajo y la tarjeta crece de golpe. */ .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(odd) .platillo__pie { gap: 10px; flex-wrap: nowrap; } .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(odd) .platillo__precio { white-space: nowrap; } .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(odd) > .platillo__foto { position: absolute; top: 50%; right: var(--sale-lado); left: auto; bottom: auto; width: var(--foto-ancha); height: var(--foto-ancha); aspect-ratio: auto; background: none; border-radius: 0; overflow: visible; margin: 0; /* Centrada respecto a la tarjeta: lo que le sobre de alto asoma por arriba y por abajo a partes iguales. */ transform: translateY(-50%); pointer-events: none; } .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(odd) > .platillo__foto img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.62)); } /* La etiqueta vuelve a su pico de arriba a la izquierda, dentro de la foto. */ .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(odd) > .platillo__foto > .etiqueta { top: 0; left: 0; right: auto; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); } /* EL ZIGZAG --------- La foto se va al otro lado y el hueco reservado se cambia de mano. Se cuentan SOLO las categorías cuya última tarjeta lleva foto. Contarlas todas dejaba dos seguidas del mismo lado en cuanto se colaba en medio una categoría sin foto: como esa no pinta nada, se veía «derecha, derecha». Con `of` la cuenta salta a las que no participan. */ .categoria:nth-child(even of .categoria:has(.platillo:last-child > .platillo__foto)) .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(odd) { padding-left: var(--hueco-foto); padding-right: 14px; } .categoria:nth-child(even of .categoria:has(.platillo:last-child > .platillo__foto)) .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(odd) > .platillo__foto { right: auto; left: var(--sale-lado); } } /* tres columnas: el último si cae en 3n+1 (1, 4, 7…) */ @media (min-width: 700px) and (max-width: 999px) { .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(3n + 1) { grid-column: 1 / -1; /* La foto sale del flujo (va posicionada), así que la tarjeta deja de ser una fila flex y pasa a ser una caja normal con un hueco reservado a un lado. */ display: block; position: relative; overflow: visible; /* si no, la foto se recorta al salirse */ padding: 18px var(--hueco-foto) 18px 14px; /* Que la tarjeta no quede MÁS ALTA que la foto: si el texto es corto, este mínimo la sostiene; si es largo, crece y la foto sobresale menos. Es el número que decide cuánto asoma la comida. */ min-height: var(--alto-tarjeta); box-sizing: border-box; } /* EL TEXTO, ADAPTADO A UNA COLUMNA MÁS ESTRECHA --------------------------------------------- La foto se lleva la mitad del ancho, así que al texto le quedan unos 180 px en un teléfono. Con las medidas de la tarjeta angosta, un nombre largo —«POLLO FRITO COREANO»— se comía tres renglones y empujaba el precio fuera de la tarjeta. Aquí el nombre baja de cuerpo, se corta a dos renglones y la descripción a dos también. */ .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(3n + 1) > .platillo__datos { padding: 0; /* Y va POR ENCIMA de la foto. El hueco reservado ya evita que se toquen, pero si un día alguien agranda la foto sin mirar la cuenta, que el texto siga siendo legible en vez de quedar debajo del plato. */ position: relative; z-index: 1; min-width: 0; } .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(3n + 1) .platillo__nombre { font-size: 0.95rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; /* Una palabra sola más ancha que la columna —un nombre escrito de corrido— rompería la tarjeta a lo ancho antes que partirse. */ overflow-wrap: anywhere; } .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(3n + 1) .platillo__descripcion { -webkit-line-clamp: 2; font-size: 0.78rem; overflow-wrap: anywhere; } /* El precio y el «+» tienen que caber en la misma línea aunque el precio lleve cuatro cifras: si no caben, el botón se va solo al renglón de abajo y la tarjeta crece de golpe. */ .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(3n + 1) .platillo__pie { gap: 10px; flex-wrap: nowrap; } .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(3n + 1) .platillo__precio { white-space: nowrap; } .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(3n + 1) > .platillo__foto { position: absolute; top: 50%; right: var(--sale-lado); left: auto; bottom: auto; width: var(--foto-ancha); height: var(--foto-ancha); aspect-ratio: auto; background: none; border-radius: 0; overflow: visible; margin: 0; /* Centrada respecto a la tarjeta: lo que le sobre de alto asoma por arriba y por abajo a partes iguales. */ transform: translateY(-50%); pointer-events: none; } .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(3n + 1) > .platillo__foto img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.62)); } /* La etiqueta vuelve a su pico de arriba a la izquierda, dentro de la foto. */ .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(3n + 1) > .platillo__foto > .etiqueta { top: 0; left: 0; right: auto; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); } /* EL ZIGZAG --------- La foto se va al otro lado y el hueco reservado se cambia de mano. Se cuentan SOLO las categorías cuya última tarjeta lleva foto. Contarlas todas dejaba dos seguidas del mismo lado en cuanto se colaba en medio una categoría sin foto: como esa no pinta nada, se veía «derecha, derecha». Con `of` la cuenta salta a las que no participan. */ .categoria:nth-child(even of .categoria:has(.platillo:last-child > .platillo__foto)) .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(3n + 1) { padding-left: var(--hueco-foto); padding-right: 14px; } .categoria:nth-child(even of .categoria:has(.platillo:last-child > .platillo__foto)) .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(3n + 1) > .platillo__foto { right: auto; left: var(--sale-lado); } } /* cuatro columnas: el último si cae en 4n+1 (1, 5, 9…) */ @media (min-width: 1000px) { .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(4n + 1) { grid-column: 1 / -1; /* La foto sale del flujo (va posicionada), así que la tarjeta deja de ser una fila flex y pasa a ser una caja normal con un hueco reservado a un lado. */ display: block; position: relative; overflow: visible; /* si no, la foto se recorta al salirse */ padding: 18px var(--hueco-foto) 18px 14px; /* Que la tarjeta no quede MÁS ALTA que la foto: si el texto es corto, este mínimo la sostiene; si es largo, crece y la foto sobresale menos. Es el número que decide cuánto asoma la comida. */ min-height: var(--alto-tarjeta); box-sizing: border-box; } /* EL TEXTO, ADAPTADO A UNA COLUMNA MÁS ESTRECHA --------------------------------------------- La foto se lleva la mitad del ancho, así que al texto le quedan unos 180 px en un teléfono. Con las medidas de la tarjeta angosta, un nombre largo —«POLLO FRITO COREANO»— se comía tres renglones y empujaba el precio fuera de la tarjeta. Aquí el nombre baja de cuerpo, se corta a dos renglones y la descripción a dos también. */ .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(4n + 1) > .platillo__datos { padding: 0; /* Y va POR ENCIMA de la foto. El hueco reservado ya evita que se toquen, pero si un día alguien agranda la foto sin mirar la cuenta, que el texto siga siendo legible en vez de quedar debajo del plato. */ position: relative; z-index: 1; min-width: 0; } .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(4n + 1) .platillo__nombre { font-size: 0.95rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; /* Una palabra sola más ancha que la columna —un nombre escrito de corrido— rompería la tarjeta a lo ancho antes que partirse. */ overflow-wrap: anywhere; } .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(4n + 1) .platillo__descripcion { -webkit-line-clamp: 2; font-size: 0.78rem; overflow-wrap: anywhere; } /* El precio y el «+» tienen que caber en la misma línea aunque el precio lleve cuatro cifras: si no caben, el botón se va solo al renglón de abajo y la tarjeta crece de golpe. */ .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(4n + 1) .platillo__pie { gap: 10px; flex-wrap: nowrap; } .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(4n + 1) .platillo__precio { white-space: nowrap; } .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(4n + 1) > .platillo__foto { position: absolute; top: 50%; right: var(--sale-lado); left: auto; bottom: auto; width: var(--foto-ancha); height: var(--foto-ancha); aspect-ratio: auto; background: none; border-radius: 0; overflow: visible; margin: 0; /* Centrada respecto a la tarjeta: lo que le sobre de alto asoma por arriba y por abajo a partes iguales. */ transform: translateY(-50%); pointer-events: none; } .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(4n + 1) > .platillo__foto img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.62)); } /* La etiqueta vuelve a su pico de arriba a la izquierda, dentro de la foto. */ .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(4n + 1) > .platillo__foto > .etiqueta { top: 0; left: 0; right: auto; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); } /* EL ZIGZAG --------- La foto se va al otro lado y el hueco reservado se cambia de mano. Se cuentan SOLO las categorías cuya última tarjeta lleva foto. Contarlas todas dejaba dos seguidas del mismo lado en cuanto se colaba en medio una categoría sin foto: como esa no pinta nada, se veía «derecha, derecha». Con `of` la cuenta salta a las que no participan. */ .categoria:nth-child(even of .categoria:has(.platillo:last-child > .platillo__foto)) .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(4n + 1) { padding-left: var(--hueco-foto); padding-right: 14px; } .categoria:nth-child(even of .categoria:has(.platillo:last-child > .platillo__foto)) .platillos--cuadricula > .platillo:not(.platillo--sinmarco):last-child:nth-child(4n + 1) > .platillo__foto { right: auto; left: var(--sale-lado); } } /* --- Y en modo lista, todas ------------------------------------------------ Aquí no hace falta adivinar nada: en lista TODAS ocupan su renglón, y el zigzag se cuenta dentro de la propia lista, una sí y una no. -------------------------------------------------------------------------- */ @media (min-width: 0px) { .platillos--lista > .platillo:not(.platillo--sinmarco) { grid-column: 1 / -1; /* La foto sale del flujo (va posicionada), así que la tarjeta deja de ser una fila flex y pasa a ser una caja normal con un hueco reservado a un lado. */ display: block; position: relative; overflow: visible; /* si no, la foto se recorta al salirse */ padding: 18px var(--hueco-foto) 18px 14px; /* Que la tarjeta no quede MÁS ALTA que la foto: si el texto es corto, este mínimo la sostiene; si es largo, crece y la foto sobresale menos. Es el número que decide cuánto asoma la comida. */ min-height: var(--alto-tarjeta); box-sizing: border-box; } /* EL TEXTO, ADAPTADO A UNA COLUMNA MÁS ESTRECHA --------------------------------------------- La foto se lleva la mitad del ancho, así que al texto le quedan unos 180 px en un teléfono. Con las medidas de la tarjeta angosta, un nombre largo —«POLLO FRITO COREANO»— se comía tres renglones y empujaba el precio fuera de la tarjeta. Aquí el nombre baja de cuerpo, se corta a dos renglones y la descripción a dos también. */ .platillos--lista > .platillo:not(.platillo--sinmarco) > .platillo__datos { padding: 0; /* Y va POR ENCIMA de la foto. El hueco reservado ya evita que se toquen, pero si un día alguien agranda la foto sin mirar la cuenta, que el texto siga siendo legible en vez de quedar debajo del plato. */ position: relative; z-index: 1; min-width: 0; } .platillos--lista > .platillo:not(.platillo--sinmarco) .platillo__nombre { font-size: 0.95rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; /* Una palabra sola más ancha que la columna —un nombre escrito de corrido— rompería la tarjeta a lo ancho antes que partirse. */ overflow-wrap: anywhere; } .platillos--lista > .platillo:not(.platillo--sinmarco) .platillo__descripcion { -webkit-line-clamp: 2; font-size: 0.78rem; overflow-wrap: anywhere; } /* El precio y el «+» tienen que caber en la misma línea aunque el precio lleve cuatro cifras: si no caben, el botón se va solo al renglón de abajo y la tarjeta crece de golpe. */ .platillos--lista > .platillo:not(.platillo--sinmarco) .platillo__pie { gap: 10px; flex-wrap: nowrap; } .platillos--lista > .platillo:not(.platillo--sinmarco) .platillo__precio { white-space: nowrap; } .platillos--lista > .platillo:not(.platillo--sinmarco) > .platillo__foto { position: absolute; top: 50%; right: var(--sale-lado); left: auto; bottom: auto; width: var(--foto-ancha); height: var(--foto-ancha); aspect-ratio: auto; background: none; border-radius: 0; overflow: visible; margin: 0; /* Centrada respecto a la tarjeta: lo que le sobre de alto asoma por arriba y por abajo a partes iguales. */ transform: translateY(-50%); pointer-events: none; } .platillos--lista > .platillo:not(.platillo--sinmarco) > .platillo__foto img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.62)); } /* La etiqueta vuelve a su pico de arriba a la izquierda, dentro de la foto. */ .platillos--lista > .platillo:not(.platillo--sinmarco) > .platillo__foto > .etiqueta { top: 0; left: 0; right: auto; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); } /* EL ZIGZAG --------- La foto se va al otro lado y el hueco reservado se cambia de mano. Se cuentan SOLO las categorías cuya última tarjeta lleva foto. Contarlas todas dejaba dos seguidas del mismo lado en cuanto se colaba en medio una categoría sin foto: como esa no pinta nada, se veía «derecha, derecha». Con `of` la cuenta salta a las que no participan. */ .platillos--lista > .platillo:not(.platillo--sinmarco):nth-child(even) { padding-left: var(--hueco-foto); padding-right: 14px; } .platillos--lista > .platillo:not(.platillo--sinmarco):nth-child(even) > .platillo__foto { right: auto; left: var(--sale-lado); } } /* =========================================================================== 5. LOS TÍTULOS, COMO EN EL MENÚ IMPRESO --------------------------------------------------------------------------- En la carta de papel de Minc los nombres de las secciones son enormes, en mayúsculas y en rojo. Es lo que más identifica a la marca de un vistazo, y no costaba nada traerlo. El rojo sale del panel, así que si el dueño cambia su color de marca, los títulos cambian con él. =========================================================================== */ .categoria__titulo { font-size: 1.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05; color: var(--color-primario); } .categoria__descripcion { margin-top: 4px; } @media (min-width: 700px) { .categoria__titulo { font-size: 2.1rem; } } /* =========================================================================== 6. LAS ONDAS DEL AGUA --------------------------------------------------------------------------- Vista desde arriba: de tanto en tanto se abren tres anillos concéntricos en algún punto de la pantalla, crecen despacio y se apagan. Nada más. Va DETRÁS de todo (`z-index: -1`), así que solo se asoma por los huecos entre tarjetas. Es fondo: si alguien se queda mirándolo, está mal calibrado. PARA SUBIRLE O BAJARLE EL VOLUMEN hay una sola perilla: `--tinta`. =========================================================================== */ .minc-agua { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; user-select: none; /* El color del anillo. Gris claro, como en la referencia: el rojo de marca en círculos grandes tiraba a decorado de discoteca y competía con los precios, que son lo único que debe ir en rojo. */ color: var(--color-texto, #F4F4F5); /* Cuánto se ven. Un anillo es una línea de un píxel: necesita bastante más opacidad que una silueta rellena para llegar a leerse en un teléfono a plena luz. La primera versión estaba en 0.07 y en un iPhone no se veía nada en absoluto. */ --tinta: 0.24; } /* Sin movimiento no hay ondas. No se deja un anillo quieto en mitad de la pantalla: un círculo parado ahí sí se mira, y entonces ya no es fondo. */ .minc-agua > * { display: none; } @media (prefers-reduced-motion: no-preference) { .minc-agua > * { display: block; } } /* El foco: el punto donde «cae la gota». No se ve; solo marca el centro. */ .minc-onda { position: absolute; width: var(--radio, 300px); height: var(--radio, 300px); /* El centro cae en las coordenadas de abajo, no la esquina. */ margin: calc(var(--radio, 300px) / -2) 0 0 calc(var(--radio, 300px) / -2); } /* Cada anillo. Nace casi como un punto y se abre hasta el tamaño del foco. */ .minc-onda i { position: absolute; inset: 0; border: 1px solid currentColor; border-radius: 50%; opacity: 0; transform: scale(0.04); animation: minc-ondea cubic-bezier(0.16, 0.72, 0.3, 1) infinite; } /* Los tres del mismo foco comparten ciclo y salen escalonados: cuando el segundo empieza, el primero ya va por la mitad. Eso es lo que se lee como anillos concéntricos y no como un círculo suelto que crece. */ /* Los seis focos: sitio, tamaño y ciclo. Las duraciones no encajan entre sí —23, 29, 31, 37, 41 y 43— para que no coincidan nunca y no se adivine el bucle. Los tamaños son distintos a propósito: gotas de distinto peso. */ .minc-onda--1 { top: 18%; left: 20%; --radio: 260px; } .minc-onda--2 { top: 34%; left: 78%; --radio: 380px; } .minc-onda--3 { top: 57%; left: 12%; --radio: 300px; } .minc-onda--4 { top: 72%; left: 62%; --radio: 440px; } .minc-onda--5 { top: 88%; left: 30%; --radio: 240px; } .minc-onda--6 { top: 6%; left: 58%; --radio: 340px; } .minc-onda--1 i { animation-duration: 23s; } .minc-onda--2 i { animation-duration: 29s; } .minc-onda--3 i { animation-duration: 31s; } .minc-onda--4 i { animation-duration: 37s; } .minc-onda--5 i { animation-duration: 41s; } .minc-onda--6 i { animation-duration: 43s; } /* El escalonado de los anillos dentro de cada foco, y el desfase de un foco respecto a otro: el retraso del primer anillo es lo que los separa. */ .minc-onda--1 i:nth-child(1) { animation-delay: 0s; } .minc-onda--1 i:nth-child(2) { animation-delay: 1.1s; } .minc-onda--1 i:nth-child(3) { animation-delay: 2.2s; } .minc-onda--2 i:nth-child(1) { animation-delay: 5s; } .minc-onda--2 i:nth-child(2) { animation-delay: 6.1s; } .minc-onda--2 i:nth-child(3) { animation-delay: 7.2s; } .minc-onda--3 i:nth-child(1) { animation-delay: 11s; } .minc-onda--3 i:nth-child(2) { animation-delay: 12.1s; } .minc-onda--3 i:nth-child(3) { animation-delay: 13.2s; } .minc-onda--4 i:nth-child(1) { animation-delay: 17s; } .minc-onda--4 i:nth-child(2) { animation-delay: 18.1s; } .minc-onda--4 i:nth-child(3) { animation-delay: 19.2s; } .minc-onda--5 i:nth-child(1) { animation-delay: 26s; } .minc-onda--5 i:nth-child(2) { animation-delay: 27.1s; } .minc-onda--5 i:nth-child(3) { animation-delay: 28.2s; } .minc-onda--6 i:nth-child(1) { animation-delay: 33s; } .minc-onda--6 i:nth-child(2) { animation-delay: 34.1s; } .minc-onda--6 i:nth-child(3) { animation-delay: 35.2s; } /* Los de detrás, más tenues: en el agua de verdad el frente de la onda es el que más se ve y los que le siguen se van perdiendo. La opacidad la pone la animación a partir de `--tinta`, así que basta con bajársela a cada uno. */ .minc-onda i:nth-child(2) { --tinta: 0.16; } .minc-onda i:nth-child(3) { --tinta: 0.10; } @keyframes minc-ondea { 0% { transform: scale(0.04); opacity: 0; } 2% { opacity: var(--tinta); } 20%, 100% { transform: scale(1); opacity: 0; } } /* =========================================================================== 7. EL PIE --------------------------------------------------------------------------- Tres zonas: dónde estás pidiendo, la marca y las redes. Detrás, sin robar un solo toque: la onda roja que lo separa del menú, el bambú, el patrón de olas y los pétalos de ciruelo. =========================================================================== */ /* --- La onda roja que separa ---------------------------------------------- UNA sola línea, con la curva simétrica y ocupando justo el ancho. Lo que se mueve NO es la línea: es una luz que la recorre de tanto en tanto. -------------------------------------------------------------------------- */ .pie__onda { position: relative; height: 62px; margin-bottom: -1px; /* se pega al pie, sin costura */ overflow: hidden; pointer-events: none; color: var(--color-primario); } .pie__onda-svg { display: block; width: 100%; height: 100%; } .pie__onda-base, .pie__onda-brillo { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; /* el trazo no engorda al estirarse */ } /* El trazo de siempre, rojo y encendido. Dos sombras: una corta y cerrada y otra larga y abierta. Es lo que separa un neón de una raya con sombra. */ .pie__onda-base { stroke: currentColor; stroke-width: 2; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--color-primario) 90%, transparent)) drop-shadow(0 0 12px color-mix(in srgb, var(--color-primario) 55%, transparent)); } /* El mismo trazo en blanco caliente, tapado salvo por donde pasa la luz. */ .pie__onda-brillo { stroke: #fff; stroke-width: 2.4; filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 14px color-mix(in srgb, var(--color-primario) 85%, transparent)); } /* Las tres franjas de luz de la máscara. Empiezan fuera, a la izquierda. Quietas si alguien pidió menos movimiento: sin animación se quedan donde están —fuera— y lo que se ve es la línea roja sola, que está bien. */ .pie__luz { transform: translateX(0); } @media (prefers-reduced-motion: no-preference) { /* Ciclos que no encajan entre sí: a veces pasan dos casi seguidas y a veces se hacen quince segundos de nada. Eso es lo que se lee como aleatorio sin una línea de JavaScript. */ .pie__luz--1 { animation: minc-recorre 11s linear infinite; } .pie__luz--2 { animation: minc-recorre 17s linear infinite; animation-delay: -4s; } .pie__luz--3 { animation: minc-recorre 23s linear infinite; animation-delay: -9s; } } /* Cruza en poco más de un segundo y luego espera fuera de la pantalla el resto del ciclo. Por eso es un destello y no una luz dando vueltas. */ @keyframes minc-recorre { 0% { transform: translateX(0); } 11%, 100% { transform: translateX(940px); } } /* --- El pie ---------------------------------------------------------------- */ .pie { position: relative; overflow: hidden; /* encierra a los pétalos y al bambú */ isolation: isolate; /* y los deja por debajo del contenido del pie */ /* FUERA LA RAYA GRIS DE ARRIBA. El tema base separa el pie del menú con un `border-top` gris. Aquí el separador es la onda roja, y las dos juntas eran dos separadores para una sola separación: se veía como una raya de más justo debajo del neón. */ border-top: 0; /* LAS ONDAS DEL AGUA SE QUEDAN EN EL MENÚ --------------------------------------- La capa de ondas va fija a la pantalla y por detrás de todo, así que al llegar al pie se seguía viendo a través de él —y ahí abajo, sin tarjetas que la taparan, se notaba MÁS que en el menú, que es al revés de lo que se quiere—. Un fondo opaco la corta en seco. Los pétalos siguen viéndose porque `isolation: isolate` los deja dentro de la caja del pie, por encima de este fondo. */ background: var(--color-fondo, #0E0E0E); margin-top: 0; padding: 34px var(--espacio, 16px) 0; } /* --- Los adornos del fondo -------------------------------------------------- */ .pie__bambu, .pie__olas, .pie__bruma { position: absolute; pointer-events: none; user-select: none; z-index: -1; } .pie__bambu { top: -10px; left: -26px; width: 190px; height: auto; color: var(--color-texto, #F4F4F5); opacity: 0.075; } /* La bruma: tres manchas de luz muy difusas. No es un dibujo de nube —una nube con contorno quedaría de cuento—, es cómo se ve la niebla de verdad. */ .pie__bruma { left: 0; right: 0; bottom: 0; height: 62%; background: radial-gradient(58% 78% at 18% 108%, rgba(255, 255, 255, 0.05), transparent 70%), radial-gradient(52% 70% at 52% 116%, rgba(255, 255, 255, 0.035), transparent 72%), radial-gradient(66% 86% at 88% 110%, rgba(255, 255, 255, 0.03), transparent 70%); } .pie__olas { right: -30px; bottom: -34px; width: 330px; height: 250px; color: var(--color-primario); opacity: 0.3; /* Se desvanece hacia dentro: un rectángulo de patrón con el borde recto se ve pegado; así parece que sigue más allá de la esquina. */ -webkit-mask-image: radial-gradient(115% 115% at 100% 100%, #000 26%, transparent 74%); mask-image: radial-gradient(115% 115% at 100% 100%, #000 26%, transparent 74%); } @media (max-width: 699px) { /* En el teléfono el bambú se come la columna de texto. Se encoge y se aparta; el patrón de olas se queda, que abajo a la derecha no estorba. */ .pie__bambu { width: 118px; left: -34px; opacity: 0.06; } .pie__olas { width: 230px; height: 175px; } } /* --- El reparto ------------------------------------------------------------ */ .pie__cuerpo { position: relative; max-width: 1100px; margin: 0 auto; display: grid; gap: 30px; justify-items: center; text-align: center; } /* En pantalla ancha, las tres zonas de la referencia: datos, marca y redes. La del medio más ancha, que es la que lleva el logo. */ @media (min-width: 860px) { .pie__cuerpo { grid-template-columns: 1fr 1.3fr 1fr; align-items: center; gap: 24px; } .pie__lado--izq { text-align: left; justify-self: start; } .pie__lado--der { text-align: right; justify-self: end; } } .pie__lado { min-width: 0; } /* --- Izquierda: dónde y cuándo --------------------------------------------- Tres renglones separados por una línea, como la referencia: el local entre dos rayas, si está abierto, y cambiar de sucursal. La línea que los separa se apaga hacia las puntas —igual que en la referencia— porque una raya que corta en seco parte la columna en cajas; así solo la marca. -------------------------------------------------------------------------- */ .pie__fila { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; max-width: 340px; min-height: 46px; /* el pulgar no falla en 46 px */ padding: 6px 0; } .pie__fila + .pie__fila, .pie__direccion + .pie__fila { border-top: 1px solid transparent; border-image: linear-gradient(to right, transparent, var(--color-borde, #262626) 22%, var(--color-borde, #262626) 78%, transparent) 1; } /* Las rayas que flanquean el nombre del local. Se afinan hacia la punta, igual que las del lema: es el mismo gesto repetido y por eso el pie se lee como una sola cosa. */ .pie__raya { flex: 1 1 auto; height: 2px; min-width: 18px; border-radius: 50%; background: linear-gradient(to right, transparent, var(--color-primario) 35%, var(--color-primario) 65%, transparent); } .pie__fila-texto { flex: 0 0 auto; font-family: var(--fuente-titulos, inherit); font-size: 1.02rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; } .pie__direccion { margin: 0; padding: 2px 0 8px; font-size: 0.8rem; line-height: 1.35; color: var(--color-texto-suave, #A1A1AA); } .pie__direccion a { text-decoration: underline; text-underline-offset: 3px; } .pie__estado { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.04em; } /* El punto de color lo dibuja el tema base con `.pie__estado::before`. Aquí solo se le cambia el latido cuando está abierto: es el único elemento del pie que se mueve por su cuenta, y se lo gana, porque «¿puedo pedir ahora?» es la pregunta que trae a la gente hasta aquí. */ @media (prefers-reduced-motion: no-preference) { .pie__estado--abierto::before { animation: minc-late 2.4s ease-in-out infinite; } } @keyframes minc-late { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.6; } } /* «Cambiar de sucursal» y «ver la semana» van como TEXTO, no como botón. El botón con su recuadro pesaba más que el nombre del local y se llevaba la vista al sitio equivocado. Sigue midiendo 46 px de alto —eso lo pone la fila— así que se toca igual de bien. */ .pie__enlace { background: none; border: 0; padding: 0; font: inherit; font-size: 0.88rem; letter-spacing: 0.06em; color: var(--color-texto-suave, #A1A1AA); /* Sin subrayado: el tema base se lo pone porque allí es un enlace dentro de un párrafo. Aquí es un renglón suyo dentro de una lista separada por líneas, y el subrayado se peleaba con esas líneas. */ text-decoration: none; cursor: pointer; transition: color 0.18s ease; } .pie__enlace:hover, .pie__enlace:focus-visible { color: var(--color-primario); } /* --- Centro: la marca ------------------------------------------------------ */ .pie__lado--centro { display: flex; flex-direction: column; align-items: center; gap: 12px; } .pie__logo { height: 96px; width: auto; max-width: 240px; object-fit: contain; } /* El nombre, en letra ancha y espaciada como en la referencia. Va debajo del dibujo del logo, no en su lugar. */ .pie__marca-nombre { font-family: var(--fuente-titulos, inherit); font-size: 1.85rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; /* El espaciado empuja la última letra hacia fuera y descentra la palabra; este margen se lo devuelve. */ margin-right: -0.22em; line-height: 1.1; } /* --- El lema: «— asian food —» --------------------------------------------- */ .pie__lema { margin: 0; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; max-width: 320px; } /* LAS RAYAS DEL LEMA NO SON RECTAS: SON GOTAS ALARGADAS ----------------------------------------------------- Miradas de cerca, en la referencia se ensanchan en el centro y se afinan hasta desaparecer en las puntas. Son dos cosas a la vez: el `border-radius` al 50% convierte la barra en una elipse aplastada —de ahí la panza— y el degradado la apaga en los extremos —de ahí la punta—. Con solo una de las dos se nota que es un truco; con las dos, no. */ .pie__lema-raya { flex: 1 1 auto; height: 2px; min-width: 20px; border-radius: 50%; background: linear-gradient(to right, transparent 0%, var(--color-primario) 30%, var(--color-primario) 70%, transparent 100%); transform-origin: center; } .pie__lema-letras { display: inline-flex; font-family: var(--fuente-titulos, inherit); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase; color: var(--color-primario); white-space: nowrap; } .pie__lema-hueco { width: 0.34em; } /* LA ENTRADA, UNA SOLA VEZ ------------------------ La clase `--espera` la pone el JavaScript nada más cargar, y `--entra` cuando el pie asoma por primera vez. Se hace en dos clases y no en una para que, si el JavaScript no llega a correr, no quede nunca nada escondido: sin `--espera` el lema se ve, y punto. Las rayas se parten desde el centro hacia fuera y, detrás, van saliendo las letras una a una. */ .pie__lema--espera .pie__lema-raya { transform: scaleX(0); } .pie__lema--espera .pie__lema-letra { opacity: 0; } @media (prefers-reduced-motion: no-preference) { .pie__lema--entra .pie__lema-raya { animation: minc-raya 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .pie__lema--entra .pie__lema-letra { /* Cada letra sale un pelín después que la anterior. `--n` lo escribe PHP letra por letra: es su posición en la palabra. */ animation: minc-letra 0.42s ease-out both; animation-delay: calc(0.34s + var(--n, 0) * 0.045s); } } @keyframes minc-raya { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes minc-letra { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } } /* --- Los contactos --------------------------------------------------------- */ .pie__contactos { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; } .pie__contactos a { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; font-size: 0.88rem; color: var(--color-texto-suave, #A1A1AA); } .pie__contactos a:hover { color: var(--color-primario); } /* --- Derecha: las redes ---------------------------------------------------- */ .pie__redes { display: flex; align-items: center; gap: 6px; } /* La rayita roja entre icono e icono, como en la referencia. Corta y encendida: es el mismo neón de la onda, en pequeño. */ .pie__separador { width: 1px; height: 26px; flex-shrink: 0; background: var(--color-primario); opacity: 0.75; box-shadow: 0 0 6px color-mix(in srgb, var(--color-primario) 60%, transparent); } /* SIN EL CÍRCULO DE FONDO. El tema base mete cada icono en una pastilla con borde y relleno. En la referencia van sueltos sobre el negro, separados por la raya roja: la pastilla los convertía en botones y competía con el único botón que importa en esta página, que es el de pedir. */ .pie__red { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 0; background: none; border-radius: 0; color: var(--color-texto, #F4F4F5); transition: color 0.2s ease, filter 0.2s ease, transform 0.2s ease; } /* EL NEÓN ------- Al pasar por encima, el icono se pone del rojo de la marca y se enciende. El resplandor es el propio dibujo difuminado dos veces —una corta y cerrada, otra larga y abierta—, que es lo que hace que parezca un tubo de neón y no una sombra. Sale del color del panel, no de un rojo escrito a mano. */ .pie__red:hover, .pie__red:focus-visible { color: var(--color-primario); transform: translateY(-2px); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--color-primario) 85%, transparent)) drop-shadow(0 0 14px color-mix(in srgb, var(--color-primario) 55%, transparent)); } /* --- La firma -------------------------------------------------------------- */ /* Los dos renglones, uno debajo del otro y centrados. Se declara `block` a propósito: el tema base pone aquí un `flex` para su propio reparto, y heredarlo dejaba al desarrollador colgando al final del mismo renglón que el año en vez de debajo. */ .pie__firma { position: relative; display: block; max-width: 1100px; margin: 26px auto 0; padding: 16px 0 calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-borde, #262626); text-align: center; } .pie__copia, .pie__dev { text-align: center; } .pie__copia { margin: 0 0 4px; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-texto-suave, #A1A1AA); } /* El desarrollador, en su propio renglón y más discreto que el año. */ .pie__dev { margin: 0; font-size: 0.72rem; } /* --- Los pétalos ---------------------------------------------------------- */ .pie__petalos { position: absolute; inset: 0; z-index: -1; /* detrás del texto del pie */ pointer-events: none; user-select: none; color: var(--color-texto, #F4F4F5); /* Cuánto se ven. Una flor rellena tapa más que una línea, así que va más baja que la de las ondas. */ --tinta: 0.16; } .pie__molde { position: absolute; width: 0; height: 0; overflow: hidden; } /* Sin movimiento no hay pétalos. Siete flores quietas y desparramadas por el pie no son un adorno, son un descuido. */ .pie__petalo { display: none; } @media (prefers-reduced-motion: no-preference) { .pie__petalo { display: block; } } .pie__petalo { position: absolute; top: -8%; opacity: 0; animation: minc-cae linear infinite; } .pie__petalo svg { width: 100%; height: auto; display: block; } /* Cada uno con su carril, su tamaño, su velocidad y su retraso. Los números no son redondos a propósito: en cuanto dos coinciden se ve la fila. */ .pie__petalo--1 { left: 8%; width: 15px; animation-duration: 17s; animation-delay: 0s; } .pie__petalo--2 { left: 23%; width: 10px; animation-duration: 23s; animation-delay: 6s; } .pie__petalo--3 { left: 39%; width: 18px; animation-duration: 19s; animation-delay: 11s; } .pie__petalo--4 { left: 54%; width: 12px; animation-duration: 27s; animation-delay: 3s; } .pie__petalo--5 { left: 68%; width: 16px; animation-duration: 21s; animation-delay: 14s; } .pie__petalo--6 { left: 82%; width: 9px; animation-duration: 25s; animation-delay: 8s; } .pie__petalo--7 { left: 93%; width: 14px; animation-duration: 18s; animation-delay: 17s; } /* Cae meciéndose y girando, y SE APAGA ANTES DE LLEGAR ABAJO —al 82%—: así el efecto termina dentro del pie en vez de amontonarse en el borde. LA CAÍDA SE MIDE EN ALTO DEL PIE, NO EN ALTO DE PANTALLA -------------------------------------------------------- Esta primera versión va en `vh`, que es alto de PANTALLA, y está mal medida: en el teléfono el pie tiene los bloques uno debajo de otro y mide bastante más que la pantalla, así que los pétalos se apagaban a media altura y la mitad de abajo se quedaba sin nada. En una pantalla de escritorio pasa lo contrario: el pie es más bajo y el pétalo se iba más allá del borde. Justo debajo está la buena, en `cqh` —alto del CONTENEDOR—, que mide lo que hay que medir. Va aparte porque `cqh` es reciente; el navegador que no lo entienda se queda con esta, que se ve razonable en las dos. */ @keyframes minc-cae { 0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; } 8% { opacity: var(--tinta); } 30% { transform: translate3d(16px, 26vh, 0) rotate(70deg); } 55% { transform: translate3d(-12px, 48vh, 0) rotate(150deg); } 70% { opacity: var(--tinta); } 82% { transform: translate3d(10px, 70vh, 0) rotate(220deg); opacity: 0; } 100% { transform: translate3d(10px, 82vh, 0) rotate(250deg); opacity: 0; } } @supports (container-type: size) { /* Con esto, `cqh` de los hijos pasa a ser el alto de esta capa —que ocupa el pie entero— en vez del alto de la pantalla. */ .pie__petalos { container-type: size; } .pie__petalo { animation-name: minc-cae-pie; } @keyframes minc-cae-pie { 0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; } 8% { opacity: var(--tinta); } 30% { transform: translate3d(16px, 30cqh, 0) rotate(70deg); } 55% { transform: translate3d(-12px, 56cqh, 0) rotate(150deg); } 70% { opacity: var(--tinta); } 82% { transform: translate3d(10px, 82cqh, 0) rotate(220deg); opacity: 0; } 100% { transform: translate3d(10px, 96cqh, 0) rotate(250deg); opacity: 0; } } } /* =========================================================================== 8. MOVIMIENTO --------------------------------------------------------------------------- Mucha gente activa «reducir movimiento» por mareo o por migraña. No es una preferencia estética: es la diferencia entre poder usar el sitio y no poder. =========================================================================== */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }