/* 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.2.0 Text Domain: fuel6 */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Custom Properties # Fuel Normalize # Custom Elements # WordPress Blocks # Forms ## Search Form # Header # Content # Footer # Location Section # 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 - for use outside on 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); --darkblue: var(--wp--preset--color--darkblue); --cta-1: var(--wp--preset--color--cta-1); --cta-2: var(--wp--preset--color--cta-2); --cta-3: var(--wp--preset--color--cta-3); --transparent-blue: var(--wp--preset--color--transparent-blue); --transparent-purple: var(--wp--preset--color--transparent-purple); --transparent-green: var(--wp--preset--color--transparent-green); --secondary-hero-gradient: var(--wp--preset--color--secondary-hero-gradient); /* 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(--darkblue); /* 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.5; -webkit-text-size-adjust:100%; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scrollbar-gutter: stable; 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(--primary-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 {--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 !important;} .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 --------------------------------------------------------------*/ .alignleft, .alignright { width: 100% } #main .alignleft { float: left; margin: 0 1em 0.2em 0; } #main .alignright { float: right; margin: 0 0 0.2em 1em; } .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%; } } /*-------------------------------------------------------------- # Forms - Moved to css/gravity-forms.css --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Header --------------------------------------------------------------*/ .header {position: relative;z-index: 9999;background: #C9D3DC;} .header .wp-block-columns.contain {--contain-padding: clamp(2rem, 8.3vw, 6.6rem);} .header-logo {padding-top: clamp(1.4rem, 4.1vw, 2.7rem);padding-bottom: clamp(1.6rem, 3.4vw, 2.2rem);} .header-logo svg, .footer-logo svg {transition: transform 0.3s ease;height: auto;} .header-logo a:is(:hover, :focus-visible) svg, .footer-logo:is(:hover, :focus-visible) svg { transform: scale(1.05); } @media (max-width: 68.49em) { .header { z-index: 998; } .header-logo {text-align: center;margin: auto !important;} .header-right { display: none; } } .header-right { text-align: right; } .header-quicklinks { flex-wrap: nowrap; } .header-quicklinks .wp-block-fuel-menu-wrapper { gap: 0 0.8rem; } .header-quicklinks .menu-item { margin-top: 0.45rem; } .header-quicklinks .menu-label {background: var(--primary-color);color: var(--white);padding: 0.3rem 0.9rem;font-size: clamp(0.9rem, 2vw - 0.5rem, 1rem);font-family: var(--title-font);border-bottom-left-radius: 3px;border-bottom-right-radius: 3px;line-height: 1.364;} .header-quicklinks .menu-label:is(:hover, :focus-visible) {background: var(--accent-color);color: var(--primary-color);} .header-quicklinks .menu-item:first-of-type .menu-label {background: none;color: var(--content-color);} .header-quicklinks .menu-item:first-of-type .menu-label:is(:hover, :focus-visible) {background: var(--accent-color);color: var(--primary-color);} .header-quicklinks svg { width: 1rem; height: 1rem; margin-right: 0.3rem; transform: translateY(-0.1rem); } /* 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: 0.9rem !important;display: inline-block;color: var(--content-color);font-weight: bold;} .header-number svg { width: 2rem; height: 2rem; margin-right: 0.4rem; } @media (min-width: 82.5em) { .header-number { margin-top: 1.6rem !important; } } /* Phone Tree - delete CSS and block if not using phone tree */ .header-right .dialog-trigger { display: none; /* change to block to unhide */ transform: translateY(1.5rem); } .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 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: radial-gradient(var(--primary-color) 1px,transparent 0) left bottom/8px 8px repeat-x; } .phone-tree a svg { margin-right: .3rem; margin: 0.4rem 0.3rem 0 0.45rem; } /*-------------------------------------------------------------- # Content --------------------------------------------------------------*/ .wp-site-blocks { margin: auto; } #main { margin: 0 0 2em; font-size: var(--wp--preset--font-size--content); } /* 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; 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; } .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 .location-box {padding: 1.3rem clamp(1.2rem, 2.2vw, 2rem) 2.3rem;} #main .location-box .loc-title { border-bottom: 1px solid var(--wp--preset--color--h-3); padding-bottom: 0.9rem; margin-top: 0; } #main .location-list-detailed a {color: var(--content-color);background: linear-gradient(0deg, var(--content-color), var(--content-color)) no-repeat 0 bottom / 0 2px;transition: background-size 350ms;background-position-x: 1.6rem;width: fit-content;text-decoration: none;} #main .location-list-detailed a:is(:hover, :focus-visible) {background-size: 100% 2px;font-weight: bold;} .location-box p, .location-box .icon-item { margin-top: 0; font-style: normal; } .sub-menu .location-box a.icon-item {margin-left: -0.5rem;padding-left: 2.3rem !important;} .sub-menu .location-box a.icon-item svg { left: 0.5rem } .location-box svg {width: 1rem;height: 1rem;transform: translateY(0.2rem);} #main .location-box svg {color: var(--primary-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) } } /* Location Card Animations */ @media (prefers-reduced-motion:no-preference) { #main .location-list-detailed > .location-box { opacity: 0; transform: translateY(0); } #main .location-list-detailed.js-intersected > .location-box { --delay:calc(var(--i, 0) * 200ms); animation: fadein var(--time, 400ms) ease var(--delay) forwards } .location-box:nth-child(1) { --i: 0; } .location-box:nth-child(2) { --i: 1; } } /*-------------------------------------------------------------- # Footer --------------------------------------------------------------*/ .footer {color: var(--white);background: var(--primary-color); margin: 0;} #foot_content { padding-top: clamp(1.2rem, 5.9vw, 3.2rem); } .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: 0.9rem;gap: 1rem 6%;} #foot_content .wp-block-column {flex: 0 1 auto;flex-basis: fit-content !important;margin-bottom: 1rem;} .footer .footer-logo:is(:hover, :focus-visible) { background-size: 0; } .footer-logo path { fill: var(--white); } .social-menu {justify-content: space-between;} .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: 1rem;margin: 0 0 1.8rem;position: relative;} .footer .wp-block-heading:after {content: '';background: var(--white);height: 1px;width: 2.5rem;position: absolute;right: auto;bottom: -0.8rem;left: 0;margin: auto;} .footer #footer-locations {flex: 1 0 auto;} #footer-locations .hours-note { font-style: italic; font-size: clamp(0.7rem, 1.3vw, 0.9rem); } #footer-quick-links .wp-block-navigation { margin: 0; } @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 only screen and (min-width: 37.5em) { /* 600px */ .footer #footer-locations {} #footer-locations .location-box .loc-left, #footer-locations .location-box > .hours {flex: 0 0 auto;/* background: lime; */margin: 0 0 1rem;} } @media only screen and (min-width: 68.5em) { #foot_content {background-image: url('data:image/svg+xml, ');background-repeat: no-repeat;background-position: right center;background-size: contain;} .footer-socials {margin: 1.8rem 0 2rem;} #footer-locations .hours-note {display: inline-block;margin-top: 1rem;white-space: nowrap;position: absolute;right: 0;} } @media only screen and (min-width: 100em) { #foot_content { gap: 0 3.8rem; padding-right: calc(50% - 32.45rem); } .footer #footer-locations {padding-right: 2.6rem;} #footer-locations .hours-note { right: auto; } } .copyright-wrapper { padding-top: 1.2rem; padding-bottom: 5rem; background: rgba(0,0,0,0.1); text-align: center; } .policy-menu li { margin: 0; } .policy-menu li:nth-child(n+1):not(:last-child)::before { content: '|'; position: absolute; right: -0.6rem; } .policy-menu a { font-size: var(--wp--preset--font-size--copyright); } @media only screen and (min-width: 68.5em) { .copyright-wrapper { text-align: left; padding-bottom: 1.2rem; } .policy-menu { justify-content: end; } } /*-------------------------------------------------------------- # Location Section --------------------------------------------------------------*/ #location_section {padding-top: 7.7rem;padding-bottom: 5rem;} .location-section-columns {max-width: none;} .location-section-map-column {position: relative;height: fit-content;} .location-section-map-column:after {content: '';background-image: url(./images/map-tricolor-bar.webp);background-size: contain;background-repeat: no-repeat;background-position: top right;height: 0.9rem;width: 100%;position: absolute;right: 0;bottom: -0.9rem;} .location-section-columns .location-section-map-column .wp-block-image { margin: 0; } .location-section-text-column { padding-top: 2.65rem; } .location-section-title {text-align: center;position: relative;margin: 0 0 2.6rem;} .location-section-title:after { content: ''; background: var(--black); height: 1px; width: 2.5rem; position: absolute; right: 0; bottom: -1.25rem; left: 0; margin: auto; } .location-section-text-column .hours-note {display: inline-block;margin-top: 0.8rem;font-style: italic;font-size: clamp(0.8rem,3.6vw,0.9rem);} @media (min-width: 37.5em) {/* 600px */ .location-section-text-column .location-list-detailed .location-box { justify-content: center; } } @media (min-width: 48.875em) { /* 782px */ .location-section-columns { flex-wrap: wrap !important; } .location-section-columns .location-section-map-column.wp-block-column, .location-section-columns .location-section-text-column.wp-block-column { flex-basis: auto; } } @media (min-width: 68.5em) { #location_section {margin-top: 0;padding-top: 9.6rem;padding-bottom: 9.6rem;} .location-section-columns {gap: 0 clamp(2rem,5.4vw,4.25rem);padding-right: var(--contain-padding);} .location-section-columns .location-section-map-column.wp-block-column { flex-basis: 0; } .location-section-columns .location-section-map-column.wp-block-column .wp-block-image img { width: 100%; } .location-section-columns .location-section-text-column.wp-block-column {flex-basis: 0;width: fit-content;max-width: 17.5rem;} .location-section-map-column:after {right: 0;} .location-section-title { text-align: left; } .location-section-title:after { right: auto; } .location-section-text-column .location-list-detailed .location-box {flex-wrap: wrap;justify-content: start;padding: 0 !important;} .location-section-text-column .location-box .loc-left, .location-section-text-column .location-box .hours {width: 100%;max-width: none;flex: auto;margin-bottom: 0;} } /*-------------------------------------------------------------- # 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) { .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-1000 { --delay: 1000ms; } .delay-1500 { --delay: 1500ms; } .easing-300 { --easing: 300ms; } .easing-500 { --easing: 500ms; } .easing-750 { --easing: 750ms; } /* 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) ease var(--delay, 0s) 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); } } }