/* Theme Name: [RISE by Porter One Design] Theme URI: https://#LAUNCHSTEP Description: A custom WordPress theme built for RISE by PorterOneDesign.com, based on an original design by Porter One Design. Author: PorterOneDesign.com Version: 0.2.2 */ /* Based on P1D WP Start v1.8.4*/ /* Z-index reference: 10 - dropdown nav magic numbers: transition point for mobile->desktop nav @ 920px (half 1920px monitor) */ /* CSS Variables */ :root { /* page variables */ --page-max-width: 1920px; --content-max-width: 920px; /* theme colors */ --main-color: #996E24; /* main theme color, links, accenting */ --secondary-color: #A56909; /* hover, interactable */ --active-color: #A56909; /* 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: "Nunito", sans-serif; /* Copy font */ --font-bold-font-weight: 700; --font-semibold-font-weight: 600; --font-normal-font-weight: 400; --font-body-text-color: #444345; /* body text*/ --font-headline-family: "Cormorant Garamond", serif; /* headline font */ --font-headline-text-color: #293a38; /* 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 */ /* desktop */ --font-headline-margin-top-desktop: 35px; /* headline top margin */ --font-headline-margin-bottom-desktop: 30px; /* headline bottom margin */ --font-paragraph-margin-top-desktop: 22px; /* paragraph top margin */ --font-paragraph-margin-bottom-desktop: 22px; /* paragraph bottom margin */ /* base */ --font-h1-size: 28pt; /* h1 font size */ --font-h1-lineheight: 34pt; /* h1 line height */ --font-h1-smaller-size: 24pt; --font-h1-smaller-lineheight: 30pt; --font-h2-size: 26pt; /* h2 font size */ --font-h2-lineheight: 32pt; /* h2 line height */ --font-h2-smaller-size: 21pt; --font-h2-smaller-lineheight: 27pt; --font-h3-size: 24pt; /* h3 font size */ --font-h3-lineheight: 30pt; /* h3 line height */ --font-h3-smaller-size: 20pt; --font-h3-smaller-lineheight: 26pt; --font-h4-size: 22pt; /* h4 font size */ --font-h4-lineheight: 28pt; /* h4 line height */ --font-h4-smaller-size: 19pt; --font-h4-smaller-lineheight: 25pt; --font-h5-size: 20pt; /* h5 font size */ --font-h5-lineheight: 26pt; /* h5 line height */ --font-h5-smaller-size: 18pt; --font-h5-smaller-lineheight: 24pt; --font-h6-size: 18pt; /* h6 font size */ --font-h6-lineheight: 24pt; /* h6 line height */ --font-h6-smaller-size: 17pt; --font-h6-smaller-lineheight: 23pt; --font-copy-size: 12pt; /* base font size */ --font-copy-line-height: 19pt; /* base line height */ --font-copy-size-smaller: 12pt; /* smaller font size */ --font-copy-line-height-smaller: 16pt; /* smaller line height */ --font-h-allcaps-size: 12pt; /* all caps font size */ /* Desktop (920+) */ --font-h1-size-desktop: 38pt; /* h1 font size */ --font-h1-lineheight-desktop: 44pt; /* h1 line height */ --font-h1-smaller-size-desktop: 34pt; --font-h1-smaller-lineheight-desktop: 40pt; --font-h2-size-desktop: 32pt; /* h2 font size */ --font-h2-lineheight-desktop: 38pt; /* h2 line height */ --font-h2-smaller-size-desktop: 27pt; --font-h2-smaller-lineheight-desktop: 33pt; --font-h3-size-desktop: 28pt; /* h3 font size */ --font-h3-lineheight-desktop: 34pt; /* h3 line height */ --font-h3-smaller-size-desktop: 24pt; --font-h3-smaller-lineheight-desktop: 30pt; --font-h4-size-desktop: 26pt; /* h4 font size */ --font-h4-lineheight-desktop: 32pt; /* h4 line height */ --font-h4-smaller-size-desktop: 23pt; --font-h4-smaller-lineheight-desktop: 29pt; --font-h5-size-desktop: 24pt; /* h5 font size */ --font-h5-lineheight-desktop: 30pt; /* h5 line height */ --font-h5-smaller-size-desktop: 22pt; --font-h5-smaller-lineheight-desktop: 28pt; --font-h6-size-desktop: 22pt; /* h6 font size */ --font-h6-lineheight-desktop: 28pt; /* h6 line height */ --font-h6-smaller-size-desktop: 21pt; --font-h6-smaller-lineheight-desktop: 27pt; --font-copy-size-desktop: 14pt; /* base font size */ --font-copy-line-height-desktop: 24pt; /* base line height */ --font-copy-size-smaller-desktop: 13pt; /* smaller font size */ --font-copy-line-height-smaller-desktop: 17pt; /* smaller line height */ --font-h-allcaps-size-desktop: 13pt; /* all caps font size */ /* buttons */ --button-padding: 7px 14px; --button-secondary-color: #fff; /* secondary button color (hover, border, and text on button) */ --button-disabled-color: #999; /* disabled button color */ /* header */ --header-background-color: #fff; --header-logo-max-width: 220px; --header-logo-padding: 10px 0; --header-logo-padding-desktop: 20px 0; /* navigation */ --nav-font-family: var(--font-headline-family); --nav-button-hamburger-size: 17px; /* hamburger icon size */ --nav-button-hamburger-padding: 10px; /* hamburger icon padding within button */ --nav-button-padding-lr: 15px; --nav-button-padding-tb: 10px; --nav-button-font-size: 15pt; --nav-button-line-height: 19pt; /* 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-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: 15px; --accordion-inner-padding-desktop: 25px; --accordion-background-color: #fff; --accordion-title-background-color: #fff; --accordion-content-background-color: #fff; --accordion-border-top-left-radius: 0px; --accordion-border-top-right-radius: 0px; --accordion-border-bottom-left-radius: 0px; --accordion-border-bottom-right-radius: 0px; --accordion-button-min-width: 50px; /* hero */ --hero-padding-bottom: 66.66%; /* 920 */ --hero-padding-bottom-920: 33.33%; --hero-margin-top-920: -16.65%; } /* 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); } p, ul, ol, li { font-size: var(--font-copy-size); line-height: var(--font-copy-line-height); 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: var(--font-copy-size-smaller); line-height: var(--font-copy-line-height-smaller); } 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: var(--font-h1-size); line-height: var(--font-h1-lineheight); } h2 { font-size: var(--font-h2-size); line-height: var(--font-h2-lineheight); } h3 { font-size: var(--font-h3-size); line-height: var(--font-h3-lineheight); } h4 { font-size: var(--font-h4-size); line-height: var(--font-h4-lineheight); } h5 { font-size: var(--font-h5-size); line-height: var(--font-h5-lineheight); } h6 { font-size: var(--font-h6-size); line-height: var(--font-h6-lineheight); } h1.smaller { font-size: var(--font-h1-smaller-size); line-height: var(--font-h1-smaller-lineheight); } h2.smaller { font-size: var(--font-h2-smaller-size); line-height: var(--font-h2-smaller-lineheight); } h3.smaller { font-size: var(--font-h3-smaller-size); line-height: var(--font-h3-smaller-lineheight); } h4.smaller { font-size: var(--font-h4-smaller-size); line-height: var(--font-h4-smaller-lineheight); } h5.smaller { font-size: var(--font-h5-smaller-size); line-height: var(--font-h5-smaller-lineheight); } h6.smaller { font-size: var(--font-h6-smaller-size); line-height: var(--font-h6-smaller-lineheight); } @media only screen and (min-width: 920px) { h1, h2, h3, h4, h5, h6 { margin-top: var(--font-headline-margin-top-desktop); margin-bottom: var(--font-headline-margin-bottom-desktop); } p, ul, ol, li { font-size: var(--font-copy-size-desktop); line-height: var(--font-copy-line-height-desktop); margin-top: var(--font-paragraph-margin-top-desktop); margin-bottom: var(--font-paragraph-margin-bottom-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); } ul li, ol li { margin-top: calc(var(--font-paragraph-margin-top-desktop) / 2); margin-bottom: calc(var(--font-paragraph-margin-top-desktop) / 2); } 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); } h1.smaller { font-size: var(--font-h1-smaller-size-desktop); line-height: var(--font-h1-smaller-lineheight-desktop); } h2.smaller { font-size: var(--font-h2-smaller-size-desktop); line-height: var(--font-h2-smaller-lineheight-desktop); } h3.smaller { font-size: var(--font-h3-smaller-size-desktop); line-height: var(--font-h3-smaller-lineheight-desktop); } h4.smaller { font-size: var(--font-h4-smaller-size-desktop); line-height: var(--font-h4-smaller-lineheight-desktop); } h5.smaller { font-size: var(--font-h5-smaller-size-desktop); line-height: var(--font-h5-smaller-lineheight-desktop); } h6.smaller { font-size: var(--font-h6-smaller-size-desktop); line-height: var(--font-h6-smaller-lineheight-desktop); } } /* END Text Styles */ /* Button Styles */ .btn { transition: background 0.3s, color 0.3s; padding: var(--button-padding); border: 2px solid var(--main-color); background-color: var(--main-color); color: white; font-weight: 700; text-decoration: none; display: inline-block; font-family: var(--font-headline-family); font-size: 14pt; line-height: 24pt; } .btn:hover, .btn:focus { color: var(--main-color); background-color: var(--button-secondary-color); } @media only screen and (min-width: 920px) { .btn { font-size: 20pt; line-height: 28pt; } } /* 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 { display: flex; flex-grow: 1; max-width: var(--header-logo-max-width); } /* #DEV - nav transition point */ @media only screen and (min-width: 920px) { .header .fluid { flex-wrap: nowrap; flex-direction: row; gap: 20px; padding: var(--header-logo-padding-desktop); } .header .logo-container { flex-basis: content; flex-grow: 1; } .header .nav-container { flex-basis: 100%; flex-shrink: 1; } } /* END Header Styles */ /* Footer Styles */ #footer { background: linear-gradient(#566363, #293a38); } #footer * { color: white; } #footer a:hover, #footer a:focus { color: #ffeab9; } .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 { font-family: var(--nav-font-family); text-decoration: none; color: var(--font-body-text-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); } .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%; } } /* 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); } .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-color: var(--main-color); border: 2px solid var(--main-color); 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 { fill: var(--main-color); 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: lightgray; } .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 { transition: color 0.3s; background-color: var(--header-background-color); } .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-color: rgb(41, 58, 56, 0.8); } .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 .hero-slide .hero-content .fluid p { font-size: var(--font-h2-size); line-height: var(--font-h2-lineheight); } .hero-container.slick-carousel + .hero-placeholder { padding-bottom: calc(var(--hero-padding-bottom) + 24pt + 52px); } .hero .hero-slide .hero-image-wrapper.has-desktop img.hero-image-desktop { display: none; } .hero .hero-slide .hero-content .hero-content-container .btn { margin-top: var(--font-paragraph-margin-top); } @media only screen and (min-width: 920px) { .hero .hero-slide .hero-content { position: absolute; bottom: 0; width: 100%; } .hero .hero-slide .hero-content .hero-content-container { position: relative; max-width: 35%; width: auto; padding: calc(var(--row-spacing-920) / 2) calc(var(--row-spacing-920) / 2) calc(var(--row-spacing-920) / 2) 0px; background: linear-gradient(#566363, #293a38); margin-bottom: calc(var(--row-spacing-920) / 2); } .hero .hero-slide .hero-content .hero-content-container::before { width: 10000px; position: absolute; content: ''; background: linear-gradient(#566363, #293a38); height: 100%; right: 100%; top: 0; } .hero .hero-slide .hero-content .hero-content-container .btn { margin-top: var(--font-paragraph-margin-top-desktop); } .hero .hero-slide .hero-content .fluid { position: relative; width: 90%; max-width: var(--content-max-width); margin-left: auto; margin-right: auto; display: block; flex-direction: unset; top: unset; left: unset; height: unset; gap: unset; text-align: unset; justify-content: unset; pointer-events: unset; } .hero .hero-slide .hero-content .fluid p { font-size: var(--font-h2-size-desktop); line-height: var(--font-h2-lineheight-desktop); } .hero .hero-slide .hero-image-wrapper .hero-overlay { display: none !important; } .hero-placeholder { padding-bottom: 33.33%; } .hero .hero-container { height: 0; padding-bottom: var(--hero-padding-bottom-920); } .hero .hero-slide .hero-image-wrapper { position: absolute; top: 0; } .hero .hero-slide img { margin-top: var(--hero-margin-top-920); } .hero .hero-slide .hero-image-wrapper .hero-overlay { background: linear-gradient(90deg, rgba(17, 94, 103, 0) 40% , rgb(210, 93, 19, 0.9) 50%); } .hero .hero-slide.slick-slide .hero-image-wrapper { position: relative; } .hero .hero-slide .hero-image-wrapper.has-desktop img.hero-image-fullcolor { display: none; } .hero .hero-slide .hero-image-wrapper.has-desktop img.hero-image-desktop, .hero .hero-slide .hero-image-wrapper.has-desktop .hero-overlay { display: block; } .hero .hero-placeholder, .hero-container.slick-carousel + .hero-placeholder { padding-bottom: var(--hero-padding-bottom-920); } } /* 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(--secondary-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: -5px; left: -5px; right: -5px; bottom: -5px; 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; } #slick-pause::before { content: ""; position: absolute; z-index: 0; top: -4px; left: -4px; right: -4px; bottom: -4px; border: 2px solid white; } /* 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 .content-container img.alignleft { width: auto; float: left; margin-right: 25px; margin-top: var(--font-paragraph-margin-top); } .row.bkg-white { background-color: var(--row-white-color); } .row.bkg-gray { background-color: var(--row-gray-color); } .row .content-container img.aligncenter { margin-top: calc(var(--font-paragraph-margin-top) * 2); margin-bottom: calc(var(--font-paragraph-margin-top) * 2); } @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); } .row .content-container img.alignleft { margin-top: var(--font-paragraph-margin-desktop); } .row .content-container img.aligncenter { margin-top: calc(var(--font-paragraph-margin-top-desktop) * 2); margin-bottom: calc(var(--font-paragraph-margin-top-desktop) * 2); } } @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 */ /* 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 */ /* Icon Blurb Section Styles */ .section-content + .section-iconblurbs { margin-bottom: calc(var(--row-spacing) / 2); } .section-iconblurbs { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--row-spacing); margin-top: calc(var(--row-spacing) / 2); } .section-iconblurbs .iconblurb { display: flex; flex-direction: row; gap: var(--row-spacing); width: 100%; } .section-iconblurbs .iconblurb .ib-icon { flex-basis: 40px; flex-shrink: 0; } .section-iconblurbs .iconblurb .ib-icon img { display: block; width: 100%; padding: 0; } .section-iconblurbs h1:first-child, .section-iconblurbs h2:first-child, .section-iconblurbs h3:first-child, .section-iconblurbs h4:first-child, .section-iconblurbs h5:first-child, .section-iconblurbs h6:first-child { margin-bottom: 0px; } @media only screen and (min-width: 920px) { .section-iconblurbs h1:first-child, .section-iconblurbs h2:first-child, .section-iconblurbs h3:first-child, .section-iconblurbs h4:first-child, .section-iconblurbs h5:first-child, .section-iconblurbs h6:first-child { flex-basis: 100%; } .section-iconblurbs { gap: var(--row-spacing-920); } .section-iconblurbs.section-iconblurbs-cols-2 .iconblurb { flex-basis: calc(50% - var(--row-spacing-920) / 2); } } /* END Icon Blurb Section Styles */ /* Staff Directory Section Styles */ .section-staffdirectory { display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--row-spacing); } .section-staffdirectory h1:first-child, .section-staffdirectory h2:first-child, .section-staffdirectory h3:first-child, .section-staffdirectory h4:first-child, .section-staffdirectory h5:first-child, .section-staffdirectory h6:first-child { flex-basis: 100%; margin-bottom: 0px; } .sd-entry { background-color: white; box-shadow: 2px 2px 8px rgb(68, 67, 69, 0.3); padding: 25px; } @media only screen and (min-width: 720px) { .section-staffdirectory { flex-direction: row; flex-wrap: wrap; gap: var(--row-spacing-480); } .sd-entry { flex-basis: calc(50% - 50px - var(--row-spacing-480) / 2); } } @media only screen and (min-width: 1024px) { .section-staffdirectory { gap: var(--row-spacing-920); } .sd-entry { flex-basis: calc(33.33% - 50px - var(--row-spacing-920)); } } /* END Staff Directory Section Styles */ /* Facilities Section Styles */ .section-facilities { display: flex; flex-direction: column; flex-wrap: nowrap; gap: var(--row-spacing); } .section-facilities .facility { background-color: white; box-shadow: 2px 2px 8px rgb(68, 67, 69, 0.3); } .section-facilities .facility .facility-content { padding: 25px; } .section-facilities .facility .facility-name { margin-bottom: 0px; } .section-facilities .facility .facility-location { margin-top: 0px; } @media only screen and (min-width: 720px) { .section-facilities { flex-direction: row; flex-wrap: wrap; gap: var(--row-spacing-480); } .section-facilities .facility { flex-basis: calc(50% - var(--row-spacing-480) / 2); } } @media only screen and (min-width: 920px) { .section-facilities { gap: var(--row-spacing-920); } .section-facilities .facility { flex-basis: calc(50% - var(--row-spacing-920) / 2); } } /* END Facilities Section Styles */ /* Map Section Styles */ .section-maps-content { display: flex; flex-direction: column; gap: var(--row-spacing); } .section-maps-content .map iframe { width: 100%; min-height: 280px; } @media only screen and (min-width: 920px) { .section-maps-content { flex-direction: row; flex-wrap: nowrap; gap: calc(var(--row-spacing-920) * 2); } .section-maps-content .content { flex-shrink: 1; } .section-maps-content .map { flex-grow: 1; } .section-maps-content .map iframe { height: 100%; } } /* END Map Section 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: 1px solid var(--active-color); box-shadow: 2px 2px 8px rgb(68, 67, 69, 0.3); } .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; padding: var(--accordion-inner-padding); } .accordion-content { padding: var(--accordion-inner-padding); border-top: var(--accordion-border); background-color: var(--accordion-content-background-color); } .accordion .accordion-title { border-top: 1px solid var(--active-color); } .accordion .accordion-title:first-child { border-top: none; } @media only screen and (min-width: 920px) { .accordion-content { padding: var(--accordion-inner-padding-desktop); } } /* Border Radius Styles */ .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); font-weight: 700; } .nf-form-fields-required { font-weight: 400 !important; } .row .nf-field, .row .nf-after-field .nf-error-wrap { margin-bottom: 10px; } .row .nf-form-content input.ninja-forms-field { padding: 7px; } .row .nf-form-content .submit-wrap input { transition: background 0.3s, color 0.3s; padding: var(--button-padding); border: 1px solid var(--main-color); background-color: var(--main-color); color: var(--button-secondary-color); font-weight: var(--font-bold-font-weight); cursor: pointer; font-family: var(--font-headline-family); font-size: 20pt; line-height: 28pt; } .row .nf-form-content .submit-wrap input:hover, .row .nf-form-content .submit-wrap input:focus { background-color: var(--button-secondary-color); color: var(--main-color); } .row .submit-container .nf-field { margin-bottom: 0px; } /* END Ninja Forms Styles */