/* Output file modification time: 1750867691 */ /* CSS file /templates/cocoagardens/css/variables.css modification time: 1718981815 */ /* CSS file /templates/cocoagardens/css/template.css modification time: 1750867682 */ /* CSS file /templates/cocoagardens/css/slider.css modification time: 1718985792 */ /* CSS file /templates/cocoagardens/css//blocks/distance-calculator.css modification time: 1718979793 */ /* CSS file /templates/cocoagardens/css/footer.css modification time: 1718979645 */ /* CSS file /templates/cocoagardens/css/header.css modification time: 1726157048 */ /* CSS file /templates/cocoagardens/css//blocks/form.css modification time: 1748447185 */ /* CSS file /templates/cocoagardens/css//blocks/columns-block.css modification time: 1746100611 */ /* CSS file /templates/cocoagardens/css//blocks/heros.css modification time: 1727283433 */ /* CSS file /templates/cocoagardens/css//blocks/default-block.css modification time: 1709724211 */ /* CSS file /templates/cocoagardens/css//blocks/basic-block.css modification time: 1726151851 */ /* CSS file /templates/cocoagardens/css//blocks/imagezoom.css modification time: 1718979939 */ /* CSS file /templates/cocoagardens/css//blocks/icon-block.css modification time: 1718979924 */ /* CSS file /templates/cocoagardens/css//blocks/properties-list.css modification time: 1718982211 */ /* CSS file /templates/cocoagardens/css//blocks/availability-list.css modification time: 1718985582 */ /* CSS file /templates/cocoagardens/css//blocks/siteplan.css modification time: 1719225379 */ /* CSS file /templates/cocoagardens/css//blocks/property.css modification time: 1726138683 */ /* CSS file /templates/cocoagardens/css//blocks/house-stat.css modification time: 1718979911 */ /* CSS file /templates/cocoagardens/css//blocks/tab-slider.css modification time: 1727358212 */ /* CSS file /templates/cocoagardens/css//blocks/offers.css modification time: 1727361537 */ /* CSS file /templates/cocoagardens/css//blocks/map.css modification time: 1718979965 */ :root {--n1px: calc(var(--ss)-1vw); --n2px: calc(var(--ss)-2vw); --n3px: calc(var(--ss)-3vw); --n7px: calc(var(--ss)-7vw); --n8px: calc(var(--ss)-8vw); --n9px: calc(var(--ss)-9vw); --n10px: calc(var(--ss)-10vw); --n15px: calc(var(--ss)-15vw); --n17px: calc(var(--ss)-17vw); --n25px: calc(var(--ss)-25vw); --n26px: calc(var(--ss)-26vw); --n31px: calc(var(--ss)-31vw); --n37px: calc(var(--ss)-37vw); --n38px: calc(var(--ss)-38vw); --n50px: calc(var(--ss)-50vw); --n52px: calc(var(--ss)-52vw); --n54px: calc(var(--ss)-54vw); --n66px: calc(var(--ss)-66vw); --n127px: calc(var(--ss)-127vw); --n133px: calc(var(--ss)-133vw); --n170px: calc(var(--ss)-170vw); --0-5px: calc(var(--ss)0.5vw); --1px: calc(var(--ss)1vw); --2px: calc(var(--ss)2vw); --3px: calc(var(--ss)3vw); --4px: calc(var(--ss)4vw); --5px: calc(var(--ss)5vw); --6px: calc(var(--ss)6vw); --7px: calc(var(--ss)7vw); --7-5px: calc(var(--ss)7.5vw); --8-5px: calc(var(--ss)8.5vw); --8px: calc(var(--ss)8vw); --9px: calc(var(--ss)9vw); --10px: calc(var(--ss)10vw); --11px: calc(var(--ss)11vw); --12px: calc(var(--ss)12vw); --13px: calc(var(--ss)13vw); --14px: calc(var(--ss)14vw); --15px: calc(var(--ss)15vw); --16px: calc(var(--ss)16vw); --17px: calc(var(--ss)17vw); --18px: calc(var(--ss)18vw); --19px: calc(var(--ss)19vw); --20px: calc(var(--ss)20vw); --21px: calc(var(--ss)21vw); --22px: calc(var(--ss)22vw); --23px: calc(var(--ss)23vw); --24px: calc(var(--ss)24vw); --25px: calc(var(--ss)25vw); --26px: calc(var(--ss)26vw); --27px: calc(var(--ss)27vw); --28px: calc(var(--ss)28vw); --29px: calc(var(--ss)29vw); --30px: calc(var(--ss)30vw); --31px: calc(var(--ss)31vw); --32px: calc(var(--ss)32vw); --33px: calc(var(--ss)33vw); --34px: calc(var(--ss)34vw); --35px: calc(var(--ss)35vw); --36px: calc(var(--ss)36vw); --37px: calc(var(--ss)37vw); --37-5px: calc(var(--ss)37.5vw); --38px: calc(var(--ss)38vw); --39px: calc(var(--ss)39vw); --40px: calc(var(--ss)40vw); --41px: calc(var(--ss)41vw); --42px: calc(var(--ss)42vw); --43px: calc(var(--ss)43vw); --44px: calc(var(--ss)44vw); --45px: calc(var(--ss)45vw); --46px: calc(var(--ss)46vw); --47px: calc(var(--ss)47vw); --48px: calc(var(--ss)48vw); --49px: calc(var(--ss)49vw); --50px: calc(var(--ss)50vw); --51px: calc(var(--ss)51vw); --52px: calc(var(--ss)52vw); --53px: calc(var(--ss)53vw); --54px: calc(var(--ss)54vw); --55px: calc(var(--ss)55vw); --56px: calc(var(--ss)56vw); --57px: calc(var(--ss)57vw); --58px: calc(var(--ss)58vw); --59px: calc(var(--ss)59vw); --60px: calc(var(--ss)60vw); --61px: calc(var(--ss)61vw); --62px: calc(var(--ss)62vw); --63px: calc(var(--ss)63vw); --64px: calc(var(--ss)64vw); --65px: calc(var(--ss)65vw); --66px: calc(var(--ss)66vw); --67px: calc(var(--ss)67vw); --68px: calc(var(--ss)68vw); --69px: calc(var(--ss)69vw); --70px: calc(var(--ss)70vw); --72px: calc(var(--ss)72vw); --73px: calc(var(--ss)73vw); --74px: calc(var(--ss)74vw); --75px: calc(var(--ss)75vw); --76px: calc(var(--ss)76vw); --77px: calc(var(--ss)77vw); --78px: calc(var(--ss)78vw); --79px: calc(var(--ss)79vw); --80px: calc(var(--ss)80vw); --81px: calc(var(--ss)81vw); --82px: calc(var(--ss)82vw); --83px: calc(var(--ss)83vw); --85px: calc(var(--ss)85vw); --86px: calc(var(--ss)86vw); --87px: calc(var(--ss)87vw); --88px: calc(var(--ss)88vw); --90px: calc(var(--ss)90vw); --92px: calc(var(--ss)92vw); --93px: calc(var(--ss)93vw); --94px: calc(var(--ss)94vw); --96px: calc(var(--ss)96vw); --99px: calc(var(--ss)99vw); --100px: calc(var(--ss)100vw); --102px: calc(var(--ss)102vw); --103px: calc(var(--ss)103vw); --104px: calc(var(--ss)104vw); --106px: calc(var(--ss)106vw); --109px: calc(var(--ss)109vw); --110px: calc(var(--ss)110vw); --111px: calc(var(--ss)111vw); --113px: calc(var(--ss)113vw); --114px: calc(var(--ss)114vw); --115px: calc(var(--ss)115vw); --118px: calc(var(--ss)118vw); --120px: calc(var(--ss)120vw); --123px: calc(var(--ss)123vw); --124px: calc(var(--ss)124vw); --125px: calc(var(--ss)125vw); --126px: calc(var(--ss)126vw); --127px: calc(var(--ss)127vw); --130px: calc(var(--ss)130vw); --131px: calc(var(--ss)131vw); --134px: calc(var(--ss)134vw); --135px: calc(var(--ss)135vw); --136px: calc(var(--ss)136vw); --137px: calc(var(--ss)137vw); --139px: calc(var(--ss)139vw); --140px: calc(var(--ss)140vw); --141px: calc(var(--ss)141vw); --142px: calc(var(--ss)142vw); --143px: calc(var(--ss)143vw); --144px: calc(var(--ss)144vw); --146px: calc(var(--ss)146vw); --147px: calc(var(--ss)147vw); --148px: calc(var(--ss)148vw); --149px: calc(var(--ss)149vw); --150px: calc(var(--ss)150vw); --154px: calc(var(--ss)154vw); --156px: calc(var(--ss)156vw); --159px: calc(var(--ss)159vw); --162px: calc(var(--ss)162vw); --163px: calc(var(--ss)163vw); --164px: calc(var(--ss)164vw); --167px: calc(var(--ss)167vw); --170px: calc(var(--ss)170vw); --172px: calc(var(--ss)172vw); --173px: calc(var(--ss)173vw); --174px: calc(var(--ss)174vw); --178px: calc(var(--ss)178vw); --190px: calc(var(--ss)190vw); --192px: calc(var(--ss)192vw); --194px: calc(var(--ss)194vw); --198px: calc(var(--ss)198vw); --200px: calc(var(--ss)200vw); --206px: calc(var(--ss)206vw); --207px: calc(var(--ss)207vw); --219px: calc(var(--ss)219vw); --220px: calc(var(--ss)220vw); --228px: calc(var(--ss)228vw); --230px: calc(var(--ss)230vw); --232px: calc(var(--ss)232vw); --237px: calc(var(--ss)237vw); --239px: calc(var(--ss)239vw); --248px: calc(var(--ss)248vw); --250px: calc(var(--ss)250vw); --251px: calc(var(--ss)251vw); --252px: calc(var(--ss)252vw); --255px: calc(var(--ss)255vw); --260px: calc(var(--ss)260vw); --263px: calc(var(--ss)263vw); --264px: calc(var(--ss)264vw); --275px: calc(var(--ss)275vw); --288px: calc(var(--ss)288vw); --296px: calc(var(--ss)296vw); --300px: calc(var(--ss)300vw); --303px: calc(var(--ss)303vw); --304px: calc(var(--ss)304vw); --307px: calc(var(--ss)307vw); --309px: calc(var(--ss)309vw); --312px: calc(var(--ss)312vw); --319px: calc(var(--ss)319vw); --325px: calc(var(--ss)325vw); --327px: calc(var(--ss)327vw); --328px: calc(var(--ss)328vw); --333px: calc(var(--ss)333vw); --339px: calc(var(--ss)339vw); --340px: calc(var(--ss)340vw); --356px: calc(var(--ss)356vw); --360px: calc(var(--ss)360vw); --362px: calc(var(--ss)362vw); --366px: calc(var(--ss)366vw); --371px: calc(var(--ss)371vw); --380px: calc(var(--ss)380vw); --400px: calc(var(--ss)400vw); --416px: calc(var(--ss)416vw); --418px: calc(var(--ss)418vw); --422px: calc(var(--ss)422vw); --432px: calc(var(--ss)432vw); --444px: calc(var(--ss)444vw); --446px: calc(var(--ss)446vw); --471px: calc(var(--ss)471vw); --479px: calc(var(--ss)479vw); --523px: calc(var(--ss)523vw); --526px: calc(var(--ss)526vw); --536px: calc(var(--ss)536vw); --538px: calc(var(--ss)538vw); --546px: calc(var(--ss)546vw); --560px: calc(var(--ss)560vw); --587px: calc(var(--ss)587vw); --593px: calc(var(--ss)593vw); --664px: calc(var(--ss)664vw); --672px: calc(var(--ss)672vw); --690px: calc(var(--ss)690vw); --696px: calc(var(--ss)696vw); --702px: calc(var(--ss)702vw); --710px: calc(var(--ss)710vw); --748px: calc(var(--ss)748vw); --810px: calc(var(--ss)810vw); --835px: calc(var(--ss)835vw); --852px: calc(var(--ss)852vw); --855px: calc(var(--ss)855vw); --860px: calc(var(--ss)860vw); --875px: calc(var(--ss)875vw); --908px: calc(var(--ss)908vw); --935px: calc(var(--ss)935vw); --954px: calc(var(--ss)954vw); --970px: calc(var(--ss)970vw); --1000px: calc(var(--ss)1000vw); --1030px: calc(var(--ss)1030vw); --1070px: calc(var(--ss)1070vw); --1080px: calc(var(--ss)1080vw); --1345px: calc(var(--ss)1345vw); --1350px: calc(var(--ss)1350vw); --1373px: calc(var(--ss)1373vw); --1380px: calc(var(--ss)1380vw); --1394px: calc(var(--ss)1394vw); --1444px: calc(var(--ss)1444vw); --1715px: calc(var(--ss)1715vw); } @charset "UTF-8"; /* FONT FAMILY ========================================================= */ @font-face { font-family: 'GraphikRegular'; font-style: normal; font-weight: normal; src: url('/templates/cocoagardens/fonts/graphik/Graphik-Regular-Web.eot') format('eot'), url('/templates/cocoagardens/fonts/graphik/Graphik-Regular-Web.eot?#iefix') format('embedded-opentype'), url('/templates/cocoagardens/fonts/graphik/Graphik-Regular-Web.ttf') format('truetype'), url('/templates/cocoagardens/fonts/graphik/Graphik-Regular-Web.woff') format('woff'), url('/templates/cocoagardens/fonts/graphik/Graphik-Regular-Web.svg') format('svg'); } @font-face { font-family: 'GraphikMedium'; src: url('/templates/cocoagardens/fonts/graphik/Graphik-Medium-Web.woff2') format('woff2'), url('/templates/cocoagardens/fonts/graphik/Graphik-Medium-Web.woff') format('woff'); } @font-face { font-family: 'Bureau-Grotesk-FB-One-Five-Regular'; src: url('/templates/cocoagardens/fonts/Bureau-Grotesk-FB-One-Five-Regular.woff') format('woff'); } :root { --ss:100/1920*; --white:#F4F0E7; --black:#000000; --cream:#E9DED1; --beige:#E9DED1; --purple:#3C0F30; --yellow:#FBC962; --orange:#FF9754; --lime:#ABC27E; --lime64:rgba(171, 194, 126, 0.64); --lime41-solid:#d6debc; --lime41:rgba(171, 194, 126, 0.41); --light-green:#C5D2A4; --medium-green:#789366; --green:#22423C; --red:#7d292d; --dark-red:#7D292D; --bright-red:#F80E05; --grey:#E9DED1; --alt-grey:#D5D1CA; --light-grey:#707070; --orangetrans:#FF975400; --hff:"bureau-grot-compressed", Helvetica, Verdana, Arial, sans-serif; --bff:"GraphikRegular"; --bff2:'GraphikMedium'; /* --h1:normal normal var(--85px) / var(--96px) var(--hff); --h1v2:normal normal var(--80px) / var(--90px) var(--hff); */ --h1:normal normal var(--60px) / var(--60px) var(--hff); --h1v2:var(--h1); --h2:normal normal var(--60px) / var(--60px) var(--hff); --h3:normal normal var(--40px) / var(--50px) var(--hff); --h2v2:normal normal var(--35px) / var(--35px) var(--hff); --p1:normal normal var(--24px) / var(--34px) var(--bff); --p2:normal normal var(--22px) / var(--30px) var(--bff); --p3:normal normal var(--26px) / var(--35px) var(--bff); --p2:normal normal var(--16px) / var(--20px) var(--bff); --tiny:normal normal var(--10px) / var(--13px) var(--bff); --nav-font:normal normal var(--15px) / var(--18px) var(--bff); --button-font:normal normal var(--20px) / var(--20px) var(--bff); --form-button-font:normal normal var(--30px) / 1 var(--hff); --form-font:normal normal var(--16px) / var(--21px) var(--bff); --sub-font:normal normal var(--10px) / var(--13px) var(--bff); --ls:0.1em; --border-width:2px; --vpad:var(--104px); --spad:var(--104px); --hpad:var(--275px); --header__height: var(--127px); } @media (max-width: 768px) { :root { --p1:normal normal calc(100/768*15vw) / calc(100/768*20vw) var(--bff); --p2:normal normal calc(100/768*15vw) / calc(100/768*20vw) var(--bff); --button-font:normal normal calc(100/768*12vw) / calc(100/768*12vw) var(--bff); --vpad:calc(100/768*75vw); } } @media (max-width: 720px) { :root { --ss:100/375*; --css:100/767*; --h1:normal normal var(--30px) / var(--35px) var(--hff); --h1v2:var(--h1); --h2:var(--h1); --h2v2:normal normal var(--16px) / var(--22px) var(--hff); --h3:normal normal var(--20px) / var(--28px) var(--hff); --p1:normal normal var(--15px) / var(--18px) var(--bff); --p2:normal normal calc(var(--ss)15vw) / calc(var(--ss)20vw) var(--bff); --nav-font:normal normal calc(var(--ss)14vw) / 1 var(--bff); --button-font::normal normal var(--15px) / var(--28px) var(--bff); --view-button-font:normal normal calc(var(--ss)11vw) / 1 var(--bff); --form-button-font:normal normal calc(var(--ss)20vw) / 1 var(--hff); --form-font:normal normal calc(var(--ss)12vw) / calc(var(--ss)16vw) var(--bff); --border-width:2px; --tiny:normal normal calc(var(--ss)10vw) / calc(var(--ss)13vw) var(--bff); --header__height: var(--66px); --vpad:var(--36px); } } /* RESET /* RESET ======================================================= */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, main {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;text-decoration: none;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} html {font-size: var(--rem);} button {border:0;outline:0;} * { box-sizing: border-box; outline:none;letter-spacing:normal;} section[style*="z-index:"] {-webkit-transform: translate3d(0,0,0);} body {line-height: 1;} a {color:inherit;} main section a[href*="faq"] {text-decoration:underline;} section#page {overflow: clip;} img {max-width:100%;} ol, ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after,q:before, q:after {content:'';content: none;} table {border-collapse: collapse;border-spacing: 0;} p { margin-bottom: 1em; /*letter-spacing: 0.010em;*/} .center:not(.a) { text-align: center; } .left:not(.a) { text-align: left; } .softhide {display:none;} u {text-decoration:underline;} iframe { border:0; outline: none; width:100%; aspect-ratio: 2 / 1} .has-video div{line-height: 0;} /* FONT ASSIGNMENT ======================================================= */ body { font:var(--p1); text-align: left; color:var(--green); background: var(--white);overflow-x: hidden;} b, strong { font-weight:600; } h1, .h1:not(.a) {font:var(--h1__font, var(--h1)); margin-bottom:var(--h1-margin-bottom); text-transform:uppercase;} .h1-2:not(.a) {font:var(--h1__font, var(--h1v2)); margin-bottom:var(--h1-margin-bottom); text-transform:uppercase;} h2, .h2:not(.a) {font:var(--h2__font, var(--h2)); margin-bottom:var(--h2-margin-bottom); text-transform:uppercase;} .sh1:not(.a) {font:var(--sh1); margin-bottom:var(--sh1-margin-bottom);} p {font:var(--p__font, var(--p1)); margin-bottom:var(--p-margin-bottom, var(--49px))} .p2:not(.a) {font:var(--p2);} .p3:not(.a) {font:var(--p3);} strong.p3:not(.a) {font-weight:600} .nav:not(.a) {font:var(--nav);} span.p1 {display:inline-block;} p.subtext{font:var(--copy);} body[class^='properties-'] #content-wrap.green-bg, body[class*='properties-'] #content-wrap.green-bg{ background-color: var(--white) !important; } .icon-heading{ display:flex; align-items:center; --img__width:var(--190px); --img__height:100%; --btn__margin:0 var(--94px) 0 0; --h1-margin-bottom:0; margin-bottom:var(--106px); } .icon-heading img{min-width: var(--img__width);} section * p:last-child {margin-bottom: 0;} @media (max-width: 720px) { p {margin-bottom:var(--p-margin-bottom, 1em)} .icon-heading{ flex-wrap:wrap; --img__width: var(--51px); --img__height: var(--74px); --btn__margin:0 auto var(--20px); margin-bottom:var(--40px); text-align: center } } #page-wrap {position: relative;} .inner { padding-left: var(--vpad); padding-right: var(--vpad); } #content-wrap{ padding-top:calc(var(--header__height) - var(--3px)); } body.has-banner #content-wrap{ padding-top:calc(var(--header__height) + var(--48px)); } /* COLOURING IN ======================================================= */ .green-bg{background-color:var(--green);} .cream-bg{background-color:var(--cream);} .beige-bg{background-color:var(--beige);} .grey-bg{background-color:var(--alt-grey);} .lime-bg{background-color:var(--lime);} .lime64-bg{background-color:var(--lime64);} .lime41-bg{background-color:var(--lime41);} .white-bg{background-color:var(--white);} .purple-bg{background-color:var(--purple);} .orange-bg{background-color:var(--orange);} .yellow-bg{background-color:var(--yellow);} .d-red-bg{background-color:var(--dark-red);} .b-red-bg{background-color:var(--bright-red);} .m-green-bg{background-color:var(--medium-green);} .l-green-bg{background-color:var(--light-green);} .ls-lime41-bg{background-color:var(--lime41-solid);} section.purple-bg, div.purple-bg, section.green-bg, div.green-bg{color: var(--cream);} section.lime-bg, div.lime-bg, section.lime64-bg, div.lime64-bg, section.lime41-bg, div.lime41-bg, section.cream-bg, div.cream-bg, section.beige-bg, div.beige-bg, section.white-bg, div.white-bg, section.l-green-bg, div.l-green-bg, section.m-green-bg, div.m-green-bg, section.ls-lime41-bg, div.ls-lime41-bg{color: var(--green);} .fc-red{color:var(--red);} .fc-white{color:var(--white);} .fc-orange{color:var(--orange) !important;} /* SNAP ======================================================= */ .anim::before, .anim::after {transition:1.5s ease;content:'';position: absolute;width:100%; height: 100%;top: 0;} .anim::before {left: 0%;transform-origin: left; display:none;} .anim::after {right: 0;transform-origin: right;} .anim {position: relative;overflow: hidden;} .anim.revealed::before, .anim.revealed::after {width: 0;} @keyframes revealAnimation { 0% {width: 0;transform: translateX(0%);} 100% {width: 100%;transform: translateX(100%);} } .anim.i2::before, .anim.i2::after {transition-delay: .2s;} .anim.i3::before, .anim.i3::after {transition-delay: .4s;} .anim.i4::before, .anim.i4::after {transition-delay: .6s;} @media (max-width: 720px) { .item-1 {order:1;} .item-2 {order:2;} .item-3 {order:3;} .item-4 {order:4;} .item-5 {order:5;} .item-6 {order:6;} .item-7 {order:7;} .item-8 {order:8;} } .v-border{border-top: 2px solid var(--black); border-bottom: 2px solid var(--black);} @media (max-width: 720px) { .v-border{ border-bottom: 0} div .v-border:last-child{border-bottom: 2px solid var(--black);} } #content-wrap .fade-up-effect, div[class*="-slider"]:not(.slick-initialized):not(.mob-slider-arrows), .revealus { /*will-change: transform, opacity;*/ transform: translateY(15px); transition: transform .45s cubic-bezier(.39,.575,.565,1), opacity .45s cubic-bezier(.47,0,.745,.715); opacity: 0; } body.iOS #content-wrap .fade-up-effect, body.iOS div[class*="-slider"]:not(.slick-initialized):not(.mob-slider-arrows), body.iOS .revealus, h2.fade-up-effect { opacity: 1; transform: translateY(0px); } #content-wrap .fade-up-effect, div[class*="-slider"]:not(.slick-initialized) { transition-delay: .1s; } #content-wrap .fade-in, #content-wrap .fade-in.slick-initialized, body.loaded .revealus { opacity: 1; transform: translateY(0px); } .img-circle{transition:transform 1s 0.1s, opacity 0.7s 0.1s;} .fade-up-effect .img-circle{transform:scale(0);opacity:0;} .fade-up-effect.fade-in .img-circle{transform:scale(1);opacity:1;} /*.fade-up-effect.fade-in .img-circle:hover{transform:scale(1.1);opacity:1;}*/ /* STRUCTURE ======================================================= */ section{margin-bottom:var(--section__margin-bottom, 0);} section > div {width:100%;padding:var(--section__padding, 0); max-width:var(--section__max-width, 100%); margin:var(--section__margin, 0 auto);} .padding > div {padding: var(--section__padding,var(--vpad) var(--hpad));} section > .contact-top {padding-top: calc(var(--vpad) * 3);} .reverse > div, section.reverse:not(a) > div {flex-flow: row-reverse wrap;} .centered > div {display:flex;flex-flow:column nowrap;justify-content:center;align-items:center;position:relative;height:100%;} .centerhz > div {display:flex;align-items:center;position:relative;} .centervt > div {display:flex;justify-content:center;position:relative;height:100%;} .rows > div {display:flex;justify-content:center;align-items:center;position:relative;} section.wrap > div {flex-wrap: wrap;} section.p0 > div {padding: 0;} section.pt0 > div {padding-top: 0;} section.pb0 > div {padding-bottom: 0;} section.pr0 > div {padding-right: 0;} section.pl0 > div {padding-left: 0;} section.fh > div {min-height:var(--fh);} a.anchor {display: block;position: relative;visibility: hidden;z-index:-1;} .row {display:flex;flex-wrap: wrap;justify-content:center;align-items:center;position:relative;} .col {display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;} .icon.dark {filter:brightness(0);} .banner{ height:var(--51px); width:100%; display:flex; justify-content: center; align-items: center; position: relative; z-index: 10000;} .banner p{font:normal normal var(--21px) / var(--21px) var(--hff); line-height: 1; margin-bottom: 0; text-transform:uppercase; letter-spacing: 0.1em;} .banner:not(.slick-initialized) > *:not(:first-child){display:none} @media (max-width: 720px) { .banner p{font:normal normal var(--15px) / var(--15px) var(--hff); } } img.img-circle{ aspect-ratio: 1/1; border-radius:50%; --img__object-fit:cover; } .copy{ text-align:var(--copy__text-align,unset); max-width:var(--copy__max-width,100%); margin:var(--copy__margin,unset); padding:var(--copy__padding,0); position:var(--copy__position,unset); top:var(--copy__top,unset); left:var(--copy__left,unset); width:var(--copy__width,100%); height:var(--copy__height,unset); z-index:var(--copy__z-index,unset); font:var(--copy__font, inherit); } .copy p{ font:var(--copy__font, inherit); } img{ width:var(--img__width, 100%); height:var(--img__height,auto); margin:var(--img__margin,unset); object-fit:var(--img__object-fit, contain); object-position:var(--img__object-position, center); display:var(--img__display, unset); position:var(--img__position, unset); top:var(--img__top, auto); bottom:var(--img__bottom, auto); left:var(--img__left, auto); right:var(--img__right, auto); } a, button { cursor: pointer; font: var(--nav); letter-spacing: var(--ls); } .btn { --btn__border:var(--border-width) solid var(--orange); --btn__background:var(--orange); --btn__color:var(--white); --btn__width:fit-content; --btn__max-width:100%; --btn__height:var(--52px); --btn__font:var(--button-font); --btn__display:flex; --btn__text-align:center; --btn__justify-content:center; --btn__align-items:center; --btn__text-transform:uppercase; --btn-hover__border:var(--border-width) solid var(--white); --btn-hover__color:var(--orange); --btn-hover__background:var(--cream); --btn__border-radius:var(--50px); --btn__padding:0 var(--30px); } .btn-yellow { --btn__border:var(--border-width) solid var(--yellow); --btn__background:var(--yellow); --btn-hover__color:var(--green); --btn-hover__background:var(--cream); } .btn.center{margin-left:auto !important; margin-right:auto !important;} @media (min-width: 721px) and (max-width: 768px) { .btn { --btn__width:calc(100/768*175vw); --btn__height:calc(100/768*27vw); --btn__padding:0; } } @media (max-width: 720px) { .btn { --btn__width:fit-content; --btn__height:var(--32px); --btn__padding:0 var(--9px); } #content-wrap .btn{ min-width:var(--200px); } } a:not(.a), .btn:not(.a), button:not(.cookie-button) { color:var(--btn__color,unset); background:var(--btn__background,unset); padding:var(--btn__padding,unset); margin:var(--btn__margin,unset); border:var(--btn__border, unset); border-radius:var(--btn__border-radius, unset); width:var(--btn__width, unset); max-width:var(--btn__max-width, unset); height:var(--btn__height, unset); display:var(--btn__display, unset); text-align:var(--btn__text-align, unset); justify-content:var(--btn__justify-content, unset); align-items:var(--btn__align-items, unset); font:var(--btn__font, inherit); text-transform:var(--btn__text-transform, unset); transition:color 0.3s, background 0.3s,border 0.3s; top:var(--btn__top,unset); bottom:var(--btn__bottom,unset); left:var(--btn__left,unset); right:var(--btn__right,unset); position:var(--btn__position,unset); cursor:var(--btn__cursor, pointer); flex:var(--btn__flex, unset); flex-flow:var(--btn__flex-flow, unset); letter-spacing:var(--btn__letter-spacing, 0.01em) } a:not(.a):hover, .btn:not(.a):hover, button:not(.slick-arrow):hover, #register_submit:not(.a):hover { border:var(--btn-hover__border,var(--btn__border)); color:var(--btn-hover__color,unset); background:var(--btn-hover__background,unset); } .mid-content a.btn:not(.a):hover, #header a.btn:not(.a):hover { background-color:#fff; border-color:#fff; } ul.list { --ul__padding:0 0 0 1em; list-style:disc; } ul.list li { display: list-item; } ul.ul-checklist{ --ul__margin:0; --ul-li__padding: 0 0 0 var(--35px); --ul-li__margin: 0 0 var(--42px); --ul-li-background: url('/templates/cocoagardens/images/shared/icons/checklist.svg') left var(--9px) / var(--27px) var(--25px) no-repeat; } ul.ul-checklist li:last-child{margin-bottom:0;} @media (max-width: 720px) { ul.ul-checklist{ --ul-li__padding: 0 0 0 var(--25px); --ul-li__margin: 0 0 1em; --ul-li-background: url('/templates/cocoagardens/images/shared/icons/checklist.svg') left var(--5px) / var(--20px) var(--18px) no-repeat; } } ul { width:var(--ul__width,unset); list-style:var(--ul__list-style, unset); padding:var(--ul__padding, unset); margin:var(--ul__margin, 0 0 1em); display:var(--ul__display, block); gap:var(--ul__gap,unset); flex-flow:var(--ul__flex-flow,unset); font:var(--ul-li__font,inherit); justify-content:var(--ul__justify-content,unset); align-items:var(--ul__align-items, unset); text-align:var(--ul__text-align, inherit); } ul li{ width:var(--ul-li__width, 100%); font:var(--ul-li__font,inherit); letter-spacing:var(--ul-li__letter-spacing, normal); flex:var(--ul-li__flex,unset); border:var(--ul-li__border, unset); padding:var(--ul-li__padding,unset); position:var(--ul-li__position,unset); background:var(--ul-li-background,unset); transition:var(--ul-li__transition,unset); display:var(--ul-li__display,block); align-items:var(--ul-li__align-items,unset); justify-content:var(--ul-li__justify-content,unset); margin:var(--ul-li__margin); height:var(--ul-li__height, auto); text-align:var(--ul-li__text-align, inherit); color:var(--ul-li__color, inherit); } ol{ list-style:var(--ol__list-stlye, decimal); padding:var(--ol__padding,unset); list-style-position:var(--ol__list-style-position, unset); } ol li { font:var(--ol-li__font,inherit); font-weight:var(--ol-li__font-weight,inherit); } /* BUBBLE BUTTONS MODULE ======================================================= */ #bubble-buttons{--h1-margin-bottom:var(--100px); padding:var(--bubble-container__padding, var(--200px) var(--hpad));} #bubble-buttons .bubbles-row{display:flex; flex-flow:var(--bubble-row__flex-flow, row nowrap); justify-content: space-between;} #bubble-buttons .bubble-wrap{width:var(--bubble__size, var(--400px));height:var(--bubble__size, var(--400px)); position:relative;} a.btn-bubble{ --btn__position:absolute; --btn__top:0; --btn__left:0; --btn__height:var(--bubble__size, var(--400px)); --btn__width:var(--bubble__size, var(--400px)); --btn__font:var(--h2); --btn__text-transform: uppercase; --btn__display:flex; --btn__align-items:center; --btn__justify-content:center; --btn__border-radius:50%; --btn__color:var(--cream); --btn-hover__color:var(--cream); transition:all 0.6s; } .btn-bubble.btn-orange{ --btn__background:var(--orange); } .btn-bubble.btn-red{ --btn__background:var(--red); } .btn-bubble.btn-lime{ --btn__background:var(--lime); } .btn-bubble.btn-green{ --btn__background:var(--green); } .btn-bubble.btn-purple{ --btn__background:var(--purple); } .btn-bubble.hover-orange{ --btn-hover__background:var(--orange); } .btn-bubble.hover-red{ --btn-hover__background:var(--red); } .btn-bubble.hover-lime{ --btn-hover__background:var(--lime); } .btn-bubble.hover-green{ --btn-hover__background:var(--green); } .btn-bubble.hover-purple{ --btn-hover__background:var(--purple); } .btn-bubble:hover{ --btn__height:calc(var(--400px) * 1.4); --btn__width:calc(var(--400px) * 1.4); font-size:2em; } .tab-button.btn{ --btn__border:2px solid var(--green); --btn__color:var(--green); --btn__background:var(--white); --btn__width:var(--325px); --btn-hover__border:2px solid var(--orange); --btn-hover__background:var(--orange); --btn-hover__color:var(--white); --btn__margin:0 var(--11px); --btn__position:relative; } .offers .tab-button.btn{ --btn__background:var(--cream); } .tab-active .tab-button.btn{ --btn__border:2px solid var(--orange); --btn__background:var(--orange); --btn__color:var(--white); } .tab-button-wrap{position:relative; width:fit-content;} .tab-button-wrap::before { z-index: 0; transition-delay: 0s; transition: .3s ease-in; transition-delay: 0s; content: ''; position: absolute; bottom: 0; width:var(--34px); height:var(--17px); background: url(/templates/cocoagardens/images/shared/icons/tab-arrow.svg) center / contain no-repeat; left:calc(50% - var(--17px));} .tab-button-wrap:not(.tab-active-toggle).tab-active::before{ bottom:var(--n17px); transition-delay: 0.1s;} .tab-buttons{display:flex; justify-content:center; margin-bottom:var(--60px)} @media (max-width: 720px) { .tab-buttons{flex-wrap:wrap; margin-bottom:0} .tab-button-wrap::before {bottom: var(--17px)} .tab-button-wrap:not(.tab-active-toggle).tab-active::before{ bottom:0; } .tab-button.btn{ --btn__margin:var(--3px) auto var(--17px); --btn__width:var(--237px); } } .top-wrapper{position:sticky;bottom:0;left:0;z-index: 1000; } #backtotop{ --btn__position:absolute; --btn__bottom:var(--260px); --btn__right:var(--77px); --btn__background:var(--yellow); --btn-hover__color:var(--cream); --btn-hover__background:var(--yellow); --btn__color:var(--cream); --btn__font:normal normal var(--33px) / var(--33px) var(--hff); --btn__display:flex; --btn__justify-content:center; --btn__align-items:center; --btn__flex-flow:column; --btn__height:var(--115px); --btn__width:var(--115px); --btn__border-radius:50%; --img__width:var(--28px); --img__height:var(--42px); --img__margin:0 0 var(--10px); } #backtotop{transform:scale(1); opacity:1; transition:opacity 0.4s 0.3s, transform 0.3s} body.very-top #backtotop, body:not(.loaded) #backtotop{transform:scale(0); opacity:0;letter-pacing:normal; transition:opacity 0.4s, transform 0.3s} #backtotop:hover{transform:scale(1.2);} @media (max-width: 720px) { #backtotop{ --btn__bottom:var(--135px); --btn__right:var(--vpad); --btn__font:normal normal var(--25px) / var(--25px) var(--hff); --btn__height:var(--68px); --btn__width:var(--68px); --img__width:var(--16px); --img__height:var(--25px); --img__margin:0 0 var(--6px); } } /* UTILITY CLASSES ======================================================= */ .relative{position: relative;} .uc {text-transform:uppercase;} .tdu, .underline, .ul {text-decoration: underline;} .bold:not(.a) {font-weight:bold;} .fit {width:fit-content;} .row.c6 > *:not(.nocs) {width:var(--12x6);flex-basis:var(--12x6);} .row, .w1, .w2, .w3, .w4, .w5, .w6, .w7, .w8, .w9, .w10, .w11 { --12x1:calc(8.3333% * 1); --12x2:calc(8.3333% * 2); --12x3:calc(25% * 1); --12x4:calc(33.3333% * 1); --12x5:calc(8.3333% * 5); --12x6:calc(25% * 2); --12x7:calc(8.3333% * 7); --12x8:calc(33.3333% * 2); --12x9:calc(25% * 3); --12x10:calc(8.3333% * 10); --12x11:calc(8.3333% * 11); } .row.r1 > *:not(.nocs), .row > .c1, .w1:not(.a) {width:var(--12x1);flex-basis:var(--12x1);} .row.r2 > *:not(.nocs), .row > .c2, .w2:not(.a) {width:var(--12x2);flex-basis:var(--12x2);} .row.r3 > *:not(.nocs), .row > .c3, .w3:not(.a) {width:var(--12x3);flex-basis:var(--12x3);} .row.r4 > *:not(.nocs), .row > .c4, .w4:not(.a) {width:var(--12x4);flex-basis:var(--12x4);} .row.r5 > *:not(.nocs), .row > .c5, .w5:not(.a) {width:var(--12x5);flex-basis:var(--12x5);} .row.r6 > *:not(.nocs), .row > .c6, .w6:not(.a) {width:var(--12x6);flex-basis:var(--12x6);} .row.r7 > *:not(.nocs), .row > .c7, .w7:not(.a) {width:var(--12x7);flex-basis:var(--12x7);} .row.r8 > *:not(.nocs), .row > .c8, .w8:not(.a) {width:var(--12x8);flex-basis:var(--12x8);} .row.r9 > *:not(.nocs), .row > .c9, .w9:not(.a) {width:var(--12x9);flex-basis:var(--12x9);} .row.r10 > *:not(.nocs), .row > .c10, .w10:not(.a) {width:var(--12x10);flex-basis:var(--12x10);} .row.r11 > *:not(.nocs), .row > .c11, .w11:not(.a) {width:var(--12x11);flex-basis:var(--12x11);} .w12:not(.a) {width:100%;flex-basis:100%;} .row.cs12 > *:not(.nocs), .row > .ics12 {width:100%;flex-basis:100%;} @media (max-width: 720px) and (orientation:portrait) { .fdcm {flex-direction:column;} .w1:not(.kw):not([class$='mw']), .w2:not(.kw):not([class$='mw']), .w3:not(.kw):not([class$='mw']), .w4:not(.kw):not([class$='mw']), .w5:not(.kw):not([class$='mw']), .w6:not(.kw):not([class$='mw']), .w7:not(.kw):not([class$='mw']), .w8:not(.kw):not([class$='mw']), .w9:not(.kw):not([class$='mw']), .w10:not(.kw):not([class$='mw']), .w11:not(.kw):not([class$='mw']), .row:not(.keep-row):not([class^='mw']) > * {width:100%;flex-basis:100%;} .mw3:not(.a) {width:var(--12x3);flex-basis:var(--12x3);} .mw4:not(.a) {width:var(--12x4);flex-basis:var(--12x4);} .mw6:not(.a) {width:var(--12x6);flex-basis:var(--12x6);} } @media (min-width: 720px) { .mobile:not(.a) {display:none !important;} } .faqs .hidden {display:none;} .pt:not(.a) {padding-top: var(--vpad);} .pb:not(.a) {padding-bottom: var(--vpad);} .pr:not(.a) {padding-right: var(--hpad);} .pl:not(.a) {padding-left: var(--hpad);} a.nobreak br {display:none;} .rel:not(.a) {position:relative;} .click:not(.a) {pointer-events:auto;} .noclick:not(.a) {pointer-events:none;} .fx1 {display:flex;flex-wrap: wrap;} .fx1 > div {flex:1 var(--300px);} .asc {align-self: center;} .ls:not(.a) {letter-spacing: var(--ls);margin-right: calc(0em - var(--ls));} .sticky:not(.a) {position:sticky;top:0;} .hide:not(.a) { display:none; visibility: hidden; } .wrap:not(.a) {flex-wrap: wrap;} .nowrap:not(.a) {flex-wrap: nowrap;} img.cover {object-fit:cover;} .fxi:not(.a) {display:flex !important;} .hide {display:none !important;} .di:not(.a) {display:inherit;} .fxr:not(.a) {display:flex;flex-direction:row;} .fxc:not(.a) {display:flex;flex-direction:column;} .fxcc:not(.a) {display:flex;flex-direction:column;align-items:center;justify-content:center;} .fxrc:not(.a) {display:flex;flex-direction:row;align-items:center;justify-content:center;} .fxrr:not(.a) {display:flex;flex-direction:row-reverse;} .fxcr:not(.a) {display:flex;flex-direction:column-reverse;} .ass:not(.a) {align-self: start;} .aic:not(.a) {display:flex;align-items:center;} .aife:not(.a) {display:flex;align-items:flex-end;} .aifs:not(.a) {display:flex;align-items:flex-start;} .ais:not(.a) {display:flex;align-items:stretch;} .aibl:not(.a) {display:flex;align-items:baseline;} .aii:not(.a) {display:flex;align-items:inherit;} .jcc:not(.a) {display:flex;justify-content:center;} .jcfs:not(.a) {display:flex;justify-content:flex-start;} .jcfe:not(.a) {display:flex;justify-content:flex-end;} .jcse:not(.a) {display:flex;justify-content:space-evenly;} .jcsb:not(.a) {display:flex;justify-content:space-between;} .jcsa:not(.a) {display:flex;justify-content:space-around;} section > div.nopad:not(.a) {padding:0;} .normalcase:not(.a) {text-transform: none !important;} .ul {text-decoration:underline;} .tac {text-align:center;} .tal {text-align:left;} .tar {text-align:right;} .mah, .auto, .ma {margin-left:auto;margin-right:auto;} .mal {margin-left:auto;} .mar {margin-right:auto;} .m0 {margin:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;} .mt0 {margin-top:0 !important;} @media (max-width: 720px) and (orientation:portrait) { .aclm:not(.a) {align-items: flex-start;} } .pad1:not(.a) {padding:1em;} .pad2:not(.a) {padding:2em;} .pad3:not(.a) {padding:3em;} .pad4:not(.a) {padding:4em;} .pad5:not(.a) {padding:5em;} .gap:not(.a) {gap:var(--gap);} .gap2:not(.a) {gap:var(--gap2);} .gap3:not(.a) {gap:var(--gap3);} .mb0:not(.a) {margin-bottom:0;} .pt0i {padding-top:0 !important;} @media (max-width: 720px) { .fwt:not(.a) {width:100% !important;flex-basis:100% !important;} } @media (max-width: 720px) { .revmob {flex-direction:column-reverse !important;} .wrapm {flex-wrap:wrap;} *.fxrm {display:flex;} *.fxrrm {display:flex;flex-direction:row-reverse;} *.fxcm {display:flex;flex-direction:column !important;} *.fxcrm {display:flex;flex-direction:column-reverse !important;} *.aicm {align-items:center;align-self: center;} *.aifem {align-items:flex-end;} *.aifsm {align-items:flex-start;} *.aism {align-items:stretch;} *.aiblm {align-items:baseline;} *.aiim {align-items:inherit;} *.jccm {justify-content:center;} *.jcfsm {justify-content:flex-start;} *.jcfem {justify-content:flex-end;} *.jcsem {justify-content:space-evenly;} *.jcsbm {justify-content:space-between;} *.jcsam {justify-content:space-around;} *.tacm {text-align:center;} *.talm {text-align:left;} *.tarm {text-align:right;} *.desktop,.dt {display:none !important;} *.mobile {display:inherit;} *.mobile-flex {display:flex;} *.mobile-inline {display:inline;} .mam {margin-left:auto;margin-right:auto;} .mbr br {display:initial;} *.mob-nowrap {white-space:nowrap;} } #location-hero > div > div{background-position: center !important;} /* SHARED ========================================================== */ :root { --chev-prev:var(--lime) url('/templates/cocoagardens/images/shared/icons/arrow-next.svg') center / var(--60px) var(--40px) no-repeat; --chev-next:var(--lime) url('/templates/cocoagardens/images/shared/icons/arrow-next.svg') center / var(--60px) var(--40px) no-repeat; } @media(max-width:720px) { :root { --chev-prev:var(--lime) url('/templates/cocoagardens/images/shared/icons/arrow-next.svg') center / var(--26px) var(--17px) no-repeat; --chev-next:var(--lime) url('/templates/cocoagardens/images/shared/icons/arrow-next.svg') center / var(--26px) var(--17px) no-repeat; } } .slick-slider { --slick-arrow-width: var(--99px); --slick-arrow-height: var(--99px); --slick-arrow-prev-image: var(--chev-prev); --slick-arrow-next-image: var(--chev-next); --slick-arrow-left: var(--n127px); --slick-arrow-right: var(--n127px); --slick-arrow-top: var(--339px); --slick-dots-size: var(--37px); --slick-dots-height: var(--37px); --slick-dots-margin-top: var(--146px); --slick-dots-margin: 0 var(--7px); --slick-dots-color: var(--lime41); --slick-dots-active-color: var(--lime); --slick-margin-bottom:0; --slick-dots-justify-content: center; --slider-p__font:normal normal var(--25px) / var(--33px) var(--bff); } .interior-design .slick-slider{ --slick-dots-margin-top: var(--70px); } @media (max-width: 720px) { .slick-slider { --slick-arrow-width: var(--43px); --slick-arrow-height: var(--43px); --slick-arrow-left: var(--9px); --slick-arrow-right: var(--9px); --slick-arrow-top: var(--81px); --slick-dots-size: var(--17px); --slick-dots-height: var(--17px); --slick-dots-margin-top: var(--19px); --slick-dots-margin: 0 var(--4px); --slider-p__font:normal normal var(--15px) / var(--20px) var(--bff); --slider-p__margin-top:var(--30px); } .interior-design .slick-slider{ --slick-dots-margin-top: var(--35px); } } /* INSET SLIDER (SLIDER BLOCK) ========================================================== */ .slider-block{ --section__padding:var(--239px) 0 var(--118px); --section__max-width:var(--1373px); --img--height: var(--748px); } @media (max-width: 720px) { .slider-block{ --section__padding:0 0 var(--17px); --section__max-width:100%; --img--height: var(205px); --slick-dots-size: var(--17px); } } /* INSTAGRAM SLIDER ========================================================== */ #instagram{ --section__padding:var(--164px) 0 var(--296px); --h1-margin-bottom:var(--170px); --slick-slide-div-height:var(--362px); --ig-slide-padding:0 var(--4px); } @media (min-width: 721px) { .ig-slide{width:var(--slick-slide-div-width, var(--362px)) !important;} } @media (max-width: 720px) { #instagram{ --section__padding:var(--57px) 0 var(--96px); --h1-margin-bottom:var(--54px); --slick-slide-div-height:var(--139px); --ig-slide-padding: 0 var(--2px); } } #instagram .h1 a{letter-spacing: normal} .ig-slide{padding:var(--ig-slide-padding);height:var(--slick-slide-div-height); } .ig-wrap a{display:block; height:100%; width:100%;} .ig-wrap .ig-img{display:block; height:100%; width:100%;} #instagram .h1{border-bottom:3px solid var(--green); width:fit-content; margin-left:auto; margin-right:auto;} /* TEMPLATE ========================================================== */ .slick-track { display: flex; gap: var(--slick-track-gap, unset);} .slick-list { overflow: hidden; } .slick-slider { display:flex; flex-flow:var(--slick-slider-flex-flow, row wrap); position:relative;margin-bottom:var(--slick-margin-bottom,0);} button.slick-arrow { position:absolute; top:var(--slick-arrow-top, unset);bottom:var(--slick-arrow-bottom, unset);transition:.333s; z-index:99;text-indent:-9999px;overflow:hidden;width:var(--slick-arrow-width, unset);height:var(--slick-arrow-height, unset);border-radius: 50%;background-blend-mode: lighten;} button.slick-prev { background: var(--slick-arrow-prev-image, unset); left:var(--slick-arrow-left, var(--37px));transform:scaleX(-1);} button.slick-next { background: var(--slick-arrow-next-image, unset); right:var(--slick-arrow-right, var(--37px)); } .inset-slider p{text-align: center; text-transform: uppercase; font:var(--slider-p__font);margin-top:(--slider-p__margin-top, var(--49px));} .inset-slider .captions{display:block;} ul.slick-dots {width:100%;display:flex;padding:0; justify-content:var(--slick-dots-justify-content, unset);position:relative; height:var(--slick-dots-height, unset); align-items:center; margin-top:var(--slick-dots-margin-top, unset);} ul.slick-dots > li {margin:var(--slick-dots-margin, 0); width:var(--slick-dots-size, unset); height:var(--slick-dots-size, unset); background: var(--slick-dots-color, unset); border-radius:50%;transition:.3s ease;cursor:pointer;} ul.slick-dots button { display: none; } ul.slick-dots .slick-active { background: var(--slick-dots-active-color, unset);} .slick-slide > div {margin:var(--slick-slide-div-margin, unset); align-items:var(--slick-slide-div-align-items, unset); justify-content:var(--slick-slide-div-justify-content, unset); text-align:var(--slick-slide-div-text-align, unset); background:var(--slick-slide-div-background, unset); display:var(--slick-slide-div-display, unset); flex-flow:var(--slick-slide-div-flex-flow, unset);height:var(--slick-slide-div-height, unset);padding:var(--slick-slide-div-padding, unset);width:var(--slick-slide-div-width, unset);} .slide-wrap { display: var(--slide-wrap-display, unset); flex-flow: var(--slide-wrap-flex-flow, unset) } .slider-info {flex: var(--slider-info__flex,49.5%);padding:var(--slider-info__padding,0)} .slide-wrap > img {flex: var(--slide-wrap-img__flex, 59.5%); width: var(--slide-wrap-img__width, 100%); height: var(--slide-wrap-img__height, unset); object-fit: cover;} .slick-track[class*="first-slide-"] > .slick-cloned:nth-child(2), .slick-slide { transition: .5s ease; } .column-slides{border-radius:50%; overflow:hidden;} .column-slides img{aspect-ratio:1/1; object-fit:cover;} /* LOADING CONDITIONS */ div[class*='-slider']:not(.slick-initialized) .slide-wrap:not(:first-child) {display:none;} div[class*='column-slides']:not(.slick-initialized) img:not(:first-child) {display:none;} div[class*='map-info'] .slider:not(.slick-initialized) .location:not(:first-child) {display:none;} /*DEFAULT BLOCK*/ #location-check-your-commute{ --section__padding:var(--159px) var(--154px) var(--167px); --h2-margin-bottom:var(--87px); --dc-input__height:var(--73px); --dc-input__font:normal normal var(--39px) / var(--39px) var(--bff); } #location-check-your-commute .btn{ --btn__height:var(--57px); --btn__width:var(--228px); --btn__color:var(--green); --btn__border:var(--border-width) solid var(--green); --btn__background:transparent; --btn-hover__color:var(--cream); --btn-hover__border:var(--border-width) solid var(--orange); --btn-hover__background:var(--orange); --btn__margin:0 0 0 var(--43px); --btn__font:normal normal var(--30px) / var(--30px) var(--hff); transition:color 0.3s, background 0.3s, border 0.3s; } .dc-method{ --img__width:var(--141px); --img__height:var(--141px); --column__margin-top:var(--63px); --column__display:flex; --column__align-items:center; --p-margin-bottom:0; --btn__margin:0 var(--264px) 0 auto; --btn__padding:0 var(--65px) 0 0; --btn__position:relative; } @media(max-width:720px) { #location-check-your-commute{ --section__padding:var(--80px) var(--vpad); --h2-margin-bottom:var(--40px); --dc-input__padding-bottom:var(--5px); --dc-input__height:var(--37px); --dc-input__font:var(--p1); } .dc-submit{ --column__width:100%; } #location-check-your-commute .btn{ --btn__height:var(--37px); --btn__width:var(--200px); --btn__margin:var(--25px) auto var(--10px); --btn__font:normal normal var(--20px) / var(--20px) var(--hff); transition:color 0.3s, background 0.3s, border 0.3s; } .dc-method{ --img__width:var(--70px); --img__height:var(--70px); --column__margin-top:var(--33px); --column__flex-flow:column; --column__justify-conent:center; --btn__margin:0 0 var(--10px); --btn__padding:0 var(--35px) 0; --btn__width:fit-content; --p-margin-bottom:0.8em; } } body.iOS #location-check-your-commute{display:none;} .dc-method .columns{width:100%;} .dc-method .columns p{width:fit-content;} .dc-form .columns{align-items: end;} .dist-search{border:0; border-bottom: var(--3px) solid var(--green); background:transparent; color:var(--green);height:var(--dc-input__height); width:100%; font:var(--dc-input__font); padding-bottom:var(--dc-input__padding-bottom, var(--30px)); letter-spacing:normal;} .distance-field{flex-grow: 1;} #reveal-travel{height:0; overflow:hidden; opacity:0; transition:opacity 0.3s, height 0.3s; overflow:hidden;} #reveal-travel.show{height:var(--1070px); opacity:1;} .dc-submit .btn.hidden{dsiplay:none;} .dc-method .dc-link:after{content: ''; position:absolute; display:block; width:var(--29px); height:var(--30px); right:0; top:var(--5px); background:url('/templates/cocoagardens/images/shared/icons/link-arrow.svg') center / contain no-repeat; transition:right 0.3s;} .dc-method .dc-link:hover:after{right:var(--n15px);} .clear:after{display:block; content:''; width:var(--22px); height: var(--22px); background:url('/templates/cocoagardens/images/shared/icons/close.svg') center / contain no-repeat; margin-left:var(--56px); transition:background 0.3s;} .clear:hover:after{background:url('/templates/cocoagardens/images/shared/icons/close-white.svg') center / contain no-repeat; margin-left:var(--56px);} .dc-icon{margin:0 var(--43px) 0 0 !important; display:block !important;} .dc-icon p{text-align: center; width:var(--img__width) !important; font:normal normal var(--26px) / var(--34px) var(--bff) !important; } @media(min-width:721px) { .dc-time, .dc-link{margin-bottom:var(--35px);} .dc-method-public .dc-time, .dc-method-public .dc-link{margin-bottom:var(--80px);} } @media(max-width:720px) { .dc-form .columns{flex-wrap:wrap;} .dc-method .dc-link:after{width:var(--18px); height:var(--18px); top:0;} .dc-method p.dc-time{font-size:1.3em;} #reveal-travel.show{height:var(--875px);} .dc-icon{margin-right: 0 !important;} .dc-icon p{text-align: center; width:var(--img__width) !important; font:var(--p2) !important; margin-bottom:1em !important; ; } } #footer{ --footer-info__width:calc(100% - var(--356px)); --footer__padding:var(--47px) var(--137px) var(--57px) var(--248px); } #footer-latimer img { --img__width: var(--120px); --img__height: var(--173px); } #footer-links, #footer-copyright { --btn__font: var(--nav-font); } #footer-socials{ --btn__width: var(--31px); --btn__height: var(--31px); --btn__display:inline-block; --btn__position:relative; } #footer-links ul{ --ul__margin:0; --ul__display:flex; } #banner-terms{ --p__font:var(--sub-font); } @media (max-width: 720px) { #footer{ --footer__padding:var(--23px) var(--vpad); --footer-latimer__width:var(--111px); --footer-info__width:calc(100% - var(--113px)); } #footer-links, #footer-copyright { --btn__font: normal normal var(--10px) / var(--14px) var(--bff); --ul__width:fit-content; } #footer-socials{ --btn__width: var(--13px); --btn__height: var(--13px); } #footer-latimer img { --img__width: var(--51px); --img__height: var(--74px); } } #footer { padding:var(--footer__padding);position: relative; display: flex; justify-content: space-between; align-items: center; } #footer-info-wrap { width: var(--footer-info__width); display: flex; justify-content: space-between; } #footer-latimer { width: var(--footer-latimer__width);} #footer-links, #footer-copyright {letter-spacing: var(--ls); text-transform: uppercase;font: var(--btn__font); line-height:1 !important;} #footer-links ul > li:nth-child(n+2)::before { content: ' | '; display: inline; white-space: pre;} #banner-terms p{letter-spacing: normal;} .social-icon:nth-child(n+2) { margin-left: 1.25vw; } .social-icon::before, .social-icon::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; pointer-events: none; background-color: transparent; background-position: center; background-repeat: no-repeat; background-size: contain; transition: all .3s;} .social-icon::after, body.non-touch .social-icon:hover::before { opacity: 0;} .social-icon::before, body.non-touch .social-icon:hover::after { opacity: 1; } .social-icon.instagram::before{ background-image: url('/templates/cocoagardens/images/shared/logos/instagram-black.svg'); } .social-icon.instagram::after { background-image: url('/templates/cocoagardens/images/shared/logos/instagram-orange.svg');} .social-icon.facebook::before {background-image: url('/templates/cocoagardens/images/shared/logos/facebook-black.svg');} .social-icon.facebook::after {background-image: url('/templates/cocoagardens/images/shared/logos/facebook-orange.svg');} @media (max-width: 720px) { #banner-terms{display:none;} #footer-info-wrap{flex-flow:column;} #footer-socials{height:auto;margin-bottom:var(--13px);line-height:1;} #footer-links{margin-bottom:var(--13px)} .social-icon:nth-child(n+2) { margin-left: var(--10px);} } #header, .mega-menu{ --header__max-width:var(--1715px); --header-logo__size:var(--416px); --header-links__padding-right:var(--54px); } #header-logo { --btn__position: absolute; --btn__width: var(--header-logo__size); --btn__height: var(--230px); --btn__top:0; --btn__right: var(--n8px); --btn__left: auto; transition: all .3s; z-index:1000; } #header-links ul { --ul__margin:0; --ul__display:flex; --ul__justify-content: flex-start; --ul__align-items: center; --ul-li__line-height: var(--c18); --ul-li__margin:0 var(--43px) 0 0; --btn__color:var(--white); --btn-hover__color:var(--yellow); --btn__text-align:center; --btn__font:var(--nav-font); --btn__letter-spacing: var(--ls); --btn__text-transform: uppercase; } #header-links ul .btn, #mega-menu ul .btn { --btn__padding: 0 var(--30px); --btn__height:var(--40px); --btn__font: normal normal var(--21px) / var(--21px) var(--hff); letter-spacing:normal; --btn__width: fit-content; } #header-links ul li.active{ --btn__color:var(--yellow); } #header-links ul li{margin-bottom:0;} #header-links ul li:not(.item-324) {text-align:center; line-height:var(--16px); width: auto;} #header-logo > * { --img__width: 100%; --img__position: absolute; --img__left: 0; zindex: 2; transition: opacity .15s, transform 1s, height .3s; } #header-logo img { transform:scale(0.8); } /* #header-logo { --btn__height: var(--147px); overflow:hidden; transition: height 1s; } */ .very-top #header-logo img{ transform:scale(1);} .very-top #header-logo{ --btn__height: var(--230px); } body:not(.very-top){--header__height:var(--90px)} #header-links ul li.item-324{ --ul-li__width:fit-content; --ul-li__margin: 0 0 0 auto; } @media (max-width: 1024px) { #header-wrap{ --header__height: calc(100/770*70vw); --vpad:var(--36px); } .very-top #header-wrap{ --header__height: calc(100/770*109vw); } #header{ transition:height 0.3s; } #header, .mega-menu { --header__max-width:100%; --header-logo__size:calc(100/770*350vw); --header-links__padding-right:0; --header__padding: 0 var(--vpad) 0 calc(100/770*134vw); } #header-logo { --btn__top:calc(100/770*-94vw); --btn__right:calc(100/770*78vw); --btn__height: var(--header-logo__size); } #header-logo img{transform-origin: center !important;} #header-links ul .btn { --btn__padding: 0 calc(100/770*12vw); --btn__height:calc(100/770*25vw); --btn__font: normal normal calc(100/770*19vw) / calc(100/770*19vw) var(--hff); --btn__width: calc(100/770*143vw); --btn__height: calc(100/770*38vw); } #header-links ul li:not(.item-324) {display:none;} #header-logo img.desktop{ --img__display:none; } #header-logo img.mobile{ display:block !important; } #header-logo{ --btn__height: calc(100/770*200vw); --btn__width: calc(100/770*200vw); overflow:visible; } .very-top #header-logo{ --btn__height: calc(100/770*230vw); --btn__width: calc(100/770*230vw); --btn__top:calc(100/770*-94vw); } #header-logo img { transform: scale(1); } #header-links ul li.item-324{--ul-li__margin: 0;} } @media (max-width: 720px) { #header, .mega-menu, .very-top #header, .very-top .mega-menu { --header__max-width:100%; --header-logo__size:var(--150px); --header-links__padding-right:0; --header__padding: 0 var(--vpad) 0 var(--73px); --header__height:var(--66px); } #header-logo{ --btn__height: var(--120px); --btn__width: var(--120px); } .very-top #header-logo { --btn__top:var(--n52px); --btn__right: var(--37px); --btn__height: var(--header-logo__size); --btn__width: var(--header-logo__size); } #header{ --ul__width:fit-content; } #header-links ul .btn { --btn__padding: 0 var(--12px); --btn__height:var(--25px); --btn__font: normal normal var(--14px) / var(--14px) var(--hff); --btn__width: fit-content; } header-links, header-links-wrap{width:fit-content;} #header-links ul li:not(.item-324) {display:none;} } #header{position:relative;height:var(--header__height, var(--125px));display:flex;align-items:center; width:100%; margin:0 auto; max-width:var(--header__max-width);padding:var(--header__padding, 0); transition:height 1s;} #header-wrap{width:100%; background:var(--green);position: fixed; top:0; left:0; right:0; z-index: 100000; } #header-links-wrap { width: var(--header-links__width, calc(100% - var(--header-logo__size))); padding-right:var(--header-links__padding-right)} #header-links-wrap a:hover{font-weight: 500;} #header-logo img{transform-origin: top;} @media (min-width: 1025px) { #header .nav-item{position: relative;} #header .mod-menu__sub{position:absolute; bottom:var(--n50px); opacity:0; pointer-events: none; transition: opacity 0.3s} #header .mod-menu__sub .nav-item{height:var(--50px); margin-right: 0; min-width: max-content; text-align: left; display: flex; align-items: center } #header .nav-item.parent:hover .mod-menu__sub{opacity:1; pointer-events: all;} } @media (min-width: 679px) and (max-width: 1024px) { #header-links-wrap ul li.nav-item { margin-bottom:0; } } /* MEGA MENU + HEADER ====================================================== */ .mega-menu #header-logo { /*--btn__top:calc(100/770*-108vw);*/ --header-logo__size:calc(100/770*350vw); --btn__height:calc(100/770*280vw) } .mega-menu #header-logo img{ transform:scale(0.8); } .mega-menu { --menu__padding:calc(100/770*185vw) var(--vpad) calc(100/770*56vw); --ul__width:100%; --ul__display: flex; --ul__align-items: flex-start; --ul__flex-flow:column nowrap; --ul__margin:0 0 calc(100/770*20vw); --ul__align-items:center; --ul-li__font:var(--h3); --ul-li__margin:0; --ul-li__letter-spacing:0.01em; } .mega-menu a:not(.btn){ --btn__font:var(--p1); --btn__margin:0 auto calc(100/770*25vw); --btn__text-align:center; --btn__color:var(--white); --btn-hover__color:var(--yellow); --btn__display:block; text-transform:uppercase; } .mega-menu .btn{ --btn__margin:calc(100/770*25vw) auto 0; --btn__padding: 0 calc(100/770*12vw); --btn__height:calc(100/770*25vw); --btn__font: normal normal calc(100/770*19vw) / calc(100/770*19vw) var(--hff); --btn__width: calc(100/770*143vw); --btn__height: calc(100/770*38vw); } @media (max-width: 678px) { .mega-menu #header-logo { --btn__right: var(--37px); --btn__height: var(--header-logo__size); --header-logo__size:var(--150px); } .mega-menu #header-logo img{ transform:scale(1); } .mega-menu { --menu__padding:var(--134px) var(--vpad) var(--56px); --ul__width:100%; --ul__display: flex; --ul__align-items: flex-start; --ul__flex-flow:column nowrap; --ul__margin:0 0 var(--20px); --ul__align-items:center; --ul-li__font:var(--h3); --ul-li__margin:0; --ul-li__letter-spacing:0.01em; } .mega-menu a:not(.btn){ --btn__font:var(--p1); --btn__margin:0 auto var(--33px); --btn__text-align:center; --btn__color:var(--white); --btn-hover__color:var(--yellow); --btn__display:block; text-transform:uppercase; } .mega-menu .btn{ --btn__padding: 0 var(--12px); --btn__height:var(--25px); --btn__font: normal normal var(--14px) / var(--14px) var(--hff); --btn__width: fit-content; } .mega-menu > ul > li > ul{ --ul__display:flex; --ul__gap:0; } } .mega-menu {position:fixed; top:0;z-index:100001;width:100%;transform:translate(0, -100%);transition:1s;opacity:0;overflow-y:scroll;} .mega-menu > div {min-height:100vh;padding:var(--menu__padding);position:relative} .mega-menu > div > div{width:100%;} .mega-menu .nav-item a:after{content:'';position:absolute; display:block; bottom:var(--n2px); left:0; width:0%; height:var(--1px); transition: width 0.3s, opacity 0.3s; background-color:var(--fc2); opacity:1} .mega-menu .nav-item a:hover:after{width:100%;} @media (min-width: 1025px) { .mega-menu {display:none;} } /* MEGA MENU OPEN ====================================================== */ body.mega-open header{z-index: 1002;position: fixed} body.mega-open header a, body.mega-open header div{z-index:900;} body.mega-open .mega-menu {height:100vh; transform:translate(0%, 0%);opacity:1;box-shadow:var(--menu__shadow);overflow:scroll} body.mega-open{height:100vh;overflow:hidden;} /* BURGER MENU ====================================================== */ #hamburger{ --btn__display:block; --span-height:calc(100/770*2vw); --btn__width: calc(100/770*24vw); --btn__height:calc(100/770*20vw); --btn__top: calc(100/770*20vw); --btn__left:calc(100/770*74vw); --btn__position:fixed; --bg-color:var(--cream); --rotate:0deg; --opacity:1; --left-open:calc(100/770*8.5vw); --width:calc(100/770*12vw); --span-left:0; --span-2-left:0; --top-1:0px; --top-2:calc(100/770*10vw); --top-3:calc(100/770*20vw); --top-open-1:calc(100/770*5vw); --top-open-2:calc(100/770*13vw); transition: top 0.3s } .very-top #hamburger, body.has-banner #hamburger{ --btn__top: calc(100/770*43vw); } body.has-banner.very-top #hamburger{ --btn__top:calc(100/770*63vw); } #hamburger span:nth-child(even) { --left:calc(var(--width) - calc(100/770*0.5vw)); } #hamburger span:nth-child(odd){ --left:var(--span-left); } #hamburger .hb1, #hamburger .hb2 { --top: var(--top-1); } #hamburger .hb3, #hamburger .hb4 { --top: var(--top-2); } #hamburger .hb5, #hamburger .hb6 { --top: var(--top-3); } body.mega-open #hamburger span{ --bg-color:var(--white); } body.mega-open #hamburger .hb1,body.mega-open #hamburger .hb6{ --rotate:45deg; } body.mega-open #hamburger .hb2,body.mega-open #hamburger .hb5 { --rotate:-45deg; } body.mega-open #hamburger .hb1 { --left: 0; --top: var(--top-open-1); } body.mega-open #hamburger .hb2 { --left: var(--left-open); --top: var(--top-open-1); } body.mega-open #hamburger .hb3 { --left: -50.5%; --opacity: 0; } body.mega-open #hamburger .hb4 { --left: 100%; --opacity: 0; } body.mega-open #hamburger .hb5 { --left: 0; --top: var(--top-open-2); } body.mega-open #hamburger .hb6 { --left:var(--left-open); --top: var(--top-open-2); } body[class^='properties-'] #hamburger{ --bg-color:var(--green); } @media (min-width: 1025px) { #hamburger{ --btn__display:none;} } @media (max-width: 678px) { #hamburger,.very-top #hamburger{ --btn__display:block; --span-height:var(--2px); --btn__width: var(--24px); --btn__height: var(--20px); --btn__top: var(--20px); --btn__left:var(--vpad); --btn__position:fixed; --bg-color:var(--cream); --rotate:0deg; --opacity:1; --left-open:var(--8-5px); --width:var(--12px); --span-left:0; --span-2-left:0; --top-1:0px; --top-2:var(--10px); --top-3:var(--20px); --top-open-1:var(--5px); --top-open-2:var(--13px); } body.has-banner #hamburger, body.has-banner.very-top #hamburger{ --btn__top:var(--70px); } #hamburger span:nth-child(even) { --left:calc(var(--width) - var(--0-5px)); } #hamburger span:nth-child(odd){ --left:var(--span-left); } #hamburger .hb1, #hamburger .hb2 { --top: var(--top-1); } #hamburger .hb3, #hamburger .hb4 { --top: var(--top-2); } #hamburger .hb5, #hamburger .hb6 { --top: var(--top-3); } body.mega-open #hamburger span{ --bg-color:var(--white); } body.mega-open #hamburger .hb1,body.mega-open #hamburger .hb6{ --rotate:45deg; } body.mega-open #hamburger .hb2,body.mega-open #hamburger .hb5 { --rotate:-45deg; } body.mega-open #hamburger .hb1 { --left: 0; --top: var(--top-open-1); } body.mega-open #hamburger .hb2 { --left: var(--left-open); --top: var(--top-open-1); } body.mega-open #hamburger .hb3 { --left: -50.5%; --opacity: 0; } body.mega-open #hamburger .hb4 { --left: 100%; --opacity: 0; } body.mega-open #hamburger .hb5 { --left: 0; --top: var(--top-open-2); } body.mega-open #hamburger .hb6 { --left:var(--left-open); --top: var(--top-open-2); } } #hamburger{transition: .5s ease-in-out;z-index:555;pointer-events:all;z-index:100003; position:fixed;} #hamburger span {display: block;height: var(--span-height);width:var(--width);background:var(--bg-color);opacity:var(--opacity);transform: rotate(var(--rotate));transition:.25s ease-in-out;top:var(--top);left:var(--left);position: absolute} #contact { --section__padding:var(--207px) 0 var(--220px); --section__max-width:var(--1444px); --h1-margin-bottom:var(--60px); --column__width:50%; --form__transition:background-color 0.6s ease, color 0.6s ease; --form__font:normal normal var(--20px) / var(--27px) var(--bff); --form__color:var(--cream); --form__border:3px solid var(--cream); --form__border-radius:var(--5px); --form-input__width:var(--536px); --form-field__height:var(--36px); --form-input__padding:0 var(--11px); --form-input__font:normal normal var(--16px) / var(--21px) var(--bff); --form-checkbox-label__height:var(--52px); --form-checkbox__padding-top:var(--4px); --form-highlight__color:var(--cream); --form-highlight__background:var(--cream); --form-select__background:var(--red); --form-select__max-height:var(--250px); --form-select__width:calc(100% + var(--4px)); --form-select__padding:var(--7px) 0 var(--20px); --form-select__top:calc(var(--form-field__height) - var(--3px)); --form-select__left:var(--n2px); --form-select__transform:translateY(-50%); --form-textarea__padding:var(--8px) var(--20px) var(--2px); --form-cols__gap:var(--28px) 0; --form-cols__margin-bottom:var(--40px); --form-comments__margin-bottom:var(--35px); --form-beds__gap:var(--16px); --subheading__margin-bottom:var(--32px); } #contact-info-wrap.column{ --column__padding:0 0 0 var(--72px); } .savills{ --btn__width:var(--114px); --btn__height:var(--114px); --btn__position:absolute; --btn__top:var(--134px); --btn__right:0; --img__width:var(--btn__width); --btn__display:block; } .contact-map{ --btn__margin:var(--100px) 0 0 0; --btn__display:block; } #contact button, #contact-info-button a { --btn__border:3px solid var(--cream); --btn__color:var(--cream); --btn__text-align:center; --btn__font:normal normal var(--30px) / var(--30px) var(--hff); --btn__background:var(--green); --btn__width:var(--228px); --btn__height:var(--57px); --btn__text-transform:uppercase; --btn-hover__color:var(--green); --btn-hover__background:var(--cream); } @media(max-width:720px) { #contact{ --section__padding:var(--48px) var(--vpad) var(--63px); --h1-margin-bottom:var(--40px); --top-text__margin-bottom:var(--82px); --columns__flex-flow:row wrap; --column__width:100%; --form__font:var(--p1); --form-p__margin-bottom:var(--22px); --form-p__text-align:center; --form-beds__gap:0; --form-beds__margin:var(--10px); --form-comments__margin-bottom:var(--18px); --form-cols__gap:0; --form-cols__margin-bottom:var(--24px); --form-col__margin-bottom:var(--23px); --form-checkbox-label__height:var(--32px); --form-checkbox__padding-top:0; --form__checkbox__left:var(--n31px); --checkbox-label__max-width:calc(--100% - var(--31px)); --checkbox-label__left:var(--31px); --form-field__height:var(--form-checkbox-label__height); --form-input__padding:0 var(--10px); --form-input__width:100%; --form-input__font:normal normal var(--12px) / var(--12px) var(--bff); --terms-box__margin:var(--28px) 0 var(--62px); --info-desc__margin-bottom:var(--49px); --info-desc__text-align:center; --info-contact__margin-bottom:var(--45px); --info-contact__top:0; --info-list__font:var(--p1); } #contact button, #contact-info-button a { --btn__font:normal normal var(--20px) / var(--20px) var(--hff); --btn__width:var(--148px); --btn__height:var(--37px); } #contact button{ --btn__border:3px solid var(--orange); --btn__color:var(--cream); --btn__background:var(--orange); --btn-hover__color:var(--cream); --btn-hover__border:3px solid var(--cream); --btn-hover__background:var(--green); } #contact-form-wrap.column{ --column__padding: 0 0 var(--63px); } #contact-info-wrap.column{ --column__padding:var(--66px) 0 0 0; } #contact-form-wrap{border-bottom:1px dashed var(--cream)} .savills{ --btn__top:var(--40px); --btn__margin:var(--50px) auto 0; --btn__width:var(--60px); --btn__height:var(--60px); } .contact-map{ --btn__margin:var(--50px) 0 0 0; } } .G3-body h1 {font-size: 3.75vw; line-height: 5vw;} @media (max-width: 1023px) { .G3-body h1 { font-size: 10.67vw; line-height: 14.13vw; } } #register_submit {color:#fff;} .ui.form .inline.fields .field { margin: 0; padding: 1em 0 0 0 !important; } @media (min-width:768px) { .ui.form, .ui.form .field .dropdown, .ui.form .field .dropdown .menu > .item { font-size: inherit !important; } } .ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="file"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="text"], .ui.form input[type="time"], .ui.form input[type="url"] { font-size: inherit !important; } .ui.form .fields { justify-content: space-between; } .ui.red.text.small.error-msg, .ui.red.text.small.error-msg { font-size: 0.6vw !important; line-height: 0.9vw !important; } #area_segment_24 + .mainfield.field { margin-top: 1em !important; } .mainfield.field.inline.fields > label {margin-bottom:0 !important;} .mainfield.field.inline.fields .ui.checkbox > label {text-transform:uppercase;} @media (min-width: 721px) { #contact-form-wrap{border-right:1px dotted var(--cream)} form #terms {width:53%;} } .form-top-text{margin-bottom:var(--top-text__margin-bottom, var(--136px));} #contact form.form.ui *:not(#register_submit) {font:var(--form__font); color:var(--cream);padding-right:0;} #contact .list.header{list-style:none !important} body:not(.loaded) #contact form.form.ui *:not(#register_submit) {color:var(--cream) !important;} #contact form.form.ui .selection.ui .item{color:#000 !important} #contact #register_submit{color:var(--cream);} #contact #register_submit:hover{color:var(--green);} #contact form.form.ui .form-p { margin-bottom: var(--form-p__margin-bottom, var(--55px)); text-align: var(--form-p__text-align, left); font:var(--p1) !important;} form.form.ui {display:flex; flex-flow:row wrap; justify-content:space-between;} form.form.ui > div{width:100%;} form.form.ui div:not(.checkbox) > label {display:none;} form.form.ui p {font:var(--form__font);} #contact-info-wrap p{font:var(--p1)} form.form.ui div > textarea {padding:var(--form-textarea__padding); height:var(--form-field__height);} .mainfield {line-height:1;} /* PLACEHOLDERS :-( ========================================================== */ form.form.ui input::-webkit-input-placeholder { opacity:1; color:var(--form__color); font-weight:normal;text-transform:uppercase; font:var(--form-input__font);} form.form.ui input::-moz-placeholder { opacity:1; color:var(--form__color); font-weight:normal; padding:inherit; border-radius:inherit;text-transform:uppercase; font:var(--form-input__font);} form.form.ui input:-ms-input-placeholder { opacity:1; color:var(--form__color); font-weight:normal; padding:inherit; border-radius:inherit;text-transform:uppercase; font:var(--form-input__font);} form.form.ui input:-moz-placeholder { opacity:1; color:var(--form__color); font-weight:normal; padding:inherit; border-radius:inherit;text-transform:uppercase; font:var(--form-input__font);} form.form.ui textarea::-webkit-input-placeholder { opacity:1; font-family:inherit; font-weight:normal; color:var(--form__color); padding:inherit;text-transform:uppercase; font:var(--form-input__font);} form.form.ui textarea::-moz-placeholder { opacity:1; font-family:inherit; font-weight:normal; color:var(--form__color); padding:inherit; border-radius:inherit;text-transform:uppercase; font:var(--form-input__font);} form.form.ui textarea:-ms-input-placeholder { opacity:1; font-family:inherit; font-weight:normal; color:var(--form__color); padding:inherit; border-radius:inherit;text-transform:uppercase; font:var(--form-input__font);} form.form.ui textarea:-moz-placeholder { opacity:1; font-family:inherit; font-weight:normal; color:var(--form__color); padding:inherit; border-radius:inherit;text-transform:uppercase; font:var(--form-input__font); } /* SELECT DROPDOWN OVERRIDES ========================================================== */ form.form.ui div > .selection.dropdown, form.form.ui div > .ui.selection.dropdown {position:relative; color:var(--form-highlight__color); height:var(--form-field__height); padding:var(--form-select__padding, unset);} .ui.selection.dropdown:not(.button) > .default.text {color:var(--form__color)} .ui.selection.dropdown > .dropdown.icon {display:none;} .default.dropdown:not(.button) > .text, .dropdown:not(.button) > .default.text:not(.a) {color:var(--form__color)} .dropdown > input:not(.search):first-child, .dropdown > select {display:none !important;} .selection .menu {display:none;} .selection.dropdown:not(.ui) .menu {overflow-x:hidden; overflow-y:auto; position:absolute; width:var(--form-select__width); max-width:101%; background:var(--form-select__background); padding:0; border:0; max-height:var(--form-select__max-height); top:var(--form-select__top); left:var(--form-select__left);} .dropdown:not(.ui) .menu > .item {position:relative; cursor:pointer; display:block; border:none; height:auto; padding:.33em .5em; color:#000000; transition:.3s ease;} /* COL 1 SPECIFICS ========================================================== */ form.form.ui input[type="text"], form.form.ui div > textarea, form.ui.form textarea:focus, form.form.ui div > .selection.dropdown {width:var(--form-input__width, 100%); min-height:var(--form-field__height); background:transparent !important; border: var(--form__border); color:var(--form__color); border-radius:var(--form__border-radius); padding:var(--form-input__padding);text-transform:uppercase; font:var(--form-input__font);} form.form.ui ui.checkbox label:before {height:var(--form-checkbox__size, var(--18px)) !important} #contact form.form.ui .checkbox label {cursor:pointer; font:var(--sub-font) !important;} form.form.ui .checkbox label a {position:relative;text-decoration: underline; font:var(--sub-font) !important;} .terms > .field > .checkbox label + input, .newsletter > .field > .checkbox label + input {opacity:0; position:absolute; width:0px; height:0;} #contact form.form.ui .checkbox label, #contact form.form.ui .checkbox label:hover{position:relative; font:var(--form__font); left:var(--checkbox-label__left, var(--37px)); width: 100%; max-width: var(--checkbox-label__max-width, var(--546px)); display:inline-block; padding-top:var(--form-checkbox__padding-top);} #contact form.form.ui .checkbox label:before, #contact form.form.ui .checkbox label:hover:before {position:absolute; top:0; left:var(--form__checkbox__left, var(--n37px)); width:var(--form-checkbox__size, var(--18px)); height:var(--form-checkbox__size, var(--18px)); content:''; background:transparent; border:var(--form__border); transition:var(--form__transition);border-radius:var(--form__border-radius);} #contact form.form.ui input[type="checkbox"]:checked + label::before {background-color:var(--form-highlight__background);} .terms, .newsletter {letter-spacing:0;} form.form.ui p.max-budget {width:var(--form-cols__width);} form.ui.form .ui.radio.checkbox label::before, form.ui.form .ui.radio.checkbox label::after, form.ui.form .required.field > .checkbox::after, form.ui.form .ui.checkbox input:checked ~ label::after, form.ui.form .beds .inline.fields > label, form.ui.form .mainfield > label{ display:none;} form.ui.form .ui.radio.checkbox{width:100%;} form.ui.form .beds .inline.fields > label, form.ui.form .budget .inline.fields > label{display:none} form.ui.form .ui.checkbox input.hidden + label{padding-left:0;} form.form.ui div[data-uid="63"], form.form.ui div[data-uid="69"]{width:var(--form-input__width)} #contact form.form.ui div[data-uid="63"] label{font:var(--form__font) !important;} form.form.ui div[data-uid="63"] .checkbox label:before, form.form.ui div[data-uid="69"] .checkbox label:before{display:none;} form.form.ui div[data-uid="63"] .checkbox label, form.form.ui div[data-uid="69"] .checkbox label{left:0 !important; width:var(--form-beds__width, var(--163px)) !important; height:var(--form-beds__height, var(--36px)); border:var(--form__border); border-radius:var(--form__border-radius); padding:0 !important; display:flex !important; justify-content: center; align-items: center; font:var(--form__font); line-height:1} form.form.ui div[data-uid="69"] .checkbox label{font: var(--sub-font) !important;} form.form.ui div[data-uid="63"] .checkbox.checked label, form.form.ui div[data-uid="69"] .checkbox.checked label{background:var(--cream); color:var(--green) !important;} @media(max-width:720px) { #contact form.form.ui div[data-uid="63"] .checkbox label{width:var(--85px) !important; font:var(--form__font)} #contact form.form.ui div[data-uid="69"] .checkbox label{width:var(--303px) !important;} form.form.ui div[data-uid="69"]{flex-wrap:wrap;} } form.form.ui > div[data-uid="23"], form #area_container_40 {width:100%;} form.form.ui > div[data-uid="23"] {margin-bottom:var(--form-comments__margin-bottom)} form.form.ui #newsletter {width:var(--form-cols__width); margin-bottom:var(--32px)} form.form.ui #terms {margin-bottom:var(--32px)} #contact form.form.ui #area_container_40 {margin-bottom:var(--56px)} #contact .sh1 + .copy{display:none;} form.form.ui #terms_box { margin: var(--terms-box__margin, 0 0 var(--55px));} #contact-info{position:relative} #contact-form h3, .ui.text.red.field.quti.block{display:none !important;} #contact-info-list *{font:var(--info-list__font, var(--p1));} #contact-info-desc{margin-bottom:var(--info-desc__margin-bottom, var(--45px)); text-align: var(--info-desc__text-align, left); font: var(--p1);} #contact-info-tele, #contact-info-address{padding-left:var(--50px);position:relative;margin-bottom:var(--info-contact__margin-bottom, var(--37px));display: block;} #contact-info-tele:before, #contact-info-address:before{position: absolute; content:''; display:block; top:var(--info-contact__top, var(--10px));left:0;width:var(--info-contact__left, var(--21px));height:var(--21px); background:url('/templates/cocoagardens/images/shared/icons/phone.svg') center / contain no-repeat;} #contact-info-address:before {background:url('/templates/cocoagardens/images/shared/icons/address-book.svg') center / contain no-repeat;} /*COLUMNS BLOCK*/ section.columns-block { --columns-h3__font:var(--h1); --columns-h__margin-bottom:var(--34px); --column__width:50%; --h1-margin-bottom:var(--40px); --copy__font:var(--p1); --copy__margin:0 0 var(--50px); --section__padding:var(--100px) var(--275px); } section.columns-block.text-image-columns{ --section__padding:0; --column__display:flex; --column__justify-content:center; --column__align-items:center; --column__flex-flow:column; --copy__padding:0 var(--85px) 0 0; --img__width:var(--855px); --img__height:var(--855px); --copy__width:var(--690px); --column-header__width:var(--690px); --column-span__width:var(--690px); } section.columns-block.text-image-columns .text{ --column__padding: 0 var(--135px); } section.columns-block.text-image-columns .image{ --column__padding:var(--59px); } section.columns-block.text-image-columns .column-1{ --column__align-items: flex-end; } section.columns-block.text-image-columns .column-2{ --column__align-items: flex-start; } .latimer #latimer-columns.columns-block{ --section__padding: var(--125px) var(--150px) var(--134px); } .latimer #latimer-different.columns-block{ --section__padding: var(--127px) var(--150px) var(--232px); --columns__gap:var(--20px); --column__padding:var(--60px) 0; --h2-margin-bottom:var(--100px); } .latimer #latimer-gold-award{ --img__width:var(--664px); --img__margin: 0 auto; } .shared-ownership section.columns-block, .latimer #latimer-columns.columns-block{ --column__width:calc(50% - var(--20px)); --columns__justify-content:space-between; } #shared-why-rent{ --section__padding:var(--143px) var(--149px) var(--172px); --h1-margin-bottom:var(--143px); } #shared-how-it-works{ --section__padding:var(--125px) var(--149px) var(--172px); --h1-margin-bottom:var(--123px); } #latimer-columns .btn{ --btn__margin: 0 auto; } body.cookies section.columns-block{ --copy__font:var(--p2); --ul-li__font:var(--p2); --section__padding:var(--300px) var(--spad) var(--100px); } body.cookies section#cookies.columns-block{ --section__padding:var(--50px) var(--spad) var(--100px); } body.cookies section.columns-block .column-2{ --column__padding:0 var(--15px) 0 0; } body.cookies section.columns-block .column-3{ --column__padding:0 0 0 var(--15px); } body.availability-assisted-move .columns-block, body.offers .columns-block, body.downsizing .columns-block{ --section__padding:var(--100px) var(--149px); --p-margin-bottom:1em; --columns__gap:var(--35px); } #offers-assisted-move, body.downsizing .columns-block{ --h1-margin-bottom:var(--75px); } #offers-assisted-move > div > .copy, body.downsizing .columns-block >div > .copy{ border-bottom:var(--1px) solid var(--light-grey); --copy__text-align:center; --copy__padding:0 0 var(--110px); --copy__margin:0 0 var(--75px); } #offers-assisted-move > div > .copy p, body.downsizing .columns-block > div > .copy p{max-width:var(--970px); margin:0 auto 1.2em;} #offers-four-simple-steps{ margin-top:var(--n1px); --section__padding:0 var(--149px) var(--100px); } #offers-four-simple-steps .columns, body.downsizing .columns-block .columns{ padding-top:var(--100px); border-top:var(--1px) solid var(--light-grey); } body.availability-assisted-move .h2, body.offers .columns-block .h2, body.downsizing .columns-block .h2{line-height: 1.2em;} #downsizing-things-to-remember > div{padding-top:0;} @media (max-width: 720px) { section.columns-block { --columns-h__margin-bottom:var(--34px); --column__width:100%; --columns__flex-flow: row wrap; --h1-margin-bottom:var(--26px); --copy__margin:0 0 var(--50px); } section.columns-block.text-image-columns{ --copy__padding:0; --img__width:var(--333px); --img__height:var(--333px); --copy__width:100%; --column-header__width:100%; --column-span__width:100%; --copy__margin:0 0 var(--42px); } section.columns-block.text-image-columns .text{ --column__padding: var(--54px) var(--vpad); } section.columns-block.text-image-columns .image{ --column__padding:var(--20px); } #shared-why-rent{ --section__padding:var(--54px) var(--vpad); --h1-margin-bottom:var(--50px); --column__width:100%; --copy__margin:0 0 1em 0; } #shared-how-it-works{ --section__padding:var(--54px) var(--vpad); --h1-margin-bottom:var(--50px); --column__width:100%; --copy__margin:0 0 1em 0; --ul-li__margin:0 0 1em 0; } body.cookies section.columns-block{ --copy__font:var(--p1); --ul-li__font:var(--p1); --section__padding:var(--80px) var(--vpad) var(--30px); } body.cookies section#cookies.columns-block{ --section__padding:var(--10px) var(--vpad) var(--30px); } body.cookies section.columns-block .column-2{ --column__padding:0; } body.cookies section.columns-block .column-3{ --column__padding:0; } .latimer #latimer-columns.columns-block, .latimer #latimer-different.columns-block{ --column__width:100%; --section__padding:var(--54px) var(--36px); --column__margin-bottom:1em; --copy__margin: 0; } #latimer-columns .btn{ --btn__margin: var(--30px) auto 0; --btn__height:var(--58px); } .latimer #latimer-different.columns-block{ --columns__gap:0; --h2-margin-bottom:var(--50px); } body.availability-assisted-move .columns-block, body.offers .columns-block, body.downsizing .columns-block{ --section__padding:var(--54px) var(--36px); --copy__margin:0; } #offers-four-simple-steps, body.downsizing .columns-block{ --section__padding:0 var(--36px) var(--54px); } #offers-four-simple-steps .columns, body.downsizing .columns-block .columns{ padding-top:var(--54px); } body.availability-assisted-move .column-3, body.offers .column-3, body.downsizing .columns-block .column-3{ --copy__margin:0 0 var(--25px); } #offers-assisted-move, body.downsizing .columns-block{ --h1-margin-bottom:var(--35px); } #offers-assisted-move > div > .copy, body.downsizing .columns-block > div > .copy{ --copy__padding:0 0 var(--45px); --copy__margin:0 0 var(--35px); } } .columns {gap:var(--columns__gap, 0);display:flex;flex-flow:var(--columns__flex-flow,row nowrap);justify-content:var(--columns__justify-content, unset);width:100%;} .columns .column-header{display:var(--column-header__display, block);flex-flow:row nowrap;justify-content:space-between;align-items:center;max-width:var(--column-header__width, 100%);} .columns h3, .columns h2 {text-transform: uppercase;} .columns > div {width:var(--column__width);flex-flow:var(--column__flex-flow,unset); display:var(--column__display, initial); padding:var(--column__padding, 0);margin-top:var(--column__margin-top);position:var(--column__position, initial);max-width:var(--column__max-width, unset);align-items:var(--column__align-items, unset);justify-content:var(--column__justify-content, unset);} .columns > div{margin-bottom:var(--column__margin-bottom,0);} .columns p {font:var(--copy__font, unset);color:var(--columns-copy__color, unset);} .columns span{width:100%;width:var(--column-span__width, 100%);} #shared-how-it-works .lime-bg{padding:var(--49px) var(--49px) var(--30px); margin-bottom:var(--66px);} @media (max-width: 768px) { #shared-how-it-works .lime-bg{padding:var(--49px) var(--26px) var(--30px); margin-bottom:var(--36px);} } /* LEGACY - incase needed put back in*/ /* #info-inspired-by-nature { --section__padding:var(--156px) var(--194px); --h1-margin-bottom:var(--50px); --h3__font:normal normal var(--57px) / var(--65px) var(--hff); --copy__max-width:var(--935px); --copy__margin: 0 auto var(--140px); --columns__justify-content:space-between; --column__position:relative; --column__width:var(--422px); --img__margin:0 0 var(--79px); } #info-inspired-by-nature .columns{ --copy__font:var(--p2); --copy__margin:0; } @media (max-width: 768px) { #info-inspired-by-nature { --section__padding:var(--54px) var(--36px); --h1-margin-bottom:var(--30px); --h3__font:var(--h1); --h3__top:var(--135px); --copy__max-width:100%; --copy__margin: 0 auto var(--70px); --columns__justify-content:space-between; --column__position:relative; --column__width:100%; --img__margin:0 0 var(--30px); } #info-inspired-by-nature .columns{ --copy__font:var(--p2); --copy__margin:0 0 var(--50px); --h1__width:90 } } #info-inspired-by-nature .column-header{position: absolute; left:0; top:var(--h3__top, var(--173px));width:100%;z-index: 1;} #info-inspired-by-nature h3{font:var(--h3__font); color:var(--cream); width:100%; text-align: center; position:relative} #info-inspired-by-nature h3:after{content:''; display:block; width:var(--69px); height:var(--15px); position: absolute; left:calc(50% - var(--34px)); bottom:var(--n38px); background:url('/templates/cocoagardens/images/shared/icons/header-accent.svg') center / contain no-repeat;} #info-inspired-by-nature .columns > div:before{position:absolute; content:''; display: block; top:0; left:0;width:100%; aspect-ratio:1 / 1; border-radius: 50%; background:var(--orange); opacity:0.15; z-index: 1;} */ section.hero-block{ --section__padding:0; /* --hero__height:var(--954px);*/ --h-bubble-2__size:var(--303px); --h-bubble-2__width:var(--200px); --h-bubble__size:var(--538px); --h-bubble__font:normal normal var(--85px) / var(--85px) var(--hff); --h-bubble-2__font:normal normal var(--57px) / var(--57px) var(--hff); --h1__size:var(--309px); --h1__font:var(--h1); --h1__padding-bottom:0; --h1-margin-bottom:var(--30px); --h-bubble__padding:0 0 0 var(--94px); --h-bubble-2__padding:0 var(--37px); position:relative; z-index: 10000; } /* .shared-ownership section.hero-block{ --h1__padding-bottom:var(--70px); } */ section.hero-block{ --hero__height:calc(100vh - var(--400px)); } @media (max-width: 720px) { section.hero-block{ --hero__height:var(--446px); --h-bubble-2__size:var(--124px); --h-bubble-2__width:var(--90px); --h-bubble-2__left:var(--46px); --h-bubble-2__top:var(--7px); --h-bubble-2__right:auto; --h-bubble-2__font:var(--h3); --h-bubble-2__translate:var(--15px); --h-bubble-2__padding:0 var(--22px); --h-bubble__padding:0 var(--25px); --h-bubble__size:var(--144px); --h-bubble__font:normal normal var(--22px) / var(--26px) var(--hff); --h1__size:var(--111px); --h1__font:normal normal var(--21px) / var(--24px) var(--hff); --h1__padding-bottom:var(--15px); --h1-margin-bottom:var(--41px); } body section.hero-block{ --hero__height:calc(100vh - var(--418px)); } /* .shared-ownership section.hero-block{ --h1__padding-bottom:var(--10px); } */ } @media (min-width: 721px) and (max-width: 768px) and (orientation:portrait) { body section.hero-block{ --hero__height:calc(100vh - calc(100/768*350vw)); --hero__min-height:var(--340px); } } @media (min-width: 721px) and (max-width: 768px) { body section.hero-block{ --h1__size:calc(100/768*138vw); } } .interior-design section.hero-block{ --h1__padding-bottom:var(--15px); } @media (min-aspect-ratio: 1920/1032) { section.hero-block{ --hero__height:calc(100vh - var(--127px)); } } @media(orientation:landscape) { .hero-block iframe:not(.a) { height:56vw; } } /* HERO + VIDEO ========================================================== */ section.hero-block > div {height:var(--hero__height);display: flex;flex-flow: column nowrap; justify-content: flex-end;padding-bottom:0;align-items: center; min-height:var(--hero__min-height, var(--hero-height));} .hero-block h2 {text-transform:uppercase;text-align: center;font:var(--p3);} section.hero-block > div > div{height:100%;width:100%;position:relative;z-index: 1; display:flex; align-items: flex-end; justify-content: center;} section.hero-block h1{transform: scale(1); opacity:0; transition:transform 1s, opacity 1s; background: var(--purple);text-align: center;aspect-ratio: 1/1;display: flex; align-items: center; border-radius: 50%;text-transform:uppercase; width:var(--h1__size); height:var(--h1__size); font:var(--h1__font); justify-content: center; color:var(--cream);position:relative;padding-bottom:var(--h1__padding-bottom); overflow: hidden;} body.loaded section.hero-block h1 { transform: scale(1); opacity:1;} body.loaded section.hero-block h1:hover {transform:scale(1.05)} .hero-block h1:not(.h-bubble):after{content:''; display:block; position: absolute; bottom:var(--28px); left:calc(50% - var(--17px)); width:var(--35px); height:var(--53px); background:url('/templates/cocoagardens/images/shared/icons/hero-arrow.svg') center / contain no-repeat;transition:opacity 0.9s 0.9s; opacity:0;} body.loaded .hero-block h1:not(.h-bubble):after{opacity:1;} section.hero-block h1.h-bubble{ font: var(--h-bubble__font); position: absolute; bottom:var(--h-bubble__bottom, var(--30px)); left:var(--h-bubble__left, var(--22px)); color: var(--cream); max-width:var(--h-bubble__size); height:var(--h-bubble__size); text-align: left; padding: var(--h-bubble__padding, 0.5em); width: 100%; justify-content: flex-start; margin-bottom: 0;} body.home section.hero-block .h-bubble-2 { position: absolute; height: var(--h-bubble-2__size); top: var(--h-bubble-2__top, var(--174px));left: var(--h-bubble-2__left, auto); right: var(--h-bubble-2__right, var(--111px)); display: flex; justify-content: center; align-items: center; color: var(--cream); transition:transform 0.5s; background: var(--orange); width: var(--h-bubble-2__size) ; border-radius: 50%; aspect-ratio: 1/1; font: var(--h-bubble-2__font); text-align: center; padding:var(--h-bubble-2__padding);} section.hero-block.has-video > div{height:fit-content} section.hero-block .video{height:100%; width:100%; } section.hero-block .video iframe{width:100%; height:auto; aspect-ratio: 2 / 1;} section.hero-block .sticker{position:absolute; height: var(--h-bubble-2__size); top: var(--h-bubble-2__top, var(--174px));left: var(--h-bubble-2__left, auto); right: var(--h-bubble-2__right, var(--111px)); transition:transform 0.5s; width: var(--h-bubble-2__size) ; aspect-ratio: 1/1; z-index: 1;} /* SNOW ======================================================= */ .snow{position:absolute !important; height: var(--h-bubble-2__size) !important; top: var(--h-bubble-2__top, var(--174px));left: var(--h-bubble-2__left, auto); right: var(--h-bubble-2__right, var(--111px)); transition:transform 0.5s; width: var(--h-bubble-2__size) !important; aspect-ratio: 1/1; border-radius:50%; z-index: 2; overflow:hidden} @media (max-width: 720px) { .hero-block h1:not(.h-bubble):after{ left:calc(50% - var(--6px)); width:var(--13px); height:var(--19px);} body.loaded .hero-block h1:not(.h-bubble):after{bottom:var(--15px)} section.hero-block.has-video > div{height:var(--hero__height); overflow: hidden;} section.hero-block .video iframe{width:auto; height:100%; aspect-ratio: 2 / 1; transform:translateX(-33%)} } /* .hero-block.has-video{position: relative;} .hero-block.has-video h1, .hero-block.has-video h2{position: relative;z-index: 2} .hero-block .video {position: absolute; width: 100%; height: var(--hero-video__height);display:flex; justify-content: center; align-items: center;overflow:hidden;z-index:1;top:0;left:0;bottom:0;right:0} .hero-block iframe {width: 100%; height: 100%; transform:scale(var(--hero-video__scale)); opacity:0; transition:opacity 1s ease;} .loaded .hero-block iframe {opacity:1;} *//*DEFAULT BLOCK*/ .default-block{ --sh1-margin-bottom:var(--55px); --copy__width:var(--860px); --copy__margin:0 auto var(--109px); --copy__font:var(--p1); --section__padding:var(--200px) var(--275px); } /*BASIC BLOCK*/ .basic-block { --section__padding:var(--100px) var(--275px) var(--100px); --copy__text-align:center; --copy__margin:0 auto var(--36px); --btn__margin:0 auto; --h1-margin-bottom:var(--50px); --h2-margin-bottom:var(--50px); --copy__max-width:var(--1000px); } .hero-block + section.basic-block > div { --section__padding:var(--68px) var(--150px) var(--83px); --copy__margin:0 auto var(--67px); } .hero-block + #latimer-intro.basic-block > div { --section__padding:var(--68px) var(--250px) var(--83px); --copy__margin:0 auto; } .hero-block + section.basic-block .btn{ --btn__width:var(--327px); } .location .basic-block + section.basic-block > div { --section__padding:var(--68px) 0 var(--55px); --copy__margin:0 auto; } @media (min-width: 721px) and (max-width: 768px) and (orientation:portrait){ .hero-block + section.basic-block > div, .hero-block + #latimer-intro.basic-block > div { height:calc(100/768*350vw); --copy__max-width:100%; --section__padding:calc(100/768*107vw) calc(100/768*75vw) calc(100/768*89vw); display:flex; flex-direction:column; justify-content: space-between; } .hero-block + section.basic-block .btn{ --btn__width:calc(100/768*175vw); } } @media (min-width: 721px) and (max-width: 768px){ #latimer-intro.basic-block .btn{ width:fit-content !important; } } @media (max-width: 720px) { .hero-block + section.basic-block > div, section.basic-block { --section__padding:var(--52px) var(--vpad) var(--51px); --copy__margin:0 0 var(--41px); } .basic-block.has-video { --section__padding:0; } .hero-block + #latimer-intro.basic-block > div { --section__padding:var(--52px) var(--vpad) var(--51px); } } .basic-block h2{max-width:var(--copy__max-width); margin:var(--copy__margin);}.imagezoom-block{ --section__padding:var(--200px) var(--hpad); --imagezoom__height:var(--810px); } .zoomwrap{ overflow: hidden; position: relative; background:var(--imagezoom__background, var(--white)); cursor:move; width:var(--imagezoom__width,100%)} .imagezoom{width:100%;height:var(--imagezoom__height);display: flex; justify-content: center; align-items: center; } .zoomwrap img { --img__height: auto; --img__width: 100%; max-width: 100%; line-height: 0; position:relative;z-index:1; } .zoom-button-container { width:var(--220px); } .zoom-button-container button { background: var(--green); width: var(--64px); height: var(--64px); display: inline-flex; justify-content: center; align-items: center; } .zoom-button-container button.zoomin{ background: var(--green) url(/templates/cocoagardens/images/shared/icons/zoomin.svg) center / 55% no-repeat; } .zoom-button-container button.zoomout{ background: var(--green) url(/templates/cocoagardens/images/shared/icons/zoomout.svg) center / 55% no-repeat; } .zoom-button-container button.reset{ background: var(--green) url(/templates/cocoagardens/images/shared/gardens/reset.svg) center / 60% no-repeat; } .site-plan-wrap{ position:relative; width:100%; height:100%; } @media (max-width: 720px) { .zoom-button-container button { width: var(--43px); height: var(--43px); } }section.icon-block{ --section__padding:0 0 var(--178px); --section__max-width:var(--1350px); --h1-margin-bottom:var(--50px); --img__height:var(--46px); --img__width:var(--88px); --img__margin:0 0 var(--16px); text-align:center; font:normal normal var(--21px) / var(--28px) var(--bff); margin-top:var(--n1px); } @media (max-width: 720px) { section.icon-block{ --section__padding:0 var(--vpad) var(--40px); --icon-wrap__width:47%; --icon__size:var(--55px); --img__height:var(--14px); --img__width:auto; --img__margin:0 0 var(--5px); --icon-wrap__margin-bottom:var(--18px); --icon-wrap-p__font:normal normal var(--12px) / var(--16px) var(--bff); --icon-wrap-p__margin-left:var(--12px); --icon-p__font:normal normal var(--7-5px) / var(--7-5px) var(--bff); } } .iconset{ display:flex; flex-flow:row wrap; justify-content:space-between; align-items: center; } .icon-wrap{ width:var(--icon-wrap__width, 32%); display:flex; align-items: center; margin-bottom:var(--icon-wrap__margin-bottom, var(--50px)); } .icon-wrap .icon{ width:var(--icon__size, var(--141px)); aspect-ratio:1/1; height:var(--icon__size, var(--141px)); border:2px solid var(--cream); border-radius:50%; display:flex; flex-flow: column; justify-content: center; align-items: center; } .icon-wrap p{ font:var(--icon-wrap-p__font, var(--p3)); margin-left:var(--icon-wrap-p__margin-left, var(--30px)); text-align: left; } .icon-wrap .icon p{ font:var(--icon-p__font, var(--nav-font)); text-transform: uppercase; margin-left:0; } .properties-block{ --section__padding:var(--255px) var(--252px); --h1-margin-bottom:var(--14px); --img__margin:0 0 var(--82px); --ul-li__font:var(--p1); --copy__margin:0 0 var(--80px); --property-list__gap: var(--192px) var(--200px); --property__width:var(--560px); } .properties-block .btn{ --btn__margin:var(--41px) 0 0 0; --btn__padding:0; --btn__width:var(--432px); } .properties-block .room-count{ --ul__display:flex; --ul__align-items:center; --ul-li__position:relative; --ul-li__height:var(--40px); --ul-li__width:var(--198px); --ul-li__line-height:var(--40px); --ul__margin:0 0 var(--43px); } .properties-block .room-count .beds{ --ul-li__padding:0 0 0 var(--80px); } .properties-block .room-count .bath{ padding-left:var(--63px); } .properties-block .features{ --ul__margin:0 0 var(--60px) 0; } @media (min-width: 721px) and (max-width: 768px) { .properties-block{ --section__padding:calc(100/768*79vw) calc(100/768*75vw); --property__width:calc(100/768*297vw); --property-list__gap: calc(100/768*88vw) calc(100/768*18vw); --h1-margin-bottom:calc(100/768*14vw); } } @media (max-width: 720px) { .properties-block{ --section__padding:var(--36px) var(--vpad) 0; --h1-margin-bottom:var(--10px); --img__margin:0 0 var(--32px); --ul-li__font:var(--p1); --copy__margin:0 0 var(--30px); --property-list__gap: 0; --property__width:100%; } .properties-block .btn{ --btn__margin:var(--11px) 0 0 0; --btn__padding:0; --btn__width:100%; } .properties-block .room-count{ --ul-li__height:var(--35px); --ul-li__line-height:var(--35px); --ul__margin:0 0 var(--15px); } .properties-block .room-count .bath{ padding-left:var(--30px); } .properties-block .room-count .beds{ --ul-li__padding:0 0 0 var(--45px); } .properties-block .features{ --ul__margin:0 0 var(--15px) 0; } } .properties-block .property-list{display:flex; flex-flow:row wrap; gap:var(--property-list__gap, var(--130px) var(--200px));justify-content: space-between} .properties-block .property-wrap{width:var(--property__width);} .properties-block img{aspect-ratio:1/1; object-fit:cover;} .properties-block .room-count li{height:var(--35px);display: flex;align-items: center;position:relative;} .properties-block .room-count li:before{position:absolute;left:0;content:'';display:block;} .properties-block .beds:before{background: url('/templates/cocoagardens/images/shared/icons/beds.svg') left center / contain no-repeat; width:var(--bed__width, var(--70px)); height:var(--bed__height, var(--34px)); top:var(--bed__top, 0px)} .properties-block .bath:before{background: url('/templates/cocoagardens/images/shared/icons/baths.svg') left center / contain no-repeat; width:var(--bath__width, var(--51px)); height:var(--bath__height, var(--45px)); top:var(--bath__top, var(--n9px));} @media (max-width: 720px) { .properties-block{ --bed__width:var(--35px); --bed__height:var(--18px); --bed__top:var(--7px); --bath__width:var(--25px); --bath__height:var(--24px); --bath__top:var(--2px); } .properties-block .room-count li.bath:before{left:var(--n7px)} .properties-block .property-wrap{margin-bottom:var(--45px);} } /* Hide the walmgates details on key */ .keys-container .the-walmgate > span:not(:first-child) { display:none; }.availability-block{ --section__padding:var(--111px) var(--100px) var(--126px); --section__hpad:var(--102px); --h1-margin-bottom:var(--59px); position:relative; } .availability-block ul{width:100%;} .availability-block ul:not(.price-list){ --ul__display:flex; --ul__align-items:center; --ul__margin:0; --ul__padding:0; --ul-li__height:var(--51px); --ul-li__font:var(--p2); --ul-li__flex: 1; --ul-li__text-align: center; --ul-li__display: flex; --ul-li__justify-content: center; --ul-li__align-items: center; --ul-li__margin: 0; --ul-li__padding: var(--15px) 0; text-transform: uppercase; --ul-li__letter-spacing: 0.09em; } .availability-block ul.price-list-headings { --ul-li__height:var(--93px); } .availability-block .btn{ --btn__width:var(--325px); --btn__color:var(--green); --btn__border:2px solid var(--green); --btn__background:var(--white); --btn-hover__border:2px solid var(--orange); --btn-hover__background:var(--orange); --btn-hover__color:var(--white); --btn__margin:0 0 0 var(--26px); } .availability-block .sub-filter-group .btn{ --btn__width: fit-content; --btn__padding:0 var(--23px); --btn__border:var(--border-width) solid var(--cream); --btn__background:var(--cream); --btn-hover__border:var(--btn__border); --btn-hover__background:var(--btn__background); --btn-hover__color:var(--green); } .availability-block .sub-filter-group .btn.selected{ --btn__border:var(--border-width) solid var(--green); } .availability-block .sub-filter-group .btn.clear-all{ min-width:var(--328px); } .availability-block .btn.open{ --btn__color:var(--white); --btn__border:2px solid var(--orange); --btn__background:var(--orange); } .availability-block .sub-filters .btn{ --btn__background:var(--cream); --btn__position:relative; --btn__width:fit-content; --btn__padding:0 var(--80px) 0 var(--28px); } .price-list-items li{ --ul-li__font:var(--p4); } .price-list-items li.sqft{flex-direction: column} .availability-block h2{width:var(--319px)} .availability-block h2.h1{width:100%} .availability-block .main-filters, .availability-block .sub-filters{display:flex; justify-content: flex-start; align-items: center; padding:var(--65px) var(--section__hpad); flex-wrap:wrap} .availability-block .sub-filters{flex-wrap:nowrap;padding:var(--55px) var(--section__hpad)} .availability-block .sub-filter-group{height:0; opacity:0;align-items:flex-end; overflow:hidden; transition: height 0.3s, opacity 0.3s} .availability-block .filter-group > .sub-filter-group.open{height:var(--100px); opacity:1;} .availability-block .filter-group{display:flex; justify-content: space-between; align-items: center;width:var(--1345px);flex-wrap:wrap; flex-grow:1} .availability-block .filter-group > div{display:flex; width:100%; align-items: center;} .availability-block .selected-filters{display:flex; flex-wrap:wrap; flex-grow:1;gap:var(--10px);} .availability-block .plot-row .view a{--btn__position: relative; --btn__padding: 0 var(--39px) 0 0;} .availability-block .price-list-items .view a:after{position: absolute;content:'';display:block; width:var(--13px); height:var(--13px); background:url('/templates/cocoagardens/images/shared/icons/arrow.svg') center / contain no-repeat; top:var(--6px); right:0;} .availability-block .sub-filters .btn:after, .availability-block .sub-filters .btn:before{position:absolute; content:''; display: block; height:100%;top:0; width:var(--btn-after__width, var(--22px)); right:var(--btn-after__left,var(--18px)); opacity:1; transition:opacity 0.3s; background: url('/templates/cocoagardens/images/shared/icons/close.svg') center / contain no-repeat;} .availability-block .sub-filters .btn:before{opacity:0; background-image: url('/templates/cocoagardens/images/shared/icons/close-white.svg');} .availability-block .sub-filters .btn:hover:after{opacity:0;} .availability-block .sub-filters .btn:hover:before{opacity:1;} .availability-block ul.price-list-headings li{ border: 4px solid var(--green); border-left: none; border-right: none; padding: var(--25px) 0; } .availability-block ul.price-list-items li{ border-bottom: 1px solid var(--green); } .price-list ul > li.plot{ max-width:var(--46px); } .main-filter-group > .sub-filter-group{display:none;} .availability-block > div > div .availability-wrap:last-child{display:none;} @media (max-width: 768px) { .availability-block .btn, .availability-block .sub-filter-group .btn{ --btn__margin:0 0 var(--12px); min-width:fit-content; --btn__width:100%; } .availability-block{ --section__padding:var(--49px) var(--vpad) var(--86px); --section__hpad:var(--102px); --h1-margin-bottom:0; } ul.price-list{ --ul__padding:var(--49px) 0 0; } .availability-block ul:not(.price-list){ --ul__padding:var(--18px) 0 0 ; --ul__display:block; --ul-li__height:auto; --ul-li__font:var(--p2); --ul-li__text-align: left; --ul-li__display: block; --ul-li__margin: 0 0 var(--17px); --ul-li__padding: 0; --ul-li__letter-spacing: 0.09em; --ul-li__width:100%; border-bottom:1px solid var(--green); overflow:hidden; height:var(--54px); transition:height 0.3s } .availability-block .sub-filters .btn{ --btn__width:100%; } .availability-block ul:not(.price-list).open{ height:var(--360px); } .availability-block ul:not(.price-list) .plot:after, .availability-block ul .plot:not(.price-list):before{ position: absolute;content:'';display:block; width:var(--11px); height:100%; background:url('/templates/cocoagardens/images/shared/icons/plus.svg') center / contain no-repeat; top:0; right:var(--1px); opacity:1; transition: opacity 0.3; } .availability-block ul:not(.price-list) .plot:before{background:url('/templates/cocoagardens/images/shared/icons/minus.svg') center / contain no-repeat;opacity:0} .availability-block ul:not(.price-list).open .plot:before{opacity:1;} .availability-block ul:not(.price-list).open .plot:after{opacity:0;} .availability-block ul:not(.price-list){height:var(--54px);} .availability-block ul.price-list-items li{ border-bottom: 0; } .availability-block ul.price-list-items > li.plot{border-bottom:1px solid var(--green);padding-bottom:var(--16px);max-width:100% !important; position:relative; cursor: pointer;} ul.price-list > li:first-child{display:none;} .availability-block .main-filter-group > .sub-filter-group{display:block;} .availability-block .filter-group > .sub-filter-group{display:none;} .availability-block .main-filter-group, .availability-block .sub-filters{flex-direction:column}; .availability-block .sub-filter-group{height:auto;max-height:0;transition:max-height 0.3s;width:100%;} .availability-block .sub-filter-group.open{max-height:800px;opacity:1;} .availability-block .main-filters, .availability-block .sub-filters{padding:var(--36px) var(--69px) var(--72px);} /* .availability-block h2{text-align:center;margin-bottom:var(--33px);}*/ .availability-block .sub-filters .selected-filters{width:100%} .availability-block ul.price-list-items li a{ --btn__display:flex; --btn__width:100%; --btn__color:var(--green); --btn__border:2px solid var(--green); --btn__border-radius:var(--50px); --btn__background:var(--white); --btn-hover__border:2px solid var(--orange); --btn-hover__background:var(--orange); --btn-hover__color:var(--white); --btn__margin:0; --btn__height:var(--32px); --btn__justify-content:center; --btn__align-items:center; } .availability-block span.mobile{display:inline !important;} .availability-block .price-list-items .view a:after{right:var(--25px);transition:opacity 0.3s;} .availability-block .price-list-items .view a:before{position: absolute;content:'';display:block; width:var(--13px); height:var(--13px); background:url('/templates/cocoagardens/images/shared/icons/arrow-white.svg') center / contain no-repeat; top:var(--6px); right:var(--25px); opacity:0;} .availability-block .price-list-items .view a:hover:after{opacity:0;} .availability-block .price-list-items .view a:hover:before{opacity:1;} } @media (min-width: 720px) and (max-width: 768px) { .availability-block > div > div {display:flex; justify-content: space-between} .plot-row{ /* --ul-li__width:calc(100/768*302vw);*/ } .availability-block ul:not(.price-list), .availability-block ul.price-list-items > li.plot { height:calc(100/768*46vw);padding-top:0; } .availability-block > div > div .availability-wrap:last-child{display:block; } .availability-block > div > div .availability-wrap{width:calc(100/768*302vw);} .availability-block > div > div .availability-wrap:first-child .price-list > .plot-row:nth-child(odd), .availability-block > div > div .availability-wrap:last-child .price-list > .plot-row:nth-child(even){display:none;} .availability-block ul.price-list-items > li.plot {margin-bottom:0; display:flex; justify-content: flex-start; align-items: center;} .availability-block ul.price-list-items > li:not(.plot){padding:calc(100/768*3vw) 0;} .availability-block ul:not(.price-list) .plot:after, .availability-block ul .plot:not(.price-list):before{width:calc(100/768*12vw);} .availability-block ul:not(.price-list).open{ height:calc(100/768*276vw); } .availability-block .price-list-items .view a::before, .availability-block .price-list-items .view a::after{width:calc(100/768*12vw);height:100%; top:0;} .availability-block ul.price-list-items a{ height:calc(100/768*27vw); } } @media (max-width: 720px) { ul.price-list > li:nth-child(2){border-top: 4px solid var(--green);} } .site-plan{ --imagezoom__height:fit-content; --imagezoom__background:var(--lime41-solid); --imagezoom__width:var(--1394px); --sitemap-header__padding:var(--47px) var(--100px); --sitemap-note__padding:var(--30px) var(--100px) 0; --keys__width: var(--526px); position: relative; z-index: 10000; } .site-map-key{ --ul__width:100%; --ul__padding: 0 0 0 var(--37px); --ul-li__color:var(--cream); --ul-li__font:normal normal var(--15px) / var(--20px) var(--bff); --ul-li__margin:0 0 var(--52px); --ul-li--position:relative; --keys-ht__font:normal normal var(--20px) / var(--20px) var(--bff); --keys__padding:var(--81px) var(--66px); } .sitemap-header p{ --p__font:normal normal var(--20px) / var(--24px) var(--bff); } .site-plan .filter-group.type .filter-options{ --options-group__min-width:var(--371px); } .site-plan .filters-wrap .zoom-button-container button.zoomin{ --btn__background: var(--green) url(/templates/cocoagardens/images/shared/gardens/zoom-in.svg) center / contain no-repeat; --btn-hover__background: var(--green) url(/templates/cocoagardens/images/shared/gardens/zoom-in.svg) center / contain no-repeat; } .site-plan .filters-wrap .zoom-button-container button.zoomout{ --btn__background: var(--green) url(/templates/cocoagardens/images/shared/gardens/zoom-out.svg) center / contain no-repeat; --btn-hover__background: var(--green) url(/templates/cocoagardens/images/shared/gardens/zoom-out.svg) center / contain no-repeat; } .site-plan .filters-wrap .zoom-button-container button.reset{ --btn__background: var(--green) url(/templates/cocoagardens/images/shared/gardens/reset.svg) center / 60% no-repeat; --btn-hover__background: var(--green) url(/templates/cocoagardens/images/shared/gardens/reset.svg) center / 60% no-repeat; } @media (max-width: 720px) { .site-plan{ --section__padding:calc(var(--vpad) / 2) calc(var(--vpad) / 2) 0; --sitemap-p__width:100%; --sitemap-p__margin-left:0; --sitemap-header__padding:var(--50px) var(--vpad) var(--vpad); --sitemap-note__padding:var(--30px) var(--vpad) 0; --h1-margin-bottom:var(--20px); } .site-map-key{ --ul__width:100%; --ul__padding: 0 0 0 var(--27px); --ul-li__color:var(--cream); --ul-li__font:normal normal var(--15px) / var(--20px) var(--bff); --ul-li__margin:0 0 var(--27px); --ul-li--position:relative; --keys-ht__font:normal normal var(--20px) / var(--20px) var(--bff); --keys__padding:var(--61px) 0; --key-dot__size:var(--15px); --key-dot__left:var(--n25px); } .sitemap-header{flex-wrap:wrap;} .site-plan-zoom-tools{ --img__width:var(--37-5px); --img__height:var(--49px); } .site-plan .zoom-button-container button{ --btn__margin:0 var(--9px) 0 0; } } .sitemap{display:flex; position:relative} /*.site-plan .zoomwrap{display:flex; align-items: center;}*/ .site-plan-wrap{ position:relative; width:100%; height:fit-content; line-height:0;} .site-plan-wrap .plot{position:absolute; z-index:100;} .site-plan-wrap .plot > button{ mix-blend-mode:darken; width:100% !important; height:100% !important; display:block !important; cursor: pointer; pointer-events: all;} .sitemap-header{display: flex; padding:var(--sitemap-header__padding); align-items:center;} .sitemap-note{padding:var(--sitemap-note__padding);} .sitemap-header p{width:var(--sitemap-p__width, var(--304px));margin-left: var(--sitemap-p__margin-left, var(--86px));} .site-map-key{width:var(--keys__width, var(--526px)); padding:var(--keys__padding);} .site-map-key span{display: block} .site-map-key .house-type{font:var(--keys-ht__font); margin-bottom:var(--keys-ht__margin-bottom, var(--16px));} .site-map-key li{position:relative} .site-map-key li:before{content:''; position: absolute; width:var(--key-dot__size, var(--25px)); height:var(--key-dot__size, var(--25px)); top:var(--n3px); left:var(--key-dot__left, var(--n37px)); display:block; border-radius:50%;} .site-map-key li.the-ouse:before{background-color:#b48180;} .site-map-key li.the-foss:before{background-color:#F39558;} .site-map-key li.the-bootham:before{background-color:#00506b;} .site-map-key li.the-lendal:before{background-color:#799299;} .site-map-key li.the-clifford:before{background-color:#B86496;} .site-map-key li.the-walmgate:before{background-color:#24443a; border: 1px solid var(--cream);} /*.site-plan-wrap button{background:black; opacity: 0.5;}*/ .site-map-key li.the-micklegate:before{background-color:#F6CE54;} .site-plan .zoom-button-container{width:fit-content;position:absolute; top:var(--61px); left:var(--103px); z-index: 100} .site-plan-zoom-tools{margin-bottom:var(--19px);} .site-plan-zoom-tools,.site-plan-zoom-tools > div{display:flex; align-items:flex-end;} .site-plan-zoom-tools span{height:fit-content;} .site-plan .zoom-button-container button{background-color:var(--orange) !important; border-radius:50%;} .keys button:hover span{transform:scale(1.1)} .popup-data{display:none;} @media (max-width: 720px) { .site-plan .zoomwrap img, .site-plan .zoomwrap, .site-plan .imagezoom{ display: block; width: var(--1030px); height: var(--593px); min-width: var(--1030px); max-width:var(--1030px); object-fit:unset; } .site-plan .zoomwrap{ width:100%; min-width:100%;} .site-plan .zoom-button-container{width:fit-content;position:absolute; top:var(--30px); left:var(--30px); z-index: 100} .site-plan.popup-open img, .site-plan.popup-open .sitemap-header, .site-plan.popup-open .zoom-button-container{opacity:0.5 !important;} .site-plan.popup-open .plot-popup img{opacity:1 !important;} .site-map-key li:before{top:0;} } /*POPUPS*/ .plot-popup{ --popup__padding:var(--40px) var(--42px); --ul__margin:0; --ul-li__height:auto; --ul-li__margin: 0 0 var(--7px); --btn__margin:auto 0 0; cursor:default; --p__font:normal normal var(--20px) / var(--20px) var(--bff); --p-margin-bottom:0.5em; --popup__width: var(--371px); } .plot-popup .btn{ --btn-hover__border:var(--border-width) solid var(--orange); } .plot-popup img{ --img__width:var(--69px); --img__height:var(--64px); --img__object-position:cover; --img__margin:0 var(--21px) 0 0; } .plot-popup .popup-close{ --btn__width:var(--22px); --btn__height:var(--22px); --btn__background:transparent url('/templates/cocoagardens/images/shared/icons/close-white.svg') center / contain no-repeat; --btn-hover__background:var(--btn__background); --btn__position:absolute; --btn__top:var(--42px); --btn__right:var(--57px); cursor:pointer; } .plot-popup h2.plot-number{ font: normal normal var(--34px) / var(--34px) var(--hff); margin-bottom:var(--10px); text-transform: none; } .plot-popup h2.plot-name, .plot-popup li{ font: normal normal var(--20px) / var(--20px) var(--bff); text-transform: none; } .site-plan .zoom-wrap{position:relative} .plot-popup {display:none;position:fixed;top:40%;left:var(--popup__left, 27%);padding:var(--popup__padding);width:var(--popup__width, var(--371px));height:fit-content;box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.75);} .plot-popup.active{display:flex; flex-direction:column;z-index:100000;mix-blend-mode:none;} .plot-popup .popup-header{display:flex;border-bottom:1px solid var(--green); padding-bottom:var(--22px);} .plot-popup .popup-body{padding:var(--22px) 0 var(--22px)} .plot-popup .popup-availability{border-top:1px solid var(--cream); border-bottom:1px solid var(--cream); padding:var(--20px) 0;} .plot-popup .popup-availability p{text-transform:uppercase} @media (max-width: 720px) { .plot-popup{ --popup__padding:var(--27px) var(--27px) var(--45px); --popup__width:var(--248px); --popup__top:var(--n170px); --popup__left:calc(50% - var(--popup__width) / 2); --p__font:normal normal var(--12px) / var(--12px) var(--bff); --ul-li__margin:0 0 var(--13px) 0; } #content-wrap .plot-popup .btn{ --btn__margin:var(--27px) 0 0 0; --btn__width:100%; min-width:fit-content; } .plot-popup .popup-body { padding: 0; } .sitemap{flex-wrap: wrap;} .site-map-key{width:100%;} .plot-popup{top:20%;} .plot-popup .popup-header{ padding-bottom:var(--13px);} /* .plot-popup .popup-body{display:none;}*/ .site-plan .zoomwrap .plot-popup img{ width:var(--46px); min-width:var(--46px); height:var(--43px); object-fit: contain; --img__margin:0 var(--15px) 0 0; line-height: 0; } .plot-popup h2.plot-number{ font:var(--h3); margin-bottom:var(--14px); line-height: 0.85em !important; } .plot-popup h2.plot-name, .plot-popup li{ font: normal normal var(--12px) / var(--12px) var(--bff); } .plot-popup .popup-close{ --btn__width:var(--15px); --btn__height:var(--15px); --btn__background:var(--green) url('/templates/cocoagardens/images/shared/icons/close-white.svg') center / contain no-repeat; --btn-hover__background:var(--btn__background); --btn__top:var(--10px); --btn__right:var(--15px); z-index: 10000000; } .plot-popup:after{bottom:var(--n10px); left:var(--40px);} .plot-popup .popup-availability{padding:var(--13px) 0; margin-bottom:var(--12px);} } .plot-body{ --section__padding: var(--64px) var(--100px) var(--142px); --h1__padding-bottom:var(--50px); --h1-margin-bottom:var(--33px); --h2-margin-bottom:var(--15px); --imagezoom__height:var(--710px); --column__width:50%; --ul__padding:var(--131px) 0 0 var(--20px); --ul-li__margin:0 0 var(--25px); } .plot-body .price-area h2:last-child{ --h2-margin-bottom:var(--77px); } .plot-body .image-desc{ --img__height:var(--587px); --img__object-fit:cover; --columns__justify-content:space-between; } .plot-body .hero-image{ --column__width:var(--702px); } .plot-body .desc{ --column__width:var(--852px); --ul__padding:0; --ul-li__margin:0 0 var(--13px); --ul-li__font:var(--button-font); --ul-li__height:var(--25px); --column__display:flex; --column__flex-flow:column; } .plot-body .beds, .plot-body .bath{ --ul-li__padding:0 0 0 var(--40px); --ul-li-background:url('/templates/cocoagardens/images/shared/icons/beds.svg') left center / var(--28px) var(--15px) no-repeat; } .plot-body .bath{ --ul-li-background:url('/templates/cocoagardens/images/shared/icons/baths.svg') left center / var(--26px) var(--25px) no-repeat; } .plot-body .undertabs .btn{ --btn__margin:0 auto var(--37px); } .plot-body .backbutton.btn{ --btn__back-icon: url('/templates/cocoagardens/images/shared/icons/arrow-back.svg') var(--20px) center / var(--42px) var(--28px) no-repeat; --btn__background:var(--white) var(--btn__back-icon); --btn__border:2px solid var(--green); --btn__color:var(--green); --btn-hover__border:2px solid var(--green); --btn-hover__color:var(--green); --btn-hover__background:var(--cream) var(--btn__back-icon); --btn__padding:0 var(--34px) 0 var(--90px); --btn__margin:0 0 var(--78px); --btn__width:fit-content; } .floorplan-tab .compass{ --img__position: absolute; --img__top: var(--141px); --img__left: var(--65px); --img__width: var(--80px); --img__height: var(--118px); z-index:10; } @media (max-width: 720px) { .plot-body{ --section__padding: var(--59px) var(--vpad) var(--100px); --h1__padding-bottom:var(--22px); --h1-margin-bottom:var(--12px); --h2-margin-bottom:var(--2px); --imagezoom__height:var(--479px); --column__width:100%; --columns__flex-flow:row wrap; --ul__padding:var(--76px) 0 0; --ul-li__margin:0 0 var(--14px); --column__padding:0; } .plot-body img.compass{ --img__top: 0; --img__left: auto; --img__right: var(--11px); --img__width: var(--44px); --img__height: var(--66px); } .plot-body .price-area h2:last-child{ --h2-margin-bottom:var(--29px); } .plot-body .desc{ --column__width:100%; --ul-li__margin:0; --ul-li__font:var(--p1); --ul-li__height:var(--25px); } .plot-body .image-desc{ --img__height:var(--251px); --img__margin:0 0 var(--32px); } .plot-body .beds, .plot-body .bath{ --ul-li__padding:0 0 0 var(--38px); --ul-li-background:url('/templates/cocoagardens/images/shared/icons/beds.svg') left center / var(--18px) var(--10px) no-repeat; } .plot-body .bath{ --ul-li-background:url('/templates/cocoagardens/images/shared/icons/baths.svg') left center / var(--17px) var(--16px) no-repeat; } .plot-body .backbutton.btn{ --btn__back-icon: url('/templates/cocoagardens/images/shared/icons/arrow-back.svg') var(--9px) center / var(--19px) var(--12px) no-repeat; --btn__font:normal normal var(--10px) / var(--14px) var(--bff); --btn__height:var(--22px); --btn__margin:0 auto var(--37px); min-width:fit-content !important; --btn__padding:0 var(--15px) 0 var(--42px); } } .plot-body .page-header > h1{border-bottom:2px solid var(--green);padding-bottom:var(--h1__padding-bottom);} .plot-body #tabsection{height:var(--imagezoom__height);margin-bottom:var(--35px);} .plot-body .floorplan-tab{position:relative;opacity: 0; overflow: hidden; transition: opacity 0.66s ease-in-out, height 0.66s ease-in-out; max-height:0px;} .plot-body .floorplan-tab.active{opacity: 1; max-height: 100%;} .plot-body .floorplan-tab:not(.active){ pointer-events: none;} .plot-body .disclaim{font:var(--button-font)} .price-area > h2 {font:var(--h2v2);color:var(--green);} .plot-body .image-desc{display:flex;flex-flow:row wrap;margin-bottom:var(--156px);} .plot-body li span:first-child{width:var(--260px);display: inline-block} .plot-body .zoomwrap img { height:var(--523px); width: auto; max-height: 100%; line-height: 0;} .plot-body .zoom-button-container{position:absolute;z-index:10000; top:var(--131px)} .plot-body .desc .offer-extra{margin-top: auto;} .plot-desc li{line-height: var(--30px);} @media (min-width: 721px) { .plot-body #tabsection li{font-size: 0.8em;} } @media (max-width: 720px) { .plot-desc li{line-height: var(--25px);} .plot-body .image-desc{margin-bottom:var(--56px);} .plot-body #tabsection{height:fit-content;} .plot-body .zoom-button-container {position:relative; order:2; padding:0; top:unset} .plot-body .zoomwrap{order:1;} .plot-body ul.column{order:3;} .plot-body li span:first-child{width:var(--78px);white-space: normal;} .plot-body .zoom-button-container:after{top: 0; left: auto; right:0; width: var(--44px); height: var(--66px);} .plot-body #tabsection li span{width:100%; display: block;} .plot-body #tabsection li span br.mobile{display: none;} } /*COLUMNS BLOCK*/ section.house-stats-block { --columns__justify-content:space-between; --column__align-items:flex-end; --column__display:flex; --section__padding:var(--109px) var(--200px) var(--219px) var(--263px); } section.house-stats-block .house-left{ --column__width:var(--672px); } section.house-stats-block .house-right{ --column__width:var(--696px); } @media (max-width: 720px) { section.house-stats-block { --columns__flex-flow:row wrap; --column__display:flex; --section__padding:var(--54px) var(--vpad); } section.house-stats-block .house-left{ --column__width:100%; margin-bottom:var(--50px); } section.house-stats-block .house-right{ --column__width:100%; } } section.house-stats-block svg{max-width:100%;height:auto;} section.house-stats-block .house-right svg #Path_3849, section.house-stats-block .house-right svg #Path_3850, section.house-stats-block .house-right svg #Path_3851, section.house-stats-block .house-right svg #Path_3852{ fill:#475856 !important; } section.house-stats-block text{font-family: var(--bff) !important; letter-spacing:normal} section.house-stats-block text#left-house-stat, section.house-stats-block text#rh-bottom-right-stat, section.house-stats-block text#rh-bottom-left-stat, section.house-stats-block text#rh-top-right-stat{font-family: var(--hff) !important; letter-spacing:0.3em !important;} section.house-stats-block .house-right svg #Path_3849:hover, section.house-stats-block .house-right svg #Path_3850:hover, section.house-stats-block .house-right svg #Path_3851:hover, section.house-stats-block .house-right svg #Path_3852:hover, section.house-stats-block .house-right svg #Path_3849.active, section.house-stats-block .house-right svg #Path_3850.active, section.house-stats-block .house-right svg #Path_3851.active, section.house-stats-block .house-right svg #Path_3852.active{ fill:#15302d !important; } section.house-stats-block .house-right svg text{pointer-events: none;}section.tab-slide-block{ --tab-slide-header__padding:var(--86px) var(--100px) var(--92px); --h1-margin-bottom:var(--67px); --tab-slide-tab__max-width:var(--1380px); --tab-height:var(--835px); --tab-slide-height:var(--tab-height); --tab-wrap__padding:0 var(--288px); } section.tab-slide-block .tab-slider .tab-wrap{ --copy__color:var(--cream); } section.tab-slide-block .tab-wrap .btn{ --btn__border:2px solid var(--cream); --btn__color:var(--cream); --btn__background:transparent; --btn__width:var(--325px); --btn-hover__border:2px solid var(--cream); --btn-hover__background:var(--cream); --btn-hover__color:var(--purple); --btn__display:inline-flex; --btn__margin:0 var(--12px); } section.tab-slide-block .tab-slider{ --slick-arrow-right:var(--n66px); --slick-arrow-left:var(--n66px); --slick-arrow-top:var(--380px); } @media (max-width: 720px) { section.tab-slide-block{ --tab-slide-header__padding:var(--49px) var(--vpad) var(--51px); --h1-margin-bottom:var(--32px); --tab-slide-tab__max-width:var(--307px); --tab-height:var(--380px); --tab-slide-height:var(--tab-height); --tab-slide__padding:var(--30px) var(--vpad) var(--20px); --slider-p__font: normal normal var(--15px) / var(--18px) var(--bff); --tab-wrap__padding:0 var(--vpad); } section.tab-slide-block .tab-wrap .btn{ --btn__width:var(--237px); --btn__margin:0 auto var(--10px); } section.tab-slide-block .tab-slider{ --slick-arrow-right:var(--n26px); --slick-arrow-left:var(--n26px); --slick-arrow-top:var(--162px); } } section.tab-slide-block .header-container{padding:var(--tab-slide-header__padding);} section.tab-slide-block h2.h1{text-align: center;} section.tab-slide-block .tab-buttons-wrap{ display:flex; justify-content:center; align-items: center; } section.tab-slide-block .tab-buttons{margin-bottom:var(--92px);} section.tab-slide-block .tabs-container{height:var(--tab-height)} section.tab-slide-block .tab-slider{margin:0 auto;max-width:var(--tab-slide-tab__max-width);height: var(--tab-slide-height); width:100%;} section.tab-slide-block .tabs-wrap{position:relative; transition: opacity 0.66s ease-in-out;height:0px; max-height:0px; padding:var(--tab-wrap__padding);} section.tab-slide-block .tabs-wrap.active{opacity: 1; height: var(--tab-slide-height);max-height:100%;} section.tab-slide-block .tabs-wrap:not(.active){ pointer-events: none;} section.tab-slide-block .tab-slider .tab-wrap{padding:var(--tab-slide__padding, var(--140px) 0 var(--75px));height: var(--tab-slide-height);display:flex; flex-flow:column; justify-content: space-between;} section.tab-slide-block .tab-slider .tab-wrap > *{max-width:var(--908px); margin:0 auto; display:block;color:var(--copy__color);} section.tab-slide-block .tab-slider .tab-wrap .copy p{color:var(--copy__color);} section.tab-slide-block *{text-align: center;} section.tab-slide-block .tab-slider .tab-wrap > .buttons{display:flex; justify-content: center; align-items: center} /*section.tab-slide-block .tab-slider .tab-wrap > h2{margin-bottom:var(--16px);}*/ section.tab-slide-block .tab-dots-wrap{height:var(--134px);width:100%;margin-top:var(--n133px);position:relative} section.tab-slide-block .tab-copy-wrap{padding:var(--131px) 0 var(--162px);} section.tab-slide-block .tab-copy-wrap .copy{max-width:var(--908px); margin: 0 auto var(--76px);} section.tab-slide-block ul.slick-dots{position:absolute; bottom:var(--46px);margin:0;z-index:2;} @media (max-width: 720px) { section.tab-slide-block .tab-wrap .buttons{flex-wrap: wrap; width:100%;} section.tab-slide-block .tab-wrap .buttons{flex-wrap: wrap; width:100%;} section.tab-slide-block .tab-dots-wrap{height:var(--54px);width:100%;margin-top:var(--n54px);position:relative} section.tab-slide-block .tab-copy-wrap{padding:var(--29px) var(--vpad) var(--28px);} section.tab-slide-block .tab-copy-wrap .copy{max-width:100%; margin: 0 auto var(--32px);} section.tab-slide-block .tab-wrap p:not(:last-child){margin-bottom: 1em;} section.tab-slide-block ul.slick-dots{bottom:var(--18px);} section.tab-slide-block {flex-wrap:wrap} } .offers-block{text-align:center;} .offers-block .header-container{ padding:var(--88px) var(--hpad) var(--102px); --h1-margin-bottom:var(--75px); --copy__width:var(--1080px); --copy__margin: 0 auto; } .offers-block .columns{ padding: var(--100px) var(--149px); --columns__justify-content:space-between; --column__width:31.5%; --column__padding:var(--75px) var(--55px); } .offers-block .columns h2{font-size:var(--45px); line-height:1.2em; margin-bottom:var(--35px)} .offers-block .columns p{margin-bottom:1em;} .offers-block .offers-btn-wrap{ display:flex; justify-content:center; padding-bottom: var(--100px);} .offers-block .offers-btn-wrap .btn{ --btn__border:2px solid var(--cream); --btn__color:var(--cream); --btn__background:transparent; --btn__width:var(--325px); --btn-hover__border:2px solid var(--cream); --btn-hover__background:var(--cream); --btn-hover__color:var(--purple); --btn__display:inline-flex; --btn__margin:0 var(--12px); } .offers-block .offer-number{width:var(--45px); height:var(--45px); background: var(--orange); border-radius: 50%; display:flex; color:var(--cream); justify-content:center; align-items: center; margin:0 auto var(--45px);} @media (max-width: 720px) { .offers-block .header-container{ padding:var(--49px) var(--vpad) var(--51px); --h1-margin-bottom:var(--32px); --copy__width:100%; } .offers-block .columns{ padding:var(--49px) var(--vpad) var(--20px); flex-flow:column; --columns__justify-content:space-between; --column__width:100%; --column__padding:var(--30px) var(--20px); --column__margin-bottom:var(--30px); } .offers-block .columns h2{font:var(--h2); line-height:1.2em; margin-bottom:var(--25px)} .offers-block .offers-btn-wrap{ flex-flow:column; padding-bottom: var(--40px);} .offers-block .offers-btn-wrap .btn{ --btn__width:var(--237px); --btn__margin:0 auto var(--10px); } .offers-block .offer-number{width:var(--30px); height:var(--30px); margin:0 auto var(--25px);} }/* GOOGLE MAP ========================================================== */ section.google-map{ --h2-margin-bottom:var(--35px); --map__width:66%; --map__min-height:var(--810px); --section__padding:var(--123px) var(--150px) var(--146px); --p__font:var(--p1); --img__width:100%; --img__height:var(--312px); --map-info__width:32%; --location-info__border:2px solid var(--black); --location-info__padding:0 0 var(--58px); --subcat__font:normal normal var(--25px) / var(--25px) var(--bff); --map-slider__height: var(--444px); --map-slider__padding:var(--51px) 0; --map-keys__padding: var(--6px) 0; } .location-info-subcat{ --img__width:var(--33px); --img__height:var(--33px); --img__margin:0 var(--22px) 0 0; } @media (max-width: 720px) { section.google-map{ --map__width:var(--304px); --map__min-height:var(--400px); --map__margin-bottom:var(--35px); --h2-margin-bottom:var(--20px); --section__padding:var(--56px) var(--vpad); --img__height:var(--206px); --map-info__width:100%; --location-info__padding:0 0 var(--30px); --subcat__font:var(--p1); --subcat__bg-size:var(--20px); --subcat__padding-left:var(--25px); --subcat__margin-bottom:var(--22px); --subcat__padding-top:var(--13px); --location-info__margin-bottom:var(--20px); --map-slider__height:var(--250px); --map-slider__padding:var(--26px) 0; --map-keys__height: auto; --map-keys__padding:var(--6px) 0 var(--26px); } .location-info-subcat{ --img__width:var(--20px); --img__height:var(--20px); --img__margin:0 var(--11px) 0 0; } } .location-info-subcat.yellow{ --drop__color:#fbc962; } .location-info-subcat.orange{ --drop__color:#ff9754; } .location-info-subcat.red{ --drop__color:#c5553e; } .location-info-subcat.blue{ --drop__color:#16334f; } .location-info-subcat.green{ --drop__color:#abc27e; } .location-info-subcat.purple{ --drop__color:#8d2e73; } body.iOS #location-map{display:none;} .location-info-text, .slick-slide > .location-info-text{width:100%;} .location-info-subcat{font:var(--subcat__font);} .location-info-text{overflow-y: auto; height:100%;} .map{display: flex;justify-content:space-between; flex-flow:row wrap;} body.iOS #map{display:none;} #google-map {width:var(--map__width,100%);height:var(--map__min-height);min-height:var(--map__min-height,var(--fh));margin-bottom:var(--map__margin-bottom, unset);border:var(--map__border, unset);} .map-info{width:var(--map-info__width);height:var(--map__height);display: flex; flex-direction: column;} .map-info .slider{height:var(--map-slider__height); border-bottom:var(--location-info__border); border-top:var(--location-info__border); cursor:w-resize;} .map-info .map-keys{height:var(--map-keys__height, var(--366px)); border-top:var(--location-info__border); padding:var(--map-keys__padding);} .map-info .location{ height: var(--map-slider__height); padding:var(--map-slider__padding); display:flex; flex-direction: column} .location-info-subcat{padding-top:var(--subcat__padding-top, var(--20px)); text-transform:uppercase; display:flex; align-items:center;position:relative; cursor: pointer;} .location-info-subcat.empty{cursor:auto; opacity:0.4} .location-info-subcat.selected img{ -webkit-filter: drop-shadow(0 0 var(--8px) var(--drop__color)); filter: drop-shadow(0 0 var(--8px) var(--drop__color)); } .map-zoom-wrap{margin:var(--25px);} .map-zoom-button{background: var(--orange) url(/templates/cocoagardens/images/shared/icons/zoomin.svg) center / 55% no-repeat; width:var(--64px); height:var(--64px); display:inline-flex; justify-content: center; align-items: center; border-radius:50%; margin-right:var(--12px); cursor:pointer} .map-zoom-button.mapzoomout{background: var(--orange) url(/templates/cocoagardens/images/shared/icons/zoomout.svg) center / 55% no-repeat; } .map-zoom-button.mapreset{background: var(--orange) url(/templates/cocoagardens/images/shared/gardens/reset.svg) center / 60% no-repeat; } .location-info-subcat.selected:after{display:block; width:var(--15px); height:var(--15px); content:''; bottom:var(--3px); left:var(--3px); background: url('/templates/cocoagardens/images/shared/icons/close.svg') center / contain no-repeat; z-index:1; margin-left: auto;} .map-info .slick-track{height:100%;} .map-info .slick-arrow{height:100%; width: 20%; top:0; background:transparent; border-radius:0; z-index:1000;} .map-info .slick-prev{left:0;} .map-info .slick-next{right:0;} @media (max-width: 720px) { .map{position: relative;} .map-zoom-button{ width:var(--32px); height:var(--32px); } .map-keys{margin-bottom:var(--471px); border-bottom:var(--location-info__border);} #google-map{position:absolute;left:var(--vpad);bottom:calc(var(--map-slider__height) + var(--56px));max-width: var(--map__width);} }