/*
Theme Name: The Woodlands Resort Theme
Version: 1.0.0
Author: O'Rourke Hospitality
Text Domain: thewoodlandsresort
*/
/* Turnip loads via Adobe Typekit link in header.php (https://use.typekit.net/hpg0bxq.css) */
@font-face {
font-family: 'Idlewild';
src: url('./fonts/idlewild-medium.woff') format('woff');
font-weight: 400;
font-style: normal;
}
/* :focus {
outline: 2px solid #007BFF;
outline-offset: 2px;
} */
body {
font-family: "Turnip", sans-serif;
font-weight: 390;
color: #595959;
background: #fff;
font-size: 18px;
}
p {
font-family: "Turnip", sans-serif;
font-size: 18px;
font-weight: 390;
line-height: normal;
margin-bottom: 30px;
letter-spacing: 0.015em;
color: #595959;
}
a {
color: #325C52;
transition: all 0.2s ease-in;
}
a i {
transition: all 0.2s ease-in-out;
}
a:hover {
text-decoration: none !important;
color: #325C52;
}
h1 {
font-family: "Idlewild", serif;
font-size: 42px;
font-weight: 400;
color: #325C52;
letter-spacing: 0;
margin-bottom: 25px;
line-height: normal;
}
h2 {
font-family: "Idlewild", serif;
font-size: 40px;
font-weight: 400;
color: #325C52;
letter-spacing: 0;
margin-bottom: 25px;
line-height: normal;
}
h3 {
font-family: "Idlewild", serif;
font-size: 34px;
font-weight: 400;
color: #325C52;
margin-bottom: 30px;
line-height: normal;
}
h4 {
font-family: "Idlewild", serif;
font-weight: 400;
font-size: 28px;
color: #325C52;
letter-spacing: 0;
line-height: normal;
}
h5 {
font-family: "Idlewild", serif;
font-weight: 400;
font-size: 23px;
color: #325C52;
text-align: center;
line-height: normal;
}
h6 {
font-family: "Idlewild", serif;
font-weight: 400;
font-size: 19px;
color: #325C52;
text-align: center;
line-height: normal;
}
.text-light {
color: #F9EDD7 !important;
}
.text-white {
color: #FAFAFA !important;
}
.text-dark {
color: #002B3D !important;
}
header.header-navigation {
position: fixed;
z-index: 99;
top: 0;
left: 0;
text-transform: uppercase;
width: 100%;
transition: all 0.3s ease-in-out;
}
header.header-navigation.scrolled {
background: #325C52e8;
}
/* No Page Hero behind the header (see thewoodlandsresort_no_hero_body_class):
the transparent bar would put white nav text on the white page background, so
give it the Pine bar up front and drop the content below it. */
body.wr-no-page-hero header.header-navigation {
background: #325C52;
}
body.wr-no-page-hero #page {
padding-top: 115px;
}
@media screen and (max-width: 991px) {
body.wr-no-page-hero #page {
padding-top: 180px;
}
}
@media screen and (max-width: 575px) {
body.wr-no-page-hero #page {
padding-top: 165px;
}
}
header.header-navigation .header-container {
padding-top: 10px;
max-width: 1700px;
width: calc(100% - 60px);
margin: 0 auto;
/* transform: translate(-50%); */
}
@media screen and (max-width: 1301px) {
header.header-navigation .header-container {
width: calc(100% - 80px);
}
}
@media screen and (max-width: 991px) {
header.header-navigation .header-container {
width: 100%;
}
.navbar-light {
padding-top: 0 !important;
}
}
header.header-navigation .navbar-nav {
gap: 25px;
justify-content: center;
}
@media screen and (max-width: 1600px) {
header.header-navigation .navbar-nav {
gap: 10px;
}
}
@media screen and (max-width: 1500px) {
header.header-navigation .navbar-nav {
gap: 5px;
}
}
strong {
font-weight: 800;
}
.navbar ul li:before {
content: "";
margin: 0;
}
.button-group {
display: flex;
justify-content: center;
gap: 40px;
}
.button {
font-weight: 700;
font-style: normal;
font-size: 12px;
text-decoration: none !important;
text-align: center;
background: transparent;
color: #325C52;
transition: all .4s ease-in-out;
display: inline-flex;
position: relative;
line-height: 1;
padding: 8px 15px;
height: 40px;
font-family: 'Idlewild';
letter-spacing: 0;
border: 1px solid #325C52;
align-items: center;
justify-content: center;
}
.button--solid-pine {
background-color: #325C52;
color: #FFFFFF;
border-color: #325C52;
}
.button--solid-pine:hover {
background-color: #234038;
border-color: #234038;
}
.button--solid-magnolia {
background-color: #F9EDD7;
color: #325C52;
border-color: #F9EDD7;
}
.button--solid-magnolia:hover {
background-color: #F4D8A4;
border-color: #F4D8A4;
}
.button--solid-maple {
background-color: #F4D8A4;
color: #325C52;
border-color: #F4D8A4;
}
.button--solid-maple:hover {
background-color: #F9EDD7;
border-color: #F9EDD7;
}
.button--outline-pine {
background: transparent;
color: #325C52;
border: 1px solid #325C52;
}
.button--outline-pine:hover {
background-color: #325C52;
color: #FFFFFF;
}
/* Add specific styling for dark buttons */
.button-dark {
border-color: #EEA883;
color: #EEA883 !important;
}
.button-dark:hover {
background: #EEA883;
color: #fff !important;
}
.button-white {
border: 1px solid #fff;
padding: 10px 30px;
color: #fff;
font-family: 'Turnip';
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2.5px;
}
.button-tan {
padding: 14px 30px;
color: #325C52;
font-family: 'Idlewild';
font-weight: 400;
text-transform: uppercase;
background-color: #F4D8A4;
font-size: 12px;
}
.bg-dark {
background-color: #343a40 !important;
}
.navbar-dark * {
color: #fff;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
}
.bg-light {
background-color: transparent !important;
}
/*.navbar-light * {color: #f3e8da;}*/
.navbar-light .navbar-nav .nav-link {
font-family: 'Idlewild';
font-size: 10px;
font-style: normal;
font-weight: 325;
line-height: normal;
color: #fff;
letter-spacing: 0;
padding: 0 5px;
}
.navbar-light .navbar-nav .nav-link:hover {
color: #F4D8A4;
}
@media screen and (max-width: 1500px) {
.navbar-light .navbar-nav .nav-link {
font-size: 10px;
}
}
@media screen and (max-width: 1400px) {
.navbar-light .navbar-nav .nav-link {
font-size: 10px;
}
}
.navbar {
padding: 0;
}
#main-nav .menu-item {
padding: 3px 10px;
}
#main-nav .menu-item .nav-link {
font-family: 'Turnip';
color: #FAFAFA;
font-weight: 300;
border-bottom: 2px solid transparent;
text-align: center;
color: #fff;
letter-spacing: 1.5px;
}
#main-nav .menu-item:first-of-type {
padding-left: 0;
}
#main-nav .menu-item:last-of-type {
padding-right: 0;
}
.navbar-nav .dropdown-menu {
background: #F4D8A4 !important;
}
.navbar-nav .dropdown-menu li {
padding: 0 !important;
}
.navbar-nav .dropdown-menu .nav-link {
border: 0 !important;
color: #325C52 !important;
padding: 10px 1rem !important;
}
/* .navbar-nav .dropdown-menu .nav-link:active,
.navbar-nav .dropdown-menu .nav-link:focus,
.navbar-nav .dropdown-menu .nav-link:hover {
color: #fff;
} */
.wsp-pages-list a {
color: #031d2c;
}
.wsp-pages-list a:hover {
text-decoration: underline;
}
.ot-dtp-picker.wide .ot-dtp-picker-form .ot-dtp-picker-button {
font-family: "Idlewild", sans-serif;
font-weight: 700;
font-size: 16px;
background: #E57461;
color: #fff;
border: 0;
text-transform: uppercase;
letter-spacing: 0.075em;
border: none;
margin: 10px 5px;
margin-top: 10px;
margin-right: 5px;
transition: 0.4s all ease-in;
}
.ot-dtp-picker.wide .ot-dtp-picker-form .ot-dtp-picker-button:hover {
filter: brightness(1.1);
color: #fff !important;
text-decoration: none !important;
}
img.ot-logo {
display: none;
}
.image-with-background {
position: relative;
}
.ot-dtp-picker .ot-dtp-picker-selector select {
color: #000 !important;
font-size: 16px !important;
font-weight: 500;
font-family: "Idlewild", sans-serif;
}
span.long-right-arrow {
margin-left: 10px;
}
.ot-dtp-picker .ot-dtp-picker-button {
-webkit-box-shadow: 0 0 0 1px #E57461 !important;
box-shadow: 0 0 0 1px #E57461 !important;
}
.ot-dtp-picker .ot-dtp-picker-button:hover {
-webkit-box-shadow: 0 0 0 1px #E57461 !important;
box-shadow: 0 0 0 1px #E57461 !important;
}
.content-slider {
padding: 60px 0;
}
.button-reservation-custom>span {
font-family: "Idlewild", sans-serif !important;
font-weight: 700 !important;
font-size: 16px !important;
background: #E57461 !important;
color: #F4D8A4 !important;
border: 0 !important;
text-transform: uppercase !important;
letter-spacing: 0.075em !important;
line-height: 18px !important;
border: none !important;
margin: 10px 10px !important;
transition: 0.4s all ease-in !important;
border-radius: 0 !important;
}
.map-img-form {
border-left: 1px solid #b7b9b9;
}
.sign-up-comm .ginput_container {
float: left;
margin-top: 9px !important;
margin-right: 5px;
}
.sign-up-comm .gfield_description {
float: left;
width: auto !important;
clear: none !important;
font-size: inherit !important;
}
.map-address ul {
display: table;
margin: 0 auto;
margin-top: 0px;
margin-top: 40px;
text-align: center;
padding-left: 0;
}
.map-address ul li {
display: inline-block;
padding: 0 20px;
padding-bottom: 0px;
}
.map-address ul li::before {
display: none;
}
.map-address ul li:first-child {
padding-bottom: 20px;
display: block;
}
.meet-request-info .gform_button {
font-size: 16px !important;
}
.map-img-form img {
border: 2px solid #ccc;
}
.both-btn-outer {
position: absolute;
right: 0;
padding-right: 1rem;
}
.first-row-right a.button.btn-head-top {
color: #fff;
padding: 7px 30px !important;
font-size: 16px;
font-weight: 500;
margin: 0;
height: 50px;
width: auto;
display: flex;
align-items: center;
}
@media screen and (min-width: 992px) {
/* nav when fixed */
#main-nav.fixed-top {
background: #bc8f74;
color: #fff;
padding-left: 15px;
padding-right: 15px;
box-shadow: 0 2px 10px 0px rgba(0, 0, 0, 0.3);
}
#main-nav.fixed-top .navbar-nav .nav-link {
color: #fff;
text-shadow: none;
}
#main-nav.fixed-top .navbar-nav .menu-item.active .nav-link,
#main-nav.fixed-top .navbar-nav .menu-item.current-page-ancestor .nav-link,
#main-nav.fixed-top .navbar-nav .menu-item:hover .nav-link {
color: #fff;
border-bottom: 2px solid #fff;
}
/* end nav when fixed */
}
/* nav items on hover */
#main-nav .navbar-nav .menu-item.current-page-ancestor>.nav-link,
#main-nav .navbar-nav .menu-item:hover>.nav-link {
color: #fff;
border-bottom: 2px solid #fff;
text-shadow: none;
}
.navbar-light .navbar-nav .active>.nav-link {
color: #F4D8A4;
border-bottom: 1px solid #F4D8A4;
}
/* end nav items on hover */
#main-nav .navbar-nav {
padding: 0;
}
.logo {
/* margin-top: 90px; */
/* margin-bottom: 20px; */
position: relative;
}
.logo a {
display: block;
position: relative;
}
.logo img {
width: 250px;
max-width: 100%;
}
.directions-link {
font-family: "Idlewild";
font-weight: 700;
color: #f3e8da;
font-size: 18px;
letter-spacing: 0.075em;
}
.directions-link i {
font-size: 25px;
display: inline-block;
vertical-align: middle;
}
.directions-link span {
display: inline-block;
vertical-align: middle;
}
.directions-link:hover {
color: #E57461;
}
.directions-link:hover i {
color: #E57461;
}
#close-nav {
display: none;
}
@media screen and (max-width: 600px) {
.navbar-toggler {
position: relative;
right: auto;
top: auto;
}
}
@media screen and (min-width: 992px) {
#first-row-right.fixed-top {
position: relative;
}
}
.first-row-right .insta-link,
.first-row-right .fb-link {
margin-top: 46px;
margin-right: 15px;
}
.first-row-right .fb-link {
margin-right: 23px;
}
/* Main slider text */
/* Hero heights come from Figma: homepage frame 4191:16 is 1440x900 (100vh at the
design viewport), interior frame 4191:268 is 1440x680 (680/900 = 75.5vh). */
.carousel-module .home-carousel-item {
height: 100vh;
min-height: 450px;
}
.carousel-module .other-pages-carousel-item {
height: 75.5vh;
min-height: 300px;
}
.page-title-area h1 {
font-size: 50px;
padding: 5px 100px;
background: #ffffff;
margin-top: -44px;
color: #325C52;
font-weight: 500;
z-index: 9;
}
.carousel-text {
position: absolute;
z-index: 2;
width: 80%;
}
.carousel-text.hor_left {
left: 10%;
text-align: left;
}
.carousel-text.hor_center {
left: 50%;
text-align: center;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
}
.carousel-text.hor_right {
right: 10%;
text-align: right;
}
.carousel-text.ver_top {
top: 10%;
}
.carousel-text.ver_middle {
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
/* Figma 4191:268 — the hero content block sits 40px off the bottom edge. */
.carousel-text.ver_bottom {
bottom: 40px;
}
.carousel-text.hor_center.ver_middle {
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.carousel-text h3 {
font-family: "Turnip", serif;
font-weight: 300;
font-size: 44px;
color: #F4D8A4;
margin-bottom: 30px;
}
.carousel-text h1 {
font-family: "Idlewild", serif;
font-weight: 300;
font-size: 104px;
color: #E0E0E0;
letter-spacing: 12px;
margin-bottom: 0px;
}
.carousel-text-subtitle {
font-family: "Turnip", serif;
font-weight: 390;
font-size: 18px;
letter-spacing: 1px;
color: #fff;
text-transform: uppercase;
margin-top: 12px;
margin-bottom: 0;
}
.Other-pages-slide .carousel-text h1,
.Other-pages-slide .carousel-text h2 {
font-family: "Idlewild", serif;
font-weight: 400;
font-size: 42px;
letter-spacing: 0;
color: #fff;
text-transform: uppercase;
margin-bottom: 0;
}
/* Figma 4191:268 — 20px between the page title and the chevron. */
.hero-scroll-indicator {
display: flex;
justify-content: center;
margin-top: 20px;
}
.hero-scroll-indicator .icon-down-open-big {
display: inline-block;
width: 8px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
padding: 0;
transform: rotate(45deg);
}
.home .carousel-image:after {
content: none;
}
.carousel-image:after {
background: rgba(0, 0, 0, 0.01);
}
/* Hero slide video: same absolute fill as .carousel-image (css/theme.min.css),
scrim painted on the wrapping .carousel-image--video via inline background,
video sits above it and is cropped like the image would be. */
.carousel-image--video {
background-size: cover;
}
.carousel-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
@media screen and (max-width: 1200px) {
.carousel-text h1 {
font-size: 80px;
letter-spacing: 6px;
}
.carousel-text h3 {
font-size: 42px;
}
}
@media screen and (max-width: 991px) {
.carousel-text h1 {
font-size: 60px;
letter-spacing: 4px;
}
.carousel-text h3 {
font-size: 36px;
}
}
@media screen and (max-width: 767px) {
.carousel-text h1 {
font-size: 48px;
letter-spacing: 3px;
}
.carousel-text h3 {
font-size: 32px;
}
/* Interior hero title tracks the shared mobile scale (wr-css/blocks.css). */
.Other-pages-slide .carousel-text h1,
.Other-pages-slide .carousel-text h2 {
font-size: 32px;
line-height: 1.2;
}
}
@media screen and (max-width: 480px) {
.carousel-text h1 {
font-size: 46px;
letter-spacing: 2px;
}
.carousel-text h3 {
font-size: 28px;
}
.Other-pages-slide .carousel-text h1,
.Other-pages-slide .carousel-text h2 {
font-size: 28px;
}
}
/* Slide side content */
#slider-side-content img.fill-space {
height: auto;
max-width: 80vw;
}
.button-reservation-custom {
display: flex;
justify-content: flex-end;
}
/* Full Width Blocks */
#fullwidth-blocks .image-link-individual {
padding-left: 8px;
padding-right: 8px;
}
#fullwidth-blocks .image-link-individual:first-of-type {
padding-left: 15px;
}
#fullwidth-blocks .image-link-individual:last-of-type {
padding-right: 15px;
}
#fullwidth-blocks .image-link-individual p {
color: #FCF8F1;
font-family: 'Turnip';
font-weight: 100;
font-size: 16px;
line-height: 1.8;
}
#fullwidth-blocks .image-link-individual h3 {
color: #ffffff;
font-family: "Idlewild", serif;
font-size: 35px;
font-weight: 400;
letter-spacing: 1px;
}
.full-width-four .swiper-button-prev:after,
.full-width-four .swiper-rtl .swiper-button-next:after {
content: url('data:image/svg+xml,');
}
.full-width-four .swiper-button-next:after,
.full-width-four .swiper-rtl .swiper-button-prev:after {
content: url('data:image/svg+xml,');
}
.full-width-four .swiper-button-prev,
.full-width-four .swiper-rtl .swiper-button-next {
width: auto;
height: auto;
}
.full-width-four .swiper-button-next,
.full-width-four .swiper-rtl .swiper-button-prev {
height: auto;
width: auto;
}
@media screen and (max-width: 767px) {
.full-width-four .swiper-button-prev:after,
.full-width-four .swiper-rtl .swiper-button-next:after {
content: url('data:image/svg+xml,');
}
.full-width-four .swiper-button-next:after,
.full-width-four .swiper-rtl .swiper-button-prev:after {
content: url('data:image/svg+xml,');
}
}
/* Large Blocks - image_links_section */
#image-links-section .image-link-wrapper-interior {
background: #fff;
}
#image-links-section .image-link-individual p {
color: #53565a;
}
/* Gallery */
.gallery-thumbnail {
display: block;
}
/* section title */
#section-title *:not(.button) {
color: #fff;
}
.custom-overlay {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
background: rgba(0, 0, 0, 0.15);
}
/* Pretty centered content */
#pretty-centered-content {
position: relative;
z-index: 1;
margin-top: 0 !important;
background: url(./images/intro-design.jpg) no-repeat center center;
background-size: cover;
}
/* 45px of border + 16px of margintop of next container */
#pretty-centered-content h2 {}
/* Content Slider */
.content-slider.carousel-module .carousel-item {
height: auto;
}
/* Instagram Feed (Smash Balloon / Instagram Feed Pro) */
#sbi_mod_link,
#sbi_mod_error {
float: none !important;
}
#sb_instagram {
max-width: 1280px;
margin: 40px auto 0;
padding-bottom: 0 !important;
}
#sb_instagram #sbi_images {
gap: 16px;
}
#sb_instagram .sbi_item {
border-radius: 0;
}
#sb_instagram .sbi_photo_wrap {
overflow: hidden;
}
#sb_instagram .sbi_photo {
transition: transform .5s ease;
}
#sb_instagram .sbi_item:hover .sbi_photo {
transform: scale(1.05);
}
/* Same tint + zoom-on-hover language as .gallery-grid-item so the Instagram
strip reads as part of the same photo-grid system, not a bolted-on widget. */
#sb_instagram .sbi_link {
background: rgba(50, 92, 82, 0.75) !important;
transition: opacity .3s ease;
}
#sb_instagram .sbi_caption,
#sb_instagram .sbi_username {
font-family: 'Turnip', sans-serif;
}
#sb_instagram .sbi_follow_btn a,
#sb_instagram .sbi_header_follow_btn {
font-family: 'Idlewild', serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
background-color: #325C52 !important;
border-radius: 0 !important;
border: none !important;
padding: 12px 24px !important;
transition: background-color .2s ease-in;
}
#sb_instagram .sbi_follow_btn a:hover,
#sb_instagram .sbi_header_follow_btn:hover {
background-color: #1B4965 !important;
}
#sb_instagram .sbi_load_btn {
font-family: 'Idlewild', serif;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
border-radius: 0 !important;
border-color: #325C52 !important;
color: #325C52 !important;
}
#sb_instagram .sbi_load_btn:hover {
background-color: #325C52 !important;
color: #ffffff !important;
}
@media screen and (max-width: 767px) {
#sb_instagram {
margin-top: 24px;
}
}
/* Footer */
footer {
color: #ffffff;
font-size: 18px;
font-family: "Turnip", sans-serif;
position: relative;
background: url(./images/footer-design.png) no-repeat center center;
background-size: cover;
}
.footer-main-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: 32px;
padding: 64px 80px;
position: relative;
z-index: 1;
}
.footer-col-brand {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
width: 270px;
}
.footer-logo img {
width: 100%;
height: auto;
}
.footer-social-icons {
display: flex;
gap: 16px;
align-items: center;
}
.footer-social-icons a {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
}
.footer-partner-logos {
display: flex;
gap: 24px;
align-items: center;
justify-content: center;
}
.footer-partner-logos img {
height: 68px;
width: 100px;
object-fit: contain;
}
.footer-col-contact {
display: flex;
flex-direction: column;
gap: 8px;
width: 260px;
font-size: 16px;
}
.footer-col-nav {
display: flex;
flex-direction: column;
width: auto;
}
.footer-col-nav .footer-menu ul {
gap: 10px;
}
.footer-col-connect {
display: flex;
flex-direction: column;
width: 360px;
}
.footer-connect-heading {
font-family: "Idlewild", sans-serif;
font-weight: 700;
color: #f2ede0;
font-size: 16px;
margin: 0;
line-height: 1.4;
}
.footer-bottom-bar {
display: flex;
align-items: center;
justify-content: center;
height: 52px;
position: relative;
z-index: 1;
font-size: 12px;
}
.footer-bottom-nav ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
@media (max-width: 991px) {
.footer-main-row {
flex-direction: column;
align-items: center;
text-align: center;
padding: 48px 24px;
}
.footer-col-connect,
.footer-col-contact,
.footer-col-brand {
width: 100%;
max-width: 360px;
}
}
footer a {
color: #ffffff;
}
footer a:hover {
text-decoration: none !important;
color: #d4d0ca;
}
footer ul {
list-style: none;
margin: 0;
padding: 0;
}
footer ul li {
margin-bottom: 5px;
font-size: 16px;
font-weight: 300;
font-family: "Turnip", sans-serif;
}
footer ul li:last-child {
margin-bottom: 0;
}
#footer-menu a {
font-size: 16px;
font-size: 16px;
line-height: 30px;
letter-spacing: 1px;
font-weight: 500;
text-transform: uppercase;
}
.social-links li {
display: inline-block;
vertical-align: middle;
line-height: 1;
}
.social-links a {
font-size: 22px;
}
footer h3 {
color: #fff;
text-transform: uppercase;
}
footer .footer-menu ul {
display: flex;
flex-direction: column;
}
footer .footer-menu ul li {
width: auto;
padding-right: 10px;
margin-left: 10px;
margin-bottom: 0;
}
footer .footer-menu ul li a {
line-height: 1.5;
}
footer .footer-menu ul li:last-child {
border-right: none;
}
@media (max-width: 767px) {
footer .gform_wrapper .gform_body {
width: 100%;
}
footer .gform_wrapper .gform_body ul {
flex-direction: column;
}
footer .gform_wrapper ul.gform_fields li.gfield {
width: 100%;
margin: 0;
padding: 0;
}
footer .gform_wrapper ul.gform_fields li.gfield.gfield--type-submit {
width: 100%;
margin-top: 10px;
}
}
/*.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=image]):not([type=file]) {line-height: 1 !important;}*/
/* Placeholder text color -- selectors need to be separate to work. */
footer .gform_wrapper input::-webkit-input-placeholder {
color: #595959;
opacity: 0.5;
}
footer .gform_wrapper input:-moz-placeholder {
color: #595959;
opacity: 0.5;
}
footer .gform_wrapper input::-moz-placeholder {
color: #595959;
opacity: 0.5;
}
footer .gform_wrapper input:-ms-input-placeholder {
color: #595959;
opacity: 0.5;
}
#cookie-law-info-bar {
text-align: left;
padding: 8px 15px;
font-size: 14px;
box-shadow: none;
}
#cookie-law-info-bar>span {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center;
-ms-flex-pack: justify;
-webkit-box-pack: justify;
justify-content: space-between;
}
#cookie-law-info-bar>span span:first-of-type {
margin-right: 10px;
}
#cookie-law-info-bar .cli-plugin-button {
margin: 0;
}
/* Contact Form */
#gform_wrapper_1 .top_label input.medium,
#gform_wrapper_1 .top_label select.medium {
width: 100%;
}
#gform_1 li {
padding: 0;
}
#gform_1 label.gfield_label {
font-weight: 400 !important;
}
.gform_wrapper.gravity-theme .ginput_recaptcha {
display: flex;
justify-content: center;
}
/* Sitemap */
.wsp-pages-list {
margin: 0;
padding: 0;
list-style: none;
}
.wsp-pages-list ul {
margin: 0;
padding: 0;
list-style: none;
}
.left-right-image-text h2,
.left-right-image-text p {
color: #325C52;
}
.left-right-image-text .img-holder .main-img {
aspect-ratio: 470/500;
width: 100%;
object-fit: cover;
}
.left-right-image-text .img-holder {
position: relative;
}
.left-right-image-text .img-holder::after {
content: "";
position: absolute;
top: 15px;
left: 15px;
width: calc(100% - 30px);
height: calc(100% - 30px);
border: 1px solid #fff;
}
.left-right-image-text p {
font-family: 'Turnip';
line-height: 1.6;
}
@media screen and (max-width: 767px) {
.left-right-image-text .img-holder {
margin: 60px;
}
}
@media screen and (max-width: 1199px) {
#main-nav .menu-item {
font-size: 14px;
padding-left: 5px;
padding-right: 5px;
}
footer .gform_wrapper input {
padding: 14px 8px !important;
}
}
@media screen and (max-width: 991px) {
.logo {
margin-bottom: 20px;
}
.first-row-left,
.first-row-right {
/*background: #325C52;*/
}
.directions-link {
display: block;
padding: 10px;
}
.button-reservation-custom {
display: block;
width: 50%;
}
.button-reservation-custom a {
line-height: 20px;
float: left;
padding: 20px;
height: 60px;
width: 100%;
}
.navbar-toggler {
background: #EEA883 !important;
color: #fff !important;
text-transform: uppercase;
font-weight: 700;
border-radius: 0;
line-height: 20px;
border: 0 !important;
width: 50%;
float: left;
padding: 20px;
letter-spacing: 2px;
font-size: 17px;
font-family: "Turnip";
font-weight: 400;
height: 60px;
}
.navbar-toggler * {
color: #fff !important;
}
.button-reservation-custom>span {
width: 100% !important;
padding: 6px 5px !important;
margin: 0 !important;
height: 60px !important;
}
.first-row-right .insta-link,
.first-row-right .fb-link {
margin-top: 21px;
}
.logo img {
width: 150px;
max-width: 100%;
}
.first-row-middle {
background: #325C52;
opacity: .9;
padding-top: 20px;
}
#main-nav {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background: #041b2c;
z-index: 99999;
}
#main-nav .navbar-nav {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
#main-nav .menu-item {
padding: 10px 5px;
}
#close-nav {
cursor: pointer;
position: fixed;
z-index: 999999;
font-size: 60px;
right: 30px;
top: 30px;
line-height: 1;
color: #fff;
}
.navbar-light .navbar-nav .nav-link {
color: #fff !important;
}
#slider-side-content img.fill-space {
max-width: 100%;
}
#main-nav .menu-item .nav-link {
text-shadow: none;
}
.map-img-form {
border-left: none;
border-top: 1px solid #b7b9b9;
}
.both-btn-outer {
margin-top: 60px;
align-items: start !important;
position: relative;
padding-right: 0;
}
.both-btn-outer div {
width: 50%;
}
.first-row-right a.button.btn-head-top {
color: #fff;
padding: 7px 12px !important;
font-size: 16px;
font-weight: 700;
margin: 0;
height: 60px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
border-left: 1px solid #bc8f74 !important;
}
}
@media screen and (max-width: 767px) {
#fullwidth-blocks .image-link-individual {
padding-left: 15px !important;
padding-right: 15px !important;
}
h2 {
font-size: 30px;
}
}
@media screen and (max-width: 640px) {
#fullwidth-blocks .image-link-individual h3 {
font-size: 24px;
}
#cookie-law-info-bar {
font-size: 12px;
}
#cookie-law-info-bar>span {
display: block;
}
#cookie-law-info-bar span {
display: block;
width: 100%;
}
#cookie-law-info-bar>span span:first-of-type {
margin-right: 0;
margin-bottom: 10px;
}
.gform_legacy_markup_wrapper input:not([type="radio"]):not([type="checkbox"]):not([type="image"]):not([type="file"]) {
line-height: 1px !important;
}
}
@media screen and (max-width: 380px) {
.button {
padding: 12px;
font-size: 0.9em;
}
.navbar-toggler {
padding: 12px;
font-size: 0.9em;
}
.first-row-right .insta-link,
.first-row-right .fb-link {
width: 24px;
margin-top: 7px;
}
}
.clearfix {
clear: both;
}
.otw-input-wrap {
float: left !important;
margin: 0 !important;
width: 33.3% !important;
}
.otw-bare-bones {
padding-top: 45px;
padding-left: 4%;
padding-right: 4%;
text-align: center;
color: #325C52;
font-size: 18px;
height: 160px;
font-family: "Idlewild";
font-weight: 700;
background: #d4d0ca;
}
.otw-widget-form-wrap label {
text-transform: uppercase;
letter-spacing: 2px;
font-size: 18px !important;
}
.powered-by-open-table {
display: none;
}
.otw-button-wrap input[type="submit"] {
height: 60px;
text-transform: uppercase;
width: 190px;
color: #fff;
border: none;
background: #325C52;
letter-spacing: 2px;
margin-top: 12px;
transition: all 0.4s ease 0s;
}
.otw-button-wrap input[type="submit"]:hover {
background: #4e758c;
}
.otw-widget-form-wrap input[type="text"] {
border: none !important;
background: transparent !important;
cursor: pointer !important;
color: #325C52 !important;
letter-spacing: 2px !important;
font-family: "Idlewild";
font-weight: 700;
text-align: center !important;
width: 80% !important;
margin: 0 10% !important;
transition: 0.4s ease-in all;
}
.otw-wrapper .selectric-wrapper {
cursor: pointer;
width: 80%;
margin: 0 10%;
}
.otw-wrapper .selectric .button {
display: none;
}
.otw-wrapper .selectric .label {
font-size: 18px;
cursor: pointer !important;
color: #325C52 !important;
letter-spacing: 2px !important;
font-family: "Idlewild";
font-weight: 700;
text-align: center !important;
text-transform: uppercase;
margin-left: 0;
line-height: 46px;
height: 46px;
transition: 0.4s ease-in all;
}
.otw-wrapper .selectric:hover .label,
.otw-widget-form-wrap input[type="text"]:hover {
color: #4e758c !important;
}
.otw-wrapper div.selectric {
border: none !important;
background: transparent !important;
}
@media screen and (max-width: 860px) {
.otw-bare-bones {
height: 220px;
padding-top: 10px;
}
.otw-input-wrap {
margin-top: 20px !important;
width: 50% !important;
}
.otw-button-wrap input[type="submit"] {
margin-top: 20px;
}
.orange-bars {
margin-top: 40px;
}
}
@media screen and (max-width: 450px) {
.otw-button-wrap input[type="submit"] {
width: 130px;
font-size: 16px;
letter-spacing: 1px;
}
}
#slider-side-content {
margin-top: 0 !important;
background: #fff7ed;
position: relative;
overflow-x: hidden;
}
.leaf-1 {
background-position: left top;
background-repeat: repeat-x;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.leaf-2 {
bottom: 0;
left: 200px;
position: absolute;
opacity: 0.5;
}
.leaf-bottom {
background-position: left top;
background-repeat: repeat-x;
position: absolute;
left: 0;
top: 80%;
width: 100%;
height: 100%;
}
.callout-content-interior-inner {}
.home #slider-side-content img.centered {
border-radius: 360px 360px 0 0;
aspect-ratio: 385 / 505;
width: 100%;
object-fit: cover;
}
.home #slider-side-content .right-img-wrapper img.centered {
left: 0;
right: unset;
}
.home #slider-side-content .button,
.homepage-second .button {
margin-left: 0;
margin-right: 0;
}
#slider-side-content p,
.homepage-second p {
font-size: 18px;
font-weight: 100;
font-family: "Idlewild", serif;
color: #FAFAFA;
letter-spacing: 1;
}
.home #slider-side-content .callout-content-interior-inner {
max-width: 655px;
padding-left: 30px;
padding-right: 30px;
}
@media screen and (max-width: 991px) {
.home #slider-side-content img.centered {}
.callout-content-interior {
padding-right: 0px !important;
}
.home #slider-side-content .callout-content-interior-inner {
max-width: 600px;
margin: auto;
text-align: center;
padding-left: 0;
padding-right: 0 !important;
}
}
#fullwidth-blocks {
padding: 60px 50px 50px 50px !important;
position: relative;
z-index: 1;
max-width: 1700px;
margin: auto;
overflow: hidden;
}
@media only screen and (max-width: 768px) {
#fullwidth-blocks {
padding: 30px 20px 50px 20px !important;
}
}
footer .fa {
font-size: 30px;
}
.homepage-second {
position: relative;
overflow: hidden;
margin-bottom: 80px;
margin-top: 80px;
}
.homepage-second img.seafood {
position: absolute;
bottom: 0;
max-width: 50%;
right: calc(45% - 30px);
z-index: 0;
height: 100%;
object-fit: cover;
}
@media only screen and (max-width: 1200px) {
.homepage-second img.seafood {
max-width: 55%;
}
}
.homepage-second .inner-section {
position: relative;
background: #faeddc;
padding: 50px 40px 50px 40px;
bottom: 0;
width: 600px;
max-width: 50%;
left: calc(50%);
z-index: 1;
margin-top: 50px;
}
.homepage-second .leaf-2 {
left: 0;
opacity: 0.1;
}
.homepage-second h2,
.homepage-second p,
.homepage-second button {
position: relative;
}
@media screen and (max-width: 1050px) {
.homepage-second .inner-section {
top: 25px;
max-width: calc(50% + 25px);
}
.homepage-second img.moon {
display: none;
}
}
@media screen and (max-width: 767px) {
.homepage-second .inner-section {
top: 0;
left: 0;
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
.homepage-second img.seafood {
display: none;
}
.homepage-second {
height: auto;
margin-top: 35px;
margin-bottom: 35px;
}
.homepage-second .inner-section {
margin-top: 0;
}
}
.site-main h2 {
font-size: 30px;
}
/* nav.navbar {
margin: auto;
} */
#main-nav .container,
.container-lg,
.container-md,
.container-sm,
.container-xl {
max-width: 100%;
padding-left: 5%;
padding-right: 5%;
}
#main-nav .container {
max-width: 860px;
justify-content: flex-end;
padding-left: 0;
padding-right: 0;
margin-right: 0;
}
@media screen and (max-width: 1300px) {
#main-nav .container,
.container-lg,
.container-md,
.container-sm,
.container-xl {
padding-left: 1%;
padding-right: 1%;
}
#main-nav .container {
max-width: 920px;
}
}
@media screen and (max-width: 1199px) {
#main-nav .menu-item .nav-link {
font-size: 13px;
}
#main-nav .container {
max-width: 880px;
}
}
@media screen and (max-width: 550px) {
h1 {
font-size: 70px;
}
.carousel-text.ver_middle {
top: 60%;
}
}
.mobile-reservation {
display: none;
background: #fff;
}
@media screen and (max-width: 915px) {
.mobile-reservation {
display: block;
}
.ot-widget {
display: none;
}
.mobile-reservation a {
width: 100%;
padding: 20px 10px !important;
margin: 10px 0;
text-align: center;
}
}
.logo-row {
text-align: center;
display: block;
margin-top: 20px;
}
.logo-row img {
max-width: 153px;
margin-top: 20px;
vertical-align: top;
}
footer h3 {
font-family: 'Turnip';
font-weight: 700;
}
footer a {
line-height: 32px;
font-size: 16px;
font-weight: 300;
font-family: "Turnip", sans-serif;
letter-spacing: 1px;
color: #F9EDD7;
}
.page-id-863 #field_5b45f5b5385a9 {
margin-bottom: 50px;
margin-top: 50px;
}
.insta-wrapper {
background: #fff7ed;
}
.insta-wrapper h3 {
margin-bottom: 0;
text-align: center;
color: #0e3115;
font-family: "Idlewild", sans-serif;
font-size: 22px;
line-height: 30px;
padding-top: 50px;
padding-left: 20px;
padding-right: 20px;
letter-spacing: 2px;
font-weight: 700;
}
.insta-wrapper h3 img {
transform: translatey(-2px);
margin-left: 5px;
}
.insta-wrapper h3 a {
display: inline-block;
font-size: 30px;
color: #0e3115;
}
footer .row {
align-items: flex-start;
}
.footer-logo {
display: block;
aspect-ratio: 199/79;
object-fit: cover;
}
.mobile-only {
display: none;
}
.desktop-only {
display: block;
}
footer ul.social-links {
margin-top: 10px;
}
@media screen and (max-width: 992px) {
.mobile-only {
display: block;
}
.desktop-only {
display: none;
}
}
#main-nav .navbar-nav .menu-item:hover>.nav-link {
transform: scale(1.15);
}
#main-nav .navbar-nav .menu-item:hover>.nav-link {
color: #fff !important;
}
.left_right_image_text-text .callout-content-interior p {
font-size: 17px !important;
}
.left_right_image_text-text .button {
margin: 0;
}
.otw-time-wrap {
display: none;
}
.otw-widget-form-wrap {
max-width: 800px;
margin: auto;
}
.container .meet-request-info ul {
text-align: left;
font-size: 18px;
}
#pretty-centered-content .content {
max-width: 860px;
margin: auto;
}
#pretty-centered-content,
#pretty-centered-content p {
font-size: 22px;
font-weight: 300;
line-height: 1.5;
color: #F4D8A4;
}
#pretty-centered-content h1 {
color: #F4D8A4;
font-size: 50px;
font-weight: 300;
letter-spacing: 1px;
}
.carousel-indicators {
bottom: 80px;
}
.carousel-indicators li {
width: 15px;
border-top: none;
margin-left: 10px;
margin-right: 10px;
margin-bottom: none;
border-bottom: none;
height: 15px;
background-color: #fff;
}
.scroll-down-link {
bottom: 70px;
display: block;
height: 20px;
left: 50%;
margin-left: -50px;
position: absolute;
width: 100px;
z-index: 2;
}
.scroll-down-link a {
color: #ffffff;
display: block;
font-size: 4.5em;
line-height: 0.6;
text-align: center;
border-bottom: none;
}
.scroll-down-link .icon-down-open-big {
font-weight: bold;
color: #fff;
border: solid #fff;
border-width: 0 7px 7px 0;
display: inline-block;
padding: 15px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
p:empty {
margin: 0 !important;
}
.gform_legacy_markup_wrapper.gf_browser_chrome .gfield_checkbox li input,
.gform_legacy_markup_wrapper.gf_browser_chrome .gfield_checkbox li input[type=checkbox] {
margin-bottom: 6px;
}
/*#slider-side-content p:last-child {
margin-bottom: 0;
}*/
#slider-side-content ul {
font-family: "Idlewild";
font-weight: 700;
color: #fff;
}
.hide-for-screenreader {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
@media only screen and (max-width: 800px) {
.carousel-image {
background-attachment: scroll !important;
}
}
.logo-leaves {
max-width: 202px !important;
position: absolute;
left: calc(50% - 101px);
top: -75px;
display: none;
}
.ot-widget {
background: #bc8f74;
padding-top: 25px;
padding-bottom: 20px;
}
.ot-widget h2 {
font-size: 18px;
letter-spacing: 2px;
margin-bottom: 0;
font-family: "Idlewild", sans-serif;
color: #fff;
line-height: 50px;
}
.ot-inner {
max-width: 1120px;
padding-left: 20px;
padding-right: 20px;
margin: auto;
display: flex;
justify-content: space-between;
}
@media only screen and (max-width: 991px) {
.navbar-nav .dropdown-menu {
margin-left: 0 !important;
}
.navbar-nav .dropdown-menu li {
padding: 0 10px !important;
}
.first-row-right {
padding: 0;
}
#main-nav .menu-item .nav-link {
font-size: 16px;
}
}
#slider-side-content .title {
display: inline-block;
position: relative;
font-family: "Idlewild", serif;
font-size: 48px;
font-weight: 600;
color: #F4D8A4;
letter-spacing: 4px;
margin-bottom: 25px;
}
.homepage-second h2 {
display: inline-block;
}
@media only screen and (max-width: 1200px) {
.home #slider-side-content .title:after,
.homepage-second h2:after {
display: none;
}
}
.newsletter-heading {
font-family: "Idlewild", sans-serif;
font-size: 40px;
font-weight: 400;
color: #325C52;
margin-bottom: 30px;
letter-spacing: 2px;
}
.newsletter-heading-follow {
font-family: "Idlewild", sans-serif;
font-size: 32px;
font-weight: 400;
color: #325C52;
margin-bottom: 30px;
letter-spacing: 1px;
}
.footer-bottom-nav .footer-bottom-menu {
display: flex;
gap: 8px;
}
.footer-bottom-nav ul li a {
position: relative;
padding-right: 8px;
font-size: 16px;
}
.footer-bottom-nav ul li a::after {
content: "";
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
height: 14px;
width: 1px;
background-color: #F9EDD7;
}
.footer-bottom-nav ul li:last-child a::after {
display: none;
}
.footer-menu,
footer p,
footer a {
color: #fff;
font-family: "Turnip", sans-serif;
font-weight: 200;
font-size: 16px;
line-height: 30px;
/* word-spacing: .4rem; */
}
.ot-title {
display: none;
}
.ot-powered-by {
display: none;
}
.ot-dtp-picker.wide {
padding: 0;
/* margin-bottom: 20px; */
}
.ot-dtp-picker.wide .ot-dtp-picker-form .ot-dtp-picker-button,
.ot-dtp-picker.wide .ot-dtp-picker-form .ot-dtp-picker-selector {
height: 46px;
}
footer .social-medias {
display: flex;
gap: 10px;
justify-content: center;
}
footer .social-medias a img {
width: 25px;
height: 25px;
object-fit: cover;
}
@media only screen and (max-width: 1200px) {
.ot-inner {
flex-direction: column;
justify-content: center;
}
.ot-widget h2 {
text-align: center;
}
.ot-dtp-picker.wide {
margin: auto;
}
.ot-widget {
padding-top: 20px;
}
.ot-embed>img {
display: block;
margin: auto;
}
}
.wsp-container ul {
text-align: center;
column-count: 3;
}
.wsp-container .children {
column-count: 1;
}
.empty-header {
background: linear-gradient(to bottom, rgba(0, 0, 20, 0.6), rgba(0, 0, 0, 0)),
url(/wp-content/uploads/2021/11/Laurea_Pizza_In_Wood_Oven-1920x1080-1.jpg) center center no-repeat;
background-size: cover;
background-attachment: fixed;
height: 100vh;
position: relative;
width: 100%;
}
header.entry-header {
position: relative;
margin-top: 40px;
}
header.entry-header h1 {
font-family: "Turnip";
font-size: 45px;
font-weight: 600;
color: #325C52;
letter-spacing: 4px;
margin-bottom: 5px;
}
.single-post .site-main {
max-width: 900px;
margin: auto;
}
.single-post .entry-content p {
font-size: 16px;
font-family: "Idlewild";
color: #FAFAFA;
letter-spacing: 1.5px;
}
.single-post .nav-links a {
color: #bc8f74;
font-weight: 600;
}
#press-block #fullwidth-blocks .image-link-individual a:before {
background-color: rgba(196, 197, 192, 0.3);
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
transition: all 0.4s ease-in-out;
}
#press-block #fullwidth-blocks .image-link-individual a:before {
background-color: rgba(0, 0, 0, 0.5);
transition: all 0.4s ease-in-out;
}
#press-block #fullwidth-blocks .image-link-individual a:hover:before {
background-color: #325C52bb;
}
#gform_3 #input_3_4_6 {
margin-top: 14px !important;
}
.page-id-949 #moduleCarousel2::after {
content: "";
width: 257px;
height: 89px;
z-index: 2;
background: url("/wp-content/uploads/2021/11/market-logo-2x.png") no-repeat;
background-size: 257px 89px;
top: calc(50% - 45px);
left: calc(50% - 128px);
position: absolute;
display: inline-block;
}
@media only screen and (max-width: 767px) {
footer.container-fluid.p-5 {
padding-left: 15px !important;
padding-right: 15px !important;
}
footer #footer-menu {
margin-bottom: 15px;
}
.light-decoration {
display: none;
}
}
@media only screen and (max-width: 479px) {
.navbar-toggler {
width: 50%;
}
.button-reservation-custom>span {
width: 100% !important;
}
}
.orke-custom-icon {
display: inline-block;
font: normal normal normal 14px / 1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.orke-custom-arrow:before {
content: url('data:image/svg+xml,');
}
#posts-callout {
position: relative;
}
#posts-callout ._bg {
position: absolute;
left: 0;
top: 3rem;
bottom: 0;
height: 100%;
width: 20%;
}
#posts-callout .slick-slider {
overflow: visible;
}
#posts-callout .slick-slide {
/* min-height: 70vh;*/
position: relative;
overflow: hidden;
}
#posts-callout .slick-slide .slick-image {
/* position: absolute;*/
width: 100%;
/* height: 100%;*/
left: 0;
top: 0;
height: 0;
padding-bottom: 87%;
}
#posts-callout .slick-slide .slick-image:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: .85;
background: black;
background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}
#posts-callout .slick-slide .slick-content {
position: absolute;
left: 50%;
bottom: 0;
width: 100%;
padding: 30px 50px;
z-index: 1;
transform: translateX(-50%);
}
#posts-callout .slick-slide .slick-content h3,
#posts-callout .slick-slide .slick-content p {
color: #fff;
}
#posts-callout .each_block h3 {
font-size: 18px;
word-break: break-word;
font-family: "Idlewild";
font-weight: 400;
letter-spacing: 1px;
margin-bottom: 10px;
line-height: 1.5;
}
#posts-callout .slick-slide .slick-content h3 {
font-size: 32px;
word-break: break-word;
font-family: "Idlewild";
font-weight: 400;
letter-spacing: 1px;
margin-bottom: 10px;
text-align: center;
}
#posts-callout .each_block p {
font-size: 16px;
margin-bottom: 10px;
line-height: 1.8;
}
#posts-callout .each_block ._image {
height: 0;
padding-bottom: 50%;
}
#posts-callout .each_block.col-md-6 ._image {
/* padding-bottom: 100%;*/
padding-bottom: 80%;
}
#posts-callout .slick-arrow {
position: absolute;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 1;
background-color: #FFF6E5;
border-radius: 100%;
width: 45px;
height: 45px;
cursor: pointer;
outline: 0 !important;
}
#posts-callout .prev-arrow {
left: -15px;
}
#posts-callout .next-arrow {
right: -15px;
}
.content-slider#posts-callout-carousel {
padding: 0;
}
@media screen and (max-width: 1100px) {
#posts-callout .each_block.col-md-6 ._image {
padding-bottom: 50%;
}
}
@media screen and (max-width: 991px) {
#posts-callout .each_block.col-md-6 ._image {
padding-bottom: 128%;
}
}
@media screen and (max-width: 768px) {
#posts-callout .slick-slide .slick-content {
position: relative;
/* background: #FFFAF1; */
color: #F4D8A4;
/* border: 1px solid #1F2658; */
}
#posts-callout .slick-slide .slick-content h3,
#posts-callout .slick-slide .slick-content p {
color: #F4D8A4;
}
}
.testimonial-slider-container {
height: 800px;
}
.testimonial-slider-container p {
font-size: 32px;
line-height: 50px;
font-family: "Turnip", sans-serif;
}
.testimonial-slider-container .person {
font-size: 24px;
line-height: 1.2;
font-family: "Turnip", sans-serif;
color: #595959;
}
.testimonial-slider-container span.quote {
font-size: 340px;
line-height: 1.2;
}
.testimonial-slider-container .food-image {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
transform: translateX(-30%);
object-fit: contain;
}
.testimonial-slider-container .swiper-pagination {
position: static;
text-align: left;
margin-top: 60px;
}
.testimonial-slider-container .swiper-pagination .swiper-pagination-bullet {
background: #EEA883;
width: 20px;
height: 20px;
margin: 0 10px !important;
opacity: 1;
}
.testimonial-slider-container .swiper-pagination .swiper-pagination-bullet-active {
outline: 2px solid #EEA883;
outline-offset: 2px;
}
@media (min-width: 1440px) {
.container {
max-width: 1320px;
}
}
@media (min-width: 1880px) {
.container {
max-width: 1550px;
}
}
@media (max-width: 767px) {
.testimonial-slider-container {
height: unset;
}
.testimonial-slider-container .food-image {
top: 0;
left: 0;
width: 80%;
height: auto;
}
.testimonial-slider-container p {
font-size: 26px;
line-height: 1.4;
}
.testimonial-slider-container span.quote {
font-size: 300px;
line-height: 1;
}
}
.slider_box {
position: relative;
}
.owl-carousel .owl-stage {
display: flex;
}
.slider_content {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 550px;
display: flex;
justify-content: space-between;
align-items: end;
padding: 0 50px;
position: relative;
opacity: .5;
flex-direction: column;
/*transition: all .8s;*/
}
.slider_content:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 60%;
background: linear-gradient(0deg, rgba(0, 0, 0, .8), transparent);
width: 100%;
z-index: 1;
}
.slider_content * {
z-index: 1;
}
.slider_content_box {
max-width: 800px;
background-color: #fff;
padding: 30px 50px 0;
margin: auto auto 0 auto;
width: 100%;
display: flex;
flex-direction: column;
}
@media (max-width: 767px) {
.slider_content {
height: 350px;
}
.owl-carousel .owl-item.active.center .slider_content {
height: 450px;
}
.slider_content_box {
padding: 10px 0;
}
.slider_content:before {
height: 100%;
background: linear-gradient(0deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .4));
}
}
.slider_des {
align-items: center;
}
.slider_des h3 {
color: #325C52;
margin: 0;
font-size: 36px;
}
.slider_des p {
color: #325C52;
margin: 0;
font-size: 16px;
padding-bottom: 20px;
}
.slider_des .unit-features {
gap: 40px;
}
.slider_des .feature {
display: flex;
align-items: center;
gap: 10px;
flex-direction: column;
}
.slider_des .feature span {
font-size: 14px;
text-transform: uppercase;
color: #848383;
}
.slider_btn {
display: flex;
gap: 20px;
}
.slider_btn_one a {
color: #fff;
text-decoration: none;
border: 1px solid #EDE9E1;
display: inline-block;
font-size: 16px;
font-weight: 700;
width: 135px;
height: 45px;
text-align: center;
line-height: 44px;
}
.slider_btn_two a {
color: #fff;
text-decoration: none;
border: 1px solid #919A4B;
display: inline-block;
font-size: 16px;
background-color: #919A4B;
font-weight: 700;
width: 135px;
height: 45px;
text-align: center;
line-height: 44px;
}
.room_btn a:hover:after {}
.room_btn {
padding-bottom: 30px;
margin: 0 auto;
}
.room_btn a {
color: #FFF5E8;
text-decoration: none;
display: inline-block;
font-size: 14px;
background-color: transparent;
font-weight: 500;
text-align: center;
padding: 10px 20px;
}
.room_btn a:after {
content: url('data:image/svg+xml,');
margin-left: 15px;
}
.owl-carousel .owl-item {
padding: 0 15px;
display: flex;
flex-direction: column;
}
.owl-carousel .owl-item .item {
margin: auto 0;
}
.owl-carousel .owl-item.active.center .slider_content {
height: 750px;
opacity: 1;
}
@media (max-width: 767px) {
.owl-carousel .owl-item.active.center .slider_content {
height: 450px;
}
.slider_des {
flex-direction: column;
text-align: center;
}
.slider_des h3 {
font-size: 24px;
}
}
.owl-dots {
display: none;
}
.owl-nav {
height: 0;
}
.owl-prev span {
/* background-image: url("./images/arrow-left.svg"); */
background-repeat: no-repeat;
width: 42px;
height: 42px;
display: block;
font-size: 60px;
line-height: 48px;
border-radius: 100px;
color: #fff;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 30px;
text-indent: -9999px;
background-size: cover;
}
.owl-next span {
/* background-image: url("./images/arrow-right.svg"); */
background-repeat: no-repeat;
width: 42px;
height: 42px;
display: block;
font-size: 60px;
line-height: 48px;
border-radius: 100px;
color: #fff;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 30px;
text-indent: -9999px;
background-size: cover
}
.slider_content .slider_content_box .amenities #accommodation_amenities_slider_2 {
color: #fff;
display: flex;
font-size: 16px;
justify-content: space-around;
align-items: baseline;
gap: 10px;
}
.slider_content .slider_content_box .amenities img {
height: 44px;
width: auto;
filter: invert(1) grayscale(1);
margin-bottom: 10px;
}
/* MAP IMAGE */
.map-bg-wrapper {
background-color: #fff;
padding: 0;
margin-top: 30px;
}
.map-bg-wrapper h2 {
font-weight: 400;
letter-spacing: 5px;
text-transform: capitalize;
}
.map-bg-wrapper .row {
align-items: center;
}
/* .map-bg-wrapper .map-content {
padding-right: 40px;
} */
.map-bg-wrapper .map-content p {
font-size: 18px;
color: #595959;
line-height: 1.4;
/* max-width: 360px; */
}
.map-bg-wrapper .map-bg-img-wrap {
align-self: flex-start;
}
.map-bg-wrapper .map-bg-img {
width: 100%;
height: auto;
aspect-ratio: 860 / 739;
object-fit: cover;
}
@media (max-width: 1200px) {
.map-bg-wrapper .map-content p {
font-size: 15px;
line-height: 1.5;
}
}
@media (max-width: 991px) {
.map-bg-wrapper {
padding: 40px 0;
margin-top: 0;
}
.map-bg-wrapper h2 {
font-size: 28px;
}
.map-bg-wrapper .map-content {
padding-right: 0;
margin-bottom: 30px;
text-align: center;
}
.map-bg-wrapper .map-content p {
max-width: unset;
}
.map-bg-wrapper .map-bg-img-wrap {
align-self: stretch;
}
}
@media (max-width: 767px) {
.map-bg-wrapper {
padding: 40px 0;
}
.map-bg-wrapper .map-content {
padding: 0 15px;
margin-bottom: 20px;
}
}
#map .mapboxgl-marker {
width: 24px;
height: 24px;
border-radius: 0;
border: none;
background-color: transparent;
}
#map .mapboxgl-popup .property-image {
background-repeat: no-repeat;
background-size: cover;
height: 200px;
width: 100%;
}
#map .marker {
background-color: #809FA6;
background-size: cover;
width: 50px;
height: 50px;
cursor: pointer;
border-radius: 100%;
}
#map .mapboxgl-popup {
max-width: 200px;
}
#map .mapboxgl-popup-content {
text-align: center;
}
#map .mapboxgl-popup-content h3 {
font-family: "Turnip", serif;
font-weight: 300;
font-size: 18px;
font-style: normal;
text-transform: none;
letter-spacing: .5px;
}
#map .mapboxgl-ctrl-attrib-inner,
#map .mapboxgl-ctrl-bottom-left {
display: none !important;
}
.map_block h1:before,
.map_block h2:before {
content: none;
}
.filter-group::-webkit-scrollbar {
width: 6px;
}
.filter-group::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.filter-group::-webkit-scrollbar-thumb {
background: #9a9893;
outline: 1px solid #333233;
}
#map-popup {
position: absolute;
/* top: 5%;// bottom: 0;// left: 33%;*/
width: 350px;
z-index: 1;
border-radius: 0;
color: #000;
font-family: Idlewild;
font-size: 16px;
letter-spacing: 0.91px;
background: #ffffff;
padding: 0;
/* height: 100%;*/
transition: opacity .5s ease;
overflow-y: auto;
overflow-x: auto;
opacity: 0;
}
#map-popup.active {
opacity: 1;
}
#map-popup #map-popup-close {
position: absolute;
right: 5px;
top: 5px;
opacity: 0;
cursor: pointer;
line-height: 1;
}
#map-popup.active #map-popup-close {
opacity: 1;
transition: opacity .5s ease .5s;
}
#map-popup #map-popup-content {
padding: 25px 30px;
opacity: 0;
}
#map-popup #map-popup-content h6 {
font-size: 18px;
}
#map-popup #map-popup-content p {
font-size: 15px;
margin-bottom: 15px !important;
line-height: 1.3;
}
#map-popup #map-popup-content .button {
/* font-size: 15px;// font-weight: normal;// padding: 5px 0;// border-bottom: 2px solid;*/
}
#map-popup.active #map-popup-content {
opacity: 1;
transition: opacity .5s ease .5s;
}
.mapboxgl-map {
font: inherit !important;
}
.mapboxgl-popup-content {
text-align: center;
padding: 10px 20px !important;
min-width: 120px;
}
.mapboxgl-popup-content h3 {
font-size: 16px;
}
.mapboxgl-popup-content .button {
font-size: 12px;
padding: 12px 20px;
}
.filter-group {
color: #325C52;
font-family: '';
padding: 10px 0 30px 10px;
font-size: 18px;
box-shadow: none;
text-align: left !important;
border-bottom: 1px solid #D3D3C5;
}
.mapfiler>label {
display: none;
}
.mapfiler.active .filter-group-toggle {
/*background: #CB5428;*/
}
.filter-group-toggle {
margin: 0;
cursor: pointer;
background: transparent;
font-weight: 500;
font-size: 18px;
text-transform: uppercase;
white-space: nowrap;
min-width: 100%;
text-align: left;
line-height: 1;
transition: all 0.35s;
padding: 10px 0;
display: flex;
align-items: center;
}
.mapfiler:last-of-type .filter-group-toggle {
border-bottom: 0;
}
.filter-group-toggle>span {
color: #325C52;
font-family: "Turnip", serif;
font-size: 18px;
margin-top: 10px;
font-weight: 500;
}
.filter-group-toggle>span.filter-circle {
border-radius: 100%;
border: 1px solid #325C52;
height: 24px;
width: 24px;
min-width: 24px;
margin-right: 15px;
display: block;
}
.mapfiler.active .filter-group-toggle>span.filter-circle {
background: #0F1B34;
}
.filter-circle.selected {
border-radius: 100%;
border: 1px solid #325C52;
height: 24px;
width: 24px;
min-width: 24px;
margin-right: 15px;
display: block;
background: #0F1B34;
}
.filter-group-toggle>svg {
width: 50px;
height: 50px;
display: inline-block;
vertical-align: middle;
}
.filter-group-toggle>i {
font-size: 60px;
display: inline-block;
vertical-align: middle;
}
.mapboxgl-ctrl-bottom-left {
display: none !important;
}
.mapboxgl-ctrl-bottom-right {
display: none !important;
}
.mapboxgl-marker {
cursor: pointer;
border-radius: 100%;
background-size: 50%;
background-repeat: no-repeat;
background-position: center center;
position: relative;
}
.selected-point h2 {
font-size: 32px;
}
/* Map With Categories Block — Figma node 4191:508 */
.map_with_categories_block #map {
height: 568px;
}
.map_with_categories_block .filter-group {
display: flex;
flex-direction: column;
gap: 40px;
padding: 0;
border-bottom: 0;
}
.map_with_categories_block .filter-group-toggle {
padding: 0;
gap: 20px;
}
.map_with_categories_block .filter-group-toggle>span:not(.filter-circle) {
margin-top: 0;
font-family: "Idlewild", serif;
font-weight: 700;
font-size: 16px;
letter-spacing: 0;
color: #325C52;
}
.map_with_categories_block .filter-group-toggle>span.filter-circle,
.map_with_categories_block .filter-circle.selected {
width: 35px;
height: 35px;
min-width: 35px;
margin-right: 0;
border: 1px solid #325C52;
}
/* Active filter circle fills Pine green (was Deep navy #1B4965) — punch list 2026-08-27. */
.map_with_categories_block .mapfiler.active .filter-group-toggle>span.filter-circle {
background: #325C52;
border-color: #325C52;
}
.map_with_categories_block #map .marker {
background-color: #E57461;
}
.map_with_categories_block #map .marker[aria-expanded="true"] {
background-color: #325C52;
}
.map_with_categories_block .mapboxgl-popup-tip {
display: none;
}
.map_with_categories_block .mapboxgl-popup-content {
border: 4px solid #325C52;
border-radius: 0;
box-shadow: none;
padding: 14px 24px !important;
}
.map_with_categories_block #map .mapboxgl-popup-content h3 {
font-family: "Idlewild", serif;
font-weight: 700;
font-size: 16px;
letter-spacing: 1px;
text-transform: uppercase;
color: #325C52;
margin: 0;
}
/* Marker popup: name stacked over an optional per-location link button. */
.map_with_categories_block #map .map-popup-body {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.map_with_categories_block #map .map-popup-link {
white-space: nowrap;
}
@media (min-width: 992px) {
.map_with_categories_block .row.position-relative .container>.row {
display: grid;
grid-template-columns: 387fr 793fr;
gap: 0 100px;
align-items: center;
}
.map_with_categories_block .row.position-relative .container>.row>[class*="col-md-"] {
width: auto;
max-width: none;
flex: none;
padding: 0;
}
}
/* Tablet range (768-991px) — map_with_categories_block (punch list 2026-08-28).
The ≥992px grid override doesn't apply here, so the filter list sits in Bootstrap's
col-md-3 (measured 150px wide at 828px) while `.filter-group-toggle` still carries the
base `white-space: nowrap; min-width: 100%`. A label like "Entertainment & Dining"
rendered 496px wide out of a 219px cell and overlapped the map column. Stack the
sidebar above the map and let the labels wrap. */
@media (min-width: 768px) and (max-width: 991px) {
.map_with_categories_block .row.position-relative .container>.row>[class*="col-md-"] {
flex: 0 0 100%;
max-width: 100%;
width: 100%;
}
.map_with_categories_block .filter-group {
/* markup carries Bootstrap .d-flex.flex-column, hence !important */
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 24px;
padding: 0;
margin-top: 0 !important;
margin-bottom: 2rem !important;
}
.map_with_categories_block .filter-group-toggle {
padding: 0;
gap: 12px;
min-width: 0;
white-space: normal;
align-items: center;
}
.map_with_categories_block .filter-group-toggle>span:not(.filter-circle) {
font-size: 14px;
line-height: 1.25;
}
.map_with_categories_block .filter-group-toggle>span.filter-circle,
.map_with_categories_block .filter-circle.selected {
width: 26px;
height: 26px;
min-width: 26px;
margin-right: 0;
}
}
/* Mobile polish — map_with_categories_block (punch list 2026-08-28).
Base .filter-group-toggle sets white-space:nowrap + min-width:100%, which overflows
on narrow screens once a category label is more than one word. */
@media (max-width: 767px) {
.map_with_categories_block.my-5 {
margin-top: 2rem !important;
margin-bottom: 2rem !important;
}
.map_with_categories_block.pb-5 {
padding-bottom: 1rem !important;
}
.map_with_categories_block .section-heading {
font-size: 28px;
line-height: 1.2;
margin-bottom: 0.75rem;
}
.map_with_categories_block .filter-group {
/* markup carries Bootstrap .d-flex.flex-column, hence !important */
display: grid !important;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 8px;
padding: 0;
margin-top: 0 !important;
margin-bottom: 1.5rem !important;
}
.map_with_categories_block .filter-group-toggle {
padding: 0;
gap: 10px;
min-width: 0;
white-space: normal;
align-items: center;
}
.map_with_categories_block .filter-group-toggle>span:not(.filter-circle) {
font-size: 13px;
line-height: 1.25;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.map_with_categories_block .filter-group-toggle>span.filter-circle,
.map_with_categories_block .filter-circle.selected {
width: 22px;
height: 22px;
min-width: 22px;
margin-right: 0;
margin-top: 0;
}
.map_with_categories_block #map,
.map_with_categories_block #map[style] {
height: 380px !important;
}
.map_with_categories_block .mapboxgl-popup {
max-width: 78vw !important;
}
.map_with_categories_block .mapboxgl-popup-content {
border-width: 2px;
padding: 10px 14px !important;
}
.map_with_categories_block #map .mapboxgl-popup-content h3 {
font-size: 14px;
letter-spacing: 0.5px;
line-height: 1.25;
}
.map_with_categories_block #map .map-popup-body {
gap: 8px;
}
.map_with_categories_block #map .map-popup-link {
font-size: 11px;
padding: 9px 14px;
white-space: normal;
}
}
/* End MAP BLOCK // End MAP BLOCK */
/* Newsletter Section */
.newsletter-section {
background-color: #fff;
position: relative;
overflow: hidden;
}
.newsletter-section .container {
position: relative;
z-index: 2;
}
.newsletter-form .form-control {
height: 50px;
border: none;
border-radius: 0;
padding: 10px 20px;
font-size: 16px;
background: rgba(255, 255, 255, 0.9);
}
.newsletter-form .form-control:focus {
box-shadow: none;
background: #fff;
}
.newsletter-form .btn-primary {
background-color: #F4D8A4;
border: none;
color: #325C52;
padding: 0 30px;
height: 50px;
font-weight: 600;
letter-spacing: 1px;
border-radius: 0;
transition: all 0.3s ease;
}
.newsletter-form .btn-primary:hover {
background-color: #d4c095;
}
@media (max-width: 767px) {
.newsletter-section {
padding: 40px 15px;
}
.newsletter-heading {
font-size: 32px;
text-align: center;
}
}
/* Newsletter Section */
.newsletter-section {
background-color: #fff;
position: relative;
overflow: hidden;
}
.newsletter-section .container {
position: relative;
z-index: 2;
}
.newsletter-section .social-icons {
display: flex;
gap: 20px;
justify-content: flex-start;
align-items: center;
}
.newsletter-section .social-icons a {
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.newsletter-section .social-icons .social-icon {
width: 44px;
height: 44px;
object-fit: contain;
}
.newsletter-section .social-icons a:hover {
transform: translateY(-2px);
opacity: 0.8;
}
.newsletter-section .gform_legacy_markup_wrapper ul.gform_fields {
display: flex;
}
.newsletter-section .gform_legacy_markup_wrapper ul.gform_fields .gfield--type-email {
width: 65%;
}
.newsletter-section .gform_legacy_markup_wrapper ul.gform_fields li.gfield {
padding-right: 0;
margin-top: 0;
}
.newsletter-section .gform_legacy_markup_wrapper ul.gform_fields {
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.25);
}
.newsletter-section .gform_legacy_markup_wrapper .top_label div.ginput_container {
margin-top: 0;
}
.newsletter-section .gform_legacy_markup_wrapper .top_label div.ginput_container input {
margin-top: 0;
height: 65px;
border: none;
border-radius: 0;
padding: 0 20px !important;
font-weight: 100;
}
.newsletter-section .gform_legacy_markup_wrapper ul.gform_fields li.gfield.gfield--type-submit {
width: 35%;
}
.newsletter-section .gform_legacy_markup_wrapper .button {
height: 65px;
background-color: #F4D8A4;
border: none;
width: 100%;
font-weight: 600;
letter-spacing: 2px;
}
.newsletter-section .gform_legacy_markup_wrapper {
max-width: 635px;
width: 100%;
}
.newsletter-section .gform_legacy_markup_wrapper .gform_footer {
margin: 0;
padding: 0;
}
/* the woodlands hotel css*/
/* subscribe start */
.subscribe-section {
max-width: 600px;
padding: 0 20px;
width: 100%;
}
.subscribe-title {
color: #F9EDD7;
font-weight: 600;
font-size: 28px;
text-align: left;
margin-bottom: 0;
}
.subscribe-form {
display: flex;
flex-direction: column;
gap: 10px;
}
.subscribe-form input[type="email"],
#gform_10 input[type="email"],
.subscribe-form button,
#gform_10 input[type="submit"] {
width: 100%;
padding: 8px 15px;
font-size: 16px;
border: none;
border-radius: 2px;
font-weight: 300;
letter-spacing: .7px;
}
#gform_10 .gform_footer {
margin-top: 0 !important;
}
#gform_wrapper_10.gform_legacy_markup_wrapper {
margin-top: 0 !important;
}
.subscribe-form input[type="email"],
#gform_10 input[type="email"] {
background-color: #EBEDF0;
color: #121212;
font-weight: 400;
font-size: 14px;
height: 42px;
margin-top: 0 !important;
}
.subscribe-form input[type="email"]::placeholder,
#gform_10 input[type="email"]::placeholder {
color: #595959 !important;
}
.subscribe-form button,
#gform_10 input[type="submit"] {
background-color: #F9EDD7;
color: #325C52;
cursor: pointer;
/* Figma 4191:208 — Idlewild Bold 12px, matching the "Connect With…" heading
above it (was Idlewild 500, which read light against the cream button). */
font-family: "Idlewild", sans-serif;
font-size: 12px;
font-weight: 700;
transition: background-color 0.3s ease;
margin-top: 0 !important;
}
#gform_10 ul.gform_fields li.gfield {
padding-right: 0 !important;
margin-top: 0 !important;
}
.subscribe-form button:hover,
#gform_10 input[type="submit"]:hover {
background-color: #a37354;
}
.subscribe-area .gform_wrapper {
width: 100%;
padding-left: 20px;
padding-right: 20px;
margin-top: 0;
}
.subscribe-area .gform_legacy_markup_wrapper .gform_heading {
margin: 0;
}
.subscribe-area .gform_legacy_markup_wrapper .gform_footer {
margin-top: 0;
}
.subscribe-area .gform_legacy_markup_wrapper ul.gform_fields li.gfield {
padding-right: 0;
}
/* subscribe end */
/* Mobile tab menu start */
/* Wrapper */
.wr-mobile-menu-wrapper {
position: relative;
z-index: 100;
}
/* Toggle button */
.wr-navbar-toggler {
background: #325C52;
color: #fcf8f0;
padding: 10px 15px;
border: none;
width: 50%;
text-align: center;
font-weight: 400;
z-index: 110;
position: relative;
height: 60px;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 16px;
}
/* Hidden menu */
.wr-mobile-menu {
position: absolute;
top: 100%;
left: 0;
width: 100%;
max-height: 0;
overflow: hidden;
background-color: #fff;
transition: max-height 0.4s ease;
z-index: 99;
}
/* Shown menu.
Punch list 2026-08-28: `max-height: 100vh` + `overflow: hidden` on an element that
starts ~145px below the top of a FIXED header meant the last items (About → FAQ,
measured at y=821 in an 812px viewport) were clipped with no way to scroll to them.
The height is now capped to the space actually left below the header and the menu
scrolls internally; `--wr-mobile-menu-max` is set from JS in header.php on open, with
this value as the no-JS fallback. */
.wr-mobile-menu.show {
max-height: var(--wr-mobile-menu-max, calc(100vh - 145px));
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
/* Menu list */
.wr-mobile-nav {
list-style: none;
margin: 0;
padding: 0;
}
/* Menu links */
.wr-mobile-nav li a {
display: block;
padding: 12px 15px;
color: #325C52;
text-decoration: none;
border-top: 1px solid rgba(128, 0, 0, 0.1);
font-weight: 500;
}
.wr-mobile-nav li a:hover {
background: #F4D8A4;
}
footer {
padding-bottom: 20px !important;
}
/* Mobile tab menu end */
@media only screen and (max-width: 991px) {
.footer-logo {
width: 150px;
height: auto;
margin: 0 !important;
}
.social-medias {
justify-content: start !important;
margin: 20px 0 !important;
}
footer .footer-menu ul li {
text-align: left;
}
.subscribe-area {
margin-top: 40px;
align-items: start !important;
padding: 0 !important;
}
.footer-bottom-menu {
justify-content: start !important;
}
.footer-bottom-menu {
padding-top: 0;
}
.footer-col-1,
.footer-col-2 {
padding-left: 25px;
}
.footer-bottom-nav .footer-bottom-menu {
display: grid;
grid-template-columns: 50% 50%;
gap: 0 !important;
}
.footer-bottom-nav {
padding-left: 10px;
}
.footer-bottom-menu li {
margin-bottom: 0 !important;
}
.footer-bottom-nav ul li a::after {
display: none;
}
}
@media only screen and (max-width: 600px) {
.logo img {
width: 150px;
}
.footer-bottom-nav ul li a::after {
display: none;
}
.subscribe-title,
footer p {
text-align: left;
}
}
/* the woodlands hotel css */
.booking-title a {
background: #bea783 none repeat scroll 0 0;
color: #ffffff;
font-family: "Turnip", sans-serif;
font-size: 1.5em;
line-height: 150%;
padding: 10px;
text-align: center;
width: 100%;
display: block;
}
.booking-title>a:hover {
background-color: #ae9773;
transition: background-color 0.5s;
}
.home .booking-title {
display: block;
}
.booking-title {
display: none;
}
.booking-title-mobile a {
background: #163450 none repeat scroll 0 0;
color: #ffffff;
font-family: "Turnip", sans-serif;
font-size: 1.5em;
font-weight: 700;
line-height: 150%;
padding: 10px;
text-align: center;
width: 100%;
display: block;
text-transform: uppercase;
}
.booking-title-mobile>a:hover {
background-color: #DBA668;
transition: background-color 0.5s;
}
.booking-title-mobile {
display: none;
}
@media screen and (max-width: 840px) {
.home .booking-title-mobile {
display: block;
}
}
.book-form-wrapper {
background: #ffffff none repeat scroll 0 0;
}
@media screen and (max-width: 840px) {
.book-form-wrapper {
display: none;
}
}
.home .book-form-wrapper {
position: relative;
top: -100px;
width: 85%;
margin: 0 auto;
position: absolute;
top: auto;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
-webkit-box-shadow: 0px 0px 18px 6px rgba(0, 0, 0, 0.29);
box-shadow: 0px 0px 18px 6px rgba(0, 0, 0, 0.29);
}
@media screen and (max-width: 840px) {
.home .book-form-wrapper {
width: 100%;
top: 0;
position: relative;
}
}
.book-form-wrapper>form {
margin: 0 auto;
padding: 20px 0;
width: 90%;
display: flex;
align-items: flex-end;
justify-content: space-around;
}
.book-form-wrapper>form fieldset {
margin-bottom: 0;
}
@media screen and (max-width: 840px) {
.book-form-wrapper form {
width: 100%;
}
.book-form-wrapper fieldset {
background-color: #ffffff;
float: none;
}
.book-form-wrapper fieldset.form-actions {
background-color: transparent;
margin-bottom: 0;
}
}
.hero-wrapper .book-form-wrapper {
width: 100%;
background: #F9EDD7;
/* Figma node 4191:17 — 1124px wide, sitting 39px above the hero's bottom. */
bottom: 39px;
margin: 0 auto;
position: absolute;
top: auto;
left: 50%;
transform: translateX(-50%);
z-index: 1;
-webkit-box-shadow: 0px 0px 18px 6px rgba(0, 0, 0, 0.29);
box-shadow: 0px 0px 18px 6px rgba(0, 0, 0, 0.29);
max-width: 1220px;
}
.hero-wrapper .book-form-wrapper>form {
width: 100%;
/* Figma 4191:17 — px-[40px] py-[10px] on the widget, fields sized to content. */
padding: 10px 40px;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
}
.hero-wrapper .book-form-wrapper>form fieldset.form-select {
margin-bottom: 0;
/* Figma: field 1 is pr-[40px] only; fields 2+ are px-[40px] — the 40px
left padding is dropped on the first field since the form's own 40px
padding already provides that edge gap. */
padding: 0 40px 0 40px;
width: auto;
height: auto;
flex: 0 0 auto;
position: relative;
}
.hero-wrapper .book-form-wrapper>form fieldset.form-select:first-of-type {
padding-left: 0;
}
.hero-wrapper .book-form-wrapper>form fieldset.form-actions {
padding: 0;
margin-right: 0;
width: auto;
height: auto;
display: flex;
justify-content: center;
align-items: center;
min-height: 0;
background: #325C52;
flex: 0 0 auto;
}
.hero-wrapper .book-form-wrapper>form fieldset.form-actions input {
background: transparent;
height: 40px;
width: auto;
padding: 8px 15px;
font-family: 'Idlewild', serif;
font-size: 12px;
font-weight: 700;
}
.hero-wrapper .book-form-wrapper>form fieldset.form-actions input[type=submit] {
font-size: 12px;
font-weight: 700;
color: #ffffff;
font-family: 'Idlewild', serif;
text-transform: uppercase !important;
letter-spacing: 0.5px;
font-style: unset;
}
.hero-wrapper .book-form-wrapper>form fieldset.form-actions input[type=submit]:hover {
background-color: transparent;
color: #ffffff;
}
.hero-wrapper .book-form-wrapper>form fieldset label {
display: none;
}
.hero-wrapper .book-form-wrapper>form fieldset.form-select input,
.hero-wrapper .book-form-wrapper>form fieldset.form-select select {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
/* !important beats css/theme.min.css's `.book-form-wrapper select { opacity:
1 !important }` (a legacy vendor rule) — this input/select must stay fully
invisible; the .custom-date-box is the only thing that should be seen. */
opacity: 0 !important;
}
.hero-wrapper .book-form-wrapper>form *:focus-visible {
outline: 2px solid #163450 !important;
}
/* Below ~1240px the 3 fields + button (nowrap, 40px paddings) no longer fit the
viewport; `justify-content: center` on an overflowing flex row pushes the first
and last items out equally on both sides, clipped by the carousel's overflow —
text/icons were getting cropped at both edges (reported on a 1100px viewport).
Wrap the row and shrink the field gutters so everything stays on-screen down to
the existing 840px breakpoint where the whole widget is hidden. */
@media screen and (max-width: 1240px) {
.hero-wrapper .book-form-wrapper {
width: calc(100% - 40px);
}
.hero-wrapper .book-form-wrapper>form {
flex-wrap: wrap;
row-gap: 15px;
padding: 20px;
}
.hero-wrapper .book-form-wrapper>form fieldset.form-select {
padding: 0 20px;
}
.hero-wrapper .book-form-wrapper>form fieldset.form-select:first-of-type {
padding-left: 0;
}
.hero-wrapper .book-form-wrapper>form fieldset.form-actions {
flex: 1 0 100%;
justify-content: center;
}
}
.date-wrapper {
height: 100px;
width: 100%;
}
.date-wrapper input.datepicker {
opacity: 0;
z-index: 2;
cursor: pointer;
}
/* Matches Figma 4191:17 (Section / Booking Widget) and its 4191:18 "Field /
Check-in" children exactly: each field is a plain in-flow flex column
(label, then a non-wrapping row of day + month/weekday + icon), sized to
its own content — not the old absolutely-centered, width-capped overlay
box that forced "September 2026" to wrap and made the field taller than
it should be (punch-list, 2026-09-16). */
.custom-date-box {
pointer-events: none;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 4px;
}
.custom-date-row {
display: flex;
align-items: center;
gap: 12px;
white-space: nowrap;
}
.custom-date-info {
display: flex;
flex-direction: column;
gap: 4px;
}
.custom-date-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
flex: 0 0 auto;
}
.custom-date-icon--arrow {
width: 29px;
}
.custom-date-label {
font-size: 16px;
color: #000000;
text-transform: uppercase;
font-weight: 700;
font-family: 'Idlewild', serif;
letter-spacing: 0.5px;
white-space: nowrap;
}
.custom-date-box .date-day {
color: #325C52;
font-size: 33px;
line-height: 1;
font-weight: 700;
font-family: 'Idlewild', serif;
}
.custom-date-box .date-month-year {
color: #000000;
font-size: 12px;
font-family: 'Idlewild', serif;
font-weight: 700;
letter-spacing: 0.5px;
}
.custom-date-box .date-weekday {
font-size: 12px;
color: #000000;
font-family: 'Idlewild', serif;
font-weight: 700;
}
.form-actions {
width: 280px;
}
@media screen and (max-width: 992px) {
.form-actions {
margin-left: 10px;
}
}
.form-select {
margin-right: 1%;
width: auto;
}
.form-select #rooms {
/*width: 130px;*/
}
.form-select #adults {
/*width: 130px;*/
}
.book-form-wrapper input {
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #BABABA;
color: #000000;
font-family: 'Turnip', serif;
padding: 10px;
width: 95%;
-webkit-appearance: none;
border-radius: 0 !important;
}
.form-actions>input {
background-color: #991B1E;
background-image: none;
color: #ffffff;
border: none;
text-transform: uppercase;
font-weight: 700;
font-family: 'Turnip', serif;
}
.form-actions>input:hover {
background-color: #d2b48c;
border: none;
color: #ffffff;
transition: color 0.5s ease 0s, background-color 0.5s ease 0s;
}
.book-form-wrapper select {
border: none;
border-radius: 0 !important;
color: #000000;
font-family: "Turnip", sans-serif;
font-size: 1em;
-webkit-appearance: none;
text-indent: 0.01px;
text-overflow: "";
width: 95%;
-moz-appearance: none !important;
padding-left: 2px;
}
@media only screen and (max-width: 840px) {
.form-select {
margin-bottom: 30px;
margin-right: 0;
width: 100%;
}
.book-form-wrapper select,
.book-form-wrapper input {
width: 100%;
}
}
/* Menu list */
.wr-mobile-nav {
list-style: none;
margin: 0;
padding: 0;
}
/* Menu links */
.wr-mobile-nav li a {
display: block;
padding: 12px 15px;
color: #325C52;
text-decoration: none;
border-top: 1px solid rgba(128, 0, 0, 0.1);
font-weight: 500;
}
.wr-mobile-nav li a:hover {
background: #F4D8A4;
}
/* Dropdown styles */
.wr-mobile-nav .sub-menu {
display: none;
background: rgba(238, 217, 178, 0.1);
padding: 0;
}
.wr-mobile-nav .sub-menu li {
list-style: none;
}
.wr-mobile-nav .sub-menu li a {
padding-left: 30px;
}
.menu-item-with-children {
position: relative;
}
.dropdown-toggle {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
transition: transform 0.3s ease;
}
.wr-mobile-nav .dropdown-toggle::after {
content: unset;
}
.menu-item-has-children.active>.menu-item-with-children .dropdown-toggle {
transform: translateY(-50%) rotate(180deg);
}
.menu-item-has-children.active>.sub-menu {
display: block;
}
.carousel-top-para p {
color: #fff;
}
.justify-content-evenly {
justify-content: space-evenly !important;
}
.three-offer-content-area:hover .exciting-activities-content p {
color: #fff;
}
li.menu-item:hover ul.dropdown-menu,
/* Keyboard focus only. Plain :focus-within latched a panel open after a mouse
click, so it stayed rendered while the next item was hovered — that was the
two-overlapping-dropdowns bug. */
li.menu-item:has(:focus-visible) ul.dropdown-menu {
display: block;
}
.stacked-heading {
margin-bottom: 2rem;
color:
}
.stacked-heading.text-white {
color: #F4D8A4 !important;
}
.img-bottom-content-content-area {
position: relative;
z-index: 9;
background: #ffffff;
border: 1px solid rgba(196, 196, 196, 0.5);
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
width: 100%;
/* Punch list: 480px was too tight for the Wedding Packages copy. */
max-width: 560px;
padding: 40px;
margin-top: -260px;
left: 50%;
transform: translateX(-50%);
}
/* Punch list 2026-09-17: Special Services (staging page-id-4076) has short copy, so
the card is only ~302px tall — the shared -260px pull-up left it riding almost
entirely on top of the image, hanging only 42px below the image's bottom edge vs
~130px on longer-copy instances (e.g. Wedding Celebrations). Nudged down for this
page only so it reads like the others; other pages keep the base -260px. */
.page-id-4076 .img-bottom-content-content-area {
margin-top: -172px;
}
.img-bottom-content-content-area h2 {
font-size: 23px;
margin-bottom: 0;
}
.img-bottom-content-content-area p {
color: #000000;
margin-bottom: 0;
}
.image-content-section h2 {
color: #325C52;
margin-bottom: 20px;
}
.image-content-section .content-text p:last-child {
margin-bottom: 0;
}
.view-weeding-package-btn {
margin-left: 0 !important;
}
.units-slider-section .feature span {
/* max-width: 90px; */
}
.exciting-activities-content {
background-color: #325C52;
opacity: .85;
}
.offer-overlay {
background-color: transparent !important;
}
.three-offer-content-area:hover .offer-overlay {
background-color: #325C52 !important;
}
.three-offer-content-area:hover .exciting-activities-content {
background-color: transparent;
opacity: unset;
}
.awards-static img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
}
.wr-slider-tabs .wr-slider-tab-btn {
color: #325C52;
}
.wr-section .eat-drink-single-cta a {
color: #976B4E;
}
.unit-features .units-slider-section .feature span {
color: #757575;
}
/* Desktop dropdowns: theme.min.css centres every panel with a fixed 200px width
(left:50%; margin-left:-100px), which only lines up when the item is exactly
200px wide — every other panel sat off-centre and neighbours overlapped.
Centre on the parent item with a transform so the width can follow content. */
@media only screen and (min-width: 992px) {
.navbar-nav > .menu-item > .dropdown-menu {
left: 50%;
right: auto;
margin-left: 0;
transform: translateX(-50%);
width: max-content;
min-width: 200px;
max-width: 320px;
}
/* Edge items: a centred panel would run past the viewport, so clamp those two
to their item's edge instead. First item of the left nav: */
.navbar-nav[id*="left"] > .menu-item:first-child > .dropdown-menu {
left: 0;
transform: none;
}
/* ...and last item of the right nav: */
.navbar-nav[id*="right"] > .menu-item:last-child > .dropdown-menu {
left: auto;
right: 0;
transform: none;
}
/* The open panel always paints above its neighbours. */
.navbar-nav > .menu-item:hover > .dropdown-menu,
.navbar-nav > .menu-item:has(:focus-visible) > .dropdown-menu {
z-index: 1001;
}
/* Only one panel at a time: a menu item left focused (click/tab) used to stay
open while the next item was hovered, so two panels rendered on top of each
other. Hovering the nav hides every panel except the hovered item's. */
.navbar-nav:hover > .menu-item:not(:hover) > .dropdown-menu {
display: none;
}
.navbar-nav .dropdown-menu .nav-link {
white-space: normal;
}
}
/* Footer columns: fixed widths + wrap meant that once the footer menu grew,
the newsletter column no longer fit on the row and wrapped underneath.
Keep one row on desktop and let the contact/nav columns absorb the slack. */
@media (min-width: 992px) {
.footer-main-row {
flex-wrap: nowrap;
gap: 40px;
}
.footer-col-brand {
flex: 0 0 270px;
}
/* Figma 4191:175 — brand 270 / contact 260 / nav auto / connect 360 inside a
1280 content box, distributed by space-between (≈80px between columns at
1440). The contact column used to be `flex: 1 1 220px`, so it swallowed all
the slack (474px wide at 1440) and its address/phone sat ~45px left of the
design. Only the nav column may shrink now, which still keeps the newsletter
column on the same row when the footer menu grows. */
.footer-col-contact {
flex: 0 0 260px;
width: 260px;
}
.footer-col-nav {
flex: 0 1 auto;
min-width: 0;
}
.footer-col-connect {
flex: 0 0 360px;
}
}
/* ---------------------------------------------------------------------------
Hero booking form datepicker (jQuery UI from WP core — core ships no CSS).
Replaces the jQuery UI CDN base theme so the calendar matches the brand.
--------------------------------------------------------------------------- */
#ui-datepicker-div {
background: #F9EDD7;
border: 1px solid #325C52;
padding: 10px;
width: 280px;
display: none;
z-index: 1200 !important;
font-family: 'Turnip', serif;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
#ui-datepicker-div .ui-datepicker-header {
position: relative;
padding: 4px 0 10px;
text-align: center;
}
#ui-datepicker-div .ui-datepicker-title {
color: #325C52;
font-family: 'Idlewild', serif;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
font-size: 14px;
}
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
position: absolute;
top: 2px;
width: 24px;
height: 24px;
cursor: pointer;
text-indent: -9999px;
overflow: hidden;
}
#ui-datepicker-div .ui-datepicker-prev { left: 0; }
#ui-datepicker-div .ui-datepicker-next { right: 0; }
#ui-datepicker-div .ui-datepicker-prev::after,
#ui-datepicker-div .ui-datepicker-next::after {
content: '';
position: absolute;
top: 7px;
left: 8px;
width: 8px;
height: 8px;
border-top: 2px solid #325C52;
border-right: 2px solid #325C52;
}
#ui-datepicker-div .ui-datepicker-prev::after { transform: rotate(-135deg); }
#ui-datepicker-div .ui-datepicker-next::after { transform: rotate(45deg); }
#ui-datepicker-div .ui-datepicker-prev.ui-state-disabled { opacity: 0.3; cursor: default; }
#ui-datepicker-div table {
width: 100%;
border-collapse: collapse;
margin: 0;
}
#ui-datepicker-div th {
color: #325C52;
font-family: 'Idlewild', serif;
font-size: 11px;
font-weight: 700;
padding: 4px 0;
text-align: center;
text-transform: uppercase;
}
#ui-datepicker-div td {
padding: 1px;
text-align: center;
}
#ui-datepicker-div td a,
#ui-datepicker-div td span {
display: block;
padding: 6px 0;
color: #000000;
font-size: 13px;
text-decoration: none;
}
#ui-datepicker-div td span.ui-state-default {
color: #A9A9A9; /* unselectable days (before today / outside range) */
}
#ui-datepicker-div td a:hover {
background: #325C52;
color: #FFFFFF;
}
#ui-datepicker-div td a.ui-state-active,
#ui-datepicker-div .ui-datepicker-current-day a {
background: #325C52;
color: #FFFFFF;
font-weight: 700;
}
#ui-datepicker-div .ui-datepicker-today a {
border: 1px solid #325C52;
}
/* Punch list: img bottom content block on mobile — card was 80% wide, offset
left, and only overlapped the image by 10%. Center it and use a fixed overlap. */
@media (max-width: 991px) {
.img-bottom-content-block .img-bottom-content-img-area img {
aspect-ratio: 4 / 3;
}
.img-bottom-content-block .img-bottom-content-content-area {
width: calc(100% - 30px);
max-width: 100%;
margin: -60px auto 0;
padding: 30px 20px !important;
gap: 20px;
left: auto;
transform: none;
}
}
/* ---------------------------------------------------------------------------
Mobile footer alignment. Legacy Moran rules (the `@media (max-width:991px)`
block further up + the 600px one) left-aligned the address, nav items,
connect heading and bottom bar while the base mobile rule centred the
columns, so every row landed on a different axis. Centre the whole stack
below 992px and give the columns even rhythm.
--------------------------------------------------------------------------- */
@media (max-width: 991px) {
.footer-main-row {
gap: 40px;
padding: 48px 24px 40px;
}
.footer-col {
width: 100%;
max-width: 360px;
align-items: center;
text-align: center;
}
.footer-col-brand {
gap: 20px;
}
.footer-partner-logos {
gap: 20px;
flex-wrap: wrap;
}
/* the contact column is ACF WYSIWYG output — force its paragraphs too */
.footer-col-contact,
.footer-col-contact p,
.footer-col-contact a,
footer .footer-menu ul li,
.footer-connect-heading,
.footer-col-connect .gform_wrapper,
.footer-col-connect .gform_description,
.footer-col-connect .gform-body,
.footer-col-connect .gform_fields,
.footer-col-connect .gfield,
.footer-col-connect .gform_footer {
text-align: center;
}
.footer-col-contact p {
margin-bottom: 4px;
}
.footer-col-nav .footer-menu ul,
.footer-col-nav .footer-menu ul li {
width: 100%;
padding-left: 0;
margin-left: 0;
}
.footer-connect-heading {
margin-bottom: 12px;
}
.footer-col-connect .gform_wrapper .gform_footer {
display: flex;
justify-content: center;
}
/* keep the newsletter input/button full-bleed inside the centred column */
.footer-col-connect .gform_wrapper,
.footer-col-connect .ginput_container,
.footer-col-connect input[type="email"],
.footer-col-connect input[type="text"],
.footer-col-connect .gform_button {
width: 100%;
max-width: 100%;
}
/* bottom bar: legacy 50/50 grid split the links into two ragged columns */
.footer-bottom-bar {
height: auto;
padding: 16px 24px 24px;
}
.footer-bottom-nav {
padding-left: 0;
width: 100%;
}
/* The legacy ≤991px block above sets `justify-content: start !important`,
`gap: 0 !important` and `display: grid` on this menu, which beat the plain
declarations here (measured: jc `start`, gap `0px`, items hard against the 24px
padding). Hence the !important on the three fighting properties. */
.footer-bottom-nav .footer-bottom-menu {
display: flex !important;
flex-wrap: wrap;
justify-content: center !important;
gap: 10px 20px !important;
grid-template-columns: none;
padding-left: 0;
margin-bottom: 0;
}
/* the "|" divider is hidden on mobile, so the gap above is the only separation */
.footer-bottom-nav ul li a {
padding-right: 0;
}
.footer-bottom-menu li {
margin-bottom: 0;
}
}
@media (max-width: 600px) {
.subscribe-title,
footer p {
text-align: center;
}
}
/* ---------------------------------------------------------------------------
Punch list 2026-08-28 — mobile image + card overflow
--------------------------------------------------------------------------- */
/* `image_content` images sat off-centre and flush to the right edge on phones, and the
page gained a 15px horizontal scroll (measured docW 429 in a 414px viewport, on
staging AND reproduced locally by injecting staging's Customizer CSS). The cause is
NOT theme code — it is the staging `Appearance → Customize → Additional CSS`, which
sets, with no media query:
.image-content-section .image-content-image-col { padding-right: 60px }
.image-content-section .row.flex-row-reverse .image-content-image-col
{ padding-right: 0; padding-left: 60px }
.img-bottom-content-img-area { padding-left: 50px; padding-right: 50px }
Stacked on mobile that leaves a 60px gutter on one side and 0 on the other (measured:
image x=15 w=339 normally, x=60 w=354 reversed). Those rules are a desktop gutter and
should be wrapped in `@media (min-width: 992px)` there — until they are, the theme
defends itself. Customizer CSS prints after the theme stylesheet, hence !important. */
@media (max-width: 991px) {
.image-content-section .image-content-image-col,
.image-content-section .row.flex-row-reverse .image-content-image-col {
padding-left: 15px !important;
padding-right: 15px !important;
}
.img-bottom-content-img-area {
padding-left: 15px !important;
padding-right: 15px !important;
}
}
/* `img_bottom_content_block`: the white card is `display: flex; align-items: center`,
so each child is sized to its own content and overflows the card equally on both
sides once one WORD is wider than the card's content box. On Experiences,
"CHAMPIONSHIP GOLF" measured x=53 w=307 inside a card at x=65 w=284 (244px of content
box) — the heading hung 12px past each edge of its own box. Stretch the children and
step the heading down so the longest word fits. */
@media (max-width: 767px) {
.img-bottom-content-content-area {
align-items: stretch;
}
.img-bottom-content-content-area>* {
max-width: 100%;
}
.img-bottom-content-content-area h2 {
overflow-wrap: break-word;
}
}
/* 23px left "CHAMPIONSHIP" 307px wide against a 244px content box. Step to the h6 token
(19px, ~253px) so the longest word still fits without break-word actually splitting it
— measured 275px of content box at 375px, 314px at 414px. */
@media (max-width: 575px) {
.img-bottom-content-content-area h2 {
font-size: 19px;
}
}