/* Custom properties */ :root { /* =================================================================== TEMA DEL CLIENTE · lo ÚNICO que cambia por restaurante (esto es lo que se edita al activar un cliente / lo escribirá el panel) =================================================================== */ --color-primario: #1d8bc2; /* azul Danny's: bordes, botones, números */ --color-secundario: #07496a; /* azul oscuro — texto y títulos */ --color-acento: #e3f1f9; /* azul muy claro: fondos suaves y resaltes */ --color-destacado: #7e170e; /* rojo granate: títulos de familia, nombre de plato y precio en la carta */ --tipo-principal: "Roboto", sans-serif; --border-radius: 20px; /* =================================================================== SISTEMA · común a TODOS los clientes (no hace falta tocar) =================================================================== */ /* Base */ --blanco: #ffffff; --negro: #111111; /* Colores funcionales: los DECORATIVOS derivan de la marca (se adaptan solos a cada cliente); los SEMÁNTICOS son fijos. */ --color-glow: var(--color-primario); /* halo de iconos del aside */ --color-easy: #55cb60; /* verde WhatsApp/@easybooking (fijo, semántico) */ --color-form-borde: color-mix(in srgb, var(--color-primario) 40%, transparent); --color-form-borde-focus: color-mix( in srgb, var(--color-primario) 30%, transparent ); /* Degradados — tu "look clásico" de botones/superficies. Derivan de la marca, así que se adaptan solos a cada cliente. */ --color-degradado: linear-gradient( -45deg, var(--color-primario) 0%, var(--blanco) 45% ); --color-degradado2: linear-gradient( -45deg, var(--color-primario) 0%, transparent 45% ); --color-fondo-carta: linear-gradient( -45deg, var(--blanco) 0%, transparent 30% ); --color-fondo-index: linear-gradient( -45deg, var(--color-primario) 25%, transparent 45% ); --color-formulario: linear-gradient(-45deg, var(--color-easy) 0, var(--blanco) 40%); /* Glass effect (tarjetas translúcidas con blur) */ --glass-bg: rgba(255, 255, 255, 0.3); --glass-blur: blur(4px); /* Sombras */ --sombra: 3px 3px 4px #fff, -3px -3px 4px var(--negro); --sombra-invertida: -3px -3px 4px #fff, 3px 3px 4px var(--negro); --sombra2: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); /* Botones / bordes */ --border: 2px double var(--color-primario); /* Transición */ --transition: all 0.5s ease-in-out; } html { color: var(--color-secundario); } body { width: 100%; font-family: var(--tipo-principal); } /* Utility: tarjetas translúcidas con blur (glass) */ .glass { background-color: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } /* fadeIn - En el de cada página */ .fade-in { animation: fadeIn ease 2s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } /* Títulos de las familias de comidas y bebidas */ p { font-size: 1rem; /* white-space: pre-line; Valida los saltos de linea \n que inserto en los textos largos que tengo en la data*/ white-space: pre-line; color: var(--color-secundario); } h2 { font-size: 1.1rem; font-weight: 600; color: var(--color-secundario); } h3 { font-size: 1rem; color: var(--color-secundario); } h4 { color: var(--color-secundario); font-size: 1.3rem; padding-bottom: 0.2rem; } /* Utilidad "visually hidden": oculta a la vista pero legible por lectores de pantalla y buscadores (para h1/h2 de SEO en páginas sin titular visible). No usar display:none (eso sí lo ignora Google). */ .visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ICONOS BOOTSTRAP */ i { font-size: 1.7rem; padding: 0 0.8rem; /* color: var(--color-secundario); */ } /* Iconos de navegación en imagen (SVG Material recoloreado al tema): aside de la carta y cabeceras de alérgenos/reseñas. Sustituyen a los Bootstrap Icons. */ .nav__icono { width: 2rem; height: auto; cursor: pointer; } .star3 { font-size: 2rem; color: var(--color-secundario); padding: 0; } /* */ /* ******************** FOOTER ****************************** */ /* FOOTER. Da estilos a todos los footers */ .footer { display: flex; flex-direction: column; text-align: center; padding: 0.5rem; padding-bottom: 3rem; } /* Baner de alérgenos */ .baner__alergenos { max-width: 50rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; margin: 0 auto; padding: 1rem; border-radius: var(--border-radius); box-shadow: var(--sombra-invertida); color: var(--color-primario); } .footer__imagen-alergenos { width: 90%; } .footer__boton-alergenos { width: auto; border-radius: var(--border-radius); margin: 0 auto; padding: 0.3rem 1rem; text-align: center; box-shadow: var(--sombra-invertida); color: var(--color-secundario); } .footer__div { font-weight: bold; margin: 1rem; text-align: center; } .footer__div h3 { color: var(--color-secundario); } .footer__creditos { font-size: 0.8rem; text-align: center; color: var(--color-secundario); } .footer__creditos span { font-size: 0.8rem; } .email { text-align: center; padding: 1rem; color: var(--color-secundario); } .restaurant123 { color: var(--color-secundario); font-size: 0.8rem; } /* ************************************************ */ /* Logo de fondo */ .logo__fondo { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: -2; /* Fondo del RESTO de la app (carta, bebidas, desayunos, alérgenos, reseñas). Dos capas en un mismo elemento: 1) favicon.webp → logo centrado a tamaño fijo (alto auto) = NO se deforma. 2) fondo.webp → fondo que cubre la pantalla (cover). (La home usa su propio fondo en .index → index2.css). */ background-image: url(/images/favicon.webp), url(/images/fondo.webp); background-repeat: no-repeat, no-repeat; background-position: center, center; background-size: min(50%, 20rem) auto, cover; } /* ***************** ANIMACIONES *************************** */ @keyframes rotation { from { transform: rotateX(180deg); } to { transform: rotateX(360deg); } } /* ********* FORMULARIO RESERVAS *************************** */ .form { position: fixed; top: 0; left: 0; z-index: 3; width: 90vw; max-width: 35rem; height: 100vh; padding: 2.5rem 2rem; background: linear-gradient(160deg, var(--blanco) 0%, var(--blanco) 30%, color-mix(in srgb, var(--color-primario) 50%, var(--blanco)) 100%); border-right: 2px solid var(--color-primario); transition: all 0.5s ease-in-out; overflow-y: auto; /* Ocultar menú lateral */ opacity: 0; visibility: hidden; transform: translateX(-100%); box-shadow: 30px 10px 30px rgba(251, 250, 250, 0.897); } .form.active { opacity: 1; visibility: visible; transform: translateX(0); } .form div { display: flex; flex-direction: column; gap: 0.2rem; } .form label { font-size: 1rem; font-weight: 600; color: var(--color-secundario); display: inline-block; margin: 0.5rem 0 0.2rem; } .input-small { width: 65%; } .form .form__fila { flex-direction: row; gap: 1rem; /* Alinea los inputs al pie de la fila para que queden a la misma altura aunque una label ocupe 1 línea y otra 2 (ej. "Teléfono" vs "Fecha de la reserva") */ align-items: flex-end; & > div { flex: 1; min-width: 0; } & .input-small { width: 100%; } } .form input, .form select { padding: 0.6rem 0.8rem; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--color-form-borde); border-radius: 10px; font-size: 1rem; color: var(--color-secundario); transition: border-color 0.3s ease; } .form input::placeholder { color: rgba(249, 239, 218, 0.4); } .form input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); } .form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--color-primario); box-shadow: 0 0 8px var(--color-form-borde-focus); } .form textarea { width: 100%; padding: 0.6rem 0.8rem; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--color-form-borde); border-radius: 10px; font-size: 1rem; color: var(--color-secundario); transition: border-color 0.3s ease; resize: vertical; } .form select { cursor: pointer; } .form select option { color: var(--color-secundario); } .form span { color: rgba(249, 239, 218, 0.5); font-size: 0.85rem; } .warning { color: var(--color-primario); font-weight: 600; opacity: 0; padding: 0.5rem 0; transition: all 0.7s ease-in-out; transform: translateX(-100%); } .active-warning { opacity: 1; transform: translateX(0); } .reservar { width: fit-content; margin: 1.5rem auto 0; display: flex; justify-content: center; align-items: center; padding: 0.5rem 1.5rem; font-size: 1.5rem; font-weight: 800; text-decoration: none; border-radius: var(--border-radius); cursor: pointer; } /* ********* BOTONES DE RESERVA CON DEGRADADO ANIMADO *************************** */ /* Aplicado a los 3 botones de reserva: header de index, header de carta/drinks y botón final del formulario. El degradado se mueve horizontalmente en bucle para llamar la atención sobre la acción principal del SaaS. */ .index__boton-reservar, .carta__boton-reservar, .reservar { color: var(--blanco); background: linear-gradient( 270deg, var(--color-secundario), var(--color-primario), color-mix(in srgb, var(--color-primario) 30%, var(--color-secundario)), var(--color-secundario) ); /* 300% = (4 paradas - 1) × 100%. Crea espacio para que background-position se mueva */ background-size: 300% 100%; border: 1px solid var(--blanco); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); text-shadow: none; animation: degradadoMovil 3s ease infinite; transition: transform 0.3s ease, box-shadow 0.3s ease; &:hover { transform: scale(1.05); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); } } @keyframes degradadoMovil { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Cerrar formulario de reservas */ .cerrar-formulario { position: absolute; top: 0.8rem; right: 1rem; font-size: 2rem; cursor: pointer; color: var(--color-primario); transition: transform 0.3s ease; } .cerrar-formulario:hover { transform: scale(1.2); } .cerrar-formulario-desde-fuera { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 2; } /* Position absolute */ /* Botón Llamada */ .boton-whatsapp { display: none; justify-content: center; align-items: center; position: fixed; bottom: 1rem; left: 50%; padding: 0.3rem 2rem; transform: translate(-45%, -50%); font-size: 1.2rem; border: 1px solid var(--blanco); border-radius: 20px; box-shadow: var(--sombra-invertida); cursor: pointer; z-index: 2; } .booking { color: var(--color-secundario); text-shadow: none; } #booking { color: var(--color-secundario); text-shadow: 1px 1px 0 var(--color-easy); font-size: 1.5rem; font-weight: bold; } .boton-whatsapp-img { width: 2rem; } .boton-whatsapp-easy { width: 1.5rem; } .boton-whatsapp span { font-size: 1.5rem; font-weight: bold; } /* Boton @easybooking del index */ .easy-index { transform: translate(-50%, -50%); background: var(--color-primario); border: 1px solid var(--color-easy); } /* *********************************************************** */ /* SCROLL FADE-IN ANIMATIONS */ /* *********************************************************** */ .fade-in-element { opacity: 0; transform: translateY(30px); transition: opacity 1.3s ease-out, transform 1.3s ease-out; } .fade-in-element.visible { opacity: 1; transform: translateY(0); } /* Variantes de animación */ .fade-in-left { opacity: 0; transform: translateX(-50px); transition: opacity 1.3s ease-out, transform 1.3s ease-out; } .fade-in-left.visible { opacity: 1; transform: translateX(0); } .fade-in-right { opacity: 0; transform: translateX(50px); transition: opacity 1.3s ease-out, transform 1.3s ease-out; } .fade-in-right.visible { opacity: 1; transform: translateX(0); } .fade-in-scale { opacity: 0; transform: scale(0.9); transition: opacity 1.3s ease-out, transform 1.3s ease-out; } .fade-in-scale.visible { opacity: 1; transform: scale(1); }