/*
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.8.1
Requires PHP: 8.0
Version: 6.4.1
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
# Contact Section
# 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);
--yellow: var(--wp--preset--color--yellow);
--green: var(--wp--preset--color--green);
--blue: var(--wp--preset--color--blue);
/* Top Level Primary Menu Colors - now managed on the block level */
--wp--preset--color--menu-background: inherit;
--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);
/* Gradients */
--brand-gradient: var(--wp--preset--gradient--brand-gradient);
--grey-gradient: var(--wp--preset--gradient--grey-gradient);
--lt-grey-gradient: var(--wp--preset--gradient--lt-grey-gradient);
--button-gradient: var(--wp--preset--gradient--button-gradient);
--button-hover-gradient: var(--wp--preset--gradient--button-hover-gradient);
--gradient-one: var(--wp--preset--gradient--gradient-one);
--gradient-two: var(--wp--preset--gradient--gradient-two);
--gradient-three: var(--wp--preset--gradient--gradient-three);
--mobile-menu-gradient: var(--wp--preset--gradient--mobile-menu-gradient);
}
/*--------------------------------------------------------------
# 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: 15rem;}
iframe, img, svg, audio, video, embed { vertical-align: middle; max-width: 100%; }
img {object-fit: cover;}
img:not([src*=".png"], [src*=".gif"], [src*=".webp"], [src*=".svg"]) {background: var(--grey);}
picture[style*="width"] { display: flex; }
a, button {text-decoration: none;color: var(--blue);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; }
.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); }
}
.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%; z-index: 1; background: none !important; }
: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 { top: 4rem; }
}
/* Button hover/focus styles */
:root :where(.wp-element-button, .wp-block-button__link) {position: relative;transition: 500ms ease;}
:root :where(.wp-element-button, .wp-block-button__link):not(.wp-block-file__button):is(:hover, :focus-visible) {background: var(--button-hover-gradient);padding-right: 1.9rem;padding-left: 1.3rem;}
:root :where(.wp-element-button, .wp-block-button__link):not(.wp-block-file__button):after {content: '';width: 0.4rem;height: 0.8rem;position: absolute;top: 0;right: 1rem;bottom: 0;margin: auto;transition: 500ms ease;transform: translateX(-0.3rem);opacity: 0;background-size: contain;background-repeat: no-repeat;background-position: center;background-image: url('data:image/svg+xml,');}
:root :where(.wp-element-button, .wp-block-button__link):not(.wp-block-file__button):is(:hover, :focus-visible):after {transform: translateX(0);opacity: 1;}
.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); }
@media (max-width: 68.49em) {
.entry-content .wp-block-buttons { justify-content: var(--center-on-mobile); /* Center buttons on mobile but not in menu */ }
}
.wp-block-search__inside-wrapper { padding: 0; }
.wp-block-search__input {padding-left: 1rem;border-color: #BFD294;color: var(--content-color);background: none;outline: 0;}
.wp-block-search__button {margin-left: -0.1rem;border-top-left-radius: 0 !important;border-bottom-left-radius: 0 !important;background: var(--primary-color);color: var(--white);border-color: var(--search-white, var(--accent-color));}
.wp-block-search__button:after { display: none; }
.wp-block-search__button:is(:hover, :focus-visible) {background: var(--accent-color);color: var(--white);padding-right: 1.6rem;padding-left: 1.6rem;}
/* Search Block */
@media (max-width: 68.49em) {
.wp-block-search { --search-white: var(--white); --search-button-bg: var(--primary-color); }
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header {background-color: var(--wp--preset--color--lt-grey) !important;}
.header-logo a:is(:hover, :focus-visible) svg, .footer-logo:is(:hover, :focus-visible) svg { transform: scale(1.05); }
.header-quicklinks a:is(:hover, :focus-visible) { background-color: var(--white); }
@media (max-width: 68.49em) {
.header { position: relative; z-index: 998; }
.header-logo .wp-block-fuel-wrapper-block { width: fit-content; margin: auto; }
.header-logo svg {width: 10.7rem;transition: transform 0.3s ease;}
.show-sticky .wp-block-group:has( > .fuel6-walker-menu):not(:has(.depth-0 > .menu-link[aria-expanded="true"])) {bottom: calc((var(--menu-height) + env(safe-area-inset-bottom) + 0.3rem) * -1);}
}
@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.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: 12.1rem;transition: transform 0.3s ease;}
.header.is-pinned.show-sticky { box-shadow: 0rem 0rem 0.5rem grey; }
/* Req Appt Button */
.hdr-req-appt-button {position: relative;transition: 300ms ease;}
.hdr-req-appt-button:before {content: "";background: var(--brand-gradient);position: absolute;inset: 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;}
/* Ph # Rainbow Cellphone */
.header-number svg { margin-right: 0.4rem; }
.header-number svg rect { transition: 300ms ease; }
.header-number:is(:hover,:focus) svg rect { opacity: 1; }
}
@media (min-width: 82.5em) {
.hdr-columns { padding-right: 5.5rem !important; padding-left: 5.5rem !important; }
}
/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
.wp-block-template-part { margin: 0; }
#main { margin: 0; font-size: var(--wp--preset--font-size--content); }
.entry-content .wp-block-list li { margin: 1em 0 0 0; }
.entry-content .wp-block-list li::marker {/* color: var(--wp--preset--color--primary); */}
/* 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-cta .location-card .wp-block-group svg { color: var(--blue); }
.location-cta .location-card .wp-block-group a {color: var(--primary-color);}
.location-cta .location-card .wp-block-group a:is(:hover, :focus-visible) { text-decoration: underline; }
.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 h3 { margin-left: -1rem !important; width: calc(100% + 2rem); }
}
}
/* 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) {
.bio-list .bio-box { padding: 0.3rem 1rem; margin-left: -1rem; width: calc(100% + 2rem); }
.bio-list .bio-box:nth-child(odd) { background: rgba(0, 0, 0, 0.1); }
.sub-menu .bio-box::after, .bio-box::after { content: ''; --link-svg: url('data:image/svg+xml,'); 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; }
.sub-menu .bio-list .bio-box:not(:hover, :focus-visible):nth-child(even) { background: rgba(255, 255, 255, 0.1); }
.sub-menu .bio-list .bio-box.bio-box { padding: 0.2rem 1rem; }
}
@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 { }
.footer-background {background: var(--grey-gradient) !important;position: relative;}
.footer a {width: fit-content;background: linear-gradient(0deg, var(--yellow), var(--yellow)) no-repeat 0 bottom / 0 2px;transition: background-size 350ms;}
.footer a.icon-item { background-position-x: 1.6rem; }
.footer a:not(.footer-logo):is(:hover, :focus-visible) {background-size: 100% 2px;color: var(--white);}
#footer_logo {text-align: center;}
.footer-logo svg { transition: transform 0.3s ease; }
.ftr-loc-links { margin-bottom: 1rem; }
.footer-socials { gap: 1rem; }
.footer-socials a {/* transition: transform 0.3s ease; */gap: 0.4rem;/* font-size: 1.2rem; */}
.footer-socials a:is(:hover, :focus) {/* background: none; *//* transform: scale(1.2); */}
.ftr-col-title { position: relative; }
.ftr-col-title:after {content: '';width: 5rem;height: 1rem;position: absolute;bottom: -0.2rem;left: -1.2rem;margin: auto;background-image: url('data:image/svg+xml,');}
#menu-footer { gap: 1rem; }
.footer-squiggle-brain-container {margin-top: 0;margin-right: var(--wp--preset--spacing--40);margin-left: var(--wp--preset--spacing--40);overflow: hidden;display: flex;justify-content: flex-end;z-index: 1;position: relative;}
.footer-squiggle-brain-container .footer-squiggle-brain {width: 100%;min-width: 200%;max-width: none;}
@media (min-width: 42em) { /* 672px */
.footer-squiggle-brain-container .footer-squiggle-brain { min-width: 100%; }
}
@media (min-width: 48.875em) { /* 782px */
#foot_content {
justify-content: center;gap: 0 2rem;
.wp-block-column { max-width: fit-content;}
}
}
@media (min-width: 68.5em) {
#foot_content {justify-content: space-between;margin-bottom: 3.8rem !important;}
}
/* 850px - Mobile breakpoint for copyright section */
@media only screen and (max-width: 53.125em) {
.footer-copyright { padding-bottom: 4rem !important; }
.copyright-wrapper { flex-direction: column; text-align: center; }
.policy-menu { justify-content: center; }
}
.footer-copyright { padding-bottom: 3rem !important; }
@media (min-width: 68.5em) {
.footer-copyright {padding-bottom: 1.2rem !important;}
}
/* Policy menu */
.policy-menu li:nth-child(n+1):not(:last-child)::before {content: '|';position: absolute;right: -0.6rem;z-index: 2;}
/* Animations */
.footer-bg-swoops {z-index: 0;width: 54.2vw;min-width: 16.1rem;max-width: 52rem;height: 32.2vw;min-height: 11.9rem;max-height: 31.9rem;margin: 0;}
.footer-bg-swoops path {animation-name: line-reveal;animation-duration: 4s;animation-fill-mode: both;animation-play-state: paused;}
.js-intersected {
.footer-bg-swoops path {animation-play-state: running;}
}
/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
#contact_section {
overflow: hidden;
.contact-section-title {margin-bottom: clamp(2rem,4.4vw,2.4rem);position: relative;}
.contact-section-title:before {content: '';width: 2.8rem;height: 2px;background: var(--primary-color);position: absolute;right: 0;bottom: -0.9rem;left: 0;}
.cf-section-image {padding-bottom: 1.2rem;}
.cf-section-image .squiggle-brain-cf {height: fit-content;position: relative;left: calc(50% - 34.5rem);max-width: none;width: 40rem;}
}
/* Animation */
#contact_section .squiggle-brain-cf path {stroke-dasharray: 4239 4239;will-change: stroke-dashoffset;}
#contact_section.js-intersected .squiggle-brain-cf path { animation: hero-brain-dash 2.5s linear reverse; }
@media (min-width: 53.75em) { /* 860px */
#contact_section {
display: flex;gap: 0 3rem;
.contact-image-col {width: 50%;margin: 0 !important;position: relative;max-height: 25rem;}
.cf-section-image { height: fit-content;margin: 0; }
.cf-section-image .squiggle-brain-cf {position: relative;right: calc(50vw - 25.4rem);left: 0;height: fit-content;min-height: 11.5rem;width: auto;min-width: 40rem;max-width: none;position: absolute;inset: 0 0 auto auto;margin-top: 1.6rem !important;}
.contact-form-col {width: 50%;margin: 0 !important;padding-right: 0 !important;padding-left: 0 !important;}
.contact-form-col-container {max-width: 23rem;margin-right: 0 !important;margin-left: 0 !important;}
}
}
@media (min-width: 68.5em) {
#contact_section {
padding-bottom: 6.5rem !important;
.contact-form-col { max-width: 46rem !important; }
}
}
@media (min-width: 82.5em) {
#contact_section { gap: 0 6rem; }
}
/*--------------------------------------------------------------
# Locations
--------------------------------------------------------------*/
#location_section {
margin-top: 0;
.locations-title {margin-bottom: 2.4rem;margin-left: 0.7rem !important;position: relative;}
.locations-title:after {content: '';width: 2.8rem;height: 2px;background: var(--primary-color);position: absolute;right: 0;bottom: -0.9rem;left: 0;}
.wp-block-fuel-interactive-map {background: transparent;max-height: 22rem;margin-top: 0;}
.wp-block-fuel-interactive-map:before {content: "";background: var(--brand-gradient);position: absolute;inset: -0.1rem;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;}
.map-nav-item {height: calc(100% / 3);border-bottom: 1px solid var(--black);border-left: 4px solid grey;}
.map-filter-panel {background: var(--grey-gradient);border: none;}
.map-filter-panel summary {background-color: rgba(0,0,0,0.15) !important;color: var(--white);}
.map-filter-panel summary:after {width: 1.3rem;height: 1.3rem;clip-path: none;inset: auto 0.8rem auto auto;background-color: unset;background-size: contain;background-image: url('data:image/svg+xml,');}
.map-filter-panel summary::-webkit-details-marker, .map-filter-panel summary::marker { display: none !important; }
.map-filter-panel summary:is(:hover,:focus-visible) {background-color: #9F9F9F !important;/* color: red; */}
.map-nav-item-btn {background: var(--grey-gradient);height: 100%;color: var(--white);transition: 300ms ease;}
.map-nav-item-btn:after {content: '';position: absolute;inset: auto 1.2rem auto auto;width: 0.5rem;height: 0.8rem;background-size: contain;background-repeat: no-repeat;background-image: url('data:image/svg+xml,');}
.map-nav-item-btn:is(:hover,:focus,.map-active) {background: linear-gradient(45deg, var(--primary-color), var(--primary-color));color: var(--white);}
.map-mobile-view-bar {background: var(--grey-gradient);color: var(--white);}
.map-mobile-view-bar:after {content:'';width: 0.9rem;height: 0.75rem;display: inline-block;margin-left: 0.4rem;vertical-align: -0.1rem;background-image: url('data:image/svg+xml,');}
.map-mobile-view-bar:is(:hover, :focus) {background: var(--accent-color);}
.filter-contents {justify-content: center;background-color: rgba(0, 0, 0, 0.15) !important;padding: 0.5rem 1rem;}
.filter-controls { color: var(--white); font-size: 0.75rem; }
.filter-controls .get-my-location.button {margin: auto;padding: 0.2rem 1rem;color: var(--primary-color);background: var(--button-gradient);}
.filter-controls .get-my-location.button:is(:hover, :focus-visible) { background: var(--white); }
/* Info Panel */
.infoPanel-padding .button {background: var(--button-gradient);background-color: #32373c;border-radius: 0;border-width: 0;color: var(--primary-color);font-family: inherit;font-size: inherit;font-style: inherit;font-weight: 400;letter-spacing: inherit;line-height: normal;padding-top: 0.8rem;padding-right: 1.6rem;padding-bottom: 0.8rem;padding-left: 1.6rem;text-decoration: none;text-transform: inherit;position: relative;transition: 500ms ease;}
.infoPanel-padding .button:after { content: ''; width: 0.4rem; height: 0.8rem; position: absolute; top: 0; right: 1rem; bottom: 0; margin: auto; transition: 500ms ease; transform: translateX(-0.3rem); opacity: 0; background-size: contain; background-repeat: no-repeat; background-position: center; background-image: url('data:image/svg+xml,'); }
.infoPanel-padding:is(:hover, :focus-visible) .button { background: var(--button-hover-gradient); padding-right: 1.9rem; padding-left: 1.3rem; }
.infoPanel-padding:is(:hover, :focus-visible) .button:after { transform: translateX(0); opacity: 1; }
.map-info-panel {background: var(--grey-gradient);}
.map-back { background: rgba(0,0,0,0.15); }
.map-back:is(:hover, :focus-visible) {
background: var(--button-gradient);color: var(--primary-color);
svg { color: var(--primary-color); }
}
.map-loc-header {
background: none;
h3 {color: var(--white) !important;font-size: 1rem;font-weight: 500;}
}
.map-loc-info .icon-item { color: var(--primary-color) !important; }
.map-info {
:not(.button,svg) { color: var(--white) !important; }
:not(.button,svg) path { fill: #676B6E; }
:not(.button,svg) path:last-of-type { fill: #F2DC67; }
.hours-rows { display: flex; flex-wrap: wrap; }
.hours-row { width: 100%; }
}
.hours-note { font-style: italic; font-size: 0.8rem; }
.map-loc-footer { padding-bottom: 1rem; }
}
@media (min-width: 50em) { /* 800px */
#location_section {
.wp-block-fuel-interactive-map:before { inset: -0.4rem; }
}
}
@media (min-width: 68.5em) {
#location_section {
padding-top: 5.5rem !important; padding-bottom: 9.5rem !important;
.locations-title {max-width: 60rem;margin-right: auto !important;margin-bottom: 3.2rem;margin-left: auto !important;}
}
}
/*--------------------------------------------------------------
# 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);}
}
@keyframes line-reveal {
0% { clip-path: polygon(0 0,0 0, 100% 0, 100% 0%) }
100% { clip-path: polygon(0 0,0 100%,100% 100%,100% 0) }
}
@keyframes fadeoutward {
0% { opacity: 0; transform: scale(0.75); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes hero-brain-dash {
100% { stroke-dashoffset: 4239; }
}
/* 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;}
}
/**
* Animation helper classes.
*/
@media (prefers-reduced-motion:no-preference) {
/* Add to wrappers to animate children */
.popin>* { transform: scale(0.5); opacity: 0; }
body:not(.js-active) .js-intersect.popin>*,
/* NO JS */ .popin.js-intersected>* { --delay: calc(var(--i, 0) * 200ms); animation: popAnimation 400ms ease var(--delay) forwards }
.fadein-items>* { opacity: 0; transform: translateY(0); }
body:not(.js-active) .js-intersect.fadein-items>*,
/* NO JS */ .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; }
body:not(.js-active) .js-intersect:is(.fadein, .fadeup, .fadedown, .fadeleft, .faderight),
/* NO JS */ .js-intersected:is(.fadein, .fadeup, .fadedown, .fadeleft, .faderight) { animation: fadein var(--time, 300ms) 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 {
* { 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;}
}