/*
Theme Name: Fuel6
Theme URI: https://fuelmedical.com
Author: Fuel Medical
Description: A Fuel Medical block theme (2024)
Requires at least: 6.5
Tested up to: 6.7.1
Requires PHP: 8.0
Version: 6.3.8
Text Domain: fuel6
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Custom Properties
# Fuel Normalize
# Helper Classes
# WordPress Blocks
# Forms - Moved to css/gravity-forms.css
# Header
# Content
# Footer
# Locations
# Animations
# print
# Safari 15.3 fallbacks
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Custom Properties
Note: WordPress declares its variables in the body, so do the same to avoid scope issues.
--------------------------------------------------------------*/
body {
/* Structure - 1100px - for use outside of contain class */
--contain-padding: clamp(1rem, calc(50vw - 29.93rem), 19rem);
/* 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);
--ltblue: var(--wp--preset--color--color-1);
--button-grad: var(--wp--preset--color--button-grad);
--dark-grad: var(--wp--preset--color--dark-grad);
/* Top Level Primary Menu Colors - now managed on the block level */
--wp--preset--color--menu-background: inherit;
--wp--preset--color--menu-color: currentColor;
--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);
}
/*--------------------------------------------------------------
# Fuel Normalize
--------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { font-size: clamp(125%, 1vw, 240%); line-height: 1.5; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; min-width: 18rem; }
iframe, img, svg, audio, video, embed { vertical-align: middle; max-width: 100%; }
img { object-fit: cover; }
img:not([src*=".png"], [src*=".gif"], [src*=".svg"]) { background: var(--grey); }
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);}
[hidden] { display: none; }
@media only screen and (min-width: 68.5em) {
*[id] { scroll-margin-top: 3rem; }
}
/*--------------------------------------------------------------
# Helper Classes
--------------------------------------------------------------*/
.contain { --contain-padding: clamp(var(--mobile-padding, 1rem), calc(50vw - 29.93rem), var(--desktop-padding, 19rem)); 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: 68.5em) {
.mobile-only { display: none !important; }
}
@media (max-width: 68.49em) {
.desktop-only { display: none !important; }
body { --center-on-mobile: center; }
.text-center-on-mobile { text-align: var(--center-on-mobile); }
.center-on-mobile { justify-content: var(--center-on-mobile); }
}
.zebra > *:not(tbody):nth-child(odd) { background-color: var(--zebra, var(--grey)); }
/* Use on query loops to help change the order every other column */
.stagger > :nth-child(odd) .wp-block-columns { flex-direction: row-reverse; }
/* Use to make link fill entire block - use when you can't wrap blocks with anchor tag */
.cover-link { position: absolute !important; inset: 0; width: 100%; z-index: 1; background: none !important; }
:has(> .cover-link) { position: relative; }
/*--------------------------------------------------------------
# WordPress Blocks
--------------------------------------------------------------*/
@media (min-width: 37.5em) {
.alignleft, .alignright { max-width: 48%; }
}
@media (min-width: 68.5em) {
.is-position-sticky { top: 4rem; }
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header-logo svg {width: 30.7vw;min-width: 16.3rem;max-width: 29.5rem;transition: transform 0.3s ease;}
.header-logo a:is(:hover, :focus-visible) svg, .footer-logo:is(:hover, :focus-visible) svg { transform: scale(1.05); }
.header-right { align-self: center !important; }
.header-right > .wp-block-group { gap: 2.6rem;padding-bottom: 0 !important;margin: 0 !important;}
.header-req-appt {font-size: 1.26rem;font-family: var(--content-font);position: relative;}
.header-req-appt:after {content: '';width: 4px;height: 100%;position: absolute;top: 0;right: -1.4rem;bottom: 0;margin: auto;background: var(--white);}
.header-number {font-size: 1.6rem;font-family: var(--content-font);line-height: 1;}
.header-req-appt:is(:hover, :focus), .header-number:is(:hover, :focus) { color: var(--ltblue); }
@media (max-width: 68.49em) {
.header { position: relative; z-index: 998; }
.header .wp-block-columns { padding: 2.6rem 0; margin: 0 !important; }
}
@media (min-width: 68.5em) {
.header:not(.block-editor-block-list__block) {position: sticky;/* top: -9.8rem; */z-index: 999;}
.header .wp-block-columns { padding: 3.1rem 3rem; margin: 0 !important; }
}
@media (min-width: 82.5em) {
.header .wp-block-columns {padding: 3.2rem 5rem;}
}
/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
.wp-site-blocks { margin: auto; }
#main { margin: 0; font-size: var(--wp--preset--font-size--content); }
.entry-content .wp-block-list li { margin: 1em 0 0 0; }
/* Location card loop - Used in content, and menu */
/* If a grid has only one column, make it full width */
.location-cta .wp-block-post-template.is-layout-grid:not(:has(li:nth-child(2))) { grid-template-columns: 1fr; }
/* If a grid has three columns, make it flex */
.location-cta .wp-block-post-template.is-layout-grid:has(li:nth-child(3)) {
display: flex; flex-wrap: wrap;
& .wp-block-post { flex: 1 1 15rem; }
}
.location-card svg { vertical-align: bottom; }
.sub-menu .location-card {
background: none !important; padding-top: 0 !important;
& .wp-block-post-title { padding-bottom: 0.5rem; font-size: var(--wp--preset--font-size--content); font-family: var(--content-font); font-weight: bold; }
& > .wp-block-group:first-of-type { margin-top: 1.3rem; }
}
@media (max-width: 68.49em) {
.sub-menu {
& .location-cta svg { color: var(--white); }
& .location-card { padding: 0 !important; }
& .location-cta > ul { gap: 1rem; }
& .location h3 { border-color: var(--white) !important; }
}
}
/* Bio grid custom 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); }
/* Menu styling */
.sub-menu .bio-list .bio-box.bio-box { margin-left: -1rem; }
.sub-menu .bio-box::after, #main .bio-box::after { content: ''; background-color: currentColor; -webkit-mask: var(--link-svg); mask: var(--link-svg); position: absolute; inset: 0 8vw 0 auto; width: 0.9rem; height: 0.9rem; margin: auto; transition: background-color 0.3s ease; --link-svg: url('data:image/svg+xml,'); }
.sub-menu .bio-list .bio-box:not(:hover, :focus-visible):nth-child(odd) { background: rgba(255, 255, 255, 0.1); }
}
@media (min-width: 68.5em) {
.bio-list { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; margin-top: 1rem; }
.bio-list .bio-box { grid-template-areas: "img" "label"; flex: 0 1 calc(25% - 1rem); min-width: 7.5rem; /* Adjust to prevent names from wrapping */ text-align: center; }
.sub-menu .bio-list .bio-box { flex: 0 1 calc(20% - 1rem); }
.bio-list.bio-list .bio-box:is(:hover, :focus-visible) { background: none; }
.bio-list .bio-image { display: block; 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); }
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {margin: 0;overflow: hidden;}
.footer > .wp-block-group { position: relative; }
.footer a {display: block;width: fit-content;background: linear-gradient(0deg, var(--white), var(--white)) no-repeat 0 bottom / 0 2px;transition: background-size 350ms;}
.footer .icon-item {padding-left: 0;white-space: nowrap;margin: 1rem auto 0 !important;text-align: center;}
.footer .icon-item.hours { margin-top: 0 !important; }
.footer a:not(.footer-top-logo):is(:hover, :focus-visible) { background-size: 100% 2px; color: var(--white); }
.footer-top-logo {
display: block !important; width: fit-content !important; text-align: center; position: relative; transition: 500ms ease !important;
&:before {content: '';position: absolute;top: 0;right: calc(50% + 6.2rem);bottom: 0;left: -16rem;background-repeat: no-repeat;background-position: right center;background-image: url('data:image/svg+xml,');}
&:after {content: '';position: absolute;top: 0;right: -16rem;bottom: 0;left: calc(50% + 6.2rem);background-repeat: no-repeat;background-position: left center;background-image: url('data:image/svg+xml,');}
&:is(:hover, :focus-visible) {transform: scale(1.1);}
svg { width: 100%; max-width: 11.4rem; }
}
.footer .wp-block-post-template:has(.type-location) {display: block;}
.footer-col-title {margin-bottom: 1.5rem;position: relative;text-align: center;font-size: 1.2rem !important;}
.footer-col-title:after {content: '';background: var(--white);width: 1.4rem;height: 1px;position: absolute;right: 0;bottom: -0.65rem;left: 0;margin: auto;}
.footer-hours-container {
.hours-row {flex-wrap: wrap;justify-content: center;}
.hours-time {width: 100%;}
}
#foot_content .wp-block-fuel-wrapper-block {margin-right: auto !important;margin-left: auto !important;max-width: none;text-align: center;}
.footer-logo-col-quote {font-size: clamp(1.2rem, 2.5vw, 1.6rem) !important;line-height: 1;margin-bottom: 2.6rem;}
.footer-logo-col-quote em {color: var(--ltblue);}
#foot_content .wp-block-search {min-width: 0;}
#footer-assoc-list svg { margin: 0; transition: 300ms ease; }
#AAoA-link, #AAO-HNS-link { transition: 300ms ease; }
#AAoA-link:is(:hover, :focus-visible), #AAO-HNS-link:is(:hover, :focus-visible) {background: none;transf;transform: scale(1.05);}
@media (min-width: 48.875em) { /* 782px */
.footer > .wp-block-group > .wp-block-group {overflow: hidden;padding-right: var(--contain-padding) !important;padding-left: var(--contain-padding) !important;margin-top: 0;}
#foot_content {gap: 1rem;justify-content: center;max-width: none;}
#foot_content .wp-block-search { margin-right: 1.5rem; }
#foot_content .wp-block-fuel-wrapper-block { margin-right: 0 !important; margin-left: 0 !important; text-align: left; }
.footer-logo-col-quote { white-space: nowrap; }
.footer-col-title { text-align: left; }
.footer-col-title:after { right: auto; }
.footer .icon-item { text-align: left; margin: 1rem 0 0 !important; }
.footer-hours-container .hours-row {justify-content: flex-start;}
}
@media (min-width: 68.5em) {
.footer > .wp-block-group {background-repeat: no-repeat;background-position: top left;background-size: contain;background-image: url('data:image/svg+xml,');}
.footer-top-logo {
width: 100% !important; margin-bottom: 1.7rem !important;
&:before {right: calc(50% + 9.55rem);left: 0;}
&:after { right: 0; left: calc(50% + 9.55rem); }
svg { max-width: 16.3rem; }
}
#foot_content {gap: 3rem;justify-content: space-between;}
.footer-logo-col-quote em {color: var(--white);}
}
.footer-logo > p { font-size: clamp(24px, 2vw, 32px); font-family: var(--title-font); }
/* 850px - Mobile breakpoint for copyright section */
@media only screen and (max-width: 53.125em) {
.copyright-wrapper { flex-direction: column; text-align: center; }
.policy-menu { justify-content: center; }
}
/* Policy menu */
.policy-menu li:nth-child(n+1):not(:last-child)::before { content: '|'; position: absolute; right: -0.6rem; }
/*--------------------------------------------------------------
# Locations
--------------------------------------------------------------*/
.is-layout-flex>.flex-grow { flex-grow: 1; }
/*--------------------------------------------------------------
# Animations
--------------------------------------------------------------*/
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(var(--spin-rotation, 360deg)); }
}
@keyframes fadein {
0% { opacity: var(--o1, 0); transform: translate(var(--x1, 0), var(--y1, 5rem)); }
100% { opacity: var(--o2, 1); transform: translate(var(--x2, 0), var(--y2, 0)); }
}
@keyframes fadeout {
0% { opacity: var(--o2, 1); transform: translate(var(--x2, 0), var(--y2, 0)); }
100% { opacity: var(--o1, 0); transform: translate(var(--x1, 0), var(--y1, 5rem)); }
}
@keyframes point {
0% { transform: translate(0, 0); }
50% { transform: translate(var(--x, 1rem), var(--y, 0)); }
100% { 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; }
}
/**
* Animation helper classes.
*/
@media (prefers-reduced-motion:no-preference) {
/* Transition Delay */
.delay-200 { --delay: 200ms; }
.delay-300 { --delay: 300ms; }
.delay-400 { --delay: 400ms; }
.delay-500 { --delay: 500ms; }
.delay-600 { --delay: 600ms; }
.delay-750 { --delay: 750ms; }
.delay-800 { --delay: 800ms; }
.delay-900 { --delay: 900ms; }
.delay-1000 { --delay: 1000ms; }
.delay-1200 { --delay: 1200ms; }
.delay-1500 { --delay: 1500ms; }
/* Transition Time */
.time-300 { --time: 300ms; }
.time-500 {--time: 500ms;}
.time-750 { --time: 750ms; }
.time-1000 { --time: 1000ms; }
.time-1500 { --time: 1500ms; }
/* 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); --y1: 0; }
.fadeup { opacity: 0; transform: translateY(5rem); }
.fadedown { opacity: 0; transform: translateY(-5rem); --y1: -5rem; }
.fadeleft { opacity: 0; transform: translateX(-5rem); --x1: -5rem; --y1: 0; }
.faderight { opacity: 0; transform: translateX(5rem); --x1: 5rem; --y1: 0; }
.js-intersected:is(.fadein, .fadeup, .fadedown, .fadeleft, .faderight) { animation: fadein var(--time, 500ms) var(--easing, ease) var(--delay, 0s) forwards; }
}
/* Used to make images in links grow when link is hovered - simply add .hover-img-grow to link or image block */
figure.hover-img-grow, .hover-img-grow figure { overflow: hidden; }
.hover-img-grow img { transition: transform var(--time, 0.3s); } a:has(+ .hover-img-grow):is(:hover, :focus-visible)+figure img, a:has(.hover-img-grow):is(:hover, :focus-visible) img, a.hover-img-grow:is(:hover, :focus-visible) img { transform: scale(var(--scale, 1.1)); }
/*--------------------------------------------------------------
# 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); }
}
}