@charset "UTF-8";
/**
* Loading first in the style.scss & classic-editor.scss
*/
/**
* Header styling and layout
*/
/* 1. HEADER
----------------------------------------------------------------------
----------------------------------------------------------------------
*/
/*Layout
- header .header
- div .site-branding
- a .custom-logo-link
- div .site-menu
- buttom .button
- span hamburguer-lineas
- nav .primary-navigation
- div .menu-principal-container
- ul .menu
- li .menu-item
- a
*/
.site-header {
display: -ms-grid;
display: grid;
grid-template-areas: "logo menu menu";
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
column-gap: 1em;
justify-items: start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-line-pack: center;
align-content: center;
max-width: 100%;
font-family: var(--font-family-headings);
font-size: 1.6rem;
font-size: var(--font-size-p);
padding-bottom: max(2%, 30px);
padding-left: clamp(1em, 5vw, 4em);
padding-right: clamp(1em, 5vw, 4em);
padding-top: max(2%, 20px);
letter-spacing: var(--letter-spacing-expanded);
}
/* reset del normal */
.site-header a{
border-block-end: none;
margin-block-end: 0;
}
.site-header a::after{
content: "";
padding: 0;
}
/* fin reset */
.site-header .site-branding {
grid-area: logo;
max-width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
place-content: center;
}
/* para que el no afecte al logo */
.site-branding .title-link{
display: contents;
}
.site-branding .custom-logo-link{
display: contents;
}
.site-branding .custom-logo-link .custom-logo{
max-width: 11vw;
}
.site-menu{
grid-area: menu;
-ms-grid-column-align: end;
justify-self: end;
max-width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.site-menu .button{
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
display: none;
visibility: hidden;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
place-content: center;
gap: .2em;
padding: 2em;
background: linear-gradient(315deg, var(--color-light-1), var(--color-light-2));
-webkit-box-shadow: inset 3px 3px 10px var(--color-light-1),
inset -3px -3px 10px var(--color-sat-8);
box-shadow: inset 3px 3px 10px var(--color-light-1),
inset -3px -3px 10px var(--color-sat-8);
border-radius: .5em;
width: max(8vw, 5em);
height: max(8vw, 5em);
color: var(--brand-color);
-webkit-transform: none;
-ms-transform: none;
transform: none;
border: none;
position: relative;
-webkit-transition: -webkit-transform .2s ease-in;
transition: -webkit-transform .2s ease-in;
-o-transition: transform .2s ease-in;
transition: transform .2s ease-in;
transition: transform .2s ease-in,
-webkit-transform .2s ease-in;
z-index: 500;
font-size: 1.6rem;
font-size: var(--font-size-p);
margin-block-end: 0;
}
.site-menu .button:hover,
.site-menu .button:focus{
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition: -webkit-transform .2s ease-in-out;
transition: -webkit-transform .2s ease-in-out;
-o-transition: transform .2s ease-in-out;
transition: transform .2s ease-in-out;
transition: transform .2s ease-in-out,
-webkit-transform .2s ease-in-out;
}
.site-menu .button:active{
outline: none;
}
.site-menu .button .hamburguer-lineas{
background: var(--brand-color);
position: absolute;
width: 2.2em;
height: 0.5em;
border-radius: 0.2em;
}
.site-menu .button .hamburguer-lineas::before,
.site-menu .button .hamburguer-lineas::after{
background: var(--brand-color);
position: absolute;
content: "";
width: 2.2em;
height: 0.5em;
border-radius: 0.2em;
display: block;
}
.site-menu .button .hamburguer-lineas::before{
top: -10px
}
.site-menu .button .hamburguer-lineas::after{
top: 10px;
}
.site-menu .primary-navigation {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.site-menu .primary-navigation > .menu-principal-container > .menu{
margin: 0;
padding: 0;
}
.site-menu .primary-navigation > .menu-principal-container > .menu::before{
content: "";
}
.site-menu .primary-navigation > .menu-principal-container > .menu > .menu-item{
display: inline;
padding: .2em;
}
.site-menu .primary-navigation > .menu-principal-container > .menu > .menu-item:last-child a{
padding: 1em;
background: var(--color-light-9);
color: var(--text-white);
border-radius: .5em;
text-shadow: var(--text-shadow);
}
.site-menu .primary-navigation > .menu-principal-container > .menu > .menu-item::before{
content: "";
}
/*.site-menu .primary-navigation > .menu-principal-container > .menu > .menu-item > a:hover,
.site-menu .primary-navigation > .menu-principal-container > .menu > .menu-item > a:focus,
.site-menu .primary-navigation > .menu-principal-container > .menu > .menu-item > a:active{
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}*/
/* Media queries
------------------------------------------------------------------- */
@media only screen and (max-width: 1024px){
.site-menu .button{
visibility: visible;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.site-menu .primary-navigation{
display: none;
visibility: hidden;
}
.site-branding .custom-logo-link .custom-logo{
max-width: 30vw; /*ajustar para cada web */
}
/* Menú de navegación pulsado el botón*/
.site-menu{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.site-menu .primary-navigation-open{
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
display: block;
}
.site-menu .primary-navigation-open .menu-principal-container{
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.site-menu .primary-navigation-open > .menu-principal-container > .menu{
margin: 0;
padding: 0;
position: absolute;
left: 0%;
top: 15px;
padding-left: 25px;
z-index: 99;
background: linear-gradient(315deg, var(--color-light-1), var(--color-light-2));
opacity: 0.9;
width: 100%;
max-width: 100%;
min-height: 100vh;
font-size: 1.1em;
}
.site-menu .primary-navigation-open > .menu-principal-container> .menu > .menu-item{
display: block;
padding: 0;
}
.site-menu .primary-navigation-open > .menu-principal-container > .menu > .menu-item:last-child a{
padding: 1.5em;
margin-top: 1em;
background: var(--color-light-9);
color: var(--text-white);
border-radius: .5em;
text-shadow: var(--text-shadow);
}
.site-menu .primary-navigation-open > .menu-principal-container > .menu> .menu-item::before{
content: "";
}
.site-menu .primary-navigation-open > .menu-principal-container > .menur > .menu-item:first-of-type{
padding-top: 1em;
}
/* Para fijar el menú cuando se abre en versión mobile */
.lock-scrolling {
position: fixed;
max-width: 100%;
width: 100%;
}
}
@media only screen and (max-width: 600px){
.site-branding .custom-logo-link .custom-logo{
max-width: 50vw;/*ajustar para cada web */
}
.site-menu .button .hamburguer-lineas::before{
top: -9px
}
.site-menu .button .hamburguer-lineas::after{
top: 9px;
}
}
/* End HEADER
---------------------------------------------------------------------- */