/* 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; }