/* =========================================================================== TEMAS · Webs --------------------------------------------------------------------------- Un solo atributo en cambia la web entera: Temas: asador · ecuatoriano · tapas · italiano · japones · gastrobar REGLA DEL PROYECTO: nunca se escribe CSS a medida para un cliente. Si un cliente pide algo que no existe, se añade aquí como tema, y el siguiente cliente lo hereda gratis. A 250 € la web, el tiempo es el margen. Todas las variables tienen el mismo nombre en todos los temas. base.css no sabe qué tema está puesto y no debe saberlo nunca. =========================================================================== */ /* =========================================================================== RESPALDOS CON LAS METRICAS AJUSTADAS --------------------------------------------------------------------------- Mientras la fuente de Google esta en camino, el navegador pinta con la de respaldo. Georgia ocupa un 13 % mas de ancho que Bitter, asi que el titular del hero se pintaba mas grande, saltaba al cargar la fuente buena y, por debajo de 686 px, se salia de la pantalla. size-adjust encoge el respaldo hasta que ocupa lo mismo. El salto desaparece y el hero no se rompe ni sin conexion, que es como se ve la demo dentro de un restaurante sin wifi para invitados. Si se anade un tema con otra fuente, se mide asi: se carga la pagina con la fuente de Google quitada, se mide el ancho del titular, y el porcentaje es ancho_con_la_buena / ancho_con_la_de_respaldo. =========================================================================== */ @font-face { font-family: "Bitter respaldo"; src: local("Georgia"), local("Times New Roman"), local("serif"); size-adjust: 103%; ascent-override: 92%; descent-override: 24%; } @font-face { font-family: "Fraunces respaldo"; src: local("Georgia"), local("Times New Roman"), local("serif"); size-adjust: 104%; ascent-override: 96%; descent-override: 24%; } :root { /* Valores que NO cambian entre temas. */ --radio: 14px; --radio-chico: 8px; --arco-foto: none; --ancho: 1180px; --ancho-texto: 68ch; --sombra-plato: 0 12px 18px rgba(0, 0, 0, .35); --curva: cubic-bezier(.22, 1, .36, 1); /* Abierto y cerrado. Por defecto, las versiones OSCURAS: el fondo por defecto de la web es claro, y un verde pastel sobre crema no se lee. Las superficies oscuras las cambian por las claras en materia.css. */ --verde-abierto: #1B6E36; --rojo-cerrado: #A8331B; /* ---------------------------------------------------------- TEXTURAS -- Todas son SVG en linea. Ni una imagen que descargar, y juntas pesan menos de 3 KB. Van aqui y no en materia.css porque son materia prima compartida: materia.css decide DONDE se usan, esto es QUE son. Cuidado al editarlas: dentro de un data-URI, la almohadilla se escribe %23 y las comillas van simples. Un # sin escapar rompe la regla entera y el navegador no avisa, simplemente no pinta nada. */ /* Grano de pelicula, sobre toda la pagina. */ --textura-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E"); /* Fibra de papel: ruido estirado en horizontal, como la trama de una hoja. */ --textura-fibra: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.025 .75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)' opacity='.09'/%3E%3C/svg%3E"); /* Poro de piedra: ruido grueso y suave. */ --textura-poro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23p)' opacity='.14'/%3E%3C/svg%3E"); /* Borde de papel rasgado, para el corte entre secciones. */ --mascara-rasgado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='26' preserveAspectRatio='none'%3E%3Cpath d='M0 26V13c26-9 52 4 78-1s52-11 78-4 52 12 78 7 52-13 78-8 52 11 78 6 52-12 78-5 52 10 78 4 52-11 78-6 52 12 78 6 52-10 78-4 52 9 78 3 52-10 78-4 52 8 78 2 52-9 78-3 52 7 78 1 52-8 78-2v18z' fill='%23000'/%3E%3C/svg%3E"); /* Trozo de cinta adhesiva con los lados rotos. */ --mascara-cinta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='30' preserveAspectRatio='none'%3E%3Cpath d='M4 0h100l-3 5 3 5-4 5 4 5-3 5 3 5H4l3-5-3-5 4-5-4-5 3-5z' fill='%23000'/%3E%3C/svg%3E"); /* Colores de texto por defecto, los de una superficie clara. Cada superficie los sobrescribe (ver materia.css). Tienen que existir aqui SI O SI: si una regla usa var(--texto-suave) fuera de una superficie y la variable no existe, la declaracion es invalida y el navegador HEREDA el color del padre, que puede ser justo el contrario. Asi apareció texto casi negro sobre verde oscuro en la barra de credenciales. */ --texto: var(--tinta); --texto-suave: var(--tinta-suave); --texto-tenue: color-mix(in srgb, var(--tinta) 45%, transparent); --linea-sup: var(--linea); /* Cuanto grano y como se mezcla. Lo ajusta cada tema. */ --acento-claro: #E5B583; --sobre-marca: #FFFFFF; --grano-fuerza: .5; --grano-mezcla: multiply; --manuscrita: "Caveat", "Segoe Script", cursive; /* Fallback: si falta data-tema, manda el asador. Nunca una web sin color. */ --fondo: #FFFFFF; --fondo-alt: #F4F1EC; --fondo-hondo: #1C1714; --tinta: #23201D; --tinta-suave: #6B635C; --tinta-clara: #F2EDE6; --marca: #C1440E; --marca-viva: #E0782A; --acento: #7A4E2D; --linea: rgba(35, 32, 29, .14); --plato-fondo: #D9D2C7; --display: "Bitter", "Bitter respaldo", Georgia, "Times New Roman", serif; --cuerpo: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; --display-peso: 700; --display-espaciado: -.02em; --display-caja: none; } /* --------------------------------------------------------------- ASADOR --- Mesón castellano DE COMEDOR, no asador de lujo. Sacado del local real de La Fragua del Rey (ver docs/ESTUDIO-LOCALES.md): pared de piedra vista, mantel blanco, servilletas GRANATE dobladas en pico, madera clara y vigas. El granate no es un capricho: es el color que hay en sus mesas. Antes esto era naranja brasa, que le pega a un asador vasco y no a esta casa. */ [data-tema="asador"] { --fondo: #FFFFFF; --fondo-alt: #F5F1EA; /* mantel */ --fondo-hondo: #2B2320; /* piedra en sombra */ --tinta: #241F1C; --tinta-suave: #6E645B; --tinta-clara: #F3EEE6; --marca: #7D2233; /* granate de las servilletas */ --marca-viva: #A6394A; --acento: #8A6A47; /* madera clara de las sillas */ --linea: rgba(36, 31, 28, .14); --plato-fondo: #D9D2C7; /* piedra caliza */ --display: "Bitter", "Bitter respaldo", Georgia, "Times New Roman", serif; --cuerpo: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; --display-peso: 700; --display-espaciado: -.02em; --display-caja: none; --grano-fuerza: .55; --grano-mezcla: multiply; --manuscrita: "Caveat", "Segoe Script", cursive; --radio: 4px; /* recto, de mantel y madera */ --arco-foto: none; --acento-claro: #E5B583; /* para texto encima de foto o piedra */ --sobre-marca: #FFFFFF; } /* ----------------------------------------------------------- ECUATORIANO --- Verde plátano, amarillo maíz y rojo, sobre crema. Para cocina ecuatoriana y latina en general: encebollado, chaulafán, ceviche, caldo de bola. */ [data-tema="ecuatoriano"] { --fondo: #FFFDF7; --fondo-alt: #FBF3E2; --fondo-hondo: #163A2B; /* verde hoja de plátano */ --tinta: #1E1B16; --tinta-suave: #6E6455; --tinta-clara: #FDF8EC; --marca: #D6202B; /* rojo bandera */ --marca-viva: #F2A007; /* amarillo maíz */ --acento: #2E7D53; /* verde plátano */ --linea: rgba(30, 27, 22, .14); --plato-fondo: #F2A007; --display: "Fraunces", "Fraunces respaldo", Georgia, serif; --cuerpo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --display-peso: 700; --display-espaciado: -.015em; --display-caja: none; --grano-fuerza: .45; --grano-mezcla: multiply; --manuscrita: "Caveat", "Segoe Script", cursive; --radio: 22px; /* redondo y alegre */ --arco-foto: none; --acento-claro: #F2A007; /* para texto encima de foto o piedra */ --sobre-marca: #FFFFFF; } /* --- COLOMBIANO -------------------------------------------------------- Para El Arriero. NO es el mismo latino que el ecuatoriano de Luiansa, y ahi esta la gracia: un arriero es el que bajaba las mulas por la montaña de Antioquia, y su cocina es la paisa, la de los frijoles montañeros, el patacon y la bandeja. Registro de casa de montaña, no de playa. Por eso el fondo hondo es un azul noche y no un verde: el verde ya es de Luiansa, y dos webs latinas con el mismo verde vuelven a parecer la misma web con otra letra. El amarillo maiz y el rojo son de su bandera, y el marron es la madera y el café. */ [data-tema="colombiano"] { --fondo: #FFFCF4; --fondo-alt: #F7EEDC; --fondo-hondo: #1B2A3A; /* azul de noche de montaña */ --tinta: #211C15; --tinta-suave: #6B5F4E; --tinta-clara: #FDF6E7; --marca: #C0392B; /* rojo bandera */ --marca-viva: #E8A33D; /* amarillo maiz */ --acento: #8A5A32; /* madera de arriero, café tostado */ --linea: rgba(33, 28, 21, .15); --plato-fondo: #E8A33D; --display: "Bree Serif", "Bitter respaldo", Georgia, serif; --cuerpo: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif; --display-peso: 400; --display-espaciado: -.01em; --display-caja: none; --grano-fuerza: .5; --grano-mezcla: multiply; --manuscrita: "Caveat", "Segoe Script", cursive; --radio: 10px; /* menos redondo que el ecuatoriano */ --arco-foto: none; --acento-claro: #E8A33D; --sobre-marca: #FFFFFF; } /* ----------------------------------------------------------------- TAPAS --- Andaluz: cal, albero, tejar y azulejo añil. Para tabernas, freidurías y barras de tapeo. */ [data-tema="tapas"] { --fondo: #FFFFFF; --fondo-alt: #FAF6EF; --fondo-hondo: #1B4965; /* añil de azulejo */ --tinta: #2B2118; --tinta-suave: #6F6152; --tinta-clara: #FAF6EF; --marca: #A62639; /* rojo tejar */ --marca-viva: #E4A11B; /* albero */ --acento: #6B7A3F; /* verde oliva */ --linea: rgba(43, 33, 24, .16); --plato-fondo: #E4A11B; --display: "Abril Fatface", Georgia, serif; --cuerpo: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --display-peso: 400; --display-espaciado: 0; --display-caja: none; --grano-fuerza: .50; --grano-mezcla: multiply; --manuscrita: "Amatic SC", "Segoe Script", cursive; --radio: 10px; /* azulejo */ --arco-foto: none; --acento-claro: #EFC15A; /* para texto encima de foto o piedra */ --sobre-marca: #FFFFFF; } /* -------------------------------------------------------------- ITALIANO --- Trattoria: crema de mantel, tomate y basílico. Para pizzerías de horno y cocina italiana de barrio. */ [data-tema="italiano"] { --fondo: #FFFFFF; --fondo-alt: #F7F1E3; --fondo-hondo: #211E1C; --tinta: #211E1C; --tinta-suave: #6B6259; --tinta-clara: #F7F1E3; --marca: #C1272D; /* tomate */ --marca-viva: #E04B3F; --acento: #2E5E3A; /* basílico */ --linea: rgba(33, 30, 28, .14); --plato-fondo: #2E5E3A; --display: "Fraunces", "Fraunces respaldo", Georgia, serif; --cuerpo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --display-peso: 600; --display-espaciado: -.01em; --display-caja: none; --grano-fuerza: .45; --grano-mezcla: multiply; --manuscrita: "Caveat", "Segoe Script", cursive; --radio: 14px; /* trattoria */ --arco-foto: none; --acento-claro: #E8A87C; /* para texto encima de foto o piedra */ --sobre-marca: #FFFFFF; } /* -------------------------------------------------------------- JAPONES --- Papel washi, tinta sumi y bermellón. Muchísimo aire, una foto por pantalla. Para sushi, ramen y cocina asiática. */ [data-tema="japones"] { --fondo: #FFFFFF; --fondo-alt: #F4F1EA; --fondo-hondo: #16161D; /* sumi */ --tinta: #16161D; --tinta-suave: #8E8B84; /* nezumi */ --tinta-clara: #F4F1EA; --marca: #B7282E; /* bermellón shu */ --marca-viva: #D9484E; --acento: #274A78; /* índigo ai */ --linea: rgba(22, 22, 29, .12); --plato-fondo: #16161D; --display: "Shippori Mincho", "Noto Serif JP", Georgia, serif; --cuerpo: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif; --display-peso: 600; --display-espaciado: .01em; --display-caja: none; --grano-fuerza: .30; --grano-mezcla: multiply; --manuscrita: var(--display); --radio: 2px; /* casi sin radio, papel cortado */ --arco-foto: none; --acento-claro: #D9A7A9; /* para texto encima de foto o piedra */ --sobre-marca: #FFFFFF; } /* ----------------------------------------------------------------- ARABE --- Terraza mediterranea contemporanea, no bazar de azulejos. Sacado del local real de Bladi Fusion: toldo blanco de lona, vallado de MADERA clara, jardineras con plantas, fachada oscura y cartel DORADO en cursiva. La paleta anterior era azul zellige y terracota, que es un restaurante arabe tradicional. Este no lo es: se llama fusion y lo parece. */ [data-tema="arabe"] { --fondo: #FFFDF8; --fondo-alt: #F4EDE0; /* arena, el toldo */ --fondo-hondo: #2A2A24; /* la fachada */ --tinta: #23211C; --tinta-suave: #6B6455; --tinta-clara: #F7F2E7; --marca: #8A6524; /* dorado del cartel, oscurecido para que el texto blanco encima llegue a 4,5 de contraste */ --marca-viva: #B08432; --acento: #6B7A4F; /* verde de las jardineras */ --linea: rgba(35, 33, 28, .14); --plato-fondo: #6B7A4F; --display: "Marcellus", Georgia, serif; --cuerpo: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif; --display-peso: 400; --display-espaciado: .005em; --display-caja: none; --grano-fuerza: .45; --grano-mezcla: multiply; --manuscrita: "Caveat", "Segoe Script", cursive; --radio: 12px; /* ARCO en la foto: la forma arabe por excelencia */ --arco-foto: 46% 46% 12px 12px / 22% 22% 12px 12px; --acento-claro: #D2A74B; /* para texto encima de foto o piedra */ --sobre-marca: #FFFFFF; } /* ------------------------------------------------------------ GASTROBAR --- Grafito y acento eléctrico. Para gastrobares, hamburgueserías de autor y cocina de fusión moderna. Es el único tema oscuro de serie. */ [data-tema="gastrobar"] { --fondo: #141414; --fondo-alt: #1E1E1E; --fondo-hondo: #0A0A0A; --tinta: #EFEDE8; --tinta-suave: #A5A19A; --tinta-clara: #EFEDE8; --marca: #FF5C39; --marca-viva: #FF7E60; --acento: #B4654A; --linea: rgba(239, 237, 232, .16); --plato-fondo: #FF5C39; --display: "Space Grotesk", system-ui, sans-serif; --cuerpo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --display-peso: 700; --display-espaciado: -.03em; --display-caja: uppercase; --grano-fuerza: .38; --grano-mezcla: overlay; --manuscrita: "Caveat", "Segoe Script", cursive; --radio: 6px; /* filo duro */ --arco-foto: none; --acento-claro: #FF8A63; /* para texto encima de foto o piedra */ --sobre-marca: #241A15; }