/* ==========================================================================
Dragón Imperial — ajustes propios
Se carga DESPUÉS de style.css. No modifica la plantilla original:
todo lo de aquí se puede quitar borrando el del .
========================================================================== */
:root {
--di-rojo: #e1191f;
--di-rojo-oscuro: #b4141a;
--di-tinta: #130d08;
--di-dorado: #c8a45c;
}
/* --------------------------------------------------------------- 1. Marca
La plantilla venía con un naranja genérico (#fb6e14). Lo cambiamos por el
rojo del logo para que el sitio se sienta de Dragón Imperial. */
.fh5co-main-nav .fh5co-menu-1 a.active,
.fh5co-main-nav .fh5co-menu-2 a.active,
.fh5co-main-nav .fh5co-logo a.active,
.fh5co-main-nav a[aria-current="page"],
#fh5co-offcanvas a[aria-current="page"],
#fh5co-menus .fh5co-food-menu ul li .fh5co-food-pricing,
#fh5co-featured .fh5co-grid .pricing,
a {
color: var(--di-rojo);
}
a:hover,
a:focus,
a:active {
color: var(--di-rojo-oscuro);
}
.btn-primary.btn-outline {
border-color: var(--di-rojo);
color: var(--di-rojo);
}
.btn-primary.btn-outline:hover,
.btn-primary.btn-outline:focus,
.btn-primary.btn-outline:active {
background: var(--di-rojo);
border-color: var(--di-rojo);
color: #fff;
}
/* ------------------------------------------------------------ 2. Portada
Logo con tamaño real (antes iba con style="width:60%" en el HTML) y
botones de acción sobre el slider. */
.fh5co-main-nav .fh5co-logo img {
max-width: 100%;
width: 150px;
height: auto;
}
/* La barra fija comía demasiada pantalla en monitores grandes (el padding
de la plantilla era de 35px arriba y abajo). La bajamos de ~150px a ~85px. */
@media screen and (min-width: 769px) {
.fh5co-main-nav .fh5co-menu-1 a,
.fh5co-main-nav .fh5co-menu-2 a {
padding: 18px 12px;
}
.fh5co-main-nav .fh5co-logo img {
width: 92px;
}
.fh5co-main-nav .fh5co-logo a {
top: 0;
padding: 8px 10px;
}
}
/* El hero no traía background-position, así que usaba el default 0% 0%
(esquina superior izquierda). En celular, con la pantalla alta y angosta,
la foto se recortaba tanto que no se entendía qué era. */
#fh5co-home .flexslider .slides li {
background-position: center center;
}
/* En celular, además de centrar, cambiamos a versiones verticales (4:5) y
bajamos un poco el alto del hero. Con el 16:9 a pantalla completa sólo se
veía una rebanada del salón y no se entendía la foto.
Van !important porque la plantilla pone la imagen en el style del
y el alto por JS (main.js, fullHeight). */
@media screen and (max-width: 768px) {
#fh5co-home.js-fullheight {
height: 78vh !important;
min-height: 480px;
}
#fh5co-home .flexslider .fh5co-text {
margin-top: -120px;
padding: 0 18px;
}
/* A 50px el título llegaba pegado a las orillas en pantallas de 360-390 */
#fh5co-home .flexslider .fh5co-text h1 {
font-size: 42px;
}
#fh5co-home .flexslider .slides li.slide-1 { background-image: url(../images/slide_1m.jpg) !important; }
#fh5co-home .flexslider .slides li.slide-2 { background-image: url(../images/slide_2m.jpg) !important; }
#fh5co-home .flexslider .slides li.slide-3 { background-image: url(../images/slide_3m.jpg) !important; }
#fh5co-home .flexslider .slides li.slide-4 { background-image: url(../images/slide_4m.jpg) !important; }
#fh5co-home .flexslider .slides li.slide-5 { background-image: url(../images/slide_5m.jpg) !important; }
#fh5co-home .flexslider .slides li.slide-6 { background-image: url(../images/slide_6m.jpg) !important; }
#fh5co-home .flexslider .slides li.slide-7 { background-image: url(../images/slide_7m.jpg) !important; }
}
/* El texto del hero nunca se veía: la plantilla lo deja en opacity:0 y lo
revela un waypoint que sólo dispara al hacer scroll HACIA ABAJO — pero el
hero ya está en pantalla al cargar, así que nunca se disparaba. Le damos
su propia entrada en CSS, sin depender del JS. */
#fh5co-home .fh5co-text .to-animate {
opacity: 1;
animation: diEntrada .9s ease both;
}
#fh5co-home .fh5co-text h2.to-animate {
animation-delay: .18s;
}
#fh5co-home .fh5co-text .fh5co-hero-cta.to-animate {
animation-delay: .36s;
}
@keyframes diEntrada {
from { opacity: 0; transform: translate3d(0, 24px, 0); }
to { opacity: 1; transform: none; }
}
.fh5co-hero-cta {
margin-top: 25px;
}
.fh5co-hero-cta .btn {
margin: 6px 5px;
border-color: #fff;
color: #fff;
background: rgba(0, 0, 0, .25);
}
.fh5co-hero-cta .btn:hover,
.fh5co-hero-cta .btn:focus,
.fh5co-hero-cta .btn:active {
background: var(--di-rojo);
border-color: var(--di-rojo);
color: #fff;
}
/* El overlay del hero venía muy claro y el texto se perdía sobre las fotos
nuevas del restaurante. Le damos un degradado de abajo hacia arriba. */
#fh5co-home .fh5co-overlay {
background: linear-gradient(to bottom, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .62) 100%);
}
/* La foto del wok tiene llamas muy brillantes y el texto blanco encima se
perdía. Velo más oscuro sólo en esa franja. */
#fh5co-type .fh5co-overlay {
background: rgba(0, 0, 0, .62);
}
/* El scroll se sentía "por pasos". Eran dos efectos de parallax que obligan
al navegador a REPINTAR la foto completa en cada cuadro:
1. stellar.js movía el background-position de las fotos (ya lo quitamos
del HTML: se fueron los data-stellar-background-ratio y el