* { box-sizing: border-box; margin: 0; padding: 0; font-family: "Roboto", sans-serif; text-decoration: none; } /* Custom properties */ :root { --blanco: #ffffff; --negro: #000000; --color-primario: #8f3255; --titulos-precios: #8f3255; --color-fondo-carta: linear-gradient( -45deg, var(--color-primario) 0%, transparent 30% ); --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-index: linear-gradient( -45deg, var(--color-primario) 25%, transparent 45% ); /* Sombras */ --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(--negro); background-color: var(--blanco); } /* Imagen de Fondo - Global */ .fondo { position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; object-fit: cover; z-index: -1; } /* 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 { color: var(--color-primario); padding-left: 1.1rem; font-size: 1.1rem; } h2 { font-size: 1.5rem; font-weight: 600; } h3 { font-size: 1.2rem; } /* 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(--color-primario); } .star3 { font-size: 2rem; color: var(--color-primario); } /* FOOTER */ .footer { display: flex; flex-direction: column; text-align: center; padding: 0.5rem; padding-bottom: 8rem; } .footer__div { font-weight: bold; margin: 1rem; text-align: center; white-space: pre-line; } .footer__creditos { font-size: 0.8rem; text-align: center; } .footer__creditos span { font-size: 0.8rem; } .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(--sombra2); } /* 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); } .bi-heart-fill { color: red; } /* Logo de fondo */ .logo__fondo2 { width: 100%; height: 100%; position: fixed; top: 0; right: 0; z-index: -1; background-image: url(/images/logo3.webp); background-size: 20rem; background-repeat: no-repeat; background-position: center; } /* ANIMACIONES */ @keyframes rotation { from { transform: rotateX(180deg); } to { transform: rotateX(360deg); } } /* SCROLL FADE-IN ANIMATIONS */ .fade-in-element { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .fade-in-element.visible { opacity: 1; transform: translateY(0); } .fade-in-left { opacity: 0; transform: translateX(-50px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .fade-in-left.visible { opacity: 1; transform: translateX(0); } .fade-in-right { opacity: 0; transform: translateX(50px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .fade-in-right.visible { opacity: 1; transform: translateX(0); } .fade-in-scale { opacity: 0; transform: scale(0.9); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .fade-in-scale.visible { opacity: 1; transform: scale(1); }