/* Personalización por local (capa que Calias edita al armar cada propuesta). * * El menú marca el con data-mundo (papel | nocturno | especialidad | * mercado) y data-slug (la dirección del local). Esta hoja se carga DESPUÉS de * mundos.css, así que acá se pisan tokens sueltos sólo para un slug: * * body[data-slug="la-esquina"] { * --papel: #f7f4ee; * --oro: #c9a24a; * --r-tarjeta: 22px; * } * * Los escribe `node scripts/aplicar-mundo.mjs --local --token --clave=valor`. * Tokens disponibles: el bloque :root de /r/styles.css y las recetas de * scripts/mundos.mjs. La tinta del local se carga desde el panel y el menú la * ajusta sola para que siempre tenga contraste; no hace falta repetirla acá. */ /* DOT BAR — bar de noche, papas y birra. Parte de "nocturno" y se lleva a su * marca: el negro del logo (#211F20), el amarillo mostaza de su gráfica * (medido en su historia de horarios) y palo seco en negrita como el cartel de * la fachada, en vez de la serif del mundo. */ body[data-slug="dot-bar"] { --papel: #141213; --papel-hondo: #1b1819; --tarjeta: #211f20; --arena: #0e0c0d; --carbon: #0a0909; --tinta: #f4f1ea; --tinta-suave: #b5aea5; --oro: #f2b632; --oro-texto: #f6c64f; --display: "Space Grotesk", system-ui, sans-serif; --display-peso: 700; --r-tarjeta: 14px; } /* DOT BAR, segunda capa: después de la revisión de diseño. * La portada ya era del bar; de ahí para abajo seguía siendo coctelería * (filetes dorados, sombras suaves). Se lleva a su gráfica: plano, negro, * mayúsculas y el mostaza como bloque, no como detalle. */ body[data-slug="dot-bar"] { /* Categorías en plano negro, sin marco dorado ni sombra de coctelería. */ --borde-grupo: 1px solid var(--linea); --sombra-tarjeta: none; } /* El cartel dice DOT • BAR y nada más: el sello repetía el nombre encima. */ body[data-slug="dot-bar"] .portada .sello { display: none; } /* Su frase va como la etiqueta magenta de sus historias ("Buena onda, birra * y punto"). Magenta medido en su gráfica; blanco encima da 5.7:1 (medido). */ body[data-slug="dot-bar"] .local-frase { display: inline-block; max-width: none; margin-block: 6px 2px; padding: 7px 16px 8px; background: #c91344; color: #fff; font-size: clamp(17px, 4.6vw, 22px); line-height: 1.1; transform: rotate(-3deg); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.7); } /* La aclaración de demo queda, pero en voz baja. */ body[data-slug="dot-bar"] .local-nota { max-width: 40ch; font-size: 13px; opacity: 0.78; } /* Títulos de categoría como el cartel: mayúsculas, palo seco. */ body[data-slug="dot-bar"] .categoria-cabeza h2 { text-transform: uppercase; letter-spacing: 0.02em; } /* La banda como su historia de horarios: mostaza plano, texto negro. */ body[data-slug="dot-bar"] .banda { background: var(--oro); color: #211f20; } body[data-slug="dot-bar"] .banda::after { display: none; } body[data-slug="dot-bar"] .banda-texto { font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; } body[data-slug="dot-bar"] .banda-pie { color: #211f20; } body[data-slug="dot-bar"] .banda-sello { opacity: 1; box-shadow: 0 0 0 3px #211f20; } /* Detalles del navegador con los colores del bar. */ body[data-slug="dot-bar"] ::selection { background: var(--oro); color: #141213; } /* LOS MISMOS DE SIEMPRE — delivery de sanguches, milanesas, pizzas y * empanadas. Parte de "nocturno" y se lleva a su marca: el negro del logo * (#060505), el rojo de la estrella (#f90010) y el crema de sus letras * (#fbf0ce), medidos con colores-de-logo. Palo seco en negrita y mayúsculas, * como su logotipo, en vez de la serif de coctelería del mundo. Contrastes * medidos: crema sobre papel 17:1, tinta suave sobre tarjeta 8.5:1, rojo de * texto sobre tarjeta 5.3:1. */ body[data-slug="los-mismos-de-siempre"] { --papel: #0e0d0d; --papel-hondo: #151313; --tarjeta: #1a1818; --arena: #0a0909; --carbon: #060505; --tinta: #fbf0ce; --tinta-suave: #bdb3a0; --oro: #e0101b; --oro-texto: #ff4a4a; --luz: #fbf0ce; --linea: rgba(251, 240, 206, 0.12); --borde-grupo: 1px solid var(--linea); --display: "Space Grotesk", system-ui, sans-serif; --display-peso: 700; --r-tarjeta: 14px; } /* El logotipo ya trae el sello: no se repite encima. */ body[data-slug="los-mismos-de-siempre"] .portada .sello { display: none; } /* "¡Hacé tu pedido ahora!" como en su carta: mayúsculas en negrita. */ body[data-slug="los-mismos-de-siempre"] .local-frase { text-transform: uppercase; letter-spacing: 0.01em; } /* Títulos de categoría como las placas de su carta. */ body[data-slug="los-mismos-de-siempre"] .categoria-cabeza h2 { text-transform: uppercase; letter-spacing: 0.02em; } body[data-slug="los-mismos-de-siempre"] ::selection { background: var(--oro); color: #fff; } /* TARANTINO — "un caos controlado": comida callejera 24 horas con estética de * afiche pulp (Kill Bill). Sale de su sitio (auditoría en * work/tarantino-material/AUDITORIA-DISENO.md): negro, amarillo mostaza * (#F0C726) y rojo sangre (#B3191D); nombres de platos en letra de afiche * (Anton, en lugar de Impact), títulos en Syne y papel arrugado. Esquinas * rectas, como un afiche pegado en la calle. * * El rojo nunca va como letra sobre el negro (daba 2.55:1 en su sitio): va de * fondo, con crema encima (5.9:1, medido). Amarillo sobre la tarjeta 10.4:1, * crema 14:1, tinta suave 8.1:1. */ body[data-slug="tarantino"] { --papel: #141414; --papel-hondo: #1d1c1a; --tarjeta: #1b1a18; --arena: #0d0d0d; --carbon: #080808; --tinta: #f3ead2; --tinta-suave: #c3b89e; --oro: #f0c726; --oro-texto: #f0c726; --luz: #f3ead2; --linea: rgba(240, 199, 38, 0.16); --borde-grupo: 1px solid rgba(240, 199, 38, 0.18); --sombra-tarjeta: none; --rojo-sangre: #b3191d; --display: "Anton", Impact, "Arial Narrow", sans-serif; --display-peso: 400; --ui: "Space Grotesk", system-ui, sans-serif; --r-tarjeta: 3px; --r-foto: 2px; --r-pastilla: 3px; --guarda-alto: 46px; /* Papel arrugado: relieve de ruido iluminado de costado. Es nuestro, no una foto: sin archivos ni pedidos extra. */ --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='5' seed='11'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='4.2'%3E%3CfeDistantLight azimuth='225' elevation='38'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='520' height='520' filter='url(%23a)'/%3E%3C/svg%3E"); } body[data-slug="tarantino"]::before { opacity: 0.11; mix-blend-mode: screen; } /* Portada: sus dibujitos en gris, detrás del sello, como en su tienda. */ body[data-slug="tarantino"] .portada-fondo img { filter: grayscale(1) contrast(1.15) brightness(0.72); transform: none; object-position: center; } body[data-slug="tarantino"] .sello { width: 96px; height: 96px; background: transparent; box-shadow: 0 0 0 4px #141414, 0 0 0 7px var(--rojo-sangre); } body[data-slug="tarantino"] .local-logotipo img { width: min(340px, 82vw); } /* "Abierto 24 horas" como una etiqueta roja pegada torcida. */ body[data-slug="tarantino"] .local-sub { display: inline-block; padding: 5px 12px 4px; background: var(--rojo-sangre); color: #f3ead2; font-family: var(--display); font-weight: 400; font-size: 15px; letter-spacing: 0.14em; transform: rotate(-2.5deg); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.8); } body[data-slug="tarantino"] .filete { display: none; } body[data-slug="tarantino"] .local-frase { font-family: var(--display); font-size: clamp(30px, 9vw, 52px); line-height: 0.95; text-transform: uppercase; letter-spacing: 0.01em; color: var(--oro); } /* La tira de garabatos, entera a lo alto y corrida a lo ancho. */ body[data-slug="tarantino"] .guarda { background-size: auto 100%; background-repeat: repeat-x; border-block: 3px solid #0d0d0d; } /* Cartas: Desayunos, 24 horas, Coctelería, como pestañas de afiche. */ body[data-slug="tarantino"] .carta-opcion { font-family: var(--display); font-weight: 400; font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase; } /* Secciones: título ancho en Syne con un subrayado rojo grueso. */ body[data-slug="tarantino"] .categoria-cabeza h2 { font-family: "Syne", var(--ui); font-weight: 800; font-size: clamp(22px, 6.2vw, 27px); letter-spacing: 0.01em; text-transform: uppercase; color: var(--oro); text-decoration: underline 5px var(--rojo-sangre); text-underline-offset: 7px; text-decoration-skip-ink: none; } body[data-slug="tarantino"] .categoria-descripcion, body[data-slug="tarantino"] .carta-descripcion { padding-top: 6px; } /* Platos: el nombre grita, la descripción acompaña. */ body[data-slug="tarantino"] .plato-nombre { font-family: var(--display); font-weight: 400; font-size: 19.5px; line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; color: var(--oro); } body[data-slug="tarantino"] .plato-precio { font-weight: 700; font-size: 17px; } body[data-slug="tarantino"] .plato.no-disponible .plato-nombre { color: var(--tinta-suave); } /* La barra con dibujos: nombres en crema, la elegida subrayada en rojo. */ body[data-slug="tarantino"] .barra.con-dibujos .pestana { font-family: var(--display); font-weight: 400; font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; } body[data-slug="tarantino"] .barra.con-dibujos .pestana[aria-current="true"] { background: rgba(240, 199, 38, 0.08); box-shadow: inset 0 -4px 0 var(--rojo-sangre); } /* La banda del medio de la carta, como la franja bordó de su pie. */ body[data-slug="tarantino"] .banda { background: var(--rojo-sangre); color: #f3ead2; } body[data-slug="tarantino"] .banda::after { display: none; } body[data-slug="tarantino"] .banda-texto { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.02em; } body[data-slug="tarantino"] .banda-pie { color: #f3ead2; } body[data-slug="tarantino"] ::selection { background: var(--oro); color: #141414; } /* ROTISERÍA AVENIDA — rotisería con delivery: platos, sándwiches y spiedo. * Parte de "nocturno" y se lleva a su marca: el negro del logo (#030201) con * un tono cálido, el rojo de "AVENIDA" (#f9050a) y el amarillo del contorno * (#fde402), medidos con colores-de-logo. Títulos en Young Serif, gruesa como * las letras del logo, para no confundirse con los otros deliverys (que van en * palo seco). Contrastes medidos: tinta sobre papel 18:1, tinta suave sobre * tarjeta 9:1, amarillo de texto sobre tarjeta 13.8:1. */ body[data-slug="rotiseria-avenida"] { --papel: #110c0a; --papel-hondo: #18110e; --tarjeta: #1f1612; --arena: #0b0806; --carbon: #070504; --tinta: #fbfafa; --tinta-suave: #c4b8ad; --oro: #fde402; --oro-texto: #fde402; --luz: #fbfafa; --linea: rgba(253, 228, 2, 0.14); --borde-grupo: 1px solid var(--linea); --display: "Young Serif", Georgia, serif; --display-peso: 400; --r-tarjeta: 14px; } /* El logotipo ya trae el logo completo: el sello no se repite encima. */ body[data-slug="rotiseria-avenida"] .portada .sello { display: none; } body[data-slug="rotiseria-avenida"] ::selection { background: var(--oro); color: #070504; } /* IL POSTINO — "la carta de papel del bodegón de 1997": pastas, pizzas y * tragos en un salón de ladrillo, madera y piso de damero. Sale de su carta * impresa y de su Instagram (material en work/ilpostino-material/): * * - Paleta: crema de papel, el rojo del sello (#b31b17, medido del logo) y el * negro café de su carta impresa. El detalle (--oro) es rojo, no dorado. * - Títulos en Bodoni gruesa y roja, como "Carnes" o "Postres" en su carta; * nombres de platos en letra condensada (Anton) y el precio subrayado. * - La línea ondulada que separa las secciones de su carta, el sello postal * dentado (Il Postino es el cartero), la etiqueta "Nuevo" roja como su * "NUOVO!" y el damero blanco y negro del piso del salón. * - Movimiento: el sello se estampa al abrir la carta. * * Contrastes medidos (work/ilpostino-material/contraste.mjs): tinta sobre * tarjeta 16.6:1, tinta suave sobre papel hondo 5.8:1, rojo sobre papel * 6:1, crema sobre rojo 6.4:1. Texto de la portada sobre la foto velada, * medido en la captura: 5.7:1 o más. */ body[data-slug="il-postino"] { --papel: #f8efdf; --papel-hondo: #efe2cb; --tarjeta: #fffaf0; --arena: #f1e6d2; --tinta: #241814; --tinta-suave: #66504a; --oro: #b31b17; --oro-texto: #a3180f; --carbon: #1f1714; --luz: #fff8ea; --linea: rgba(36, 24, 20, 0.13); --rojo-sello: #b31b17; --display: "Bodoni Moda", "Times New Roman", serif; --display-peso: 800; --r-tarjeta: 3px; --r-foto: 3px; --r-pastilla: 3px; --sombra-tarjeta: none; --guarda-alto: 24px; --guarda-patron: 24px; /* La ondulada de su carta: arcos hacia abajo unidos por un tramo recto. */ --ondulada: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9'%3E%3Cpath d='M0 1.5H2.5a5.5 5.5 0 0 0 11 0H16' fill='none' stroke='%23b31b17' stroke-width='1.6'/%3E%3C/svg%3E"); } /* El sello postal: estampilla crema con el borde dentado y el logo redondo adentro, torcida como recién pegada. El dentado es una máscara: agujeros de medio círculo cada 12 px sobre el borde. */ body[data-slug="il-postino"] .portada .sello { width: 108px; height: 108px; padding: 13px; border-radius: 0; background: var(--tarjeta); box-shadow: inset 0 0 0 7px var(--tarjeta), inset 0 0 0 8.5px var(--rojo-sello); -webkit-mask: radial-gradient(circle at 6px 6px, #0000 4px, #000 4.5px) -6px -6px / 12px 12px, linear-gradient(#000 0 0) center / calc(100% - 12px) calc(100% - 12px) no-repeat; mask: radial-gradient(circle at 6px 6px, #0000 4px, #000 4.5px) -6px -6px / 12px 12px, linear-gradient(#000 0 0) center / calc(100% - 12px) calc(100% - 12px) no-repeat; transform: rotate(-4deg); animation: ip-estampar 640ms cubic-bezier(0.22, 1.2, 0.36, 1) 150ms both; } body[data-slug="il-postino"] .portada .sello img { border-radius: 50%; } @keyframes ip-estampar { 0% { opacity: 0; transform: rotate(-11deg) scale(1.4); } 55% { opacity: 1; transform: rotate(-3deg) scale(0.95); } 100% { opacity: 1; transform: rotate(-4deg) scale(1); } } @media (prefers-reduced-motion: reduce) { body[data-slug="il-postino"] .portada .sello { animation: none; } } body[data-slug="il-postino"] .local-logotipo img { width: min(330px, 80vw); } body[data-slug="il-postino"] .local-sub { letter-spacing: 0.24em; } /* El filete de la portada es la ondulada de su carta. */ body[data-slug="il-postino"] .filete { height: 9px; background: var(--ondulada) center / 16px 9px repeat-x; } body[data-slug="il-postino"] .filete::before, body[data-slug="il-postino"] .filete::after, body[data-slug="il-postino"] .filete i { display: none; } body[data-slug="il-postino"] .local-frase { font-style: italic; font-weight: 700; font-size: clamp(25px, 6.8vw, 34px); color: var(--acento-texto); } body[data-slug="il-postino"] .cartas { background: color-mix(in srgb, var(--tarjeta) 82%, transparent); } body[data-slug="il-postino"] .carta-opcion { font-family: "Anton", var(--ui); font-weight: 400; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; } body[data-slug="il-postino"] .carta-opcion[aria-pressed="true"] { background: var(--acento-relleno); color: var(--acento-sobre); box-shadow: none; } body[data-slug="il-postino"] .barra.con-dibujos .pestana { font-family: "Anton", var(--ui); font-weight: 400; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; } /* En escritorio las ocho secciones de Cocina entran en un renglón. */ @media (min-width: 860px) { body[data-slug="il-postino"] .barra.con-dibujos .pestana { width: 84px; } } /* Secciones: la ondulada arriba, como entre secciones de su carta, y el título en Bodoni roja. */ body[data-slug="il-postino"] .categoria-cabeza { flex-wrap: wrap; } body[data-slug="il-postino"] .categoria-cabeza::before { content: ""; flex: 0 0 100%; height: 9px; margin-bottom: 8px; background: var(--ondulada) left center / 16px 9px repeat-x; } body[data-slug="il-postino"] .categoria-cabeza h2 { font-size: clamp(28px, 7.4vw, 36px); letter-spacing: -0.02em; color: var(--acento-texto); } /* La voz del local (sus frases de Instagram) en itálica, como sus placas. */ body[data-slug="il-postino"] .categoria-descripcion, body[data-slug="il-postino"] .carta-descripcion { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 17px; } /* La lista es una hoja de su carta: filo rojo arriba, sin sombra. */ body[data-slug="il-postino"] .grupo { border: 1px solid var(--linea); border-top: 3px solid var(--rojo-sello); } /* Platos como en papel: nombre condensado, descripción completa (en su carta se lee entera) y precio subrayado. */ body[data-slug="il-postino"] .plato-nombre { font-family: "Anton", var(--ui); font-weight: 400; font-size: 18.5px; line-height: 1.15; letter-spacing: 0.012em; } body[data-slug="il-postino"] .plato-resumen { margin-top: 3px; -webkit-line-clamp: 3; line-height: 1.4; } body[data-slug="il-postino"] .plato-precio { align-self: start; margin-top: 2px; padding-bottom: 2px; border-bottom: 2px solid currentColor; font-family: "Anton", var(--ui); font-weight: 400; font-size: 17.5px; letter-spacing: 0.02em; } body[data-slug="il-postino"] .plato-chevron { align-self: start; margin-top: 5px; } /* "Nuevo" como su "NUOVO!": rótulo rojo, un poco torcido. */ body[data-slug="il-postino"] .etiqueta:not(.etiqueta-nohay) { background: var(--acento-relleno); color: var(--acento-sobre); font-family: "Anton", var(--ui); font-weight: 400; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; transform: rotate(-3deg); } /* La banda: el rojo del sello con el damero del piso al pie. */ body[data-slug="il-postino"] .banda { padding-bottom: 60px; background: repeating-conic-gradient(var(--carbon) 0 25%, var(--luz) 0 50%) left bottom / 24px 24px repeat-x, var(--rojo-sello); color: var(--luz); } body[data-slug="il-postino"] .banda-sello { box-shadow: 0 0 0 4px color-mix(in srgb, var(--luz) 55%, transparent); } body[data-slug="il-postino"] .banda-texto { font-style: italic; font-weight: 700; } body[data-slug="il-postino"] .banda-pie { color: var(--luz); } body[data-slug="il-postino"] ::selection { background: var(--rojo-sello); color: var(--luz); }