@import "@{parenturl}/wp-less/mixins.less"; @blue: #32a4d5; @orange: #f6871f; @yellow: #ffe100; @caslon: ~"Adobe Caslon, Lusitana"; @myriad: ~"Myriad Pro, PT Sans"; @easing: cubic-bezier(0.76, 0, 0.24, 1); header#masthead { background-image:url('/wp-content/uploads/2020/09/header.svg'); background-position:center; background-repeat:no-repeat; padding:0 25px; @media (min-width:769px) { .grid { .max-width(1500px); grid-template-areas: "logo phone" "menu menu"; align-items:center; justify-items:center; #logo { grid-area: logo; justify-self: flex-start; } #phone { grid-area: phone; justify-self: flex-end; } nav { grid-area: menu; } ul.nav { display:grid; grid-auto-flow:column; grid-gap:25px; } } } @media (max-width:768px) { .grid { display: block; } #logo { margin: 0 auto; } #phone { display: none; } } #logo { max-width:400px; width:100%; height:auto; } #phone { font-size: 26px; span { display: block; } a { font-family: Montserrat; } } @media (max-width:768px) { #responsiveheader { padding: 0; a { width: 115px; } } .navbar.navbar-default { margin: 0 -25px; } } } /* Widget - Beginning Med Spa Banner */ #custom_html-5 { display:block; background-color:#2397b7; text-align: center; } /* End of Med Spa Banner*/ .searchLi { #menuSearch(@height:50px, @mainColor:#000, @backgroundColor:fade(@blue, 20), @iconWidth:44px); p:empty { display:none !important; } > a { padding-left:10px !important; } } #ctt { @media (max-width:768px) { display: none; } .home & { position:absolute; z-index:15; right:0; padding-top:50px; } body:not(.home) & { margin-bottom: 20px; } a { display:block; } } #hero-container { position:relative; figure video { max-height:840px; } #overlay { position:absolute; width:100%; height:100%; top:0; left:0; display:grid; grid-gap:25px; grid-template-columns:1fr 175px 1fr; align-items:center; justify-items:center; padding:25px; transition: 1s transform 1s ease; #hero-text { display:grid; grid-template-columns:auto auto; grid-gap:25px; align-items:center; justify-items:center; html:not(.safari) & { margin-top:-50px; } max-height: 100%; } svg { max-width:20vw; max-height: 56.25vw; > g > g { > g { .clip("0 0, 0 0, 0 100%, 0% 100%"); .transition(all, 1s, @easing); body.loaded & { .clip("0 0, 100% 0, 100% 100%, 0% 100%"); } } > path { .translateX(-275px); .transition(all, 1s, @easing); body.loaded & { .translateX(0); } } } } #playWithSound { background-color:#fff; width:175px; height:245px; .font(Montserrat, 400, 16px); text-transform:uppercase; .vertAlign; flex-direction:column; padding-right:3em; position:relative; cursor:pointer; opacity:1; transition: 0.5s opacity ease; &:before { content:' '; display:block; position:absolute; width:10px; height:100%; top:0; left:-10px; box-shadow:0 0 10px #000; } &:after { content:' '; display:block; position:absolute; width:10px; height:100%; top:0; left:0; box-shadow:0 0 10px #000; transform-origin:top left; .rotate(-55.5deg); } .clip("0 0, 100% 50%, 0 100%"); b { .inherit(); .font(inherit, 700, 2em); display:block; } } } h2 { color:@blue; .font(@myriad, 400, 50px); white-space: pre-wrap; text-transform:none; b { color:@orange; .font(@caslon, 700, 1em); text-transform:uppercase; } } &.playedWithSound { #overlay { pointer-events: none; transform: translatex(-100vw); } #playWithSound { opacity: 0 !important; } } @media (max-width:1300px) { #overlay { grid-template-columns: 1fr 130px 385px; #playWithSound { width:130px; height: 180px; font-size: 12px; } } h2 { font-size: 30px; } } @media (max-width:500px) { #overlay { grid-template-columns: 1fr 90px; padding: 10px; #playWithSound { width: 90px; height: 125px; font-size: 8px; } } h2 { font-size: 20px; b { text-transform: capitalize; } } } } #content { background-image:url('/wp-content/uploads/2020/10/background.svg'); background-repeat:no-repeat; background-position:top center; } #section-welcome { padding-top:25px; margin-bottom:~"calc(5vw - -50px)"; display:grid; grid-gap:25px; grid-template-columns:1fr minmax(auto, 960px) 1fr; @media (max-width:768px) { grid-template-columns: 1fr; grid-template-rows: auto auto; .welcome, .npoo { padding: 0 20px; } } &:before { content:' '; } .welcome { padding-top:50px; text-align:center; } h1 { color:#888b8d; .font(Montserrat, 500, 52px); letter-spacing:.2em; margin:0 0 25px; text-transform:uppercase; text-align:right; display:inline-grid; grid-template-columns:auto 2px auto; grid-gap:.25em; align-items:center; justify-items:center; @media (max-width:768px) { font-size: 30px; } @media (max-width:450px) { font-size: 20px; } span { .inherit(); .font(); display:block; width:4em; } hr { background-color:@blue; border:none; width:100%; height:100%; margin:0; } img { margin:.5em 0; } } .npoo { align-self:start; justify-self:center; border:2px solid #828282; border-radius:10px; padding:10px; font-size:28px; > div { font-size:1em; overflow:hidden; background-color:#F5871E; position:relative; &:before { content:' '; display:block; position:absolute; width:100%; height:3.5em; background-color:#25A9E0; z-index:1; } &:after { content:' '; display:block; position:absolute; width:100%; height:100%; top:0; left:0; background-image:url('/wp-content/uploads/2020/10/flower.svg'); background-position:center; background-repeat:no-repeat; z-index:2; opacity:.5; } > * { position:relative; z-index:3; } } h2 { color:#fff; .font(Roboto, 400, 1em); margin:0; height:min-content; text-align:center; text-transform:uppercase; padding:.375em 1em .25em; .vertAlign; b { .inherit(); .font(@caslon, 400, 1.25em); display:block; } } .npoo-copy { padding:25px 10px 35px; p { color:#fff; line-height:1; text-align:center; b { color:inherit; } } } > a { background-color:@orange; border:1px solid @orange; color:#fff; .font(Roboto, 400, 24px); text-align:center; text-transform:uppercase; width:10em; height:2em; margin:0 auto; .vertAlign; margin-top: -1em; margin-bottom: -1em; position: relative; z-index:10; .translateY(5px); b { .inherit(); .bold(); } &:hover { background-color:#fff; color:@orange; } } .wpcf7 { label { display: none; } .wpcf7-form-control-wrap { width: 100%; } } } } #wpcf7-f1410-p5-o1 { form { margin: auto; } } #section-testimonials { .margin-ends(~"calc(5vw - -50px)"); > div { max-width:1450px; } h2 { background-color:#fff; border:2px solid @yellow; color:#000000; .font(@caslon, 400, 42px); margin-top:0; margin-bottom:-.5em; padding:.5em .5em .4em; text-align:center; text-transform:uppercase; .max-width(18em); position:relative; z-index:5; @media (max-width:768px) { font-size: 30px; } } #testimonials { background-color:#fff; @media (min-width:769px) { .flex; } .testimonial { background-image:url('/wp-content/uploads/2020/10/photo-coming-soon.svg'); background-size:cover; background-position:center; max-height:420px; height:56.25vw; position:relative; .su-lightbox { position:absolute; display:block; width:100%; height:100%; top:0; left:0; .vertAlign; .play { background-color:fade(@yellow, 80); color:#000; cursor:pointer; display:block; .font(Montserrat, 700, 24px); text-align:center; text-transform:uppercase; .vertAlign; width:4.5em; height:6em; padding-right:1em; .clip("0 0, 100% 50%, 0 100%"); } } } #test-1 { background-image: url('/wp-content/uploads/2020/11/b35i5465_e.jpg'); } #test-2 { background-image: url('/wp-content/uploads/2020/11/b35i5419_e.jpg'); } #test-3 { background-image: url('/wp-content/uploads/2020/11/b35i5494_e.jpg'); } @media (min-width:769px) { .testimonial { opacity:.3; flex:1; .transition(all, .5s, @easing); } &:not(:hover) .testimonial.active, .testimonial:hover { opacity:1; flex:2; } } } } #section-reviews { background-color:@blue; padding:0 25px; .margin-ends(~"calc(5vw - -50px)"); @media (max-width:768px) { padding: 0; } #testimonial_rotator_wrap_1077 { margin:0; padding:0 50px; .max-width(1500px); #testimonial_rotator_1077 { background-color:#2397b7; } } .testimonial_rotator_prev, .testimonial_rotator_next { background-color:@yellow; width:25px; height:75px; } .testimonial_rotator_prev { .clip("100% 0, 100% 100%, 0 50%"); } .testimonial_rotator_next { .clip("0 0, 0% 100%, 100% 50%"); } .testimonial_rotator_description { padding:50px 25px 30px; .testimonial_rotator_quote { position: relative; color:#fff; .font(@caslon, 400, 28px); .max-width(960px); margin-bottom:25px; @media (max-width:768px) { font-size: 18px; } &::before { content: '“'; position: absolute; top: -20px; right: 100%; font-size: 100px; font-family: Georgia; opacity: 0.3; } } .longform_hr { display:none; } .testimonial_rotator_author_info { margin:0; padding:0; p { color:@yellow; .font(@caslon, 400, 36px); text-align:center; text-transform:uppercase; } } } } #section-highlights { .margin-ends(~"calc(5vw - -50px)"); display:grid; grid-gap:2px; grid-template-columns:repeat(4, 1fr); .highlight { background-image:url('/wp-content/uploads/2020/10/photo-coming-soon.svg'); background-size:cover; background-position:center; display:grid; grid-template-rows:3em 1fr; font-size:40px; position:relative; &:nth-of-type(1) { background-image: url('/wp-content/uploads/2020/10/cosmetic-highlight.jpg'); } &:nth-of-type(2) { background-image: url('/wp-content/uploads/2020/10/implants-highlight.jpg'); } &:nth-of-type(3) { background-image: url('/wp-content/uploads/2020/10/sedation-highlight.jpg'); } &:nth-of-type(4) { background-image: url('/wp-content/uploads/2020/10/apnea-highlight.jpg'); } h2 { color:#fff; .font(Montserrat, 400, 1em); height:3em; letter-spacing:.1em; margin:0; text-align:center; text-transform:uppercase; .vertAlign; @media (max-width:768px) { font-size: 30px; height: auto; } b { .inherit(); .font(@caslon); color: #000; display:block; } } .copy { padding:0 25px 25px; > div { .max-width(540px); } p { color:#fff; } a.learn-more { color:#fff; display:block; width:10em; margin:25px auto 0; .font(Montserrat, 300, 18px); padding:.75em 0; text-align:center; text-transform:uppercase; background-color:@blue; outline:1px solid #fff; outline-offset:7px; &:hover { background-color:#fff; color:@blue; } } } } .highlight { &:nth-of-type(4) { @media (min-width: 769px) { &:not(:hover).active, &:hover { margin-left: -93px; } } } z-index:1; width:100%; height:100%; margin:0; .transition(all, .5s, @easing); h2 { background-color:fade(@blue, 80); .transition(all, .5s, @easing); } .copy { opacity:0; background-color:fade(@blue, 80); .transition(all, .5s, @easing); } } &:not(:hover) .highlight.active, .highlight:hover { @media (min-width:769px) { z-index:10; width:~"calc(100% - -100px)"; height:~"calc(100% - -100px)"; margin:-50px; } @media (min-width:1301px) { &:nth-of-type(1) { margin-left: 0; } &:nth-of-type(4) { margin-right: 0; } } @media (max-width:1300px) and (min-width:769px) { &:nth-of-type(odd) { margin-left: 0; } &:nth-of-type(even) { margin-right: 0; } } h2 { background-color:fade(@orange, 80); } .copy { opacity:1; background-color:fade(@orange, 80); } } @media (max-width:1300px) and (min-width:769px) { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); } @media (max-width:768px) { display: block; .highlight { h2 { background-color:fade(@orange, 80); } .copy { opacity:1; background-color:fade(@orange, 80); } } } } #section-difference { background-color:#f9f7ed; .padding-ends(25px); .margin-ends(~"calc(5vw - -50px)"); h2 { color:#000; .font(Montserrat, 400, 40px); margin:0 0 50px; text-align:center; text-transform:uppercase; @media (max-width:768px) { font-size: 24px; } b { .inherit(@orange); .font(@caslon, 400, 1.5em); border:1px solid #fbad18; display:inline-block; padding:.25em .5em .2em; } } > div > a { background-color:@orange; border:1px solid @orange; color:#f9f7ed; display:block; .font(@caslon, 400, 32px); padding:.5em .5em .4em; width:10em; text-align:center; text-transform:uppercase; margin:50px auto 0; max-width:100%; @media (max-width:768px) { font-size: 20px; } &:hover { background-color:#f9f7ed; color:@orange; } } #testimonial_rotator_wrap_1139 { margin:0; padding:0 50px; overflow:visible; } .testimonial_rotator_quote { text-align:center; } .testimonial_rotator_prev, .testimonial_rotator_next { width:30px; height:75px; i { display:block; width:30px; height:75px; background-color:#828282; opacity:1; &:before { display:none !important; } } } .testimonial_rotator_prev i { .clip(~"calc(100% - 5px) 0, 100% 0, 5px 50%, 100% 100%, calc(100% - 5px) 100%, 0% 50%"); } .testimonial_rotator_next i { .clip(~"0 0, 5px 0, 100% 50%, 5px 100%, 0 100%, calc(100% - 5px) 50%"); } } #section-team { .margin-ends(~"calc(5vw - -50px)"); .padding-sides(25px); h2 { color:@blue; .font(Montserrat, 400, 40px); margin:0; text-align:center; text-transform:uppercase; @media (max-width:768px) { font-size: 30px; } b { .inherit(@orange); .font(@caslon, 400, 1.5em); vertical-align:middle; -webkit-text-stroke:0; @media (max-width:768px) { font-size: 1em; } } } .slick-list { overflow: visible; } .slick-track { display:grid; grid-auto-flow:column; align-items:center; justify-items:center; > div { padding:0 25px; .vertAlign; &:focus { outline:none; } div { background-color:#fff; padding:4.5%; border-radius: 10px; box-shadow:1px 1px 5px fade(#000, 50); } &:nth-child(odd) div { .rotate(5deg); } &:nth-child(even) div { .rotate(-2deg); } } } } #section-explore { .margin-ends(~"calc(5vw - -50px)"); h2 { background-color:@blue; color:#fff; .font(Montserrat, 500, 42px); margin:0; text-align:center; padding:.5em; @media (max-width:768px) { font-size: 30px; } b { .inherit(); .bold(); text-transform:uppercase; } } ul { margin:0; padding:0; list-style-type: none; display:grid; grid-template-columns:repeat(2, 1fr); li { &:nth-child(4n+2), &:nth-child(4n+3) { a { background-color:#f9f7ed; } } a { .inherit(#404041); .font(); display:block; padding:1.5em; text-align:center; .transition(all, .5s, @easing); &:hover { background-color:@orange; color:#fff; } } } } } #section-insurance { .margin-ends(~"calc(5vw - -50px)"); .max-width(740px); border-radius:10px; overflow:hidden; display:grid; grid-template-rows:auto 1fr; > * { grid-column:1; } img { grid-row:1 / span 2; } h2 { grid-row:1; background-color:fade(#404041, 80); color:#fff; .font(Montserrat, 400, 32px); margin:0; text-align:center; text-transform:uppercase; padding:1em 1em 1.25em; b { .inherit(); .bold(); } } a { grid-row:2; background-color:fade(@orange, 90); color:#fff; .font(Montserrat, 400, 18px); text-align:center; text-transform:uppercase; padding:.75em; align-self:start; justify-self:center; .translateY(-50%); b { .inherit(); .bold(); } &:hover { background-color:fade(#fff, 90); color:@orange; } } } #footer-info { margin-bottom:50px; padding:0 25px; display:grid; grid-gap:25px; grid-template-columns:repeat(3, 1fr); align-items:center; justify-items:center; @media (max-width:768px) { grid-template-columns:1fr; grid-template-rows:repeat(3, auto); } .footer-info { .vertAlign; svg { overflow:visible; fill:none; stroke:@blue; stroke-width:1px; height:58px; width:auto; margin-right:15px; } address, div { color:#000000; .font(~"Myriad Pro, PT Sans", 400, 20px, 1.25); } a { .inherit(); .bold(); } address { white-space:pre-wrap; margin:0; } span { text-transform:uppercase; } } } #footer { display:grid; grid-template-columns:repeat(4, 1fr); @media (max-width:768px) { grid-template-columns: 1fr; grid-template-rows: 1fr 2fr; } .scrollingParallax { background-image:url('/wp-content/uploads/2020/10/footer.jpg'); grid-column:1 / span 3; } #contactus { background-color:#f9f7ed; padding:50px 25px 25px; > div { .max-width(360px); } h2 { background-color:@blue; color:#fff; .font(@caslon, 400, 36px); letter-spacing:.1em; text-align:center; text-transform:uppercase; margin:0 0 25px; padding:.5em .5em .4em; } } #socialMedia { text-align:center; a { display:inline-block; padding:10px; vertical-align:top; line-height: 1; margin:8px; } svg { height:32px; width:auto; path { fill:#888b8d; fill-opacity:.8; transition:fill-opacity .3s; -webkit-transition:fill-opacity .3s; } } a:hover svg path { fill-opacity:1; } } .wpcf7 .better-input { .wpcf7-form-control-wrap { position: relative; border-bottom: 2px solid #888b8d; margin-bottom:10px; display:block; padding-top: 1.2em; color:#888b8d; .font(~"Roboto", 400, 16px); } .betterInput { .inherit(); .font(); *::placeholder { color: rgba(0,0,0,1); opacity: 0.7; } *:-ms-input-placeholder { color: rgba(0,0,0,1); } *::-ms-input-placeholder { color: rgba(0,0,0,1); } *:-moz-input-placeholder { color: rgba(0,0,0,1); } *::-moz-input-placeholder { color: rgba(0,0,0,1); } * { color:#888b8d; border:0; padding: 1px 2px; resize:none; } label { .transition(.3s, all, @easing); } input, select, textarea { color:#888b8d; font-size:inherit; font-weight:inherit; font-family:inherit; } textarea { height:150px; } select { display:block; width:100%; margin-bottom:5px; } label { position: absolute; width:100%; top:0; transform: translateY(1.6em); left:0; pointer-events: none; color:#888b8d; font-size:inherit; font-weight:inherit; font-family:inherit; } .req { color:#FF4136; .transition(.3s, color, @easing); } *:focus:not(:placeholder-shown) + label, *:focus + label, *:focus:not(:placeholder-shown) + label .req, *:focus + label .req { color:#888b8d; // Inputting display: none; } *:not(:placeholder-shown) + label, *:not(:placeholder-shown) + label .req { color:#ddd; // Inputted display: none; } *:focus + label, *:not(:placeholder-shown) + label { transform: translateY(0); font-size: .8em; display: none; } } input[type="submit"] { border:none; display:block; margin:25px auto; height: 2em; width: 10em; .font(Roboto, 300, 20px); letter-spacing:.1em; background-color:@orange; border:1px solid @orange; color:#f9f7ed; &:hover { background-color:#f9f7ed; color:@orange; } } } } #betterFooter; #menu-footer-menu { @media (min-width:901px) { position: relative; &::after, &::before { content: ''; position: absolute; top: 0; z-index: 0; height: 100%; width: 1px; background-color: @blue; opacity: 0.5; } &::before { left: 33%; } &::after { right: 33.1%; } } > li { &:not(:first-child) > a { border-top:1px solid @blue !important; } > a { color:@orange; } } } #secondary { .widget-title { padding: 10px 30px !important; line-height: 1.2em; } .fa-google, .fa-facebook { font-size: 40px; margin: 0 10px; } #requestAppt { margin-bottom: 20px; a { width: 100%; text-transform: uppercase; } } .wpcf7 { label, textarea, input { font-size: 16px; } } } .mfp-title { display: none; } @media all and (min-width: 769px) { .page-template-default #content .container.main-content-area {max-width: 1260px;} }