* { box-sizing: border-box; margin: 0; padding: 0; font-family: "Roboto", sans-serif; text-decoration: none; } /* Custom properties */ :root { --blanco: #ffffff; --negro: #111111; --color-primario: #283cf4; --color-secundario: #283cf4; --color-degradado: linear-gradient( -45deg, var(--color-primario) 10%, transparent 45%, transparent 5%, var(--blanco) 80% ); --color-degradado2: linear-gradient( -45deg, var(--color-primario) 10%, var(--blanco) 45%, var(--blanco) 5%, var(--blanco) 80% ); /* Sombras */ --sombra: 6px 6px 8px #fff, -6px -6px 8px var(--negro); /* Botones */ --border-radius: 20px; } html { color: var(--negro); } body { background: var(--blanco); width: 100%; } /* 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(--negro); } h2 { font-size: 1.1rem; font-weight: 600; color: var(--negro); } h3 { font-size: 1rem; color: var(--blanco); } h4 { color: var(--negro); font-size: 1.2rem; padding-bottom: 0.1rem; } /* ICONOS BOOTSTRAP */ i { font-size: 1.7rem; padding: 0 0.8rem; color: var(--color-secundario); } /* Iconos Cartas */ .bi-house-fill, .bi-heart-pulse, .star2 { font-size: 2rem; padding: 0; text-align: center; } .star3 { font-size: 2rem; 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; @media print { display: none; } } /* 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); background: var(--color-degradado); box-shadow: var(--sombra); color: var(--color-primario); } .footer__imagen-alergenos { width: 90%; } .footer__boton-alergenos { width: auto; background: var(--color-degradado); border-radius: var(--border-radius); margin: 0 auto; padding: 0.3rem 1rem; text-align: center; box-shadow: var(--sombra); color: var(--negro); } .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; background-image: url(/images/fondo.webp); background-size: cover; background-repeat: repeat; } /* ***************** 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; height: 100vh; padding: 2rem; background: var(--color-degradado), url("/images/fondo2.webp") center/cover no-repeat; /* backdrop-filter: blur(10px); */ /* Efecto cristal */ transition: all 0.5s ease-in-out; /* Ocultar menú lateral */ opacity: 0; visibility: hidden; transform: translateX(-100%); box-shadow: 38px 38px 48px #515151, -38px -38px 44px #ffffff; } .active { opacity: 1; visibility: visible; transform: translateX(0); } .form div { display: flex; flex-direction: column; gap: 0.1rem; } .form .boton-whatsapp { width: 13rem; margin: 1rem auto 0; padding: 0.3em; font-size: 1.3rem; } .form label { font-size: 1.2rem; color: var(--color-secundario); display: inline-block; margin: 0.2rem; } .input-small { width: 60%; } .form input, .form select { padding: 0.4rem; background: var(--color-degradado); border-radius: var(--border-radius); border: 1px solid #55cb60; border-radius: 10px; font-size: 1rem; box-sizing: border-box; } /* Fila de 2 columnas: teléfono, fecha, hora y comensales */ .form .fila-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1rem; } .form .fila-doble > div { justify-content: flex-end; } .form .fila-doble label { margin: 0.2rem 0; } .form .fila-doble .input-small { width: 100%; height: 2.2rem; } .form textarea { width: 100%; padding: 0.4rem; background: var(--color-degradado); border-radius: var(--border-radius); border: 1px solid #55cb60; border-radius: 10px; font-size: 1rem; } .form span { color: #777777; } .warning { color: rgb(225, 78, 78); 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: 0 auto; display: flex; justify-content: center; align-items: center; padding: 0.2rem 1rem; border: 2px solid transparent; border-radius: 20px; background: linear-gradient(#55cb60, #55cb60) padding-box, linear-gradient(90deg, #fff, #55cb60, #2c70f8, #55cb60, #fff) border-box; background-size: 100% 100%, 300% 100%; box-shadow: var(--sombra); cursor: pointer; animation: border-shine 2s linear infinite; } @keyframes border-shine { 0% { background-position: 0 0, 0% 50%; } 100% { background-position: 0 0, 300% 50%; } } /* Cerrar formulario de reservas */ .cerrar-formulario { position: absolute; top: 0.5rem; right: 1rem; font-size: 2rem; cursor: pointer; color: var(--color-primario); } .cerrar-formulario-desde-fuera { position: fixed; top: 0; right: -20%; width: 20%; height: 100vh; } /* Position absolute */ /* Botón Llamada */ .boton-whatsapp { text-align: center; padding: 0.3rem 1rem; font-size: 1rem; color: var(--color-primario); border: 2px solid var(--blanco); border-radius: 20px; background: var(--color-degradado) padding-box, linear-gradient(90deg, #fff, #fff, #2c70f8, #fff, #fff) border-box; background-size: 100% 100%, 300% 100%; box-shadow: var(--sombra); cursor: pointer; animation: border-shine 6s linear infinite; } .booking { font-size: 1.5rem; } /* LUCES BRILLANTES */ @keyframes STAR { 0% { background: powderblue; height: 1px; width: 1px; box-shadow: 0px 0px 13px white; } 10% { background: #cbe8e4; } 20% { background: #b0e5cc; } 30% { background: #cce5b0; } 40% { background: #dae5b0; } 50% { background: #e5ddb0; width: 4px; height: 4px; box-shadow: 0px 0px 13px #ffffff; } 100% { width: 1px; height: 1px; background: powderblue; box-shadow: 0px 0px 13px white; } } .star { height: 1px; width: 1px; border-radius: 5px; box-shadow: 0px 0px 13px white; background: powderblue; position: fixed; } .star.pulse { animation: STAR 2s infinite; } /* ========================================== */ /* MODAL GOOGLE MAPS */ /* ========================================== */ .maps-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); z-index: 15; display: flex; justify-content: center; align-items: center; padding: 2rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease-out, visibility 0.3s ease-out; } .maps-modal.active { opacity: 1; visibility: visible; pointer-events: all; } .maps-modal-content { position: relative; width: 100%; max-width: 900px; height: 80vh; max-height: 600px; background: #fff; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); transform: scale(0.9); opacity: 0; transition: transform 0.3s ease-out, opacity 0.3s ease-out; } .maps-modal.active .maps-modal-content { transform: scale(1); opacity: 1; } .maps-modal-close { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; background: linear-gradient(-55deg, #333 0%, #000 55%); border: none; border-radius: 50%; color: #fff; font-size: 1.5rem; cursor: pointer; z-index: 16; display: flex; justify-content: center; align-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease, background 0.3s ease; } .maps-modal-close:hover { transform: rotate(90deg) scale(1.1); } .maps-container { width: 100%; height: 100%; } .maps-container iframe { width: 100%; height: 100%; border: none; } .maps-directions-btn { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.5rem; background: linear-gradient(-55deg, #333 0%, #000 55%); color: #fff; text-decoration: none; border-radius: 50px; font-weight: 400; font-size: 1rem; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease, background 0.3s ease; z-index: 16; } .maps-directions-btn:hover { transform: translateX(-50%) scale(1.05); }