/*
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.9
Requires PHP: 8.0
Version: 6.4.4
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Custom Properties
# Fuel Normalize
# Helper Classes
# WordPress Blocks
# Header
# Content
# Footer
# Location Section
# Contact Section
# Animations
# print
# Safari 15.3 fallbacks
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Custom Properties
--------------------------------------------------------------*/
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);
--orange: var(--wp--preset--color--color-1);
--cyan: var(--wp--preset--color--color-2);
--tan: var(--wp--preset--color--color-3);
--cream: var(--wp--preset--color--color-4);
--brown: var(--wp--preset--color--color-5);
--dkgrey: var(--wp--preset--color--color-6);
--cta1: var(--primary-color);
--cta2: var(--orange);
--cta3: var(--accent-color);
--cta4: var(--cyan);
--white: var(--wp--preset--color--white);
--grey: var(--wp--preset--color--grey);
--black: var(--wp--preset--color--black);
/* Text */
--title-font: var(--wp--preset--font-family--title);
--title-color: var(--wp--preset--color--primary);
--content-font: var(--wp--preset--font-family--content), sans-serif;
--content-color: var(--wp--preset--color--content);
}
/*--------------------------------------------------------------
# Fuel Normalize
--------------------------------------------------------------*/
body { line-height: 1.88; }
*, *::before, *::after {box-sizing: border-box;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
html:has(.ios) { overscroll-behavior: none; }
html { font-size: clamp(125%, 1vw, 240%); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; min-width: 15rem; }
iframe, img, svg, video {vertical-align: middle;max-width: 100vw;}
img { object-fit: cover; width: -webkit-fill-available; }
img:not([src*=".png"], [src*=".gif"], [src*=".svg"]) {/* background: var(--grey); */}
picture[style*="width"] { display: flex; }
a { text-decoration: none; color: var(--accent-color); transition: 300ms ease; }
button { transition: color 300ms, background-color 300ms; }
a[href^="tel:"] {white-space: nowrap;}
a:hover { color: var(--wp--preset--color--primary); }
[hidden] { display: none; }
a, svg, svg path {transition: 300ms ease !important;}
.wp-block-cover, .wp-block-cover-image { min-height: auto; }
@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; }
.text-center { text-align: center; }
@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); }
.align-items-center-on-mobile { align-items: center; }
.margin-center-on-mobile { margin-left: auto; margin-right: auto; }
.stack-on-mobile { flex-direction: column; }
.full-width-on-mobile { width: 100%; max-width: 100%; }
.wrap-on-mobile { flex-wrap: wrap; }
}
.zebra > *:not(tbody):nth-child(odd) { background-color: var(--zebra, var(--grey)); }
.toggle-content:has(.zebra) { padding: 0; } /* 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% !important;z-index: 1;background: none !important;font-size: 0;}
:has(> .cover-link) { position: relative; }
/*--------------------------------------------------------------
# WordPress Blocks
--------------------------------------------------------------*/
@media (max-width: 37.49em) {
:where(.alignleft, .alignright):not(.wp-block-query .wp-block-post-featured-image) { float: none; margin: 0 auto 1rem; }
}
@media (min-width: 37.5em) {
:where(.alignleft, .alignright):not(.wp-block-query .wp-block-post-featured-image) { max-width: 48% }
}
@media (min-width: 68.5em) {
.is-position-sticky { transition: top 0.3s ease; }
body:has(header.show-sticky) .is-position-sticky {top: 4rem !important;}
}
/* Button hover/focus styles */
.wp-element-button, .wp-block-button__link {position: relative;border-radius: 0;}
:root :where(.wp-element-button, .wp-block-button__link):is(:hover, :focus-visible) {background-color: var(--cream);color: var(--wp--preset--color--accent);}
.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); }
.wp-element-button:not(.wp-block-search__button):before, .wp-block-button__link:not(.wp-block-search__button):before {content: '';width: 0.6rem;height: 0.6rem;position: absolute;inset: -0.3rem auto auto -0.3rem;transition: 300ms ease;background-size: contain;background-repeat: no-repeat;background-image: url('data:image/svg+xml,');}
.wp-element-button:not(.wp-block-search__button):after, .wp-block-button__link:not(.wp-block-search__button):after {content: '';width: 0.6rem;height: 0.6rem;position: absolute;inset: auto -0.3rem -0.3rem auto;transition: 300ms ease;background-size: contain;background-repeat: no-repeat;background-image: url('data:image/svg+xml,');}
.wp-element-button:is(:hover, :focus-visible):before, .wp-block-button__link:is(:hover, :focus-visible):before {transform: translate(-0.1rem,-0.1rem);}
.wp-element-button:is(:hover, :focus-visible):after, .wp-block-button__link:is(:hover, :focus-visible):after {transform: translate(0.1rem,0.1rem);}
/* Play Video */
.wp-element-button .play-video { margin-left: 0.4rem; vertical-align: 0; }
.wp-element-button:is(:hover, :focus-visible) .play-video {color: var(--accent-color);}
@media (max-width: 68.49em) {
.entry-content .wp-block-buttons {justify-content: var(--center-on-mobile); /* Center buttons on mobile but not in menu */}
}
/* Section Title Diamond */
.section-title-diamond {position: relative;}
.section-title-diamond:after {content: '';width: 0.6rem;height: 0.6rem;position: absolute;inset: auto 0 -1.1rem 0;margin: auto;background-size: contain;background-image: url('data:image/svg+xml,');}
@media (min-width: 48.875em) { /* 782px */
.section-title-diamond:after { width: 0.8rem; height: 0.8rem; inset: auto 0 -1.3rem 0; }
}
/* Section Title Diamond - Animation */
@media (prefers-reduced-motion: no-preference) {
.section-title-diamond:after {transform: scale(0);}
.js-intersected .section-title-diamond:after { animation: diamondExpand 1s forwards; }
}
/* Search block */
.wp-block-search__input {border-color: var(--accent-color);color: var(--content-color);background: none;outline: 0;padding: 0 0.5rem;}
.wp-block-search__button {margin-left: -0.1rem;border-top-left-radius: 0 !important;border-bottom-left-radius: 0 !important;}
.wp-block-search__button:is(:hover, :focus-visible) { background: var(--search-button-bg, var(--white)); color: var(--search-white, var(--accent-color)); }
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.logo-menu {box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.30);}
.header-logo svg {transition: transform 0.3s ease;}
.header-logo a { display: inline-block; }
.header-logo a:is(:hover, :focus-visible) svg { transform: scale(1.05); }
.header-quicklinks {
gap: 0 0.8rem;
a {position: relative;background-color: rgba(0,0,0,0.15) !important;}
a:is(:hover, :focus-visible) {background-color: var(--white) !important;color: var(--primary-color) !important;}
a:before {content: '';width: 0.95rem;height: 1.6rem;position: absolute;inset: auto auto auto 0;background-image: url('data:image/svg+xml,');}
a:after {content: '';width: 0.95rem;height: 1.6rem;position: absolute;inset: auto 0 auto auto;background-image: url('data:image/svg+xml,');}
a:is(:hover, :focus-visible) .wp-block-fuel-svg path { fill: var(--primary-color); }
}
@media (max-width: 68.49em) {
.show-sticky .fuel6-walker-menu:not(:has(.depth-0 > .menu-link[aria-expanded="true"])) { bottom: calc((var(--menu-height) + env(safe-area-inset-bottom) + 0.05rem) * -1); }
.logo-menu { display: block !important; }
.header-logo svg { width: 100%; }
}
@media (min-width: 68.5em) {
.header:not(.block-editor-block-list__block) { position: sticky; top: calc(var(--headerHeight, 11.7rem) * -1); z-index: 999; transition: top 0.5s ease; }
body:not(.js-active) .header:not(.block-editor-block-list__block), .header:has(.depth-0 > .menu-link[aria-expanded="true"]), .header.show-sticky:not(.block-editor-block-list__block) {--menuTop: calc(var(--headerHeight, 11.7rem) - var(--menu-height, 3.2rem));top: calc(var(--menuTop, 8.5rem) * -1);}
.header-logo svg {width: 100%;}
.header-phone { display: block !important;justify-content: space-between;width: fit-content;margin-right: 0;margin-left: auto;gap: 0;text-align: right;}
.header-phone .header-number {display: block;width: 100%;max-width: fit-content;margin-left: auto;line-height: normal;background: linear-gradient(0deg, var(--accent-color), var(--accent-color)) no-repeat 0 bottom / 0 1px;transition: background-size 350ms;}
.header-phone .header-number:last-of-type {color: var(--dkgrey);font-size: 0.8rem;font-style: italic;background: linear-gradient(0deg, var(--dkgrey), var(--dkgrey)) no-repeat 0 bottom / 0 1px;}
.header-phone .header-number:is(:hover, :focus-visible) {background-size: 100% 1px;color: var(--accent-color);}
.header-phone .header-number:last-of-type:is(:hover, :focus-visible) { color: var(--dkgrey); }
/* Sticky Menu */
/* .header.is-pinned {
.header-logo { display: none; }
.header-right { flex-basis: 100% !important; }
}*/
}
@media (min-width: 82.5em) {
.header-logo svg {width: 100%;max-width: 17rem;}
}
/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer-background {background-repeat: no-repeat;background-position: right bottom;background-image: url('data:image/svg+xml,');}
#foot_content .wp-block-column .wp-block-heading { position: relative; }
#foot_content .wp-block-column .wp-block-heading:after {content: '';width: 0.45rem;height: 0.45rem;position: absolute;inset: auto 0 -0.25rem 0;background: var(--tan);transform: rotate(45deg);}
.footer a {display: inline-block;width: fit-content;background: linear-gradient(0deg, var(--white), var(--white)) no-repeat 0 bottom / 0 1px;transition: background-size 350ms;line-height: 1.5;}
.footer a.icon-item { background-position-x: 1.6rem; }
.footer a:not(.footer-logo):is(:hover, :focus-visible) {background-size: 100% 1px;color: var(--white);}
.footer-logo:is(:hover, :focus-visible) svg { transform: scale(1.05); }
.footer-logo svg { transition: transform 0.3s ease; }
.footer-socials a {transition: transform 0.3s ease;font-size: 1.2rem;background: transparent;}
.footer-socials a:is(:hover, :focus) { background: none; transform: scale(1.2); }
.footer-socials a p {display: inline;font-size: 0.9rem;}
.footer .icon-item svg path { fill: var(--white); }
#footer-hours .hours-note { display: inline-block; font-style: italic; font-size: 0.8rem; margin-top: 0.8rem; }
@media (min-width: 68.5em) {
.footer-background { padding-top: 2.7rem !important; }
}
/* Policy menu */
.policy-menu li:nth-child(n+1):not(:last-child)::before { content: '|'; position: absolute; right: -0.7rem; }
/*--------------------------------------------------------------
# Location Section
--------------------------------------------------------------*/
#location_section {
.locations-title {position: relative;}
.loc-section-col .wp-block-group { position: relative; }
.loc-section-col .wp-block-group:before {content: '';width: 8px;height: 16px;position: absolute;inset: 0.5rem 0 0 -2.4rem;background-image: url('data:image/svg+xml,');}
.loc-section-address-col {padding-top: 1.7rem;padding-bottom: 1.2rem;padding-left: 2.4rem;border-left: 1px solid var(--accent-color);}
.loc-section-hours-col {padding-top: 1.7rem;padding-bottom: 1.2rem;margin-bottom: 1.2rem;padding-left: 2.4rem;border-left: 1px solid var(--accent-color);}
.address, .phone, .fax, .hours {position: relative;color: var(--content-color);width: fit-content;background: linear-gradient(0deg, var(--content-color), var(--content-color)) no-repeat 0 bottom / 0 2px;line-height: 1.8;}
.address:is(:hover, :focus), .phone:is(:hover, :focus) { background-size: 100% 2px; }
.loc-section-col svg {position: absolute;top: 0.5rem;left: -1.2rem;color: var(--accent-color);}
.hours-row { flex-wrap: wrap; white-space: break-spaces; }
.hours-time { white-space: nowrap; }
.hours-note {display: inline-block;font-size: 0.7rem;font-style: italic;margin-top: 0.4rem;}
.loc-section-map-col {justify-content: center;height: fit-content;}
.loc-sec-img { max-width: 25rem; }
.loc-sec-img img { transition: 300ms ease; }
.loc-section-map-col:has(.cover-link):is(:hover, :focus) .loc-sec-img img {transform: scale(1.05);}
}
@media (min-width: 38.5em) { /* 616px */
#location_section {
.locations-title { margin-bottom: 3.6rem !important; }
.location {
display: grid;grid-template-areas:'top-left top-right''bottom bottom';justify-content: center;gap: 0 2rem;
.loc-section-address-col {grid-area: top-left;padding-bottom: 2rem;margin-bottom: 2rem;}
.loc-section-hours-col {grid-area: top-right;padding-bottom: 2rem;margin-bottom: 2rem;}
.loc-section-map-col {grid-area: bottom;}
}
}
}
@media (min-width: 68.5em) {
#location_section {
.location {
display: flex;justify-content: space-between;gap: 0;
.loc-section-address-col, .loc-section-hours-col {padding-right: 0.5rem;}
> .wp-block-cover { padding-top: 4.5rem !important; padding-bottom: 10.5rem !important; }
.hours-note { font-size: 0.8rem; margin-top: 0.8rem; }
}
}
/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
#contact_section {
.contact-section-title { position: relative; }
.contact-section-container { max-width: 55rem; margin: auto !important; }
.contact-section-container:before {content: '';width: 2rem;height: 2rem;position: absolute;inset: 0.5rem auto auto 0.5rem;z-index: 1;opacity: 0;transform: translate(-0.5rem, -0.5rem);transition: 500ms ease;transition-delay: 1000ms;background-size: contain;background-image: url('data:image/svg+xml,');}
.contact-section-container:after {content: '';width: 2rem;height: 2rem;position: absolute;inset: auto 0.5rem 0.5rem auto;z-index: 1;opacity: 0;transform: translate(0.5rem, 0.5rem);transition: 500ms ease;transition-delay: 1000ms;background-size: contain;background-image: url('data:image/svg+xml,');}
.contact-section-left-col {
display: flex;flex-wrap: wrap;gap: 0.7rem 0;
.wp-block-image { margin: 0; }
.wp-block-image img { background: none; }
.contact-section-top-image {width: 100%;display: flex;justify-content: center;position: relative;}
.contact-section-top-image .wp-block-image {width: clamp(8.5rem,38.5vw,15rem);position: relative;}
.contact-section-top-image .wp-block-image:before {content: '';clip-path: polygon(0 0, 0% 100%, 100% 0);background: var(--accent-color);position: absolute;inset: 0 auto auto 0;width: clamp(0.85rem,4vw,1.5rem);height: clamp(0.85rem,4vw,1.5rem);opacity: 0;transform: translate(-0.5rem, -0.5rem);transition: 500ms ease;transition-delay: 1000ms;}
.contact-section-top-image .wp-block-image:after {content: '';clip-path: polygon(100% 100%, 0 100%, 0 0);background: var(--primary-color);position: absolute;inset: auto -1.75rem 0 auto;width: 1.4rem;height: 1.4rem;opacity: 0;transform: translate(0.5rem, -0.5rem);transition: 500ms ease;transition-delay: 1000ms;}
.contact-section-top-image-container {width: fit-content;margin-right: clamp(4rem, 29.5vw, 11.5rem);position: relative;animation-duration: 1000ms;}
.contact-section-bottom-image {width: 100%;display: flex;justify-content: center;margin: 0;position: relative; }
.contact-section-bottom-image .wp-block-image {position: relative;width: clamp(6.3rem,26.2vw,10.2rem);}
.contact-section-bottom-image .wp-block-image:before {content: '';clip-path: polygon(100% 100%, 100% 0, 0 0);background: var(--accent-color);position: absolute;inset: 0 auto auto -1.75rem;width: 1.4rem;height: 1.4rem;{transform: translate(0,0);opacity: 1;};opacity: 0;transform: translate(-0.5rem, 0.5rem);transition: 500ms ease;transition-delay: 1000ms;}
.contact-section-bottom-image .wp-block-image:after {content: '';clip-path: polygon(100% 100%, 0% 100%, 100% 0);background: var(--primary-color);position: absolute;inset: auto 0 0 auto;width: clamp(0.85rem,4vw,1.5rem);height: clamp(0.85rem,4vw,1.5rem);{transform: translate(0,0);opacity: 1;};opacity: 0;transform: translate(0.5rem, 0.5rem);transition: 500ms ease;transition-delay: 1000ms;}
.contact-section-bottom-image-container {width: fit-content;margin-left: clamp(4rem, 29.5vw, 11.5rem);position: relative;animation-duration: 1000ms;}
}
}
@media (min-width: 48.875em) { /* 782px */
#contact_section {
.contact-section-container:before {width: 3rem;height: 3rem;}
.contact-section-container:after {width: 3rem;height: 3rem;}
.contact-section-title { margin-bottom: 3.6rem !important; }
.contact-section-columns {justify-content: space-between;/* padding-left: 1.5rem; *//* padding-right: 1.5rem; */gap: 0 1rem;}
.contact-section-right-col {order: 2;max-width: 21rem;}
& .contact-section-left-col {
align-content: center;
.contact-section-top-image {justify-content: flex-start;height: fit-content;}
.contact-section-bottom-image {justify-content: flex-end;height: fit-content;}
.contact-section-top-image .wp-block-image {width: clamp(8.5rem, 27.4vw, 15rem);}
.contact-section-bottom-image .wp-block-image {/* width: clamp(8.5rem, 27.4vw, 15rem); */}
}
}
}
@media (min-width: 68.5em) {
#contact_section {
padding-top: 4.2rem !important;padding-right: 0; padding-bottom: 7.7rem !important;padding-left: 0;
&:after { height: 0.8rem; }
.contact-section-container { padding-top: 1.6rem !important;padding-bottom: 0.8rem !important;padding-left: 1.6rem !important; }
.contact-section-columns {max-width: 100%;margin: auto;gap: 0 5.6rem;justify-content: flex-start;padding-left: 0;padding-right: 0;}
.contact-section-left-col {
.contact-section-top-image .wp-block-image:before {width: 1.7rem;height: 1.7rem;}
.contact-section-top-image .wp-block-image:after {inset: auto -3.2rem 0 auto;width: 2.4rem;height: 2.4rem;}
.contact-section-bottom-image .wp-block-image:before {inset: 0 auto auto -3.2rem;width: 2.4rem;height: 2.4rem;}
.contact-section-bottom-image .wp-block-image:after { width: 1.7rem; height: 1.7rem; }
}
}
}
/* Animation */
@media (prefers-reduced-motion:no-preference) {
#contact_section {
.contact-section-left-col {
.contact-section-top-image .js-intersected .wp-block-image:before,
.contact-section-top-image .js-intersected .wp-block-image:after,
.contact-section-bottom-image .js-intersected .wp-block-image:before,
.contact-section-bottom-image .js-intersected .wp-block-image:after {transform: translate(0,0);opacity: 1;}
}
}
.js-intersected#contact_section {
.contact-section-container:before,
.contact-section-container:after {transform: translate(0, 0);opacity: 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 reveal {
0% {opacity: var(--o1, 0);clip-path: inset(var(--reveal, 25%));}
100% {opacity: var(--o2, 1);clip-path: inset(var(--reveal, 0%));}
}
@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;}
60% {transform: scale(1.2)}
100% {transform: scale(1);opacity: 1; }
}
@keyframes diamondExpand {
0% { transform: scale(0); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
/**
* Animation helper classes.
*/
@media (prefers-reduced-motion:no-preference) {
/* 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; }
.fadeleftless { opacity: 0; transform: translateX(-2rem); --x1: -2rem; --y1: 0; }
.faderight { opacity: 0; transform: translateX(5rem); --x1: 5rem; --y1: 0; }
.reveal { opacity: 0; clip-path: inset(25%); }
body:not(.js-active) .js-intersect:is(.fadein, .fadeup, .fadedown, .fadeleft, .fadeleftless, .faderight), /* NO JS */ .js-intersected:is(.fadein, .fadeup, .fadedown, .fadeleft, .fadeleftless, .faderight) { animation: fadein var(--time, 300ms) var(--easing, ease) var(--delay, 0s) forwards; }
body:not(.js-active) .js-intersect.reveal, /* NO JS */ .js-intersected.reveal { animation: reveal var(--time, 300ms) var(--easing, ease) var(--delay, 0s) forwards; }
}
.i2 {--i: 2}
.i3 {--i: 3}
.i4 {--i: 4}
.i5 {--i: 5}
.i6 {--i: 6}
.i7 {--i: 7}
.i8 {--i: 8}
.i9 {--i: 9}
.i10 {--i: 10}
.delay500 {--delay: 500ms}
.delay1000 {--delay: 1s}
.delay1500 {--delay: 1.5s}
.delay2000 {--delay: 2s}
/* 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 {
* { background: transparent !important; color: initial !important; --wp--preset--color--white: initial !important; }
.main-header { all: unset; }
.main-title { margin: 1rem auto !important; padding-bottom: 1rem; border-bottom: 2px solid #000; }
nav, #sidebar, .header, .footer, .pagination, .wp-prev-next, .main-header img, .wp-block-cover__image-background, .wp-block-cover__background, main + * { 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);}
}
}
/*
* iPhone bug fix for buttons
* https://www.notion.so/fueldigital/iPhone-button-contrast-fix-47918141a741472fbc1fba3aa5919ca4
*/
@supports (-webkit-touch-callout: none;) {
.entry-content a.wp-block-button__link {transition: none;}
}