/* ==========================================================================
home-mobile.css
Reordenado y compactado de la home en pantallas chicas.
Se enlaza solo en index.php, con el flag $cssHomeMobile.
Medido antes de esto, en un viewport de 375x850, la home eran 9803px
(11.5 pantallas) en este orden:
102 carrusel .............. 748px
880 promo del CMS ......... 300px
1180 "Hacia lo Natural" ... 1009px
2188 productos destacados . 2431px
4619 "¿Que Estas Buscando?" 2159px <- las categorias
6778 novedades ............. 823px
7601 "¿Por que Gergal?" ... 1740px
O sea: el primer producto aparecia recien a los 2335px (2.7 pantallas) y
las categorias, que son el atajo natural para empezar a comprar, a las 5.4.
El 28% de la home era texto institucional.
El objetivo del sitio es vender, asi que lo comercial sube y lo
institucional baja. Todo el reordenamiento es CSS y solo bajo 768px: el
HTML no cambia de orden y el desktop queda exactamente igual que antes.
========================================================================== */
/* El colapsable de textos ("Leer más") y la compactacion de separadores y
titulos de seccion viven ahora en mobile-sitewide.css: se usan igual en
productos.php y en el resto del sitio, no solo aca. */
@media (max-width: 767px) {
/* ----------------------------------------------------------------------
Orden nuevo: primero lo que sirve para comprar
---------------------------------------------------------------------- */
.main-wrapper {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
/* min-width:0 y max-width:100% en cada bloque.
Sin esto, un item flex conserva min-width:auto y puede crecer mas que su
contenedor si el contenido lo empuja. Owl Carousel hace exactamente eso:
le pone al .owl-wrapper un ancho de (items x ancho de item), el contenedor
de Novedades se estiraba a 1350px dentro de un .main-wrapper de 360, y en
la siguiente medicion Owl calculaba items de 60px. Ese era el motivo real
de que en Novedades las tarjetas salieran aplastadas. */
.main-wrapper > * {
min-width: 0;
max-width: 100%;
}
#home-categorias { -webkit-order: 1; order: 1; } /* arriba de todo: es el atajo a comprar */
#home-promo { -webkit-order: 2; order: 2; } /* la promo del CMS: tambien es venta */
#home-destacados { -webkit-order: 3; order: 3; }
#home-novedades { -webkit-order: 4; order: 4; }
#home-institucional{ -webkit-order: 5; order: 5; } /* baja desde la posicion 3 */
.main-wrapper > .parallax { -webkit-order: 6; order: 6; } /* "¿Por que Gergal?" */
/* ----------------------------------------------------------------------
Carrusel: no se muestra en mobile
Los 4 slides linkean a las 4 categorias, que es exactamente lo que
muestra "¿Que estas buscando?", ahora arriba de todo. Era el mismo atajo
dos veces, y el del carrusel costaba una pantalla entera.
application.js ademas sale sin inicializar el plugin en este breakpoint,
asi que tampoco se paga el trabajo de armarlo.
---------------------------------------------------------------------- */
.slider-wrapper {
display: none;
}
/* El alto del carrusel NO se toca desde aca. Se intento primero con
max-height + overflow hidden y sale mal: Revolution Slider calcula la
posicion de los textos a partir del alto del contenedor, asi que
recortarlo por CSS le descoloca los captions (quedaban a 1194px del tope,
o sea invisibles) y el slider se convierte en una banda decorativa sin
titulo ni boton. El alto se configura donde corresponde, en la llamada al
plugin en application.js. */
/* ----------------------------------------------------------------------
Categorias: de una columna de mosaicos gigantes a una grilla 2x2
getCategoriasForIndex() arma cada mosaico como col-md-4 con un
line-height:360px inline, que es lo que le da el alto. En mobile eso son
360px por categoria, apilados: el bloque entero medía 2069px y, aun
estando arriba, empujaba los productos mas abajo que antes.
El !important es porque el line-height y el background vienen en el
atributo style, generado por PHP.
---------------------------------------------------------------------- */
#home-categorias .row > .col-md-4 {
width: 50%;
float: left;
padding-left: 6px;
padding-right: 6px;
}
#home-categorias .row > .col-md-4 > a > div {
line-height: 130px !important;
font-size: 19px !important;
background-size: cover !important;
background-position: center center !important;
border-radius: 4px;
}
/* El parrafo de "Actualmente distribuimos nuestros productos en toda la
Republica Argentina y exportamos a..." es texto institucional metido en
el bloque que ahora abre la home. Se saca: son ~110px entre el visitante
y las categorias. Sigue estando en desktop. */
#home-categorias .lead {
display: none;
}
/* Sin el parrafo, el separador que lo seguia tampoco hace falta. */
#home-categorias .col-md-10 > .white-space {
display: none;
}
/* ----------------------------------------------------------------------
"¿Por que Gergal?": de 1740px a una grilla 2x2
Son cuatro bloques de icono + titulo (100% natural, listo para cocinar,
envio a domicilio, contacto del interior). Como son col-sm-12, en mobile
se apilaban a lo largo con un space-big entre cada uno.
No se colapsan porque no son texto: son señales de confianza y conviene
que se vean. Solo se compactan.
---------------------------------------------------------------------- */
.main-wrapper > .parallax > .container > .row:last-child {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.main-wrapper > .parallax > .container > .row:last-child > [class*="col-"] {
width: 50%;
float: none;
}
.main-wrapper > .parallax > .container > .row:last-child img {
max-width: 56px;
height: auto;
}
.main-wrapper > .parallax > .container > .row:last-child h3 {
font-size: 16px;
line-height: 1.3;
}
/* Los separadores del theme son de 60-80px y aca se acumulan de a varios. */
.main-wrapper > .parallax .white-space.space-big {
padding: 10px 0;
}
.main-wrapper > .parallax > .white-space.space-big {
padding: 12px 0;
}
/* ----------------------------------------------------------------------
Novedades: grilla de 2 columnas en vez de carrusel
application.js no inicializa Owl para este bloque en mobile (ver el
comentario ahi: dentro del contenedor flex de la home calculaba items de
60px y las tarjetas salian aplastadas, sin el numero de cantidad entre el
- y el +). Sin el plugin, los .carousel-item son divs comunes y se
acomodan igual que las cards del listado.
---------------------------------------------------------------------- */
#home-novedades .carousel {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
#home-novedades .carousel > .carousel-item {
width: 50%;
padding: 0 6px;
}
/* Novedades trae 12 productos: en carrusel se veian de a pocos, pero como
grilla serian seis filas. Se muestran cuatro, que es lo que entra en una
pantalla, y el resto queda para el listado. */
#home-novedades .carousel > .carousel-item:nth-child(n+5) {
display: none;
}
/* Estas cards las arma novedades_items(), no listado(), asi que quedan fuera
de #prods_container y no les llegaban los ajustes de catalogo-mobile.css.
Se repiten aca para que midan lo mismo que las de la grilla del listado
(sin esto el bloque medía 1366px, casi el doble). */
#home-novedades .size-wrapper-prod {
min-height: 150px;
max-height: 150px;
}
#home-novedades .product-name {
min-height: 38px;
max-height: 38px;
font-size: 14px;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
#home-novedades .product-category {
font-size: 11px;
margin-bottom: 6px;
}
#home-novedades .product-price {
font-size: 19px;
}
#home-novedades .shop-product .shop-product-info {
padding: 12px 0 8px;
margin: 0 2px 8px;
}
#home-novedades .product-links .btn {
-webkit-flex: 1 0 100%;
flex: 1 0 100%;
min-height: 44px;
line-height: 30px;
font-size: 13px;
}
#home-novedades .qty-stepper {
-webkit-flex: 1 0 100%;
flex: 1 0 100%;
-webkit-justify-content: space-between;
justify-content: space-between;
}
#home-novedades .white-space.space-small {
padding: 3px 0;
}
/* ----------------------------------------------------------------------
Bloque dinamico del CMS (hoy "Promo Mix Berries!")
Trae margin-top:30px y padding-top:30px inline desde box_administrable.php,
mas un
suelto y un separador. En mobile son ~90px de aire para dos
lineas de texto, asi que se ajusta. El !important es por los inline.
---------------------------------------------------------------------- */
#home-promo {
margin-top: 12px !important;
padding-top: 14px !important;
padding-bottom: 4px;
}
#home-promo .fancy-title.script-font {
font-size: 28px;
margin-bottom: 6px;
}
#home-promo .lead {
font-size: 15px;
line-height: 1.4;
margin-bottom: 0;
}
/* El
suelto entre el parrafo y el boton suma una linea de nada. */
#home-promo .lead + br {
display: none;
}
#home-promo .white-space {
padding: 6px 0;
}
#home-promo .btn {
margin-top: 4px;
}
/* El espaciado entre secciones y el tamaño de los titulos ya no se ajustan
aca: son los mismos valores en toda la web, asi que viven en
mobile-sitewide.css. */
}