Mylpan

neve-child

Written by

agenciavelora

in

/*GENERAL*/
:root{
–mostaza:#bf8f0b;
–rojo:#9e1122;
–claro:#eeeff1;
–oscuro:#222222;
}
.highlight{
color:white;
background:var(–mostaza);
display:block;
width:fit-content;
padding:5px;
line-height:1em;
margin:0;
}
p{
font-family:’Montserrat’, sans-serif;
color:var(–oscuro);
}
p.highlight{
text-transform:uppercase;
font-size:1rem;
letter-spacing:0.5px;
font-weight:400;
}
h2{
font-size:45px;
line-height:0.95em;
}
a{
text-decoration:none!important;
color:unset!important;
font-weight:400!important;
}
.button, .add_to_cart_button {
border-radius:25px!important;
color:var(–oscuro)!important;
padding:5px 15px!important;
background:transparent!important;
border:1px solid var(–oscuro)!important;
transition:.3s all ease-in-out;
}
.button:hover, .add_to_cart_button:hover{
background:var(–mostaza)!important;
color:white!important;
border-color:var(–mostaza)!important;
}
.add_to_cart_button{
font-size:14px!important;
}
/*header*/
.nav-ul li>a:hover{
color:#fcda32!important;
opacity:1!important;
}
.nav-ul li>a:hover:after{
background:#fcda32;
height:1px;
}
/*HOME*/
/*marcas*/
#marcas_mylpan{
margin-top:-30px;
padding:30px;
background:url(‘/wp-content/uploads/2021/12/fondo-recetas.jpg’) no-repeat;
background-size:cover;
}
ul.slides {
display: flex;
align-items: center;
}
@media (max-width:600px){
#marcas_mylpan p{
padding:10px 30px;
font-size:0.8em;
line-height:1.1em;
}
}
/*Especialistas*/
#especialistas .wp-block-column{
position:relative;
}
#especialistas .wp-block-column figure:after{
content:”;
display:block;
background:url(‘/wp-content/uploads/2022/12/LOGO-CALIDAD-SABOR.png’);
width:135px;
height:135px;
position:absolute;
bottom:-20px;
left:-10px;
filter:drop-shadow(2px 2px 3px);
}
/*cualidades*/
#feats .wp-block-columns, #tech .wp-block-columns{
/* margin-left: 1.1vw; */
max-width:1400px;
margin:0 auto;
}
#feats, #tech{
background:var(–claro);
background:url(‘/wp-content/uploads/2022/12/wavebg.svg’) no-repeat;
background-size:cover;
padding:80px 50px;
display:flex;
align-content:center;
margin:20px auto;
width:100%;
}
#feats img, #tech img{
width:50px;
}
.card{
height:250px;
background:transparent;
border:none;
display:flex!important;
justify-content:center!important;
text-align:left;
flex-flow:row!important;
flex-wrap:wrap;
position:relative;
}
#feats .card.wp-container-11{
background:var(–rojo);
}
#feats .card.wp-container-11 .wp-block-column{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:75%;
}
/*canales*/
#canales{
text-align:center;
color:white;
font-family:’Cormorant’, serif;
}
#canales .wp-block-column{
position:relative;
padding:0;
}
#canales .wp-element-caption{
position:absolute;
bottom:30px;
left:50%;
transform:translatex(-50%);
font-size:2.2em;
line-height:1.1em;
opacity:1;
text-transform:uppercase;
width:250px;
}
#canales .wp-element-caption:after{
content:’Ver productos’;
font-family:’Montserrat’, sans-serif;
font-size:0.8rem;
display:block;
background:rgba(0 0 0 /60%);
width:fit-content;
margin:10px auto;
padding:2px 20px;
border-radius:25px;
text-transform:none;
border:1px solid white;
letter-spacing:0.5px;
transition:.3s all ease-in-out;
}
#canales .wp-element-caption:hover:after{
background:var(–mostaza);
}
/*Red de almaceneros y vendedores*/
#redes_mylpan{
display:flex!important;
width:100%;
margin:50px auto;
padding:0;
gap:0;
color:white!important;
}
#redes_mylpan .wp-block-column{
height:400px;
position:relative;
}
#redes_mylpan .wp-block-column:nth-child(1){
background:url(/wp-content/uploads/2022/12/RED-ALMACENEROS-BG.jpg);
background-size:cover;
background-position:center;
padding:0;
margin:0;
}
#redes_mylpan .wp-block-column:nth-child(2){
background:url(/wp-content/uploads/2022/12/EQUIPO-VENDEDORES-BG.jpg);
background-size:cover;
background-position:center;
padding:0;
margin:0;
}
#redes_mylpan .wp-block-column h2{
font-size:3em;
text-transform:uppercase;
margin-top:50px;
margin-bottom:-30px;
margin-left:10%;
}
#redes_mylpan .wp-block-column p{
color:white;
font-size:14px;
line-height:1rem;
width:60%;
text-transform:none;
text-align:justify;
}
@media (max-width:600px){
#redes_mylpan .wp-block-column{
margin:5px 0!important;
height:300px;
}
#redes_mylpan .wp-block-column:first-child{
background-position:0px 0;
}
#redes_mylpan h2{
font-size:1.5em!important;
margin-top:15px!important;
margin-bottom:30px!important;
}
#redes_mylpan p{
width:220px!important;
}
}
/*informativos*/
#info_banners{
display:flex;
justify-content:center;
margin:20px auto;
}
#info_banners .wp-block-column:first-child{
background:url(‘/wp-content/uploads/2022/12/COMO-COTIZAR-BG.jpg’);
height:230px;
position:relative;
color:white!important;
padding:20px;
}
#info_banners .wp-block-column:first-child p{
float:right;
margin-top:-100px;
color:white;
width:250px;
font-size:0.8em;line-height:1.2em;
}
#info_banners .wp-block-column a{
background:rgba(0 0 0 / 60%);
padding:4px 25px;
font-size:0.8rem;
border-radius:25px;
border:1px solid white;
color:white!important;
transition: all .3s ease-in-out;
display:block;
width:fit-content;
margin-top:10px;
}
#info_banners .wp-block-column a:hover{
background:var(–mostaza);
}
#info_banners .wp-block-column:nth-child(2){
background:url(‘/wp-content/uploads/2022/12/PREGUNTAS-FRECUENTES-BG.jpg’);
padding:20px;
height:230px;
}
#info_banners .wp-block-column:nth-child(2) p{
font-size:0.8em;
line-height:1em;
width:300px;
}
#info_banners .wp-block-column h2{
text-transform:uppercase;
font-size:2em;
margin-top:10px;
}
@media (max-width:600px){
#info_banners{
flex-flow:column;
}
#info_banners .wp-block-column{
padding:10px!important;
min-height:230px!important;
background-position:center!important;
}
#info_banners .wp-block-column h2{
margin-top:5px;
font-size:1.5em;
}
#info_banners .wp-block-column p{
float:unset!important;
display:block;
margin:0!important;
width:250px!important;
background:rgba(225 85 85 / 70%);
padding:5px;
}
}
/*productos destacados*/
#home_cats .wp-block-column{
display:grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0;
grid-row-gap: 30px;
max-width:1280px;
margin:0 auto;
position:relative!important;
}

