/*
Theme Name: Fuel6
Theme URI: https://fuelmedical.com
Author: Fuel Medical
Description: A Fuel Medical block theme (2023)
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 8.0
Version: 6.1.1
Text Domain: fuel6
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Custom Properties
# Fuel Normalize
# Custom Elements
# WordPress Blocks
# Forms
## Full Width Contact Form
## Search Form
# Header
# Content
# Footer
# Location
# Animations
## Page Transition
# print
# Safari 15.3 fallbacks
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Custom Properties
--------------------------------------------------------------*/
body {
/**
* Note: WordPress declares its variables in the body, so do the same to avoid scope issues.
*/
/* Structure - 1100px */
--mobile-padding: 1rem;
--desktop-padding: 19rem;
--contain-padding: clamp(var(--mobile-padding), calc(50vw - 29.93rem), var(--desktop-padding));
--ftr-contain-padding: calc(50% - 31.5rem);
/* Design - Change in theme.json */
--primary-color: var(--wp--preset--color--primary);
--accent-color: var(--wp--preset--color--accent);
--white: var(--wp--preset--color--white);
--grey: var(--wp--preset--color--grey);
--black: var(--wp--preset--color--black);
/* Top Level Primary Menu Colors */
--wp--preset--color--menu-background: var(--primary-color);
--wp--preset--color--menu-color: var(--white);
--wp--preset--color--menu-hover-color: var(--white);
--wp--preset--color--menu-hover-bg: var(--wp--preset--color--color-2);
/* Sub Menu Colors */
--wp--preset--color--sub-menu-background: var(--white);
--wp--preset--color--sub-menu-color: var(--primary-color);
--wp--preset--color--sub-menu-hover-color: var(--primary-color);
--wp--preset--color--sub-menu-hover-bg: var(--wp--preset--color--color-3);
/* Text */
--title-font: var(--wp--preset--font-family--title);
--title-color: var(--primary-color);
--content-font: var(--wp--preset--font-family--content), sans-serif;
--content-color: var(--wp--preset--color--content);
--wp--preset--color--h-1: var(--white);
--wp--preset--color--h-2: var(--wp--preset--color--color-1);
--wp--preset--color--h-3: var(--primary-color);
--wp--preset--color--footer: var(--white);
}
/*--------------------------------------------------------------
# Fuel Normalize
--------------------------------------------------------------*/
*, *::before, *::after {box-sizing: border-box;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
html {font-size: 125%;line-height: 1.9;-webkit-text-size-adjust:100%;-webkit-overflow-scrolling: touch;scroll-behavior: smooth;position: relative;min-width: 18rem;}
ul, ol { padding-left: clamp(1.5rem, 3vw, 2rem); }
li { margin: 1em 0 0 0; }
iframe, img, svg, audio, canvas, video, object, embed {vertical-align: middle;max-width: 100%;}
img {object-fit: cover;}
img[src*=".jpg"] {background: var(--grey);}
blockquote, figcaption { font-style: italic; }
small { font-size: 0.75em; }
sub, sup { font-size: 0.75em; line-height: 0; }
a { text-decoration: none; color: var(--accent-color); transition: color 300ms, background-color 300ms; }
a[href^="tel:"] { white-space: nowrap; }
a:hover { color: var(--primary-color); }
@media only screen and (min-width: 68.5em) {
*[id] {scroll-margin-top: 3rem;}
}
/*--------------------------------------------------------------
# Custom Elements
--------------------------------------------------------------*/
.contain { display: block; position: relative; margin: auto; padding-right: var(--contain-padding); padding-left: var(--contain-padding); width: 100%; }
.icon-item {display: block;position: relative;margin: 1em 0;padding: 0 0 0 1.8em;}
.icon-item svg {position: absolute;top: 0.15em;left: 0;width: 1.2em;height: 1.2em;}
@media (min-width: 38.5em) {
.list-col-2 { column-count: 2; column-gap: 2em; margin-left: 1rem; }
}
/*--------------------------------------------------------------
# WordPress Blocks
--------------------------------------------------------------*/
/*Fix cover block position*/
.wp-block-cover .wp-block-cover__inner-container, .wp-block-cover-image .wp-block-cover__inner-container{
z-index: 0;
}
.alignleft, .alignright { width: 100% }
#main .alignleft {float: left;margin: 0 1rem 0.2rem 0;}
#main .alignright {float: right;margin: 0 0 0.2rem 1rem;}
.entry-content *:has(.alignright, .alignleft) { display: flow-root; }
@media (min-width: 37.5em) {
.alignleft, .alignright { max-width: 48% }
}
.wp-block-cover__inner-container {/* position: relative; */}
.entry-content { container-type: inline-size; container-name: content; }
@container content (max-width: 25rem) {
#main .alignright, #main .alignleft { float: none; margin: 1.5em 0 0.2em; min-width: 100%; }
}
/* Button block */
.button, .wp-block-file__button, .wp-block-post-excerpt__more-link, .wp-block-buttons .wp-element-button, .wp-block-buttons .wp-block-button__link.wp-block-button__link {background-color: #fff;color: var(--primary-color);border: 1px solid var(--wp--preset--color--lt-blue);font-weight: 400;line-height: normal;padding: 0.8rem 3.3rem 0.8rem 1.6rem;position: relative;overflow: hidden;z-index: 1;border-radius: 9999px;}
.button svg, .wp-block-file__button svg, .wp-block-post-excerpt__more-link svg, .wp-block-buttons .wp-element-button svg, .wp-block-buttons .wp-block-button__link.wp-block-button__link svg {position: absolute;top: 0;right: 0.3rem;bottom: 0;margin: auto;z-index: 1;}
.button:after, .wp-block-file__button:after, .wp-block-post-excerpt__more-link:after, .wp-block-buttons .wp-element-button:after, .wp-block-buttons .wp-block-button__link.wp-block-button__link:after {content: '';position: absolute;background: var(--wp--preset--color--button-accent);top: 0;right: 0.25rem;bottom: 0;margin: auto;width: 2.25rem;height: 2.25rem;z-index: -1;border-radius: 50%;transform-origin: center;transition: 750ms ease;}
.button:is(:hover, :focus-visible):after, .wp-block-file__button:is(:hover, :focus-visible):after, .wp-block-post-excerpt__more-link:is(:hover, :focus-visible):after, .wp-block-buttons .wp-element-button:is(:hover, :focus-visible):after, .wp-block-buttons .wp-block-button__link.wp-block-button__link:is(:hover, :focus-visible):after {transform: scale(16);}
.gform_button:before {content: url('data:image/svg+xml,');width: 2.95rem;height: 2.95rem;position: absolute;top: 0.2rem;right: -0.1rem;bottom: 0;margin: auto;display: flex;justify-content: center;align-items: center;transition: 300ms ease;}
/* Button block - outline */
.is-style-outline.is-style-outline.wp-block-button .wp-block-button__link { background: var(--white); color: var(--wp--preset--color--accent); border: 1px solid var(--wp--preset--color--accent); padding: 0.5em 1em; }
.wp-block-button.is-style-outline .wp-element-button:is(:hover, :focus-visible) { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: var(--white); }
/* * iPhone bug fix * https://www.notion.so/fueldigital/iPhone-button-contrast-fix-47918141a741472fbc1fba3aa5919ca4 */
@supports (-webkit-touch-callout: none) {
.entry-content a.wp-block-button__link{ transition: none; }
}
/* Search block */
.wp-block-search {padding: 0;width: 100%;max-width: 24rem;}
.wp-block-search__inside-wrapper { padding: 0; border-radius: 0.2rem; border: none; outline: 1px solid; }
.wp-block-search__input {font-size: 1rem;padding-left: 1rem;background: none;border: none;}
.wp-block-search__button {padding: 0.45rem 0.75rem;background: var(--primary-color);border-left: none;transition: background-color 0.3s, color 0.3s;}
.wp-block-search__button:hover, .menu-item-search .wp-block-search__button:focus-visible {background: var(--wp--preset--color--lt-blue);color: #fff;}
/* Quote block */
body .wp-block-quote {padding: clamp(1.25rem, 3vw, 1.6rem) clamp(0.7rem, 3vw, 1.6rem) clamp(1.4rem, 3vw, 1.8rem);font-size: clamp(0.9rem, 3vw, 1rem);line-height: 2.2;position: relative;margin: 1.85rem 0 1.5rem !important;background: rgba(43,100,128,0.2);border-radius: 3rem;color: var(--primary-color);}
.wp-block-quote::before {content: '';background: var(--wp--preset--color--lt-blue) url('data:image/svg+xml,') center no-repeat;position: absolute;inset: -1rem 0 auto 0;margin: auto;width: 2rem;height: 2rem;border-radius: 50%;}
.wp-block-quote::after {content: '';background: url('data:image/svg+xml,');background-size: contain;background-position: center;background-repeat: no-repeat;position: absolute;inset: auto 0 -0.45rem 0;height: 0.9rem;}
.wp-block-quote cite {display: block;font-size: clamp(0.9rem, 4vw, 1rem);font-weight: bold;text-align: right;line-height: 1.5;font-style: normal;}
@media (min-width: 48.875em) { /* 782px */
body .wp-block-quote {margin: 1.85rem 0.85rem 2.6rem !important;padding-right: 2.25rem;}
.wp-block-quote::before {inset: -0.85rem auto auto -0.85rem;width: 2.5rem;height: 2.5rem;}
.wp-block-quote::after {background-position: right;inset: auto 2.7rem -0.6rem 0;height: 1.2rem;}
}
/* Separator */
.wp-block-separator {he;background: url('data:image/svg+xml,');background-size: contain;background-repeat: no-repeat;background-position: center;height: 0.4rem;border: none;margin: 1.5rem 0 2.5rem;}
/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
.gfield {border: 1px solid var(--accent-color);border-radius: 0.3rem;overflow: hidden !important;background: var(--white);line-height: normal;}
.gfield:focus-within { outline: 2px auto -webkit-focus-ring-color; }
.gfield .gfield_label.gform-field-label { color: var(--accent-color); font-weight: normal; font-size: 0.7rem; margin-bottom: 0; padding-left: 0.6rem; }
.gfield .medium, .gfield .large {padding: 0 0.6rem 0.35rem !important;color: var(--content-color);background: var(--white);outline: none;border: 0 !important;}
.gform_footer { position: relative; margin-top: 0.7rem; }
.gform_footer { justify-content: center; }
.gform_button { transition: color 0.3s, background-color 0.3s; margin: 0.9rem auto 0; }
.gform_ajax_spinner { position: absolute; top: 0; right: 0.5rem; bottom: 0; margin: auto; border: 0.2em solid rgba(0, 0, 0, 0.4); border-left: 0.2em solid #07B084; border-radius: 50%; width: 1.2em; height: 1.2em; animation: spin 1.1s infinite linear; }
.gform_confirmation_message {font-family: inherit;font-size: 1.1em;font-weight: normal;background: rgba(255,255,255,0.85);text-align: center;padding: 1rem 1rem 1.5rem;border: 5px dashed seagreen;border-radius: 0.75rem;color: seagreen;}
.gform_fileupload_rules { padding: 0 1rem 1rem; font-style: italic; }
/* Validation styling */
.gform_wrapper .gform_validation_errors .gform_submission_error { border: none; margin: 0; }
.gform_wrapper.gravity-theme .gform_validation_errors { padding-block: 0; padding-inline-end: 0; padding-inline-start: 0; }
.gform_validation_errors p { margin: 0; }
.gfield_error { border-color: #c02b0a; }
.gfield_validation_message { border-left: none !important; border-right: none !important; border-bottom: none !important; }
.gform_required_legend, #contact_section .sidebar-form-content { display: none; }
/*--------------------------------------------------------------
## Full Width Contact Form
--------------------------------------------------------------*/
.wp-block-template-part:has(.contact-section) {margin: 0;position: relative;z-index: 0;}
.contact-section {--contain-padding: clamp(var(--mobile-padding), calc(50vw - 20rem), 26.3rem);padding-top: clamp(2.4rem, 10vw, 6.25rem);padding-top: 0;position: relative;}
.contact-section-columns {position: relative;z-index: 1;}
.contact-section-text-col {padding-right: 1.5rem;padding-left: 1.5rem;z-index: 3;}
.contact-section-title { color: var(--primary-color); position: relative; margin: 0 0 1.8rem; }
.contact-section-content, .contact-section-emergency {font-size: clamp(0.7rem, 1.2vw, 1rem);}
body .contact-section-form-col {position: relative;margin-top: calc((clamp(3.25rem, 18.7vw, 17.9rem) * -1) + 0.5rem);margin-top: calc((clamp(6.5rem, 41vw, 35.8rem)* -1) + 0.5rem);}
.contact-section .gform_title, .contact-section .gform_description {display: none;}
.contact-double-white-curves {position: absolute;top: -0.15rem;right: 0rem;left: -0.1rem;z-index: 1;margin: 0;height: initial;width: calc(100% + 0.1rem);max-width: none;}
.contact-section-form-col-image {margin: 0;padding-top: calc(clamp(12rem, 50vw, 36rem) + 1.2rem);padding-bottom: 4rem;}
body .contact-section-form-col-container { max-width: 20rem; }
body .contact-section-form-col-container.slideUp { animation-duration: 900ms; }
.contact-section-form-col-container .gfield {border: none;background: rgba(255,255,255,0.9);}
.contact-section-form-col-container .gfield .gform-field-label {color: var(--primary-color);font-size: 0.7rem;}
.contact-section-form-col-container .gfield input { background: none; }
.contact-section-form-col-container .gform_wrapper .gform_footer {padding: 0 0;margin: 1.8rem 0 0;}
.contact-section-form-col-container .gform_footer button.gform_button {margin: 0;}
@media (min-width: 26.5em) { /* 456px */
.contact-section-text-col-container {max-width: clamp(18rem,65vw,20rem);}
}
@media (min-width: 48.875em) { /* 782px */
.contact-section-columns.wp-block-columns {flex-wrap: wrap !important;}
.contact-section-columns.wp-block-columns > .contact-section-text-col.wp-block-column {flex-basis: auto;padding-right: 3rem;padding-left: 3rem;width: 100%;}
.contact-section-text-col-container {max-width: clamp(24.8rem,58.5vw,32rem);}
}
@media (min-width: 68.5em) {
.contact-section-columns.wp-block-columns {gap: 0;max-width: none;}
.contact-section-columns.wp-block-columns > .contact-section-text-col.wp-block-column {width: 50%;flex-basis: initial;padding-right: clamp(1.5rem,6.6vw,5.3rem);padding-left: 1.5rem;}
.contact-section-text-col-container {max-width: none;}
.contact-section-columns.wp-block-columns > .contact-section-form-col.wp-block-column {width: 50%;flex-basis: initial;padding-right: 0;padding-left: 0;margin-top: -16rem;}
.contact-section-form-col-image {padding-top: 20rem;padding-bottom: clamp(5.5rem,13.2vw,10.5rem);padding-left: clamp(4rem,7.3vw,9.7rem);}
}
@media (min-width: 82.5em) {
.contact-section-columns.wp-block-columns > .contact-section-text-col.wp-block-column {padding-top: clamp(4rem,9.6vw,8rem);padding-left: calc(50vw - 30.9rem);}
.contact-section-form-col-image { padding-right: calc(50vw - 30rem); }
}
@media (min-width: 100em) {
.contact-section-columns.wp-block-columns > .contact-section-form-col.wp-block-column { margin-top: -18rem; }
.contact-section-form-col-image {padding-top: 30rem;}
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header {position: relative;z-index: 1;background: var(--primary-color);}
.header:after {content: '';background-image: url('data:image/svg+xml,');background-position: right;background-size: contain;height: 0.2rem;width: 100%;position: absolute;right: 0;bottom: 0;left: 0;}
.header .wp-block-columns.contain { --contain-padding: clamp(2rem, 5vw, 3rem); }
.header-logo {padding-top: 0.8rem;padding-bottom: 0.8rem;flex-basis: auto !important;}
.main-logo-link { display: inline-block; }
.header-logo svg, .footer-logo svg {transition: transform 0.3s ease;width: clamp(14rem,29.6vw,19.5rem);}
.header-logo a:is(:hover, :focus-visible) svg, .footer-logo:is(:hover, :focus-visible) svg { transform: scale(1.05); }
.hdr-columns {margin-bottom: 0;justify-content: center;}
.hdr-top-menu { gap: 0; }
@media (max-width: 68.49em) {
.header { z-index: 998; }
.header-logo {text-align: center;}
.header-right {display: none;}
}
@media (min-width: 68.5em) {
.header-logo {padding-top: 1.9rem;padding-bottom: 1.9rem;}
.hdr-columns {padding-left: 1.5rem;gap: 0;}
.header-right {text-align: right;align-items: revert-layer;display: flex;flex-wrap: wrap;max-width: none !important;}
.header-quicklinks svg {width: 0.8rem;margin-right: 0.4rem;transform: translateY(-0.1rem);}
.header-quicklinks .menu-label {background: var(--wp--preset--color--hdr-top-menu-bg);font-size: clamp(0.9rem, 2vw - 0.5rem, 1.1rem);line-height: 1.364;font-weight: 700;border-radius: 0 0 0 2.8rem;padding: 0.8rem 4.2rem 0.8rem 2.3rem;margin-right: -2.2rem;color: #fff;outline-color: var(--wp--preset--color--hdr-top-menu-bg);outline-width: 1px !important;outline-offset: -1px;outline-style: solid;}
.header-quicklinks .hdr-menu-first .menu-label:is(:hover, :focus-visible) {background: none;color: var(--white);}
.header-quicklinks .hdr-menu-first .menu-label:is(:hover, :focus-visible) svg path,
.header-quicklinks .hdr-menu-first .menu-label:is(:hover, :focus-visible) svg stroke {fill: #fff;fill-opacity: 1;/* stroke: #fff; *//* stroke-opacity: 0.75; */}
.header-quicklinks .hdr-menu-first .menu-label svg path, .header-quicklinks .menu-label svg stroke { transition: 300ms ease; }
}
@media (min-width: 91.25em) { /* 1460px */
.hdr-columns {padding-left: 2.5rem;}
}
/* Delete this CSS and block if not using header phone number */
.header-number { font-size: clamp(1rem, 3vw, 2rem); font-family: var(--title-font); margin-top: clamp(0.9rem, 4vw - 2rem, 1.5rem) !important; display: inline-block; }
.header-number svg { width: 2rem; height: 2rem; margin-right: 0.4rem; }
.dialog-box .phone-tree { --wp--style--global--content-size: 24rem; max-width: var(--wp--style--global--content-size); width: 90vw; }
.phone-tree a { display: flex; color: var(--primary-color); margin-bottom: 0.8rem; text-align: left; }
.phone-tree a:last-child { margin-bottom: 0; }
.phone-tree a:is(:hover, :focus-visible) { text-decoration: underline; }
.phone-tree a strong { flex: auto; position: relative; overflow: hidden; }
.phone-tree a strong::after { content: ''; position: absolute; bottom: 0.15rem; height: 1em; width: 100%; margin-left: 0; background-image: radial-gradient(var(--primary-color) 1px, transparent 0px); background-size: 8px 8px; background-repeat: repeat-x; background-position: left bottom; }
.phone-tree a svg { margin-right: .3rem; margin: 0.4rem 0.3rem 0 0.45rem; }
@media (min-width: 68.5em) {
/* Phone Tree - delete CSS and block if not using phone tree */
.hdr-columns .header-right .dialog-trigger {background: #fff;color: var(--primary-color);padding: 0.8rem 2rem 0.8rem 2.3rem;font-size: clamp(0.9rem, 2vw - 0.5rem, 1.1rem);line-height: 1.364;font-weight: 700;border-radius: 0 0 0 2.8rem;margin: 0 !important;z-index: 1;outline-color: #fff;outline-width: 1px !important;outline-offset: -1px;outline-style: solid;}
.hdr-columns .header-right .dialog-trigger > span svg path { transition: 300ms ease; }
.hdr-columns .header-right .dialog-trigger > span:first-of-type svg { margin-right: 0.4rem; width: 0.6rem; transform: translateY(-0.1rem); }
.hdr-columns .header-right .dialog-trigger > span:last-of-type svg { margin-left: 0.4rem; width: 0.5rem; transform: translateY(-0.05rem); }
.hdr-columns .header-right .dialog-trigger:is(:hover, :focus-visible) {background: var(--primary-color);color: var(--white);outline-color: var(--wp--preset--color--hdr-top-menu-bg);}
.hdr-columns .header-right .dialog-trigger:is(:hover, :focus-visible) svg path, .hdr-columns .header-right .dialog-trigger:is(:hover, :focus-visible) svg stroke {fill: #fff;fill-opacity: 1;transition: 300ms ease;}
}
/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
.wp-site-blocks { max-width: 96rem; margin: auto; }
#main {margin: 0 0 2em;margin: 0 0 0;font-size: var(--wp--preset--font-size--content);position: relative;z-index: 1;}
/* Bio grid loop */
.bio-list .bio-box { display: grid; grid-template-areas: "img label"; justify-content: start; }
.bio-list .bio-image {grid-area: img;width: 2rem;height: 3rem;margin-right: 0.5rem;overflow: hidden;}
.bio-list img { width: 100%; height: 100%; }
.bio-list .bio-label { grid-area: label; line-height: normal; display: flex; flex-wrap: wrap; align-content: center; }
.bio-list .bio-label span { flex: 1 1 100%; }
.bio-list .bio-cred { font-size: 0.8rem; }
@media (max-width: 68.49em) {
#main .bio-list .bio-box { padding: 0.3rem 1rem; margin-left: -1rem; width: calc(100% + 2rem); }
#main .bio-list .bio-box:nth-child(odd) { background: rgba(0,0,0,0.1); }
}
@media (min-width: 68.5em) {
.bio-list {display: flex;flex-wrap: wrap;justify-content: center;gap: 0 3.2rem;align-items: flex-start;margin-top: 1rem;}
.bio-list .bio-box {grid-template-areas:
"img"
"label";flex: 0 1 calc(25% - 2.4rem);min-width: 7.5rem; /* Adjust to prevent names from wrapping */text-align: center;}
.bio-list.bio-list .bio-box:is(:hover, :focus-visible) { background: none; }
.bio-list .bio-image {width: 100%;height: auto;aspect-ratio: 1 / 1.2;border-bottom: 0.4rem solid var(--primary-color);margin-bottom: 0.8rem;}
.bio-list .bio-image img {transition: transform 0.3s;}
.bio-list .bio-box:is(:hover, :focus-visible) .bio-image img { transform: scale(1.1); }
.bio-list .bio-cred { color: var(--content-color); }
}
/* Location card loop - Used in footer, content, and menu */
body .location-list-detailed {display: flex;flex-wrap: wrap;justify-content: center;align-items: flex-start;gap: clamp(0.8rem, 4vw, 3rem);max-width: 100%;margin: 0;}
.footer .location-list-detailed { gap: 0 2rem; }
.location-list-detailed .location-box {min-width: 15rem;flex: 1 1 calc(33.3% - 2rem);container-type: inline-size;container-name: loc-box;}
.location-box .loc-left {margin: 0;}
#main .location-list-detailed a {color: var(--content-color);background: linear-gradient(0deg, var(--accent-color), var(--accent-color)) no-repeat 0 bottom / 0 2px;transition: background-size 350ms;background-position-x: clamp(2rem,5.1vw,2.8rem);text-decoration: none;}
#main .location-list-detailed a:is(:hover, :focus-visible) {background-size: 100% 2px;}
.location-box p, .location-box .icon-item {margin: 0;font-style: normal;}
.sub-menu .location-box a.icon-item {/* margin-left: -0.5rem; *//* padding-left: 2.3rem !important; *//* border: 5px dashed red; */}
.sub-menu .location-box a.icon-item svg {/* left: 0.5rem; */}
#main .location-box svg {color: var(--accent-color);}
#main .location-box img { box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25); }
@media only screen and (min-width: 37.5em) {
.location-box { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; }
.location-box .loc-title { flex: 0 0 100%; }
.location-box:only-child .loc-left { flex: 0 0 12rem; }
.location-box .loc-left {/* flex: 0 0 10rem; */}
.location-box .hours {flex: 0 0 13rem;}
.location-box .map-link { flex: 1 0 10rem; }
}
/* Apply styles when there is only one locations-card */
.location-list-detailed .location-box:only-child { justify-content: start; }
.location-list-detailed .location-box:only-child img { width: 100% }
@media (min-width: 51.25em) {
.location-list-detailed .location-box:only-child .map-link { width: calc(100% - 25rem) }
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {color: var(--white);background: var(--primary-color);padding-top: clamp(1.2rem, 5.5vw, 3.6rem);margin: 0;position: relative;}
.footer-dot-sphere {position: absolute;top: 0;right: 0;width: 50vw;max-width: 18.5rem;height: 50vw;max-height: 18.5rem;transform-origin: top right;}
.footer a, .footer h3 { color: var(--white); }
.footer a, .location-list-names a {text-decoration: none;display: block;width: fit-content;background: linear-gradient(0deg, var(--white), var(--white)) no-repeat 0 bottom / 0 2px;transition: background-size 350ms;font-size: 0.9rem;}
.footer a.icon-item { background-position-x: 1.6rem; }
.footer a:is(:hover, :focus-visible) { background-size: 100% 2px; }
#foot_content {justify-content: space-between;font-size: var(--wp--preset--font-size--footer);}
#foot_content .wp-block-column {flex: 0 1 auto;flex-basis: fit-content !important;}
#footer-socials {margin-bottom: 1.4rem;}
.footer .footer-logo { margin: 0 0 1.5rem; }
.footer .footer-logo:is(:hover, :focus-visible) { background-size: 0; }
.footer-socials { margin: 0 0 0 4.3rem; }
.footer-socials .wp-block-fuel-menu-wrapper { background: none; }
.footer-socials a { transition: transform 0.3s ease; }
.footer-socials a:is(:hover, :focus) { background: none; transform: scale(1.2); }
.footer .wp-block-heading {font-size: 1.2rem;padding-bottom: 0.9rem;margin: 0 0 1.4rem;position: relative;}
.footer .wp-block-heading:after {content: '';position: absolute;right: 0;bottom: 0;left: 0;height: 0.1rem;margin: auto;background: url('data:image/svg+xml,');background-position: right;transform: rotateY(180deg);}
.footer #footer-locations {flex: 1 0 auto;padding-right: 1.5rem;padding-left: 1.5rem;}
#footer-locations .location-box {width: 100%;}
#footer-locations .location-box:first-of-type {margin: 0 0 2rem;}
.ftr-addr-line { margin: 0 0 0.8rem; }
.icon-item .right-caret-icon { bottom: 0; left: auto; margin: auto auto auto 0.2rem; width: 0.25rem; height: 0.5rem; }
@media only screen and (max-width: 68.49em) {
#foot_content { flex-wrap: wrap !important; justify-content: center; }
#footer-locations { flex-basis: 100% !important; }
#footer-quick-links { display: none; }
}
@media (min-width: 42.5em) { /* 680px */
#footer-socials { margin-bottom: 2rem; }
.footer #footer-locations { padding-right: 0; padding-left: 0; }
#footer-locations .location-list-detailed {display: flex;flex-wrap: nowrap;padding-right: 1.5rem;padding-left: 1.5rem;gap: 0 1rem;}
#footer-locations .location-box {width: 50%;gap: 0;}
#footer-locations .location-box .loc-left {flex: none;width: 100%;}
}
@media (min-width: 58.5em) {
#foot_content {padding-right: 1.5rem;padding-left: 1.5rem;}
#footer-socials { margin-bottom: 0; }
#footer-locations .location-list-detailed { padding-right: 0; padding-left: 0; }
#footer-locations .location-box, #footer-locations .location-box:first-of-type { min-width: 10rem; margin: 0 0 0; }
}
@media (min-width: 68.5em) {
.footer #footer-locations {flex: 1 2 auto;}
#footer-locations .location-list-detailed {flex-wrap: wrap;padding: 0;}
#footer-quick-links .wp-block-navigation-item {margin: 0;}
}
@media (min-width: 82.5em) {
#foot_content { padding-right: var(--ftr-contain-padding); padding-left: var(--ftr-contain-padding); }
#foot_content { margin-bottom: clamp(2rem, 5.1vw, 3.4rem); }
#foot_content, #footer-locations .location-list-detailed { gap: 0 6vw; }
#footer-socials { max-width: 14.6rem; }
.footer .footer-logo { margin: 0 0 2.2rem; }
#footer-locations .location-list-detailed {flex-wrap: nowrap;justify-content: space-between;}
#footer-locations .location-box, #footer-locations .location-box:first-of-type {min-width: 0;}
.ftr-addr-line { margin: 0 0 1.2rem; }
#footer-quick-links .wp-block-navigation__container { gap: 0; }
#footer-quick-links .wp-block-navigation-item { margin: 0 0 0; }
}
@media (min-width: 100em) {
#foot_content, #footer-locations .location-list-detailed {gap: 0 3.2rem;}
}
/* Copyright Section */
.copyright-wrapper {padding-top: 1.2rem;padding-bottom: 5rem;background: rgba(255,255,255,0.1);text-align: center;margin-bottom: 0;}
.policy-menu li { margin: 0; }
.policy-menu li:nth-child(n+1):not(:last-child)::before {content: '|';position: absolute;right: -0.8rem;}
.policy-menu a { font-size: var(--wp--preset--font-size--copyright); }
@media (min-width: 58.5em) {
.copyright-wrapper { padding-right: 1.5rem; padding-left: 1.5rem; }
}
@media (min-width: 68.5em) {
.copyright-wrapper {text-align: left;padding-top: 0.65rem;padding-bottom: 0.65rem;}
.policy-menu {gap: 1.5rem;}
}
@media (min-width: 82.5em) {
.copyright-wrapper { padding-right: var(--ftr-contain-padding);padding-left: var(--ftr-contain-padding); }
}
/*--------------------------------------------------------------
# Location
--------------------------------------------------------------*/
.locations-section {padding-top: 1rem;padding-right: 1.5rem;padding-bottom: clamp(5rem,16vw,9rem);padding-left: 1.5rem;position: relative;}
.locations-section-text-column-title {color: var(--primary-color);position: relative;margin: 0 0 1.8rem;}
.title-dots {position: absolute;top: -0.5rem;left: -0.5rem;width: 1.2rem;height: 1rem;}
.locations-section .loc-title {padding: 0 0 0;margin: 0 0 0.8rem;border-bottom: none;position: relative;}
.locations-section .loc-title:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0.5rem; height: 2px; margin: auto; background: url('data:image/svg+xml,'); }
.locations-section .loc-title-container {background: #fff;/* opacity: 0.5; */padding-right: 0.6rem;z-index: 1;position: relative;}
.locations-section .icon-item, #main .locations-section .icon-item {padding-left: clamp(2rem,5.1vw,2.8rem);margin: 0 0 0.8rem;font-size: clamp(0.9rem,1.7vw,1rem);display: inline-block;}
.locations-section .icon-item svg {width: clamp(1.6rem,3.7vw,2rem);height: clamp(1.6rem,3.7vw,2rem);}
.locations-section .location-box {width: 100%;}
.locations-section .location-box:last-of-type .icon-item svg circle { fill: var(--wp--preset--color--lt-blue); }
.locations-section .hours-label {font-weight: 700;color: var(--primary-color);display: block;}
.locations-section .hours-row { padding: 0; }
.locations-section .hours-day { min-width: 4.5rem; margin-right: 0.8rem; }
.locations-section-image-column {text-align: center;position: relative;}
.locations-section-image-column .locations-section-map-image {display: inline-block;width: clamp(9rem,36.5vw,20rem);}
.locations-dots-curve {position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto !important;width: calc(clamp(9rem,36.5vw,20rem) * 1.8);height: calc(clamp(9rem, 36.5vw, 20rem)* 1.8);padding-bottom: 0.5rem;z-index: 1;}
@media (min-width: 48.875em) { /* 782px */
.locations-section-columns.wp-block-columns {flex-wrap: wrap !important;gap: 2.5rem 0;}
.locations-section-columns.wp-block-columns > .locations-section-text-column.wp-block-column, .locations-section-columns.wp-block-columns > .locations-section-image-column.wp-block-column {flex-basis: auto;}
}
@media (min-width: 68.5em) {
.locations-section-columns.wp-block-columns {max-width: 67.6rem;}
.locations-section-columns.wp-block-columns {flex-wrap: nowrap !important;}
.locations-section-columns.wp-block-columns > .locations-section-text-column.wp-block-column {width: 61.16%;max-width: 36.7rem;}
.locations-section-text-column-title .title-dots {top: -0.9rem;left: -0.75rem;width: 1.8rem;height: 1.5rem;}
body .location-list-detailed {gap: 1.7rem 0;}
.locations-section .location-box {flex: auto;display: grid;grid-template-areas:'top top''left top-right''left bottom-right';}
.locations-section .loc-title { grid-area: top; }
.locations-section .location-box .loc-left { grid-area: left; }
.locations-section .location-box .loc-left .address { margin: 0 0 1.2rem; }
.locations-section .hours {grid-area: top-right;margin: 0 0 1.2rem;}
.locations-section .walk-in-hours {grid-area: bottom-right;margin: 0;}
.locations-section-image-column {display: flex;justify-content: center;align-items: center;width: 38.84%;max-width: 23.3rem;flex-basis: auto !important;text-align: right;}
.locations-section-image-column .locations-section-map-image {width: clamp(12rem, 17.8vw, 20rem);}
.locations-dots-curve {width: calc(clamp(12rem, 17.8vw, 20rem) * 1.8);height: calc(clamp(12rem, 17.8vw, 20rem) * 1.8);}
}
@media (min-width: 82.5em) {
.locations-section-columns.wp-block-columns {padding-left: 1rem;}
}
@media (min-width: 91.25em) { /* 1460px */
body .locations-section.wp-block-group {padding: 0 0 0;}
.locations-section-columns.wp-block-columns {padding: 0 0 9rem;margin-top: 0;margin-left: var(--contain-padding) !important;}
.locations-section-columns { max-width: none !important; margin: 0 !important; gap: 0 0; }
.locations-section-columns.wp-block-columns > .locations-section-text-column.wp-block-column {/* z-index: 1; */width: 46.74%;max-width: 31.6rem;}
body .locations-section-image-column { margin: 0; justify-content: flex-start; width: 36.68%; max-width: 24.8rem; }
.locations-section-image-column .locations-section-map-image { width: 20rem; margin-left: 4.8rem; }
.locations-dots-curve {width: 33rem;max-width: none;height: 34rem;right: auto;left: -1.7rem;padding-bottom: 1rem;}
}
/*--------------------------------------------------------------
# Animations
--------------------------------------------------------------*/
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(var(--spin-rotation, 360deg)); }
}
@keyframes fadein {
0% { opacity: var(--fadein-opacity, 0); transform: translate(var(--x, 0), var(--y, 5rem)); }
100% { opacity: 1; transform: translate(0, 0); }
}
/* popAnimation Example: https://jsfiddle.net/KTC_88/8xkLv520/ */
@keyframes popAnimation {
0% {transform: scale(0.5); opacity: 0;}
80% {transform: scale(1.1)}
100% {transform: scale(1); opacity: 1}
}
@keyframes slideDown {
0% { opacity: 0; transform: translateY(-2rem); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
0% { opacity: 0; transform: translateY(2rem); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes expandCenter {
0% {transform: scale(0); }
100% {transform: scale(1);}
}
@keyframes ctaSlideUp {
0% { transform: translateY(50%); }
100% { transform: translateY(0%); }
}
@keyframes ctaSlideDown {
0% { transform: translateY(-50%); }
100% { transform: translateY(0%); }
}
@media (prefers-reduced-motion:no-preference) {
.delay-100 {animation-delay: 100ms;}
.delay-150 {animation-delay: 150ms;}
.delay-200 {animation-delay: 200ms;}
.delay-250 {animation-delay: 250ms;}
.delay-300 {animation-delay: 300ms;}
.delay-350 {animation-delay: 350ms;}
.delay-400 {animation-delay: 400ms;}
.delay-450 {animation-delay: 450ms;}
.delay-500 {animation-delay: 500ms;}
.delay-600 {animation-delay: 600ms;}
.delay-700 {animation-delay: 700ms;}
.delay-750 {animation-delay: 750ms;}
.delay-800 {animation-delay: 800ms;}
.delay-900 {animation-delay: 900ms;}
.delay-1000 {animation-delay: 1000ms;}
.delay-1100 {animation-delay: 1100ms;}
.delay-1200 {animation-delay: 1200ms;}
.delay-1300 {animation-delay: 1300ms;}
.delay-1400 {animation-delay: 1400ms;}
.delay-1500 {animation-delay: 1500ms;}
.delay-1600 {animation-delay: 1600ms;}
/* Slide Down */
.slideDown { opacity: 0; transform: translateY(-2rem); }
.js-intersected .slideDown {animation-name: slideDown;animation-duration: 750ms;animation-fill-mode: forwards;}
/* Slide Up */
.slideUp { opacity: 0; transform: translateY(2rem); }
.js-intersected .slideUp {animation-name: slideUp;animation-duration: 500ms;animation-fill-mode: forwards;}
/* Expand from Center */
.expandCenter { transform: scale(0); }
.js-intersected .expandCenter { animation-name: expandCenter;animation-duration: 500ms;animation-fill-mode: forwards;}
/* Dots Curve Animation */
.dots-curve path {opacity: 0;transition: 200ms ease;}
.js-intersected .dots-curve path { opacity: 1; }
.dots-curve path:nth-child(n+1):nth-child(-n+25) { transition-delay: 700ms}
.dots-curve path:nth-child(n+26):nth-child(-n+50) { transition-delay: 600ms}
.dots-curve path:nth-child(n+51):nth-child(-n+75) { transition-delay: 500ms}
.dots-curve path:nth-child(n+76):nth-child(-n+100) { transition-delay: 400ms}
.dots-curve path:nth-child(n+101):nth-child(-n+125) { transition-delay: 300ms}
.dots-curve path:nth-child(n+126):nth-child(-n+150) { transition-delay: 200ms}
.dots-curve path:nth-child(n+151):nth-child(-n+176) { transition-delay: 100ms}
/* Loctions Dot Curve Animation */
.locations-dots-curve path { opacity: 0; transition: 200ms ease; }
.js-intersected .locations-dots-curve path { opacity: 1; }
.locations-dots-curve path:nth-child(n+1):nth-child(-n+25) { transition-delay: 700ms}
.locations-dots-curve path:nth-child(n+26):nth-child(-n+50) { transition-delay: 600ms}
.locations-dots-curve path:nth-child(n+51):nth-child(-n+75) { transition-delay: 500ms}
.locations-dots-curve path:nth-child(n+76):nth-child(-n+100) { transition-delay: 400ms}
.locations-dots-curve path:nth-child(n+101):nth-child(-n+125) { transition-delay: 300ms}
.locations-dots-curve path:nth-child(n+126):nth-child(-n+150) { transition-delay: 200ms}
.locations-dots-curve path:nth-child(n+151):nth-child(-n+176) { transition-delay: 100ms}
/* Add to wrappers to animate children */
.popin > * { transform: scale(0.5); opacity: 0; }
.popin.js-intersected > * { --delay:calc(var(--i, 0) * 200ms); animation: popAnimation 400ms ease var(--delay) forwards }
.fadein-items > * { opacity: 0; transform: translateY(0); }
.fadein-items.js-intersected > * { --delay:calc(var(--i, 0) * 200ms); animation: fadein var(--time, 400ms) ease var(--delay) forwards }
/* Add directly to element that will be affected */
.fadein { opacity: 0; transform: translateY(0); --y: 0; }
.fadeup { opacity: 0; transform: translateY(5rem); }
.fadedown { opacity: 0; transform: translateY(-5rem); --y: -5rem; }
.fadeleft { opacity: 0; transform: translateX(-5rem); --x: -5rem; --y: 0; }
.faderight { opacity: 0; transform: translateX(5rem); --x: 5rem; --y: 0; }
.js-intersected:is(.fadein, .fadeup, .fadedown, .fadeleft, .faderight) { animation: fadein var(--time, 300ms) var(--easing, ease) forwards }
}
@media (prefers-reduced-motion:no-preference) and (min-width: 68.5em) {
/* CTA Slide Up */
.ctaSlideUp { transform: translateY(50%); }
.js-intersected .ctaSlideUp {animation-name: ctaSlideUp;animation-duration: 1000ms;animation-fill-mode: forwards;}
/* CTA Slide Down */
.ctaSlideDown {transform: translateY(-50%); }
.js-intersected .ctaSlideDown {animation-name: ctaSlideDown;animation-duration: 1000ms;animation-fill-mode: forwards;}
}
/*--------------------------------------------------------------
## Page Transition
# @see https://css-tricks.com/animating-with-clip-path/
# @see https://www.uplabs.com/posts/clip-path-generator
--------------------------------------------------------------*/
.page-transition {
display: none;
}
/*
* Page transition bug:
* Mobile, page transition: Something to take note on. Whenever I click to a page,
* then press back on my iPhone, the page transition is locked and I only see the green background color over my whole screen.
* I can’t navigate from that point at all anymore.
*/
/*
@media (prefers-reduced-motion:no-preference) {
.page-transition {
display: block;
will-change: transform;
background-color: var(--wp--preset--color--menu-hover-bg);
pointer-events: none;
}
.transition-in {
animation: 0.3s slidein-left forwards;
}
.transition-out {
animation: 0.3s slideout-right 0.3s forwards;
}
@keyframes slidein-left {
0% { clip-path: inset(0% 100% 0% 0%); }
100% { clip-path: inset(0% 0% 0% 0%); }
}
@keyframes slideout-right {
0% { clip-path: inset(0% 0% 0% 0%); }
100% { clip-path: inset(0% 0% 0% 100%); }
}
}
*/
/*--------------------------------------------------------------
# Print
--------------------------------------------------------------*/
@media print {
@page { margin: 0.5cm; }
* { background: transparent !important; color: black !important; text-shadow: none !important; -webkit-filter: none !important; filter: none !important; -ms-filter: none !important; }
a, a:visited { color: #444 !important; text-decoration: underline; }
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
p, h1, h2, h3 { orphans: 3; widows: 3; }
h1, h2, h3 { page-break-after: avoid; }
.main-header { padding-top: 0 !important; padding-bottom: 0 !important; }
.main-title { margin: 0; padding-bottom: 1rem; border-bottom: 2px solid #000; }
.primary-menu, #sidebar, .header, .footer, .page-navigation, .pagination, .wp-prev-next, .respond-form { display: none !important; }
}
/*--------------------------------------------------------------
# Safari 15.3 fallbacks
Safari 15.3 and under bug fixes - welcome to the new IE
--------------------------------------------------------------*/
@media not all and (min-resolution: 0.001dpcm) {
@supports (-webkit-appearance: none) {
/* Hide Dialog (not supported) */
dialog { display: none; background-color: var(--white); z-index: 9999; }
dialog[open] { display: block; }
/* menu fixes */ .js-active .sub-menu-trigger[aria-expanded=true] + .sub-menu .sub-animate > * { background: var(--white); }
.primary-menu .menu-label:hover { color: var(--white); }
}
}