header {
--height:var(--101px);
--color: var(--fc1);
--active: var(--navhover);
--hover: var(--navhover);
--mb:calc(0px - var(--logosize));
--bg:linear-gradient(0deg, var(--gradient1) 0%, var(--gradient2) 100%);
--logo:url('/templates/baleandanchor/images/brand/logo.svg') var(--contain);
--logoh:var(--40-5px); --logow:var(--290px);
--vpad:var(--44px);--fbasis:var(--884px);
--btnpx:var(--8px); --btnpy:var(--22px);
--btnml:0;
--font:var(--nav);
--portalml:var(--54-5px)
}
body.slide-hero-orange header,
body.slide-hero-dark header,
body.landlord:not(.mega-open) header,
body.perks:not(.mega-open) header{
--logo-filter:brightness(200);
--color:var(--fc2);
}
body.landlord header{
--hover:var(--fc1);
--active:var(--fc1);
}
body.landlord:not(.mega-open) header,
body.slide-hero-orange header {
--hover:var(--red);
--active:var(--red);
}
body.landlord:not(.mega-open) header .btn:not(.nav-item),
body.slide-hero-orange header .btn:not(.nav-item){
--btnfcolor: var(--white);
--btnhcolor: var(--red);
--btnborder: 1px solid var(--red);
--btnbg: var(--red);
}
body.apartments-studio header, body.apartments-1-bedroom header, body.apartments-2-bedroom header,body.apartments-3-bedroom header{
--bg:transparent;
}
body.apartments-1-bedroom.mega-open header, body.apartments-2-bedroom.mega-open header{
--color:var(--fc2);
--hover:var(--navhover);--active: var(--navhover);
}
ul.nav li.nav-icon{
--height:var(--30-8px);
}
ul.nav li.whatsapp{
--width:fit-content;
--bg:url('/templates/baleandanchor/images/icons/contact-menu.svg') var(--contain);
}
ul.nav li.locate{
--width:fit-content;
--bg:url('/templates/baleandanchor/images/brand/locate.svg') var(--contain);
}
ul.nav li.portal{
--width:fit-content;
--bg:url('/templates/baleandanchor/images/brand/portal.svg') var(--contain);
}
body.slide-hero-orange header ul.nav li.whatsapp,
body.landlord:not(.mega-open) header ul.nav li.whatsapp {
--bg:url('/templates/baleandanchor/images/shared/whatsapp-red.svg') var(--contain);
}
body.slide-hero-orange header ul.nav li.locate,
body.landlord:not(.mega-open) header ul.nav li.locate {
--bg:url('/templates/baleandanchor/images/brand/locate-red.svg') var(--contain);
}
header ul.nav li.whatsapp,header ul.nav li.locate,header ul.nav li.portal{
--font:var(--n4) 0 / 0 var(--hff2);
--width:var(--34-3px);
}
@media (max-width:768px) {
header {
--height:var(--68-5px);
--bg:linear-gradient(0deg, var(--gradient1) 0%, var(--gradient2) 100%);
--logo:url('/templates/baleandanchor/images/brand/logo-mobile.svg') var(--contain);
--logoh:var(--51-5px); --logow:var(--99px);
--vpad:var(--26px);--fbasis:unset;
--btnml:var(--10px);
--font: var(--n4) var(--12px) / var(--14px) var(--hff2);
}
ul.nav li.nav-icon{
--height:var(--25-8px);
--font: var(--n4) var(--15px) / var(--17px) var(--bff);
}
header ul.nav li.whatsapp,header ul.nav li.locate{
--width:var(--28-8px);
}
header .btn{
--btnpx:var(--6px); --btnpy:var(--10px);
}
}
header:not(.a) * {color:var(--color);}
header ul li > a, p, h1, h2, h3, a {transition:color .33s ease;}
body.mega-open:not(.a) header #menu li > a:not(.btn) { color: var(--color);}
body.mega-open:not(.a) header #menu li > a:hover,body.mega-open:not(.a) header #menu li > a.current.active{ color: var(--hover);}
header #menu .parent{position:relative;}
/* HEADER
======================================================= */
header {position:absolute;top:0;display:flex;width: 100%;height:var(--height);justify-content: space-between;align-items:center;z-index:1000;margin-bottom:var(--mb);padding:0 var(--vpad);}
body.menu-id-125 header,body.menu-id-223 header,body.menu-id-241:not(.slide-hero-orange):not(.slide-hero-dark) header{background:var(--bg);}
header .logo {width: var(--logow);height: var(--logoh);}
header .logo > div {background: var(--logo);width:var(--logow);height:var(--logoh);filter:var(--logo-filter);}
header > div#menu {flex-basis:var(--fbasis);}
header #menu a {font:var(--font);text-transform:uppercase;color:var(--color);margin-left:var(--btnml);}
header #menu ul { width:100%;display:flex; list-style: none;justify-content:space-between;position:relative;}
header #menu ul li {align-items:center;display:flex;}
header #menu ul li > a {transition:.3s ease;}
header #menu ul li:hover > a {color: var(--hover);}
body:not(.mega-open) header #menu ul li.current.active > a, body.mega-open header #menu ul li.parent > a {color: var(--active);}
header .nav-item {position:relative;}
header #menu a.btn{color:var(--white); position:relative;}
header #menu li.nav-icon, .mega-menu li.nav-icon{height:var(--height);background:var(--bg);background-position:left;}
.mega-menu li.nav-icon{padding: var(--4px) 0 0 var(--40px);margin-top:var(--19px);}
.mega-menu li.nav-icon a, .mega-menu li.lowercase a{text-transform:none !important;letter-spacing:var(--ls);}
header #menu li.whatsapp,
header #menu li.locate,
header #menu li.portal{opacity:1;transition:opacity 0.3s}
header #menu li.portal{margin-left:var(--portalml);}
header #menu li.whatsapp,
.mega-menu li.whatsapp,
header #menu li.locate,
.mega-menu li.locate,
header #menu li.portal,
.mega-menu li.portal{width:var(--width);}
header #menu li.whatsapp a,
.mega-menu li.whatsapp a,
header #menu li.locate a,
.mega-menu li.locate a,
header #menu li.portal a,
.mega-menu li.portal a{content:'';width:var(--width);height:var(--height);overflow:hidden;color:var(--font);}
header #menu li.locate{margin-left:var(--7px)}
a span.hidden-desktop{display:none;}
@media (max-width:768px) {
header > a{align-self:self-end;}
a span.hidden-desktop{display:inline;}
body.mega-open header{background: transparent;}
body.mega-open header #menu li.whatsapp,
body.mega-open header #menu li.locate{opacity:0;}
}
/* MEGA MENU + HEADER
====================================================== */
.mega-menu {
--padding:var(--12px) var(--60px); --gap:var(--32px);
--bg:var(--cream);
--bold: var(--n6) var(--12px) / var(--16px) var(--bff);
--small: var(--n4) var(--10px) / var(--14px) var(--bff);
--mb:var(--17px);
--pb:var(--42px); --vpad:var(--26px); --pt:var(--124px);
--height:var(--112px);
--font:var(--h5d);--color:var(--fc1);
--shadow: 0 var(--2px) var(--6px) #00000029;
--img-display:block;
--main-link-display:none;
--flex-dir:row;
--text-align:center;
--menu-width:100%;
--menu-jc:flex-start;
}
@media (max-width:768px) {
.mega-menu {
--img-display:none;
--main-link-display:block;
--flex-dir:column;
--text-align:left;
--font: var(--n4) var(--16px) / var(--18px) var(--hff2);
--gap:0;
--parent-mb:var(--20px);
--sub-mb:var(--18px);
--menu-width:fit-content;
--menu-jc:center;
}
}
@media (min-width:769px) {
body.apartments-studio .mega-menu{
--bg:var(--red);
}
body.apartments-1-bedroom .mega-menu{
--bg:var(--dbrown);
--color:var(--fc2);
}
body.apartments-2-bedroom .mega-menu{
--bg:var(--dgreen);
--color:var(--fc2);
}
body.apartments-3-bedroom .mega-menu{
--bg:var(--dcream);
}
}
.mega-menu {position:absolute; top:0;z-index:1001;width:100%;background:var(--bg);padding:var(--pt) var(--vpad) var(--pb);display:flex;align-items:center;justify-content:var(--menu-jc);transform:translate(0, -100%);transition:1s;opacity:0;}
.mega-menu > ul {width:var(--menu-width);display: flex;align-items: flex-start;flex-direction:var(--flex-dir);}
/*.mega-menu > ul > li:not(.deeper.parent) {display:var(--main-link-display);}*/
.mega-menu > ul > li > a{margin-bottom:var(--parent-mb,0);}
.mega-menu li.deeper.parent{margin-bottom:var(--21px);}
.mega-menu > ul > li > ul{display:flex;gap:var(--gap);flex-direction:var(--flex-dir);}
.mega-menu > ul > li > ul > li{flex:1;}
.mega-menu > ul > li > ul > li a{margin-bottom:var(--sub-mb,0)}
.mega-menu > ul > li > ul > li a,.mega-menu > ul > li > a{text-align:var(--text-align);text-transform:uppercase;color:var(--color);font:var(--font);letter-spacing: calc(var(--ls) * 2);}
.mega-menu > ul > li > ul > li > a:hover,
.mega-menu > ul > li > a:hover,
.mega-menu > ul > li > ul > li > a.active,
.mega-menu > ul > li > a.active{color:var(--dorange);}
.mega-menu img{display:var(--img-display); height:var(--height);margin-bottom:var(--mb);}
.mega-menu ul li.hide-mega-desktop:not(.deeper.parent),
.mega-menu ul li a.hide-mega-desktop,
header #menu ul li.hide-menu-desktop{
display:none;
}
@media (max-width:768px) {
.mega-menu ul li.hide-mega-desktop:not(.deeper.parent),
.mega-menu ul li a.hide-mega-desktop,
header #menu ul li.hide-menu-desktop {display:block;}
.mega-menu ul li.hide-mega-mobile:not(.deeper.parent),
.mega-menu ul li a.hide-mega-mobile,
header #menu ul li.hide-menu-mobile {display:none;}
}
/* MEGA MENU OPEN
====================================================== */
body.mega-open header{z-index: 1002;pointer-events:none;}
body.mega-open header a, body.mega-open #hamburger-menu{pointer-events: all;}
body.mega-open header a, body.mega-open header div{z-index:900;}
body.mega-open .mega-menu {transform:translate(0%, 0%);opacity:1;box-shadow:var(--shadow);}
/* Hamburger Menu
====================================================== */
#hamburger-menu{
--width: var(--22px);
--height: var(--18px);
--ml: var(--11px);
--span-height:var(--2px)
}
#hamburger-menu span{
--rotate:0deg;
--opacity:1;
--left-open:var(--2px);
--bg-color:var(--dorange);
}
#hamburger-menu span:nth-child(even) {
--left:50%;
}
#hamburger-menu span:nth-child(odd){
--left:0px;
}
#hamburger-menu span:nth-child(1), #hamburger-menu span:nth-child(2) {
--top: 0px;
}
#hamburger-menu span:nth-child(3), #hamburger-menu span:nth-child(4) {
--top: var(--8px);
}
#hamburger-menu span:nth-child(5), #hamburger-menu span:nth-child(6) {
--top: var(--16px);
}
body.mega-open #hamburger-menu span:nth-child(1),body.mega-open #hamburger-menu span:nth-child(6) {
--rotate:45deg;
}
body.mega-open #hamburger-menu span:nth-child(2),body.mega-open #hamburger-menu span:nth-child(5) {
--rotate:-45deg;
}
body.mega-open #hamburger-menu span:nth-child(1) {
--left: var(--left-open); --top: var(--5px);
}
body.mega-open #hamburger-menu span:nth-child(2) {
--left: calc(50% - var(--left-open)); --top: var(--5px);
}
body.mega-open #hamburger-menu span:nth-child(3) {
--left: -50%; --opacity: 0;
}
body.mega-open #hamburger-menu span:nth-child(4) {
--left: 100%; --opacity: 0;
}
body.mega-open #hamburger-menu span:nth-child(5) {
--left: var(--left-open); --top: var(--12px);
}
body.mega-open #hamburger-menu span:nth-child(6) {
--left: calc(50% - var(--left-open)); --top: var(--12px);
}
@media (max-width:768px) {
body.landlord:not(.mega-open) #hamburger-menu span,
body.slide-hero-orange #hamburger-menu span{
--bg-color: var(--red);
}
}
#hamburger-menu{width:var(--width);height: var(--height);position: relative;margin-left:var(--ml);transition: .5s ease-in-out;display:none;background:transparent;}
#hamburger-menu span {display: block;position: absolute;height: var(--span-height);width:50%;background:var(--bg-color);opacity:var(--opacity);transform: rotate(var(--rotate));transition:.25s ease-in-out;top:var(--top);left:var(--left);}
@media (max-width:768px) {
#hamburger-menu{display:block;}
}