#home_cats .wp-element-caption{
color:white!important;
opacity:1;
font-family:’Cormorant’, serif;
text-align:center;
position:absolute;
top:0;
left:50%;
width:90%;
transform:translatex(-50%);
font-size:1.85em;
}
#home_cats .wp-element-caption:before{
content:’Categoría’;
display:block;
font-family:’Montserrat’, sans-serif;
font-size:0.5em;
font-weight:400;
}
#home_cats .wp-block-image a:after{
content:’Ver productos’;
display:block;
position:absolute;
bottom:20px;
left:50%;
transform:translatex(-50%);
width:140px;
text-align:center;
color:white;
font-size:0.9rem;
font-weight:400;
background:rgba(0 0 0 / 60%);
border:1px solid white;
border-radius:50px;
}
#home_cats .wp-block-column .wp-block-image:nth-child(1){
grid-area: 1/1/3/2;
position:relative;
right:-60px;
}
#home_cats .wp-block-column .wp-block-image:nth-child(2){
grid-area: 1/2/2/3;
max-width:210px;
margin:0 auto;
position:relative;
}
#home_cats .wp-block-column .wp-block-image:nth-child(3){
grid-area: 2/2/3/3;
max-width:210px;
margin:0 auto;
position:relative;
}
#home_cats .wp-block-column .wp-block-image:nth-child(4){
grid-area: 1/3/3/4;
position:relative;
left:-60px;
}
#to_shop {
margin:20px auto 100px!important;
font-weight:400!important;
font-family:’Montserrat’, sans-serif!important;
color:var(–oscuro)!important;
width:fit-content;
display:block;
border:1px solid var(–oscuro);
padding:5px 15px;
border-radius:50px;
text-decoration:none!important;
}
@media screen and (max-width:600px){
#home_cats .wp-block-column{
display:block!important;
}
#home_cats .wp-block-column .wp-block-image:nth-child(1){
grid-area: 1 / 1 / 2 / 2;
right:unset;
}
#home_cats .wp-block-column .wp-block-image:nth-child(2){
grid-area: 2 / 1 / 3 / 2;
}
#home_cats .wp-block-column .wp-block-image:nth-child(3){
grid-area: 3 / 1 / 4 / 2;
}
#home_cats .wp-block-column .wp-block-image:nth-child(4){
left:unset;
}
#home_cats img{
max-width:210px;
margin:10px auto;
}
#home_cats .wp-element-caption{
font-size:1.5em;
}
}
/*banner trabaja con nosotros*/
#trabaja{
background:url(‘/wp-content/uploads/2022/12/BANNER-BG.jpg’) no-repeat;
background-position:center;
width:100%;
max-width:1101px;
display:block;
margin:0 auto;
position:relative;
color:white;
padding:20px;
}
#trabaja .highlight{
display:inline;
}
#trabaja h2{
text-transform:uppercase;
line-height:1.15em;
}
#trabaja a{
background:rgba(0 0 0 / 60%);
padding:4px 25px;
border-radius:25px;
font-size:0.8rem;
border:1px solid white;
opacity:1;
transition:all .3s ease-in-out;
}
#trabaja a:hover{
background:var(–mostaza);
}
@media (max-width:600px){
#trabaja{
background-position:-500px 0!important;
}
#trabaja h2{
font-size:1.3em;
width:170px;
}
}
/*blog home*/
.home .wp-block-latest-posts li{
position:relative!important;
height:415px;
text-align:center;
padding:10px;
margin-top:87px;
background:white!important;
z-index:9;
}
.home .wp-block-latest-posts.is-grid li img{
height:220px;
}
.home .wp-block-latest-posts .wp-block-latest-posts__post-title{
font-family:’Cormorant’, serif;
text-align:center!important;
display:block;
font-size:1.4em;
font-weight:800!important;
height:80px;
background:white;
width:100%;
max-width:350px;
margin:0 auto;
border-top:2px solid var(–mostaza);
border-left:2px solid var(–mostaza);
border-right:2px solid var(–mostaza);
padding:5px;
position:absolute;
bottom:185px;
left:50%;
transform:translatex(-50%);
opacity:1!important;
}
.wp-block-latest-posts .read-more-wrapper{
margin:20px;
}
.read-more-wrapper .button{
background:transparent;
color:var(–oscuro);
border:1px solid var(–oscuro);
border-radius:25px;
padding:5px 10px;
}
.read-more-wrapper .button:hover{
color:white!important;
}
.wp-block-latest-posts__post-excerpt{
width:100%;
max-width:350px;
margin:0 auto;
}
@media (max-width:600px){
.wp-block-latest-posts .read-more-wrapper{
position:relative!important;
left:inherit!important;
display:block;
margin:20px auto;
transform:unset;
}
}
/*footer*/
footer{
background:url(‘/wp-content/uploads/2022/12/footer2022.jpg’) no-repeat;
background-size:cover;
padding:20px 0;
min-height:450px;
}
.postfooter{
background:var(–rojo);
margin:0;
padding:5px;
min-height:60px;
text-align:center;
position:relative;
}
.postfooter .sec1 p{
color:white!important;
position:absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
.postfooter .sec2{
background:black url(‘/wp-content/uploads/2023/01/franja_minsal.png’)no-repeat;
background-position:15px 30px;
display:block;
content:”;
height:60px;
position:absolute;
top:0;
right:0;
width:200px;
}
@media (max-width:600px){
footer{
min-height:900px;
}
.postfooter{
padding:0;
min-height:100px;
}
.postfooter .sec1 p{
position:relative;
display:block;
transform:unset;
left:unset;
top:10px;
}
.postfooter .sec2{
position:relative!important;
display:block;
width:100%;
height:30px;
background-size:100px;
}
}
/*FIN HOME*/
/*detalle de producto*/
.single .summary{
display:flex;
flex-flow:column;
justify-content:start;
}
.single .summary .woocommerce-product-details__short-description{
order:2!important;
margin-top:20px;
}
.single form.cart{
justify-content:space-between!important;
width:fit-content;
order:3!important;
border:none!important;
}
.single .single_add_to_cart_button{
width:fit-content!important;
margin:0 30px!important;
}
.single .tagged_as{
display:none;
}
.single .summary .price{
margin:0 0 20px;
font-size:1.8rem!important;
}
.single .product_meta span{
margin:0;
}
.single ul.tabs.wc-tabs{
display:flex;
flex-wrap:wrap;
justify-content:center;
}
.single ul.tabs.wc-tabs li{
border:1px solid #777!important;
background:var(–claro)!important;
min-width:fit-content;
display:block!important;
padding:5px 10px!important;
margin:0!important;
transition:.3s all ease-in-out;
border-radius:0!important;
}
.single ul.tabs.wc-tabs li:hover{
background:var(–mostaza)!important;
color:white!important;
}
.single ul.tabs.wc-tabs{
margin:0!important;
}
.single ul.tabs.wc-tabs li.active{
background:white!important;
}
.single ul.tabs.wc-tabs li.active:hover{
color:var(–mostaza)!important;
}
.single .woocommerce-Tabs-panel{
border:1px solid #777;
margin:0!important;
padding:20px!important;
}
.single .woocommerce-Tabs-panel :is(h2, h3){
font-family:’Montserrat’;
color:var(–rojo);
font-weight:bold;
font-size:1.3rem!important;
text-transform:uppercase;
}
.related.products{
padding:20px;
text-align:center;
}
.related.products h2{
margin-top:30px;
}
.single .related .img-wrap{
border:1px solid var(–claro);
border-radius:10px;
overflow:hidden;
}
/*Nuestras marcas*/
#marcas_intro{
justify-content:center;
}
#marcas_intro .wp-block-column{
width:100%;
max-width:480px;
}
#marcas_marcas{
padding:20px;
background:var(–claro);
justify-content:center;
}
#marcas_marcas .wp-block-column{
width:100%;
max-width:1200px;
}
#marcas_marcas img{
height:200px;
width:fit-content;
}
#marcas_marcas .button{
width:fit-content;
margin:0 auto;
}
/*Tienda*/
#tienda_marcas .wp-container-10{
background:var(–claro) url(‘/wp-content/uploads/2021/12/fondo-recetas.jpg’);
padding:40px 20px;
}
#tienda_marcas img{
height:200px!important;
width:fit-content!important;
margin:0 auto;
}
.tienda_banners{
position:relative;
}
.tienda_banners figcaption{
position:absolute;
color:white;
z-index:99;
top:20%;
left:50%;
text-align:center;
transform:translatex(-50%);
font-family:’Cormorant’, serif;
font-size:3em;
opacity:1;
}
.tienda_banners a:after{
content:’Ver productos’;
display:block;
font-size:13px;
font-family:’Montserrat’, sans-serif;
margin:20px auto;
border:1px solid white;
border-radius:25px;
width:fit-content;
padding:2px 15px;
background:rgba(0 0 0 / 60%);
color:white;
position:relative;
top:-90px;
transition:all .25s ease-in-out;
}
.tienda_banners a:hover:after{
background:var(–mostaza);
border-color:var(–mostaza);
}

.wc-block-grid__product img{
border:1px solid var(–claro)!important;
border-radius:10px;
width:250px!important;
}
.wc-block-grid__product .wc-block-grid__product-title{
font-weight:500;
font-size:15px;
margin:10px auto;
height:50px;
}
.wc-block-grid__product .price{
font-size:18px;
font-weight:400;
}
/*nosotros*/
#nosotros_intro{
max-width:1000px;
margin:0 auto;
}
#empresa_certificada{
padding:40px;
background:var(–claro);
}
#empresa_certificada .sticker{
background:white;
border-radius:50%;
width:100px;
height:100px;
display:block;
padding:15px;
margin:10px auto;
}
#comunidad_mylpan{
display:flex!important;
gap:0!important;
}
#comunidad_mylpan .wp-block-column{
min-height:300px;
}
#comunidad_mylpan .wp-block-column:nth-child(1) img{
object-fit:cover!important;
width:100%!important;
height:100%!important;
}
#comunidad_mylpan .wp-block-column:nth-child(2){
background:var(–rojo)!important;
padding:30px;
width:50vw!important;
}
#comunidad_mylpan .wp-block-column:nth-child(2) p{
color:white;
}

More posts