<header class="header-new sticky">
<nav class="header-new__nav">
<div class="brandWrap hidden-desktop">
<img class="logo" src="/dist/images/logo_UCI.png" alt="UNIÓN DE CRÉDITO INMOBILIARIO, S.A.">
<button class="hamburger" type="button" title="Menu">
<svg class="icon icon-16_menu-burger ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_menu-burger"></use>
</svg>
</button>
</div>
<div class="header-new__overlay">
<div class="header-new__wrap">
<div class="header-new__top">
<div class="innerWrap">
<img class="logo hidden-mobile" src="/dist/images/logo_UCI.png" alt="UNIÓN DE CRÉDITO INMOBILIARIO, S.A.">
<div class="contactInfo">
<span class="bodycopy-xs">
<p>Llámanos gratis</p>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<span class="bodycopy-xs">
<p><a href='tel:00000000000' target='_blank'>00 000 000 000</a></p>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip tooltip_contact-info ">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip contact-info">
<span class="arrow"></span>
<div class="wrap contact-info">
<div class="contact-info__logo">
<img class="contact-info__logo__img" src="/dist/images/logo_UCI.png" alt="Logo UCI">
<span class="bodycopy-xs">Optional text Lorem ipsum</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<h3 class="
title-m
">
<p>Logo título</p>
</h3>
<span class="bodycopy-s">Optional text Lorem ipsum</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<div class="wrap-tel">
<div class="tel">
<div class="tel_detail">
<div class="
bodycopy-m
">
Si eres cliente</a>
</div>
<svg class="icon icon-16_user-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_user-check"></use>
</svg>
</div>
<div class="
bodycopy-s
">
<a href='mail:clientes@uci.com' target='_blank'>clientes@uci.com</a> · <a href='tel:912063795' target='_blank'>912 06 37 95</a>
</div>
<div class="bodycopy-xs
">
L-V 9:00 am - 18:00 pm
</div>
</div>
<div class="tel">
<div class="tel_detail">
<div class="
bodycopy-m
">
Si aún no eres cliente</a>
</div>
<svg class="icon icon-16_consultant ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_consultant"></use>
</svg>
</div>
<div class="
bodycopy-s
">
<a href='mail:cuentanos@uci.com' target='_blank'>cuentanos@uci.com</a> · <a href='tel:912063790' target='_blank'>912 06 37 90</a>
</div>
<div class="bodycopy-xs
">
L-V 9:00 am - 18:00 pm
</div>
</div>
<div class="tel">
<div class="tel_detail">
<div class="
bodycopy-m
">
Si eres cliente</a>
</div>
<svg class="icon icon-16_user-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_user-check"></use>
</svg>
</div>
<div class="
bodycopy-s
">
<a href='mail:clientes@uci.com' target='_blank'>clientes@uci.com</a> · <a href='tel:912063795' target='_blank'>912 06 37 95</a>
</div>
<div class="bodycopy-xs
">
L-V 9:00 am - 18:00 pm
</div>
</div>
<div class="tel">
<div class="tel_detail">
<div class="
bodycopy-m
">
Si aún no eres cliente</a>
</div>
<svg class="icon icon-16_consultant ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_consultant"></use>
</svg>
</div>
<div class="
bodycopy-s
">
<a href='mail:cuentanos@uci.com' target='_blank'>cuentanos@uci.com</a> · <a href='tel:912063790' target='_blank'>912 06 37 90</a>
</div>
<div class="bodycopy-xs
">
L-V 9:00 am - 18:00 pm
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<ul class="secondary-nav">
<li> <a class="link
link_simple
link_has-icon link_has-icon_before
" href="#">
<svg class="icon icon-search icon-before" alt="Alt del icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#search"></use>
</svg>
<span>Blog</span>
</a>
</li>
<li> <a class="link
link_simple
link_has-icon link_has-icon_before
fixed-mobile" href="#">
<svg class="icon icon-search icon-before" alt="Alt del icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#search"></use>
</svg>
<span>Area cliente</span>
</a>
</li>
<li>
<div class="popup"><!-- ==== La clase fractal es para la previsualización en Fractal. NO INTEGRAR ==== -->
<button class="popup__trigger" type="button">
<svg class="icon icon-16_globe ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_globe"></use>
</svg>
ES
</button>
<div class="popup__window
">
<div class="popup__lang">
<ul class="popup__lang-list">
<li class="popup__lang-item">
<a class="popup__lang-link
popup__link
popup__lang-link_active
" href="#">
ES
</a>
</li>
<li class="popup__lang-item">
<a class="popup__lang-link
popup__link
" href="#">
EN
</a>
</li>
<li class="popup__lang-item">
<a class="popup__lang-link
popup__link
" href="#">
PT
</a>
</li>
<li class="popup__lang-item">
<a class="popup__lang-link
popup__link
" href="#">
CAT
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="header-new__bottom">
<ul class="main-nav">
<li>
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Primario Link Submenu</span>
<svg class="icon icon-16_chevron-down icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-down"></use>
</svg>
</a>
<div class="submenu">
<div class="header-submenu">
<div class="row">
<div class="col col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12">
<div class="header-submenu__main block">
<ul class="header-submenu__main-list">
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-icon hidden-xs-ms">
<svg class="icon icon-complex_hipoteca-compracasa icon-40 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_hipoteca-compracasa"></use>
</svg>
</div>
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-icon hidden-xs-ms">
<svg class="icon icon-complex_hipoteca-compracasa icon-40 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_hipoteca-compracasa"></use>
</svg>
</div>
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-icon hidden-xs-ms">
<svg class="icon icon-complex_hipoteca-compracasa icon-40 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_hipoteca-compracasa"></use>
</svg>
</div>
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-icon hidden-xs-ms">
<svg class="icon icon-complex_hipoteca-compracasa icon-40 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_hipoteca-compracasa"></use>
</svg>
</div>
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-icon hidden-xs-ms">
<svg class="icon icon-complex_hipoteca-compracasa icon-40 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_hipoteca-compracasa"></use>
</svg>
</div>
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="header-submenu__main-list-item">
<div class="header-submenu__main-list-item-tile">
<div class="header-submenu__main-list-item-tile-icon hidden-xs-ms">
<svg class="icon icon-complex_hipoteca-compracasa icon-40 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_hipoteca-compracasa"></use>
</svg>
</div>
<div class="header-submenu__main-list-item-tile-link">
<a class="link
link_simple
" href="#">
<span>Texto de enlace del item</span>
</a>
</div>
<div class="header-submenu__main-list-item-tile-text hidden-xs-ms">
<span class="bodycopy-s">Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
</ul>
</div>
<div class="header-submenu__sidebar block">
<div class="header-submenu__sidebar-text hidden-xs-ms">
<span class="title-l
">texto de Highlight, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<div class="header-submenu__sidebar-link-optional">
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Texto del link opcional</span>
<svg class="icon icon-16_chevron-right icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-right"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Primario Link</span>
<svg class="icon icon-16_chevron-down icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-down"></use>
</svg>
</a>
</li>
<li>
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Primario Link</span>
<svg class="icon icon-16_chevron-down icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-down"></use>
</svg>
</a>
</li>
<li>
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Primario Link</span>
<svg class="icon icon-16_chevron-down icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-down"></use>
</svg>
</a>
</li>
</ul>
</div>
<div class="close hidden-desktop">
<button type="button" title="Close menu"><svg class="icon icon-close ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#close"></use>
</svg>
</button>
</div>
</div>
</div>
<div class="ctas">
<a class="btn
btn_dark
" href="#" id="">
CTA Lorem ipsum
</a>
<a class="btn
" href="#" id="">
CTA Lorem ipsum
</a>
</div>
</nav>
</header>
<header{{#if id}} id="{{id}}" {{/if}}
class="header-new{{#if accent}} accent{{/if}}{{#if relative}} relative{{/if}}{{#if sticky}} sticky{{/if}}">
<nav class="header-new__nav">
<div class="brandWrap hidden-desktop">
<img class="logo" src="{{srcLogo}}" alt="{{altLogo}}">
<button class="hamburger" type="button" title="Menu">
{{ render '@icon--16-menu-burger' }}
</button>
</div>
<div
class="header-new__overlay{{#if accentWithoutBtns}} accent{{/if}}{{#if mobileMenuIsOpen}} mobile-menu-is-open{{/if}}">
<div class="header-new__wrap">
<div class="header-new__top">
<div class="innerWrap">
<img class="logo hidden-mobile" src="{{srcLogo}}" alt="{{altLogo}}">
{{#if (or text-contact-info number-contact-info)}}
<div class="contactInfo">
{{#if icon-contact-info}}{{> @icon icon-contact-info }}{{else}}{{> @bodycopy
text-contact-info }}{{/if}}
{{> @bodycopy number-contact-info }}
{{#if tooltip-contact-info}}{{> @tooltip tooltip-contact-info }}{{/if}}
</div>
{{/if}}
</div>
<ul class="secondary-nav">
{{#each itemsSecondary}}
<li>{{#if lang}}
{{> @popup this.lang }}
{{else}}
{{> @link this.link }}
{{/if}}
</li>
{{/each}}
</ul>
</div>
<div class="header-new__bottom{{#if itemsExtra}} has-extra{{/if}}">
<ul class="main-nav">
{{#each itemsPrimary}}
<li{{#if active}} class="active" {{/if}}>
{{> @link this.link }}
{{#if this.header-submenu}}
<div class="submenu">
{{> @header-submenu this.header-submenu }}
</div>
{{/if}}
</li>
{{/each}}
</ul>
{{#if itemsExtra}}
<ul class="extra-nav">
{{#each itemsExtra}}
<li{{#if active}} class="active" {{/if}}>
{{#if dropdown}}
{{> @dropdown-menu this.dropdown }}
{{else}}
{{> @link this.link }}
{{/if}}
</li>
{{/each}}
</ul>
{{/if}}
</div>
<div class="close hidden-desktop">
<button type="button" title="Close menu">{{ render '@icon--close' }}</button>
</div>
</div>
</div>
{{#if btn1}}
<div class="ctas">
{{> @btn btn1 }}
{{> @btn btn2 }}
</div>
{{/if}}
</nav>
</header>
{
"srcLogo": "/dist/images/logo_UCI.png",
"altLogo": "UNIÓN DE CRÉDITO INMOBILIARIO, S.A.",
"text-contact-info": {
"text": "<p>Llámanos gratis</p>",
"type": "-xs"
},
"number-contact-info": {
"text": "<p><a href='tel:00000000000' target='_blank'>00 000 000 000</a></p>",
"type": "-xs"
},
"tooltip-contact-info": {
"isContactInfo": true,
"hasLogo": true,
"textLogo": {
"type": "-xs",
"text": "Optional text Lorem ipsum"
},
"hasBodycopySOptional": true,
"bodycopySOptional": {
"type": "-s",
"text": "Optional text Lorem ipsum"
},
"tit-contact": {
"text": "<p>Logo título</p>",
"type": "-m"
},
"contact": [
{
"tel-contact": {
"text": "Si eres cliente</a>"
},
"item-contact": {
"text": "<a href='mail:clientes@uci.com' target='_blank'>clientes@uci.com</a> · <a href='tel:912063795' target='_blank'>912 06 37 95</a>"
},
"small-contact": {
"text": "L-V 9:00 am - 18:00 pm"
},
"iconContact": {
"name": "16_user-check"
}
},
{
"tel-contact": {
"text": "Si aún no eres cliente</a>"
},
"item-contact": {
"text": "<a href='mail:cuentanos@uci.com' target='_blank'>cuentanos@uci.com</a> · <a href='tel:912063790' target='_blank'>912 06 37 90</a>"
},
"small-contact": {
"text": "L-V 9:00 am - 18:00 pm"
},
"iconContact": {
"name": "16_consultant"
}
},
{
"tel-contact": {
"text": "Si eres cliente</a>"
},
"item-contact": {
"text": "<a href='mail:clientes@uci.com' target='_blank'>clientes@uci.com</a> · <a href='tel:912063795' target='_blank'>912 06 37 95</a>"
},
"small-contact": {
"text": "L-V 9:00 am - 18:00 pm"
},
"iconContact": {
"name": "16_user-check"
}
},
{
"tel-contact": {
"text": "Si aún no eres cliente</a>"
},
"item-contact": {
"text": "<a href='mail:cuentanos@uci.com' target='_blank'>cuentanos@uci.com</a> · <a href='tel:912063790' target='_blank'>912 06 37 90</a>"
},
"small-contact": {
"text": "L-V 9:00 am - 18:00 pm"
},
"iconContact": {
"name": "16_consultant"
}
}
]
},
"itemsPrimary": [
{
"link": {
"href": "#",
"text": "Primario Link Submenu",
"icon-after": {
"name": "16_chevron-down",
"isAfter": true
}
},
"header-submenu": {
"item": [
{
"icon": {
"name": "complex_hipoteca-compracasa",
"size40": "true"
},
"link": {
"text": "Texto de enlace del item",
"isSimple": "true",
"href": "#"
},
"text": {
"text": "Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
"type": "-s"
}
},
{
"icon": {
"name": "complex_hipoteca-compracasa",
"size40": "true"
},
"link": {
"text": "Texto de enlace del item",
"isSimple": "true",
"href": "#"
},
"text": {
"text": "Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
"type": "-s"
}
},
{
"icon": {
"name": "complex_hipoteca-compracasa",
"size40": "true"
},
"link": {
"text": "Texto de enlace del item",
"isSimple": "true",
"href": "#"
},
"text": {
"text": "Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
"type": "-s"
}
},
{
"icon": {
"name": "complex_hipoteca-compracasa",
"size40": "true"
},
"link": {
"text": "Texto de enlace del item",
"isSimple": "true",
"href": "#"
},
"text": {
"text": "Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
"type": "-s"
}
},
{
"icon": {
"name": "complex_hipoteca-compracasa",
"size40": "true"
},
"link": {
"text": "Texto de enlace del item",
"isSimple": "true",
"href": "#"
},
"text": {
"text": "Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
"type": "-s"
}
},
{
"icon": {
"name": "complex_hipoteca-compracasa",
"size40": "true"
},
"link": {
"text": "Texto de enlace del item",
"isSimple": "true",
"href": "#"
},
"text": {
"text": "Bodycopy S lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
"type": "-s"
}
}
],
"link-optional": {
"text": "Texto del link opcional",
"icon-after": {
"name": "16_chevron-right",
"isAfter": true
},
"href": "#"
},
"sidebar": {
"text": {
"text": "texto de Highlight, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.",
"type": "-l"
}
}
}
},
{
"link": {
"href": "#",
"text": "Primario Link",
"icon-after": {
"name": "16_chevron-down",
"isAfter": true
}
}
},
{
"link": {
"href": "#",
"text": "Primario Link",
"icon-after": {
"name": "16_chevron-down",
"isAfter": true
}
}
},
{
"link": {
"href": "#",
"text": "Primario Link",
"icon-after": {
"name": "16_chevron-down",
"isAfter": true
}
}
}
],
"itemsSecondary": [
{
"link": {
"href": "#",
"text": "Blog",
"isSimple": true,
"icon-before": {
"name": "search",
"isBefore": true,
"alt": "Alt del icon"
}
}
},
{
"link": {
"href": "#",
"text": "Area cliente",
"isSimple": true,
"extraClasses": "fixed-mobile",
"icon-before": {
"name": "search",
"isBefore": true,
"alt": "Alt del icon"
}
}
},
{
"lang": {
"icon": {
"name": "16_globe"
},
"trigger": {
"text": "ES"
},
"language": [
{
"href": "#",
"isActive": true,
"text": "ES"
},
{
"href": "#",
"text": "EN"
},
{
"href": "#",
"text": "PT"
},
{
"href": "#",
"text": "CAT"
}
]
}
}
],
"btn1": {
"href": "#",
"text": "CTA Lorem ipsum",
"isDark": true
},
"btn2": {
"href": "#",
"text": "CTA Lorem ipsum"
},
"sticky": true
}
.header-new {
&.relative {
position: relative;
}
&__nav {
display: flex;
flex-direction: row;
justify-content: space-between;
@media (--viewport-ms-max) {
flex-direction: column;
align-items: flex-end;
justify-content: unset;
}
.link {
/* Mientras no se aplique la definición de DS a los links (CA.R.) */
font-family: var(--font-family-sans-low);
font-weight: 400px;
}
.logo {
max-height: 20px;
width: auto;
}
.brandWrap {
@media (--viewport-ms-max) {
display: flex;
}
justify-content: space-between;
align-items: center;
width: 100%;
padding-left: 20px;
height: 50px;
.hamburger {
margin-right: 20px;
line-height: 0;
&:hover,
&:focus {
.icon {
fill: var(--color-accent-dark);
}
}
}
}
.header-new__overlay {
display: flex;
width: 100%;
@media (--viewport-ms-max) {
display: none;
}
.header-new__wrap {
display: flex;
flex-direction: column;
width: 100%;
.close {
display: none;
justify-content: flex-end;
margin-bottom: 30px;
width: 100%;
}
.header-new__top {
display: flex;
justify-content: space-between;
height: 50px;
align-items: center;
@media (--viewport-ms-max) {
height: auto;
flex-direction: column-reverse;
align-items: flex-start;
gap: 48px;
margin-top: 48px;
}
.innerWrap {
@media (--viewport-sm-min) {
display: flex;
}
justify-content: flex-start;
align-items: center;
gap: 40px;
margin-left: 40px;
@media (--viewport-ms-max) {
margin: 0;
}
.contactInfo {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
&>.bodycopy-xs {
color: var(--color-accent-dark);
line-height: 0;
a,
a:visited,
a:focus {
color: var(--color-text);
}
&+.bodycopy-xs {
color: var(--color-text);
}
}
>.bodycopy-xs,
>.bodycopy-xs+.bodycopy-xs {
@media (--viewport-ms-max) {
display: none;
}
}
>.icon {
top: -2px;
}
.tooltip {
position: relative;
top: 2px;
left: 0;
z-index: 99999;
@media (--viewport-ms-max) {
top: unset;
right: unset;
.icon-16_tooltip {
display: none;
}
.msg-tooltip.contact-info {
span.arrow {
display: none;
}
width: auto;
left: unset;
padding: unset;
top: unset;
visibility: visible;
opacity: 1;
position: relative;
background-color: transparent;
box-shadow: none;
.contact-info__logo {
margin-bottom: 20px;
}
.wrap-tel {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
row-gap: 32px;
column-gap: 48px;
margin-top: 32px;
max-width: 75%;
@media (--viewport-xs-max) {
max-width: 64%;
}
@media (max-width: 500px) {
max-width: 90%;
}
.tel {
width: auto;
padding-top: unset;
&::before {
height: 0;
margin: 0;
}
&+.tel {
padding-top: unset;
}
.tel_detail {
padding-top: unset;
}
}
}
}
}
}
}
}
ul.secondary-nav {
display: flex;
gap: 24px;
margin-right: 40px;
@media (--viewport-ms-max) {
flex-direction: column;
margin: 0;
gap: 16px;
}
li {
@media (--viewport-ms-max) {
line-height: 0;
}
.link {
font-size: 11px;
line-height: 16px;
.icon {
top: -3px;
}
/* Emulando bodycopy-xs para la navegación superior CA.R. */
@media (--viewport-ms-max) {
padding: 0;
.icon {
display: none;
}
&.fixed-mobile {
position: fixed;
bottom: 0;
background-color: var(--color-background-cta-primary);
width: calc(100% - 90px);
margin-left: -50px;
z-index: 100000;
font-size: var(--font-size-3);
line-height: var(--font-line-height-3);
padding: 13px 30px;
}
}
}
.popup {
position: relative;
&__window {
@media (--viewport-ms-max) {
left: unset;
position: relative;
box-shadow: none;
transform: none;
padding: 16px 0 0;
}
}
}
}
}
}
.header-new__bottom {
display: flex;
justify-content: flex-end;
height: 50px;
align-items: center;
@media (--viewport-ms-max) {
height: auto;
width: 100%;
}
ul.main-nav,
ul.extra-nav {
display: flex;
gap: 30px;
margin: 0 80px;
@media (--viewport-ms-max) {
flex-direction: column;
margin: 0;
gap: 20px;
width: 100%;
}
li {
&>.link {
font-size: 16px;
line-height: 24px;
@media (--viewport-ms-max) {
width: 100%;
}
.icon {
@media (--viewport-ms-max) {
fill: var(--color-icon-accent);
}
}
/* Emulando bodycopy-m para la navegación inferior CA.R. */
span:after {
width: 0;
}
&:hover span:after {
width: 100%;
}
}
&.active>.link {
span:after {
@media (--viewport-sm-min) {
width: 100%;
}
}
.icon {
transform: rotate(180deg);
}
}
.submenu {
display: none;
text-align: left;
@media (--viewport-sm-min) {
position: absolute;
z-index: 10;
top: 100px;
left: 0;
width: 100%;
background-color: var(--color-primary);
}
.header-submenu__sidebar-text {
.title-m {
font-size: 16px;
}
}
}
&.active .submenu {
display: block;
}
.dropdown-menu--open {
display: flex;
}
}
&>li {
@media (--viewport-ms-max) {
border-bottom: solid 1px var(--color-border);
width: 100%;
padding-bottom: 16px;
}
}
}
&.has-extra {
@media (--viewport-sm-min) {
justify-content: space-between;
ul.main-nav,
ul.extra-nav {
margin: 0 40px;
}
ul.extra-nav {
li {
.link {
position: relative;
.icon {
top: -12px;
}
span {
display: none;
}
}
&:last-of-type {
.link {
.icon {
top: unset;
}
span {
display: inline;
}
}
}
}
}
}
@media (--viewport-ms-max) {
flex-direction: column;
ul.extra-nav {
margin-top: 20px;
li>.link {
width: unset;
padding: 0;
.icon {
display: none
}
}
}
}
}
}
}
&.mobile-menu-is-open {
@media (--viewport-ms-max) {
display: flex;
position: fixed;
overflow: auto;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: var(--color-blanket);
z-index: 10;
.header-new__wrap {
background-color: var(--color-background);
height: min-content;
min-height: 100vh;
right: 0;
z-index: 11;
top: 0;
width: calc(100% - 90px);
margin-left: 90px;
transition: transform .5s;
flex-direction: column-reverse;
align-items: flex-start;
padding: 30px 50px 80px;
/* debe llevar 50px extra abajo por si hay botón fijo (CA.R.) */
justify-content: flex-end;
.close {
display: flex;
}
}
.dropdown-menu__btn {
@media (--viewport-ms-max) {
justify-content: flex-start;
.icon {
display: none;
}
}
}
.dropdown-menu {
position: relative;
width: auto;
box-shadow: none;
&__list {
padding-bottom: 0;
}
.dropdown-menu__close {
display: none;
}
}
.dropdown-menu--open {
top: unset;
}
}
@media (--viewport-xs-max) {
.header-new__wrap {
width: 100%;
margin-left: 0;
}
}
}
&.accent:not(.mobile-menu-is-open) {
@media (--viewport-ms-max) {
display: flex;
.header-new__top,
.innerWrap {
display: none;
}
.header-new__bottom {
margin-top: -70px;
padding-right: 70px;
ul.main-nav {
display: none;
}
ul.extra-nav {
flex-direction: row;
gap: 30px;
justify-content: flex-end;
li {
border: 0;
width: auto;
padding: 0;
.link {
span {
display: none;
}
.icon {
display: block;
filter: brightness(0) invert(1) grayscale(100%);
}
}
.dropdown-menu__btn {
.btn {
top:15px;
position: relative;
span {
display: none;
}
.icon {
display: block;
filter: brightness(0) invert(1) grayscale(100%);
}
}
}
.dropdown-menu--open{
@media (--viewport-xs-max) {
right: 0;
width: 250px;
z-index: 10;
top: 35px;
bottom:unset;
left: unset;
height: auto;
max-width: unset;
.dropdown-menu__close{display: none;}
}
}
.dropdown-menu__overlay.dropdown-menu--open{
@media (--viewport-xs-max){
height: auto;
position: unset;
width: auto;
z-index: 10;
}
}
.dropdown-menu{
@media (--viewport-xs-max){
position: absolute;
}
}
}
}
}
}
}
}
.ctas {
width: 180px;
.btn {
width: 180px;
overflow: hidden;
justify-content: center;
}
@media (--viewport-ms-max) {
display: flex;
justify-content: flex-end;
width: auto;
}
}
.hidden-mobile {
@media (--viewport-ms-max) {
display: none;
}
}
.hidden-desktop {
@media (--viewport-sm-min) {
display: none;
}
}
}
&.sticky {
position: sticky;
top: 0;
nav {
justify-content: flex-end;
.header-new__overlay,
.brandWrap {
display: none;
}
.ctas {
display: flex;
justify-content: flex-end;
width: auto;
.btn {
width: auto;
}
}
}
}
&.accent {
nav {
.header-new__overlay {
.header-new__wrap {
.header-new__top {
@media (--viewport-sm-min) {
background-color: var(--color-background-accent-bold);
}
.innerWrap {
img.logo {
@media (--viewport-sm-min) {
filter: brightness(0) invert(1) grayscale(100%);
}
}
.contactInfo {
.icon {
@media (--viewport-sm-min) {
filter: brightness(0) invert(1) grayscale(100%);
}
}
&>.bodycopy-xs {
@media (--viewport-sm-min) {
color: var(--color-text-inverse);
a,
a:visited,
a:focus {
color: var(--color-text-inverse);
}
&+.bodycopy-xs {
color: var(--color-text-inverse);
}
}
}
}
.tooltip {
.msg-tooltip {
img,
.icon {
@media (--viewport-sm-min) {
filter: none;
}
}
}
}
}
ul {
li {
.link,
.popup button {
@media (--viewport-sm-min) {
color: var(--color-text-inverse);
.icon {
filter: brightness(0) invert(1) grayscale(100%);
}
}
}
}
}
}
}
}
.brandWrap {
@media (--viewport-ms-max) {
background-color: var(--color-background-accent-bold);
}
img.logo,
.hamburger .icon {
@media (--viewport-ms-max) {
filter: brightness(0) invert(1) grayscale(100%);
}
}
}
}
}
}
No notes defined.