/* =========================================================================== TEMAS · Webs --------------------------------------------------------------------------- Un solo atributo en cambia la web entera: Temas: asador · ecuatoriano · colombiano · tapas · italiano · japones · arabe gastrobar · pasteleria · chino · marinero 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: "Playfair respaldo"; src: local("Georgia"), local("Times New Roman"), local("serif"); size-adjust: 100%; ascent-override: 94%; descent-override: 22%; } @font-face { font-family: "Zilla respaldo"; src: local("Georgia"), local("Times New Roman"), local("serif"); size-adjust: 101%; ascent-override: 92%; descent-override: 24%; } @font-face { font-family: "Alfa respaldo"; src: local("Georgia"), local("Times New Roman"), local("serif"); size-adjust: 118%; ascent-override: 96%; descent-override: 26%; } @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); /* --------------------------------------------------- EL VELO DEL HERO -- La vineta que oscurece la foto del hero para que se lea el titular. Por defecto es negra y a plena fuerza, que es lo que necesita un asador. Una pasteleria en rosa con eso encima parece un sotano, asi que el tema puede bajar la fuerza y tenir el velo de su propio color. Si se toca, se vuelve a medir el contraste: es lo unico que separa el titular legible del titular que no se ve. */ --velo-rgb: 0, 0, 0; --velo-fuerza: 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"] { /* El unico tema oscuro de serie, y por eso el unico que tiene que traerse el abierto/cerrado en su version CLARA. Los de :root son los oscuros, que valen sobre papel; aqui hasta el papel es negro, y materia.css solo los cambia dentro de .superficie-piedra y .superficie-madera. Sin esto, el "Cerrado ahora mismo" de la barra de datos daba 2,77 de contraste sobre el minimo de 4,5: rojo oscuro sobre negro. */ --verde-abierto: #8FDC98; --rojo-cerrado: #F5A99C; --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; } /* ------------------------------------------------------------ PASTELERIA --- Rosa palo, ciruela y crema. Para pastelerías, cafeterías de tarta y obradores que venden por encargo. El producto ya es de color: el tema pone el papel. */ [data-tema="pasteleria"] { --velo-rgb: 58, 30, 44; /* ciruela, no negro */ --velo-fuerza: .62; --fondo: #FFFFFF; --fondo-alt: #FFF7F3; --fondo-hondo: #4A2B3A; /* ciruela */ --tinta: #3A2430; --tinta-suave: #7A6470; --tinta-clara: #FFF7F3; --marca: #B23A63; /* frambuesa, oscurecida para que el enlace se lea */ --marca-viva: #C9527A; --acento: #6F8F72; /* pistacho */ --linea: rgba(58, 36, 48, .14); --plato-fondo: #F3C6D5; /* rosa palo */ --display: "Playfair Display", "Playfair respaldo", Georgia, serif; --cuerpo: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; --display-peso: 700; --display-espaciado: -.01em; --display-caja: none; --grano-fuerza: .32; --grano-mezcla: multiply; --manuscrita: "Parisienne", "Segoe Script", cursive; --radio: 18px; /* todo redondeado, como un molde */ --arco-foto: 50% 50% 8px 8px / 18% 18% 8px 8px; --acento-claro: #F3C6D5; /* para texto encima de foto o piedra */ --sobre-marca: #FFFFFF; } /* ----------------------------------------------------------------- CHINO --- Laca, bermellón y dorado sobre papel de arroz. Para restaurantes chinos de barrio, que son casi siempre carta larga y comedor grande. */ [data-tema="chino"] { --fondo: #FFFFFF; --fondo-alt: #FBF3E6; /* papel de arroz */ --fondo-hondo: #2B1012; /* laca */ --tinta: #241110; --tinta-suave: #6E5A52; --tinta-clara: #FBF3E6; --marca: #C8102E; /* bermellón */ --marca-viva: #E23B4F; --acento: #8C6A1F; /* dorado, bajado hasta que se lee sobre blanco */ --linea: rgba(36, 17, 16, .16); --plato-fondo: #C8102E; --display: "Zilla Slab", "Zilla respaldo", Georgia, serif; --cuerpo: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --display-peso: 700; --display-espaciado: -.01em; --display-caja: none; --grano-fuerza: .42; --grano-mezcla: multiply; --manuscrita: "Caveat", "Segoe Script", cursive; --radio: 4px; /* filo de laca */ --arco-foto: none; --acento-claro: #D4A017; /* para texto encima de foto o piedra */ --sobre-marca: #FFFFFF; } /* -------------------------------------------------------------- MARINERO --- Azul atlántico, papel de estraza y limón. Para freidurías, marisquerías y asadores de pollo con terraza. Es el sur, no el norte: cal y sol, no niebla. */ [data-tema="marinero"] { --fondo: #FFFFFF; --fondo-alt: #FBF8F0; /* papel de estraza */ --fondo-hondo: #0F3A4D; /* azul atlántico */ --tinta: #14252B; --tinta-suave: #5D6E74; --tinta-clara: #FBF8F0; --marca: #C0431F; /* teja, el color de la gamba cocida */ --marca-viva: #D94F2B; --acento: #1D7A8C; /* turquesa */ --linea: rgba(20, 37, 43, .16); --plato-fondo: #F2C14E; /* limón */ --display: "Alfa Slab One", "Alfa respaldo", Georgia, serif; --cuerpo: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif; --display-peso: 400; --display-espaciado: 0; --display-caja: none; --grano-fuerza: .46; --grano-mezcla: multiply; --manuscrita: "Caveat", "Segoe Script", cursive; --radio: 8px; --arco-foto: none; --acento-claro: #F2C14E; /* para texto encima de foto o piedra */ --sobre-marca: #FFFFFF; }