/* Theme Name: Fuel6 Theme URI: https://fuelmedical.com Author: Fuel Medical Description: A Fuel Medical block theme (2023) Requires at least: 6.4 Tested up to: 6.4 Requires PHP: 8.0 Version: 6.1.1 Text Domain: fuel6 */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Custom Properties # Fuel Normalize # Custom Elements # WordPress Blocks # Forms ## Search Form # Header # Content # Footer # Contact Section # Map # Animations ## Page Transition # print # Safari 15.3 fallbacks --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Custom Properties --------------------------------------------------------------*/ body { /** * Note: WordPress declares its variables in the body, so do the same to avoid scope issues. */ /* Structure - 1100px */ --mobile-padding: 1rem; --desktop-padding: 19rem; --contain-padding: clamp(var(--mobile-padding), calc(50vw - 29.93rem), var(--desktop-padding)); /* Design - Change in theme.json */ --primary-color: var(--wp--preset--color--primary); --accent-color: var(--wp--preset--color--accent); --white: var(--wp--preset--color--white); --grey: var(--wp--preset--color--grey); --black: var(--wp--preset--color--black); /* Top Level Primary Menu Colors */ --wp--preset--color--menu-background: var(--primary-color); --wp--preset--color--menu-color: var(--white); --wp--preset--color--menu-hover-color: var(--white); --wp--preset--color--menu-hover-bg: var(--wp--preset--color--color-2); /* Sub Menu Colors */ --wp--preset--color--sub-menu-background: var(--white); --wp--preset--color--sub-menu-color: var(--primary-color); --wp--preset--color--sub-menu-hover-color: var(--primary-color); --wp--preset--color--sub-menu-hover-bg: var(--wp--preset--color--color-3); /* Text */ --title-font: var(--wp--preset--font-family--title); --title-color: var(--primary-color); --content-font: var(--wp--preset--font-family--content), sans-serif; --content-color: var(--wp--preset--color--content); --wp--preset--color--h-1: var(--white); --wp--preset--color--h-2: var(--wp--preset--color--color-1); --wp--preset--color--h-3: var(--primary-color); --wp--preset--color--footer: var(--white); } /*-------------------------------------------------------------- # Fuel Normalize --------------------------------------------------------------*/ *, *::before, *::after {box-sizing: border-box;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} html {font-size: 125%;line-height: 2;-webkit-text-size-adjust:100%;-webkit-overflow-scrolling: touch;scroll-behavior: smooth;position: relative;min-width: 18rem;} ul, ol {padding-left: 1.4rem;} li {margin: 1rem 0 0 0;} iframe, img, svg, audio, canvas, video, object, embed {vertical-align: middle;max-width: 100%;} img {object-fit: cover;} img[src*=".jpg"] { background: var(--grey); } blockquote, figcaption { font-style: italic; } small { font-size: 0.75em; } sub, sup { font-size: 0.75em; line-height: 0; } a {text-decoration: none;color: var(--accent-color);transition: color 300ms, background-color 300ms;} a[href^="tel:"] { white-space: nowrap; } a:hover { color: var(--primary-color); } @media only screen and (min-width: 68.5em) { *[id] { scroll-margin-top: 3rem; } } /*-------------------------------------------------------------- # Custom Elements --------------------------------------------------------------*/ .contain { display: block; position: relative; margin: auto; padding-right: var(--contain-padding); padding-left: var(--contain-padding); width: 100%; } .icon-item {display: inline-block;position: relative;/* margin: 1em 0; */padding: 0 0 0;} .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%; } } /* Button Block */ .button, .wp-block-file__button, .entry-content .wp-block-post-excerpt__more-link, .wp-block-buttons .wp-element-button, .wp-block-buttons .wp-block-button__link.wp-block-button__link {background-color: var(--wp--preset--color--primary);color: var(--white);border: 1px solid var(--wp--preset--color--primary);border-radius: 999px;font-weight: 400;line-height: normal;padding: 0.85rem 3rem;max-width: 16rem;font-family: 'Jura', sans-serif;text-decoration: none;position: relative;overflow: hidden;z-index: 1;} .button:is(:hover, :focus-visible), .wp-block-file__button:is(:hover, :focus-visible), .entry-content .wp-block-post-excerpt__more-link:is(:hover, :focus-visible), .wp-block-buttons .wp-element-button:is(:hover, :focus-visible), .wp-block-buttons .wp-block-button__link.wp-block-button__link:is(:hover, :focus-visible) {border-color: var(--wp--preset--color--accent);color: var(--white);} .button:after, .wp-block-file__button:after, .entry-content .wp-block-post-excerpt__more-link:after, .wp-block-buttons .wp-element-button:after, .wp-block-buttons .wp-block-button__link.wp-block-button__link:after {content: '';height: 4.5rem;position: absolute;right: 0;bottom: -0.5rem;left: 0;background-image: url('data:image/svg+xml,');background-position: top;background-repeat: repeat-x;transform: scale(1, 0);transform-origin: bottom;transition: 1s ease;z-index: -1;} .button:is(:hover, :focus-visible):after, .wp-block-file__button:is(:hover, :focus-visible):after, .entry-content .wp-block-post-excerpt__more-link:is(:hover, :focus-visible):after, .wp-block-buttons .wp-element-button:is(:hover, :focus-visible):after, .wp-block-buttons .wp-block-button__link.wp-block-button__link:is(:hover, :focus-visible):after {transform: scale(1, 2.5);} /* Button block - outline */ .is-style-outline.wp-block-button .wp-block-button__link {background: var(--white);color: var(--wp--preset--color--primary);border-color: var(--wp--preset--color--primary);transition: color 500ms ease;} .wp-block-button.is-style-outline .wp-element-button:is(:hover, :focus-visible) {color: var(--white);} /* * iPhone bug fix * https://www.notion.so/fueldigital/iPhone-button-contrast-fix-47918141a741472fbc1fba3aa5919ca4 */ @supports (-webkit-touch-callout: none) { .entry-content a.wp-block-button__link{ transition: none; } } /* Search block */ .wp-block-search { padding: 0; min-width: 16rem; max-width: calc(100vw - 2rem); } .wp-block-search__inside-wrapper {padding: 0;border-radius: 0.2rem;border: none;outline: 1px solid;} .wp-block-search__input { font-size: 1rem; padding-left: 1rem; background: none; } .wp-block-search__button { padding: 0.45rem 0.75rem; background: var(--accent-color); border-left: 1px solid; transition: background-color 0.3s, color 0.3s; } .wp-block-search__button:is(:hover, :focus-visible) { background: var(--white); color: var(--accent-color); } @media (max-width: 68.49em) { .wp-block-search__button { background: var(--white);} .wp-block-search__button:is(:hover, :focus-visible) { background: transparent; color: var(--white); } } @media (min-width: 48.5em) { .button, .wp-block-file__button, .wp-block-post-excerpt__more-link, .wp-block-buttons .wp-element-button, .wp-block-buttons .wp-block-button__link.wp-block-button__link { max-width: none; } } /* Quote block */ body .wp-block-quote {border: 1px solid var(--content-color);padding: 2rem clamp(1rem, 4vw, 5.5rem) clamp(1rem, 4vw, 2.6rem);font-size: clamp(0.9rem, 1.9vw, 1rem);line-height: 2.2;position: relative;margin: 2rem 1rem 0 !important;font-style: normal;} .wp-block-quote::before {content: '';background: #ffffff url('data:image/svg+xml,') center no-repeat;position: absolute;inset: -1.5rem auto auto calc(50% - 1.5rem);width: 3rem;height: 3rem;border: 1px solid var(--content-color);border-radius: 50%;transform: rotate(180deg);} .wp-block-quote cite { display: block; font-size: clamp(0.9rem, 4vw, 1rem); font-weight: bold; text-align: right; line-height: 1.5; } @media (min-width: 68.5em) { body .wp-block-quote {margin: 3rem 0 2rem !important;} } /*-------------------------------------------------------------- # Forms --------------------------------------------------------------*/ .gfield {overflow: hidden !important;background: rgba(255,255,255,0.85);line-height: normal;box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.25);} .gfield:focus-within { outline: 2px auto -webkit-focus-ring-color; } .gfield .gfield_label.gform-field-label {color: var(--content-color);font-family: 'Jura', sans-serif;font-weight: normal;font-size: 0.9rem;margin-bottom: 0;padding-left: 0.6rem;} .gfield .medium, .gfield .large {padding: 0 0.6rem 0.7rem !important;color: var(--content-color);background: none;outline: none;border: 0 !important;} .gform_footer { position: relative; margin-top: 0.7rem; } .gform_footer { justify-content: center; } .gform_button { transition: color 0.3s, background-color 0.3s; margin: 0.9rem auto 0; } .gform_ajax_spinner { position: absolute; top: 0; right: 0.5rem; bottom: 0; margin: auto; border: 0.2em solid rgba(0, 0, 0, 0.4); border-left: 0.2em solid #07B084; border-radius: 50%; width: 1.2em; height: 1.2em; animation: spin 1.1s infinite linear; } .gform_confirmation_message {font-family: inherit;font-size: 1.1em;font-weight: normal;background: rgba(255,255,255,0.85);text-align: center;padding: 1rem 1rem 1.5rem;border: 5px dashed seagreen;border-radius: 0.75rem;color: seagreen;} .gform_fileupload_rules { padding: 0 1rem 1rem; font-style: italic; } /* Validation styling */ .gform_wrapper.gravity-theme .gform_validation_errors { padding: 0.5rem 1rem; font-size: 0.8rem; line-height: 1.3; background: rgba(255,255,255,0.75); } .gform_wrapper .gform_validation_errors .gform_submission_error { border: none; margin: 0; } .gform_validation_errors p { margin: 0; } .gfield_error { border-color: #c02b0a; } .gform_wrapper.gravity-theme .gfield_validation_message, .gform_wrapper.gravity-theme .validation_message { background: none; border-left: none !important; border-right: none !important; border-bottom: none !important; } .gform_required_legend, #contact_section .sidebar-form-content { display: none; } /* Full width contact form */ #contact_section { --contain-padding: clamp(var(--mobile-padding), calc(50vw - 20rem), 26.3rem); padding-top: clamp(2.4rem, 10vw, 6.25rem); padding-bottom: clamp(2.4rem, 10vw, 6.25rem); } #contact_section .wp-block-cover__inner-container { background: rgba(255,255,255,0.9); padding: 1.25rem clamp(1.2rem, 10vw, 7.5rem) 3.25rem; } #contact_section .gform_title { text-align: center; } #contact_section .gform_description { font-size: clamp(0.7rem, 3vw, 0.9rem); } #contact_section .contact-emergency { display: block; margin-bottom: 1rem; } @media (prefers-reduced-motion:no-preference) { #contact_section .wp-block-cover__inner-container { opacity: 0; transform: translateY(2rem); transition: transform 0.6s, opacity 0.6s; } #contact_section.js-intersected .wp-block-cover__inner-container { opacity: 1; transform: translateY(0); } } /*-------------------------------------------------------------- # Header --------------------------------------------------------------*/ .header { position: relative; z-index: 9999; } .header .hdr-columns.wp-block-columns {padding-right: clamp(2rem, 4.3vw, 4.1rem);padding-left: clamp(2rem, 7.3vw, 7rem);min-height: 8.2rem;justify-content: center;align-items: center !important;} .header-logo {/* padding-top: clamp(0.8rem, 3vw, 1.5rem); *//* padding-bottom: clamp(0.8rem, 3vw, 1.5rem); *//* border: 1px dashed blue; */} .header-logo svg, .footer-logo svg { transition: transform 0.3s ease; height: clamp(4.26rem, 6vw, 5.5rem); } .header-logo a:is(:hover, :focus-visible) svg, .footer-logo:is(:hover, :focus-visible) svg { transform: scale(1.05); } .header-right {text-align: right;} .header-right-container {/* border: 1px solid red; */display: flex;justify-content: flex-end;align-items: center;gap: 0 2.5rem;} .header-quicklinks .menu-label {color: var(--wp--preset--color--dk-grey);/* padding: 0.65rem 0; */font-size: 1.2rem;border-bottom-left-radius: 3px;border-bottom-right-radius: 3px;line-height: 1.364;} .header-quicklinks .menu-label:is(:hover, :focus-visible) {color: var(--primary-color);} .header-quicklinks .menu-label:after {content: '|';content: '';position: absolute;right: -1.3rem;width: 0.05rem;height: 2.2rem;display: flex;justify-content: center;background: var(--wp--preset--color--content);} .header-quicklinks .menu-label svg { width: 1rem; height: 1rem; margin-right: 0.3rem; transform: translateY(-0.1rem); } .header-quicklinks .menu-label svg path {transition: 300ms;} .header-quicklinks .menu-label:is(:hover, :focus-visible) svg path { fill: var(--primary-color); } .header-number {font-size: 1.2rem;font-weight: 600;display: inline-block;color: var(--wp--preset--color--dk-grey); margin-block-start: 0;} .header-number:is(:hover, :focus-visible) {color: var(--primary-color);} .header-number svg {width: 1.2rem;height: 1.2rem;margin-right: 0.05rem; } .header-number svg path {transition: 300ms;} .header-number:is(:hover, :focus-visible) svg path { fill: var(--primary-color); } @media (max-width: 68.49em) { .header { z-index: 998; } .header-logo {text-align: center;} .header-right { display: none; } } /*-------------------------------------------------------------- # Content --------------------------------------------------------------*/ .wp-site-blocks { max-width: 96rem; margin: auto; } #main {margin: 0 0 0;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: 2rem;margin-right: 0.7rem;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; } .semibold-text { font-weight: 600; } @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 5rem;align-items: flex-start;margin-top: 1rem;} .bio-list .bio-box {grid-template-areas: "img" "label";flex: 0 1 calc(25% - 5rem);/* min-width: 7.5rem; */ /* Adjust to prevent names from wrapping */text-align: center;} .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 .bio-image { position: relative; } .bio-list .bio-box .bio-image:before {content: '';position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: var(--accent-color);opacity: 0;transition: opacity 300ms ease;} .bio-list .bio-box:is(:hover, :focus-visible) .bio-image:before { opacity: 0.75; } .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;} .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 { background: var(--grey); padding: 1.3rem clamp(1.2rem, 2.2vw, 2rem) 2.3rem; } #main .location-box .loc-title { padding-bottom: 0.9rem; margin-top: 0; } #main .location-list-detailed a {color: var(--content-color);background: linear-gradient(0deg, var(--accent-color), var(--accent-color)) no-repeat 0 bottom / 0 2px;transition: background-size 350ms;background-position-x: 1.6rem;width: fit-content;text-decoration: none;} #main .location-list-detailed a:is(:hover, :focus-visible) { background-size: 100% 2px; } .location-box p, .location-box .icon-item { margin-top: 0; font-style: normal; } .sub-menu .location-box .icon-item {margin-left: -0.5rem;padding-left: 2.3rem !important;} .sub-menu .location-box .icon-item svg { left: 0.5rem } .location-box svg {top: 0.45em;width: 0.9rem;height: 0.9rem;transform: translateY(0.2rem);} #main .location-box svg { color: var(--accent-color); } #main .location-box img { box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25); } @media only screen and (min-width: 37.5em) { .location-box { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; } .location-box .loc-title { flex: 0 0 100%; } .location-box:only-child .loc-left { flex: 0 0 12rem; } .location-box .loc-left { flex: 0 0 10rem; } .location-box .hours {} .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;position: relative;} .footer-bg-columns {position: absolute;bottom: 10.5rem;left: 0;} .footer-bg-circle { display: none; } .footer a, .footer h3 { color: var(--white); } .footer a, .location-list-names a {text-decoration: none;display: inline-block;width: fit-content;background: linear-gradient(0deg, var(--white), var(--white)) no-repeat 0 bottom / 0 2px;transition: background-size 350ms;font-size: var(--wp--preset--font-size--footer);} .footer a:is(:hover, :focus-visible) { background-size: 100% 2px; } #foot_content {justify-content: space-between;font-size: var(--wp--preset--font-size--footer);gap: 6%;z-index: 1;} .footer .ftr-column {margin: 0 0 1.5rem;text-align: center;} .ftr-top-logo-container {text-align: center;padding: 1.25rem 0;position: relative;} .ftr-top-logo-container:before {content: '';background-image: url('data:image/svg+xml, ');background-repeat: no-repeat;background-position: left;height: 0.3rem;position: absolute;top: 50%;right: 50%;left: 1.5rem;z-index: 0;} .ftr-top-logo-container:after {content: '';background-image: url('data:image/svg+xml, ');background-repeat: no-repeat;background-position: left;width: auto;height: 0.3rem;position: absolute;top: 50%;right: 1.5rem;left: 50%;z-index: 0;transform: rotateY(180deg);} .ftr-top-logo-container svg {background: var(--primary-color);z-index: 1;position: relative;padding: 0 0.6rem;width: 11.2rem;} .footer .footer-logo:is(:hover, :focus-visible) { background-size: 0; } .footer .location-list-detailed {gap: 0 2rem;} .ftr-loc-addr-box p {margin: 0 0 2rem;} .ftr-loc-ph-box p {margin: 0 0 1.2rem;} .ftr-loc-addr-box .hours-row {flex-wrap: wrap;justify-content: center;} .ftr-loc-addr-box .hours-day { width: 100%; } .footer .wp-block-search {max-width: 18rem;/* justify-content: center; */} .footer .wp-block-search__label { display:none; } .footer .wp-block-search__inside-wrapper {border-radius: 999px;overflow: hidden;background: var(--primary-color);} .footer .wp-block-search__input {padding: 0 0 0 0.75rem;border: none;color: #fff;} .footer .wp-block-search__input:is(:focus-visible) { outline-style: none; } .footer .wp-block-search__input::placeholder { color: #fff; font-family: 'Jura', sans-serif; opacity: 1; } .footer .wp-block-search__input::-ms-input-placeholder { color: #fff; font-family: 'Jura', sans-serif; } .footer .wp-block-search__button {padding: 0.1rem 0.75rem;border: 0;margin: 0;background: none;border-radius: 999px;font-size: 0.01px;min-width: 2.5rem;min-height: 2rem;position: relative;} .footer .wp-block-search__button:before {content: '';background-image: url(./images/search-icon.svg);background-repeat: no-repeat;background-position: center;width: 2.5rem;height: 2rem;position: absolute;top: 0;right: 0;} .footer .wp-block-search__button:is(:hover, :focus-visible) {background: var(--accent-color);} .ftr-loc-ph-box .phone.icon-item { font-weight: 700; } .footer-socials { margin: 0; } .social-menu { gap: 0.25rem 0; background: none; } .social-menu .wp-block-fuel-menu-item {width: 100%;} .footer .wp-block-heading {font-size: clamp(1.1rem, 2vw, 1.2rem);border-bottom: 1px solid var(--white);padding-bottom: 0.6rem;margin: 0 0 1rem;display: inline-block;position: relative;} .footer .wp-block-heading:after {content: '';width: 0.25rem;height: 0.25rem;background: #fff;border-radius: 50%;position: absolute;bottom: calc((0.125rem * -1) - 1px);right: 0;} .ftr-links-column { display: none; } .ftr-links-list { margin: 0; } ol.ftr-links-list.wp-block-navigation__container {list-style: initial !important;} .ftr-links-list .wp-block-navigation-item { margin: 0 0 0 !important; } @media (max-width: 68.49em) { #foot_content { flex-wrap: wrap !important; justify-content: center; } #footer-locations { flex-basis: 100% !important; } #footer-quick-links { display: none; } } @media (min-width: 48.875em) { /* 782px */ .footer-bg-columns {bottom: 0;} .footer .wp-block-heading { padding-bottom: 0.7rem; margin: 0 0 1.7rem; } } @media (min-width: 68.5em) { .footer { padding-top: 1.8rem; } .footer .ftr-column { text-align: left; } .ftr-top-logo-container { padding: 0 0 1.25rem; } .ftr-top-logo-container svg {padding: 0 1.2rem;width: 16.4rem;} body .location-list-detailed { justify-content: flex-start; } .ftr-loc-addr-box .hours-row { justify-content: flex-start; } .ftr-links-column { display: block; } } @media (min-width: 82.5em) { .ftr-top-logo-container:before, .ftr-top-logo-container:after { background-position: right; } #foot_content { padding-right: calc(50% - 25.6rem); padding-left: calc(50% - 25.6rem); } .footer-bg-circle {display: block;position: absolute;top: 0;right: 0;z-index: 0;} } .copyright-wrapper {padding-top: 1.2rem;padding-bottom: 5rem;background: var(--content-color);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 (min-width: 68.5em) { .copyright-wrapper { text-align: left; padding-bottom: 1.2rem; } .policy-menu { justify-content: end; } } /*-------------------------------------------------------------- # Contact Section --------------------------------------------------------------*/ .wp-block-template-part:has(.contact-section) { margin-top: 0; } .contact-section {margin: 0 0 0;position: relative;padding: 0 0 8.4rem;} .contact-section:after {content: '';background: url('data:image/svg+xml, ');background-size: contain;background-position: bottom;background-repeat: no-repeat;position: absolute;bottom: clamp(2rem,9.1vw,5rem);left: 0;width: 39.68vw;max-width: 38.1rem;height: 98.4rem;max-height: 98.5rem;z-index: -1;} body .contact-section-container {position: relative;border-radius: 1.25rem;overflow: hidden;box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.25);max-width: 35rem;background: #fff;} .contact-section-container:before {content: '';width: 0.4rem;position: absolute;top: 0;bottom: 50%;left: 0;background: var(--wp--preset--color--accent);} .contact-section-container:after {content: '';width: 0.4rem;position: absolute;top: 50%;bottom: 0;left: 0;background: var(--wp--preset--color--primary);} body .contact-section-columns { margin: 0; gap: 0; } .contact-section-text-col {position: relative;padding: 1.8rem 0.5rem 2.4rem 1.25rem;position: relative;} .contact-section-text-col-title {text-align: center;font-size: clamp(1.6rem, 3.7vw, 2rem);padding-bottom: 2rem;margin: 0 auto 1.4rem;position: relative;} .contact-section-text-col-title:after {content: '';background-image: url('data:image/svg+xml,');background-repeat: no-repeat;background-position: center;position: absolute;right: 0;bottom: 0;left: 0;margin: auto;height: 0.3rem;max-width: 100%;} .contact-section-content, .contact-section-emergency {font-size: clamp(0.9rem,1.9vw,1rem);margin: 0 0 1.2rem;text-align: center;} body .contact-section-img-col {position: relative;padding: 0 0.5rem 12.5rem 1.2rem;} .contact-section-img-col-container {margin: 0 auto;max-width: 24rem;position: relative;z-index: 1;} .contact-section-img-col-container .gform_description, .contact-section-img-col-container .gform_title { display: none; } .contact-section-img-col-container .gform_wrapper.gravity-theme .gform_fields {grid-row-gap: 1.6rem;} .contact-section-img-col-container .gform_wrapper.gravity-theme .gform_footer {padding: 0;margin: 2.4rem 0 0;justify-content: flex-start;} .contact-section-img-col-container .gform_wrapper.gravity-theme .gform_footer button {margin: 0;} .contact-section-bg-image {position: absolute;right: 0;bottom: 0;z-index: 0;} .contact-section-bg-image-desktop { display: none; } @media (min-width: 48.875em) { /* 782px */ body .contact-section-columns { display: block; } body .contact-section-text-col {margin-right: 3rem;margin-left: 3.8rem;} } @media (min-width: 68.5em) { .contact-section {padding: 0 1.5rem 8.4rem;} body .contact-section-container {max-width: 57.2rem;padding: 3.6rem 8.5rem 4rem 4.9rem;border-left: 1.3rem solid var(--primary-color);overflow: visible;} .contact-section-container:before {content: '';width: 1.3rem;position: absolute;top: 0;bottom: 50%;left: -1.3rem;background: var(--wp--preset--color--accent);border-radius: 1.25rem 0 0 0;} .contact-section-container:after { display: none; } body .contact-section-columns {display: flex;gap: 2.9rem;margin: 0;} .contact-section-text-col-title {text-align: left;padding-bottom: 1.6rem;margin: 0 0 2.1rem;} .contact-section-text-col-title:after { background-position: left; } body .contact-section-text-col {padding: 0;margin: 0;max-width: 22.5rem;text-align: left;} .contact-section-content, .contact-section-emergency { text-align: left; } body .contact-section-img-col {margin: 0;padding: 0;position: initial;]: 100%;max-width: 18.5rem;} .contact-section-img-col-container {width: 100%;margin: 0;padding-top: 6.1rem;} .contact-section-bg-image {display: none; } .contact-section-bg-image-desktop {display: block;position: absolute;top: 0;right: 0;bottom: 0;z-index: 0;margin: 0;border-radius: 0 1.25rem 1.25rem 0;overflow: hidden;} } @media (min-width: 91.25em) { /* 1460px */ .contact-section-text-col-title { margin-right: 4rem; } .contact-section-container:after {width: 10.4rem;height: 10.4rem;position: absolute;top: auto;right: -3.5rem;bottom: -3.5rem;left: auto;background: none;background-image: url('data:image/svg+xml, ');z-index: -2;} } /*-------------------------------------------------------------- # Map --------------------------------------------------------------*/ .fm-map { position: relative; width: 100%; height: 30rem; max-height: calc(90vh - 3.2rem); background: var(--grey); margin-bottom: 2rem; } .map-list-button { font-size: 1rem; } .map-list-button, .map-show-list, .map-show-map { background: none; } .map-show-map, .map-show-list { font-size: 0.8rem; } [hidden] { display: none; } /*-------------------------------------------------------------- # Animations --------------------------------------------------------------*/ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(var(--spin-rotation, 360deg)); } } @keyframes fadein { 0% { opacity: var(--fadein-opacity, 0); transform: translate(var(--x, 0), var(--y, 5rem)); } 100% { opacity: 1; transform: translate(0, 0); } } /* popAnimation Example: https://jsfiddle.net/KTC_88/8xkLv520/ */ @keyframes popAnimation { 0% {transform: scale(0.5); opacity: 0;} 80% {transform: scale(1.1)} 100% {transform: scale(1); opacity: 1} } @keyframes fade-in { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1;transform: scale(1); } } @keyframes fade-up { 0% {opacity: 0;transform: translateY(3rem);} 100% { opacity: 1; transform: translateY(0); } } @keyframes slideUp { 0% { transform: translateY(3rem); } 100% { transform: translateY(0rem); } } /** * Animation helper classes. */ @media (prefers-reduced-motion:no-preference) { .delay-100 {animation-delay: 100ms;} .delay-150 {animation-delay: 150ms;} .delay-200 {animation-delay: 200ms;} .delay-250 {animation-delay: 250ms;} .delay-300 {animation-delay: 300ms;} .delay-350 {animation-delay: 350ms;} .delay-400 {animation-delay: 400ms;} .delay-450 {animation-delay: 450ms;} .delay-500 {animation-delay: 500ms;} .delay-600 {animation-delay: 600ms;} .delay-700 {animation-delay: 700ms;} .delay-750 {animation-delay: 750ms;} .delay-800 {animation-delay: 800ms;} .delay-900 {animation-delay: 900ms;} .delay-1000 {animation-delay: 1000ms;} .delay-1100 {animation-delay: 1100ms;} .delay-1200 {animation-delay: 1200ms;} .delay-1300 {animation-delay: 1300ms;} .delay-1400 {animation-delay: 1400ms;} .delay-1500 {animation-delay: 1500ms;} .delay-1600 {animation-delay: 1600ms;} /* Add to wrappers to animate children */ .popin > * { transform: scale(0.5); opacity: 0; } .popin.js-intersected > * { --delay:calc(var(--i, 0) * 200ms); animation: popAnimation 400ms ease var(--delay) forwards } .fadein-items > * { opacity: 0; transform: translateY(0); } .fadein-items.js-intersected > * { --delay:calc(var(--i, 0) * 200ms); animation: fadein var(--time, 400ms) ease var(--delay) forwards } /* Add directly to element that will be affected */ .fadein {opacity: 0;transform: translateY(0);--y: 0;} .fadeup { opacity: 0; transform: translateY(5rem); } .fadedown { opacity: 0; transform: translateY(-5rem); --y: -5rem; } .fadeleft { opacity: 0; transform: translateX(-5rem); --x: -5rem; --y: 0; } .faderight { opacity: 0; transform: translateX(5rem); --x: 5rem; --y: 0; } .js-intersected:is(.fadein, .fadeup, .fadedown, .fadeleft, .faderight) { animation: fadein var(--time, 300ms) var(--easing, ease) forwards } } @media (prefers-reduced-motion:no-preference) and (min-width: 68.5em) { /* Fade-In */ .fade-in {opacity: 0;transform: scale(0.9);} .js-intersected .fade-in {animation-name: fade-in;animation-duration: 500ms;animation-fill-mode: forwards;} /* Fade-Up */ .fade-up { opacity: 0; transform: translateY(3rem); } .js-intersected .fade-up {animation-name: fade-up;animation-duration: 500ms;animation-fill-mode: forwards;} /* Slide Up */ .slideUp {transform: translateY(3rem);} .js-intersected .slideUp {animation-name: slideUp;animation-duration: 500ms;animation-fill-mode: forwards;} } /*-------------------------------------------------------------- ## Page Transition # @see https://css-tricks.com/animating-with-clip-path/ # @see https://www.uplabs.com/posts/clip-path-generator --------------------------------------------------------------*/ .page-transition { display: none; } /* * Page transition bug: * Mobile, page transition: Something to take note on. Whenever I click to a page, * then press back on my iPhone, the page transition is locked and I only see the green background color over my whole screen. * I can’t navigate from that point at all anymore. */ /* @media (prefers-reduced-motion:no-preference) { .page-transition { display: block; will-change: transform; background-color: var(--wp--preset--color--menu-hover-bg); pointer-events: none; } .transition-in { animation: 0.3s slidein-left forwards; } .transition-out { animation: 0.3s slideout-right 0.3s forwards; } @keyframes slidein-left { 0% { clip-path: inset(0% 100% 0% 0%); } 100% { clip-path: inset(0% 0% 0% 0%); } } @keyframes slideout-right { 0% { clip-path: inset(0% 0% 0% 0%); } 100% { clip-path: inset(0% 0% 0% 100%); } } } */ /*-------------------------------------------------------------- # Print --------------------------------------------------------------*/ @media print { @page { margin: 0.5cm; } * { background: transparent !important; color: black !important; text-shadow: none !important; -webkit-filter: none !important; filter: none !important; -ms-filter: none !important; } a, a:visited { color: #444 !important; text-decoration: underline; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } p, h1, h2, h3 { orphans: 3; widows: 3; } h1, h2, h3 { page-break-after: avoid; } .main-header { padding-top: 0 !important; padding-bottom: 0 !important; } .main-title { margin: 0; padding-bottom: 1rem; border-bottom: 2px solid #000; } .primary-menu, #sidebar, .header, .footer, .page-navigation, .pagination, .wp-prev-next, .respond-form { display: none !important; } } /*-------------------------------------------------------------- # Safari 15.3 fallbacks Safari 15.3 and under bug fixes - welcome to the new IE --------------------------------------------------------------*/ @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { /* Hide Dialog (not supported) */ dialog { display: none; background-color: var(--white); z-index: 9999; } dialog[open] { display: block; } /* Menu Fixes */ .js-active .sub-menu-trigger[aria-expanded=true] + .sub-menu .sub-animate > * { background: var(--white); } .primary-menu .menu-label:hover { color: var(--white); } } }