/* Theme Name: [River Bank Golf Club by Porter One Design] Theme URI: http://#LAUNCHSTEP Description: A custom WordPress theme built for ___ by PorterOneDesign.com, based on an original design by Porter One Design. Author: PorterOneDesign.com Version: 0.21.0 */ /* Based on generic start template version 1.8.5 */ /* Z-index reference: 10 - dropdown nav magic numbers: transition point for mobile->desktop nav @ 920px (half 1920px monitor) rbgc colors: text gray: 595959 button, green dark: 0c683a button, green light: 189c44 button, blue, dark: 0573bb button, blue, light: 339ce0 brand green, and text: 006838 brand blue, and text: 1b75ba light blue card dark: c8e9ff light blue card light: eef8ff light green card dark: b7e2bf light green card light: f9fffa */ /* CSS Variables */ :root { /* Colors */ --button-green-dark: #0c683a; --button-green-light: #189c44; --button-blue-dark: #0573bb; --button-blue-light: #339ce0; --card-blue-dark: #c8e9ff; --card-blue-light: #eef8ff; --card-green-dark: #b7e2bf; --card-green-light: #f9fffa; --gradient-bkg-blue: radial-gradient(var(--card-blue-light) 50%, var(--card-blue-dark) 125%); --gradient-bkg-green: radial-gradient(var(--card-green-light) 50%, var(--card-green-dark) 125%); --text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.65); /* page variables */ --page-max-width: 1920px; --content-max-width: 1440px; /* theme colors */ --main-color: #006838; /* main theme color, links, accenting */ --secondary-color: #1b75ba; /* hover, interactable */ --active-color: #1b75ba; /* active */ --body-background-color: #fff; /* background color */ /* row colors */ --row-white-color: #fff; /* white row background color */ --row-gray-color: #efefef; /* gray row background color */ /* row spacing - controls margin within and between rows and sections. */ --row-spacing: 20px; /* row top/bottom margin */ --row-spacing-480: 30px; /* row top/bottom margin @ 480px */ --row-spacing-920: 40px; /* row top/bottom margin @ 920px */ --row-spacing-1024: 50px; /* row top/bottom margin @ 1024px */ --row-spacing-1334: 60px; /* row top/bottom margin @ 1334px */ /* fonts */ --font-family: 'Noto Sans', sans-serif; --font-bold-font-weight: 700; --font-semibold-font-weight: 600; --font-normal-font-weight: 400; --font-body-text-color: #595959; /* body text*/ --font-headline-family: 'Noto Serif', serif; --font-nav-family: var(--font-headline-family); --font-button-family: var(--font-headline-family); --font-headline-text-color: var(--secondary-color); /* headline text */ --font-headline-margin-top: 25px; /* headline top margin */ --font-headline-margin-bottom: 20px; /* headline bottom margin */ --font-paragraph-margin-top: 17px; /* paragraph top margin */ --font-paragraph-margin-bottom: 17px; /* paragraph bottom margin */ /* base */ --font-h1-size: 24pt; /* h1 font size */ --font-h1-lineheight: 30pt; /* h1 line height */ --font-h1-size-desktop: 36pt; --font-h1-lineheight-desktop: 40pt; --font-h1-smaller-size: 20pt; --font-h1-smaller-lineheight: 26pt; --font-h1-smaller-size-desktop: 24pt; --font-h1-smaller-lineheight-desktop: 30pt; --font-h2-size: 20pt; /* h2 font size */ --font-h2-lineheight: 26pt; /* h2 line height */ --font-h2-size-desktop: 26pt; --font-h2-lineheight-desktop: 32pt; --font-h2-smaller-size: 17pt; --font-h2-smaller-lineheight: 23pt; --font-h2-smaller-size-desktop: 21pt; --font-h2-smaller-lineheight-desktop: 27pt; --font-h3-size: 20pt; /* h3 font size */ --font-h3-lineheight: 26pt; /* h3 line height */ --font-h3-size-desktop: 26pt; --font-h3-lineheight-desktop: 32pt; --font-h3-smaller-size: 16pt; --font-h3-smaller-lineheight: 22pt; --font-h3-smaller-size-desktop: 20pt; --font-h3-smaller-lineheight-desktop: 26pt; --font-h4-size: 18pt; /* h4 font size */ --font-h4-lineheight: 24pt; /* h4 line height */ --font-h4-size-desktop: 24pt; --font-h4-lineheight-desktop: 30pt; --font-h4-smaller-size: 15pt; --font-h4-smaller-lineheight: 21pt; --font-h4-smaller-size-desktop: 19pt; --font-h4-smaller-lineheight-desktop: 25pt; --font-h5-size: 16pt; /* h5 font size */ --font-h5-lineheight: 22pt; /* h5 line height */ --font-h5-size-desktop: 22pt; --font-h5-lineheight-desktop: 28pt; --font-h5-smaller-size: 14pt; --font-h5-smaller-lineheight: 20pt; --font-h5-smaller-size-desktop: 18pt; --font-h5-smaller-lineheight-desktop: 24pt; --font-h6-size: 14pt; /* h6 font size */ --font-h6-lineheight: 20pt; /* h6 line height */ --font-h6-size-desktop: 20pt; --font-h6-lineheight-desktop: 26pt; --font-h6-smaller-size: 13pt; --font-h6-smaller-lineheight: 19pt; --font-h6-smaller-size-desktop: 17pt; --font-h6-smaller-lineheight-desktop: 23pt; --font-copy-size: 12pt; /* base font size */ --font-copy-line-height: 19pt; /* base line height */ --font-copy-size-desktop: 14pt; --font-copy-line-height-desktop: 23pt; --font-copy-size-smaller: 11pt; /* smaller font size */ --font-copy-line-height-smaller: 15pt; /* smaller line height */ --font-copy-size-smaller-desktop: 15pt; --font-copy-line-height-smaller-desktop: 19pt; --font-h-allcaps-size: 11.5pt; /* all caps font size */ /* buttons */ --button-padding: 12px 20px; --button-padding-desktop: 18px 30px; --button-secondary-color: #fff; /* secondary button color (hover, border, and text on button) */ --button-disabled-color: #999; /* disabled button color */ --button-font-size-desktop: 16pt; /* header */ --header-background-color: #fff; --header-logo-max-width: 280px; --header-logo-max-width-desktop: 360px; --header-logo-padding: 10px 0; /* navigation */ --nav-button-hamburger-size: 17px; /* hamburger icon size */ --nav-button-hamburger-padding: 10px; /* hamburger icon padding within button */ --nav-button-padding-lr: 10px; --nav-button-padding-tb: 10px; --nav-button-padding-lr-desktop: 20px; --nav-button-padding-tb-desktop: 20px; --nav-button-font-size: 11pt; --nav-button-line-height: 16pt; --nav-button-font-size-desktop: 13pt; --nav-button-line-height-desktop: 18pt; --nav-desktop-button-hover-background-color: #ffe3c2; /* hover background color for desktop nav buttons */ /* sidebar */ --sidebar-margin: var(--row-spacing); --sidebar-margin-480: var(--row-spacing-480); --sidebar-width-720: 230px; --sidebar-margin-920: var(--row-spacing-920); --sidebar-width-1024: 320px; --sidebar-margin-1024: var(--row-spacing-1024); --sidebar-margin-1334: var(--row-spacing-1334); /* card styles */ --card-padding: 15px; --card-padding-600: 20px; --card-padding-1334: 25px; --card-dropshadow: 0px 0px 8px rgba(0,0,0,0.3); --card-border-radius: 5px; --card-gap-600: 20px; --card-featured-image-max-width: 320px; /* blog styles */ --blog-pagination-gap: 10px; /* accordion styles */ --accordion-border: 1px solid var(--main-color); --accordion-inner-padding: 5px; --accordion-background-color: #fff; --accordion-title-background-color: #fff; --accordion-content-background-color: #fff; --accordion-border-top-left-radius: 7px; --accordion-border-top-right-radius: 7px; --accordion-border-bottom-left-radius: 7px; --accordion-border-bottom-right-radius: 7px; --accordion-button-min-width: 50px; /* hero */ --hero-padding-bottom: 66.66%; /* 920 */ --hero-padding-bottom-920: 40%; --hero-margin-top-920: 0; } /* END CSS Variables */ /* Basic Styles */ html { scroll-behavior: smooth; background-color: var(--body-background-color); } body { margin: 0; padding: 0; } .clearfloat { clear: both !important; } .page-wrapper { max-width: var(--page-max-width); margin-left: auto; margin-right: auto; overflow: hidden; } .fluid { display: flex; width: 90%; max-width: var(--content-max-width); flex-wrap: wrap; margin-left: auto; margin-right: auto; } .content-container { width: 100%; } /* Debugging Styles */ .debug, .error { position: relative; padding: 20px; background-color: #2d2d2d; border: 2px solid var(--main-color); box-shadow: 3px 3px 8px rgba(0,0,0,0.3); word-wrap: break-word; user-select: all; } .debug *, .error * { color: white; } .error { border-color: red; } .debug::after, .error::after { content: 'DEBUGGING STATEMENT:'; position: absolute; top: 0; right: 0; background-color: var(--main-color); color: white; padding: 3px 6px; font-weight: var(--font-bold-font-weight); font-size: 10pt; } .error::after { content: 'ERROR!'; background-color: red; } pre.debug, pre.error { font-family: monospace !important; font-size: 12pt; line-height: 14pt; color: white; } /* END Debugging Styles */ /* END Basic Styles */ /* Text Styles */ body * { font-family: var(--font-family); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-headline-family); font-weight: var(--font-bold-font-weight); color: var(--font-headline-text-color); margin-top: var(--font-headline-margin-top); margin-bottom: var(--font-headline-margin-bottom); } * h1, * h2, * h3, * h4, * h5, * h6 { font-family: var(--font-headline-family); } p, ul, ol, li { font-size: 12pt; line-height: 19pt; margin-top: var(--font-paragraph-margin-top); margin-bottom: var(--font-paragraph-margin-bottom); color: var(--font-body-text-color); } p.smaller, p .smaller, li.smaller, li .smaller { font-size: 11pt; line-height: 18pt; } p strong, li strong { font-weight: var(--font-bold-font-weight); } p em, li em { font-style: italic; } ul, ol { padding-left: 15px; } ul li, ol li { margin-top: calc(var(--font-paragraph-margin-top) / 2); margin-bottom: calc(var(--font-paragraph-margin-top) / 2); padding-left: 15px; margin-left: 30px; } ul li:first-child, ol li:first-child { margin-top: 0px; } ul li:last-child, ol li:last-child { margin-bottom: 0px; } a { color: var(--main-color); text-decoration: underline; transition: color 0.3s; } a:hover, a:focus { color: var(--secondary-color); } a:active { color: var(--active-color); } h1 { font-size: 24pt; line-height: 30pt; } h2 { font-size: 22pt; line-height: 28pt; } h3 { font-size: 20pt; line-height: 26pt; } h4 { font-size: 18pt; line-height: 24pt; } h5 { font-size: 16pt; line-height: 22pt; } h6 { font-size: 14pt; line-height: 20pt; } @media only screen and (min-width: 1334px) { h1 { font-size: var(--font-h1-size-desktop); line-height: var(--font-h1-lineheight-desktop); } h2 { font-size: var(--font-h2-size-desktop); line-height: var(--font-h2-lineheight-desktop); } h3 { font-size: var(--font-h3-size-desktop); line-height: var(--font-h3-lineheight-desktop); } h4 { font-size: var(--font-h4-size-desktop); line-height: var(--font-h4-lineheight-desktop); } h5 { font-size: var(--font-h5-size-desktop); line-height: var(--font-h5-lineheight-desktop); } h6 { font-size: var(--font-h6-size-desktop); line-height: var(--font-h6-lineheight-desktop); } p, ul, ol, li { font-size: var(--font-copy-size-desktop); line-height: var(--font-copy-line-height-desktop); } p.smaller, p .smaller, li.smaller, li .smaller { font-size: var(--font-copy-size-smaller-desktop); line-height: var(--font-copy-line-height-smaller-desktop); } } /* END Text Styles */ /* Button Styles */ .btn { padding: var(--button-padding); border: 2px solid linear-gradient(to top, var(--button-green-dark), var(--button-green-light)); background-color: var(--main-color); background: linear-gradient(to top, var(--button-green-dark), var(--button-green-light)); color: white; font-weight: var(--font-bold-font-weight); text-decoration: none; display: inline-block; border-radius: 100px; position: relative; font-family: var(--font-button-family); } .btn:hover, .btn:focus { text-decoration: underline; /* background: linear-gradient(to top, var(--button-blue-dark), var(--button-blue-light)); */ color: white; } .btn::before { content: ""; position: absolute; z-index: 0; top: -2px; left: -2px; right: -2px; bottom: -2px; border: 2px solid white; border-radius: 100px; } @media only screen and (min-width: 1440px) { .btn { font-size: var(--button-font-size-desktop); padding: var(--button-padding-desktop); } } /* END Button Styles */ /* Header Styles */ .header { display: flex; justify-content: center; flex-wrap: wrap; background-color: var(--header-background-color); } .header.row { padding-top: 0px; padding-bottom: 0px; } .header .fluid { flex-wrap: nowrap; flex-direction: column; align-content: stretch; justify-content: center; } .header .skip-to { display: inline-block; position: absolute; top: -100vh; left: -100vw; padding: var(--button-padding); width: auto; text-decoration: none; } .header .skip-to:focus { top: 5px; left: 5px; background-color: var(--main-color); color: var(--button-secondary-color); } .admin-bar .header .skip-to:focus { top: 35px; } .header .logo-container { display: flex; flex-basis: 100%; justify-content: center; padding: var(--header-logo-padding); } .header .logo-container img, .logo-container img { display: flex; flex-grow: 1; max-width: var(--header-logo-max-width); } .header .prominent-button-container { text-align: center; } .header .desktop.prominent-button-container { display: none; } /* #DEV - nav transition point */ @media only screen and (min-width: 920px) { .header .fluid { flex-wrap: nowrap; flex-direction: row; gap: 20px; } .header .logo-container { flex-basis: content; flex-grow: 1; } .header .nav-container { flex-basis: 100%; flex-shrink: 1; } .header .mobile.prominent-button-container { display: none; } .header .desktop.prominent-button-container { display: flex; align-items: center; } .header .desktop.prominent-button-container a.btn { min-width: 135px; } } @media only screen and (min-width: 1440px) { .header .desktop.prominent-button-container a.btn { min-width: 175px; } .header .logo-container img { max-width: var(--header-logo-max-width-desktop); } } /* END Header Styles */ /* Footer Styles */ .footer.nav-container { margin-bottom: 20px; } /* END Footer Stlyes */ /* Navigation Styles */ /* Universal Navigation Styles */ /* Parent Nav Styles */ .nav-container, .nav-container .fluid { position: relative; } .nav-container a, .nav p { text-decoration: none; color: var(--main-color); display: flex; font-size: var(--nav-button-font-size); line-height: var(--nav-button-line-height); padding-top: var(--nav-button-padding-tb); padding-bottom: var(--nav-button-padding-tb); font-weight: var(--font-bold-font-weight); font-family: var(--font-nav-family); } .nav-container a:hover, .nav-container a:focus { color: var(--secondary-color); } .nav-container ul { overflow: auto; position: relative; display: flex; flex-wrap: wrap; gap: 0px; flex-grow: 1; } .nav-container ul, .nav-container li { /* clear margin/padding */ margin: 0; padding: 0; } .nav-container ul, .nav-container ul li { color: var(--font-body-text-color); font-weight: var(--font-bold-font-weight); list-style: none; } .nav-container ul li { display: flex; align-items: center; width: 100%; padding-top: 0px; padding-bottom: 0px; min-height: 30px; /* revise magic number */ } .nav-container ul li.menu-item-has-children { flex-wrap: wrap; } .nav-container ul li.menu-item-has-children a { flex-basis: calc(100% - 41px); /* check magic number */ } .nav-container ul li ul.sub-menu li:last-child { margin-bottom: 0px; } .nav-container ul li ul.sub-menu li a { flex-basis: 100%; } .nav-container ul li ul.sub-menu li.menu-item-has-children a { flex-basis: calc(100% - 41px); flex-grow: 1; } .nav-container ul li ul.sub-menu li.menu-item-has-children ul.sub-menu li a { flex-basis: 100%; } .nav-container ul li ul.sub-menu { flex-direction: column; } .nav-container ul li::before, .nav-container ol li::before { padding: 0; margin: 0; content: ''; display: none; } .nav-container ul li a:hover, .nav-container ul li a:focus { text-decoration: underline; } .nav-container ul.sub-menu { display: none; margin-left: 14px; border-left: 3px solid var(--main-color); padding-left: 23px; } @media only screen and (min-width: 920px) { .nav-container a { padding-left: var(--nav-button-padding-lr); padding-right: var(--nav-button-padding-lr); } .nav-container ul { gap: 0px; } .nav-container ul li { width: unset; } .nav-container ul li.menu-item-has-children a { flex-basis: 100%; } } @media only screen and (min-width: 1200px) { .nav-container a, .nav p { font-size: var(--nav-button-font-size-desktop); line-height: var(--nav-button-line-height-desktop); } } @media only screen and (min-width: 1440px) { .nav-container a { padding-left: var(--nav-button-padding-lr-desktop); padding-right: var(--nav-button-padding-lr-desktop); } } /* END Parent Nav Styles */ /* Child Nav Styles */ @media only screen and (min-width: 920px) { .nav-container ul { overflow: visible; } .nav-container ul li { position: relative; } } /* END Child Nav Styles */ /* Secondary Nav Styles */ /* Universal Secondary Nav Styles */ .secondary-nav-container { display: flex; background-color: var(--font-body-text-color); width: 100%; flex-direction: column; } .secondary-nav-container a { text-decoration: none; color: white; display: inline-flex; font-size: inherit; line-height: var(--nav-button-line-height); padding-top: var(--nav-button-padding-tb); padding-bottom: var(--nav-button-padding-tb); font-weight: var(--font-bold-font-weight); transition: background-color 0.3s; } .secondary-nav-container a:hover, .secondary-nav-container a:focus { transition: background-color 0.3s; background-color: var(--secondary-color); color: white; text-decoration: underline; } .secondary-nav-container li { list-style-type: none; margin: 0; display: flex; } /* Secondary Nav Font Styles - uncomment to enable */ .secondary-nav-container a { font-size: 10pt; line-height: 14pt; } @media only screen and (min-width: 1024px) { .secondary-nav-container a { font-size: 12pt; line-height: 16pt; } } @media only screen and (min-width: 1200px) { .secondary-nav-container a { font-size: 14pt; line-height: 18pt; } } /* END Secondary Nav Font Styles */ /* END Universal Secondary Nav Styles */ /* Mobile Secondary Nav Styles */ .secondary-nav-container.mobile a { width: 100%; justify-content: center; } @media only screen and (min-width: 920px) { .secondary-nav-container.mobile { display: none; } } /* END Mobile Secondary Nav Styles */ /* Desktop Secondary Nav Styles */ .secondary-nav-container.desktop { background-color: var(--font-body-text-color); padding-right: 0px; flex-direction: row; position: relative; align-self: end; width: auto; } .secondary-nav-container.desktop::after { content: ''; width: 100%; position: absolute; bottom: 0; height: 100%; left: 100%; background-color: var(--font-body-text-color); } /* END Desktop Secondary Nav Styles */ /* END Secondary Nav Styles */ /* END Universal Navigation Styles */ /* Mobile Navigation Menu */ /* Navigation Button Styles */ .mobile.nav-toggle { display: flex; } #menu-icon { display: flex; flex-wrap: nowrap; flex-grow: 1; align-items: center; justify-content: center; padding-top: var(--nav-button-padding-tb); padding-bottom: var(--nav-button-padding-tb); cursor: pointer; transition: all 0.3s; } #menu-icon p { margin-top: 0px; margin-bottom: 0px; transition: color 0.3s; } #menu-icon:hover p, #menu-icon:focus p { color: var(--main-color); text-decoration: underline; } .menu-icon-img { display: flex; align-items: center; width: var(--nav-button-hamburger-size); height: var(--nav-button-hamburger-size); margin-right: var(--nav-button-padding-lr); background: linear-gradient(to top, var(--button-green-dark), var(--button-green-light)); padding: var(--nav-button-hamburger-padding); transition: 0.3s all; } .menu-icon-img svg { width: 17px; height: 17px; } #menu-icon:hover .menu-icon-img, #menu-icon:focus .menu-icon-img { background-color: var(--button-secondary-color); } .menu-icon-img .svg { width: 100%; } .nav-icon { fill: var(--button-secondary-color); transition: 0.3s all; } #menu-icon:hover .nav-icon, #menu-icon:focus .nav-icon { box-shadow: none; } .children-expander { cursor: pointer; color: var(--button-secondary-color); background-color: var(--main-color); padding: 1px 6px; font-weight: 700; font-size: 24px; line-height: 24px; display: flex; font-family: arial; margin-right: 10px; border: 2px solid var(--main-color); transition: color 0.3s, background 0.3s, border 0.3s, text-shadow 0.3s; } .children-expander.collapse { padding: 1px 9px; } .children-expander:hover, .children-expander:active, .children-expander:focus { background-color: var(--button-secondary-color); color: var(--main-color); text-shadow: none; } .nav-container #nav-close-btn { display: flex; height: 31px; padding-top: 9px; width: 40px; margin: 10px; background-color: var(--main-color); border: 2px solid var(--main-color); color: var(--button-secondary-color); position: absolute; top: 0; right: 0; z-index: 100; text-align: center; font-family: arial, sans-serif; font-weight: 700; font-size: 16pt; cursor: pointer; transition: 0.3s all; justify-content: center; } .nav-container #nav-close-btn:hover, .nav-container #nav-close-btn:focus { cursor: pointer; background-color: var(--button-secondary-color); color: var(--main-color); text-shadow: none; } /* END Navigation Button Styles */ /* Parent Nav Styles */ .nav-slideout { display: none; background: radial-gradient(var(--card-green-light), var(--card-green-dark)); } .nav-slideout.active, .active { display: flex; } .nav-container.mobile { padding-top: var(--nav-button-padding-tb); padding-bottom: var(--nav-button-padding-tb); width: 100%; } .mobile.nav-container a { width: 100%; } @media only screen and (min-width: 920px) { .mobile.nav-container { display: none !important; } .mobile.nav-toggle { display: none; } } /* END Parent Nav Styles */ /* END Mobile Navigation Menu */ /* Desktop Navigation Menu */ /* Parent Nav Styles */ .desktop.nav-container { display: none; } .desktop.nav-container ul li a { } .desktop.nav-container ul li a:focus, .desktop.nav-container ul li a:hover { text-decoration: underline; } @media only screen and (min-width: 920px) { .desktop.nav-container { display: flex; flex-direction: column; } .desktop.nav-container ul { justify-content: flex-end; } } /* END Parent Nav Styles */ /* Child Nav Styles */ @media only screen and (min-width: 920px) { /* 1st Level Sub Menus */ .desktop.nav-container ul li a { align-self: stretch; align-items: center; } .desktop.nav-container ul.sub-menu { border-left: none; } .desktop.nav-container ul li:hover ul.sub-menu, .desktop.nav-container ul li:focus ul.sub-menu, .desktop.nav-container ul li:focus-within ul.sub-menu, .desktop.nav-container ul li[aria-expanded="true"] ul.sub-menu { display: flex; position: absolute; top: 100%; left: 0; } .desktop.nav-container ul li:last-child ul.sub-menu, .desktop.nav-container ul li.left-align ul.sub-menu { left: unset; right: 0; } .desktop.nav-container ul.sub-menu { background-color: white; margin-left: 0px; padding-left: 0px; width: auto; z-index: 10; } .desktop.nav-container ul.sub-menu li { display: flex; flex-basis: 100%; flex-grow: 1; align-items: stretch; margin-bottom: 0px; } .desktop.nav-container ul.sub-menu li a { display: inline-block; width: auto; white-space: nowrap; } .desktop.nav-container ul li ul.sub-menu li { margin-bottom: unset; } /* END 1st Level Sub Menus */ /* 2nd Level Sub Menus */ .desktop.nav-container ul.sub-menu li.menu-item-has-children ul.sub-menu { display: none; position: absolute; top: 0; left: 100%; background-color: white; z-index: 10; } .desktop.nav-container ul li:last-child ul.sub-menu li.menu-item-has-children ul.sub-menu, .desktop.nav-container ul li.left-align ul.sub-menu li.menu-item-has-children ul.sub-menu { left: unset; right: 100%; } .desktop.nav-container ul.sub-menu li.menu-item-has-children:hover ul.sub-menu, .desktop.nav-container ul.sub-menu li.menu-item-has-children:focus ul.sub-menu, .desktop.nav-container ul.sub-menu li.menu-item-has-children:focus-within ul.sub-menu, .desktop.nav-container ul.sub-menu li.menu-item-has-children[aria-expanded="true"] ul.sub-menu { display: flex; } /* END 2nd Level Sub Menus */ } /* END Child Nav Styles */ /* END Desktop Navigation Menu */ /* Footer Navigation Menu */ /* Parent Nav Styles */ .footer.nav-container a { text-decoration: underline; width: 100%; } .footer.nav-container ul li.menu-item-has-children a { flex-basis: 100%; } .footer.nav-container ul.sub-menu { display: flex; margin-left: 0px; padding-left: 15px; align-items: stretch; } @media only screen and (min-width: 920px) { .footer.nav-container a { padding-left: var(--nav-button-padding-lr); padding-right: var(--nav-button-padding-lr); } .footer.nav-container ul.sub-menu { margin-left: var(--nav-button-padding-lr); } .footer.nav-container ul.sub-menu { padding-left: 0px; } .footer.nav-container a { width: unset; flex-basis: fit-content; } .footer.nav-container ul li { flex-direction: column; align-items: stretch; } .footer.nav-container ul li:first-child { margin-left: calc(var(--nav-button-padding-lr) * -1); } .footer.nav-container ul li ul li:first-child { margin-left: 0px; } .footer.nav-container ul { align-items: baseline; } } /* END Parent Nav Styles */ /* END Footer Navigation Menu */ /* Left Border Styles - uncomment to enable */ /* @media only screen and (min-width: 920px) { .desktop.nav-container { --dropdown-border-left-width: 3px; } .desktop.nav-container ul li:hover ul.sub-menu, .desktop.nav-container ul li:focus ul.sub-menu { border-left: var(--dropdown-border-left-width) solid var(--main-color); } .nav-container ul.sub-menu li.menu-item-has-children ul.sub-menu { border-left: var(--dropdown-border-left-width) solid var(--main-color); } .nav-container ul li:last-child ul.sub-menu li.menu-item-has-children ul.sub-menu { right: calc(100% + var(--dropdown-border-left-width)); } } */ /* END Left Border Styles */ /* END Navigation Styles */ /* Hero Styles */ .hero { position: relative; overflow: hidden; } .hero.row { padding-top: 0px; padding-bottom: 0px; background-color: var(--main-color); } .hero-placeholder { width: 100%; padding-bottom: 66.66%; } .hero .hero-container { position: absolute; top: 0; left: 0; width: 100%; } .hero .hero-controls { position: absolute; width: 100%; bottom: 0; left: 0; margin-bottom: 20px; } .hero .hero-controls .fluid, .hero .hero-slide .hero-image-wrapper { position: relative; } .hero .hero-slide .hero-image-wrapper .hero-overlay { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.65); } .hero .hero-slide img { width: 100%; } .hero .hero-slide .hero-content .fluid { display: flex; flex-direction: column; position: absolute; top: 0; left: 5%; height: 100%; gap: 7px; text-align: center; justify-content: center; pointer-events: all; } .hero .hero-slide .hero-content .fluid p, .hero .hero-slide .hero-content .fluid h1, .hero .hero-slide .hero-content .fluid h2, .hero .hero-slide .hero-content .fluid h3, .hero .hero-slide .hero-content .fluid h4, .hero .hero-slide .hero-content .fluid h5, .hero .hero-slide .hero-content .fluid h6, .hero .hero-slide .hero-content .fluid ul li, .hero .hero-slide .hero-content .fluid ol li { user-select: text; margin-top: 0px; margin-bottom: 0px; color: white; font-weight: 700; font-family: var(--font-headline-family); } .hero-container.slick-carousel + .hero-placeholder { padding-bottom: calc(var(--hero-padding-bottom) + var(--font-copy-line-height) + 52px); } .hero-image.desktop { display: none; } .hero .hero-content * { font-family: var(--font-headline-family); } .hero .hero-content p { font-size: var(--font-h1-size); line-height: var(--font-h1-lineheight); text-shadow: var(--text-shadow); } @media only screen and (min-width: 920px) { .hero-image.desktop { display: block; } .hero-image.mobile { display: none; } .hero-placeholder { padding-bottom: 33.33%; } .hero .hero-container { height: 0; padding-bottom: var(--hero-padding-bottom-920); } .hero .hero-slide img { margin-top: var(--hero-margin-top-920); } .hero .hero-slide .hero-content .fluid { text-align: left; justify-content: end; width: 50%; } .hero .hero-slide .hero-content .fluid p:last-child { margin-bottom: var(--row-spacing-920); } .hero .hero-slide.slick-slide .hero-content .fluid { height: calc(100% - var(--hero-padding-bottom-920)); } .hero .hero-slide.slick-slide .hero-image-wrapper { position: relative; } .hero .hero-placeholder, .hero-container.slick-carousel + .hero-placeholder { padding-bottom: var(--hero-padding-bottom-920); } .hero .hero-slide .hero-image-wrapper .hero-overlay { background: linear-gradient(to top, rgb(0, 0, 0, 0.4) 0%, rgb(0, 0, 0, 0) 30%); } } @media only screen and (min-width: 1024px) { .hero .hero-slide .hero-content .fluid p:last-child { margin-bottom: var(--row-spacing-1024); } .hero .hero-slide .hero-content .fluid { width: 35%; } } @media only screen and (min-width: 1334px) { .hero .hero-content p { font-size: var(--font-h1-size-desktop); line-height: var(--font-h1-lineheight-desktop); } } @media only screen and (min-width: 1600px) { .hero .hero-slide img { margin-top: var(--hero-interior-margin-top-1600); } .hero .hero-slide .hero-content .fluid { left: calc(calc(100vw - var(--content-max-width)) / 2); } } @media only screen and (min-width: 1920px) { .hero .hero-slide .hero-content .fluid { left: calc(((100vw - var(--content-max-width)) / 2) - ((100vw - var(--page-max-width)) / 2)); } } /* Slick Styles */ .hero .hero-slide.slick-slide { position: relative; } /* Arrows Styles */ .slick-arrows-container { position: absolute; width: 100%; bottom: 0; left: 0; } .slick-arrows-container button { position: absolute; top: -100vh; left: -100vw; padding: var(--button-padding); width: auto; text-decoration: none; } .slick-arrows-container button:focus { top: unset; bottom: 0px; left: 0px; background-color: var(--main-color); color: var(--button-secondary-color); } /* END Arrows Stlyes */ /* Dots Styles */ .slick-dots-container, .slick-dots-container ul { display: flex; justify-content: center; align-items: center; } .slick-dots-container ul { margin: 0; padding: 0; list-style: none; } .slick-dots-container li { margin: 0; padding: 0; } .slick-dots-container li button { font-size: 0; height: 12px; width: 12px; border-radius: 12px; border: 3px solid var(--main-color); padding: 9px; margin: 0px 5px; cursor: pointer; vertical-align: middle; position: relative; } .slick-dots-container button::before { content: ""; position: absolute; z-index: 0; top: -4px; left: -4px; right: -4px; bottom: -4px; border: 2px solid white; border-radius: 100%; } .slick-dots-container .slick-active button { transition: all 0.3s; background-color: var(--main-color); position: relative; } #slick-pause { padding-left: 15px; padding-right: 15px; margin-right: 10px; position: relative; cursor: pointer; } #slick-pause::before { content: ""; position: absolute; z-index: 0; top: -2px; left: -2px; right: -2px; bottom: -2px; border: 2px solid white; } @media only screen and (min-width: 1440px) { #slick-pause { padding-left: 30px; padding-right: 30px; } } /* END Dots Styles */ /* END Slick Stlyes */ /* END Hero Styles */ /* Row Styles */ .row { padding-top: var(--row-spacing); padding-bottom: var(--row-spacing); } .row .content-container *:first-child { margin-top: 0px; } .row .content-container *:last-child { margin-bottom: 0px; } .row .content-container img { width: 100%; display: block; margin: 0; } .row.bkg-white { background-color: var(--row-white-color); } .row.bkg-gray { background-color: var(--row-gray-color); } .row.bkg-light-green-gradient { background: radial-gradient(#f2f6f2, #dae4d9); } @media only screen and (min-width: 480px) { .row { padding-top: var(--row-spacing-480); padding-bottom: var(--row-spacing-480); } } @media only screen and (min-width: 920px) { .row { padding-top: var(--row-spacing-920); padding-bottom: var(--row-spacing-920); } } @media only screen and (min-width: 1024px) { .row { padding-top: var(--row-spacing-1024); padding-bottom: var(--row-spacing-1024); } } @media only screen and (min-width: 1334px) { .row { padding-top: var(--row-spacing-1334); padding-bottom: var(--row-spacing-1334); } } /* END Row Styles */ /* Image with Overlaid Content Row Styles */ .row.image-with-overlaid-content { display: flex; flex-direction: column; position: relative; overflow: hidden; } .row.image-with-overlaid-content .background-image { position: absolute; width: 100%; left: 0; top: 0; } .row.image-with-overlaid-content .background-image img { position: absolute; top: 0; left: 0; width: 100%; } .row.image-with-overlaid-content .background-image .bkg-overlay { position: absolute; top: 0; left: 0; width: 100%; padding-bottom: 300%; z-index: 1; background-color: rgba(0,0,0,0.5); } .row.image-with-overlaid-content .fluid { z-index: 2; } .row.image-with-overlaid-content .fluid .content-container * { color: white; text-shadow: var(--text-shadow); } .row.image-with-overlaid-content .fluid .content-container .btn { text-shadow: none; } @media only screen and (min-width: 920px) { .row.image-with-overlaid-content .background-image { top: -100%; } } /* END Image with Overlaid Content Row Styles */ /* Directions Row Styles */ .row.directions { position: relative; } .row.directions .background-map { margin-top: calc(var(--row-spacing) * -1); margin-bottom: calc(var(--row-spacing) * -1); } .row.directions .background-map iframe { width: 100%; height: 300px; display: block; } .row.directions .fluid { position: absolute; bottom: var(--row-spacing); left: 5%; } .row.directions .fluid p { text-align: right; } @media only screen and (min-width: 480px) { .row.directions .background-map { margin-top: calc(var(--row-spacing-480) * -1); margin-bottom: calc(var(--row-spacing-480) * -1); } .row.directions .fluid { bottom: var(--row-spacing-480); } } @media only screen and (min-width: 920px) { .row.directions .background-map iframe { height: 500px; } .row.directions .background-map { margin-top: calc(var(--row-spacing-920) * -1); margin-bottom: calc(var(--row-spacing-920) * -1); } .row.directions .fluid { bottom: var(--row-spacing-920); } } @media only screen and (min-width: 1024px) { .row.directions .background-map { margin-top: calc(var(--row-spacing-1024) * -1); margin-bottom: calc(var(--row-spacing-1024) * -1); } .row.directions .fluid { bottom: var(--row-spacing-1024); } } @media only screen and (min-width: 1334px) { .row.directions .background-map { margin-top: calc(var(--row-spacing-1334) * -1); margin-bottom: calc(var(--row-spacing-1334) * -1); } .row.directions .fluid { bottom: var(--row-spacing-1334); } } @media only screen and (min-width: 1600px) { .row.directions .fluid { left: calc(calc(100vw - var(--content-max-width)) / 2); } } @media only screen and (min-width: 1920px) { .row.directions .fluid { left: calc(((100vw - var(--content-max-width)) / 2) - ((100vw - var(--page-max-width)) / 2)); } } /* END Directions Row Stlyes */ /* Section Styles */ /* Base Section Styles */ .section { margin-top: var(--row-spacing); margin-bottom: var(--row-spacing); } .section .content-container *:first-child { margin-top: 0px; } .section .content-container *:last-child { margin-bottom: 0px; } .section img { width: 100%; display: block; margin: 0; } h1 + .section, h2 + .section, h3 + .section, h4 + .section, h5 + .section, h6 + .section { margin-top: 20px; } @media only screen and (min-width: 480px) { .section { margin-top: var(--row-spacing-480); margin-bottom: var(--row-spacing-480); } h1 + .section, h2 + .section, h3 + .section, h4 + .section, h5 + .section, h6 + .section { margin-top: 25px; } } @media only screen and (min-width: 920px) { .section { margin-top: var(--row-spacing-920); margin-bottom: var(--row-spacing-920); } } @media only screen and (min-width: 1024px) { .section { margin-top: var(--row-spacing-1024); margin-bottom: var(--row-spacing-1024); } } @media only screen and (min-width: 1334px) { .section { margin-top: var(--row-spacing-1334); margin-bottom: var(--row-spacing-1334); } } /* END Base Section Styles */ /* Image Section Styles */ .section.image-section { display: flex; flex-wrap: nowrap; gap: var(--row-spacing); } .section.image-section img { display: none; width: 100%; height: 100%; min-width: 0; } .section.image-section img:first-child { display: flex; } @media only screen and (min-width: 480px) { .section.image-section { gap: var(--row-spacing-480); } .section.image-section img { display: flex; } .section.image-section.image-section-cols-2 img:last-child, .section.image-section.image-section-cols-3 img:last-child { display: none; } } @media only screen and (min-width: 920px) { .section.image-section { gap: var(--row-spacing-920); } .section.image-section.image-section-cols-2 img:last-child, .section.image-section.image-section-cols-3 img:last-child { display: flex; } } @media only screen and (min-width: 1024px) { .section.image-section { gap: var(--row-spacing-1024); } } @media only screen and (min-width: 1334px) { .section.image-section { gap: var(--row-spacing-1334); } } /* END Image Section Styles */ /* Image Content Section Styles */ .section.image-content-section { display: flex; flex-wrap: wrap; gap: var(--row-spacing); } .image-content-section .images { display: flex; flex-wrap: wrap; gap: var(--row-spacing); } .image-content-section .images img { width: 100%; height: fit-content; min-width: 0; } @media only screen and (min-width: 480px) { .image-content-section .images { gap: var(--row-spacing-480); } .image-content-section .images img { flex-basis: calc(50% - var(--row-spacing-480)); flex-grow: 1; } } @media only screen and (min-width: 920px) { .section.image-content-section { flex-wrap: nowrap; gap: var(--row-spacing-920); } .image-content-section .images { gap: var(--row-spacing-920); } .section.image-content-section .images { flex-basis: 50%; min-width: 50%; flex-grow: 1; } .image-content-section .images img { height: fit-content; } .image-content-section .content { display: flex; align-items: center; } } @media only screen and (min-width: 1024px) { .section.image-content-section { gap: var(--row-spacing-1024); } .image-content-section .images { gap: var(--row-spacing-1024); } } @media only screen and (min-width: 1334px) { .section.image-content-section { gap: var(--row-spacing-1334); } .image-content-section .images { gap: var(--row-spacing-1334); } } /* END Image Content Section Styles */ /* Blog Section Styles */ /* Base Styles */ .card { display: flex; flex-wrap: wrap; flex-direction: column; padding: var(--card-padding); background-color: var(--page-background-color); box-shadow: var(--card-dropshadow); border-radius: var(--card-border-radius); } .card .card-container { display: flex; flex-wrap: wrap; flex-direction: column; } .card .card-title h2 { margin-top: 0px; margin-bottom: calc(var(--font-headline-margin-bottom) / 2); } .card .card-title h2 + p { margin-top: calc(var(--font-paragraph-margin-top) / 2); } .card .card-content { display: flex; flex-wrap: wrap; flex-direction: column; margin-top: var(--font-paragraph-margin-top); margin-bottom: var(--font-paragraph-margin-bottom); } .card .card-featured-image img { width: 100%; height: auto; } .card .card-action { margin-top: var(--font-paragraph-margin-top); margin-bottom: var(--font-paragraph-margin-bottom); } .post-cards { display: flex; flex-direction: column; flex-wrap: wrap; gap: var(--row-spacing); } .post-cards .card { flex-grow: 1; background-color: var(--body-background-color); } .blog-action-container, .testimonials-action-container { display: flex; justify-content: stretch; margin-top: var(--row-spacing); margin-bottom: var(--row-spacing); } .blog-action-container p, .testimonials-action-container p { display: flex; gap: var(--blog-pagination-gap); flex-wrap: wrap; align-items: baseline; margin: 0; } .blog-action-container p .current.btn { background-color: var(--button-disabled-color); border-color: var(--button-disabled-color); color: var(--body-background-color); } @media only screen and (min-width:480px) { .post-cards { gap: var(--row-spacing-480); } .post-cards .card { flex-basis: calc(50% - var(--row-spacing-480) * 2); } .blog-action-container, .testimonials-action-container { margin-top: var(--row-spacing-480); margin-bottom: var(--row-spacing-480); } } @media only screen and (min-width:920px) { .post-cards { gap: var(--row-spacing-920); } .post-cards .card { flex-basis: calc(50% - var(--row-spacing-920) * 2); } .blog-action-container, .testimonials-action-container { margin-top: var(--row-spacing-920); margin-bottom: var(--row-spacing-920); } } @media only screen and (min-width:1024px) { .post-cards { gap: var(--row-spacing-1024); } .post-cards .card { flex-basis: calc(50% - var(--row-spacing-1024) * 2); } .blog-action-container, .testimonials-action-container { margin-top: var(--row-spacing-1024); margin-bottom: var(--row-spacing-1024); } } @media only screen and (min-width:1334px) { .post-cards { gap: var(--row-spacing-1334); } .post-cards .card { flex-basis: calc(50% - var(--row-spacing-1334) * 2); } .blog-action-container, .testimonials-action-container { margin-top: var(--row-spacing-1334); margin-bottom: var(--row-spacing-1334); } } /* END Base Styles */ /* Container Query Styles */ @supports (contain: layout inline-size) { .post-cards-container { container-name: post-cards; container-type: inline-size; } } @container post-cards (width >= 551px) { .card { padding: var(--card-padding-600); } .card .card-content { flex-direction: row; gap: var(--card-gap-600); } .card .card-content .card-featured-image { display: flex; flex-basis: 50%; max-width: var(--card-featured-image-max-width); flex-shrink: 1; } .card .card-content .card-featured-image img { align-self: flex-start; width: 100%; height: auto; } .card .card-content p { flex-basis: calc(50% - var(--card-gap-600)); margin-top: 0px; flex-grow: 1; } } @container post-cards (width >= 920px) { .post-cards { flex-direction: row; flex-wrap: wrap; align-items: flex-start; } } /* END Container Query Styles */ /* Fallback Styles */ @media only screen and (min-width: 902px) { /* #DEV - @container post-cards (width >= 551px) fallback, duplicate those styles here before launch, adjust media min-width as needed */ } @media only screen and (min-width: 1445px) { /* #DEV - @container post-cards (width >= 920px) fallback, duplicate those styles here before launch, adjust media min-width as needed */ } /* END Fallback Styles */ /* END Blog Section Styles */ /* Testimonials Section Styles */ .section-testimonials .post-cards { display: grid; } .section-testimonials .post-cards .card-container { gap: var(--font-paragraph-margin-top); } .section-testimonials .post-cards p { margin: 0; } @media only screen and (min-width: 720px) { .post-cards.columns-2, .post-cards.columns-3, .post-cards.columns-4 { grid-template-columns: repeat(2, 1fr); } } @media only screen and (min-width: 1024px) { .post-cards.columns-3, .post-cards.columns-4 { grid-template-columns: repeat(3, 1fr); } } @media only screen and (min-width: 1440px) { .post-cards.columns-4 { grid-template-columns: repeat(4, 1fr); } } /* END Testimonials Section Styles */ /* Section w/ Aside Stlyes */ .section-content-with-aside { display: flex; flex-direction: column; gap: var(--row-spacing); } @media only screen and (min-width: 480px) { .section-content-with-aside { display: flex; flex-direction: column; gap: var(--row-spacing-480); } } @media only screen and (min-width: 920px) { .section-content-with-aside { flex-direction: row; gap: calc(var(--row-spacing-920) * 2); } .section-content-with-aside .main-section, .section-content-with-aside .aside-section { flex-basis: 50%; } .section-content-with-aside.aside-width-60 .aside-section { flex-basis: 60%; } .section-content-with-aside.aside-width-60 .main-section { flex-basis: 40%; } .section-content-with-aside.aside-width-70 .aside-section { flex-basis: 70%; } .section-content-with-aside.aside-width-70 .main-section { flex-basis: 30%; } } @media only screen and (min-width: 1024px) { .section-content-with-aside { gap: calc(var(--row-spacing-1024) * 2); } } @media only screen and (min-width: 1334) { .section-content-with-aside { gap: calc(var(--row-spacing-1334) * 2); } } /* END Section w/ Aside Stlyes */ /* Image Bucket Section Styles */ .section.image-buckets { display: flex; flex-direction: column; gap: var(--row-spacing); } .section.image-buckets .image-bucket { overflow: hidden; border-radius: 5px; box-shadow: var(--card-dropshadow); } .section.image-buckets .image-bucket .bucket-content { padding: var(--card-padding); } .section.image-buckets .image-bucket .bucket-content .btn { background: linear-gradient(var(--button-blue-light), var(--button-blue-dark)); border-color: linear-gradient(var(--button-blue-light), var(--button-blue-dark)); } @media only screen and (min-width: 480px) { .section.image-buckets { gap: var(--row-spacing-480); } } @media only screen and (min-width: 600px) { .section.image-buckets .image-bucket .bucket-content { padding: var(--card-padding-600); } } @media only screen and (min-width: 920px) { .section.image-buckets { flex-direction: row; gap: var(--row-spacing-920); } .section.image-buckets .image-bucket { flex-basis: 33.3%; } } @media only screen and (min-width: 1024px) { .section.image-buckets { gap: var(--row-spacing-1024); } } @media only screen and (min-width: 1334px) { .section.image-buckets { gap: var(--row-spacing-1334); } .section.image-buckets .image-bucket .bucket-content { padding: var(--card-padding-1334); } } /* END Image Bucket Section Styles */ /* Element Styles */ .section-elements { display: flex; flex-direction: column; flex-wrap: wrap; gap: var(--row-spacing); margin-top: var(--row-spacing); } .section-elements .element.bucket { border-radius: var(--card-border-radius); box-shadow: var(--card-dropshadow); padding: var(--card-padding); } .bkg-white { background-color: white; } .bkg-blue-gradient { background: var(--gradient-bkg-blue); border: 1px solid var(--secondary-color); } .bkg-blue-gradient .content strong { color: var(--secondary-color); } .bkg-green-gradient { background: var(--gradient-bkg-green); border: 1px solid var(--main-color); } .bkg-green-gradient .content .strong { color: var(--main-color); } .bkg-green-gradient .content h1, .bkg-green-gradient .content h2, .bkg-green-gradient .content h3, .bkg-green-gradient .content h4, .bkg-green-gradient .content h5, .bkg-green-gradient .content h6 { color: var(--main-color); } .bkg-blue-gradient .content p a { color: var(--secondary-color); } .element.bucket .content h1, .element.bucket .content h2, .element.bucket .content h3, .element.bucket .content h4, .element.bucket .content h5, .element.bucket .content h6 { margin-top: var(--font-paragraph-margin-top); margin-bottom: var(--font-paragraph-margin-bottom); } .element.bucket .content *:first-child { margin-top: 0px; } .element.bucket .content *:last-child { margin-bottom: 0px; } .element.bucket .content h1, .image-bucket .bucket-content h1 { font-size: var(--font-h1-smaller-size); line-height: var(--font-h1-smaller-lineheight); } .element.bucket .content h2, .image-bucket .bucket-content h2 { font-size: var(--font-h2-smaller-size); line-height: var(--font-h2-smaller-lineheight); } .element.bucket .content h3, .image-bucket .bucket-content h3 { font-size: var(--font-h3-smaller-size); line-height: var(--font-h3-smaller-lineheight); } .element.bucket .content h4, .image-bucket .bucket-content h4 { font-size: var(--font-h4-smaller-size); line-height: var(--font-h4-smaller-lineheight); } .element.bucket .content h5, .image-bucket .bucket-content h5 { font-size: var(--font-h5-smaller-size); line-height: var(--font-h5-smaller-lineheight); } .element.bucket .content h6, .image-bucket .bucket-content h6 { font-size: var(--font-h6-smaller-size); line-height: var(--font-h6-smaller-lineheight); } .element.bucket.contact-bucket .content h1 { font-size: var(--font-h1-size); line-height: var(--font-h1-lineheight); } .element.bucket.contact-bucket .content h2 { font-size: var(--font-h2-size); line-height: var(--font-h2-lineheight); } .element.bucket.contact-bucket .content h3 { font-size: var(--font-h3-size); line-height: var(--font-h3-lineheight); } .element.bucket.contact-bucket .content h4 { font-size: var(--font-h4-size); line-height: var(--font-h4-lineheight); } .element.bucket.contact-bucket .content h5 { font-size: var(--font-h5-size); line-height: var(--font-h5-lineheight); } .element.bucket.contact-bucket .content h6 { font-size: var(--font-h6-size); line-height: var(--font-h6-lineheight); } .element.bucket { display: flex; flex-direction: row; gap: var(--row-spacing); } .element.bucket .image { max-width: 50px; display: flex; align-items: flex-start; margin-top: 5px; } .element.image { border-radius: var(--card-border-radius); box-shadow: var(--card-dropshadow); overflow: hidden; } .bucket.season-over-icon .image img { max-height: 60px; } .bucket.holiday-icon .image img { max-height: 150px; } @media only screen and (min-width: 480px) { .section-elements { gap: var(--row-spacing-480); margin-top: var(--row-spacing-480); } } @media only screen and (min-width: 600px) { .section-elements .element.bucket { padding: var(--card-padding-600); } } @media only screen and (min-width: 920px) { .section-elements { gap: var(--row-spacing-920); margin-top: var(--row-spacing-920); } } @media only screen and (min-width: 1334px) { .section-elements { gap: var(--row-spacing-1024); margin-top: var(--row-spacing-1024); } .section-elements .element.bucket { padding: var(--card-padding-1334); } .element.bucket .content h1, .image-bucket .bucket-content h1 { font-size: var(--font-h1-smaller-size-desktop); line-height: var(--font-h1-smaller-lineheight-desktop); } .element.bucket .content h2, .image-bucket .bucket-content h2 { font-size: var(--font-h2-smaller-size-desktop); line-height: var(--font-h2-smaller-lineheight-desktop); } .element.bucket .content h3, .image-bucket .bucket-content h3 { font-size: var(--font-h3-smaller-size-desktop); line-height: var(--font-h3-smaller-lineheight-desktop); } .element.bucket .content h4, .image-bucket .bucket-content h4 { font-size: var(--font-h4-smaller-size-desktop); line-height: var(--font-h4-smaller-lineheight-desktop); } .element.bucket .content h5, .image-bucket .bucket-content h5 { font-size: var(--font-h5-smaller-size-desktop); line-height: var(--font-h5-smaller-lineheight-desktop); } .element.bucket .content h6, .image-bucket .bucket-content h6 { font-size: var(--font-h6-smaller-size-desktop); line-height: var(--font-h6-smaller-lineheight-desktop); } .element.bucket.contact-bucket .content h1 { font-size: var(--font-h1-size-desktop); line-height: var(--font-h1-lineheight-desktop); } .element.bucket.contact-bucket .content h2 { font-size: var(--font-h2-size-desktop); line-height: var(--font-h2-lineheight-desktop); } .element.bucket.contact-bucket .content h3 { font-size: var(--font-h3-size-desktop); line-height: var(--font-h3-lineheight-desktop); } .element.bucket.contact-bucket .content h4 { font-size: var(--font-h4-size-desktop); line-height: var(--font-h4-lineheight-desktop); } .element.bucket.contact-bucket .content h5 { font-size: var(--font-h5-size-desktop); line-height: var(--font-h5-lineheight-desktop); } .element.bucket.contact-bucket .content h6 { font-size: var(--font-h6-size-desktop); line-height: var(--font-h6-lineheight-desktop); } .element.bucket .image { max-width: 70px; } } /* Element with overlaid content styles */ .element.image-with-overlaid-content { display: flex; flex-direction: column; position: relative; overflow: hidden; border-radius: 5px; box-shadow: var(--card-dropshadow); padding: var(--card-padding); } .element.image-with-overlaid-content .bkg-image { position: absolute; width: 100%; left: 0; top: 0; } .element.image-with-overlaid-content .bkg-image img { position: absolute; top: 0; left: 0; width: 125%; } .element.image-with-overlaid-content .bkg-image .bkg-overlay { position: absolute; top: 0; left: 0; width: 100%; padding-bottom: 400%; z-index: 1; background-color: rgba(0,0,0,0.5); } .element.image-with-overlaid-content .content { z-index: 2; } .element.image-with-overlaid-content .content * { color: white; text-shadow: var(--text-shadow); } .element.image-with-overlaid-content .content .btn { text-shadow: none; } @media only screen and (min-width: 600px) { .element.image-with-overlaid-content { padding: var(--card-padding-600); } } @media only screen and (min-width: 1334px) { .element.image-with-overlaid-content { padding: var(--card-padding-1334); } } /* END Element with overlaid content styles */ /* END Element Styles */ /* END Section Styles */ /* Sidebar Styles */ .sidebar { background-color: #d25d13; background: linear-gradient(45deg, #d25d13, #ea8c02, #d25d13); margin-left: auto; margin-right: auto; width: 90%; border-radius: 5px; margin-top: var(--sidebar-margin); margin-bottom: var(--sidebar-margin); } .sidebar-header { background-color: #d25d13; padding: 15px 15px; border-radius: 5px 5px 0px 0px; } .sidebar-content { padding: 15px 15px; } .sidebar-header *:first-child, .sidebar-content *:first-child{ margin-top: 0px; } .sidebar-header *:last-child, .sidebar-content *:last-child { margin-bottom: 0px; } .sidebar * { color: white; font-weight: 700; } .sidebar a:hover, .sidebar a:focus { color: #ffecc2; } @media only screen and (min-width: 480px) { .sidebar { margin-top: var(--sidebar-margin-480); margin-bottom: var(--sidebar-margin-480); } } @media only screen and (min-width: 720px) { .sidebar { width: var(--sidebar-width-720); margin-left: 0px; margin-right: 0px; position: fixed; right: 5%; opacity: 0; animation: 0.3s sidebarFadeIn forwards; } @keyframes sidebarFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .sticky { position: fixed; } .sidebar-wrapper .row .fluid .content-container { width: calc(100% - var(--sidebar-width-720) - var(--sidebar-margin-480)); } } @media only screen and (min-width: 920px) { .sidebar { margin-top: var(--sidebar-margin-920); margin-bottom: var(--sidebar-margin-920); } .sidebar-wrapper .row .fluid .content-container { width: calc(100% - var(--sidebar-width-720) - var(--sidebar-margin-920)); } } @media only screen and (min-width: 1024px) { .sidebar { width: var(--sidebar-width-1024); right: 5%; margin-top: var(--sidebar-margin-1024); margin-bottom: var(--sidebar-margin-1024); } .sidebar-wrapper .row .fluid .content-container { width: calc(100% - var(--sidebar-width-1024) - var(--sidebar-margin-1024)); } } @media only screen and (min-width: 1334px) { .sidebar { margin-top: var(--sidebar-margin-1334); margin-bottom: var(--sidebar-margin-1334); } .sidebar-wrapper .row .fluid .content-container { width: calc(100% - var(--sidebar-width-1024) - var(--sidebar-margin-1334)); } } @media only screen and (min-width: 1600px) { .sidebar { right: calc(((100vw - (100vw - 100%)) - var(--content-max-width)) / 2); } } /* END Sidebar Styles */ /* Accordion Styles */ .accordion { border-radius: 5px; overflow: hidden; } .accordion-panel { border: var(--accordion-border); background-color: var(--accordion-background-color); } .accordion-panel + .accordion-panel { border-top: none; } .accordion-title { cursor: pointer; } .accordion-title.ui-state-active { cursor: default; } .accordion-title { display: flex; flex-wrap: nowrap; background-color: var(--accordion-title-background-color); } .accordion-title .accordion-button { display: flex; align-items: center; justify-content: center; min-width: var(--accordion-button-min-width); background-color: var(--main-color); } .accordion-title .accordion-button::after { content: "+"; font-weight: 700; color: var(--button-secondary-color); } .accordion-title.ui-state-active .accordion-button::after { content: "-"; } .accordion-title .accordion-heading { flex-grow: 1; background: var(--gradient-bkg-green); border: 1px solid var(--main-color); padding: var(--card-padding) } .accordion-content { padding: var(--accordion-inner-padding); border-top: var(--accordion-border); background-color: var(--accordion-content-background-color); } .accordion-heading * { color: var(--main-color); } .accordion-heading h1 { font-size: var(--font-h1-smaller-size); line-height: var(--font-h1-smaller-lineheight); } .accordion-heading h2 { font-size: var(--font-h2-smaller-size); line-height: var(--font-h2-smaller-lineheight); } .accordion-heading h3 { font-size: var(--font-h3-smaller-size); line-height: var(--font-h3-smaller-lineheight); } .accordion-heading h4 { font-size: var(--font-h4-smaller-size); line-height: var(--font-h4-smaller-lineheight); } .accordion-heading h5 { font-size: var(--font-h5-smaller-size); line-height: var(--font-h5-smaller-lineheight); } .accordion-heading h6 { font-size: var(--font-h6-smaller-size); line-height: var(--font-h6-smaller-lineheight); } .accordion-content { border-left: 1px solid var(--main-color); border-right: 1px solid var(--main-color); background-color: var(--card-green-light); padding: var(--card-padding); } .accordion .accordion-content:last-child { border-bottom: 1px solid var(--main-color); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } /* Border Radius Styles */ .accordion .accordion-title:first-child .accordion-heading { border-top-right-radius: 5px; } .accordion .accordion-title:nth-last-child(2) .accordion-heading { border-bottom-right-radius: 5px; } .accordion .accordion-title:nth-last-child(2).ui-state-active .accordion-heading { border-bottom-right-radius: 0px; } .accordion .accordion-panel:first-child .accordion-button, .accordion .accordion-panel:first-child, .accordion .accordion-panel:first-child .accordion-title { border-top-left-radius: var(--accordion-border-top-left-radius); } .accordion .accordion-panel:first-child .accordion-title, .accordion .accordion-panel:first-child { border-top-right-radius: var(--accordion-border-top-right-radius); } .accordion .accordion-panel:last-child .accordion-button, .accordion .accordion-panel:last-child, .accordion .accordion-panel:last-child .accordion-title, .accordion .accordion-panel:last-child .accordion-content { border-bottom-left-radius: var(--accordion-border-bottom-left-radius); } .accordion .accordion-panel:last-child .accordion-title { border-bottom-right-radius: var(--accordion-border-bottom-right-radius); } .accordion .accordion-title.ui-state-active .accordion-button, .accordion .accordion-panel:last-child .accordion-title.ui-state-active { border-bottom-left-radius: 0px; } .accordion .accordion-panel:last-child .accordion-content, .accordion .accordion-panel:last-child .accordion-title, .accordion .accordion-panel:last-child .accordion-heading, .accordion .accordion-panel:last-child { border-bottom-right-radius: var(--accordion-border-bottom-right-radius); } /* END Border Radius Styles */ /* END Accordion Styles */ /* Cardinal Locator Styles */ .section.bh-sl-container .bh-sl-loc-list { overflow-y: scroll; max-height: 50vh; } .section.bh-sl-container button { border-radius: 0; } .section.bh-sl-container button p { color: var(--button-secondary-color); font-weight: var(--font-bold-font-weight); } .section.bh-sl-container button:hover p, .section.bh-sl-container button:focus p { color: var(--main-color); } .section.bh-sl-container .bh-sl-map-container .location-details a { color: var(--main-color); } .section.bh-sl-container .bh-sl-map-container .location-details a:hover, .section.bh-sl-container .bh-sl-map-container .location-details a:focus { color: var(--main-color); text-decoration: underline; } .section.bh-sl-container .bh-sl-map-container a { color: var(--button-secondary-color); } .section.bh-sl-container .bh-sl-map-container a:hover, .section.bh-sl-container .bh-sl-map-container a:focus { color: var(--main-color); text-decoration: none; } .section.bh-sl-container .input-container input { width: 100%; } .section.bh-sl-container .bh-sl-filters li label { display: flex; } .location-featured-image { container-type: inline-size; container-name: location-featured-image; } .row .location-featured-image img { display: none; width: 100%; height: 100%; object-fit: cover; } .row .bh-sl-container .bh-sl-loc-list .list-details .list-content, .row .bh-sl-container .bh-sl-loc-list .list-details { container-type: inline-size; container-name: location-list; } .row .bh-sl-container .bh-sl-loc-list ul li { padding: 0; } .row .bh-sl-container .bh-sl-loc-list .list-details { width: 100%; margin: 0; } .row .bh-sl-container .bh-sl-loc-list .list-details .list-content { padding: 0; } .row .list-content .text-content p, .row .list-content .text-content h3 { margin: 0; } .row .list-content .text-content { padding: 20px; display: flex; flex-direction: column; gap: 15px; } .frame-locations { width: 100%; } @container location-list (min-width: 450px) { .row .location-featured-image img { display: block; } .row .bh-sl-container .bh-sl-loc-list .list-details .list-content { display: flex; } .row .list-content .text-content { flex-basis: 35%; flex-grow: 1; flex-shrink: 1; } } @container location-list (min-width: 600px) { .location-featured-image { flex-grow: 1; flex-shrink: 0; } } @media only screen and (min-width: 1024px) { .section.bh-sl-container .bh-sl-loc-list { max-height: unset; } } @media only screen and (min-width: 1024px) { .row .bh-sl-container .bh-sl-map-container { display: flex; flex-direction: row-reverse; } .row .bh-sl-container .bh-sl-map { width: 100%; flex-basis: 100%; } .row .bh-sl-container .bh-sl-loc-list { width: 100%; } } /* Info Window Styles */ .row .content-container .location-name-infowindow { margin-top: 10px; width: calc(100% - 30px); } .row .gm-style-iw-chr { position: absolute; } .row .gm-style-iw.gm-style-iw-c { display: flex; flex-direction: row-reverse; min-width: 300px !important; } /* END Info Window Styles */ /* END Cardinal Locator Styles */ /* Ninja Forms Styles */ .row .nf-form-content { padding: 0; } .row .nf-before-form-content .nf-form-fields-required { margin-bottom: 10px; } .row .nf-form-fields-required, .row .nf-field-label label { font-family: var(--font-family); color: var(--font-body-text-color); font-size: var(--font-copy-size); font-weight: var(--font-body-text-weight); line-height: var(--font-copy-line-height); } .row .nf-field, .row .nf-after-field .nf-error-wrap { margin-bottom: 10px; } .row .nf-form-content .nf-field, .row .nf-form-layout .nf-before-form-content { margin-bottom: var(--font-paragraph-margin-bottom); } .row .nf-form-content input { padding: 7px 10px; } .row .nf-form-content .submit-wrap input { padding: var(--button-padding); border: 2px solid linear-gradient(to top, var(--button-green-dark), var(--button-green-light)); background-color: var(--main-color); background: linear-gradient(to top, var(--button-green-dark), var(--button-green-light)); color: white; font-weight: var(--font-bold-font-weight); text-decoration: none; display: inline-block; border-radius: 100px; position: relative; font-family: var(--font-button-family); cursor: pointer; } .row .nf-form-content .submit-wrap input:hover, .row .nf-form-content .submit-wrap input:focus { text-decoration: underline; } .row .submit-container .nf-field { margin-bottom: 0px; } @media only screen and (min-width: 920px) { .row .nf-form-content .field-wrap { display: flex; flex-direction: row; gap: 20px; } .row .nf-form-content .field-wrap .nf-field-label { flex-basis: 100px; text-align: right; align-content: center; margin-bottom: 0px; } .row .nf-form-content .field-wrap .nf-field-label .label { margin-bottom: 0px; } .row .nf-form-content .field-wrap .nf-field-element { flex-shrink: 1; width: auto; flex-basis: calc(100% - 120px); } .row .nf-form-content .field-wrap .nf-field-element input { width: 100%; } .row .nf-form-content .submit-wrap .nf-field-element input { width: auto; flex-basis: unset; margin-left: 100px; } .row .nf-form-content .field-wrap.submit-wrap .nf-field-label { display: none; } } /* END Ninja Forms Styles */ /* Contact Icon Section */ .icon-sections { display: flex; flex-direction: column; gap: var(--font-paragraph-margin-bottom); margin-top: var(--font-paragraph-margin-top); margin-left: 20px; } .icon-sections .icon-section { display: flex; flex-direction: row; gap: 10px; } .icon-sections .icon-section .icon { width: 32px; } .icon-sections .icon-section .icon img { width: auto; height: 30px; max-height: 30px; margin-top: 5px; } /* END Contact Icon Section */