/*Typography*/ /* One family per device class, no exceptions: phone (<768px) -> "Patrick Hand" tablet and up -> "Comic Sans MS" Written with `body *` so every element is covered — an element list always misses something (strong, em, small, option, dt...) and those leak back to the browser default. `!important` is deliberate: several later rules in this file and in app.css/animate.css set their own family at higher specificity, and a client noticing one stray font is the exact failure we are preventing. .fa is excluded and then re-asserted below, or Font Awesome icons render as plain letters. Breakpoints meet at 767.98/768 rather than 767/768 so fractional viewport widths (browser zoom, some Android devices) cannot fall through the gap. "Sans Comic Sans" is the webfont loaded in — it covers Linux, Android and iOS, none of which ship Comic Sans MS. */ body, body *:not(.fa) { font-family: "Comic Sans MS", "Comic Sans", "Sans Comic Sans", cursive !important; } @media screen and (max-width: 767.98px) { body, body *:not(.fa) { font-family: "Patrick Hand", "Comic Sans MS", "Sans Comic Sans", cursive !important; } } /* Font Awesome keeps its own family at every size. `.fa` (0,1,0) never collides with `body *:not(.fa)` (0,1,1) because the :not() excludes it, but the attribute selectors also catch any `fa-*` element missing the base class. */ .fa, [class^="fa-"], [class*=" fa-"] { font-family: FontAwesome !important; } body{color: #222222;font-size: 16px;font-style: normal;font-weight: 400;letter-spacing: 0;line-height: 22px;-moz-osx-font-smoothing: unset;scroll-behavior: smooth;} h1, h2, h3, h4, h5, h6{color: #222222;font-style: normal;font-weight: 400;letter-spacing: 0;} h4, h5, h6{margin-top: 10px;margin-bottom: 10px;} h1{font-size: 38px;line-height: 48px;letter-spacing: 0.5px;} h2{font-size: 30px;line-height: 36px;} h3{font-size: 24px;line-height: 30px;} h4{font-size: 22px;line-height: 26px;} h5{font-size: 20px;line-height: 24px;} h6{font-size: 18px;line-height: 22px;} .subtitle{font-size: 21px;line-height: 26px;} .page-title .subtitle{font-size: 25px;line-height: 31px;} .title, .sub-title{text-align: center;} @media screen and (min-width: 640px) { h1{font-size: 52px;line-height: 70px;} h2{font-size: 50px;line-height: 60px;} .subtitle{font-size: 26px;line-height: 32px;} .page-title .subtitle{font-size: 36px;line-height: 44px;} } @media screen and (min-width: 801px) { h1{font-size: 64px;letter-spacing: 0.5px;line-height: 80px;} } /* Above 801px nothing grew, so on a 27"+ display the headline read as a caption floating in a huge photo. These two steps carry it up to ultrawide and 4K. */ @media screen and (min-width: 1600px) { h1{font-size: 84px;line-height: 100px;} h2{font-size: 60px;line-height: 72px;} .page-title .subtitle{font-size: 44px;line-height: 54px;} } @media screen and (min-width: 2400px) { h1{font-size: 104px;line-height: 124px;} h2{font-size: 72px;line-height: 86px;} .page-title .subtitle{font-size: 54px;line-height: 66px;} } /*Default Colors*/ .bg-red, .bg-red .section-title{background-color: #7c1d17;color: #fff;} .header-main,.footer-bar{background-color: #650000;} /* Keyboard users land on this first and can jump the nav. Off-screen until focused — visible to assistive tech, invisible to everyone else. */ .skip-link{position:absolute;left:-9999px;top:0;z-index:10000;background:#650000;color:#fff;padding:12px 20px;text-decoration:none;} .skip-link:focus{left:0;} /*Returning Elements*/ section {position: relative;min-height: 100px;} a, a:hover, a:active{color: #650000;} .gaia-button, .btn-primary{color: #650000;font-size: 16px;font-weight: 700;line-height: 22px;border: 2px solid #650000;background-color: transparent;border-radius: 0;padding: 12px 25px;margin-bottom: 0;max-width: 100%;position: relative;text-align: center;text-decoration: none;transition: all 0.3s ease 0s;vertical-align: middle;white-space: nowrap;} .gaia-button:hover, .gaia-button:active, .btn-primary:hover, .btn-primary:active{color: #fff;background-color: #650000;} .frame{border: 10px solid #ffffff;box-shadow: 10px 10px 20px 0 rgba(109, 55, 23, 0.2);} /*Animations*/ @media screen and (max-width: 767px) { .animated {animation-duration: 0s;} } @media screen and (min-width: 768px) { .animated {animation-delay: 0.2s;} } /*Mobile Visibility*/ @media screen and (max-width: 512px) { *{box-shadow: none!important;} } @media screen and (max-width: 767px) { .mobile-hide-element{display: none!important;} .mobile-hide-bg{background-image: none!important;} } @media screen and (min-width: 1024px) { .large-screen-hide-element{display: none!important;} } @media screen and (max-width: 1000px) { .facebook.mobile-hide-element{display: none!important;} } /*Section Backgrounds*/ .parallax-section {background-attachment: fixed;} #banner {background-repeat: no-repeat;background-position: right top;display: flex;position: relative;} /* .row here is also .container, which is position:relative — so it, not #banner, is what .main-row-overlay anchors to. It must stretch the full hero or the tint only covers the text block. Default align-items:stretch does that; the centring then happens one level in. */ #banner > .row {width: 100%;display: flex;align-items: center;} #banner > .row::before, #banner > .row::after {display: none;} #banner > .row > .small-12 {width: 100%;} @media only screen and (orientation:landscape) { /* 100vh on a 5K panel is a 2880px wall of photo before any content. Cap it so tall displays still show what is below the fold. */ #banner {height: 100vh;max-height: 1100px;} } @media only screen and (orientation:portrait) and (max-width: 767px) { /* height:auto means the flex centring has nothing to centre inside, so the hero text starts at y=0 — underneath the 57px fixed header and the logo, which hangs to 159px. Pad past the logo so the h1 is actually readable. */ #banner {height: auto;padding-top: 175px;padding-bottom: 45px;} } /* cover + centre are set once here and never repeated, so the media queries below only ever swap the FILE. Forcing one file with !important made every phone download the desktop image; cover and responsive picking are not in conflict — the !important was. */ #banner { background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url("../images/gaiahero_small.jpg"); } @media only screen and (min-width: 480px) { #banner {background-image: url("../images/gaiahero_medium.jpg");} } @media only screen and (min-width: 1024px) { #banner {background-image: url("../images/gaiahero_large.jpg");} } @media only screen and (min-width: 1440px) { #banner {background-image: url("../images/gaiahero_xlarge_2x.jpg");} } @media only screen and (orientation:portrait) and (min-width: 768px) { /* 50vh is short enough that the flex-centred h1 lands at ~141px, under the logo which hangs to 159px. Padding pushes the centre clear of it. */ #banner {height: 50vh;padding-top: 130px;} } #holiday-home { min-height: 100vh; max-height: 1100px; background-size: cover; background-position: center center; background-repeat: no-repeat; /* 59KB on a phone instead of the 815KB 2400w file. */ background-image: url("../images/gaia-holiday-home-480w.jpg"); } @media only screen and (min-width: 480px) { #holiday-home {background-image: url("../images/gaia-holiday-home-800w.jpg");} } @media only screen and (min-width: 1024px) { #holiday-home {background-image: url("../images/gaia-holiday-home-1200w.jpg");} } @media only screen and (min-width: 1600px) { #holiday-home {background-image: url("../images/gaia-holiday-home-2400w.jpg");} } .stackcolumn { min-height: 100vh; background-image: none !important; background-color: #ffffff !important; } @media all and (min-width: 1024px) and (orientation:landscape) { .stackcolumn{padding-top:15vh!important;} } #bynight { background-repeat: no-repeat; background-position: center center; background-size: cover; background-image: url("../images/gaia-by-night-590w.jpg"); } @media only screen and (min-width: 480px) { #bynight {background-image: url("../images/gaia-by-night-800w.jpg");} } @media only screen and (min-width: 1024px) { #bynight {background-image: url("../images/gaia-by-night-1200w.jpg");} } @media only screen and (min-width: 1600px) { #bynight {background-image: url("../images/gaia-by-night-2400w.jpg");} } @media screen and (max-width: 767px) { #welcome, #testimonials, #food-drinks, #facilities, #location{padding-top: 60px;} #welcome, #facilities, #contact{padding-bottom: 60px;} } /* Small screens are 2-3x DPR, so the 590w file was upscaled roughly 2x and looked soft. Bump the source per band; 800w is the balance for phones on mobile data. */ @media only screen and (max-width: 479px) and (min-resolution: 2dppx) { #bynight{background-image: url("../images/gaia-by-night-800w.jpg");} } @media only screen and (min-width: 480px) and (max-width: 1023px) and (min-resolution: 2dppx) { #bynight{background-image: url("../images/gaia-by-night-1200w.jpg");} } @media screen and (min-width: 768px) { #welcome, #testimonials, #food-drinks, #facilities, #location, #contact{padding-top: 100px;} #welcome, #facilities, #contact{padding-bottom: 100px;} #bynight{height: 450px;padding-top: 225px;padding-bottom: 225px;} } /* The photo is 590x306 (1.93:1) but this box was 390x332 (1.18:1) on phones and 768x450 on tablets, painted with cover + background-attachment:fixed. `fixed` sizes the image against the viewport rather than the box, so 61-76% of the picture was cropped away -- phones showed three torsos with the heads cut off. contain shows the whole frame; attachment must drop to scroll or contain would still measure against the viewport (and fixed is janky or ignored on iOS and Android anyway). aspect-ratio replaces the fixed height so the section ends exactly where the photo does, instead of leaving an empty maroon band. Declared after the min-width:768 block so it overrides that height at equal specificity. Capped at 1023px so desktop keeps its full-bleed parallax band. Measured crop above the cap: 1024px still loses 31% (a landscape iPad Pro or a small laptop), 1366px and up lose only 8%. Raise this cap to 1024 if the 1024 crop matters more than the parallax effect there. */ @media screen and (max-width: 1023px) { #bynight{ height: auto; aspect-ratio: 590 / 306; padding-top: 0; padding-bottom: 0; background-attachment: scroll; background-size: contain; } } /*Grid Elements*/ .row{max-width: 100%!important;} .columns .row{width: 100%;margin:0 auto;} .container::before, .container::after{content: " ";display: table;} .container::after{clear: both;} .container{width: 100%;margin: 0 auto;padding: 15px;position: relative;} .page-header .container, .footer-bar .container, #holiday-home .container{padding: 0;} @media screen and (max-width: 480px) { .container .columns{padding-right: 0;padding-left: 0;} } @media screen and (min-width: 768px) { .container{width: 750px;} } @media screen and (min-width: 1024px) { .container{width: 970px;} } @media screen and (min-width: 1200px) { .container{width: 1170px;} } /* 1170px left 1135px of dead gutter each side on a 34" ultrawide. Let the sections use the width; the menu card text is capped separately so lines still stay readable. */ @media screen and (min-width: 1600px) { .container{width: 1440px;} } @media screen and (min-width: 2400px) { .container{width: 1760px;} } @media screen and (min-width: 1600px) { .menucard .text-inner{max-width: 420px;margin-left: auto;margin-right: auto;} } /*Header*/ .page-header{position: fixed;width: 100%;display: block;z-index:5000;} .header-main{position: relative;text-align: right;width: 100%;z-index: 100;} .logo-wrap{float: left;position: absolute;top: 15px;} .site-logo {width: 144px;display: block;text-align: center;transition: all 0.8s ease-in-out 0s;} .site-logo img{border: 5px solid rgba(255, 255, 255, 0.5);border-radius: 50%;transition: all 0.8s ease-in-out 0s;} /* #650000 is the header/footer maroon, at 0.4 over the hero photo. */ #banner .main-row-overlay {bottom: 0;left: 0;position: absolute !important;right: 0;top: 0;z-index: 2;background-color: rgba(101, 0, 0, 0.4);} #banner .col-inner {position: relative;z-index: 10;} /* Vertical placement comes from the flex centring on #banner now, so no hand-tuned top margin that only lines up at one viewport height. */ .page-title{text-align: center;margin-top: 0;margin-bottom:5px;} .page-title h1{text-shadow: 2px 2px 0 #333;color: #ffffff;margin-bottom: 40px;} .page-title .subtitle{color: #fff;text-shadow: 2px 2px 0 #333;margin-top:5px;} /* max-width keeps the fixed 315px rule inside the padded column on 320px phones, where 15px padding + 315px would otherwise push 10px past the viewport. */ #banner .divider{width: 315px;max-width: 100%;margin-bottom: 10px;animation-delay: 0.4s;border-bottom: 2px solid #7c1d17;margin: 0 auto;padding-top: 25px;animation-delay: 0.4s;} @media screen and (max-width: 767px) { .sticky .site-logo{margin-top: -15px;width: 91px;transition: all 0.8s ease-in-out 0s;} .sticky .site-logo img{border:0;transition: border 0.8s ease-in-out 0s;} } /*Navigation*/ .primary-navigation{margin-top: 0;} @media screen and (max-width: 1023px) { .page-header{background-color:#650000;} .nav-wrap{max-width: 100%;} /* min-width/height take it to the 44px touch-target minimum; it measured 39x45. */ .mobile-nav-button{font-size: 34px;line-height: 34px;color: #c58f8f;margin-top: 12px;padding-bottom: 10px;padding-right: 10px;text-align: right;min-width: 48px;min-height: 48px;} .mobile-nav-button.is-active{color:#fff;} .primary-navigation > ul {list-style: outside none none;} .primary-navigation > ul > li {list-style: outside none none;font-size:140%;text-align:center;line-height:2;padding:4px 20px;} /* The li is tall enough, but the anchor inside it was only 30px high, so the actual tap target missed the 44px minimum. Blocking it out fills the row. */ .primary-navigation > ul > li > a {color: #ffffff;display: block;min-height: 44px;line-height: 44px;} .primary-navigation > ul > li:first-child{margin-top:50px;transition: margin-top 0.8s ease-in-out 0s;} .sticky .primary-navigation > ul > li:first-child{margin-top:0;transition: margin-top 0.8s ease-in-out 0s;} } @media screen and (min-width: 1024px) { .nav-wrap{float: left; margin-left: 25%; max-width: 78%;} .primary-navigation > ul {font-size: 16px;font-style: normal;font-weight: 400;list-style: outside none none;margin: 0 auto;padding: 0;} .primary-navigation > ul > li {padding: 0 15px;float: left;position: relative;list-style: outside none none;} /* Sits 3px under the text baseline box, so it tracks the link padding. */ .primary-navigation > ul > li > a::after {bottom: 27px;background: #ffffff none repeat scroll 0 0;transition: all 0.2s ease 0s;content: "";height: 1px;left: 50%;position: absolute;width: 0;} /* Padding sets the maroon bar height: 30 + 22 line-height + 30 = 82px. */ .primary-navigation > ul > li > a { margin: 0; padding: 30px 0; color: #ffffff; line-height: 22px; transition: all 0.2s ease 0s; display: block; float: left; position: relative; font-size: 17px; } .primary-navigation > ul > li:first-child > a {margin-left: 0;} .primary-navigation > ul > li > a:hover {color: #ffffff;} .primary-navigation > ul > li:hover a:after, .primary-navigation > ul > li.current-menu-item a:after, .primary-navigation > ul > li.current-menu-ancestor a:after {width: 100%;margin-left: -50%;} } /*WhatsApp pill*/ /* #075E54 is WhatsApp's own dark brand colour. Their signature #25D366 gives white text only 1.98:1 — below the 3:1 floor even for graphics — so the dark brand green is used instead. Still unmistakably WhatsApp, and 7.67:1. */ .wa-pill{position: fixed;right: 20px;bottom: 60px;z-index: 9998;display: inline-flex;align-items: center;gap: 10px;min-height: 48px;padding: 0 20px;border-radius: 999px;background-color: #075E54;color: #fff;text-decoration: none;box-shadow: 0 4px 14px rgba(0,0,0,0.28);transition: transform 0.2s ease, background-color 0.2s ease;} .wa-pill:hover, .wa-pill:active{background-color: #128C7E;color: #fff;transform: translateY(-2px);} .wa-pill:focus-visible{outline: 3px solid #fff;outline-offset: 3px;} .wa-pill .fa{font-size: 24px;line-height: 1;} .wa-pill__label{font-size: 16px;line-height: 1;white-space: nowrap;} /* Narrow screens: collapse to a circle, but keep the 48px touch target. */ @media screen and (max-width: 767px) { .wa-pill{padding: 0;width: 56px;height: 56px;justify-content: center;bottom: 20px;} .wa-pill__label{position: absolute;left: -9999px;} } @media (prefers-reduced-motion: reduce) { .wa-pill{transition: none;} .wa-pill:hover, .wa-pill:active{transform: none;} } .scroll-to-top{z-index: 9999;opacity: 0;transition: opacity 0.5s linear;border: 2px solid transparent;border-radius: 50%;bottom: 0;display: block;height: 45px;position: fixed;right: 20px;text-align: center;text-shadow: 1px 1px 4px grey;text-decoration: none;width: 45px;} .scroll-to-top i{outline: medium none; display: block;color: #fff;font-size: 22px;line-height: 45px;position: relative;top: -1px;} .scroll-to-top.show{opacity: 1;transition: opacity 0.5s linear;} /* On phones the WhatsApp pill becomes a 56px circle at bottom:20, so it occupied 20-76px up from the bottom while this button sat at 0-45px -- a 45x25px collision with back-to-top drawn on top of the chat button. Stack it above the pill instead (20 + 56 + 10px gap) and centre it on the wider circle. */ @media screen and (max-width: 767px) { .scroll-to-top{bottom: 86px;right: 26px;} } /*Welcome Section*/ .welcome-text, .awards{text-align: center;} /* Capped by height, not width. The two badges are different shapes -- Lonely Planet is 160x180 (0.89) and the Tripadvisor 2025 badge is 395x500 (0.79) -- so matching widths left their bottom edges 20px apart. Matching heights lines the row up. */ .awards img{max-height:113px;max-width:100%;width:auto;height:auto;} @media screen and (min-width: 640px) { .welcome-text{padding:0 45px 20px;} .awards img{max-height:158px;} } @media screen and (min-width: 768px) and (max-width: 1023px) { .awards{margin-bottom: 40px;} } /*Testiominals Section*/ /* The caption is position:absolute, so its width:100% resolves against the nearest positioned ancestor — .orbit-container, which is wider than the slide. That pushed it past the viewport edge and .orbit-container's overflow:hidden then cut the text off. Make the slide the containing block. */ #testimonials .orbit-slide{position:relative;} #testimonials .orbit-caption{width:100%;text-align:center;top:0;background-color:rgba(0,0,0,0);} #testimonials .orbit-caption p{display:block;color: #e8e8e8;font-size: 18px;font-weight: 500;line-height: 26px;} #testimonials .orbit-caption strong{font-size: 26px;font-weight: 700;line-height: 34px;} @media screen and (max-width: 479px) { #testimonials .orbit-container{padding:0 30px;height:170px!important;} #testimonials .orbit-caption{height:170px;} } @media screen and (min-width: 480px) and (max-width: 767px) { #testimonials .orbit-container{padding:0 30px;height:140px!important;} #testimonials .orbit-caption{height:140px;} } @media screen and (min-width: 768px) { #testimonials .orbit-container{padding:0 50px;height:90px!important;} #testimonials .orbit-caption{height:90px;} } /*Food & Drinks Section*/ .menucard{width:100%;background-color: #fff;padding: 15px 0;font-size: 16px;line-height: 22px;color: #222;text-align: center;} .foodtitle{background:url(../images/gaia-chicken-salad-660w.jpg) no-repeat 50% 50% !important;background-size: cover !important;height: 180px;} .foodtitle h2.title, .foodtitle .subtitle{color: #fff;text-shadow: 2px 2px 0 #333;} .fooditem h3.title{color: #222;font-size: 40px;line-height: 50px;} .fooditem .subtitle{color: #7c1d17;font-size: 18px;line-height: 26px;} .foodimage{background:url(../images/gaia-sereen-garden-750w.jpg) no-repeat 50% 50% !important;background-size: cover !important;min-height: 240px;} .menucard.socialstream{padding: 10px 0;overflow: hidden;} .menucard.facebook{display: none;} .facebook-section{padding:80px 20px;background:#f8f6f1;} .facebook-container{width:100%;max-width:500px;margin:0 auto;text-align:center;} .facebook-container h3{margin-bottom:24px;font-size:32px;line-height:1.2;} .facebook-container iframe{display:block;width:100%;min-height:650px;background:#fff;border-radius:12px;} .menucard .text-inner{padding: 0 20px;} .tripadvisor .widSSP{width:100%!important;} .tripadvisor .widSSPData{border: 0!important;} @media screen and (max-width: 767px) { .menucard.foodtitle{width:100%;border: 0;height:180px;box-shadow: none;} } @media screen and (min-width: 481px) { .menucard{width: 50%;} } @media screen and (min-width: 640px) { .menucard{border: 10px solid #efece5;box-shadow: 0 0 5px 0 #666;height: 380px;} } @media screen and (min-width: 768px) { .menucard, .menucard.foodtitle{width: 33.3333%;padding-top: 10px;} } @media screen and (min-width: 1024px) { .menucard{width: 25%;} .menucard.facebook{display: inline-block;} .menucard.foodtitle, .menucard.foodimage{width: 50%;padding-top: 20px;} } @media screen and (min-width: 1280px) { .menucard, .menucard.foodtitle, .menucard.foodimage{width: 20%;} } @media screen and (min-width: 1400px) { .menucard, .menucard.foodtitle{padding-top: 35px;} } /*Facilities Section*/ .feature{text-align: center;} .feature .fa, .feature h3, .feature p{color: #fff;} .feature .fa{line-height: 61px; font-size:40px;margin-bottom: 16px;} .feature h3{font-size:22px;line-height: 29px;} .feature p{font-size: 18px;line-height: 23px;} @media screen and (min-width: 640px) { .feature h3{font-size:28px;line-height: 36px;} .feature p{font-size: 20px;font-style: italic;line-height: 26px;} } /*Location Section*/ #location .section-title{padding-bottom: 40px;} #openmap{background-color: #e5e3df;width: 100%;height: 500px;overflow: hidden;position: relative;} /** fix infowindow dimensions **/ #openmap .unyson-shortcode-map-content {min-width: 274px;padding: 5px 4px;} #openmap img {max-width: none !important;} /*Contact Section*/ .contact-info, .contact-form{box-shadow: 0 10px 20px 0 rgba(109, 55, 23, 0.2);} .contact-bottom{display:none;} .contact-info{background-color: #ffffff;padding: 45px 35px 0 45px;} .contact-info .title{text-align: left;margin-bottom: 15px;} .contact-info .social-icons{padding-bottom: 40px;margin-left: 50%;} .contact-info .social-icons a:hover, .contact-info .social-icons a:active{color:#650000;opacity:0.8;} .contact-info .social-icons .fa{font-size: 24px;} .contact-image{display:block;width:100%;height:210px;object-fit:cover;margin:18px 0 0;border:4px solid #ed1c24;} .contact-social{text-align:center;margin-top:35px;} .contact-social h3{margin:0 0 14px;font-size:23px;font-weight:400;} .contact-social-links{display:flex;justify-content:center;gap:22px;} .contact-social-links a{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:8px;color:#fff;background:#1877f2;box-shadow:0 4px 10px rgba(0,0,0,.25);} .contact-social-links a:nth-child(2){background:#d6249f;} .contact-social-links a:nth-child(3){background:#010101;} .contact-social-links a:nth-child(4){background:#287dfa;} /* Two of the four icons are inline SVG now; block removes the inline-baseline gap that would otherwise push them a couple of pixels below the Font Awesome glyphs. */ .contact-social-links svg{display:block;} .contact-form{background-image: url("../images/pattern.jpg");background-position: left top;background-repeat: repeat;background-size: auto auto;padding: 15px 35px 30px 25px;} .cform{padding:30px 20px 30px 40px;background:#fff;border-radius:12px;} .cform .title{color:#650000;font-size:24px;line-height:30px;margin:0 0 10px;text-align:left;} .cform label{display:block;margin:14px 0 5px;color:#650000;font-weight:700;} .cform input,.cform textarea{display:block;width:100%;padding:11px 12px;border:1px solid #c5a49b;border-radius:4px;background:#fff;} .cform input:focus,.cform textarea:focus{border-color:#650000;outline:2px solid rgba(101,0,0,.15);} .cform .gaia-button{margin-top:20px;color:#fff;background-color:#650000;border:2px solid #650000;} .cform .gaia-button:hover,.cform .gaia-button:focus{color:#650000;background-color:#fff;} .cf-item{padding: 10px 0 0;} /* Labels sit on the light .contact-form pattern, so they need the dark brand red (10.27:1), not the pale tone used on the maroon header/footer. */ .cf-item label{color: #7c1d17;font-size: 16px;line-height: 22px;margin-bottom: 5px;display:inline-block;} /* Honeypot field — off-screen rather than display:none, which more bots skip. */ .cf-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;} .cf-item input, .cf-item textarea{padding: 8px 12px;border: 1px solid #c5c5c5;} .cf-item textarea{height: 150px;} /* Feedback slot for the Web3Forms submit. The theme shipped these rules with no matching element; the form now renders into it. */ #successmessage{margin: 16px 0 0;} #successmessage span{display: block;padding: 10px;border: 2px solid green;border-radius: 4px;text-align: center;color: green;} #successmessage span.is-error{border-color: #a12222;color: #a12222;} @media screen and (max-width: 767px) { /* MUST be `clip`, never `hidden`. Foundation sets body{height:100%}; add overflow-x:hidden on top of that and overflow-y computes to `auto`, which turns body into its own scroll container. The document then stops scrolling, window.scrollY is pinned at 0, and the jQuery(window).scroll handler in app.js never fires -- killing the sticky header and the back-to-top button on every phone. `clip` clips without ever creating a scroll container. Safari < 16 ignores it and falls back to visible, which is harmless: nothing currently bleeds past the viewport. */ html,body{overflow-x:clip;} #main .row,#main .container,#main .text-box{max-width:100%;} #main p{overflow-wrap:break-word;} #contact{position:static;} #contact .container{padding-left: 0;padding-right: 0;} #contact .contact-info{padding-left: 40px;padding-right:40px;} .social-sharing, .social-sharing-title{text-align: center;} .contact-form{padding:15px 20px 30px;} } @media screen and (min-width: 768px) { #contact{position:relative;} #contact .container{position:relative;display:flex;align-items:stretch;} #contact .contact-info,#contact .contact-form{display:flex;flex-direction:column;} #contact .contact-info{float:none;} #contact .contact-form{float:none;} #contact .cform{flex:1;} .contact-info{background-image:none;min-height:630px;} .contact-info .social-icons{padding-bottom: 250px;} .contact-bottom{display:none;} .social-sharing, .social-sharing-title{text-align: center;} } .social-sharing { margin: 15px 0 30px 0; } .social-sharing a { /* Icons measured 40x40 on touch devices; 44x44 is the accessible minimum, so pad the hit area without changing how big the icon looks. */ display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0 10px; vertical-align: middle; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease; text-decoration: none; } .social-sharing a:hover, .social-sharing a:focus { transform: scale(1.15); opacity: 0.95; outline: none; } .social-svg-icon { display: block; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); border-radius: 10px; } /*Holiday Home Section*/ #holiday-home .stackcolumn{padding: 15px 15px 0;text-align: center;background-color: #ffffff !important;background-image: none !important;} .stackcolumn .text-box{padding-top:20px;} .stackcolumn .title{font-size: 1px;line-height: 20px;color: #f9f9f9;} .stackcolumn .subtitle{font-size: 26px;line-height: 32px;margin-bottom: 10px;} .stackcolumn .button-div{padding: 30px 10px 55px;} @media screen and (min-width: 767px) { #holiday-home .stackcolumn{padding: 55px 15px 0;background-color: #ffffff !important;background-image: none !important;} } @media screen and (min-width: 1024px) { .stackcolumn .text-box{padding-top:0;} } /*Footer*/ .footer-bar{padding: 10px 0;position: relative;} .copyright{position: relative;float: left;color: #c58f8f;font-size: 15px;font-weight: 100;text-align: center;} .copyright a{color: #c58f8f;} .copyright a:hover, .copyright a:focus{color: #fff;} .lastupdated{position: relative;float: right;color: #c58f8f;font-size: 15px;font-weight: 100;} @media screen and (max-width: 767px) { .copyright, .lastupdated{float: none;display: block;text-align: center;} .lastupdated{margin-top: 6px;} } @media screen and (min-width: 767px) { .copyright{text-align: left;} } .small-12.medium-12.large-4.large-offset-8.columns.wow.fadeInUp.stackcolumn.animated, .stackcolumn { background-color: #ffffff !important; background-image: none !important; } .faq-list{max-width:820px;margin:0 auto;padding:0 20px 40px}.faq-list details{border-bottom:1px solid rgba(255,255,255,.35)}.faq-list summary{cursor:pointer;list-style:none;padding:20px 42px 20px 0;position:relative;font-size:1.2rem;font-weight:700}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:'+';position:absolute;right:4px;top:15px;font-size:1.8rem;font-weight:400}.faq-list details[open] summary:after{content:'−'}.faq-list details p{margin:0;padding:0 42px 20px 0;line-height:1.7}