/**
* Fuel Theme
* Version 6.4.0
**/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Content Header
# Content
# Sidebar
# Secondary Pages
## Content CTA
## Meet Our Team page
## Why Choose Us page
## Contact page
## Culture & Careers page
## Single Career page
## Single Bio Pages
## Single Location pages
## Manufacturer Pages
## Blog
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Content Header
--------------------------------------------------------------*/
body:not(.post-template-default.single-post) header.main-header .wp-block-post-date {display: none; }
.author-block {padding-left: var(--contain-padding);padding-right: var(--contain-padding); margin: 0; }
.author-type {color: var(--content-color); }
/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
.entry-wrapper {padding-top: 2rem;padding-bottom: clamp(2rem, 5vw, 4rem);gap: 2rem clamp(0.9rem, -4rem + 11.667vw, 3rem);margin: 0;}
/* @see https://hover.fuel.team/ */
.entry-content :where(p, li):not([class]) a {padding: 0 0.2em;text-decoration: underline;text-decoration-color: var(--blue);background: linear-gradient(0deg, var(--blue), var(--blue)) no-repeat right bottom / 0 100%;transition: background-size 350ms, color 350ms;}
.entry-content :where(p, li):not([class]) a:is(:hover, :focus-visible) { color: #fff; background-size: 100% 100%; background-position-x: left; }
h2.wp-block-heading:not(#sidebar h2, .ftr-col-title) {
position: relative; margin-bottom: clamp(2rem, 4.4vw, 2.4rem);
&:before { content: ''; width: 2.8rem; height: 2px; background: var(--primary-color); position: absolute; right: 0; bottom: -0.9rem; left: 0; }
}
h3.wp-block-heading { color: var(--blue); }
.entry-content ul, .entry-content ol {
li {margin-bottom: 0.75rem;}
::marker { color: var(--accent-color); }
}
.wp-block-post-content .wp-block-image img { border-radius: 0.8rem 0 0 0; }
.wp-block-quote {margin: 1.9rem 0;margin-left: 0;border-radius: 0 0 0 2.4rem;font-size: 1rem !important;line-height: 1.9 !important;font-style: italic;}
.wp-block-quote p:last-of-type { margin-top: 0.4rem; }
/*--------------------------------------------------------------
# Sidebar
--------------------------------------------------------------*/
.wp-block-template-part:has(#sidebar), #sidebar { height: 100%; }
#sidebar {
.wp-block-heading { background: var(--Grey-Gradient, linear-gradient(96deg, #676B6E 0%, #484B4E 100%)); border-radius: 1.2rem 0 0 0; }
& > .wp-block-group {padding: 0.4rem !important;border: none;}
& > .wp-block-group:before {content: "";background: var(--grey-gradient);position: absolute;inset: 0;border-radius: 1.6rem 0 0 0;padding: .05em;-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite: xor;mask-composite: exclude;pointer-events: none;}
& > .wp-block-group .wp-block-template-part .wp-block-group {background: var(--lt-grey-gradient);border-radius: 1.2rem 0 0 0;}
.gform_wrapper.gravity-theme .gform_footer button { margin: 0; }
ul {list-style: none;text-align: center;padding: 1.2rem 0 1rem;background: var(--lt-grey-gradient);margin: 0;}
ul li a:is(:hover, :focus-visible) { color: var(--blue); text-decoration: underline; }
}
/* Job App Sidebar */
.single-career .wp-block-heading {margin-right: 0;margin-left: 0;}
.job-app-container { margin: 0; padding-top: 1.2rem; padding-right: var(--wp--preset--spacing--fm-30); padding-left: var(--wp--preset--spacing--fm-30); background: var(--lt-grey-gradient); }
@media (min-width: 68.5em) {
#sidebar {
& > .wp-block-group p { font-size: 0.8rem !important; }
.wp-block-heading {font-size: 1.5rem !important;}
}
}
/*--------------------------------------------------------------
# Secondary Pages
--------------------------------------------------------------*/
/* Remvoe these two rules if you are displaying the teams as a bio grid */
.bio .wp-block-column:has(.wp-block-post-featured-image) {
order: -1; /* Move bio image to top on mobile */
}
@media (max-width: 48.8125em) {
.bio .wp-block-post-title,.bio .wp-block-post-title + p {text-align: center;}
}
.main-header {position: relative;background: var(--lt-grey-gradient);}
.main-header:before {content: '';background: var(--brand-gradient);position: absolute;inset: -0.1rem -0.1rem 0;padding: 0.05rem;z-index: 1;-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite: xor;mask-composite: exclude;pointer-events: none;}
@media (min-width: 68.5em) {
.main-header { padding-top: 4.6rem !important; padding-bottom: 8.4rem !important; }
}
/*--------------------------------------------------------------
## Content CTA
--------------------------------------------------------------*/
.content-cta-text { max-width: 27.3rem; }
.content-cta .phone svg rect {transition: 300ms ease;}
.content-cta .phone:is(:hover,:focus) {
color: var(--white); text-decoration: underline;
svg rect { opacity: 1; }
}
.content-cta {
position: relative;
&:after {content: '';position: absolute;inset: 0;z-index: 0;border-radius: 0 0 0 2.4rem;background-repeat: no-repeat;background-size: contain;background-position: right;background-image: url('data:image/svg+xml,');}
* {z-index: 1;}
svg { vertical-align: -0.4rem; width: 0.8rem; }
}
@media (min-width: 68.5em) {
.content-cta {
padding-top: 2.7rem !important; padding-bottom: 3.6rem !important;
.phone-number { font-size: 1.6rem; }
svg {vertical-align: -0.3rem;width: 1rem;margin-right: 0.2rem;}
}
}
/*--------------------------------------------------------------
## Meet Our Team page
--------------------------------------------------------------*/
.meet-our-team-pg {
.bio-box {position: relative;border-radius: 1.2rem 0 0 0;overflow: visible;padding: 0.5rem;margin-bottom: 1.25rem;margin-left: 0rem;width: calc(100% - 0rem);}
.bio-box:before {content: "";background: var(--brand-gradient);position: absolute;inset: -0.2rem;border-radius: 1.4rem 0 0 0;padding: .05em;-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite: xor;mask-composite: exclude;pointer-events: none;}
.bio-box::after { inset: 0 1.5rem 0 auto; }
.bio-box:is(:hover,:focus) { background: rgba(0,0,0,0.25);color: var(--white); }
.bio-box:is(:hover,:focus):after { background: var(--blue); }
.bio-image {border-radius: 0.7rem 0 0 0;width: 3rem;height: 4rem;}
.bio-name {margin-bottom: 0.25rem;color: var(--primary-color);}
.bio-cred {color: var(--blue);}
}
@media (min-width: 68.5em) {
.meet-our-team-pg {
.bio-list { gap: 2rem; }
.bio-box {padding: 0.4rem;max-width: 12.8rem;flex: none;margin: 0;}
.bio-box:before {inset: 0;border-radius: 1.6rem 0 0 0;}
.bio-image {width: 100%;min-height: 13.7rem;border-radius: 1.2rem 0 0 0;aspect-ratio: 1 / 1.07;}
.bio-image .wp-post-image {object-position: top;}
.bio-label {background: var(--grey);padding: 0.5rem 0;}
}
}
/*--------------------------------------------------------------
## Why Choose Us page
--------------------------------------------------------------*/
.why-choose-us-columns {
.wp-block-columns {gap: 0 6.2rem;gap: 2.5rem 0;}
.wp-block-column svg { width: 100%; }
.content-cta {max-width: 36rem;margin-top: 3rem !important;}
}
@media (min-width: 48.875em) { /* 782px */
.why-choose-us-columns {
.wp-block-columns {gap: 0 3rem;}
}
}
@media (min-width: 68.5em) {
.why-choose-us-columns {
.wp-block-columns {gap: 0 6.2rem;}
}
}
/*--------------------------------------------------------------
## Contact page
--------------------------------------------------------------*/
#location_section.contact-us-pg {
padding-top: 0 !important; padding-bottom: 1.1rem !important;
.map-nav-item { margin: 0; }
}
/*--------------------------------------------------------------
## Culture & Careers page
--------------------------------------------------------------*/
.curr-empl-container {
.wp-block-heading:before { margin: auto; }
.wp-block-quote { max-width: 36rem; }
}
.curr-open-container .wp-block-heading { text-align: center; }
.curr-open-container .wp-block-heading:before { margin: auto; }
.careers-list {
display: flex;flex-wrap: wrap;justify-content: center;gap: 2rem 0;
.career-box {
display: inline-block;width: 100%;max-width: 18rem;position: relative;
&:before {content: "";background: var(--brand-gradient);position: absolute;inset: 0rem;border-radius: 1.6rem 0 0 0;padding: .05em;z-index: 1;-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite: xor;mask-composite: exclude;pointer-events: none;}
}
.career-header {
display: block;background: var(--grey-gradient);margin: 0;padding: 0.6rem 1.2rem;border-radius: 1.6rem 0 0 0;color: var(--white);font-size: 0.8rem;
h3 { margin: 0 0 0; color: var(--white); font-size: clamp(1.2rem,2.8vw,1.5rem); }
}
.career-body {display: block;padding: 0.9rem 1.2rem 1.9rem !important;}
.icon-item { color: var(--content-color); }
.icon-item strong { color: var(--blue); }
.icon-item.wp-block-button {margin: 0;padding: 0;text-align: center;}
}
@media (min-width: 48.125em) { /* 770px */
.curr-open-container .wp-block-heading { text-align: left; }
.curr-open-container .wp-block-heading:before {margin: 0;}
.careers-list {
gap: 2rem 1.5rem;
.career-box {width: calc((100% / 2) - 0.75rem);}
}
}
@media (min-width: 68.5em) {
.careers-list {
max-width: none;gap: 3.2rem;
.career-box {width: calc((100% / 3) - 2.2rem);}
}
}
/*--------------------------------------------------------------
## Single Career page
--------------------------------------------------------------*/
.job-details {width: 100%;}
.job-details.zebra tr:nth-child(odd) th::before {background: var(--grey);}
.job-details th {width: 2rem; }
.single-career {
.job-details svg { color: var(--blue); }
.wp-block-list { padding-left: 1rem; }
}
/*--------------------------------------------------------------
## Single Bio pages
--------------------------------------------------------------*/
.single-bio .entry-wrapper {gap: 2rem clamp(0rem, 1.2vw, 1rem);}
.single-bio-container {
padding-right: var(--wp--preset--spacing--fm-20); padding-left: var(--wp--preset--spacing--fm-20);
.bio-details {position: relative;border-radius: 1.2rem 0 0 0;overflow: visible;padding: 0.5rem;margin-bottom: 1.25rem;margin-left: 0rem;width: calc(100% - 0rem);}
.bio-details:before {content: "";background: var(--brand-gradient);position: absolute;inset: 0rem;border-radius: 1.4rem 0 0 0;padding: .05em;-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite: xor;mask-composite: exclude;pointer-events: none;}
.wp-block-post-featured-image {max-width: 100%;min-height: 13.7rem;margin: 0 !important;}
.wp-block-post-featured-image img {object-position: top;border-radius: 1.2rem 0 0 0;}
.bio-label-wrapper {background: var(--grey);padding: 0.5rem 0;margin: 0;}
.wp-block-buttons { justify-content: center; }
.wp-element-button { font-size: 0.9rem; }
}
.toggle {
border-radius: 1.2rem 0 0 0;outline: none;outline-offset: -0.05rem;outline-color: var(--grey-gradient);min-height: fit-content;
&[open] { outline: 1px solid; }
summary {background: var(--grey);color: var(--content-color);border-radius: 1.2rem 0 0 0;font-weight: 500;border: none;position: relative;padding: 0.5rem 2rem 0.5rem 1rem;}
summary:after {content: "";clip-path: unset;transition: 300ms ease;width: 1rem;height: 1rem;position: absolute;inset: 0.65rem 0.65rem auto auto;margin: auto;background-color: unset !important;background-size: contain;background-repeat: no-repeat !important;background-position: center !important;background-image: url('data:image/svg+xml,') !important;}
&[open] summary, summary:hover { background: var(--grey-gradient); color: var(--white); }
&[open] summary:after, &[open] summary:hover:after {transform: none;background-image: url('data:image/svg+xml,') !important;}
summary:hover:after { background-image: url('data:image/svg+xml,') !important; }
}
@media (min-width: 68.5em) {
.single-bio-container {
max-width: 57.4rem; justify-content: center; gap: 0 3.8rem !important;
.entry-content { padding: 0 !important; }
}
}
/*--------------------------------------------------------------
## Single Location pages
--------------------------------------------------------------*/
.single-location .location-info a::after {content: "";display: block;height: 1px;background: currentColor;transform: scaleX(0);transform-origin: left;transition: transform 0.3s;}
.single-location .location-info a:is(:hover, :focus-visible)::after {transform: scaleX(1);}
.location-card {
.hours-note { font-size: 0.8rem; font-style: italic; }
}
/* Styling for bios list on location page */
.single-location .entry-wrapper .provider-list {display: flex;flex-wrap: wrap;margin-top: 0.5rem;container-type: inline-size;container-name: provider;}
.single-location .entry-wrapper .provider-list a {flex: 1 1 50%;min-width: 10rem;padding: 0.25rem 0 0.25rem 0.25rem;}
.single-location .entry-wrapper .provider-list a {
@container provider (min-width: 400px) {
&:is(:nth-child(4n+1), :nth-child(4n+2)) { background-color: var(--wp--preset--color--grey);}
}
@container provider (max-width: 399px) {
&:nth-child(odd) {background-color: var(--wp--preset--color--grey);}
}
}
.single-location .entry-wrapper .provider-list a:is(:hover, :focus-visible) {background: var(--accent-color);color: var(--white); }
.indiv-location-container {
.location-info {
align-items: flex-start;
.icon-item {color: var(--content-color);}
.icon-item svg {color: var(--blue);}
}
}
/*--------------------------------------------------------------
## Manufacturer Pages
--------------------------------------------------------------*/
.manufacturer .wp-block-media-text {grid-template-columns: 32% 1fr;}
.manufacturer .wp-block-media-text.has-media-on-the-right {grid-template-columns: 1fr 32%;}
.manufacturer .wp-block-media-text__media::after {display: none;}
.manufacturer .manu-logo figure img {width: auto;height: auto;max-width: 100%;}
/* Hide old content CTA in manufacturer content since we are using content cta synced block pattern */
.manufacturer .use-content-cta-block {display: none;}
@media (max-width: 37.5em) {
.manufacturer .manu-logo figure {text-align: center;}
#main .wp-block-media-text__content {padding: 0;}
}
/*--------------------------------------------------------------
## Blog
--------------------------------------------------------------*/
.wp-block-post-date { text-align: center; }
.wp-block-post-date time {color: var(--primary-color);font-size: clamp(0.75rem,1.7vw,0.9rem);}
.wp-block-query li:first-of-type .wp-block-post-title {margin-top: 0;}
.blog .wp-block-post, .search-results .wp-block-post {container-type: inline-size;container-name: post;padding-bottom: 1rem;border-bottom: 1px solid var(--primary-color);margin-top: 1rem;}
/* @media (min-width: 40em) { */
@container post (min-width: 33rem) {
.wp-block-query .wp-block-post-featured-image:where(.alignleft,.alignright) {max-width: 10rem;}
}
/* Pagination numbers */
.wp-block-query-pagination {margin-top: 2.5rem;}
.wp-block-query-pagination-numbers {display: flex;gap: clamp(0.5rem, 0.143rem + 1.429vw, 1rem);}
.page-numbers {text-align: center;border: 1px solid var(--blue);color: var(--blue);border-radius: 3rem;width: 2.4em;height: 2.4em;line-height: 2.2;}
.page-numbers:is(:hover, .focus-visible):not(.dots), .page-numbers.current {background: var(--accent-color);border: 1px solid var(--accent-color);color: #fff;}
/* Pagination next/prev */
a[class^="wp-block-query-pagination-"] {color: transparent;overflow: hidden;white-space: nowrap;position: relative;width: 0.8em;}
a[class^="wp-block-query-pagination-"]:hover {color: transparent;}
a[class^="wp-block-query-pagination-"]::before {content: '';position: absolute;inset: 0 auto 0 0;margin: auto;background: var(--accent-color);clip-path: url(#menu_chevron);width: 0.8em;height: 0.5em;transition: background-color 0.3s;}
.wp-block-query-pagination-next::before {transform: rotate(-90deg);}
.wp-block-query-pagination-previous::before {transform: rotate(90deg);}
a[class^="wp-block-query-pagination-"]:is(:hover, :focus-visible)::before {background: var(--primary-color);}