/* Custom properties */ :root { --blanco: #ffffff; --negro: #111111; --color-primario: #1a5864; --color-secundario: #88a4a9; --color-terciario: #1a586484; --color-fondo-carta: linear-gradient( -45deg, var(--color-terciario) 0%, transparent 20% ); --color-degradado: linear-gradient(-35deg, var(--blanco) 0%, transparent 75%); --color-degradado3: linear-gradient( -35deg, var(--color-secundario) 0%, var(--blanco) 75% ); --color-degradado2: linear-gradient( -25deg, var(--color-terciario) 0%, transparent 45% ); --color-fondo-index: linear-gradient( -45deg, var(--color-terciario) 25%, transparent 45% ); --color-formulario: linear-gradient( -45deg, var(--color-secundario) 0, var(--blanco) 100% ); /* Sombras */ --sombra: 9px 9px 14px #676767, -9px -9px 14px #ffffff; --sombra1: 9px 9px 14px #ffffff, -9px -9px 14px #ffffff; --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 */ --border: 2px double var(--color-primario); --border-radius: 20px; /* Tipografía */ --tipo-principal: "Roboto", sans-serif; --tipo-secundaria: Verdana; /* Transition */ --transition: all 0.5s ease-in-out; } html { color: var(--color-primario); } /* body { background: var(--color-fondo-carta); 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: 1.1rem; } h2 { font-size: 1.3rem; font-weight: 600; } h3 { font-size: 1.2rem; font-weight: 600; } /* ICONOS BOOTSTRAP */ i { font-size: 1.2rem; padding: 0.6rem; } /* Iconos Cartas */ .bi-house-fill, .bi-heart-pulse, .star2 { font-size: 2rem; padding: 0; text-align: center; color: var(--blanco); } .star3 { font-size: 2rem; } /* */ /* ******************** FOOTER ****************************** */ /* FOOTER. Da estilos a todos los footers */ .footer { display: flex; flex-direction: column; text-align: center; padding: 0.5rem; padding-bottom: 8rem; } /* 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-degradado2); box-shadow: var(--sombra2); } .footer__imagen-alergenos { width: 90%; } .footer__boton-alergenos { width: auto; background: var(--color-degradado2); border-radius: var(--border-radius); margin: 0 auto; padding: 0.3rem; text-align: center; box-shadow: var(--sombra); } .footer__div { font-weight: bold; margin: 1rem; text-align: center; } .footer__gracias { text-align: center; } .footer__proweb { font-size: 0.8rem; text-align: center; } .footer__creditos { font-size: 0.8rem; text-align: center; } .footer__creditos span { font-size: 0.8rem; } .bi-heart-fill { color: red; } /* ********* FORMULARIO RESERVAS *************************** */ .form { position: fixed; top: 0; left: 0; z-index: 3; width: 90vw; height: 100vh; padding: 2rem; background: var(--color-formulario); /* 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 label { color: var(--color-primario); font-size: 1.1rem; display: inline-block; margin: 0.2rem; } .input-small { width: 60%; } .form input, .form select { padding: 0.4rem; background: var(--color-degradado2); border-radius: var(--border-radius); border: 1px solid var(--blanco); border-radius: 10px; font-size: 1rem; } .form textarea { width: 100%; padding: 0.4rem; background: var(--color-degradado2); border-radius: var(--border-radius); border: 1px solid var(--blanco); border-radius: 10px; font-size: 1rem; } .form span { font-size: 1.1rem; color: var(--color-primario); } .label-aviso { white-space: pre; } .warning { color: var(--color-primario); 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 0.5rem; border: 1px solid var(--blanco); border-radius: var(--border-radius); background: #55cb60; box-shadow: var(--sombra2); cursor: pointer; } /* Cerrar formulario de reservas */ .cerrar-formulario { position: absolute; top: 0.5rem; right: 1rem; font-size: 2rem; cursor: pointer; } .cerrar-formulario-desde-fuera { position: fixed; top: 0; right: -20%; width: 20%; height: 100vh; } /* Position absolute */ /* Botón Llamada */ .boton-whatsapp { color: #55cb60; width: auto; display: flex; justify-content: center; align-items: center; position: fixed; bottom: 1rem; left: 50%; padding: 0.2rem 0.5rem; transform: translate(-50%, -50%); font-size: 1.2rem; border: 1px solid var(--blanco); border-radius: var(--border-radius); background: #55cb60; box-shadow: var(--sombra2); cursor: pointer; } .easy { display: inline-block; width: 2rem; } .easy2 { color: #55cb60; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; } #easy3 { color: #55cb60; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; font-size: 1.5rem; font-weight: bold; } .booking { color: var(--blanco); text-shadow: -1px -1px 0 #55cb60, 1px -1px 0 #55cb60, -1px 1px 0 #55cb60, 1px 1px 0 #55cb60; } #booking { color: var(--blanco); text-shadow: -1px -1px 0 #55cb60, 1px -1px 0 #55cb60, -1px 1px 0 #55cb60, 1px 1px 0 #55cb60; 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; } /* Logo de fondo */ .logo__fondo { width: 50%; max-width: 20rem; position: fixed; top: 50%; left: 55%; transform: translate(-50%, -50%); z-index: -2; } .logo__fondoT { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -2; } .logo__fondo-imgT { width: 100vw; height: 100vh; } /* ***************** ANIMACIONES *************************** */ @keyframes rotation { from { transform: rotateX(180deg); } to { transform: rotateX(360deg); } }